[Swift] PhotoKit 사용해서 커스텀 앨범 만들기 - Permission 처리하기 PHPhotoLibrary의 authorizationStatus와 requestAuthorization

👋 SNS 앱이나 사진을 업로드하는 기능이 있는 앱이라면 사용자 갤러리에 접근하여 이미지를 가져오는 기능이 필요한데요, 사실 애플에서는 이미 이러한 기능을 쉽게 사용할 수 있도록 UIImagePickerController와  PHPickerViewController을 제공하고 있습니다. 두 클래스에 접근 권한 차이가 있지만 사용자가 사진을 선택하고 이 사진 정보를 받아 올 수 있죠!

👋 그러나 UI/UX가 기존 iOS에서 제공해주는 형태와 달라야 한다면 직접 갤러리를 구현해 주거나 오픈 소스 라이브러리를 사용할 수도 있습니다. 이미 OS에서 제공해 주는 것이 아닌 직접 구현을 해주게 되면 까다롭기는 합니다. 하지만 불가능한 것은 아니라서 이전에 커스텀 갤러리를 만들게 되었는데요, 이를 구현해 보면서 알게된 점을 공유해 볼까 합니다. 생각보다 PhotoKit에 대한 내용이 없어서 힘들었던 기억이 ㅠㅠ 

👋 튜토리얼 형식으로 글을 작성해 볼까 하는데 PhotoKit과 UICollectionViewController를 사용하시는 많은 분들에게 도움이 되었으면 좋겠네요~ 만약 도움이 되었다면 여기저기 공유 부탁드리고 더 좋은 방법이 있다면 공유 부탁드려요!!

 

 

⭐그리고 언제든지 틀린점이나 지적은 환영입니다⭐

---

1.  프로젝트 생성하기

버전 정보 : Swift 5, Xcode 13.2.1

Xcode 를 실행하고 프로젝트를 생성해 줍시다. 현재 기준으로 iOS 15 까지 나왔으므로 2단계 낮춰 13.0으로 Deployment Target을 바꿔 주겠습니다. 

오늘 공부하게 될 갤러리 접근 권한은 iOS 14+ 부터 변경된 사항이 있습니다. 기존에 모든 사진에 접근을 허용하거나, 허용하지 못하게 선택할 수 있었는데요, iOS 14+ 부터는 선택된 사진만 접근 할 수 있는 권한이 새로 생겼습니다!

보안이 강화되어 사용자에게 좀더 향상된 보안 기능을 경험할 수 있게 해주지만 개발자에게는 좀더 고통스러운 경험을 주지 않을까 싶습니다 ㅎㅎ 그래도! 사용자 경험을 위해 자연스럽고 멋진 커스텀 갤러리를 구현해 봅시다!

---

2. 프로젝트 구성하기

(1) 기본 세팅하기

포스팅에서는 스토리보드가 아니라 xib를 이용해서 구현해 줄 건데 기본 세팅을 하실 줄 아신다면 (2) 프로젝트 구성하기로 넘어 가시면 됩니다!

Directory 구조에서 Main.storyboard를 한번 클릭해 주시고 Delete 키를 눌러줍니다. 위 사진과 같은 창이 뜨면 Move to Trash를 눌러주세요. 그리고 최상단에 위치해 있는 프로젝트를 눌러줍니다.

Targets을 클릭하시고 Info 탭을 클릭해 주세요 Info.plist 도 원래 디렉토리 구조에 위치해 있었는데 xCode가 업데이트 하면서 Targets > Info로 옮겨 갔습니다. 이전 포스팅을 보고 기본 세팅을 하시는 분들은 헷갈리실 수도 있을 것 같아요

Application Scene Mainfest > Scene Configuration > Application Session Role > Item 0 > Storyboard Name을 클릭해 줍니다 (왜 이리 꽁꽁 숨겨 놓은 거죠 ? ㅠㅠㅠ)

Delete 키를 눌러 지워주세요!

이제 General 탭으로 이동해 주세요. Deployment Info에 main interface가 Main으로 지정되어 있을 겁니다! 이 부분을 지운 후 엔터 한번 쳐주세요! 위 사진처럼 공란으로 만들어 주세요! 만약 프로젝트를 storyboard로 진행하실 때 Main.stroyboard 말고 따른 걸 사용하겠다! 하시면 위 Main Interface의 값을 새로운 스토리보드의 이름으로 바꿔 주시면 됩니다. 저희는 스토리보드 없이 진행되므로 지워 주는 거에요!

 

이제 SceneDelegate로 이동해 주세요! 최소 지원 버전이 iOS 13 이므로 SceneDelegate를 지원합니다. 이전 버전에서는 AppDelegate에서 windowViewController를 지정해 주곤 했는데 이번에는 SceneDelegate에서 작성하도록 하겠습니다.

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        self.window = UIWindow(windowScene: windowScene)
        self.window?.rootViewController = ViewController()
        self.window?.makeKeyAndVisible()
    }

  }

사용하지 않는 코드와 주석을 지우고 window를 지정해 줍니다. 문제 없이 ViewController가 rootVeiwController로 지정되었는지 알고 싶다면 ViewController로 가서 backgroundColor을 바꿔주세요. 커멘드 +  R을 눌러 빌드하고 실행해 줍시다

문제가 있다면 검은 화면으로 나오고, 문제가 없다면 지정된 색으로 화면이 나타나게 됩니다. 이제 기본적인 세팅은 끝났고 ViewController을 구성해 보겠습니다

 

(2) 프로젝트 구성하기

새로운 파일을 추가해 줍니다. 프로젝트 폴더를 누르시고 커멘드 + n을 누르거나 오른쪽 클릭해서 New File을 선택해 주시면 됩니다.

Also Create XIB file에 체크 해주세요! Subclass of 도 UIViewController로 되어 있는지 확인하시고 HomeViewController.swift와 HomeViewController.xib를 생성해 줍니다.

버튼 하나와 Collection View 하나를 적절히 배치해 줍니다. 이미지 선택하기 버튼을 누르면 커스텀 갤러리로 이동합니다. 그 후 커스텀 갤러리에서 선택한 사진을 HomeViewController의 collection view에 배치 시켜 주겠습니다.

HomeViewController.swift에 IBAction을 연결해 줍니다. Collection View는 다음에 연결해 주겠습니다.

 

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        self.window = UIWindow(windowScene: windowScene)
        self.window?.rootViewController = HomeViewController()
        self.window?.makeKeyAndVisible()
    }

SceneDelegate의 rootViewController를 HomeViewController로 변경해 줍니다

---

3. Permission 설정하기

사용자 갤러리에 접근하기 위해서 접근 권한을 얻어 와야 합니다. Info.plist로 가줍니다 (Info는 폴더 구조에 가장 상단에 있는 프로젝트를 클릭하시고 Target을 누르시면 Info 탭이 보입니다! Info 탭을 눌러 이동해 주시면 됩니다.)

NSPhotoLibraryAddUsageDescription을 추가해 주셔야 합니다

Key는 Privacy - Photo Library Usage Description 이고 value는 사진 권한을 얻어 올 때 나오는 OS 얼럿 창에 표시된 문구 입니다.

만약 새로운 필드를 추가하시는 방법을 모르시겠다면 Key에 있는 아무 거나 마우스를 올리시면 + 동그란 버튼이 보일 거에요 눌러 주시면 새로운 필드가 생깁니다!

 

import UIKit
import Photos

HomeViewController로 가서 Photos 를 임포트 해줍니다! 

버튼을 누르면 사용자 권한을 얻어야 하므로 연결해준 IBAction에 아래 코드를 작성합니다

    @IBAction func presentGallaryView(_ sender: UIButton) {
        if #available(iOS 14, *) {
            let status = PHPhotoLibrary.authorizationStatus(for: .readWrite)
            
        } else {
            let status = PHPhotoLibrary.authorizationStatus()
            
        }
    }

앞서 말씀 드렸듯이  iOS 14+ 부터 접근 권한이 달라지기 때문에 구분지어 작성해 주시면 됩니다. iOS 14+ 에서 .readWrite는 접근 권한 레벨입니다. 두가지가 있는데 사용자 갤러리에 읽고 쓸 수 있는 .readWrite와 삭제가 불가능한 .addOnly가 있습니다

두 가지 PHPhotoLibrary 함수가 반환하는 PHAuthorizationStatus 에는 여러 종류가 있는데 다음과 같습니다

우선 빌드하고 실행을 해봅시다.

버튼을 클릭하면 접근 권한을 얻어 오기 위한 얼럿뷰가 뜹니다! info.plist에 적어준 NSPhotoLibraryAddUsageDescription 의 문구가 얼럿 창에 뜨는 것을 확인할 수 있어요

    open class func authorizationStatus(for accessLevel: PHAccessLevel) -> PHAuthorizationStatus

여기서 PHAuthorizationStatus가 반환값임을 알 수 있습니다. 

 

.notDetermined : 사용자가 앱의 라이브러리 권한을 아무것도 설정하지 않은 경우 입니다.

.restricted : 사용자를 통해 권한을 부여 받는 것이 아니지만 라이브러리 권한에 제한이 생긴 경우 입니다. 사진을 얻어 올 수 없습니다

.denied : 사용자가 접근을 거부한 것입니다. 사진을 얻어 올 수 없습니다 🥲

.authorized : 사용자가 앱에게 라이브러리를 사용할 수 있도록 권한을 설정한 경우 입니다. 

.limited : (iOS 14+) 사용자가 제한된 접근 권한을 부여한 경우 입니다.

 

PHAuthorizationStatus의 타입이 enum이므로 제가 좋아하는 switch 문으로 바꿔 보도록 하겠습니다. 

    @IBAction func presentGallaryView(_ sender: UIButton) {
        if #available(iOS 14, *) {
            switch PHPhotoLibrary.authorizationStatus(for: .readWrite) {
            case .notDetermined:
                print("not determined")
            case .restricted:
                print("restricted")
            case .denied:
                print("denined")
            case .authorized:
                print("autorized")
            case .limited:
                print("limited")
            @unknown default:
                print("unKnown")
            }
            
        } else {
            switch PHPhotoLibrary.authorizationStatus() {
            case .notDetermined:
                print("not determined")
            case .restricted:
                print("restricted")
            case .denied:
                print("denined")
            case .authorized:
                print("autorized")
            @unknown default:
                print("unKnown")
            }
            
        }
    }

차이점은 iOS 14 미만 버전에서는 limited 타입이 없다는 것입니다. limited 타입을 추가해야 노란줄이 안생기는데 차피 iOS 14 에서만 동작하기 때문에 선택사항으로 넣어주시면 됩니다.

이전에 권한을 얻어오기 위한 얼럿 창에서 버튼이나 동작을 수행한 경우 시뮬레이터나 디바이스에서 완전히 앱을 삭제하고 다시 빌드 및 실행해 봅니다.

현재 사용자가 아무런 동작도 하지 않았기 때문에 not determined가 화면에 찍히는 걸 볼 수 있어요 😉

자 이제 어떻게 하느냐 하면... 아무런 선택도 되지 않았을 때 사용자에게 권한을 부여해 주겠니? 를 물어보기 위한 얼럿을 띄울 겁니다! 이전에 봤던 그 얼럿 창이에요! 우선 iOS 14+ 부터 진행하겠습니다

            case .notDetermined:
                print("not determined")
                PHPhotoLibrary.requestAuthorization(for: .readWrite) { status in
                    switch status {
                    case .authorized, .limited:
                        print("권한이 부여 됬습니다. 앨범 사용이 가능합니다")
                    case .denied:
                         print("권한이 거부 됬습니다. 앨범 사용 불가합니다.")
                    default:
                        print("그 밖의 권한이 부여 되었습니다.")
                    }
                }

.notDetermined 코드에 적어 주시면 되요! 사용자가 설정한 권한을 얻어 올 때는 authorizationStatus를 사용했는데, 권한을 요청할 때에는 requestAuthorization을 사용하면 됩니다.

사용자가 Select Photos를 누르게 되면 사진을 선택하고 나서 case 문의 .limited를 실행하게 됩니다. 만약 사용자가 Allow Access to All Photos를 누르게 되면 .authorized가 실행됩니다. 반면에 Don't Allow를 선택하면 권한이 거부 되었으므로  .denied가 실행됩니다

 

사용자가 Don't Allow를 누르게 된다면 사진 기능을 쓸 수 없으므로 이를 얼럿 창을 통해 안내하고, 사용자가 사진을 쓸 수 있게 권한을 부여 했다면 해당 사진을 보여주는 커스텀 앨범을 보여 주면 되겠죠?

위 창에서 하나를 선택해 사용자가 권한 설정 후 앱을 끄고 다시 앱에 들어오면 이제는 .notDetermined를 타지 않습니다! 왜냐 이미 권한이 부여 되어 .notDetermined가 아니게 된것이기 때문이에요.

최초 권한을 설정한 뒤 다시 앱을 들어오게 되면 

.notDetermined를 타지 않고 위 사진에서, Don't allow를 선택했었다면 1의 .denied가 호출되고, 권한을 부여 했다면 .authorized나 .limited가 호출 되는 거죠! 이렇게 하면 사용자는 앱을 최초로 켤 때 권한을 설정할 수 있는 얼럿창을 보게 되고 그 다음 부터는 설정된 권한으로 앱을 사용할 수 있게 되는 겁니당 ~~ 

 

이제 벌어질 수 있는 케이스 하나를 생각해 봅시당! 사용자가 이미지 선택하기 버튼을 누른 뒤 얼럿 뷰가 떠서 아무 생각없이 Don't Allow를 눌렀다고 합시다! 그러면 그 후로 버튼을 눌러도 갤러리 접근 권한이 없기 때문에 아무것도 뜨지 않을 거에요ㅠㅠ 사용자는 아무것도 모르고 더 이상 기능을 사용할 수 없게 될지도 몰라요! 그래서!!

좀 더 사용자 측면을 고려해서 코드를 작성해 봅시다

 

    func moveToSetting() {
        let alertController = UIAlertController(title: "권한 거부됨", message: "앨범 접근이 거부 되었습니다. 앱의 일부 기능을 사용할 수 없어요", preferredStyle: UIAlertController.Style.alert)
        
        let okAction = UIAlertAction(title: "권한 설정으로 이동하기", style: .default) { (action) in

                guard let settingsUrl = URL(string: UIApplication.openSettingsURLString) else {
                    return
                }
                
                if UIApplication.shared.canOpenURL(settingsUrl) {
                    UIApplication.shared.open(settingsUrl, completionHandler: { (success) in
                        print("Settings opened: \(success)")
                    })
                }
        }
        let cancelAction = UIAlertAction(title: "확인", style: .cancel, handler: nil)
        
        alertController.addAction(okAction)
        alertController.addAction(cancelAction)
        
        self.present(alertController, animated: false, completion: nil)
    }

함수 하나를 작성해 볼게요! 코드가 길지만 간단하게 UIAlertController 를 띄우는 코드 입니다. 얼럿 창에 총 두개의 버튼이 있습니다. 얼럿 창에서는 사용자에게 앨범 접근이 거부 되었다는 것을 알려줍니다! 버튼은 총 두개인데요, 확인을 누르면 얼럿 창이 닫히게 되고 "권한 설정으로 이동하기"를 누르면 친절하게 앱의 권한 설정 페이지로 이동해 줍니다! 그러면 사용자는 권한을 거부 한 뒤 다시 버튼을 누르거나 다시 앱에 접속해서 버튼을 누르면! 권한 거부당한 것을 무의식적으로 알게 되고 설정 창으로 이동해서 권한을 다시 부여 받을 수 있게 됩니다!!

이제 이 함수를 적절한 곳에 배치해 봅시다

        if #available(iOS 14, *) {
            switch PHPhotoLibrary.authorizationStatus(for: .readWrite) {
            case .notDetermined:
                print("not determined")
                PHPhotoLibrary.requestAuthorization(for: .readWrite) { status in
                    switch status {
                    case .authorized, .limited:
                        print("커스텀 갤러리로 이동")
                    case .denied:
                        DispatchQueue.main.async {
                            self.moveToSetting()
                        }
                    default:
                        print("그 밖의 권한이 부여 되었습니다.")
                    }
                }
            case .restricted:
                print("restricted")
            case .denied:
                DispatchQueue.main.async {
                    self.moveToSetting()
                }
            case .limited, .authorized:
                print("커스텀 갤러리로 이동")
            default:
                print("")
            }

코드를 좀 바꿔 주었습니다! .limited와 .authorized는 권한을 얻은 것이므로 커스텀 갤러리로 이동하는 코드를 넣어주면 됩니다. authorizationStatus(for:)오 requestAuthorization(for:) 두 곳 모두 간단하게 케이스문을 합쳐 줍시다.

다음으로 .denied된 경우 얼럿 창을 띄우는 함수를 호출해 줍니다! 반드시 명심할 것은 클로저 안에서 다른 쓰레드로 동작하기 때문에 DispatchQueue를 통해서 main에서 코드가 돌 수 있도록 바꾸어 줍니다.

 

자 이제 앱을 다시 완전히 지우고 다시 실행해 봅시다

사용자가 .denied 권한을 부여 한 경우 (Don't allow를 눌렀을 때) 위와 같은 창이 뜨는 것을 확인 할 수 있습니다~~ 그리고 권한 설정으로 이동하기 버튼을 누르면 친절하게 권한 설정 페이지로 이동합니다!! 좋아 자연스러웠어 👏👏👏

 

.restricted와 default에도 적절한 얼럿 뷰를 띄워 사용자에게 알려주면 좋겠죵?? 주의 할 것은 메인 스레드에서 돌려야 한다는 것 잊으시면 안되요 (삽질 하게 될 가능성 높음)

권한 바꾸지 말고 앱을 다시 재 실행하면 거부된 권한 때문에 다시 사용자에게 권한 설정을 해달라는 얼럿뷰가 뜨는 것을 확인 할 수 있습니다!

 

iOS 13 미만도 동일하게 구현해 주시면 됩니다

switch PHPhotoLibrary.authorizationStatus() {
            case .notDetermined:
                print("13 not determined")
                PHPhotoLibrary.requestAuthorization { status in
                    switch status {
                    case .authorized, .limited:
                        print("커스텀 갤러리로 이동")
                    case .denied:
                        DispatchQueue.main.async {
                            self.moveToSetting()
                        }
                    default:
                        print("그 밖의 권한이 부여 되었습니다.")
                    }
                }
            case .restricted:
                print("13 restricted")
            case .denied:
                DispatchQueue.main.async {
                    self.moveToSetting()
                }
            case .limited, .authorized:
                print("13 커스텀 갤러리로 이동")
            @unknown default:
                print("13 unKnown")
            }

---

이번 튜토리얼은 커스텀 갤러리를 구현하기 보다는 그 이전에 꼭 해줘야 할 권한 얻어오기를 해봤습니다~ 무엇보다 자연스럽게 권한을 얻어오게끔 구현해 보았는데요. 디테일 중요!! 더 좋은 방법이 있다면 공유 부탁드립니당 

다음 튜토리얼에는 limited에 대해 작성해 보겠습니다! 제한된 환경에서 신경 써줘야 할 것이 있기 때문에 😂😂😂 ㅠㅠㅠ

이렇게 포스팅하는데 시간이 너무 오래 걸리네요 ㅠㅠ 어떻게 해야 조금더 효율적으로 포스팅 할 수 있을련지..

코드 옮겨가실 때 출처 밝혀 주세요!!

---

참고 사이트

Apple PhotoKit 

https://developer.apple.com/documentation/photokit/delivering_an_enhanced_privacy_experience_in_your_photos_app

설정으로 이동

https://stackoverflow.com/questions/28152526/how-do-i-open-phone-settings-when-a-button-is-clicked