🖼️ Image Playground

⭐ Difficulty: ⭐⭐ ⏱️ Est. Time: 1h 📂 Graphics & Media

Apple Intelligence-based AI image generation framework

iOS 18+Apple Intelligence

✨ Image Playground?

Image Playground is an Apple Intelligence-based image generation framework introduced in iOS 18. It creates unique images on-device by combining text prompts, concepts, and styles. It provides system UI and APIs so users can easily create and share images in Messages, Notes, social apps and more. All processing happens on-device to protect privacy.

💡 Key Features: AI Image Generation · Text Prompts · Style Selection (Animation/Illustration/Sketch) · On-Device Processing · System UI Integration · Fast Generation

🎨 1. 기본 이미지 생성

Generate images through the ImagePlayground system UI.

ImagePlaygroundView.swift — Basic Generation

import SwiftUI

// NOTE: Image Playground는 iOS 18의 새로운 기능으로,
// 아직 공개 API가 확정되지 않았습니다.
// 아래는 예상되는 API 패턴입니다.

struct ImagePlaygroundView: View {
    @State private var generatedImage: Image?
    @State private var showImageGenerator = false
    @State private var prompt = ""

    var body: some View {
        VStack(spacing: 20) {
            // 생성된 이미지 표시
            if let generatedImage {
                generatedImage
                    .resizable()
                    .scaledToFit()
                    .frame(maxHeight: 300)
                    .cornerRadius(12)
                    .shadow(radius: 5)
            } else {
                RoundedRectangle(cornerRadius: 12)
                    .fill(Color.gray.opacity(0.2))
                    .frame(height: 300)
                    .overlay {
                        VStack {
                            Image(systemName: "photo.on.rectangle.angled")
                                .font(.system(size: 50))
                            Text("이미지를 생성해보세요")
                                .font(.headline)
                        }
                        .foregroundStyle(.secondary)
                    }
            }

            // 프롬프트 입력
            TextField("원하는 이미지 설명", text: $prompt)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)

            // 생성 버튼
            Button {
                showImageGenerator = true
            } label: {
                Label("이미지 생성", systemImage: "wand.and.stars")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundStyle(.white)
                    .cornerRadius(12)
            }
            .padding(.horizontal)
            .disabled(prompt.isEmpty)
        }
        .padding()
        // Image Playground 시트 표시
        // .imagePlayground(isPresented: $showImageGenerator, prompt: prompt) { result in
        //     if case .success(let image) = result {
        //         generatedImage = Image(uiImage: image)
        //     }
        // }
    }
}

// 예상되는 이미지 생성 결과 타입
enum ImageGenerationResult {
    case success(UIImage)
    case failure(Error)
    case cancelled
}

🎭 2. 스타일 선택

Generate images in various styles including Animation, Illustration, and Sketch.

StyleSelector.swift — 스타일 선택

import SwiftUI

// Image Playground 스타일 옵션
enum ImagePlaygroundStyle: String, CaseIterable, Identifiable {
    case animation = "애니메이션"
    case illustration = "일러스트"
    case sketch = "스케치"

    var id: String { rawValue }

    var icon: String {
        switch self {
        case .animation: return "film"
        case .illustration: return "paintbrush"
        case .sketch: return "pencil.tip"
        }
    }

    var description: String {
        switch self {
        case .animation:
            return "3D 캐릭터와 생동감 있는 애니메이션 스타일"
        case .illustration:
            return "상세하고 다채로운 일러스트레이션"
        case .sketch:
            return "단순하고 예술적인 스케치"
        }
    }
}

struct StyleSelectorView: View {
    @State private var selectedStyle: ImagePlaygroundStyle = .animation
    @State private var prompt = ""
    @State private var generatedImage: Image?
    @State private var isGenerating = false

    var body: some View {
        ScrollView {
            VStack(spacing: 24) {
                // 스타일 선택
                VStack(alignment: .leading, spacing: 12) {
                    Text("스타일 선택")
                        .font(.headline)

                    HStack(spacing: 12) {
                        ForEach(ImagePlaygroundStyle.allCases) { style in
                            Button {
                                selectedStyle = style
                            } label: {
                                VStack(spacing: 8) {
                                    Image(systemName: style.icon)
                                        .font(.title2)
                                    Text(style.rawValue)
                                        .font(.caption)
                                }
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(
                                    selectedStyle == style ?
                                        Color.blue : Color.gray.opacity(0.2)
                                )
                                .foregroundStyle(
                                    selectedStyle == style ? .white : .primary
                                )
                                .cornerRadius(12)
                            }
                        }
                    }

                    Text(selectedStyle.description)
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
                .padding(.horizontal)

                // 프롬프트 입력
                VStack(alignment: .leading, spacing: 8) {
                    Text("이미지 설명")
                        .font(.headline)

                    TextField("예: 우주를 여행하는 고양이", text: $prompt, axis: .vertical)
                        .textFieldStyle(.roundedBorder)
                        .lineLimit(3...5)
                }
                .padding(.horizontal)

                // 생성 버튼
                Button {
                    generateImage()
                } label: {
                    HStack {
                        if isGenerating {
                            ProgressView()
                                .tint(.white)
                            Text("생성 중...")
                        } else {
                            Image(systemName: "wand.and.stars")
                            Text("이미지 생성")
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundStyle(.white)
                    .cornerRadius(12)
                }
                .padding(.horizontal)
                .disabled(prompt.isEmpty || isGenerating)

                // 생성된 이미지
                if let generatedImage {
                    VStack(alignment: .leading, spacing: 8) {
                        Text("생성된 이미지")
                            .font(.headline)

                        generatedImage
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(12)
                            .shadow(radius: 5)
                    }
                    .padding(.horizontal)
                }
            }
            .padding(.vertical)
        }
    }

    func generateImage() {
        isGenerating = true

        // 실제 구현에서는 Image Playground API 호출
        Task {
            try? await Task.sleep(for: .seconds(2))
            isGenerating = false
            // generatedImage = ...
        }
    }
}

💬 3. 메시지 앱 통합

메시지 앱에서 이미지를 생성하고 공유.

MessageExtension.swift — Messages Integration

import SwiftUI
import Messages

// 메시지 확장에서 Image Playground 사용
struct MessageImageGeneratorView: View {
    @State private var prompt = ""
    @State private var generatedImage: UIImage?
    @State private var showGenerator = false

    var onImageGenerated: (UIImage) -> Void

    var body: some View {
        VStack {
            TextField("이미지 설명", text: $prompt)
                .textFieldStyle(.roundedBorder)
                .padding()

            Button("생성하기") {
                showGenerator = true
            }
            .buttonStyle(.borderedProminent)
            .disabled(prompt.isEmpty)

            if let generatedImage {
                Image(uiImage: generatedImage)
                    .resizable()
                    .scaledToFit()
                    .frame(maxHeight: 200)
                    .cornerRadius(12)

                Button("메시지로 전송") {
                    onImageGenerated(generatedImage)
                }
                .buttonStyle(.borderedProminent)
            }
        }
    }
}

// 메시지 스티커로 변환
extension UIImage {
    func toMessageSticker() -> MSSticker? {
        // 임시 파일로 저장
        let tempURL = FileManager.default.temporaryDirectory
            .appendingPathComponent(UUID().uuidString)
            .appendingPathExtension("png")

        guard let data = self.pngData() else { return nil }

        do {
            try data.write(to: tempURL)
            return try MSSticker(contentsOfFileURL: tempURL, localizedDescription: "Generated")
        } catch {
            print("❌ 스티커 생성 실패: \(error)")
            return nil
        }
    }
}

🎁 4. 컨셉 기반 생성

Combine predefined concepts (themes, places, objects) to generate images.

ConceptGenerator.swift — Concept Composition

import SwiftUI

// 이미지 생성 컨셉
enum ImageConcept: String, CaseIterable {
    // 캐릭터
    case cat = "고양이"
    case dog = "강아지"
    case astronaut = "우주인"
    case robot = "로봇"

    // 장소
    case space = "우주"
    case beach = "해변"
    case mountain = "산"
    case city = "도시"

    // 활동
    case flying = "날아가는"
    case dancing = "춤추는"
    case reading = "책 읽는"
    case playing = "놀고 있는"
}

struct ConceptBasedGeneratorView: View {
    @State private var selectedCharacter: ImageConcept?
    @State private var selectedPlace: ImageConcept?
    @State private var selectedActivity: ImageConcept?
    @State private var generatedImage: Image?

    let characters: [ImageConcept] = [.cat, .dog, .astronaut, .robot]
    let places: [ImageConcept] = [.space, .beach, .mountain, .city]
    let activities: [ImageConcept] = [.flying, .dancing, .reading, .playing]

    var combinedPrompt: String {
        var parts: [String] = []
        if let activity = selectedActivity {
            parts.append(activity.rawValue)
        }
        if let character = selectedCharacter {
            parts.append(character.rawValue)
        }
        if let place = selectedPlace {
            parts.append("in \(place.rawValue)")
        }
        return parts.joined(separator: " ")
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 24) {
                // 캐릭터 선택
                conceptSection(
                    title: "캐릭터",
                    concepts: characters,
                    selected: $selectedCharacter
                )

                // 활동 선택
                conceptSection(
                    title: "활동",
                    concepts: activities,
                    selected: $selectedActivity
                )

                // 장소 선택
                conceptSection(
                    title: "장소",
                    concepts: places,
                    selected: $selectedPlace
                )

                // 조합된 프롬프트
                VStack(alignment: .leading, spacing: 8) {
                    Text("생성될 이미지")
                        .font(.headline)

                    Text(combinedPrompt.isEmpty ? "위에서 선택해주세요" : combinedPrompt)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                }
                .padding(.horizontal)

                // 생성 버튼
                Button {
                    generateImageWithConcepts()
                } label: {
                    Label("이미지 생성", systemImage: "wand.and.stars")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue)
                        .foregroundStyle(.white)
                        .cornerRadius(12)
                }
                .padding(.horizontal)
                .disabled(combinedPrompt.isEmpty)

                // 결과
                if let generatedImage {
                    generatedImage
                        .resizable()
                        .scaledToFit()
                        .cornerRadius(12)
                        .padding(.horizontal)
                }
            }
            .padding(.vertical)
        }
    }

    func conceptSection(
        title: String,
        concepts: [ImageConcept],
        selected: Binding<ImageConcept?>
    ) -> some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(title)
                .font(.headline)

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 12) {
                    ForEach(concepts, id: \.self) { concept in
                        Button {
                            if selected.wrappedValue == concept {
                                selected.wrappedValue = nil
                            } else {
                                selected.wrappedValue = concept
                            }
                        } label: {
                            Text(concept.rawValue)
                                .padding(.horizontal, 16)
                                .padding(.vertical, 8)
                                .background(
                                    selected.wrappedValue == concept ?
                                        Color.blue : Color.gray.opacity(0.2)
                                )
                                .foregroundStyle(
                                    selected.wrappedValue == concept ? .white : .primary
                                )
                                .cornerRadius(20)
                        }
                    }
                }
                .padding(.horizontal)
            }
        }
    }

    func generateImageWithConcepts() {
        // Image Playground API로 이미지 생성
        print("🎨 프롬프트: \(combinedPrompt)")
    }
}

⚙️ 5. 고급 설정

Configure advanced options like image size, quality, and transformations.

AdvancedSettings.swift — Advanced Settings

import SwiftUI

// 이미지 생성 설정
struct ImageGenerationSettings {
    var style: ImagePlaygroundStyle = .animation
    var aspectRatio: AspectRatio = .square
    var numberOfVariations: Int = 1
    var seed: Int? = nil // 일관된 결과를 위한 시드

    enum AspectRatio: String, CaseIterable {
        case square = "1:1"
        case portrait = "3:4"
        case landscape = "4:3"
    }
}

struct AdvancedGeneratorView: View {
    @State private var settings = ImageGenerationSettings()
    @State private var prompt = ""
    @State private var variations: [Image] = []

    var body: some View {
        Form {
            Section("프롬프트") {
                TextField("이미지 설명", text: $prompt, axis: .vertical)
                    .lineLimit(3...5)
            }

            Section("스타일") {
                Picker("스타일", selection: $settings.style) {
                    ForEach(ImagePlaygroundStyle.allCases) { style in
                        Text(style.rawValue).tag(style)
                    }
                }
            }

            Section("비율") {
                Picker("종횡비", selection: $settings.aspectRatio) {
                    ForEach(ImageGenerationSettings.AspectRatio.allCases, id: \.self) { ratio in
                        Text(ratio.rawValue).tag(ratio)
                    }
                }
                .pickerStyle(.segmented)
            }

            Section("변형") {
                Stepper("변형 개수: \(settings.numberOfVariations)", value: $settings.numberOfVariations, in: 1...4)
            }

            Section {
                Button("생성하기") {
                    generateVariations()
                }
                .frame(maxWidth: .infinity)
                .disabled(prompt.isEmpty)
            }

            if !variations.isEmpty {
                Section("결과") {
                    ForEach(variations.indices, id: \.self) { index in
                        VStack {
                            variations[index]
                                .resizable()
                                .scaledToFit()
                                .cornerRadius(12)

                            HStack {
                                Button("저장") {
                                    saveImage(at: index)
                                }
                                .buttonStyle(.bordered)

                                Button("공유") {
                                    shareImage(at: index)
                                }
                                .buttonStyle(.bordered)
                            }
                        }
                    }
                }
            }
        }
        .navigationTitle("고급 설정")
    }

    func generateVariations() {
        // Image Playground API로 여러 변형 생성
        print("🎨 \(settings.numberOfVariations)개 변형 생성")
    }

    func saveImage(at index: Int) {
        // 포토 라이브러리에 저장
        print("💾 이미지 \(index) 저장")
    }

    func shareImage(at index: Int) {
        // 공유 시트 표시
        print("📤 이미지 \(index) 공유")
    }
}

💡 HIG Guidelines

Privacy: 모든 처리는 온디바이스에서 수행됨
Apple Intelligence 요구: Requires iOS 18+ and Apple Intelligence supported devices
System UI: 가능한 경우 시스템 제공 UI 사용
컨텍스트: 앱 맥락에 맞는 프롬프트 제공

🎯 Practical Usage

메시지 앱: 대화 중 이모티콘/스티커 생성
노트 앱: 노트에 삽화 추가
Social Media: 게시물용 이미지 생성
크리에이티브 앱: 디자인 초안 생성
Education Apps: Learning Resources 시각화

📚 Learn More

⚡️ Performance Tips: Image Playground leverages the Neural Engine for fast image generation, though complex prompts may take longer. Show progress to the user during generation, and generate only while the app is in the foreground (background generation isn't supported). Generated images are stored on device with iCloud sync support.

📝 참고: Image Playground is an Apple Intelligence feature of iOS 18 — APIs may change at official release. The above code is based on expected patterns; refer to Apple's official documentation for actual implementation.

📎 Apple Official Resources

📘 Documentation 🎬 WWDC Sessions