What are previews
Preview는 뷰를 구성하는 코드 스니펫입니다.
#Preview 매크로를 사용하면 뷰를 반환합니다.
Preview는 앱에 컴파일 되고, Xcode의 캔버스에 바로 나타나서 뷰를 미리 확인할 수 있습니다.
Preview를 사용하면 개발자가 작업을 더 빨리 할 수 있습니다.
반복적인 일을 줄여주고, 불필요한 코드를 없앨 수 있기 때문입니다.
Preview를 사용하고 소스 코드를 수정하면 Xcode는 두 가지 일을 동시에 처리합니다.
첫 번째는 어디가 변경되었는지 살펴보고, 최소한의 부분만 컴파일합니다.
두 번째는 Preview를 다시 실행합니다.
개발자가 코드를 수정만 하면 Xcode가 자동으로 최소한의 범위만 컴파일해서 Preview를 업데이트하는 것입니다.
심지어 여러 Context를 자동으로 실행해서 추가적인 코드 작업이 불필요합니다.
다크 모드, 화면 방향, 동적 글자 크기 등이 그 예시입니다.
하나의 Preview 코드만 작성하면 여러 Context를 편하게 확인할 수 있습니다.
Preview는 테스트와 비슷하다고 합니다. (정확히 동일하다는 의미는 아니에요.)
코드를 실행하고, 개발을 빠르게 할 수 있게 도와주고, 앱의 여러 면을 미리 확인할 수 있기 때문입니다.
특히, 뷰를 작은 단위로 편하게 확인할 수 있다는 점이 유용하다고 합니다.
Preview syntax basics
Preview 코드를 세 가지로 나눠서 작성됩니다.
첫 번째는 생성자입니다.
Preview의 생성자는 #Preview입니다.
#Preview는 소스 파일 최상위에서 정의해야 합니다.
함수나 객체 내부에 존재할 수 없어요.
두 번째는 Content 후행 클로저입니다.
클로저 안에 Preview를 보고 싶은 뷰를 반환하세요.
여기까지만 해도 미리보기가 가능하지만 더 상세한 설정도 가능합니다.
#Preview에 이름을 설정하거나, Preview 설정도 할 수 있습니다.
Preview 설정은 아래에서 나오고 화면 방향 등이 그 예시입니다.
Writing Previews
Preview는 뷰와 위젯 미리보기를 지원합니다.
뷰에는 SwiftUI, UIKit, AppKit이 포함됩니다.
Writing SwiftUI previews
SwiftUI에서 작업 중인 뷰를 반환하면 Preview를 볼 수 있습니다.
뷰 하나만 넣어도 되고, 위 코드처럼 특정 뷰 안에 넣어도 됩니다.
CollageView를 List에 넣고, 화면 방향을 landscapeLeft로 지정한 코드입니다.
이처럼 SwiftUI에서는 View를 사용해 원하는 시나리오를 쉽게 확인할 수 있습니다.
Writing UIKit & AppKit previews
UIKit 또는 AppKit에서는 뷰 대신 ViewController를 설정해서 반환하면 됩니다.
물론 UIView 또는 NSView를 사용할 수도 있습니다.
Writing previews for widgets
Preview를 이용하면 위젯을 정말 편하게 확인할 수 있습니다. (이건 진짜 편했음)
Preview는 Widgets와 Timeline Provider 미리보기를 지원합니다.
(Widgets은 위젯 뷰이고, Timeline Provider는 시간이 변할 때마다 Entry를 보여주는 위젯으로 생각하면 됩니다.)
Preview에서는 여러 Entry를 한 번에 확인할 수 있습니다.
1시간 마다 변하는 위젯이라면 1시간 동안 기다려야 하는데요.
Preview를 이용하면 즉시 확인할 수 있습니다.
#Preview에 보고 싶은 위젯을 넣고, timelineProvider를 설정한 뒤 위젯의 종류를 설정하면 됩니다.
그럼 이렇게 여러 Entry를 한 번에 확인할 수 있습니다.
특정 타임라인으로만 설정할 수도 있습니다.
timelineProvider 대신 timeline으로 작성하고, 그때 표시되는 엔트리를 반환하세요.
만약 3시간에 보여주는 엔트리에서 4시간에 보여주는 엔트리로 넘어갈 때 버그가 발생한다면 timeline으로 쉽게 디버깅할 수 있습니다.
디버깅 과정에서 여러 파일을 왔다갔다 할 수 있습니다.
#Preview가 적혀 있는 파일을 떠나면 Preview가 사라지는 문제가 있는데요.
이럴 때는 Preview의 Pin 기능을 사용하면 됩니다.
Preview 왼쪽 상단의 핀 아이콘을 클릭하면 파일을 이동해도 Preview가 사라지지 않고, 업데이트도 정상적으로 됩니다.
이번에 새로나온 라이브 액티비티도 확인할 수 있습니다.
라이브 액티비티 내용은 WWDC23 - Bring widgets to life에서 더 자세히 다룬다고 합니다.
Previewing in library targets
라이브러리를 개발할 때도 Preview를 활용할 수 있습니다.
라이브러리를 개발할 때는 표시할 앱이 존재하지 않을 수도 있습니다.
Preview는 임의의 앱을 직접 만들어줘서 라이브러리 개발을 쉽게 할 수 있도록 도와줍니다.
아래에서는 이게 어떤 원리로 동작하는지 설명합니다.
Preview는 활성화된 스킴 안에 있는 앱만 사용합니다.
위 그림처럼 하나의 소스 코드가 여러 앱에서 사용된다면 어떤 Preview를 보여줘야 할지 헷갈릴 수 있습니다.
Preview는 현재 활성화된 스킴의 Preview를 보여줍니다.
또다른 예시를 보겠습니다.
Swift 파일 두 개가 열려 있는데 각각이 패키지에 속하고 이 패키지를 앱이 import 합니다.
이러면 이 파일을 거슬러 올라가서 공통 실행 파일을 찾을 수 있습니다.
그런데 이 그림처럼 import하는 앱이 없다면 어떡할까요?
이런 상황에서 Preview는 XCPreviewAgent를 생성해서 라이브러리를 로딩합니다.
이 과정은 Xcode가 자동으로 해주지만 원리와 XCPreviewAgent라는 프로세스 이름을 알면 디버깅에 도움이 됩니다.
만약 XCPreviewAgent에서 크래시가 발생하면 라이브러리에 문제가 있구나! 추론할 수 있기 때문입니다.
Passing sample data into previews
Development Asset을 이용해 개발 단계에서만 사용할 에셋을 만들 수 있습니다.
샘플 이미지는 사용하고 싶은데 앱 스토어에 제출할 때는 넣고 싶지 않을 때 유용합니다.
Xcode - TARGETS - Build Settings - Development Assets에 직접 경로를 넣거나, 폴더를 드래그 앤 드랍하면 됩니다.
그럼 이 파일은 앱 스토어에 제출할 때 제거됩니다.
Previewing on devices for full fidelity and access to data
실제 기기를 이용해 Preview를 볼 수 있습니다.
앨범 사진, 카메라, 센서 등 실기기에서만 가능한걸 미리보고 싶을 때 유용합니다.
(이 내용은 실습 포스팅도 따로 작성할 예정입니다.)
Preview를 볼 기기에서 자신의 디바이스를 선택하기만 하면 됩니다.
다른 Preview와 마찬가지로 실시간으로 업데이트 되기 때문에 편하게 확인할 수 있습니다.
(WWDC에선 말을 안 했는데 무선도 지원하고 심지어 빠릅니다.)
감사합니다.
출처
https://developer.apple.com/wwdc23/10252
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.