Image Playground를 사용하여 고품질 이미지 생성하기

Image Playground를 사용하여 고품질 이미지 생성하기

Image Playground를 사용하여 앱에서 고품질 이미지 생성을 구현하세요. 비공개 클라우드 컴퓨팅에서 실행되는 새로운 생성형 모델을 통해 사용자는 앱에서 사진처럼 사실적인 스타일을 비롯해 거의 모든 스타일의 이미지를 만들 수 있습니다. 또한 한층 더 많은 곳에서 사용하기 위해 크기를 지정할 수 있으며, 사용자가 자연어 설명과 터치 기능을 사용하여 이미지를 수정하도록 할 수 있습니다. Image Playground를 도입하고, 설명과 사진에서 이미지를 생성하며, 앱에서 기능 사용 가능 여부를 관리하는 방법을 살펴보세요.

챕터
- 0:00 - Introduction
- 2:03 - Capabilities
- 5:02 - Adopt Image Playground
- 8:29 - Options
- 12:15 - Availability
리소스
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC26
- 비공개 클라우드 컴퓨팅에서 Apple Foundation Model 활용하기
- PencilKit으로 획 사이에 숨은 뜻 파악하기
WWDC24
- Genmoji로 앱에서 더욱 풍부한 표현 선보이기
안녕하세요, 저는 Antonio입니다 Image Playground 팀의 엔지니어예요
오늘은 앱에 Image Playground를 추가하는 방법을 알려드리겠습니다
사람들은 Messages의 Image Playground로 이미지를 만들고 있고 Freeform과 여러분의 앱에서도 활용하고 있습니다 다양한 장면을 조합하고 여러 스타일을 시도해 보며 개성 있는 이미지를 만들어 왔습니다 강력한 이미지 모델을 핵심으로 경험을 새롭게 재구상했습니다 이제 획기적인 도약이 이루어집니다 사실상 어떤 스타일로든 고품질 이미지를 만들 수 있고 사진처럼 사실적인 이미지까지 실제처럼 보이게 됐습니다
ImagePlayground 프레임워크는 그 완전한 경험을 제공합니다 동일한 강력한 모델 동일한 스타일 동일한 품질을 앱에 직접 전달합니다 Image Playground 앱은 iOS, iPadOS, macOS, visionOS에서 사용 가능합니다 Apple Intelligence를 지원하는 기기에서 실행되며 생성 모델의 모든 역량을 앱에서 활용할 수 있습니다
Image Playground 앱과 마찬가지로 ImagePlayground.framework API를 활용할 수 있습니다 동일한 플랫폼에서요 앱에 Image Playground를 추가하는 방법을 살펴보겠습니다 먼저 기능부터 시작하겠습니다 이미지 생성 모델이 무엇을 만들 수 있는지 살펴볼게요
그런 다음 Image Playground를 도입하는 방법을 보여드리고 시트를 표시하고 앱의 맥락으로 초기 설정하는 법을 알려드립니다
그 다음엔 크기, 가로세로 비율, 스타일 등 옵션을 다룰게요 마지막으로 가용성입니다 지원 기기와 미지원 기기 모두를 앱에서 적절히 처리하는 방법을 알아봅니다 코드를 작성하기 전에 Image Playground가 앱에서 무엇을 가능하게 하는지 살펴봅시다 모델에 텍스트 설명을 주면 일치하는 이미지를 만들어 줍니다 구체적으로 지정할 수도 있고 열린 방식으로 표현할 수도 있습니다 "개, 풍선, 색종이 조각이 있는 생일 파티"처럼 구체적으로 하거나 그냥 "축하"라고 해도 됩니다 나머지는 모델이 알아서 합니다 모델은 사람이 포함된 이미지도 만들 수 있습니다 한 장면에 여러 명이 등장하는 이미지도 가능합니다 개인화 기능을 켜면 Photos 라이브러리에서 사람을 불러오거나 텍스트로 외모를 묘사할 수도 있습니다 결과는 개성 넘치는 이미지가 됩니다 다양한 스타일을 활용할 수 있습니다 스타일을 지정하지 않고 이미지를 요청할 수도 있고 원하는 스타일을 텍스트로 지정할 수도 있습니다 예를 들어 유화 스타일로 요청하는 식이죠
또는 프리셋 중 하나를 사용할 수 있어요 Animation은 생동감 있는 캐릭터를 표현합니다 Illustration은 세련되고 편집자적인 느낌을 줍니다
Sketch는 손으로 그린 느낌을 만들어 냅니다
Genmoji는 표현력 있는 스타일로 텍스트에 직접 넣을 수 있는 이모지 크기의 캐릭터를 만듭니다
Image Playground는 다양한 크기와 가로세로 비율을 지원합니다 배너용 가로형 이미지를 요청할 수 있고 iPhone 전체 화면용 세로형 이미지도 가능합니다 섬네일용 정사각형도 됩니다 모델은 요청한 크기에 가장 가까운 지원 해상도를 선택합니다 요청한 크기에 가장 가깝게요 이 모든 것은 Private Cloud Compute에서 실행됩니다 Apple의 개인정보 보호 클라우드 인프라입니다 데이터는 Apple에도 저장되거나 공유되지 않습니다 작동 방식을 더 자세히 알아보려면 다음 세션을 확인하세요 "Private Cloud Compute에서 새로운 Apple Foundation Model로 빌드하기"
Image Playground에는 사용 한도가 있습니다 강력한 서버 모델에 의존하기 때문입니다 대부분의 iCloud+ 구독 플랜으로 더 많은 접근 권한을 얻을 수 있습니다 개발자 입장에서는 이런 문제를 해결할 필요가 없습니다 서버를 프로비저닝할 필요도 인프라를 유지 관리할 필요도 없습니다 시스템이 사용자의 사용 한도를 대신 관리해 드립니다 사용량 관련 UI를 직접 만들 필요가 없습니다 프레임워크를 호출하세요 나머지는 Apple이 처리합니다 모델을 Private Cloud Compute로 이전하면서 API도 재설계했습니다 ImageCreator는 코드에서 직접 이미지를 생성하는 비 UI API인데 이제 지원이 중단됩니다
이제 새로운 API를 통해 모든 것을 이용할 수 있습니다 더 높은 이미지 품질과 내장된 개인정보 보호 그리고 사람들이 이미 익숙한 완전한 경험까지 제공합니다 앱에서 ImageCreator를 사용하고 있다면 계속 시청하세요 이제 앱에 Image Playground를 추가하는 방법을 살펴보겠습니다 코드에서 어떻게 구현되는지 보여드리기 위해 Postcards라는 인사 카드 제작 앱을 만들고 있었습니다 Postcards로 맞춤형 카드를 디자인하고 개인 메시지를 작성하고 레이아웃을 선택할 수 있습니다 마지막으로 카드 앞면에 들어갈 맞춤 삽화가 필요합니다 바로 여기에 Image Playground가 활용됩니다 Image Playground 도입은 뷰 수정자 하나로 시작합니다 SDK 초기화도, API 키도, 서버 엔드포인트도 필요 없습니다. 수정자만 있으면 됩니다 버튼에 .imagePlaygroundSheet를 추가하고 @State 불리언에 바인딩합니다 바인딩이 true로 바뀌면 시트가 나타납니다 Image Playground가 모든 것을 처리합니다 UI, 모델 상호작용, 스타일 선택기까지요
사용자가 이미지를 수락하면 완료 클로저가 생성된 파일의 URL을 받습니다 해당 URL은 앱 컨테이너 내 임시 위치를 가리킵니다 세션이 끝나기 전에 다른 위치에 저장하세요 시트는 완성된 일관된 경험으로 앱에 통합됩니다 사용자는 설명을 입력하고 스타일 옵션을 탐색하며 라이브러리에서 인물을 포함하고 확인하기 전에 결과를 미리 볼 수 있습니다 앱은 표시할 준비가 된 최종 URL을 받습니다 시트는 빈 프롬프트로 열 수도 있고 앱의 맥락으로 미리 채울 수도 있습니다 더 풍부한 초기 경험을 위해서요
ImagePlaygroundConcept에는 두 가지 팩토리 메서드가 있습니다 text는 직접적인 설명을 감쌉니다 여기서는 카드의 테마를 전달합니다 예를 들어 벚꽃처럼요 extracted는 긴 텍스트를 받아 시스템이 가장 관련성 있는 아이디어를 추출합니다 카드의 메시지를 전달합니다 모델이 카드의 주제를 파악할 수 있도록요 컨셉을 설정하면 시트가 이 특정 카드에 맞게 미리 준비된 상태로 열립니다 사용자가 처음부터 시작할 필요가 없습니다 시트에 이미지를 미리 채울 수도 있습니다 sourceImage 파라미터에 SwiftUI Image를 전달하면 됩니다 사용자가 라이브러리에서 선택한 사진이나 카드에 이미 있는 이미지를 넣을 수 있습니다 Image Playground는 이를 컨셉과 함께 시각적 영감으로 활용합니다 사용자는 시트 내에서 이미지를 교체하거나 다듬을 수 있으며 시작점일 뿐, 제약이 아닙니다 iPad에서 Postcards는 카드 앞면 아래에 작은 캔버스를 표시합니다 ImagePlaygroundConcept.drawing은 PencilKit의 PKDrawing을 받아서 텍스트와 함께 컨셉으로 추가합니다 모델은 획을 시각적 제안으로 처리하여 구성을 유도하되 고정하지는 않습니다 PencilKit의 드로잉에 대해 더 알아보려면 "PencilKit으로 획 사이를 읽기"를 확인하세요
UIKit 또는 AppKit 앱을 개발하고 있다면 ImagePlaygroundViewController가 뷰 컨트롤러로 동일한 경험을 제공합니다 표시 전에 컨셉과 옵션을 프로퍼티로 설정하고 그런 다음 구현합니다 imagePlaygroundViewController, didCreateImageAt을 델리게이트에서 구현해 결과를 받습니다 API는 SwiftUI와 동일합니다 이제 Postcards에 맞게 시트를 설정해 봅시다 크기, 스타일, 개인화 등 옵션을 구성합니다 ImagePlaygroundOptions와 ImagePlaygroundStyle을 사용하면 플레이그라운드 설정을 관리할 수 있습니다 크기와 가로세로 비율 사용 가능한 스타일, 미리 선택된 스타일, 개인화 설정이 포함됩니다 카드 삽화를 생성하든, 잠금 화면 배경 화면이든 배너든 Genmoji 아이콘이든 동일한 API가 맞게 조정됩니다 Postcards는 가로형, 세로형, 정사각형 세 가지 카드 포맷을 지원합니다 각 포맷은 CGSize를 저장합니다 .closest(to: 에 직접 전달하면 시스템이 지원하는 가장 가까운 가로세로 비율과 해상도로 매핑합니다 포맷이 카드의 프로퍼티이므로 크기 요청이 자동으로 조정됩니다 가로형 카드는 넓은 이미지를, 세로형 카드는 긴 이미지를 요청합니다 .imagePlaygroundOptions를 사용해 시트에 옵션을 전달합니다
ImagePlaygroundStyle에는 illustration처럼 여러 값이 있습니다 sketch, animation, emoji도 있습니다 imagePlaygroundGenerationStyle은 두 가지 인수를 받습니다 선택기가 열릴 때의 기본 스타일과 표시할 스타일을 제한하는 허용 목록입니다 허용 목록에 스타일을 하나만 전달하면 선택기가 그 스타일로 고정됩니다
Postcards에서 각 카드는 StylePreset을 가지며 이 값에 직접 매핑됩니다 클래식 카드는 illustration이 기본이고 illustration과 sketch만 허용합니다 표현력 있는 카드는 animation이 기본이고 illustration과 emoji도 허용합니다 스타일 선택기는 열린 카드에 맞게 자동으로 반영됩니다
externalProvider는 옵트인 스타일로 설정에서 사용자가 구성한 서드파티 제공업체를 표시합니다 예를 들어 ChatGPT 같은 것이요 제공하려면 .allowedStyles 목록에 추가하면 됩니다 사용자가 제공업체를 설정했다면 선택기에 탭이 나타납니다 설정하지 않았다면 시스템이 설정을 처리하므로 앱에서 별도로 확인할 필요가 없습니다 기본 스타일로도 전달할 수 있습니다 앱의 맥락에서 그것이 적합한 경우에는요 어느 쪽이든 선택기는 실제로 사용 가능한 것에 맞게 조정됩니다 ImagePlaygroundStyle.emoji는 표현력 있는 이모지 크기 캐릭터에 맞게 조정됩니다 활성화되면 시트가 별도의 완료 핸들러를 실행합니다 onAdaptiveImageGlyphCreation URL 대신 NSAdaptiveImageGlyph를 전달받습니다 어댑티브 이미지 글리프는 특별합니다 이모지처럼 텍스트에 직접 인라인으로 삽입할 수 있습니다 이모지와 마찬가지로요 수신자 이름 옆에 표시되는 카드 섬네일에 딱 맞는 기능입니다 수신자 이름 옆에 표시됩니다
텍스트에서 어댑티브 이미지 글리프로 할 수 있는 모든 것 렌더링, 저장, 커스텀 텍스트 엔진까지 "Genmoji로 앱에 표현력 더하기"를 확인하세요
개인화는 기본적으로 활성화되어 있습니다 Photos 라이브러리에서 사람을 포함할 수 있게 해주며 인사 카드를 진정 개인적으로 느끼게 하는 강력한 방법입니다 앱 맥락에서 필요하지 않다면 예를 들어 제품 이미지 생성기를 만들고 있다면 options.personalization을 disabled로 설정할 수 있습니다 인물 선택기와 이름 감지가 시트에서 완전히 사라집니다 마지막으로 Postcards가 모든 기기를 올바르게 처리하도록 만들어 봅시다 Image Playground는 Apple Intelligence를 지원하는 기기에서 사용 가능합니다 점점 늘어나는 언어와 지역에서도 지원됩니다 사용자가 설정에서 이미지 생성을 활성화한 경우에도요 supportsImageGeneration 환경 값 하나만 있으면 됩니다 이미지 생성이 완전히 사용 가능할 때 true를 반환합니다 기기가 해당 기능을 지원하고 현재 언어와 지역이 지원되며 사용자가 활성화한 경우입니다 true이면 CardEditorView로 이동합니다 완전한 Image Playground 경험을 제공합니다 false이면 CardPickerView로 이동합니다 간단한 Photos 선택기 폴백입니다 자격 증명도, 추가 기능 확인도, 설정 단계도 필요 없습니다 환경 값 하나와 조건문만 있으면 됩니다 두 경로 모두를 깔끔하게 지원하는 데 그것으로 충분합니다
Image Playground를 사용하면 앱에서 고품질 이미지 생성 경험을 쉽게 제공할 수 있습니다
디자인에서 이미지가 사는 곳을 생각해 보세요 친구에게 보내는 카드 사용자를 나타내는 프로필 말로 표현하려고 했던 메시지 올바른 형태와 느낌이 모든 것을 바꿉니다 그리고 앱만이 알고 있는 것을 생각해 보세요 어떤 관계, 어떤 기억들 어떤 맥락을 그림에 담을 수 있을까요 결과가 마치 그 사람을 위해 만들어진 것처럼 느끼게 하려면 그 특정 사람을 위해서요 그것이 진정한 기회입니다 Image Playground가 모델을 제공하고 여러분이 이야기를 담으세요 시청해 주셔서 감사합니다 이제 누군가의 냉장고에 붙여둘 만한 것을 만들어 보세요

5:28 - Adopt Image Playground in SwiftUI

// Adopt Image Playground in SwiftUI

func imagePlaygroundSheet(
    isPresented: Binding<Bool>,
    concepts: [ImagePlaygroundConcept] = [],
    sourceImage: Image? = nil,
    onCompletion: @escaping (URL) -> Void,
    onCancellation: (() -> Void)? = nil
) -> some View

5:39 - Add Image Playground sheet with binding to @State

// Adopt Image Playground

@State private var showingPlayground = false

var body: some View {
    Button("Create image") {
        showingPlayground = true
    }
    .imagePlaygroundSheet(
        isPresented: $showingPlayground,
        onCompletion: { url in
            var updated = currentCard
            store.saveImage(url, for: &updated)
        }
    )
}

6:29 - Seeding the sheet with context from your card

// Seeding the sheet with context from your card

var concepts: [ImagePlaygroundConcept] {
    [
        .text(card.theme),
        .extracted(from: card.message, title: card.theme),
    ]
}

var body: some View {
    Button("Create image") {
        showingPlayground = true
    }
    .imagePlaygroundSheet(
        isPresented: $showingPlayground,
        concepts: concepts,
        onCompletion: { url in
            var updated = card
            store.saveImage(url, for: &updated)
        }
    )
}

7:11 - Starting from a reference photo

// Starting from a reference photo

@State private var sourceImage: Image?

var body: some View {
    Button("Create image") {
        showingPlayground = true
    }
    .imagePlaygroundSheet(
        isPresented: $showingPlayground,
        concepts: concepts,
        sourceImage: sourceImage,
        onCompletion: { url in
            var updated = card
            store.saveImage(url, for: &updated)
        }
    )
}

7:42 - Providing a visual suggestion using a drawing

// Providing a visual suggestion using a drawing

@State private var drawing = PKDrawing()

var concepts: [ImagePlaygroundConcept] {
    var result: [ImagePlaygroundConcept] = [
        .text(card.theme),
        .extracted(from: card.message)
    ]
    if !drawing.strokes.isEmpty {
        result.append(.drawing(drawing))
    }
    return result
}

8:06 - Adopt Image Playground in UIKit or AppKit

// Adopt Image Playground in UIKit or AppKit

func presentViewController() {
    let viewController = ImagePlaygroundViewController()
    viewController.concepts = [
        .text(card.theme),
        .extracted(from: card.message)
    ]
    viewController.delegate = self
    present(viewController, animated: true)
}

func imagePlaygroundViewController(
    _ viewController: ImagePlaygroundViewController,
    didCreateImageAt url: URL
) {
    var updated = card
    store.saveImage(url, for: &updated)
    dismiss(animated: true)
}

9:02 - Size Specification

// Size Specification

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    return options
}

var body: some View {
    Button("Create image") { showingPlayground = true }
        .imagePlaygroundSheet(
            isPresented: $showingPlayground,
            concepts: concepts,
            onCompletion: { url in
                var updated = card
                store.saveImage(url, for: &updated)
            }
        )
        .imagePlaygroundOptions(options)
}

9:39 - Styles

// Styles

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    return options
}

var body: some View {
    Button("Create image") { showingPlayground = true }
        .imagePlaygroundSheet(
            isPresented: $showingPlayground,
            concepts: concepts,
            onCompletion: { url in
                var updated = card
                store.saveImage(url, for: &updated)
            }
        )
        .imagePlaygroundOptions(options)
        .imagePlaygroundGenerationStyle(
            pendingStylePreset.defaultStyle,
            in: pendingStylePreset.allowedStyles
        )
}

10:27 - External Provider Style

// External Provider Style

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    return options
}

var body: some View {
    Button("Create image") { showingPlayground = true }
        .imagePlaygroundSheet(
            isPresented: $showingPlayground,
            concepts: concepts,
            onCompletion: { url in
                var updated = card
                store.saveImage(url, for: &updated)
            }
        )
        .imagePlaygroundOptions(options)
        .imagePlaygroundGenerationStyle(
            pendingStylePreset.defaultStyle,
            in: pendingStylePreset.allowedStyles + [.externalProvider]
        )
}

11:02 - Generating an expressive icon for the card thumbnail

// Generating an expressive icon for the card thumbnail

@State private var showingIconPlayground = false

var body: some View {
    Button("Create icon") {
        showingIconPlayground = true
    }
    Color.clear
        .imagePlaygroundSheet(
            isPresented: $showingIconPlayground,
            concepts: concepts,
            onCompletion: { _ in
            } ,
            onAdaptiveImageGlyphCreation: { glyph in
                var updatedCard = card
                store.saveIcon(glyph, for: &updatedCard)
            }
        )
        .imagePlaygroundGenerationStyle(.emoji, in: [.emoji])
}

12:01 - Disabling personalization when it doesn't fit your context

// Disabling personalization when it doesn't fit your context

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    options.personalization = .disabled
    return options
}

12:32 - Supports image generation

// Supports image generation

@Environment(\.supportsImageGeneration)
private var supportsImageGeneration

var body: some View {
    NavigationLink(card.recipient) {
        if supportsImageGeneration {
            CardEditorView(card: card)
        }γelse {
            CardPickerView(card: card)
        }
    }
}

- 0:00 - Introduction
- The ImagePlayground framework brings high-quality, true-to-life image creation into your app, on devices with Apple Intelligence support.
- 2:03 - Capabilities
- Image Playground enables the creation of high-quality images with people, styles, and different aspect ratios.
- 5:02 - Adopt Image Playground
- Present the Image Playground sheet and seed it with context from your app.
- 8:29 - Options
- Configure the Image Playground sheet with options like size, style, and personalization.
- 12:15 - Availability
- Ensure your app gracefully handles both supported and unsupported devices, presenting the full Image Playground experience when available.

시작하기 탐색

알림 받기

플랫폼 탐색

피처링

기술 탐색

피처링

커뮤니티 탐색

피처링

문서 탐색

릴리즈 노트

다운로드 탐색

피처링

지원 탐색

피처링

빠른 링크

챕터

리소스

관련 비디오

WWDC26

WWDC24