[Xcode] 프리뷰 여러 기종 한 번에 보기

swiftUI 를 공부하면서 여러 기종에서의 View 모습들을 확인하고 싶을 때가 있다.

화면이 큰 기종에서 보이는 모습과 화면이 작은 기종에서 보이는 모습을 비교하기 위해 

여러 기종의 preview를  한 번에 띄우는 법을 기록한다.

---

가능한 기종 확인

 

우선 여러 개를 Preview를 보기 위해서는 본인의 Mac에서 지원하는 Preview Device의 목록을 확인해야 한다.
터미널에 아래와 같은 코드를 입력하면 확인할 수 있다.

xcrun simctl list devicetypes

 

Preview 작성

struct PreviewWrapper: View {
    @State private var test = ""
    
    var body: some View {
        PHTextEditor(placeholder: "ㅁ", text: $test)
            .frame(height: 100) // 높이 설정 (필요할 수 있음)
            .border(Color.gray, width: 1) // 테두리 추가 (디버깅용)
    }
}

#Preview {
	PreviewWrapper()
}

 

보통 이런식으로 Preview를 사용할텐데, 이 방법은 편한 대신 여러 커스텀 기능이 안돼서 다르게 작성해줘야 한다.

 

struct PreviewWrapper: View {
    @State private var test = ""
    
    var body: some View {
        TextEditor(text: $test)
            .frame(height: 100)
            .border(Color.gray, width: 1)
    }
}

struct PreviewWrapper_previews: PreviewProvider {
    static let devices = ["iPhone 16",
                          "iPhone 16 Pro Max",
                          "iPhone SE (3rd generation)",
                          "iPhone 13 mini"]

    static var previews: some View {
        ForEach(devices, id: \.self) { device in
            PreviewWrapper()
                .previewDevice(PreviewDevice(rawValue: device)) // 프리뷰 디바이스 설정
                .previewDisplayName(device) // 프리뷰 이름 설정
        }
    }
}

 

이런식으로 직접 PreviewProvider를 이용해서 Preview를 사용하면 다양한 커스텀 가능!

static let devices = ["iPhone 16",
                          "iPhone 16 Pro Max",
                          "iPhone SE (3rd generation)",
                          "iPhone 13 mini"]

 

위에서 확인한 devices 종류 중 원하는 기종을 선언해두고

        ForEach(devices, id: \.self) { device in
            PreviewWrapper()
                .previewDevice(PreviewDevice(rawValue: device)) // 프리뷰 디바이스 설정
                .previewDisplayName(device) // 프리뷰 이름 설정
        }

 

ForEach 문을 활용하면 여러개의 Preview를 띄울 수 있다.

 

Preview 상단에 iPhone 기종별로 클릭하면 해당 기종의 Preview가 나타남!

단, Preview 하단에 기종 선택하는 버튼은 반드시 Automatic으로 해둬야함

그리고 아무래도 여러 개의 Preview를 실행시키다 보니 메모리에 부담이 많이 가서 튕길 수도 있음