📱 iOS - PHPicker

토이 프로젝트를 진행하던 중에 이미지를 선택해서 업로드하는 동작이 필요했습니다.

당연히 처음에는 자료가 많은 UIImagePickerController를 사용하고자 했습니다.

이 때는 PHPicker라는 API가 있는지도 몰랐었죠.

기능이 굉장히 제한적이라는 사실에 한탄하며 공부를 하던 중에 iOS14에 기존의 UIImagePickerController를 대체하고자 PHPicker가 등장했다는 소식을 접하게 됐습니다.

기본 사진 앱에 있는 다중선택/줌인아웃/검색 기능이 포함되어 있다고 하네요..! 🫢

PhotoKit

사실 이 PHPicker 라는 놈.. 혼자 떡하니 등장했던 건 아닙니다.

애플이 라이브 포토 등을 추가하며 사진과 비디오 기능에 힘을 주기 위해 개발한 PhotoKit에 포함된 라이브러리들 중 하나입니다.

역시 공식 문서가 정보를 찾기엔 가장 좋겠죠?

Technology - PhotoKit

새로운 API를 소개하는 WWDC에서도 당연히 소개했던 적이 있습니다.

WWDC2020 - Meet the new Photos picker

세션 제목에도 **“Photos”**라고 강조를 해두었네요.

개발자들이 얼마나 여러 사진 선택을 요구했었는지 확인할 수 있는 대목이 아닌가 싶습니다.

살짝쿵 2021년과 2022년 세션에서도 소개된 내용을 살펴보니, 2021년에는 ProRAW 포맷 소개에 힘을 준 만큼 새로운 포맷 지원을 소개했고 2022년에는 실리콘 맥과 함께 떡상한 macOS에서도 PHPicker를 제대로 지원한다는 내용들이 있네요.

이미 기존의 UIImagePicker를 완전히 대체한 것 같습니다.

자 그래서 핵심은 뭐냐..?

PHPicker는 PhotoKit 중에서도 PhotosUI 프레임워크에 포함되어 있기 때문에 사용하려면 PhotosUI를 import해야 사용할 수 있습니다.

import PhotosUI

Photos Picker의 이점

그래서 애플은 왜 Photos Picker(PHPicker)를 사용해야 한다고 할까요?

기존의 UIImagePicker에 대응되는 6가지 이점을 내세우고 있습니다.

1. 이미지 로딩의 지연과 복구 UI
2. RAW와 파노라마 이미지 등의 크고 복잡한 애셋을 안전하게 핸들링
3. UIImagePickerController에서는 불가능한 유저 선택 옵션
4. 라이브 포토만을 선택할 수 있는 설정 제공
5. 라이브러리 접근 없이 PHLivePhoto 객체 사용 가능
6. 유효하지 않은 입력에 대한 까다로운 validation

기존의 앱들은 핸드폰에 저장된 사진들에 접근하기 위해서 접근 요청을 했었죠?

위 사진처럼요.

하지만 새로운 PHPicker를 사용하면 프로필 사진 선택등의 단순한 사진 라이브러리 작업으로는 권한을 요구하지 않는다고 합니다.

사진 편집, 카메라 앱등은 여전히 권한을 요구한다고 하네요.

또한 사진을 단순히 저장하는 작업 또한 사진 저장 권한이라는 낮은 레벨의 권한만을 부여해서 사용자의 아이폰을 더 안전하게 지킬 수 있다고 합니다.

가장 중요한 점은 보안에서입니다.

PHPicker는 소프트웨어적인 캡처에서 안전합니다.

스크린샷을 찍을 때 모든 컨텐츠(사진, 비디오)들을 렌더링하지 않은 상태로 캡처하여 불법 프로그램으로 인해 라이브러리가 캡처되어 개인 정보가 유출되는 것을 막을 수 있다고 합니다.

이게 어떻게 가능한 것이냐?

PHPicker는 앱 안에서 실행되는 것 같은 UI를 갖지만 사실을 독립된 다른 프로세스입니다. 위 사진에서처럼요.

앱의 모양을 그저 렌더링하여 배경으로 보여주고 있는 것이죠.

따라서 앱은 PHPicker의 기능들을 직접 사용하고 있는 것이 아니라, PHPicker는 따로 동작하고 유저가 선택한 컨텐츠들에 한해서만 정보를 제공하는 것입니다.

PHPickerViewController

위 사진에서 알 수 있듯이 PHPickerViewController는 PHPickerConfiguration을 통해 생성되고 제어할 수 있습니다.

var configuration = PHPickerConfiguration()

filter와 selectionLimit

filter 프로퍼티로는 PHPicker에서 선택할 수 있는 컨텐츠 타입을 정해줄 수 있습니다.

images, livePhotos, videos, screenshots 등 다양한 옵션을 지원하고 있고, 따로 지정해주지 않는다면 기본값으로 .all 값을 갖습니다.

configuration.filter = .images
configuration.filter = .any(of:
  [.images, .livePhotos, .videos]
)

selectionLimit 프로퍼티로는 선택할 이미지의 개수를 정해줄 수 있습니다.

기본값은 1이고, 음수의 값을 넣으면 앱이 크래쉬납니다.

numberOfLines와 같이 0의 값을 넣어주면 선택 개수를 제한 없이 설정해줄 수 있습니다.

configuration.selectionLimit = 12

이렇게 설정해준 configuration 값은 PHPickerViewController의 파라미터로 넣어주어 적용합니다.

let imagePicker = PHPickerViewController(configuration: configuration)
imagePicker.delegate = self
present(imagePicker, aniamted: true)

UIImagePickerController와 마찬가지로 delegate까지 위임해주고 present하면 사진을 고를 수 있는 화면이 present됩니다.

선택 결과 핸들링

유저가 컨텐츠를 선택했다면 해당 컨텐츠들로 무언가를 해야겠죠.

PHPicker는 delegate의 메서드를 통해 결과를 처리해줄 수 있습니다.

PHPickerViewControllerDelegate 프로토콜을 채용해주고,

extension DefaultImagePickerCoordinator: PHPickerViewControllerDelegate {

    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // do something
    }

}

유저가 선택을 완료했다는 버튼을 탭하면 호출되는 picker(_,didFinishPicking) 함수를 구현해줍니다.

func picker(_ picker: PHPickerViewController, didFinishPicking reuslts: [PHPickerResult]) {
  picker.dismiss(animated: true)

  let itemProvider = results.first?.itemProvider

  if let itemProvider = itemProvider, itemProvider.canLoadObject(ofClass: UIImage.self) {
    itemProvider.loadObject(ofClass: UIImage.self) { image, error in
      if let image = image {
        // do something
      }
    }
  }
}

우선 picker.dismiss(animated:)로 PHPickerView를 dismiss 해줍니다.

그 후 NSItemProvider라는 객체로부터 유저가 선택한 컨텐츠를 제공받을 수 있도록 초기화 과정과 실제로 불러오는 과정을 넣어줍니다.

이 과정은 내부적으로 async하게 구현되어 있기 때문에 @escaping 클로저 안에서 이미지를 받아 처리해주어야 합니다.

단순히 이미지나 비디오를 선택해서 받아오는 작업은 이것만으로도 충분합니다.

여기까지의 작업은 사진 접근 권한을 요구하지 않지만 사진을 편집하는 등의 작업등은 사진 라이브러리 권한을 요구하고, PhotoKit의 다른 API를 활용하여 작업해야합니다.

마무리

오늘은 우선 여기까지 알아보았습니다.

애플은 이미 UIImagePickerView를 deprecated 시켰습니다.

구글 검색 결과는 아직 이전 게시물들을 상단에 노출시키고 있어 WWDC 세션을 찾아보지 않았다면 여전히 헤매고 있었을 것 같습니다.

틈틈히 WWDC 구석구석을 살펴보는 습관을 가집시다!