WWDC22) What’s new in the Photos picker

What’s new in the Photos picker - WWDC22 - Videos - Apple Developer

본 글은 WWDC 를 보고, 번역 및 요약 그리고 실행해보는 스터디 프로젝트의 일환입니다.

오늘은 system Photos picker 개선된 몇 가지 사항에 대해 이야기하고자 합니다.

system Photos picker 는 대부분의 앱이 iOS 에서 사진, 비디오에 액세스하는 가장 좋은 방법입니다.

picker 는 process 없이 돌아가므로 라이브러리 액세스를 요청할 필요가 없습니다. 직관적인 UI 와 사용하기 쉬운 API 가 있습니다. PHPicker API 에 익숙하지 않은 경우 이전 연도 WWDC 세션에서 자세히 볼 수 있습니다.

Overview

• 오늘 세션에서는 picker 에 추가한 새로운 기능에 대한 개요로 시작하겠습니다.
• 다음은 현재 지원하는 추가적인 플랫폼과 프레임워크에 대해서 이야기하겠습니다.

🥽 Let’s dive in!

New features

PHPickerFilter

picker 는 도입된 이후로 이미지와 비디오, 라이브 포토 간의 필터링을 지원합니다.

그러나 일부 앱에서는 다른 요구 사항이 있을 수 있습니다. 예를 들어, screenshot-stitching app 은 오직 스크린샷만 피커에서 보여주려고 합니다.

올해 추가한 새로운 screenshots fileter 로 이제 가능해졌습니다. screenshots 외에도 screen recordings 와 slo-mo videos 와 같은 다른 asset 타입들도 추가했습니다.

PHAsset.PlaybackStyle 을 사용하여 새 필터를 만드는 방법도 있습니다.

cinematic videos, depth effect photos 및 bursts 를 제외한 모든 새로운 필터들이 backport 됩니다.(backport: 최신 버전에서 가져와서 이전 버전으로 적용하는 작업)

즉, 위의 세가지는 iOS 16부터 지원합니다.

앱이 iOS 15 를 타겟팅하는 경우 여러분들은 iOS 16 SDK 로 컴파일을 하는 동안 계속 사용할 수 있습니다.

Compound filters

Compound filters 의 경우 기존의 any 에 추가하여 all 과 not 도 사용됩니다. 이 역시 iOS 15 로 백포트되었습니다.

몇가지 코드 예제를 살펴보겠습니다.

비디오와 live photo 를 표시하려면 any 와 결합할 수 있습니다. 또는 스크린샷만 표시하고 싶을 수도 있습니다. 스크린샷 없이 모든 이미지를 표시하려면 images 와 screenshots filters 를 all 과 not 을 사용하여 결합할 수 있습니다. 마지막 예시에서는 iOS 16 이상을 타겟팅하는 경우 .cinematicVideos 필터를 사용할 수 있습니다.

---

---

다음으로 half-height picker 와 관련된 개선 사항에 대해 이야기 해보겠습니다.

half-height picker

iOS 15 UIKit 에는 picker 를 절반 높이 모드로 표시하는데 사용할 수 있는 새로운 UISheetPresentationController API 가 있습니다. 이미 많은 경우에 훌륭하게 작동합니다. 하지만, 일부는 선택한 assets 를 조정하고 이러한 변경사항이 picker 에 다시 반영되도록 커스텀UI 를 구현하고자 할 수 있습니다.

iOS 16에서는 asset identifiers 를 통해서 에셋을 선택해제 할 수 있습니다.

위의 그림처럼 두 번째 사진은 deselectAssets 가 호출된 후 picker 에서 더 이상 선택되지 않습니다. moveAesset 메서드를 사용하여 assets 를 재정렬할 수도 있습니다.

우리는 picker 의 새로운 기능에 익숙해졌습니다. 플랫폼 지원에 대해서 이야기 해보겠습니다.

Platform support

현재 system Phots picker 는 오직 iOS 와 iPadOS 에서만 사용할 수 있습니다. 올해 macOS 와 watchOS 라는 두 가지 추가 플랫폼에 도입할 예정입니다. iPadOS picker 도 iPad 만을 위한 새로운 디자인으로 업데이트 되었습니다.

iPadOS

먼저 새로운 iPad UI 을 살펴보겠습니다.

picker 는 이제 큰 iPad 디스플레이의 이점을 활용하기 위해서 sidebar 가 표시됩니다. 사이드 바를 상요하여 다른 컬렉션간의 빠른 탐색을 할 수 있습니다. 그러나 Split Screen mode 에서는 공간이 충분하지 않으면 기존의 compact picker UI 로 대체됩니다.

(아래는 현재 iPadOS 에서 제공하는 compact picker UI 입니다.)

사진 출처: https://www.idownloadblog.com/2020/08/11/enhanced-image-picker-iphone-ipad/

macOS

macOS picker 는 Mac-style controls 이 있는 sidebar 를 가집니다.

그리고 iOS picker 처럼 multiple selection, grid 의 fluid zooming 를 지원하며 사람, 장소 등과 같은 항목을 검색할 수 있는 검색기능이 있습니다.

새로운 picker UI 는 NSOpenPanel 을 사용할 수 있습니다. 이를 사용하여 system photo library 에서 iCloud Photos 에 저장된 에셋을 포함하여 선택할 수 있습니다. 여러분의 앱은 어떤 adoption work 없이 새로운 UI 가 무료로 제공될 것입니다.

When to use NSOpenPanel

drag and drop 이 NSOpenPanel picker 에서 지원됩니다. iOS, iPadOS 및 macOS 의 표준 picker 에서도 지원됩니다. 앱에서 몇개의 이미지 혹은 비디오를 선택해야 하는 경우 NSOpenPanel API 만 있으면 됩니다.

그러나, photo library 에서 선택한 파일들은 시스템에 의해 언제나 삭제될 수 있다는 것을 명심해야 합니다. 장기적으로 사용하려면 앱에서 관리하는 위치에 복사해야 합니다.

When to use PHPicker

media-centric(미디어 중심) macOS 앱의 경우, 최고의 사용자 경험을 위해 기본적으로 새로운 Photos picker 를 사용하는 것이 좋습니다. 하지만, 앱은 NSOpenPanel API 를 사용하여 파일 시스템에서 에셋을 선택해야하는 대체 방법을 계속 제공 해야 합니다. 고객이 여전히 photo libraries 외부의 에셋을 선택하고 싶어하는 경우가 있습니다.

watchOS

마지막으로 watchOS 에 대해서 알아보겠습니다.

처음으로 새로운 API 를 통해서 저장된 이미지에 액세스할 수 있습니다. watchOS picker 는 iOS 와 macOS picker 처럼 프로세스가 필요하지 않으므로 라이브러리 액세스를 요청할 필요가 없습니다.

iOS picker 와 유사한 UI 를 가지고 있지만 더 작은 화면에 최적화되어 있습니다. 그리드 또는 컬렉션 별로 사진을 탐색할 수 있습니다.

선택 순서를 표시하고 선택 제한을 지정하도록 picker 를 구성할 수 있습니다.

하지만, iOS 와 macOS 와 달리 watchOS picker 는 이미지만 표시됩니다. 장비에 500개 이상의 이미지가 있는 경우 가장 최근의 500개 이미지만 표시됩니다.

Framework

PHPickerViewController 는 UIKit 기반인데 어떻게 macOS 나 watchOS 앱에서 사용할 수 있을까요?

짐작하셨겠지만 이제 AppKit 과 SwiftUI 에서 새로운 picker API 를 사용할 수 있습니다.

(AppKit 은 macOS 를 위한 유저 인터페이스를 구현하는데 필요한 objects 를 포함합니다.)

먼저, AppKit API 를 살펴보겠습니다.

AppKit

UIKit API 와 매우 유사합니다.

동일한 PHPickerConfiguration 타입과 프로퍼티에 액세스 할 수 있습니다. 약간의 차이점은 PHPickerViewController 가 AppKit 앱을 위한 NSViewController 하위 클래스라는 것입니다.

(NS… : NextSoftware 는 objective-C 의 라이선스를 받아 NEXTSTEP 이라는 개발 환경과 라이브러리를 개발하였다. 이후 Next Computer 와 Sun Microsystems 는 NEXTSTEP 시스템의 표준 규격을 발표하고 이를 OPENSTEP 으로 명명한다. 이후 애플은 넥스트 소프트웨어를 인수하고 NEXTSTEP/OPENSTEP 의 개발환경을 애플 버전에서 Cocoa(코코아)라고 칭했다. NS 접두사는 NEXTSTEP 때 작성된 코드와의 호환을 유지하기위해 애플이 사용하고 있다.)

AppKit 기반의 PHPicker 의 도입으로 legacy media libraray browser 에서 벗어날 때입니다. PHPicker 는 훨씬 더 강력합니다. UIKit 과 AppKit 앱을 동시에 작업할 때 유지관리가 쉽습니다.

SwiftUI

iOS picker 를 기억하시나요? 몇 줄의 SwiftUI 코드로 표시할 수 있습니다.

더 중요한 것은 iOS, iPadOS, macOS 그리고 watchOS 와 같이 picker 가 지원되는 모든 플랫폼에서 SwiftUI PhotosPicker API 에 액세스할 수 있다는 것입니다. picker 는 자동으로 플랫폼, 앱의 구성, 사용 가능한 스크린 공간에 따라 최적의 레이아웃을 자동으로 선택합니다.

picker UI 에 대해서 걱정할 필요가 없으므로 앱을 개선하는데 집중할 수 있습니다.

Loading photos and videos

데모를 통해 새로운 API 를 자세히 살펴보기 전에 먼저 선택한 사진들과 비디오들을 로드하는 방법에 대해 이야기해야 합니다.

SwiftUI 바인딩을 통해 받는 선택 항목에 대해서 placeholder 객체만 포함합니다. 요청 시에 에셋 데이터를 즉시 로드해야할 수 있습니다. 하지만 일부 에셋 데이터들은 즉시 로드되지 않습니다.

예를 들어 picker 가 iCloud Photos 로부터 데이터를 다운로드하려고 했지만 기기가 인터넷과 연결되지 않은 경우와 같이 오류가 발생할 때는 로드 작업이 실패할 수 있습니다. 일부 대용량 동영상과 같은 다운로드가 오래걸리는 큰 파일의 경우는 loading indicator 대신 항목별 inline loading UI 를 권장합니다.

PhotosPicker 는 앱과 extensions 간의 데이터 전송을 위한 새로운 SwiftUI 프로토콜인 Transferable 을 사용합니다. Transfeable 을 통해 SwiftUI 이미지를 직접 로드할 수 있지만 advanced use cases 의 경우 로드하려는 데이터 타입을 완전히 제어하기 위해 Transfeable 프로토콜을 준수하는 모델 객체를 정의해야 합니다.

Transferable 에 대한 자세한 내용은 Meet Transferable 세션에서 확인할 수 있습니다.

만약 앱이 동시에 많은 아이템을 처리하거나 비디오와 같은 큰 에셋을 처리해야 하는 경우에는 동시에 모든 것들을 메모리에 로드하는 것이 불가능할 수 있습니다. 메모리 사용량을 줄이기 위해서 FileTransferRepresentation 을 사용하여 선택한 에셋을 파일로써 로드할 수 있습니다.

에셋을 파일로써 로드할 때 lifecycles 를 관리해야 한다는 것을 염두에 둬야합니다. 파일을 받으면 앱 디렉토리에 복사하고 더 이상 필요하지 않으면 삭제해야 합니다.

자, 이제 데모를 할 시간입니다!

Demo

이미 계정 프로필 페이지를 표시하는 데모 앱을 설정했습니다. 현재 프로필 이미지는 placeholder 아이콘입니다. 우리는 PhotosPicker API 를 사용하여 프로필 이미지를 변경하는 edit button 추가하고자 합니다.

프로필 이미지 뷰는 view model 에 정의된 image state 에 응답할 수 있으므로 picker selection 이 수신될 때 이미지 상태를 업데이트하기만 하면 됩니다.

먼저, view model 로 가서 imageSelection 프로퍼티를 추가해 보겠습니다.

selection 바인딩으로 PhotosPicker API 에 전달됩니다. 이제 프로필 이미지 뷰로 돌아가서 picker 를 가져오는 오버레이 버튼을 추가해봅시다.

빌드하고 실행하면 편집 버튼을 눌러 picker 를 불러올 수 있습니다.

이제 image selection 과 image state 를 연결해 보겠습니다. view model 로 돌아가서 image selection did set 을 수신할 수 있습니다. image selection 이 nil 이라면 image state 를 공백으로 설정합니다.

아직 loadTransferable 메서드를 구현하지 않았기 때문에 컴파일 에러를 볼 수 있습니다.

구현은 간단합니다. completion handler 에 응답하고 image state 를 업데이트하면 됩니다.

PhotosPickerItem 의 loadTransferable(type:completionHandler:) 메서드를 사용하여 컴플리션 핸들러를 통해 지정한 타입의 인스턴스로 로드하도록 구현했습니다.

편집 버튼을 탭하고 이미지를 선택할 수 있습니다. 예상대로 작동합니다!

사실 프로젝트는 이미 macOS 에서도 실행할 수 있도록 설정되어 있습니다. 컴파일 해봅시다.

picker 를 열고 이미지를 선택하면 앱에 반영된 것을 볼 수 있을 것입니다.

iOS 와 macOS 에서 데모를 보았지만 동일한 코드가 watchOS 에서도 작동합니다. 그러나 명심해야할 것이 몇 가지 있습니다.

watchOS picker 는 간단한 흐름과 짧은 인터렉션으로 디자인되어있습니다. 이미지는 기기의 사이즈에 따라 크기가 조정됩니다. 일반적으로 페어링된 iPhone 에 동기화됩니다.

그러나 Family Setup(가족 설정) 을 사용하면 자신의 iPhone 이 없는 가족 구성원이 Apple Watch 의 기능과 이점을 즐길 수있습니다. 기기가 Family Setup 모드인 경우 picker 를 사용하여 iCloud Photos 에 있는 최근 1000개의 이미지를 선택할 수 있습니다. picker 는 인터넷에서 일부 이미지를 다운로드해야하고, 이 경우 picker 가 닫히기 전 loading UI 가 보여집니다.

여러분이 가시기 전에 앱이 사지과 비디오에 액세스할 수 있는 가장 좋은 방법으로 systme Photos picker 를 만들기 위해 최선을 다하고 있다는 것을 말씀드리고 싶습니다. 당신이 커스텀 picker 를 여전히 사용하고 있는 경우 전환하는 것이 좋습니다. 감사합니다!