Xcode Playground에서 SwiftUI View 미리보기

당연하겠지만 프레임워크 임포트가 필요하다.

import SwiftUI
import PlaygroundSupport

이제 시험해 볼 뷰 코드를 작성하자. 대충 아래처럼 예제를 만들었다.

struct ContentView: View {
    var body: some View {
        Text("Hello Playground!")
    }
}

물론 이 상태론 화면이 보이지는 않는다.

플레이그라운드에서 뷰를 미리보기 하려면 몇 가지 방법이 있다 아래 중 하나를 골라서 시험해보자.

가장 간단한 방법으로 PlaygroundPage 의 setLiveView() 메서드를 이용해보자.

PlaygroundPage.current.setLiveView(ContentView())

실행시킨 후 툴바 우측에 있는 'Adjust Editor Options' 메뉴에서 Live View 를 켜 주면 뷰의 모습을 볼 수 있다.

플레이그라운드에서 뷰 미리보기

당연하겠지만 macOS인지 iOS인지에 따라 모양이 좀 다르다.

사실 위의 방법과 거의 동일하지만 약간의 차이가 있는 방법이다. 그리고 OS에 따라 약간의 차이가 있다.

iOS의 경우는 아래와 같다.

let hc = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = hc

setLiveView() 메서드를 쓰는 것 보다는 약간 귀찮은 점이 존재한다.

macOS의 경우는 아래와 같다.

let hc = NSHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = hc

그냥 UIKit의 클래스 머릿글자인 UI 대신 AppKit이나 Core Foundation에서 사용되는 머릿글자인 NS 로 바꾸면 된다.

요즘 Xcode에서는 플레이그라운드에서 미리보기 핀만 박으면 그냥 미리보기가 되는 것 같다.

우측의 결과 미리보기 핀 버튼을 누른 결과

물론 제약이 있을 수 있으므로 상황에 맞게 이용하면 될 것 같다.