이번 포스트에서는 iOS 앱에서 프로그래밍 방식(코드)으로 화면을 캡처하는 방법을 알아보겠습니다.
여기서 만들어 볼 데모는 다음과 같이 동작합니다. 텍스트 필드의 값을 변경한 뒤, 버튼을 누르면 현재 화면이 캡처되고, 버튼 바로 아래에 배치된 이미지 뷰에 그 결과가 표시됩니다.
참고로 이 기능은 버튼 클릭뿐만 아니라 롱프레스(long press) 등 다양한 제스처에 연결할 수 있으며, 원한다면 캡처한 이미지를 사진 앨범에 저장하는 기능까지 확장할 수 있습니다. 이 글에서는 핵심인 화면 캡처와 이미지 뷰에 표시하기에 집중하겠습니다.
그럼 바로 시작해 보겠습니다.
1단계 – 프로젝트 생성
Xcode를 실행하고 New Project → Single View Application을 선택한 후, 프로젝트 이름을 “TakeScreenShot”으로 지정합니다.
2단계 – 스토리보드 구성
Main.storyboard를 열고 아래 그림과 같이 UITextField 하나, UIButton 하나, UIImageView 하나를 배치합니다.
3단계 – IBOutlet 연결
이미지 뷰에 대한 @IBOutlet을 연결하고 이름을 snapShotImageView로 지정합니다. 이 이미지 뷰가 캡처된 스크린샷을 보여주는 역할을 담당합니다.
4단계 – IBAction 연결
‘Take Snap Shot’ 버튼의 touchUpInside 이벤트에 @IBAction을 연결하고, 함수 이름은 takeSnapShotClicked로 지정합니다.
5단계 – 이미지 뷰 테두리 설정
ViewController 클래스의 viewDidLoad에서 이미지 뷰의 테두리 색상과 두께를 설정하여, 화면의 다른 영역과 시각적으로 구분되도록 만듭니다.
self.snapShotImageView.layer.borderColor = UIColor.red.cgColor self.snapShotImageView.layer.borderWidth = 2.0
6단계 – 스크린샷 캡처 로직 작성
스크린샷을 캡처하는 과정은 다음 순서로 진행됩니다.
- 그래픽 컨텍스트(graphic context)를 시작합니다.
- 현재 컨텍스트를 변수에 가져옵니다.
- 컨텍스트 변수에 현재 뷰의 레이어(layer)를 렌더링합니다.
- 컨텍스트로부터 이미지를 추출합니다. 이 시점의 컨텍스트에는 화면에 표시된 내용 전체가 담겨 있습니다.
- 캡처한 이미지를 이미지 뷰에 설정합니다.
- 그래픽 컨텍스트를 종료합니다.
위 과정을 모두 takeSnapShotClicked 메서드 안에 구현하면 코드는 다음과 같습니다.
@IBAction func takeSnapShotClicked(_ sender: Any) {
UIGraphicsBeginImageContextWithOptions(self.view.layer.frame.size, false, UIScreen.main.scale)
guard let context = UIGraphicsGetCurrentContext() else { return }
self.view.layer.render(in: context)
self.snapShotImageView.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}코드 설명
UIGraphicsBeginImageContextWithOptions는 뷰 크기와 화면 스케일에 맞는 비트맵 컨텍스트를 생성합니다. 이후 render(in:) 메서드로 뷰의 레이어를 해당 컨텍스트에 그리고, UIGraphicsGetImageFromCurrentImageContext()로 UIImage 객체를 얻어 이미지 뷰에 할당합니다. 마지막으로 반드시 UIGraphicsEndImageContext()를 호출해 컨텍스트를 정리해 주어야 메모리 누수를 방지할 수 있습니다.
7단계 – 빌드 및 실행
프로젝트를 빌드하고 실행한 뒤, ‘Take Snap Shot’ 버튼을 클릭해 보세요. 하단의 이미지 뷰에 현재 화면의 스크린샷이 표시되는 것을 확인할 수 있습니다.
