[SwiftUI] PreviewProvider 프로토콜, Preview (feat. Xcode14(Beta))

SomeSwiftUIView라는 SwiftUI 파일을 생성을 하면
하단에 SomeSwiftUIView_Preview라는 이름의 PreviewProvider 프로토콜을 따르는 구조체가 함께 생성이 됩니다.

struct SomeSwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SomeSwiftUIView()
    }
}

 

이 구조체는
1. 우리가 작성한 SwiftUI View의 내용을 Preview(혹은 Canvas)에 반영시켜주거나,
2. PreviewProvider 내의 previews의 내용을 Preview에 반영시켜주어
우리가 확인하고자 하는 View를 빠르게 확인할 수 있게 해줍니다.

1. 우리가 실제로 작성해서 사용하는 View는 상단의 SomeSwiftUIView에 작성하면 되고,
2. 해당 SomeSwiftUIView를 사용한 다양한 Variation를 확인하고 싶다면 PreviewProvider쪽을 수정하면 됩니다.

 

Preview가 paused 상태가 되었을 때는

command+option+P 단축키로 다시 갱신된 Preview로 실행시켜줄 수 있습니다.

아래와 같이 previews를 수정해서
SomeSwiftUIView를 변경하거나, 다른 View와 함께 작성해본 내용을 확인해볼 수 있습니다.

기본적으로 프로젝트에서 현재 선택된 시뮬레이터를 기반으로 빌드하여 Preview에 보여주게 됩니다.
다른 디바이스에서의 SomeSwiftUIView의 모습을 확인하고 싶을 때 2가지 방법이 있습니다.

1. Xcode 상단에 Simulator를 원하는 디바이스로 변경해주거나,
2. previewDevice Modifier를 사용하면 됩니다. PreviewDevice의 rawValue는 시뮬레이터 이름을 그대로 써주면 됩니다.
previewDevice Modifier를 작성한 경우, Xcode에서 선택한 시뮬레이터보다 우선 적용이 되며
기존에 빌드했던 디바이스가 아니라면 새로 빌드(Prepare)한 후에 Preview에 반영을 해줍니다.

// previewDevice 예시
struct SomeSwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SomeSwiftUIView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
    }
}

아래처럼 여러 디바이스에서의 Preview를 동시에 확인도 가능합니다.
하지만 각각을 모두 빌드해야 하기 때문에 반영이 느려집니다.
(하나씩 확인하는 편이 더 낫더라구요)

디바이스 방향(orientation)을 변경해서 보여주는 previewInterfaceOrientation Modifier도 있습니다.

// previewInterfaceOrientation 예시
struct SomeSwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SomeSwiftUIView()
            .previewInterfaceOrientation(.landscapeLeft)
    }
}

 

Live Mode

Preview에서 동적으로 데이터를 받아와서 반영된 모습을 확인하고 싶거나,
애니메이션을 확인하고 싶다면 Live Mode로 확인할 수 있습니다. Preview 디바이스 상단에 삼각형버튼을 누르면 Live Mode가 됩니다.

 

Xcode14(Beta)에서 Preview의 변경점

1. Live Mode가 기본 적용됩니다.
2. Canvas Device Setting을 통해서 Color Scheme, Orientation, Dynamic Type에 따른 Preview를 세팅할 수가 있습니다.
(위에서 설명한 Xcode13에서처럼 PreviewProvider에 Modifier를 작성할 필요가 없어졌고 이 세팅은 Live Mode로 지원합니다)

3. Color Scheme Variants, Orientation Variants, DynamicType Variants를 Preview에서 선택해서 동시에 확인이 가능해졌습니다. 이 모드에서는 Live Mode가 해제됩니다.
(Live Mode가 해제되는 것이 조금 아쉽지만,
Xcode13에서 Light Mode/Dark Mode 혹은 Landscape/Portrait을 동시에 확인하기 위해 PreviewProvider에 2개의 preview를 작성하면 각각 빌드를 하여 속도가 느려지는 문제가 있었는데, Xcode14에서는 이를 빠르게 확인할 수 있게 되어 좋아졌습니다)

추가적으로. 프로젝트가 시뮬레이터를 사용할 수가 없는 경우?!
Preview는 시뮬레이터 빌드 기반이기 때문에
빌드가 Success가 되어야만 Preview도 보이게 됩니다.
빌드가 Fail이 되면 Preview에 🟢표시가 🔴로 표시되며, 변경된 사항에 대해 Preview에 반영을 해주지 않습니다(마지막으로 Succss였던 Preview를 보여주게 됩니다).
만약 프로젝트가 시뮬레이터 빌드를 할 수가 없다. 라는 상황이라면 슬프게도 Preview를 사용할 수가 없게 됩니다.
(외부업체 라이브러리를 사용하다보면 시뮬레이터를 지원하지 않는 것이 몇 있는데. 저희 회사 프로젝트가 그렇습...ㅠㅠ)
이런 경우 시뮬레이터 빌드를 할 수 있는 부분과 할 수 없는 부분을 Package로 분리해서 각각 빌드를 할 수 있도록 하면,
시뮬레이터 빌드를 할 수 있는 Package에서는 Preview를 사용할 수 있게 만들 수 있습니다.
(하지만 프로젝트나 해당 라이브러리의 역할에 따라 이 작업이 쉽지 않을 수 있습니다)