[Xcode] Preview 활용기 (기기 변경, 라이트 다크 모드 등 )

SwiftUI에서 Preview를 사용하면서 활용했던 것들에 대한 내용이다.

 Preview 활용기 

우선 DarkMode, 여러 기기 등등을 띄우는 활용기에 대한 내용....! 아래 주석으로 표시해둔 부분의 코드가 바뀐다.

struct Content_Previews: PreviewProvider {
  static var previews: some View {
    Group {
        // 여기 들어가는 뷰들이 바뀌는 거임
    }
  }
}

 

⚠️ 참고로 Preview의 기기에 따라 Userdefault나 Coredata와 같은 디바이스 용 데이터는 각각 저장된다. 한 시뮬레이터가 하나의 다른 기기라고 생각하면 편하다.

 

 🌷 기기 변경 

1️⃣ 코드 활용

 ContentView()
        .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro")) // 세팅하는 기기명
        .previewDisplayName(device.rawValue)  // 기기 이름 닉네임

 

 

 

근데 매번 PreviewDevice를 찾고 있을 수는 없으니까..

enum DeviceName: String {
    // iPhones
    case iPhoneSE1 = "iPhone SE (1st generation)"
    case iPhone6s = "iPhone 6s"
    case iPhone6sPlus = "iPhone 6s Plus"
    case iPhone7 = "iPhone 7"
    case iPhone7Plus = "iPhone 7 Plus"
    case iPhone8 = "iPhone 8"
    case iPhone8Plus = "iPhone 8 Plus"
    case iPhoneX = "iPhone X"
    case iPhoneXR = "iPhone XR"
    case iPhoneXS = "iPhone XS"
    case iPhoneXSMax = "iPhone XS Max"
    case iPhone11 = "iPhone 11"
    case iPhone11Pro = "iPhone 11 Pro"
    case iPhone11ProMax = "iPhone 11 Pro Max"
    case iPhoneSE2 = "iPhone SE (2nd generation)"
    case iPhone12Mini = "iPhone 12 mini"
    case iPhone12 = "iPhone 12"
    case iPhone12Pro = "iPhone 12 Pro"
    case iPhone12ProMax = "iPhone 12 Pro Max"
    case iPhone13Mini = "iPhone 13 mini"
    case iPhone13 = "iPhone 13"
    case iPhone13Pro = "iPhone 13 Pro"
    case iPhone13ProMax = "iPhone 13 Pro Max"
    case iPhoneSE3 = "iPhone SE (3rd generation)"
    case iPhone14 = "iPhone 14"
    case iPhone14Plus = "iPhone 14 Plus"
    case iPhone14Pro = "iPhone 14 Pro"
    case iPhone14ProMax = "iPhone 14 Pro Max"
    case iPhone15 = "iPhone 15"
    case iPhone15Plus = "iPhone 15 Plus"
    case iPhone15Pro = "iPhone 15 Pro"
    case iPhone15ProMax = "iPhone 15 Pro Max"

    // iPads
    case iPad5 = "iPad (5th generation)"
    case iPad6 = "iPad (6th generation)"
    case iPad7 = "iPad (7th generation)"
    case iPad8 = "iPad (8th generation)"
    case iPad9 = "iPad (9th generation)"
    case iPad10 = "iPad (10th generation)"
    case iPadAir3 = "iPad Air (3rd generation)"
    case iPadAir4 = "iPad Air (4th generation)"
    case iPadAir5 = "iPad Air (5th generation)"
    case iPadPro97 = "iPad Pro (9.7-inch)"
    case iPadPro105 = "iPad Pro (10.5-inch)"
    case iPadPro11_1 = "iPad Pro (11-inch) (1st generation)"
    case iPadPro11_2 = "iPad Pro (11-inch) (2nd generation)"
    case iPadPro11_3 = "iPad Pro (11-inch) (3rd generation)"
    case iPadPro11_4 = "iPad Pro (11-inch) (4th generation)"
    case iPadPro129_2 = "iPad Pro (12.9-inch) (2nd generation)"
    case iPadPro129_3 = "iPad Pro (12.9-inch) (3rd generation)"
    case iPadPro129_4 = "iPad Pro (12.9-inch) (4th generation)"
    case iPadPro129_5 = "iPad Pro (12.9-inch) (5th generation)"
    case iPadPro129_6 = "iPad Pro (12.9-inch) (6th generation)"
    case iPadMini5 = "iPad mini (5th generation)"
    case iPadMini6 = "iPad mini (6th generation)"

    // Apple Watches (Optional if needed)
    case watchSE = "Apple Watch SE"
    case watchSeries6 = "Apple Watch Series 6"
    case watchSeries7 = "Apple Watch Series 7"
    case watchSeries8 = "Apple Watch Series 8"
    case watchUltra = "Apple Watch Ultra"
    case watchUltra2 = "Apple Watch Ultra 2"
}

 

사용시에는 아래와 같이 이용하면 된다.

let device = DeviceName.iPhone14Pro
ContentView()
      .previewDevice(PreviewDevice(rawValue: device.rawValue))
      .previewDisplayName(device.rawValue)

2️⃣ 기기 선택

+) 기기를 더 만들고 싶다면 아래와 같이 진행하면 된다. 이름도 내 입맛에 맞게 커스텀이 가능하다.

 🌷여러 기기 띄우기 

ContentView()
         // modifier로 기기 및 다크모드 등 설정 가능
ContentView()
         // modifier로 기기 및 다크모드 등 설정 가능

 

 🌷 Canvas Device Settings 

아래와 같이 Color, Orientation, Dynamic Type를 수정할 수 있다. 이 방법 말고도 다른 방법은 아래를 확인 !

 1️⃣ DarkMode / LightMode 

ContentView()
      .environment(\.colorScheme, .dark) // 다크모드
      
ContentView()
      .environment(\.colorScheme, .light)  // 라이트모드

위와 같이 코드로 colorScheme을 지정해도 되지만 개인적으로는 아래와 같은 방법을 많이 이용하는 편이다.

2️⃣ 가로 세로모드 

 ContentView()
       .previewInterfaceOrientation(.portrait) // 세로 모드
       .previewDisplayName("세로 모드")

ContentView()
       .previewInterfaceOrientation(.landscapeLeft) // 가로 모드
       .previewDisplayName("가로 모드")

 

이것도 아래와 같은 방법으로 더 쉽게 여러뷰를 띄우고 확인할 수 있다.

 3️⃣ Dynamic Type sizes 

ContentView()
       .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)

위와 같이 Dynamic TypeSize에는 등등의 종류가 있고, 이것도 아래와 같은 방법으로 더 쉽게 여러뷰를 띄우고 확인할 수 있다.

 🌷 선택 마우스 활용 

아래의 화살표를 선택하고 코드를 만지면 우측 Preview와 같이 어느 부분이 작업되고 있는지 확인 할 수 있다. 반대로 화살표를 선택하고 Preview를 만져도 좌측에서 어느 부분의 코드인지 확인할 수 있다.

 🌷 고정 활용 

아래의 그림처럼 핀을 박아두면 다른 뷰에서 작업할 때 다른 Preview들이랑 같이 확인할 수 있다. 개인적으로는 부모 뷰나 자식 뷰 작업을 할 때 잘 활용했던 것 같다.