앱에 사진 선택기 임베드하기

♪ ♪

안녕하세요, 저는 저스틴입니다 사진 팀에서 일하고 있죠 오늘 저는 앱에서 사용할 수 있는 시스템인 포토 피커의 새로운 개선점과 앱에서 쓸 수 있는 새 API들을 소개해 드리려 합니다 저희는 새롭게 설계된 피커 UI를 iOS 14에 도입했습니다 검색이나 축소/확대 그리드와 같은 훌륭한 기능을 두루 지닌 UI죠 게다가 사진 보관함 액세스 요청도 필요 없습니다 그러니 가급적 사용자화 피커를 시스템 피커로 교체하시길 권할게요 이 API는 정말 사용하기 쉽습니다 단 몇 줄의 코드만으로 피커를 표시하고 사용자가 선택한 이미지를 받을 수 있거든요 작년 세션인 '포토 피커의 새 기능'에서 새로운 API에 대해 자세히 설명했는데요 이번 세션에서는 시스템 피커를 앱에 내장하여 보다 매끄러운 사진 선택 경험 제공에 활용할 수 있는 새로운 API를 중점적으로 설명하겠습니다 나중에 HDR 사진, HDR 동영상 및 시네마틱 모드 비디오 지원이 필요할 경우를 고려하여 새로운 옵션 메뉴와 최적의 사례도 소개할게요

일단 그 전에 피커의 액세스 모델에 대해 간략히 말씀드리겠습니다

이건 여러분이 조금 전에 본 피커인데요 앱에서 실행되는 것처럼 보이지만 실제로는 앱 외부에서 렌더링되는 별도의 프로세스에서 실행되는 것입니다 앱은 피커에 직접 액세스할 수 없으며 피커 콘텐츠의 스크린샷도 찍을 수 없습니다 사용자가 실제로 선택한 항목만 앱으로 다시 전달되죠 올해 저희는 out-of-process 피커에 더 많은 구성 옵션을 도입할 예정입니다 .photosPickerDisabledCapabilities 새 수정자를 통해 특정 피커 기능을 사용하지 않도록 설정할 수 있어서 자신만의 버전을 구현할 수 있습니다 예를 들어, 선택 동작을 사용 불가능으로 설정하면 Cancel 버튼과 Add 버튼을 숨길 수 있죠 .photosPickerAccessoryVisibility라는 새 수정자를 사용하면 탐색 모음 및 도구 모음 같은 피커 콘텐츠 주변의 액세서리 UI를 숨길 수 있습니다

.frame 및 .padding과 같은 표준 SwiftUI 수정자를 사용하면 피커의 크기와 포지션을 지정할 수도 있습니다 이런 의문이 생길 수 있죠 Add 버튼이 숨겨져 있을 때 다중 선택 모드에서 선택된 에셋을 어떻게 앱이 받게 할 수 있을까? 이제는 선택 동작을 .continuous로 설정하여 선택을 실시간으로 업데이트 받을 수 있습니다 .photosPickerStyle(.inline)라는 새로운 수정자를 이용함으로써 별도의 시트로 표시하는 대신 앱에 피커를 내장할 수 있게 됐습니다

피커가 내장되어 있더라도 별도의 프로세스로 렌더링됩니다 라이브러리 액세스를 요청하는 메시지 없이 앱에 모든 사진이 표시되는 것을 우려하는 분도 계실 것입니다 그래서 사용자가 앱을 사용할 때 불안함을 느끼지 않도록 내장된 피커가 처음 표시될 때 앱이 선택한 사진에만 액세스할 수 있음을 설명하는 온보딩 UI가 자동으로 나타납니다 사진 개인정보 보호 표시는 피커가 비공개이며 프로세스와 무관하다는 것을 나타냅니다 여러분의 앱이 이미 최대 크기의 피커를 제공한다면 사용자가 iOS 17로 업그레이드 시 해제 가능한 배너가 나타납니다 개인정보 설정 UI도 더욱 상세한 설명과 함께 업데이트되었습니다 또한 라이브러리 액세스 권한 프롬프트를 일부 변경했습니다 이러한 변화에 대해 자세히 알아보시려면 '프라이버시의 새 기능' 세션을 시청해 주세요 자, 다시 실제 API로 돌아와 보죠 사용 예를 먼저 살펴본 후에 각 API에 대해 자세히 설명할게요 out-of-process 피커를 포함하려면 .photosPickerStyle 수정자를 사용하세요 피커 주변에 여러분만의 UI를 배치하려면 .photosPickerAccessoryVisibility를 사용하시면 됩니다 또한 선택적 인수를 사용하여 특정 가장자리 주변의 액세서리를 제어할 수 있습니다 기본값은 모든 가장자리입니다 일부 피커 기능에 대해 여러분만의 대체 기능을 구현하려면 .photosPickerDisabled Cabilities 수정자를 사용하세요 마지막으로, 선택 업데이트를 실시간으로 조정하거나 응답해야 하는 경우 selectionBehavior 설정이 .continuous인지 확인하세요 그렇다면 정확히 어떤 게 액세서리로 간주될까요? iOS에서 상단 액세서리는 탐색 막대이고 하단 액세서리는 도구 모음입니다 iPadOS 및 macOS에서 표시 상태 시 가장 앞쪽에 있는 액세서리는 사이드바입니다 상단과 하단 액세서리는 iOS와 유사합니다 다음으로, 사용하지 않도록 설정할 수 있는 피커 기능과 이 기능이 피커 UI에 미치는 영향을 설명할게요

검색 기능이 비활성화되어 있으면 검색창이 숨겨지고 모음 내비게이션이 비활성화되면 앨범 탭이 숨겨집니다 iPadOS와 macOS에서는 사이드바도 숨겨집니다 스테이징 영역이 비활성화되면 도구 모음 버튼이 상태 레이블로 대체됩니다 연속 선택 없이 선택 작업을 비활성화한 경우 Cancel 버튼만 숨겨지고 Add 버튼은 계속 표시됩니다 그렇지 않으면 앱은 사용자의 선택을 수신할 수 없습니다 선택 동작도 .continuous로 설정하면 두 버튼이 모두 숨겨지죠 이제 새로운 피커 스타일을 살펴볼게요 선택 도구는 .presentation 및 .inline 스타일 외에 다른 .compact 스타일도 지원합니다 이것이 기본 .presentation 스타일입니다 이건 모든 액세서리가 숨겨져 있는 .inline 스타일입니다 그리고 이게 .compact 스타일이죠 단일 행 피커를 쓰면 사용할 수 있는 수직 공간이 매우 제한적이어도 더 많은 곳에 삽입할 수 있습니다 이제 모든 것을 하나로 연결하는 모습을 시연해야겠네요 이미지에 텍스트 설명을 다는 간단한 앱을 미리 만들었고 이를 통해 어떤 기능을 사용할 수 있는지 보여 드릴게요 피커를 모달 시트로 표시하고 이미지를 선택한 뒤 설명을 추가할 수 있습니다 시연에서 Select Photos 버튼을 내장된 피커로 바꿔볼게요 .photosPickerStyle(.inline) 수정자를 추가하여 해 보겠습니다

되긴 하지만 아직 아쉽죠 목록 업데이트를 위해 Add 버튼을 탭해야 하고 피커의 크기가 조정되면 도구 모음이 기기의 아래쪽 가장자리로 확장되지 않습니다

하지만 걱정 마세요 약간만 손보면 훨씬 더 보기 좋게 만들 수 있어요 우선, 피커가 안전 영역 삽입을 근사하게 처리할 수 있으므로 .ignoresSafeArea 수정자를 사용하여 피커가 화면 하단 가장자리까지 확장되게끔 할 수 있습니다 다음으로, 피커에서 사진을 선택하는 즉시 목록이 업데이트될 수 있는지 확인할게요 사실, 변경하는 건 매우 쉽습니다 선택 동작을 .continuous로 설정하기만 하면 되거든요

이제 목록이 실시간으로 업데이트되니 더 이상 탐색 막대의 버튼을 유지할 필요가 없습니다 제거할 때는 .photosPickerDisabledCabilities 수정자를 사용하면 되죠

이제 피커가 제대로 작동합니다 하지만 피커의 모양새도 멋지게 꾸미고 싶어요

그러자면 탐색 막대와 도구 막대를 숨겨야 할 것 같습니다 그리고 피커 높이도 고정되면 좋겠어요 .photosPicker AccessoryVisibility 수정자로 막대를 숨기고 다른 SwiftUI 뷰처럼 피커 높이를 조정할 수 있습니다

이제 보기 좋네요 단 몇 분 만에 앱을 업데이트하여 새로운 내장 피커를 표시했습니다 실제 기기에서 테스트할 수 있게 빌드하고 실행해 보겠습니다 확대/축소 그리드로 빠르게 원하는 사진으로 이동할 수 있어요 선택한 사진은 앱에 자동으로 표시됩니다 새로운 내장 피커 덕분에 앱의 사진 선택 경험이 크게 개선되었네요

시연은 여기까지입니다

iPhone으로 시연했지만 같은 API를 iOS와 iPadOS, macOS에서도 활용할 수 있습니다 SwiftUI뿐만 아니라 UIKit와 AppKit에서도 같은 API를 활용할 수 있습니다 그럼 UIKit와 AppKit API를 살펴볼까요? 같은 PHPickerConfiguration API로 내장 피커를 사용할 수 있어요 이제 selection을 .continuous로 설정하여 연속 선택 동작을 선택할 수 있습니다 또한, mode를 .compact로 설정하여 피커를 단일 행 레이아웃으로 구성할 수도 있죠 edgesWithoutContentMargins를 사용해서 탐색 모음과 같은 액세서리를 숨길 수 있으며 disabledCapabilities로 특정 피커 기능을 비활성화할 수 있습니다 피커를 내장하기 위해 .photosPickerStyle(.inline) 수정자를 사용할 수 있는 SwiftUI API와 달리 containerViewController에 Child view controller로 추가해야 합니다 피커 프레임을 수동으로 설정하거나 Auto Layout 제약을 사용해 피커 뷰의 크기와 포지션을 지정할 수 있습니다 서브뷰를 추가한 후에는 피커에 추가되었음을 알리기만 하면 됩니다

피커가 사용자에게 표시될 때 새 PHPickerConfiguration.Update로 피커를 업데이트할 수 있습니다 또한, 기존의 deselectAsset과 moveAsset API를 사용하여 선택한 에셋을 선택 해제하거나 순서를 변경할 수도 있습니다 다음으로 새로운 옵션 메뉴를 소개하고 이 메뉴가 앱에 미치는 영향을 살펴보겠습니다 사용자는 새 옵션 메뉴를 사용하여 앱과 공유할 수 있는 항목을 더욱 세밀히 제어할 수 있습니다 기본적으로 모든 이미지 메타데이터가 포함되지만 이제 사용자가 선택한 사진에서 위치 등의 민감한 메타데이터를 제거할 수 있습니다

PhotosPicker나 Transferable API를 사용하는 경우 새로운 옵션 메뉴 지원을 위한 별도의 채택 작업이 필요 없습니다 PHPickerViewController API를 사용하는 경우에도 채택 작업이 필요하지 않죠 레거시 UIImagePickerController API를 사용하거나 전체 라이브러리 액세스 권한이 있는 앱에는 옵션 메뉴가 지원되지 않습니다 자, 지금까지 옵션 메뉴였습니다 이제 시스템 피커 사용 시 HDR 이미지와 비디오 및 시네마틱 모드 비디오를 지원하는 방법에 대해 설명하겠습니다 피커는 기본적으로 에셋을 JPEG와 같은 호환 가능한 형식으로 자동 변환 할 수 있습니다 단, 트랜스코딩된 에셋에는 원본 에셋에 포함된 모든 정보가 포함되지 않을 수 있습니다 따라서, HDR 콘텐츠를 수신하려면 자동 트랜스코딩을 하지 않는 게 좋습니다 .current 인코딩 정책을 사용하고 .image 또는 .movie와 같은 일반 콘텐츠 유형을 요청하면 사진과 비디오를 원래 형식으로 가져올 수 있습니다 인코딩 정책 설정이 .current여도 .jpeg와 같은 특정 콘텐츠 유형을 요청하면 에셋을 변환할 수 있습니다 HDR 지원 추가 관련 자세한 내용은 올해의 세션 중 하나인 '앱에서 HDR 이미지 지원하기'에서 확인하실 수 있습니다 다음은 원본 형식 이미지를 수신하는 코드 예제입니다 preferredItemEncoding은 .current로 importedContentType은 .image로 설정되어 있죠 시네마틱 모드 비디오를 선택하면 피커에 모든 심도 효과를 입혀 렌더링된 버전이 피커에 표시됩니다 모든 결정 지점을 얻으려면 사진 보관함 액세스를 요청하고 PhotoKit를 사용하여 비디오를 가져와야 합니다 시네마틱 모드 비디오에 대해 자세히 알고 싶다면 '앱에서 시네마틱 모드 비디오 지원하기' 세션을 확인하세요 정리하자면, 새로운 내장 피커는 높은 유연성을 제공합니다 여러분이 이 피커로 어떻게 실력을 발휘할지 기대되네요 옵션 메뉴는 뭔가 공유할 때 사용자의 손이 더 가게 하므로 사진 보관함 액세스 요청은 웬만하면 자제하세요

감사합니다 즐거운 코딩하세요! ♪ ♪