[iOS] 시뮬레이터 없이 UI 확인하는 Preview 기능 만들기

 

 

문제 상황 파악하기

 

UI를 구현할 때 가장 힘든 것 중 하나가 매번 빌드하면서 결과물을 확인하는 것이죠.

물론, Figma 등으로 UI 스펙이 확정된 경우 UI를 그리기 상대적으로 편하지만 그래도 여전히 UI 확인을 실시간으로 할 수 없다는 건 불편한 것 같아요.

 

특히 현업에서 빌드를 한 번 돌리는데 너무 많은 시간이 소요되었기 때문에 더 힘들었어요(단순 빌드가 20분 넘게 걸린 적도..).

 

그래서 이번에는 Preview를 통해 화면을 미리 볼 수 있는 기능을 구현해볼게요.

 

 

Preview 구현하기

 

우선 도구는 SwiftUI에요.

 

"내 프로젝트는 UIKit인데?" 하는 분이 있을 수도 있지만 프로젝트의 UI와 아무 상관이 없어요.

저 역시 프로젝트는 UIKit와 Snapkit으로 구현하고, SwiftUI는 Preview만을 위해서 사용했어요.

 

이제 방법을 살펴볼게요! 

 

우선, Preview로 미리보기를 하고 싶은 ViewController에 SwiftUI를 import 해줄게요 :]

 

 

그리고 ViewController 외부, 원하는 위치에 아래 코드를 작성해요.

 

// MARK: - Preview

struct MainViewController_Previews: PreviewProvider {
  static var previews: some View {
    Container().edgesIgnoringSafeArea(.all)
  }
  
  struct Container: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
      let rootViewController = CafeSearchListViewController()
      return UINavigationController(rootViewController: rootViewController)
    }
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
    typealias UIViewControllerType = UIViewController
  }
}

 

SwiftUI에 대해서 잘 모르더라도 대략적으로 이해 가능한 코드에요.

Container()를 보여주는 View를 previews라는 이름으로 만들어요.

 

그리고 이 Container를 살펴보면 UIViewControllerRepresentable이라는 프로토콜을 채택하는데 느낌상 아래 두 메서드를 작성하면 ViewController를 Represent 하게 해 주겠죠?

 

makeUIViewController(context:)에서 말 그대로 ViewController를 생성해요.

저의 경우, Navigation Controller로 구현할 것이라 rootViewController를 현재 ViewController로 정의한 후 넣어주었어요.

 

이렇게만 작성해도 갑자기 Xcode 화면이 분할돼요.

 

 

이제 프리뷰가 가능해요!

주의할 점은 시뮬레이터를 띄워서 확인하는 것이 아니라고 하더라도 시뮬레이터 설정이 제대로 되어있어야 해요.

iOS 앱이고 iPhone 13을 기준으로 만들었는데 시뮬레이션이 Mac으로 설정되어있으면 Preview가 작동하지 않아요 :]