[Swift+UIKit+Code base UI] 코드베이스 UI에서 Preview 보는 방법

시나리오: UIKit으로 코드베이스로 UI 작성하면서 스토리보드로 작성할 때와 다르게

작성한 화면을 확인하려면 빌드 & 실행을 통해 시뮬레이터나 기기를 통해서 확인해야 하는데 

SwiftUI의 PreviewProvider를 사용하면 어떨까? 하는 생각이 들어서 시도해 봄. 

 

PreviewProvider를 어떤 아이인지 잠깐보면, 

SwiftUI프레임워크에 protocol인걸 확인할 수 있다. ( Apple의 reference를 볼 때마다 protocol과 extension을 통해서 

POP(Protocol Oriented Programming)을 정말 맛깔나게 기능 구현을 하고 있는 걸 볼 수 있다. 👍)

위에 이미지를 통해서 확인 할 수 있다시피 iOS13+ 에서 사용할 수 있다. 

 

시도해보고 싶은 것은 2가지 

1. ViewController 화면에 대한 프리뷰

2. View 에 대한 프리뷰 

 

이유인즉슨, 

복잡한 화면의 경우 한 화면에 필요한 뷰들을 View 단위로 나눠서 개발을 진행하기 때문에 View에 대한 프리뷰 화면이 보고 싶었고,

ViewController에서 해당 View들이 다 합친 후에 어떻게 보이는지 보고 싶기 때문이다. 

 

재사용성을 위해서 extension으로 UIViewController와 UIView에 대한 프리뷰 기능을 구현해보았다.

 

UIViewControllerRepresentable & UIViewRepresentable 프로토콜을 사용하여 SwiftUI에서 UIKit을 SwiftUI에 맞게 wrapping 할 수 있도록 해준다. 

 

UIViewControllerRepresentable

import SwiftUI

#if canImport(SwiftUI) && DEBUG
extension UIViewController {
    private struct Preview: UIViewControllerRepresentable {
            let viewController: UIViewController

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

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

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

 

UIViewRepresentable

import SwiftUI

#if canImport(SwiftUI) && DEBUG
extension UIView {
    private struct Preview: UIViewRepresentable {
        let view: UIView
        
        func makeUIView(context: Context) -> UIView {
            return view
        }
        
        func updateUIView(_ uiView: UIView, context: Context) {}
    }
    
    func preview() -> some View {
        Preview(view: self)
    }
}
#endif

 

시연 영상 : 

 

아주 만족스러울 정도로 잘 동작한다. 😎

 

추가적으로 테스트해보고 싶은 부분이 생겼는데 

"SomeView에서 코드를 작성하면 SomeView의 Preview와

SomeView의 객체를 사용하는 ViewController의 Preview 화면에서도  라이브하게 적용이 될까?"

하는 의문이 들어서 시도를 해봤는데 ?!?! 된다?! 안된다?! 

 

캔버스가 꼬이는 듯한 현상이 보이는데... 동작이 되기는 하지만 당황스럽게 동작을 해서 당장은 이렇게 쓰지는 못할 거 같다. (궁금하신 분들을 위해서 아래의 영상 첨부)

+ 추가적으로 계속 다양하게 테스트를 해봤는데 안쓰는게 당장은 정신건강에 좋을 거 같다 🥶

 

 

시연 영상: UIView & UIViewController Preivew 동시 동작 테스트 

흠.. 이렇게 사용하기는 힘들것 같다. Apple님 xcode 업데이트로 고쳐줘요!!

 

 

마무리 : 

- 간단한 예제에서는 빠릿빠릿하게 동작해서 오! 했는데 프로젝트가 좀 커지니까 느려지기도 하고 충돌도 빈번?하게 일어나서 그냥 시뮬레이터로 돌릴까...하는 생각을 몇 번 하긴 했음

- 원하는 걸 진행해봐서 속이 후련함 😎😎👍

 

gitHub: 

https://github.com/PotatoArtie/Potato-iOS/tree/master/Labs/UIKit%2BPreviewPotato

GitHub - PotatoArtie/Potato-iOS

 

참고사이트: 

https://developer.apple.com/documentation/swiftui/uiviewcontrollerrepresentable

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/uiviewrepresentable

Apple Developer Documentation