[iOS] UIKit 미리보기 기능 추가(Preview)

Extension 코드를 추가

UIKit를 사용하면서 미리보기 기능을 추가해주려면 SwiftUI를 사용해서 만들어주어야 합니다. 아래 코드를 새로운 파일 혹은 미리보기를 사용하려고 하는 파일에 추가해주세요.

// ViewController+Ext.swift

#if DEBUG
import SwiftUI

extension UIViewController {
    private struct Preview: UIViewControllerRepresentable {
            let viewController: UIViewController

            func makeUIViewController(context: Context) -> UIViewController {
                return viewController
            }

            func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
            }
        }

        func toPreview() -> some View {
            Preview(viewController: self)
        }
}
#endif

ViewController에 코드 추가

미리보기를 하려는 뷰 컨트롤러에 다음과 같은 코드를 추가해주세요.

#if DEBUG
import SwiftUI

struct VCPreView: PreviewProvider {
    static var previews: some View {
        ViewControllerName().toPreview()
    }
}
#endif

여기에서 ViewControllerName은 미리보기를 적용시키려고 하는 ViewController의 이름입니다. 예를들어 미리보기 하려는 뷰 컨트롤러의 이름이 MainViewController 라면 코드는 아래와 같이 변경되어야 합니다.

#if DEBUG
import SwiftUI

struct VCPreView: PreviewProvider {
    static var previews: some View {
        MainViewController().toPreview()
    }
}
#endif

단축키

위 코드들을 성공적으로 붙여넣었으면 아래와 같은 단축키로 사용할 수 있습니다.

Canvas 열기/닫기: Cmd + Opt + enter
새로고침: Cmd + Opt + P

미리보기 화면

아래와 같은 화면이 나오면 정상적으로 적용이 된 상태입니다.