🖼️ Image Playground

Apple Intelligence 기반 AI 이미지 생성 프레임워크

iOS 18+Apple Intelligence

✨ Image Playground란?

Image Playground는 iOS 18에서 도입된 Apple Intelligence 기반 이미지 생성 프레임워크입니다. 텍스트 프롬프트, 개념, 스타일을 조합하여 온디바이스 AI로 독창적인 이미지를 생성합니다. 메시지 앱, 노트 앱, 소셜 앱 등에서 사용자가 쉽게 이미지를 만들고 공유할 수 있도록 시스템 UI와 API를 제공합니다. 프라이버시를 보호하며 디바이스에서 직접 처리됩니다.

💡 핵심 기능: AI 이미지 생성 · 텍스트 프롬프트 · 스타일 선택 (Animation/Illustration/Sketch) · 온디바이스 처리 · 시스템 UI 통합 · 빠른 생성

🎨 1. 기본 이미지 생성

ImagePlayground 시스템 UI를 통해 이미지를 생성합니다.

ImagePlaygroundView.swift — 기본 생성

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. 스타일 선택

Animation, Illustration, 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 — 메시지 통합

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. 컨셉 기반 생성

사전 정의된 컨셉(테마, 장소, 사물)을 조합하여 이미지를 생성합니다.

ConceptGenerator.swift — 컨셉 조합

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. 고급 설정

이미지 크기, 품질, 변형 등 고급 옵션을 설정합니다.

AdvancedSettings.swift — 고급 설정

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 가이드라인

프라이버시: 모든 처리는 온디바이스에서 수행됨
Apple Intelligence 요구: iOS 18+ 및 Apple Intelligence 지원 기기 필요
시스템 UI: 가능한 경우 시스템 제공 UI 사용
컨텍스트: 앱 맥락에 맞는 프롬프트 제공

🎯 실전 활용

메시지 앱: 대화 중 이모티콘/스티커 생성
노트 앱: 노트에 삽화 추가
소셜 미디어: 게시물용 이미지 생성
크리에이티브 앱: 디자인 초안 생성
교육 앱: 학습 자료 시각화

📚 더 알아보기

⚡️ 성능 팁: Image Playground는 Neural Engine을 활용하여 빠르게 이미지를 생성하지만, 복잡한 프롬프트는 더 오래 걸릴 수 있습니다. 생성 중 사용자에게 진행 상태를 표시하고, 백그라운드 생성은 지원되지 않으므로 앱이 포그라운드에 있을 때만 생성하세요. 생성된 이미지는 디바이스에 저장되며 iCloud 동기화를 지원합니다.

📝 참고: Image Playground는 iOS 18의 Apple Intelligence 기능으로, 정식 출시 시 API가 변경될 수 있습니다. 위 코드는 예상되는 패턴을 기반으로 작성되었으며, 실제 구현은 Apple의 공식 문서를 참고하세요.