PaperKit 만나보기

PaperKit 만나보기

PaperKit을 iOS, iPadOS, macOS, visionOS 앱에 가져오는 방법을 알아보세요. PencilKit 드로잉을 모양이나 이미지와 같은 마크업 기능과 통합하고 사용자 인터페이스를 사용자 정의하는 방법을 살펴봅니다. 상위 호환성을 위한 모범 사례를 알아보고 고급 사용자 정의 옵션을 통해 앱에서 고유한 마크업 경험을 만드는 방법을 확인하세요.

챕터
- 0:00 - 서론
- 1:36 - PaperKit 소개
- 3:35 - PaperKit 시작하기
- 8:37 - 기능 세트 맞춤화하기
리소스
- PaperKit
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC24
- Apple Pencil 최대한 활용하기
WWDC20
- PencilKit의 새로운 기능
- What's new in SwiftUI
안녕하세요, 저는 Pencil 및 Paper 팀의 엔지니어 Andreea입니다 이 세션에서는 PaperKit을 소개하겠습니다 PaperKit은 시스템 전체에서 Apple의 독특한 마크업 경험을 구동하는 프레임워크입니다 메모, 스크린샷, QuickLook, 저널 같은 앱에서 사용됩니다
어떤 앱에서든 리치 마크업을 얻는 가장 쉬운 방법이죠 PaperKit은 그리기와 모형, 이미지, 텍스트 상자 등 다양한 마크업 요소 추가가 모두 가능한 캔버스를 제공합니다 그리기와 마크업 요소를 모두 지원한다는 점 덕분에 어떤 앱에든 PaperKit을 추가하면 종합적인 마크업 환경이 구현됩니다
그리고 macOS Tahoe의 새로운 기능으로 PaperKit이 동일한 리치 마크업 경험을 제공해 모든 macOS 앱에서 그리기 및 마크업 요소가 잘 작동합니다 여기 새 저널 앱처럼요
먼저 PaperKit의 주요 기능을 자세히 이야기하고 핵심 컴포넌트를 설명하겠습니다
몇 단계로 PaperKit 마크업을 앱에 통합하는 방법도 보여 드립니다
마지막으로 앱의 요구 사항에 맞게 PaperKit 마크업 경험을 맞춤화하는 방법을 설명합니다
우선 데모를 통해 사용 가능한 기능을 조명해 볼까요 저는 제 모든 레시피를 추적하기 위한 앱을 만들었는데요 변경 사항을 적용할 때 마크업을 사용해 업데이트합니다 좋아하는 루마니아 전통 쿠키의 레시피를 작성한 것이 있습니다 7세 때부터 만든 음식이며 별점도 표시했죠 레시피를 완성하기 위해 쿠키 이미지를 추가하겠습니다 파일 앱을 열어
이미지를 레시피로 드래그합니다
보기 좋게 다시 배치하고요
주요 재료인 분쇄 호두를 강조 표시합니다
PaperKit으로 무엇을 할 수 있는지 살펴보았으니 이제 세 주요 컴포넌트를 보죠 PaperMarkupViewController라는 마크업 컨트롤러가 첫 번째입니다 PaperKit 마크업과 그림을 대화형으로 생성하고 표시합니다
두 번째는 PaperMarkup이라는 데이터 모델 컨테이너입니다 PaperKit 마크업과 PencilKit 그림 데이터를 저장하고 로드하며 마크업 렌더링도 처리합니다
세 번째는 새로운 삽입 메뉴입니다 캔버스에 마크업 요소를 주석으로 추가할 수 있습니다 iOS, iPadOS, visionOS 26의 MarkupEditViewController죠
macOS에서는 대안으로 MarkupToolbarViewController라는 새 도구 막대가 제공되는데 그리기 도구와 주석용 버튼이 포함되어 있습니다
앱에서 PaperKit을 시작하기는 쉽습니다 먼저 iOS에서 레시피 앱에 통합한 방법을 살펴보고 macOS를 위한 단계를 다루겠습니다
우선 UIViewController의 서브 클래스 생성입니다 viewDidLoad 메서드 내에서 마크업 데이터 모델 컨테이너를 초기화하여 보기의 경계와 일치하도록 구성해 적절한 레이아웃과 렌더링 컨텍스트를 확보했습니다 다음으로 PaperKit에서 제공되는 전체 최신 기능 세트로 구성한 마크업 컨트롤러를 생성했습니다
표준 보기 컨트롤러 임베드 과정을 사용해 이를 보기 계층 구조에 추가했습니다
도구 선택기를 만들기 위해 PencilKit 도구 선택기를 초기화하고 마크업 컨트롤러를 관찰자로 등록해 도구 선택기 상태 변경에 동적으로 반응하도록 했습니다
앱에 도구 선택기를 표시하기 위해 PencilKit 응답자 상태의 activeToolPicker 속성에 할당했죠 이것은 UIResponder에서 사용할 수 있는 새로운 API로서 현재 응답자의 도구 선택기 가시성을 제어합니다 toolPickerVisibility 속성을 구성해 도구 선택기를 활성으로 유지하며 화면상의 가시성을 명시적으로 관리할 수 있습니다 이를 통해 도구 선택기는 숨겨진 상태로 정상 작동하며 두 번 탭, 꾹 쥐기 제스처 같은 상호작용에 여전히 응답합니다 또한 앱이 미니 도구 선택기 경험을 지원할 수 있죠 도구 선택기 설정에 대한 내용은 WWDC19의 PencilKit 소개 세션과 WWDC24의 Apple Pencil 최대한 활용하기 세션을 확인하세요 도구 선택기를 설정한 후 액세서리 항목을 버튼으로 구성했습니다 탭하면 삽입 메뉴를 표시하는 기능이 실행됩니다
메서드 내부에서 동일한 기능 세트를 마크업 컨트롤러로 사용해 삽입 컨트롤러를 초기화했습니다
그런 다음 컨트롤러의 대리자를 마크업 보기 컨트롤러에 설정하고 팝오버로 표시되도록 구성하고 적절한 배치를 위해 도구 선택기에 추가한 막대 버튼 항목에 팝오버를 고정했습니다
마지막으로 삽입 메뉴 컨트롤러를 모달 형식으로 표시했습니다
macOS에서도 매우 간단한데요
마크업 모델 및 마크업 컨트롤러 설정은 본질적으로 동일합니다
macOS에서 유일한 차이점은 도구 막대를 생성해 삽입 UI를 표시할 수 있다는 것입니다 이후 도구 막대의 대리자를 마크업 컨트롤러에 설정하고 표준 NSViewController 임베드 과정을 사용해 보기 계층 구조에 추가합니다
기본 설정이 완료되면 앱 경험을 다듬을 때 중요한 핵심 요소를 고려해 보는 것도 좋습니다
PaperKit은 SwiftUI 환경에 원활하게 통합할 수 있습니다 컴포넌트는 UIViewControllerRepresentable에 캡슐화된 후 SwiftUI 보기의 본문에 직접 통합됩니다 덕분에 SwiftUI 레이아웃 내에 UIKit 기반 컴포넌트를 사용해 두 프레임워크 간의 호환성을 유지할 수 있습니다 SwiftUI 환경에 보기 컨트롤러를 통합하는 방법에 대한 내용은 WWDC20의 SwiftUI의 새로운 기능 세션을 확인하세요
마크업 컨트롤러에는 콜백을 맞춤형 처리할 수 있도록 하는 대리자가 포함됩니다 예를 들어 마크업 변경 대리자 메서드를 구현해 마크업 모델의 수정 사항을 자동으로 저장할 수 있습니다 또한 마크업 컨트롤러는 Observable을 준수하므로 상태 및 업데이트 관리에 대리자를 사용하는 방식의 대안 역할을 합니다
디스크에서 데이터를 로드할 때는 상위 호환성을 위해 반드시 콘텐츠 버전을 확인해야 합니다 버전 불일치를 처리하는 일반적인 접근 방식은 두 가지입니다 업그레이드가 필요함을 알리는 경고를 표시하는 것과 마크업의 미리 렌더링된 썸네일을 표시하는 것입니다
PaperKit은 상위 호환성을 쉽게 확보할 수 있는 도구를 제공합니다 먼저 CGContext를 생성해 썸네일 정보를 렌더링합니다
그런 다음 마크업 모델의 draw 함수를 사용해 모델의 썸네일 이미지를 생성합니다
그리고 마크업과 함께 저장합니다
버전이 불일치하는 경우 이 썸네일을 표시하는 것이 모범 사례이며 메모 같은 앱도 이 방식을 따릅니다
이렇게 iOS, macOS에서 PaperKit을 시작하는 방법을 다루었습니다 이제 원하는 정확한 마크앱 경험을 위해 앱을 맞춤화하는 방법을 살펴보겠습니다 PaperKit에서 사용 가능한 모든 마크업 기능 세트를 FeatureSet이라고 합니다 마크업과 삽입 컨트롤러에 노출된 기능과 도구를 정의하죠
FeatureSet.latest는 PaperKit에서 지원되는 마크업 기능의 전체 세트를 제공합니다 프레임워크에 추가된 새로운 기능에 대한 최신 정보를 확인할 수 있으므로 좋은 시작점입니다
마크업 경험을 맞춤화하려면 remove 및 insert 함수를 사용하면 됩니다 이렇게 하면 앱에서 사용할 수 있는 도구와 상호작용을 완전히 제어할 수 있습니다
마크업에서 기능 세트의 colorMaximumLinearExposure 속성을 1보다 큰 값으로 설정하면 HDR 지원을 활성화할 수 있습니다 SDR 마크업의 경우 1을 사용합니다 도구 선택기에서도 HRD 잉크에 대해 이 속성을 설정합니다 제 앱에서는 4를 사용해 원하는 HDR 효과를 얻었습니다
colorMaximumLinearExposure에 대해 설정한 값은 기기 화면에 지원되는 HDR 헤드룸으로 톤 매핑됩니다 화면의 지원 값을 사용해도 되는데 UIScreen이나 NSScreen에서 확인 가능합니다
최신 기능 세트를 사용하고 앱에서 HDR을 활성화하면 새로운 기능과 경험을 모두 활용할 수 있습니다 예를 들어 새로운 캘리그라피용 도구로 PencilKit에 도입된
Reed 도구가 있는데 HDR에서 사용하면 멋집니다
기능 세트를 요구 사항에 맞게 구성한 다음 맞춤화된 기능 세트를 마크업 컨트롤러와 삽입 컨트롤러 모두에 할당해 앱의 마크업과 삽입 기능에서 일관성을 확보합니다
맞춤화할 수 있는 또 다른 속성은 마크업 컨트롤러의 ContentView로 어떤 UIView에나 설정 가능합니다 예를 들어 템플릿을 앱의 픽스처로 사용할 수 있습니다 모든 마크업 및 그림이 그 위에 렌더링됩니다 FeatureSet를 맞춤화하고 배경 보기를 구성하고 앞서 설명한 개선 단계를 적용하면 앱은 강력하고 창의적인 방식으로 제작된 훌륭한 시스템 전반 마크업 경험을 그대로 구현할 수 있습니다
다음으로 무엇을 해야 할까요? Apple의 강력한 마크업 경험을 채택하고 자체 도구 및 잉크로 FeatureSet를 맞춤화하며 자체 콘텐츠 배경을 설정하고 마크업에 HDR 지원을 추가하세요
간단한 메모 도구를 빠르게 준비하든 풍부하고 창의적인 캔버스를 준비하든 PaperKit은 완벽한 경험을 위한 재료를 제시합니다 PaperKit으로 무엇을 만드실지 기대됩니다
시청해 주셔서 감사합니다

// Adopt PaperKit in iOS

override func viewDidLoad() {
    super.viewDidLoad()
    
    let markupModel = PaperMarkup(bounds: view.bounds)
    let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest)
    view.addSubview(paperViewController.view)
    addChild(paperViewController)
    paperViewController.didMove(toParent: self)
    becomeFirstResponder()    

    let toolPicker = PKToolPicker()
    toolPicker.addObserver(paperViewController)
    
    pencilKitResponderState.activeToolPicker = toolPicker
    pencilKitResponderState.toolPickerVisibility = .visible
    
    toolPicker.accessoryItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(plusButtonPressed(_:)))
}

@objc func plusButtonPressed(_ button: UIBarButtonItem) {
    let markupEditViewController = MarkupEditViewController(supportedFeatureSet: .latest)    
    markupEditViewController.delegate = paperViewController
    markupEditViewController.modalPresentationStyle = .popover
    markupEditViewController.popoverPresentationController?.barButtonItem = button
    present(markupEditViewController, animated: true)
}

6:11 - Adopt PaperKit in macOS

// Adopt PaperKit in macOS

override func viewDidLoad() {
    super.viewDidLoad()
    
    let markupModel = PaperMarkup(bounds: view.bounds)
    let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest)
    view.addSubview(paperViewController.view)
    addChild(paperViewController)

    // Create toolbar for macOS
    let toolbarViewController = MarkupToolbarViewController(supportedFeatureSet: .latest)
    toolbarViewController.delegate = paperViewController
    view.addSubview(toolbarViewController.view)
    
    // Set layout
    setupLayoutConstraints()
}

7:18 - Auto-save markup changes

// Auto-save markup changes
    
func paperMarkupViewControllerDidChangeMarkup(_ paperMarkupViewController: PaperMarkupViewController) {
    let markupModel = paperMarkupViewController.markup
    Task {
        // Create a data blob and save it
        let data = try await markupModel.dataRepresentation()
        try data.write(toFile: paperKitDataURL)
    }
}

8:02 - Thumbnail for forward compatibility

// Thumbnail for forward compatibility

func updateThumbnail(_ markupModel: PaperMarkup) async throws {
    // Set up CGContext to render thumbnail in
    let thumbnailSize = CGSize(width: 200, height: 200)
    let context = makeCGContext(size: thumbnailSize)
    context.setFillColor(gray: 1, alpha: 1)
    context.fill(renderer.format.bounds)            

    // Render the PaperKit markup
    await markupModel.draw(in: context, frame: CGRect(origin: .zero, size: thumbnailSize))
    
    thumbnail = context.makeImage()
}

9:02 - Customized markup FeatureSet

// Customized markup FeatureSet
    
var featureSet: FeatureSet = .latest

featureSet.remove(.text)
featureSet.insert(.stickers)

// HDR support
featureSet.colorMaximumLinearExposure = 4
toolPicker.colorMaximumLinearExposure = 4

let paperViewController = PaperMarkupViewController(supportedFeatureSet: featureSet)
let markupEditViewController = MarkupEditViewController(supportedFeatureSet: featureSet)

10:50 - Custom background on markup controller

// Custom background on markup controller

let template = UIImage(named: "MyTemplate.jpg")
let templateView = UIImageView(image: template)
paperViewController.contentView = templateView

- 0:00 - 서론
- PaperKit을 사용하면 메모, 스크린샷, QuickLook, Journal 앱 등 다양한 iOS 및 macOS 앱에서 풍부한 마크업 환경을 만들 수 있습니다. 이 프레임워크는 모양, 이미지, 텍스트 입력 필드 등을 그리거나 추가할 수 있는 캔버스를 제공합니다. PaperKit은 모든 앱에 마크업 기능을 통합하는 과정을 간소화하여 원활한 사용자 경험을 제공합니다.
- 1:36 - PaperKit 소개
- 예제 앱은 사람들이 마크업을 사용하여 레시피를 만들고, 업데이트하며, 주석을 달 수 있는 레시피 관리 도구입니다. 앱에는 주석을 쉽게 달 수 있는 마크업 컨트롤러, 데이터 모델 컨테이너, 삽입 메뉴 또는 툴바(운영체제에 따라 다름)가 포함되어 있습니다. 데모에서는 이미지 추가, 재료 강조, 루마니아 전통 쿠키 레시피 평가 등의 기능을 선보입니다.
- 3:35 - PaperKit 시작하기
- PaperKit을 iOS 앱과 하위 클래스 ‘UIViewController’에 통합하고 마크업 데이터 모델 컨테이너와 컨트롤러를 초기화합니다. 그런 다음 PencilKit 툴 선택기를 설정하고 버튼 액세서리 항목에서 트리거될 때 팝오버로 표시되도록 삽입 메뉴 컨트롤러를 구성합니다. 또한 PaperKit을 SwiftUI 환경에 원활하게 통합할 수 있습니다. 마크업 컨트롤러에는 콜백의 사용자 정의 처리를 위한 대리자가 포함되어 있으며 상태 관리를 위해 ‘Observable’을 준수합니다. 디스크에서 데이터를 로드할 때는 이후 버전과의 호환성을 위해 콘텐츠 버전을 확인하는 것이 중요합니다. PaperKit은 버전이 일치하지 않으면 사전 렌더링을 위한 섬네일을 생성하는 도구를 제공합니다.
- 8:37 - 기능 세트 맞춤화하기
- PaperKit의 ‘FeatureSet’는 앱에서 사용할 수 있는 마크업 기능을 정의합니다. 모든 최신 기능을 포함하려면 ‘FeatureSet.latest’로 시작할 수 있습니다. 앱을 사용자 정의하려면 제공된 함수를 사용하여 툴과의 상호작용을 제거하거나 삽입할 수 있습니다. HDR 지원을 활성화하려면 ‘colorMaximumLinearExposure’ 속성을 1보다 큰 값으로 설정하면 기기의 지원되는 HDR 헤드룸에 맞춰 톤다운됩니다. 이렇게 하면 마크업의 시각적 품질이 향상되는데, 특히 PencilKit에서 도입된 서예 리드 도구와 같은 새로운 도구를 사용할 때 크게 향상됩니다. 또한, 마크업 컨트롤러의 ‘contentView’를 사용자 정의하여 템플릿 등의 ‘UIView’를 표시하고 마크업과 그리기에 일관된 배경을 제공할 수 있습니다.

챕터

리소스

관련 비디오

WWDC24

WWDC20