Xcode Previews로 프로그램적인 UI 구축하기

♪ ♪

안녕하세요, Kevin이에요 Previews를 담당하고 있죠 소프트웨어, 특히 앱을 만드는 건 반복적이면서 창의적인 과정이므로 제일 빠른 방법으로 코드를 테스트하고 제작한 게 실제로 만들어지는 걸 경험하는 게 중요해요 그래서 미리보기를 만들었죠 즉각적으로 시각적 피드백을 받아 창의적인 일에만 집중할 수 있도록요 미리보기는 유연성 있게 만들어졌죠 앱 전반에 걸쳐 사용할 수 있으며 다양한 뷰, 데이터, 기기에 적용할 수 있어요 미리보기를 처음 접하든 계속 사용했든 상관없이 최대한 활용할 수 있도록 도와드리고자 하죠 세션은 세 부분으로 나뉘어요 먼저 미리보기를 되짚어 보죠 미리보기의 작동 원리와 프로젝트의 다른 코드와 어떻게 연관돼 있는지 이해하는 게 도움이 돼요 둘째, 미리보기에 콘텐츠를 제공하는 방식이 2개죠 뷰와 위젯이에요 이걸 어떻게 작성하는지 보여 주고 Xcode의 독특한 흐름을 소개하죠 끝으로, 여러분 프로젝트에 미리보기를 채택할 경우 여러분들이 맞닥뜨리게 될 상황이나 질문이 있을 거예요 여러분에게 몇 가지 비결과 비법을 전수하여 프로젝트에서 미리보기를 더 활용할 수 있도록 도울게요 그럼 시작하죠 미리보기는 무엇일까요? 미리보기는 뷰를 구성하는 코드 스니펫이에요 소스 파일의 최상위 단계에서 작성되어 다른 타입이나 함수에 네스팅되지 않으며 이 정도로 간단할 수 있죠 #Preview 매크로를 이용하면 뷰를 반환해요 미리보기는 여러분의 앱에 컴파일되며 나머지 앱과 리소스도 마찬가지죠 여러분의 미리보기가 기호나 리소스에 접근하므로 아주 유연하게 작동해요 여러분 앱의 어떤 뷰라도 미리보기를 설정하면 Xcode의 캔버스에 바로 나타나죠 미리보기가 있으면 반복 작업도 빨라져요 프로젝트의 Swift 코드를 아무거나 편집하면 Xcode가 두 가지 일을 동시에 처리하죠 먼저 여러분의 변경한 걸 살펴보고 최소한의 코드만 다시 컴파일해요 둘째, 미리보기를 다시 실행하죠 여러분의 코드를 작성하고 반복하는 것에 집중하는 동안 Xcode가 자동으로 미리보기를 빌드 및 실행하고 업데이트한다는 의미예요 그리고 미리보기가 정의되면 Xcode가 해당 미리보기를 여러 맥락에 자동으로 실행하여 여러분이 추가 코드를 작성할 필요가 없어요 예를 들어 다크 모드나 글꼴 화면 방향으로 테스트할 수 있죠 완벽한 비유는 아니지만 미리보기를 테스트와 비슷하게 생각하면 도움이 될 거예요 테스트처럼 미리보기는 실제 프로젝트의 코드를 실행하죠 코드를 에뮬레이션하거나 해석하지 않아요 따라서 여러분이 테스트하고 미리 보는 것이 앱 사용자들의 경험을 대변한다고 말할 수 있죠 둘째, 테스트 작성과 미리보기에 투자하면 결국 개발이 빨라집니다 작은 작업이 큰 도움이 되죠 셋째, 앱의 여러 면을 테스트하고 미리 볼 수 있어요 예를 들어 테스트의 경우 상급 UI의 테스트를 통해 앱 기능의 상당 부분을 실행할 수도 있고 작은 단위의 테스트로 개별 요소를 테스트할 수도 있죠 앱 대부분을 포함하는 뷰의 미리보기를 이용하거나 개별적인 리프 뷰를 미리 볼 수도 있어요 미리보기가 작동하는 방법을 빠르게 살펴봤으니 미리보기 작성 방법과 이용 가능한 콘텐츠를 보죠 뭘 미리 보든 상관없이 모든 미리보기는 3개의 요소를 포함해요 먼저 #Preview 매크로 이니셜라이저를 이용하여 소스 파일의 최상위에서 시작하세요 그리고 1개 이상의 콘텐츠 후행 클로저를 반환하세요 여기서 UI를 구성하여 미리 보고 싶은 시나리오를 정할 수 있죠 이것만 갖추면 미리보기가 가능하지만 선택적으로 미리보기 자체를 설정하여 유연성을 높일 수 있어요 이름을 붙이거나 미리보기의 콘텐츠에 따라 이니셜라이저에 추가 설정을 통과시켜야 할 수도 있죠 나중에 예시를 살펴볼게요 여러분이 미리 볼 수 있는 콘텐츠를 살펴보죠 크게 두 종류인데 뷰와 위젯이에요 뷰는 SwiftUI, UIKit, AppKit에서 가져올 수 있죠 SwiftUI에서 현재 작업 중인 뷰를 아무거나 반환하세요 작업 중인 뷰만 통과시키지 않아도 되죠 필요한 다른 뷰 안에 넣어도 됩니다 이게 도움이 되는 이유는 더 넓은 맥락에서 뷰를 작업할 수 있기 때문이죠 예를 들어 List 안에 들어가야 하는 뷰를 볼게요

미리 보고 있는 뷰에 필요하다면 환경에 데이터를 제공하는 모디파이어를 첨부할 수 있는 곳이죠 미리보기는 앱의 최상위에서 정의하는 장면과 비슷해요 장면들은 앱의 진입점 역할을 하죠 데이터를 설정하여 뷰에 통과시켜요 미리보기도 같은 목적을 수행하죠 미리보기를 사용하여 데이터나 애셋을 설정하고 미리 보고 있는 뷰에 통과시킬 수 있어요 미리보기를 설정할 때는 이름을 붙일 수 있죠 SwiftUI처럼 뷰를 기반으로 한 미리보기는 1개 이상의 설정 특성을 가변 인수 목록으로 통과시키죠 예를 들어 여러분이 미리 보고 있는 기기의 시작 화면 방향을 지정할 수 있어요 UIKit과 AppKit의 API 형태도 같죠 SwiftUI 뷰 대신 뷰 컨트롤러를 만들어서 필요한 방식으로 설정하세요 뷰 컨트롤러 외에도 UIView 또는 NSView를 직접 미리 볼 수 있죠 빌드하려는 것에 따라 유연성이 아주 높아요 지금까지 말씀드렸던 걸 보여드려서 미리보기를 어떻게 사용할지 가늠할 수 있게 하고 미리보기를 유연하게 만들어 준 도구를 소개하죠 이미지의 콜라주를 만드는 앱을 작성하는 중이에요 사진을 고를 수 있고 레이아웃을 고를 수 있고 필터를 추가할 수 있죠 이제 Xcode로 가서 Preview 캔버스의 기능을 볼게요 이미지에 필터를 추가할 수 있는 뷰를 작성하기 시작했죠 이 뷰를 반복해서 작업하려면 미리보기가 필요해요 일단 캔버스 모드가 활성화됐는지 확인하기 위해 에디터의 오른쪽 상단에서 옵션 메뉴를 클릭할게요 새로운 프로젝트는 기본적으로 캔버스 모드를 활성화하지만 기존 프로젝트는 이 기능을 켜야 할 거예요 캔버스 모드를 활성화해도 캔버스가 숨어 있는데 파일에 미리보기를 정의해야 나타나니까 하나 추가할게요 #Preview를 타이핑하기 시작하자 Xcode가 미리보기를 제안하네요 완료하자 Xcode가 미리보기를 빌드하고 실행하여 캔버스에 뷰가 나타나죠 뷰를 작업할 때 사용할 수 있는 세 가지 모드가 있어요 캔버스의 왼쪽 하단에 있죠 첫 번째이자 기본 모드는 실시간 또는 상호작용 모드예요 저는 대개 이 모드를 사용하는데 캔버스와 상호작용하기 위해 슬라이더를 조절할 수 있죠

또한 애니메이션을 테스트하고 비동기 코드를 호출하거나 응답할 수 있어요 두 번째 모드는 선택 또는 정적 모드죠

제 뷰의 스냅샷을 찍어 캔버스 내 요소와 상호작용하게 해 줘요 뷰를 클릭하면 소스 에디터에 있는 코드의 행이 강조되죠 이 레이블처럼 특정 텍스트 뷰를 더블 클릭하면 소스 편집기의 집중 대상이 바뀌어 빠르게 바꿀 수 있죠 비네트는 더 간결한 레이블이죠 환경에 관해 얘기해 볼게요 미리보기 환경이죠 캔버스가 미리보기를 라이트 모드로 보여 주는데 다크 모드가 보고 싶으면 어떻게 할까요? 코드를 편집하여 색깔을 지정할 수도 있지만 빠르게 다크 모드를 확인하고 필요한 부분을 수정하고 싶어요 캔버스의 팝업 창에 있는 Device Settings를 사용할게요 하단 바에서 컨트롤 아이콘을 클릭하여 설정을 띄우세요 이제 다크 모드를 활성화하거나 Dynamic Type 크기를 지정할 수 있죠 만약 제 뷰가 두 가지 모드에서 어떤 느낌인지 동시에 보려면 어떻게 할까요? 여기서 미리보기의 세 번째 모드인 변수를 사용할게요

캔버스 하단에서 변수 모드를 클릭하면 모든 값을 볼 기기 설정을 선택할 수 있죠 배색이나 모든 Dynamic Type 크기를 볼 수 있어요 클릭하여 개별 변수를 검사할 수 있고 각 변수를 넘겨 볼 수 있죠 음 Dynamic Type 크기가 커질수록 뷰가 조금씩 이상해지는군요 이걸 수정할게요 VStack 대신 Form을 사용하면 컨트롤 집단에 완벽하죠 컨트롤을 섹션에 나눠 배치하면 Form이 훨씬 좋아 보여요 각 HStack을 섹션으로 만들죠 모든 HStack 인스턴스에 이 변화를 적용하는 건 멀티 커서 편집으로 가능해요 첫 번째 HStack을 선택하고 Comman-option-E를 눌러서 모든 Hstack의 인스턴스에 커서를 추가해 주세요 이것들을 전부 Section으로 바꿀게요

각 섹션의 헤더도 필요한데 두 번째 후행 클로저에 제공돼 있죠 아래 화살표를 누른 뒤 후행 클로저를 추가하세요

헤더들을 위해 준비한 Label을 사용하죠 위 화살표를 통해 Label로 올라가서 comman-option 오른쪽 괄호를 눌러 Label을 헤더 안으로 이동하세요 뷰가 훨씬 좋아졌네요 이러한 기능들은 AppKit과 UIKit 뷰와 뷰 컨트롤러에서도 잘 작동하죠 CoreImage로 필터를 렌더링하는 뷰 컨트롤러로 넘어가서 캔버스를 다시 실시간 모드로 전환할게요 뷰 컨트롤러를 위한 미리보기를 만들었는데 SwiftUI와 비슷해 보이는군요 #Preview 매크로에 뷰 컨트롤러를 만들어 샘플 이미지를 통과시켰죠 근데 필터가 적용된 상태로 이미지를 테스트하고 싶어서 뷰 컨트롤러에 필터를 통과시키는 코드를 추가할게요 블룸과 비네트는 언제 사용해도 좋군요 뷰 컨트롤러 외에 미리보기도 설정할 수 있어요 미리보기는 첫 번째 인자로 이름을 넣을 수 있죠 SwiftUI와 UIKit의 뷰 미리보기처럼 이름 뒤에 1개 이상의 특성을 가변 목록에 추가할 수 있어요 예를 들어 미리보기를 가로 화면으로 설정할 수 있죠 뷰 미리보기 작성법을 빠르게 살펴봤어요

미리보기를 사용할 수 있는 두 번째 콘텐츠는 위젯이죠 위젯은 미리보기가 얼마나 빠른지 보여 줘요 미리 볼 수 있는 두 종류의 위젯이 있죠 먼저 개별 엔트리를 생산하는 타임라인 제공자를 쓰는 위젯인데 Xcode에서 전체 타임라인 제공자를 미리 볼 수도 있고 미리보기에서 엔트리의 타임라인을 만들 수도 있죠 Xcode로 가서 각 예시를 살펴볼게요 이미지 콜라주 앱은 타임라인 제공자를 쓰는 위젯으로 매시간 무작위로 생성된 콜라주를 보여 주죠 타임라인 제공자를 위해 3가지를 갖춘 미리보기를 만들게요 먼저 제가 미리 보고 싶은 위젯이에요 두 번째는 타임라인 제공자죠 세 번째는 미리보기에 사용할 위젯 그룹이에요

코드의 양이 적지만 Xcode에서 훌륭한 작업 흐름을 제공하죠 위젯이 매시간 무작위로 콜라주를 만들지만 타임라인의 모든 엔트리를 보려고 1시간이나 기다릴 필요가 없죠 미리보기가 각 타임라인 엔트리를 캔버스에 보여 줘요 전부 클릭하여 보거나 화살표를 사용할 수 있죠 그때 Xcode가 제 위젯과 데이터를 주고받아 엔트리 사이의 전환 애니메이션을 전환을 보여 줌으로써 UI에 문제가 있는지 살펴볼 수 있을 뿐만 아니라 타임라인의 지점별 변화도 살펴볼 수 있어요 여기 8번과 9번 엔트리의 전환처럼요 애니메이션이 이상합니다 그냥 크로스 페이드되죠 이 상황을 수정하고 싶은데 타임라인 제공자가 무작위여서 테스트할 때 이런 상황이 언제 재현될지 몰라요 이때 특정 엔트리의 타임라인을 유용하게 쓸 수 있죠 반복하고 싶은 상황을 만들어 낼 수 있어요 Preview의 timelineProvider:를 timeline으로 수정하고 타임라인 제공자를 반환하는 대신 수정하고 싶은 사례를 재현하는 두 엔트리를 반환할게요 근데 전환을 수정할 수 있는 코드가 다른 파일에 있고 탐색 창을 떠났다가 미리보기를 잃고 싶지 않죠 편리하게도 핀을 꽂아 캔버스의 미리보기를 유지할 수 있죠 캔버스 왼쪽 상단에 있는 핀 버튼을 클릭하면 다른 파일을 탐색하러 가도 미리보기가 계속 활성화돼요

콜라주를 그리면서 전환을 포함한 뷰가 여기 있죠 해당 문제를 수정하는 것에 집중할 수 있도록 캔버스에서 타임라인의 재생 버튼을 누르고 루프 버튼을 누를게요 이제 Xcode가 코드 수정 때까지 전환을 계속 재생하죠 이게 문제였군요 행으로 구성된 콜라주에는 전환을 첨부했는데 열로 구성된 콜라주에는 전환을 첨부하지 않았죠 전환을 복사해서 붙여넣으면 돼요 더 낫긴 한데 오른쪽 끝에서 애니메이션이 나타나는군요 아래쪽에서 미는 게 나을 듯해요 이제 됐군요 미리보기를 이용하여 빠르게 반복 작업했고 타임라인 제공자뿐만 아니라 구체적인 이벤트를 이용하여 애니메이션을 미세 조정했죠 UI의 빌드와 반복을 빠르고 재미있게 해 줘요

같은 형태의 위젯 작업 흐름을 다른 위젯에도 적용할 수 있죠 실시간 활동이에요 API는 거의 비슷해 보이지만 타임라인 제공자와 엔트리를 사용하는 대신 실시간 활동 속성 집합과 상태 집합을 제공해야 하죠 예를 들어 볼게요 먼저 이니셜라이저에서 사용할 속성을 통과시키세요 둘째로 속성별 콘텐츠 상태를 통과시키세요 예를 들어 피자를 주문하는 위젯을 만든다면 맞춤형 상태 집합을 제공하여 피자를 만들고 배달하는 게 얼마나 진행됐는지 보여 주고 모든 상태 사이의 애니메이션을 테스트할 수 있죠 위젯 미리보기를 통해 할 수 있는 일부의 작업만 보여 드렸어요 '생동감 있는 위젯 만들기'에서 더 많은 내용을 확인하세요 이제 세션의 마지막 부분으로 넘어가면서 미리보기 작성을 최대한 활용하게 해 드리죠 프로젝트를 설정하고 데이터를 제공하고 기기의 능력을 활용하는 것에 영향을 주는 세 가지 시나리오를 살펴볼게요 먼저 라이브러리 타겟에서 콘텐츠를 미리 보는 걸 얘기하죠 프레임워크와 Swift 패키지 동적 라이브러리가 포함돼요 라이브러리를 사용하는 이유는 여러 가지가 있죠 예를 들어 라이브러리로 프로젝트를 모듈화하거나 라이브러리를 개발하여 사람들에게 배포할 수도 있어요 미리보기는 이런 타겟에 잘 활용할 수 있지만 정말 멋진 건 라이브러리 대상을 활용하여 미리보기를 더 많이 활용할 수 있다는 거죠 라이브러리 활용 첫 단계는 Previews가 코드 실행 때 사용하는 실행 파일의 느낌을 파악하는 거예요 실행 파일, 앱, 위젯이 있어야 미리보기를 실행하고 렌더링하죠 대개는 앱으로 하는데 앱이 없으면 어떻게 할까요? Previews는 세 가지를 이용하여 어떤 실행 파일을 쓸지 알아내죠 첫째, 여러분이 작업 중인 소스 파일이에요 둘째, 해당 파일을 포함한 타겟과 타겟의 모든 의존성이죠 셋째, Previews가 타겟의 의존성과 여러분이 선택한 스킴의 타겟을 교차해요 Previews는 활성화된 스킴 안에 있는 앱만 선택하죠 몇 가지 예를 살펴볼게요 가장 간단한 사례에서는 작업 중인 단일 소스 파일이 앱 타겟의 일원이라고 하죠 그렇다면 이 앱을 미리보기에 사용할 거예요 근데 2개의 타겟에 있는 소스 파일이면 어떨까요? 예를 들어 앱의 시험 버전과 앱의 전체 버전이 있는 거죠 이때 스킴을 활용해요 Previews는 활성화된 스킴 안에 있는 앱만 사용하죠 다른 예를 들게요 Swift 파일 2개가 열려 있는데 각각 패키지에 속하는데 다른 패키지가 임포트할 수 있고 모든 패키지가 앱에 의해 임포트되는 거죠 이 파일을 거슬러 올라가 공통 실행 파일을 찾을게요 그걸 염두에 두고 시작할 때의 질문으로 상기하죠 앱이 없다면 어떻게 할까요? 이 경우에는 미리보기가 대신 앱을 만들어 주는데 XCPreviewAgent라고 불리며 라이브러리를 로딩하죠 전부 여러분을 위해 자동으로 진행되지만 원리와 프로세스의 이름을 알고 있으면 어디서 코드가 실행되는지 알 수 있어요 예를 들어 XCPreviewAgent에 대한 크래시 리포트가 있다면 여러분 코드에서 벌어졌고 문제의 위치를 찾을 수 있죠 라이브러리 타겟을 이용하여 두 가지 방법으로 Previews가 제대로 작동하게 할 수 있죠 각 사례를 오랫동안 다룰 수도 있지만 간략하게만 언급할게요 먼저 여러분의 앱을 라이브러리로 모듈화하면 더 작은 스킴을 만들어 빌드 타임을 개선할 수도 있고 프로젝트 일부에만 집중할 수도 있어요 비록 더 작은 스킴을 타겟의 하위 집합에 사용하는 거지만 미리보기의 전체 능력을 활용할 수 있죠 둘째, 코드를 라이브러리로 모듈화한다면 일부 뷰는 여러분의 앱 타겟이 제공하고 있던 권한이나 Info.plist 키가 필요할 수 있어요 미리보기를 위한 작은 앱을 만들어 이런 뷰들을 미리 볼 수 있죠 함께 알아보죠 사진 라이브러리를 사용하는 뷰를 만들고 있는데 구체적인 Info.plist 키를 요구한다고 하죠 그 뷰를 라이브러리에 넣었는데 SamplePhotoLibraryUtilities에 넣었다고 하죠

새로운 앱 타겟을 만들어 필요 기능을 미리 볼 수 있어요 그리고 필요한 기능을 추가할게요 이 경우에는 Info.plist 키를 추가해야 하므로 빌드 설정으로 가서 사진 라이브러리 사용량 스트링을 필터링하고 설정할게요 다음은 제가 작업 중인 뷰를 포함한 라이브러리가 앱에 임베딩됐는지 확인할게요 빌드 단계 탭을 이용하여 타겟 의존성으로 추가하고 파일 복사 단계로 임베딩할게요 이제 제가 선택할 스킴에는 미리보기 앱과 라이브러리만 있죠 뷰를 미리 보면 미리보기를 위해 만든 앱을 사용할 거고 필요한 Info.plist 키가 제 위치에 있을 거예요 빌드 타임이 빠른 작은 스킴을 이용하면서도 제가 작업 중인 모든 뷰를 미리 볼 수 있게 해 주죠 이제 미리보기에 데이터와 애셋을 가져오는 법을 다룰게요 이미 이전 시현에서 가져왔지만 되돌아가서 제가 했던 걸 되짚어 볼게요 아까 봤던 뷰 컨트롤러에서 필터를 렌더링했죠 미리보기를 설정했을 때 샘플 이미지를 통과시켰어요 이 샘플 이미지는 제 프로젝트의 애셋 카탈로그에서 가져온 거죠 프로젝트 탐색기를 열면 애셋 카탈로그가 있는데 Preview Contents 폴더 안에 있어요 개발 중에 여러 시나리오를 테스트하게 도와주는 이미지이며 제가 테스트하는 모든 기기에 사진을 넣지 않아도 되죠 근데 샘플 이미지를 앱에 배포하긴 싫어요 그걸 피하게 해 주는 기능이 Development Assets죠 빌드 설정에서 구성하는 프로젝트의 폴더인데 이 폴더 안에 있는 건 App Store에 제출할 때 제거돼요 미리보기에 사용했던 애셋 카탈로그와 리소스들이죠 Preview Contents 폴더를 개발 애셋 경로로 추가할게요

프로젝트 설정에서 빌드 설정 탭으로 가면 개발 애셋을 필터링할 수 있죠 편집을 위해 더블 클릭한 뒤 수동으로 경로를 입력하거나 Preview Content 폴더를 팝업 창 안으로 드래그하세요

이제 이 경로에 있는 건 App Store에 제출할 때 제 앱에서 삭제될 거예요 새 프로젝트나 앱 타겟을 만들 때 개발 애셋 경로가 자동으로 생성되지만 경로를 추가하거나 다른 타겟 타입이나 기존 프로젝트에 추가할 수 있죠 이번 시현은 미리보기를 위한 애셋을 제공하는 한 가지 방법으로 개발 애셋을 사용하여 프로젝트에 추가하는 거예요 이 방법이 잘 통하는 경우는 여기 있는 모든 애셋을 여러분의 모든 기기와 팀과 공유할 때죠 근데 데이터와 이미지를 제공하는 다른 방법은 빠르게 실행하고 싶을 때 적절해요 우리 기기에는 이미 애셋과 데이터가 있죠 Previews는 이것도 활용할 수 있게 해 줘요 Xcode의 시뮬레이터로 많은 걸 할 수 있고 개발 대부분의 환상적인 시작점이죠 Previews는 시뮬레이터에서 잘 작동하며 물리적인 기기에서도 잘 작동해요 여러분이 앱을 배포할 기기에서 미리 보는 게 좋은 이유가 있죠 예를 들어 카메라나 센서에 접근하고 싶을 수 있어요 또 다른 이유는 여러분의 기기에 이미 사진이나 파일 같은 실제 데이터가 있기 때문이죠 여러분 기기의 데이터를 활용하는 예를 보여 드릴게요

제가 작업 중인 다른 뷰에는 iCloud 사진 라이브러리에서 사진을 선택하고 새 콜라주를 만들 레이아웃을 고르는 버튼이 있죠 다른 뷰에서 작업했던 것과 같은 방법으로 테스트할 텐데 멋진 사진이 많은 기기를 이용해야 해요 미리보기에 사용되는 기기를 바꿀 건데 캔버스 하단의 미리보기 기기 선택기를 이용하면 되죠 선택지를 살펴볼게요 대개는 자동 모드를 유지해도 되는데 여러분이 선택한 실행 목적지의 기기 집단을 추적하죠 메뉴의 반대편에는 '더 보기' 하위 메뉴가 있어요 기기 창에 추가했던 시뮬레이터 기기가 전부 나타나서 여러분이 원하는 모델을 선택할 수 있죠 때로는 기능에 따라 기기를 선택해도 돼요 메뉴의 중간 부분에는 일반적 기능으로 기기를 표시해서 어떤 모델에 Touch ID가 있었는지 정확히 기억하지 않아도 되죠 근데 저는 바로 옆에 있는 기기를 사용하여 제 라이브러리에 있는 방대한 사진을 활용하고 싶어요

미리보기 기기 선택기에는 Mac에 연결된 기기도 포함되죠 연결된 기기 중 하나를 선택하면 Xcode가 이 기기만을 위해 빌드와 미리보기를 진행하며 시뮬레이터를 통째로 우회해요 그렇게 저의 뷰가 실제 기기에 실행되고 있죠 근데 제 기기에 나온다고 해서 언급했던 미리보기 기능을 사용할 수 없는 게 아니에요 모든 캔버스 모드와 기기 설정을 사용할 수 있죠 예를 들어 다크 모드에서는 어떻게 보일까요?

코드에 업데이트한 내용이 바로 기기에 나타나죠 이 뷰는 탐색 제목이 필요하므로 코드에 navigationTitle을 추가하고 제목을 맞춤화한 뒤 기기에서 바로 검토할게요

정말 빠르네요 이제 사진 라이브러리 통합을 테스트하기 위해 이 핸드폰의 이미지를 모두 사용할 거예요 'Add from Photos'를 탭하고 사진들을 선택할게요 다람쥐가 귀엽군요 이제 'Add'를 탭하세요 뷰가 잘 작동하네요 사진이 레이아웃 선택기에 떠서 여러 레이아웃을 테스트할 수 있죠 멋져요 Xcode에서 편집한 뷰가 제 폰에 나타나면 기분이 좋죠 프로젝트에서 미리보기를 활용하는 세 가지 비결과 비법이에요 몇 가지 언급하며 마무리하죠 Preview API는 여러분에게 유연성을 제공하여 여러분의 전체 애플리케이션과 모든 플랫폼 UI의 미리보기를 정의해요 SwiftUI, UIKit, AppKit과 다양한 위젯을 사용할 수 있죠 Previews는 미리보기를 유연하게 설정하여 필요한 용도로 활용할 수 있어요 샘플 데이터와 애셋을 통과시키고 코드에 환경을 설정하고 Xcode 기능을 활용하여 기기 설정을 테스트할 수 있죠 미리보기는 여러분에게 유연성을 제공하여 다양한 기기에서 미리 볼 수 있게 해 주고 캔버스에서 편리하게 시뮬레이터를 사용하거나 가장 높은 정확도를 자랑하며 데이터, 사진을 쓸 수 있는 물리적 기기를 사용할 수도 있어요 미리보기의 모든 기능은 어떤 기기를 선택하든 사용할 수 있죠 끝으로 앱 일부라도 라이브러리로 모듈화하면 Xcode에서 스킴을 만들어 빌드 타임을 개선하고 현재 작업 중인 항목에 집중할 수 있어요 Previews는 여러분이 창의성을 발휘하도록 돕죠 시청해 주셔서 감사합니다