[SwiftUI] SwiftUI View 캡쳐하기 (UIGraphicsImageRenderer)

SwiftUI View를 캡쳐하는 기능이 필요할 때가 있습니다. 앱에 화면 캡쳐 기능을 제공하는 것이 대표적인 사례겠죠? 저는 Naver Map SDK를 사용하면서 marker 이미지로 제가 만든 SwiftUI View를 사용하기 위해 구현해보았습니다. SwiftUI로 Naver Map을 사용하는 포스팅도 추후 올려보겠습니다.

 

아쉽게도 SwiftUI View를 바로 캡쳐하는 방법은 현재 제공되지 않고 있습니다. 대신, UIView를 캡쳐하는 방법은 있죠. UIKit을 써보신 분들은 아실 수도 있겠네요. 바로 UIGraphicsImageRenderer를 사용하는 방법입니다.

 

let infoWindowView = InfoWindowView(name: fishingArea.name, address: address)
let controller = UIHostingController(rootView: infoWindowView)
controller.view.frame = CGRect(origin: .zero, size: CGSize(width: 240, height: 110))
controller.view.backgroundColor = .clear
            
if let rootVC = UIApplication.shared.windows.first?.rootViewController {
    rootVC.view.insertSubview(controller.view, at: 0)

    /////이미지 캡쳐//////
    let renderer = UIGraphicsImageRenderer(size: CGSize(width: 240, height: 125))

    let infoWindowImage = renderer.image { context in
        controller.view.layer.render(in: context.cgContext)
    }
    ///////////////////
    
    marker.iconImage = NMFOverlayImage(image: infoWindowImage)
    controller.view.removeFromSuperview()
}

지난 포스팅에서 소개한 UIHostingController를 이용하여 SwiftUI View를 UIView로 먼저 변환한 다음, UIGraphicsImageRenderer를 이용하면 UIView를 캡쳐한 UIImage를 받아올 수 있습니다.

 

캡쳐 예제는 아래 stackoverflow를 참고했습니다.

출처: https://stackoverflow.com/questions/57200521/how-to-convert-a-view-not-uiview-to-an-image

How to convert a View (not UIView) to an image?

여기서 주의할 점은 UIHostingController로 변환한 UIView를 화면에 한번 표시했다가 다시 화면에서 지워주어야 한다는 것입니다.

이유는 정확히 모르겠지만, 이 과정을 거치지 않으면 캡쳐가 안 되는 문제가 있었습니다.

정확히는 240 * 125 사이즈의 UIView는 생성이 되는데 UIView안에 화면에 보여져야 할 요소가 보여지지 않는 문제였죠.

아직 CoreGraphics나 렌더링 개념은 잘 모르기때문에, 이 부분을 더 공부해봐야 이유를 정확히 알 수 있을 것 같습니다 :)