[iOS] UIKit에서 SwiftUI Preview 사용해보기

안녕하세요 Foma👟 입니다!

 

얼마 전에 유튜브에서 만화경 iOS 개발기를 보다가 (https://www.youtube.com/watch?v=W_1FoBtaV7A)

 

UI를 개발하는데 스토리보드와 코드로 구현하는 장단점을 모두 이용할 수 있는게 UIKit에서 Preview를

 

사용하는 것이라고 하더라구요.

 

Preview를 사용하면 코드로 화면을 구현하더라도 직관적으로 화면을 볼 수 있고 또한 스토리보드로 개발할 때

 

생기는 충돌 문제 등을 없애줄 수 있기 때문이죠!

 

그래서 오늘은 UIKit에서 Preview를 어떻게 적용하는지에 대해 알아보겠습니다~

---

UIViewController + Extension

 

아래와 같이 프리뷰 익스텐션을 만들어줘서 어떤 뷰컨트롤러에서든 쓸 수 있게 만들어줍니다.

 

import SwiftUI

#if DEBUG
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

 

뷰컨트롤러로 이동해서 import SwiftUI를 해주시고

 

아래에 PreviewProvider를 만들어준 뒤 해당 ViewController를 toPreview() 메소드로 프리뷰를 만들어줍니다.

import SwiftUI

struct VCPreView:PreviewProvider {
    static var previews: some View {
        ViewController().toPreview()
    }
}

 

스토리보드일 경우

 

스토리보드 아이디를 정해주시고

 

아래와 같이 적용해줍니다.

 

struct VCPreView:PreviewProvider {
    static var previews: some View {
    	UIStoryboard(name: "Main", bundle: nil).instantiateViewController(identifier: "ViewController").toPreview()
    }
}

 

이렇게 실행해주시면 아래와 같이 프리뷰 화면이 나타난 걸 볼 수 있을거에요!

 

 

---

프리뷰 세부 설정하기

 

프리뷰 화면에서 위쪽에서 아래 버튼을 누르면

 

이름,디바이스,레이아웃,방향 등을 조정할 수 있습니다.

 

 

아래 버튼을 누르시면 디바이스를 여러개 만들 수 있는데요.

 

 

한번 누를 때마다 아래와 같이 디바이스가 여러개 생성됩니다.

 

 

위 버튼들을 클릭하면 자동으로  코드가 작성되는 것을 볼 수 있을거에요.

 

struct VCPreView:PreviewProvider {
    static var previews: some View {
        Group {
            ViewController()
                .toPreview()
            .previewDevice("iphone 8")
            .previewDisplayName("아이폰 8")
            
            ViewController()
                .toPreview()
                .previewDevice("iPhone 12 Pro")
                .previewDisplayName("아이폰 12 프로")
                .preferredColorScheme(.dark)
        }
    }
}

 

서로 다른 이름과 디바이스 다크모드 등을 적용하면 아래와 같이 프리뷰를 볼 수 있습니다.

 

---

오늘은 이렇게 UIKit에서 프리뷰를 사용하는 방법에 대해서 알아보았습니다.

 

코드를 작성하자마자 바로 화면을 확인할 수 있고 서로 다른 디바이스에서 어떻게 보이는지 바로 확인할 수 있어서

 

확실히 편리하고 개발 속도도 향상되었습니다.

 

하지만 프리뷰가 디바이스 적용되는 시간이 오래걸릴 때도 있고 로딩이 오래 걸릴 때도 있고 크래쉬도 자주 나고

 

하더라구요.. (이건 점점 개선될 거라고 생각합니다!)

 

혹시라도 궁금하신 점 있으시면 댓글로 알려주세요!

---

Reference

 

Use Xcode Previews with UIKit