SwiftUI를 사용하지 않고 Preview 사용하기

Xcode 11 및 Mac OS 를 카탈리나로 업데이트를 하게 되면 SwiftUI 로 프로젝트를 생성할때 기본값으로 프리뷰를 확인할 수 있습니다.

 

하지만 대부분의 회사에서는 현재 iOS13 이상만을 지원하는 SwiftUI 로 모든 프로젝트를 진행하기는 거의 불가능에 가깝다고 볼 수 있죠.

 

그렇기 때문에 오늘은 SwiftUI 를 사용하지 않고 기존의 코드베이스 오토레이아웃에서 프리뷰를 확인할 수 있는 방법을 알아보도록 하겠습니다.

 

class MainViewController: UIViewController {

	let sampleView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

    
    override func viewDidLoad() {
    	super.viewDidLoad()
    	
    	view.addSubview(sampleView)    
        sampleView.backgroundColor = .red
        sampleView.layer.cornerRadius = 100
        
    }


}

 

 간단한 빨간 원을 그려보았습니다.

 

코드 상에서 x, y 0 에 사이즈가 200 인 것을 저희는 알 수 있지만, 기존에는 실제로 빌드를 하지 않으면 구현된 모습을 볼 수 없었습니다.

 

이제 몇줄의 코드를 추가해서 프리뷰를 확인할 수 있도록 해보겠습니다.

 

#if canImport(SwiftUI) && DEBUG
import SwiftUI
@available(iOS 13.0, *)
struct MainVcRepresentble: UIViewRepresentable {
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<MainVcRepresentble>) {
        print("updateUIView")
    }
    
    func makeUIView(context: Context) -> UIView { MainViewController().view }
    
}
@available(iOS 13.0, *)
struct MainVcPreview: PreviewProvider {
    static var previews: some View { MainVcRepresentble() }
}
#endif

 

해당 코드를 한번 살펴보도록 하겠습니다.

 

먼저 SwiftUI 를 Import 할 수 있는지, 그리고 디버그 환경인지를 체크합니다.

 

디버그 환경을 체크하는 이유는 Release 의 경우에는 iOS11, 또는 10 정도까지 지원하시는 경우가 많을텐데,  Deployment target 에서 디버그 환경을 iOS13 으로 변경하여 SwiftUI 와 관련된 프로토콜들을 채택할 수 있도록 하는 것입니다.

 

이제 이를 통하여 SwiftUI 의 프리뷰 관련된 프로토콜들을 채택합니다. (UIViewRepresentable, PreviewProvider)

 

Swift5 에서는 단일 리턴의 경우 return 을 생략해도 됩니다. 이것은 취향이기 때문에 return 을 붙이셔도 아무런 상관이 없습니다.

 

makeUIView 에서 저희가 보고 싶은 프리뷰의 UIView 를 리턴해줍니다. 저희는 메인뷰컨트롤러의 뷰를 보고 싶으니, 그대로 호출해줍니다.

 

그리고 PreviewProdvider 에서 위에서 선언한 Representable 을 프리뷰로 리턴해주면, 아주 멋진 프리뷰가 나타나게 됩니다!

 

 

스토리보드를 사용하지 않고 코드로 UI 를 작성하는 경우 실시간으로 변경되는 것을 확인하기가 어려운데, 이 프리뷰를 사용하게 되면 UI 생산성 향상에 큰 도움이 되지 않을까 생각합니다.