[iOS] UIKit 에서 실시간 Preview 보는 방법

코드로 레이아웃을 잡아보고 있는데 수정사항이 있을때마다 Run (Cmd + R)을 해야하는 번거로움이 있습니다.

하지만 SwiftUI의 기능중 하나를 써서 실시간으로 변경된 레이아웃을  볼수 있게 할 수 있습니다 !!  

 

결과물 먼저 보시죠!

 

---

솔깃한 주제지만 요구사항이 있어요 !

요구사항

• Xcode 11
• macOS Catalina
• iOS 13

 

---

 ⚠️ 참고
Mac OS: Monterey 
Xcode: 13 이상

 

위 조건에 해당한다면 시뮬레이터를 iOS 15버전이상으로 지정해주어야 preview가 실행이 됩니다.

 

 

---

 

요구사항이 갖춰졌다면 시작해보죠!

기존 레이아웃을 코드로 작성했던곳에 아래 코드를 따로 넣어줍니다.  

Preview를 보는 코드는 아래와 같아요 (설명도 참고 !)

// 전처리
#if DEBUG

import SwiftUI
@available(iOS 13.0, *)

// UIViewControllerRepresentable을 채택
struct ViewControllerRepresentable: UIViewControllerRepresentable {
    // update
    // _ uiViewController: UIViewController로 지정
    func updateUIViewController(_ uiViewController: UIViewController , context: Context) {
        
    }
    // makeui
    func makeUIViewController(context: Context) -> UIViewController {
    // Preview를 보고자 하는 Viewcontroller 이름 
    // e.g.) 
        return WebkitViewController()
    }
}

struct ViewController_Previews: PreviewProvider {
    
    @available(iOS 13.0, *)
    static var previews: some View {
        // UIViewControllerRepresentable에 지정된 이름.
        ViewControllerRepresentable()

// 테스트 해보고자 하는 기기
            .previewDevice("iPhone 11")
    }
}
#endif

 

미리보기 창의 단축키는 (option + cmd + enter) 입니다!

 

 

 

 

참고:  https://www.youtube.com/watch?v=_E0VZJf2NJk&t=852s