SwiftUI Preview에서 다양한 기종 보기

SteadySlower·2023년 5월 1일

Tips

목록 보기

14/20

SwiftUI로 개발할 때 preview는 상당히 유용합니다. 우리가 구현한 뷰가 실시간으로 업데이트되는 화면을 볼 수 있기 때문인데요. 보통 처음에 세팅이 되어있는 preview는 현재 선택한 시뮬레이터의 기기 1종류에서만 볼 수 있습니다.

하지만 아이폰은 기종에 따라 크기와 비율이 모두 다릅니다. 아이패드에서도 사용되는 앱을 개발하고 있다면 아이패드에서는 내가 구현 뷰가 어떻게 보일지 확인하고도 싶습니다.

이런 경우를 위해 preview를 기종별로 적용해서 여러 개를 사용할 수 있는 방법을 알아보도록 하겠습니다.

여러 개의 Preview

디바이스 목록 확인

여러 개를 Preview를 보기 위해서는 먼저 자신의 Mac에서 지원하는 Preview Device의 목록을 확인해야 합니다. 터미널에 아래 명령어를 쳐서 확인해봅시다. 지원하는 기기의 목록과 정확한 기기명을 확인할 수 있습니다.

xcrun simctl list devicetypes

원하는 기기의 시뮬레이터 추가

해당하는 기기에서 preview를 보기 위해서는 시뮬레이터가 필요합니다. 시뮬레이터 목록을 열어보고 원하는 기기의 시뮬레이터가 없다면 “Manage Run Destination”을 선택해서 시뮬레이터를 추가합니다.

PreviewDevice

확인한 디바이스 중에서 원하는 디바이스의 이름을 잘 복사해서 가져옵시다. 저는 제가 사용하고 있는 12 미니, 가장 작은 화면을 가진 8, 적당한(?) 화면을 가진 14, 가장 큰 화면을 가진 14 pro max, 마지막으로 아이패드 중에 하나를 선택했습니다. 아래 코드처럼 Array와 ForEach를 사용하면 편리합니다.

.previewDevice 메소드에 PreviewDevice 객체를 전달합니다. rawValue로 init를 하면 됩니다. 오타에 주의하세요. 오타가 나면 현재 설정되어 있는 시뮬레이터의 preview로 대체해서 나옵니다.

.previewDisplayName을 통해서 복수의 preview를 구분하기 쉽게 이름을 붙일 수 있습니다. 여기서는 기기명을 그대로 사용했습니다.

import SwiftUI

struct MultiplePreviewView: View {
    
    let deviceName: String
    
    var body: some View {
        ZStack {
            Color.mint
            Text("\(deviceName)에서 보이는 모습")
        }
        .padding(50)
    }
    
}

struct MultiplePreviewView_Previews: PreviewProvider {
    
    static let devices = ["iPhone 12 mini",
                          "iPhone 8",
                          "iPhone 14",
                          "iPhone 14 Pro Max",
                          "iPad Pro (11-inch) (4th generation)"]
    
    static var previews: some View {
        ForEach(Constant.Preview.devices, id: \.self) {
            MultiplePreviewView(deviceName: $0)
                .previewDevice(PreviewDevice(rawValue: $0))
                .previewDisplayName($0)
        }
    }
}