iOS SwiftUI, UIKit 개발 간 Preview Macro 사용방법

 

기존 iOS개발을 할때에는 코드 작성 후 UI를 확인하기 위해서 앱을 실행해서 런타임에서 활용하는 것이 일반적이었어요.

스토리보드를 사용할 적에는 @IBInspectable, @IBDesignable 을 사용해서 스토리보드에서 속성값을 변경하면서 런타임 전/후 시점에 변화하는 UI를 부분적으로 확인할 수도 있었지요. ☺️

그리고 SwiftUI가 생기고 나서는 PreviewProvider를 지정해서 preview 기능을 사용하곤 했었는데요. iOS17 이상에서는 Preview Macro를 활용해서 프리뷰 기능을 사용할 수 있습니다.

가법게 SwiftUI, UIKit에서 #Preview 매크로 사용하는 방법을 알아보아요~~

 

---

SwiftUI로 개발 시, Preview Macro 프리뷰 사용방법

SwiftUI의 경우, 위와 같이 #Preview 매크로를 사용해서 SwiftUI로 작성한 UI를 미리 확인할 수가 있어요. 코드를 변경하면 그에 맞게 실시간으로 변경된 UI를 확인 가능합니다. iOS17 이상에서 #Preview macro를 사용가능한점 참고하세요~

매우 간단하게 사용이 가능한데, 만약 앱의 최소타겟이 17 미만인 경우에는 #Preview 매크로 위에 iOS17이상에서 사용 가능함을 명시해주어야 합니다.

@available(iOS 17.0, *)

* option + command + enter로 preview 화면을 열고, 닫을 수 있습니다.

 

 

---

UIKit framework로 UI 개발 시, Preview Macro 프리뷰 사용방법

UIKit으로 만든 UI도 preview 기능을 사용할 수 있어요! 위와 같이 UIKit 기반의 UI (UILabel, UIView, UIButton 등)도 #Preview 내부에 반환을 해주면 preview 화면에서 실시간으로 확인 가능합니다.

이 경우에도 앱 최소타겟이 17 미만이면, @available 로 버전 명시를 해주어야 해요.

 

 

위와 같이 스토리보드 기반이 아닌 코드 기반의 Custom UI를 작성할때에도 실시간으로 UI를 Preview 기능으로 활용 가능합니다.

final class PreviewLabel: UILabel {
  override init(frame: CGRect) {
    super.init(frame: frame)
    self.text = "Preview Label"
    self.textColor = .blue
  }
  
  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
}

#Preview {
  PreviewLabel()
}

 

 

---

오늘은 간단하게 iOS17 이상에서 지원하는 Preview Macro를 UIKit, SwiftUI 기반 UI 개발 시 활용하는 방법을 알아보았어요.

Preview Macro를 잘 활용하면, 앱을 하나하나 실행할 필요 없이, Preview를 활용하면서 UI개발을 할 수도 있겠습니다. 관련 피드백, 의견 언제든 환영!