SwiftUI +Preview 를 활용하여 UI 작성 방법

 

안녕하세요. 블루스웨터소프트 입니다.

프로젝트를 진행하며 재미있는 방법으로? UI를 구성한적이 있습니다. 

꽤나 유용한 방법이어서 해당 내용을 공유 합니다.

기존의 프로젝트에 SwiftUI 의 Preview 를 적용하여 개발하는 방식입니다.

이 방법을 활용하면 Storyboard, Swift등은 그대로 쓰면서, UI 개발시 바로 바로 Preview 를 보면서 개발이 가능합니다. 

이렇게 되면 UI 구성을 확인하기 위해 매번 빌드 해서 확인하고 빌드해서 확인하는 수고로움이 덜어질 것입니다.

필요한 부분만 컴파일 되어 보여지므로 속도 또한 빠릅니다.

 

방법은 정말 간단합니다. 프로젝트에서 Swift 파일을 하나 생성합니다.

그리고 기존의 방법대로 UIkit 등 필요한 라이브러리를 import 하시고

맨 아래 부분에 "#if DEBUG" 전처리문으로 시작하는 아래의 소스코드를 넣어주겠습니다.

#if DEBUG
import SwiftUI

struct HybridSwiftViewController_ViewPresentable: UIViewControllerRepresentable {
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        print("=== HybridSwiftViewController_ViewPresentable updateUIViewController ==")
    }
    
    func makeUIViewController(context: Context) -> some UIViewController {
        HybridSwiftUIViewController()
    }
    
}

struct HybridViewController_PreviewProvider : PreviewProvider {
    static var previews: some View {
        HybridSwiftViewController_ViewPresentable()
            //.ignoresSafeArea()
    }
}
#endif

소스 코드를 보면 아시겠지만 정말 별거 없이 SwiftUI의 Preview를 활용하기 위해 PreviewProvider 프로토콜을 구현 해주면 됩니다.

"HybridSwiftViewController" 부분은 자신의 클래스를 따라서 작성해줍니다.

이렇게 작성하자마자 오른쪽에 Preview가 등장하고 왠 화면이 보이게 됩니다.

짐작하신대로 이부분이 Preview 화면 입니다.

private lazy var topContainer = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 300))
private lazy var titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

override func viewDidLoad() {
    print("=== HybridSwiftUIViewController viewDidLoad ==")

    titleLabel.text = "안녕하세요"
    titleLabel.backgroundColor = .white
    topContainer.backgroundColor = .blue
    topContainer.addSubview(titleLabel)
    self.view.addSubview(topContainer)
}

간단하게 작성한뒤 화면 출력을 확인해 봅니다. 값도 변경해보면서 테스트 해봅니다.

preview 화면을 보며 개발한다

 

만약 화면이 안보인다면 Xcode 오른쪽 상단에 해당 버튼을 확인하세요. 

Canvas가 체크되어있는지 확인하고 단축키도 사용해봅니다.

Canvas 표시 단축키 : Cmd+Opt+Enter

 

 

 

이렇게 활용하면 매번 컴파일 할 필요 없이 다이렉트로 화면을 보며 작업 할수 있습니다. 

기존의 storyboard로 된 프로젝트나 view를 매번 커스텀하여 사용하셨다면 이번 기회에 SwiftUI 를 활용하면 좋을것 같습니다.

 

마무리글

실제로 프로젝트를 진행하며 앱개발에 활용해보니 굉장히 편리했습니다. 

기존의 storyboard나 view를 코딩 작업하는 경우 매번 빌드-런-빌드-런의 과정을 통해 변경된 UI를 확인하는 것은 꽤나 번거롭고 시간이 많이 소요되는 일이었습니다. 최근에 진행한 flutter 개발에서도 핫픽스 기능을 통해 바로 바로 변경된 UI를 보며 작업할수 있었습니다. 앞으로 UI 작업시에 꽤나 유용할것 같습니다.