[ iOS ] 화면 캡쳐하기 - UIGraphicsRenderer

 

🔫 문제 발생

iOS 17가 발표되며, 앱스토어에 배포한 서비스에 혹시 deprecated된 클래스나 메서드가 있을까 싶어 찾아봤다. 정말 안타깝게도 '이미지 공유하기' 기능에서 사용했던 UIGraphicsBeginImageContextWithOptions(_:_:_:)가 iOS 17.0 버전까지만 제공된다고 한다... 

그래서 어떻게 버전 업을 할까 걱정하며 공식 문서에서 Graphic, Image, Render를 키워드로 비슷한 기능을 하는 클래스 또는 메서드를 찾아봤다. 다행히 멀지 않게 Drawing 카테고리에서 UIGraphicsRenderer 클래스를 발견했다! 이제 이 클래스를 사용하여 iOS 17 이후를 대응하는 리팩토링을 시작해보자.

 

 

 

 

 

🎨 UIGraphicsRenderer

UIGraphicsRenderer
An abstract base class for creating graphics renderers.
그래픽 렌더러를 생성하기 위한 추상적인 기본 클래스

 

이 클래스는 추상화된 기본 클래스로, 직접적으로 사용할 수는 없으며 subclassing이 필요하다. 기본적으로 image와 PDF를 위한 하위 구현 클래스가 제공되며, 더 다양하고 필요한 상세 기능을 위해 직접 하위 클래스를 구현하여 사용할 수도 있다. 

UIGraphicsImageRenderer / UIGraphicsPDFRenderer

 

그래픽 렌더러는 Core Graphics Contexts의 메모리 효율 관리를 제공한다. 이 Core Graphics Contexts는 2D Graphics에 대한 드로잉 환경과 백업 저장소(backing store)를 나타낸다. 그래픽 렌더러를 재사용하면, Core Graphics Contexts도 재사용한다.

 

 backing store: 

swap device로, 하드웨어에 속한다. 여기서 swap이란 시스템 메모리가 부족할 경우 하드웨어의 일부를 활용하여 작업을 도와주는 것이다. 단어의 한글 뜻이 '교환'이듯, 메인 메모리에서 지금 당장 필요하지 않은 부분과 필요한 부분을 swap-in / swap-out 하여 메모리 공간을 확보할 수 있게 돕는다.

backing store / swap

 

 

 

👩🏻‍🎨 UIGraphicsImageRenderer

UIGraphicsImageRenderer
A graphics renderer for creating Core Graphics-backed images.
Core Graphics 지원 이미지를 생성하는 그래픽 렌더러이다.

 

UIGraphicsImageRenderer를 사용하면, 각 색 요소를 표현하기 위해 사용되는 비트 수(색 심도)와 이미지 규모를 구성하는데 신경 쓸 필요없다. 게다가 Core Graphics Contexts를 관리하지 않아도 드로잉 작업을 할 수 있다. 이미지 출력 크기와 포맷 설정 파라미터로 이미지 렌더러를 초기 설정할 수 있다. 그런 후 이 렌더러의 여러 메서드를 사용하여 이미지를 그릴 수 있다.

 

이전에 사용했던 UIGraphicsBeginImageContextWithOptions의 경우, 드로잉 환경을 따로 구성했어야 했다. 그리고 이 함수에서 context 인스턴스가 반환되어 사용하는 것이 아니라, 저 어딘가에 만들어진 context가 스택으로 쌓여 현재 context로 사용되는 구조여서 직관적인 사용이 어려웠다.

하지만 이 클래스를 통해 그래픽 이미지 렌더러의 인스턴스를 생성할 수 있어 렌더러 사용이 직관적이어서 좋았다.

 

 

 

 

 

🏞️ 화면을 이미지로 렌더링하기

UIGraphicsImageRenderer의 인스턴스를 생성할 때, 이미지 출력 크기와 Context 생성 시 사용할 포맷을 파라미터로 설정할 수 있다. 나는 기본 포맷을 사용할 예정이라 따로 포맷 객체를 생성하지 않았는데, UIGraphicsImageRendererFormat 클래스를 사용해 원하는 포맷을 만들 수도 있다.

 // Render Image
let renderer = UIGraphicsImageRenderer(size: self.frame.size)

 

 

 

그래픽 렌더러에는 세 가지 형태의 출력을 제공한다. UIImage를 반환하는 image(actions:), jped로 인코딩된 데이터를 반환하는 jpegData(withCompressionQuality:actions:), png로 인코딩된 데이터를 반환하는 pngData(actions:)이 있다.

나는 기존에 UIImage가 반환되도록 구현했기에 그대로 반환값을 유지하고자 image(actions:)를 사용했다.

let image = renderer.image { context in
     // 코드
}

 

 

 

그 다음 무엇을 렌더링할 지를 정해서 이 context에 넘겨 주어야 한다. 나는 화면을 그리고 싶었기 때문에 view.layer의 메서드인 render(in:) 을 사용했다.

여기서 renderer, context, view, UIImage(결과)를 헷갈리지 않게 구분하자면(내가 생각한 느낌) 아래와 같다.

👩🏻‍🎨(화가) Renderer / 🪧(도화지) Context / ⛰️(대상) View / 🏞️(완성된 그림) UIImage

 let image = renderer.image { context in
        self.layer.render(in: context.cgContext) // View를 Extension 했기 때문에 self 사용
 }

 

 

 

 

 

 

📸 ScrollView 전체 캡쳐하기

ScrollView와 관련해 렌더링 크기를 구하는 방법은 이전 글에서 확인할 수 있다.

[ iOS ] ScrollView 화면 캡쳐하기 (Image Creation)

 

 

 

 

 

 

🧚🏻‍♀️ 전체 코드 확인하기

import UIKit

extension UIView {
    
    /// Render a Image from view to get a full screen snap shot.
    /// Return UIImage, or nil.
    func snapShotFullScreen(scrollView: UIScrollView) -> UIImage? {
        let savedFrame = self.frame
        let savedScrollviewFrame = scrollView.frame
        let savedContentOffset = scrollView.contentOffset
        let scrollContentFrame = CGRect(x: 0, y: 0, width: scrollView.contentSize.width, height: scrollView.contentSize.height)
        
        scrollView.contentOffset = .zero
        scrollView.frame = scrollContentFrame
        self.frame = scrollContentFrame
        
        // Render Image
        let renderer = UIGraphicsImageRenderer(size: self.frame.size)
        let image = renderer.image { context in
            self.layer.render(in: context.cgContext)
        }
        
        // Initialize the set value
        scrollView.contentOffset = savedContentOffset
        scrollView.frame = savedScrollviewFrame
        self.frame = savedFrame

        return image
    }
}

 

 

 

 

 

🤔 리팩토링하며 느낀 점

기존에 사용했던 UIGraphicsBeginImageContextWithOptions 함수가 오래되기는 했지만, 열심히 공부하고 만든 기능을 버전 업의 이유로 리팩토링해야하니 아쉬움이 컸다. 하지만 다른 구현 방법을 알아보고 다른 클래스로 구현해보니 왜 Apple에서 deprecated했는지 알 수 있었다. 새로 사용한 클래스는 공부가 쉬웠고, 불필요하다고 느껴지는 부분이 없었다. 게다가 리팩토링을 하니 코드 더 직관적이고 간단해졌다. 이번에 사용한 UIGraphicRenderer도 iOS 10 부터 사용되던 클래스라 사실 오래된 편이지만, visionOS에서도 지원되고 실제 구현에도 어려움이 없어서 한동안은 계속 사용할 수 있을 것 같다.