[iOS] UIImagePickerController: 라이브러리에서 사진 불러오기

사진 앨범에서 사진 불러오기

오늘 정리할 내용은 iOS의 사진첩에 접근해 사진을 불러와 애플리케이션 내에 표시하는 작업의 흐름입니다. 이건 써봤을 때 정리 안하면 무조건 까먹고 다시 구글링하고 있을 것 같아서 생생할 때 정리합니다!

먼저 아래와 같이 기본적인 UI를 세팅하고 IBOutlet을 정의했는데요, 이 포스트의 목표는 화면에 보이는 노란색 버튼을 눌렀을 때 UIImageView에 해당 사진을 표시하는 과정을 기록하는 것입니다! 그럼 시작해보겠습니다 🍎

 

1. IBAction 설정

먼저 버튼이 눌렸을 때의 동작을 정의하기 위해서 IBAction부터 정의해주겠습니다.

마우스 우클릭으로 UIButton을 선택하고 뷰 컨트롤러로 드래그하면 IBAction을 생성할 수 있습니다.

import UIKit 

class ViewController: UIViewController { 
	@IBOutlet weak var imageView: UIImageView! 
    @IBOutlet weak var openPhotosButton: UIButton! 
    
    override func viewDidLoad() { 
    	super.viewDidLoad() 
    } 
    
    @IBAction func openPhotosButtenPressed(_ sender: Any) { 
    } 
}

 

2. Delegate 채택하기

뷰 컨트롤러에서 사진을 부르기 위해서는 사진을 고르는 화면인 UIImagePicker를 사용해야합니다. 이를 위해서 뷰 컨트롤러에 두 가지 delegate를 채택시켜야합니다.

UIImagePickerControllerDelegate

UIImagePicker

💡 A view controller that manages the system interfaces for taking pictures, recording movies, and choosing items from the user's media library.

애플의 공식문서에 따르면, UIImagePicker는 사진/영상을 찍거나 앨범에서 사진을 고를 수 있도록 하는 뷰 컨트롤러라고 합니다.

UIImagePickerDelegate

💡 A set of methods that your delegate object must implement to interact with the image picker interface.

그리고 UIImagePickerDelegate는 Image Picker와 상호작용하기 위해 반드시 구현해야하는 메서드의 집합이라고 합니다. UIImagePickerDelegate를 채택하면 이미지를 고르는 다양한 이벤트에 대한 동작을 지원받을 수 있습니다.

UINavigationControllerDelegate

💡 Use a navigation controller delegate (a custom object that implements this protocol) to modify behavior when a view controller is pushed or popped from the navigation stack of a UINavigationController object.

UINaviationControllerDelegate는 화면이 전환될 때의 동작을 지원합니다. Image Picker에서 사진을 선택하거나, 취소했을 때 다시 원래 사용중이던 뷰로 돌아오는 작업을 처리합니다.

결국 사진 앨범에서 이미를 고르고 다시 원래화면으로 돌아오는 이벤트들을 처리하기 위해서 UIImagePickerControllerDelegate 와 UINavigationControllerDelegate를 채택해야합니다.

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate { }

https://github.com/raywenderlich/swift-style-guide 에 따르면, 프로토콜은 extension으로 따로 빼서 채택하도록 하는게 좋다고 합니다!

3. 권한 설정하기

애플리케이션이 사용자의 사진첩을 열어서 안에있는 사진을 가져온다는 것은 꽤나 위험한 일입니다. 그래서 기본적으로 모든 애플리케이션들은 사용자의 데이터에 접근할 수 없습니다. 이를 허용해기 위해서 앱에 권한을 추가해주겠습니다.

먼저 프로젝트의 info.plist를 열고,

하나의 엔트리를 추가해주겠습니다. "Privacy - Photo Library Usage Description" 를 추가해서 사진 라이브러리에 대한 접근 권한을 허용합니다.

3. Image Picket 열기

이제 사진을 가져오기 위해서 Image Picker를 불러와야합니다. ImagePicker 역시도 별도의 뷰 이기 때문에 ImagePickerController의 인스턴스를 생성에 현재 화면 위에 표시합니다.

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate { 
    @IBAction func openPhotosButtenPressed(_ sender: Any) { 
        let imagePicker = UIImagePickerController() 
        imagePicker.delegate = self 
        imagePicker.sourceType = .photoLibrary present(imagePicker, animated: true) 
    } 
}

이전에 정의한 IBAction 안에 UIImagePickerController 의 인스턴스를 생성하고, 타입을 사진 라이브러리로 지정했습니다. 그리고 당장은 필요하지 않지만 뷰 컨트롤러에게 Image Picker의 이벤트 처리를 위임하기 위해 delegate에 뷰컨트롤러를 추가해줍니다. 마지막으로 뷰 컨트롤러를 화면에 표시하면, 아래와 같이 사진 라이브러리의 이미지를 확인할 수 있는 Image Picker가 등장합니다.

4. 선택된 사진 이용하기

위에서 열린 Image Picker에서 사진을 선택해도 아무 변화도 없습니다. 아직 선택된 사진에 대한 처리를 하지 않았으니까요! 이런 처리를 위해 UIImagePickerControllerDelegate에서 제공하는 imagePickerController 메서드를 사용합니다.

 func imagePickerController(_ picker: UIImagePickerController, 
  didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) { }

💡 Tells the delegate that the user picked a still image or movie.

이 메서드는 델레게이트에게 사용자가 사진을 다 골라냈다는 것을 알립니다. 인자로 전달되는 didFinishPickingMediaWithInfo 사용자가 선택한 사진이 들어있습니다. 지금 Image Picker는 뷰 컨트롤러에게 위임되어있기 때문에 이 메서드를 정의하면 사용자가 사진을 고른 후의 이벤트를 정의할 수 있습니다.

didFinishPickingMediaWithInfo의 내부에는 딕셔너리 형태로 다양한 정보들이 들어가있습니다.

[__C.UIImagePickerControllerInfoKey(_rawValue: UIImagePickerControllerImageURL): file:///Users/jeonyeohun/Library/Developer/CoreSimulator/Devices/4980723E-92F5-4C7E-8F32-563E13A596BE/data/Containers/Data/Application/FC2D69DE-4D7E-41D2-B709-0AD4842D8F14/tmp/830C1E7B-FC23-41BB-A34A-293BACF85E8A.jpeg, 
__C.UIImagePickerControllerInfoKey(_rawValue: UIImagePickerControllerMediaType): public.image, 
__C.UIImagePickerControllerInfoKey(_rawValue: UIImagePickerControllerReferenceURL): assets-library://asset/asset.JPG?id=106E99A1-4F6A-45A2-B320-B0AD4A8E8473&ext=JPG, 
__C.UIImagePickerControllerInfoKey(_rawValue: UIImagePickerControllerOriginalImage): <UIImage:0x60000301ce10 anonymous {4288, 2848}>]

이 중에서 우리가 원하는 건 UIImageView에 넣을 수 있는 UIImage 타입이기 때문에 마지막에 있는
UIImagePickerControllerOriginalImage를 가져오면 되겠네요! 문법이 조금 바뀌어서 키 값은 "UIImagePickerController.InfoKey.originalImage" 로 사용하면 된다고 합니다. 이제 이 값을 이용해서 이미지 뷰를 채워주는 일만 남았네요.

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) { 
    if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage { 
    	self.imageView.image = image 
    } 
    dismiss(animated: true, completion: nil)
}

이렇게 옵셔널 바인딩을 해서 래핑을 풀어주고 이미지 뷰의 데이터로 넣어주면 끝입니다! 마지막의 dismiss는 열린 Image Picker의 화면을 닫는 용도로 사용됩니다!

5. 결과 확인하기

정리

1. 뷰 컨트롤러에 UIImagePickerControllerDelegate, UINavigationControllerDelegate 를 채택한다.
2. Privacy - Photo Library Usage Description 권한을 추가한다.
3. ImagePicketController 인스턴스를 생성한다. 뷰 컨트롤러를 delegate로 설정한다.
4. imagePickerController 메서드에 선택된 사진에 대한 처리를 정의한다.