visionOS용 훑어보기의 새로운 기능

‘visionOS용 훑어보기의 새로운 기능’ 세션을 시작합니다 저는 Naveen입니다 visionOS Quick Look 팀의 소프트웨어 엔지니어죠 오늘 알려 드릴 내용은 훑어보기에 추가된 최신 기능과 애플리케이션에서 훑어보기 기능을 활용하는 방법입니다 먼저 훑어보기가 무엇인지 알아보겠습니다 훑어보기는 다재다능한 시스템 도구로 모든 Apple 플랫폼에서 파일 미리보기와 편집 기능을 매끄럽게 수행하죠 파일, 메시지, Freeform 같은 여러 시스템 앱에서 훑어보기를 사용합니다 다양한 일반 파일 유형을 보고 편집할 수 있는 것은 물론 파일 접근 시 모든 것을 안전하게 보호해 주죠 일부 파일 유형은 FaceTime 통화에서 SharePlay를 사용할 수 있습니다 visionOS에서 근사하게 보이는 3D 콘텐츠는 URL을 제공하기만 하면 훑어보기에서 쉽게 볼 수 있습니다 3D 콘텐츠는 훑어보기에서 두 가지 방법으로 미리 볼 수 있습니다 첫 번째는 앱 내 방식으로 훑어보기를 매끄럽게 통합하는데 애플리케이션 내에서 전체 화면으로 표시되죠 두 번째는 윈도우형 훑어보기입니다 이 경우에는 3D 모델이 볼륨으로 표시되고 분리된 모습으로 나타나 앱과 함께 콘텐츠를 볼 수 있어서 멀티태스킹 기능을 향상해 줍니다 이전에는 드래그 앤 드롭으로 이런 경험을 할 수 있었죠

우리 목표는 앱에서 훑어보기 경험을 더 많이 제어할 수 있게 하는 겁니다 SwiftUI와 Swift 동시성도 활용하면서 말이죠 올해 저희는 이러한 원칙을 바탕으로 새롭게 구축된 PreviewApplication API를 소개합니다 이제 몇 줄의 코드만으로 훑어보기를 앱에 통합할 수 있습니다 이 API를 사용하면 개별 파일을 미리 볼 수 있고 모음 보기에서 여러 파일을 여는 방법도 제공합니다 기본 편집 옵션을 사용자화할 수 있지만 이 API는 미리 본 파일의 수명 주기를 관리하는 직관적인 방식을 제공하죠

이건 새로운 API를 개괄적으로 본 것에 불과합니다 다음 섹션에서는 훨씬 더 자세한 내용을 공유해 드리겠습니다 새로운 PreviewApplication API를 사용해서 앱에 맞게 훑어보기 경험을 사용자화하는 방법을 말이죠

뒷부분에서는 훑어보기의 최신 3D 미리보기 개선 사항을 다루겠습니다

PreviewApplication API의 사용법을 바로 살펴보겠습니다

제가 앱을 하나 만들었는데 친구들이랑 가족과 여행 경험을 서로 공유할 수 있는 앱입니다 Michael이라는 친구가 최근 갈라파고스 여행에 대한 항목을 추가했습니다 친구는 여행하는 동안 멋진 공간 비디오를 많이 촬영했죠 저는 제 앱에서 그 비디오를 공간 프레젠테이션으로 미리보고 싶습니다 사진 앱처럼요 훑어보기는 이런 작업을 하기에 정말 좋습니다 새로운 PreviewApplication API를 사용하면 얼마나 간단한지 보여드리겠습니다

저는 앱에서 ThumbnailImage라는 사용자 설정 보기를 만들었습니다 이 보기는 항목에 파일 하나를 나타내죠 보기를 탭하면 이 파일이 윈도우형 훑어보기에서 열리도록 하고 싶습니다

이를 위해 onTabGesture를 추가하고

PreviewApplication.open을 호출하겠습니다

URL의 매개변수에 선택한 파일의 URL을 입력할 겁니다

이 코드를 실행하고 이 기능이 실제로 어떻게 작동하는지 관찰해 봅시다 파일을 탭하면

파일이 이제 윈도우형 훑어보기에서 열립니다

전체 공간 프레젠테이션으로 재생할 수도 있고

비디오를 감상하는 동시에 앱을 계속 사용할 수도 있죠

이 항목의 모든 파일을 미리 볼 수도 있습니다 이전에는 URL 하나를 전달했지만 이 API는 여러 URL을 수용할 수 있습니다

이 경우에는 API에 현재 항목의 모든 URL을 제공할 겁니다

선택한 URL에 선택한 파일의 URL을 사용합니다

이렇게 하면 모든 파일이 모음 보기에서 열리고 선택한 파일에 포커스가 있어야 합니다 확인해 보겠습니다 같은 파일을 탭하면 모음 보기로 표시되죠 탐색 화살표가 있어서 이 항목 내에 있는 모든 파일을 탐색할 수 있습니다

훌륭하죠! 이제 개별 파일을 열지 않아도 모든 특별한 순간을 감상할 수 있습니다 하지만 제목이 의도한 대로 표시되지 않았군요 제목을 탭하면 다듬기 같은 편집 옵션이 표시됩니다

훑어보기는 기본적으로 이런 편리한 편집 옵션을 지원합니다 편집한 내용이 자동으로 원본 파일에 다시 기록되죠

편집을 더 세밀하게 제어할 수 있도록 API에 PreviewItem을 사용하는 옵션이 포함되어 있습니다

URL의 경우 이 옵션에 selectedURL을 제공할 겁니다

displayName은 상단 메뉴에 제목을 나타내죠 현재 입력한 이름을 제목으로 지정할 겁니다

editingMode를 비활성화로 설정해

상단에 있는 메뉴에서 편집 옵션을 제거할 수 있습니다 사용 가능한 다른 편집 모드도 있습니다 자세한 내용은 API 문서를 확인하세요

마지막으로 API의 미리보기 항목을 사용할 겁니다

이 코드를 실행해서 변경된 동작을 보겠습니다 이제 제목에 제가 입력한 이름이 표시되네요 그리고 상단의 메뉴에 접근하면 편집 옵션이 더 이상 나타나지 않는데 정확히 의도했던 대로 적용된 거죠 API는 파일당 미리보기를 하나만 제공합니다 같은 파일을 다시 열어도 새로운 미리보기가 생성되지 않죠 하지만 기존 미리보기가 아직 표시되지 않았다면 앞으로 가져옵니다 따라서 열려 있는 미리보기를 나타내는 지표를 표시하려고 합니다 하지만 미리보기가 닫힐 때 이 지표를 제거하려면 어떻게 해야 할까요? 다행히도 미리보기의 수명 주기를 관리하는 새로운 옵션이 API에 있습니다 PreviewApplication.open을 호출하면 3D 인스턴스를 수신하죠 그걸 상태 변수에 저장하겠습니다

세션에 이벤트가 포함되는데 이건 Swift 비동기 데이터 스트림이죠

이벤트를 사용해서 미리보기가 열리거나 닫히는 경우 알 수 있습니다 이 이벤트를 관찰하는 메서드를 생성하겠습니다

열린 미리보기를 시각적으로 표현하기 위해 눈 아이콘을 사용해 훑어보기에서 파일이 미리보기 상태인지 표시합니다

미리보기 상태에 따라 이 아이콘의 불투명도를 변경할 겁니다

이 기능이 어떻게 작동하는지 살펴봅시다 제가 새 미리보기를 열면 열린 미리보기의 축소판에 아이콘이 표시되고

제가 미리보기를 닫으면 아이콘이 사라집니다 제가 딱 의도했던 거죠

PreviewApplication API를 활용해 앱에 맞게 훑어보기 경험을 사용자화할 수 있는 좋은 방법이 있습니다 앞서 보여드렸듯이 훑어보기는 앱에 공간 미디어 미리보기를 불러오는 훌륭한 방법이기도 하죠 앱에 맞는 공간 사진과 비디오를 생성하는 방법에 대한 자세한 정보는 ‘매력적인 공간 사진 및 비디오 경험 빌드하기’ 세션에서 Vedants의 설명을 확인하세요

다음으로 훑어보기에서 3D 콘텐츠 보기에 대한 최신 개선 사항을 살펴보겠습니다 여러분의 피드백이 정말 유용했죠 올해 저희는 요청이 아주 많았던 두 가지 기능을 추가했습니다 첫 번째는 표면 매핑입니다 여기 iPhone 3D 모델이 있습니다 근사하죠 제 책상 위에 배치하고 싶습니다 이제 훑어보기에서 어떤 3D 모델이든 바닥이나 테이블 등 수평면에 착 붙이는 스내핑을 지원하기에 쉽게 구현이 가능합니다

핀치 동작으로 윈도우 막대를 집고 드래그해서 책상에 더 가까이 가져올 수 있습니다 이렇게 하면 iPhone을 책상에 착 붙일 수 있고 이때 이 동작을 나타내는 사운드를 들을 수 있죠

책상에 붙였으면 책상 표면 위로 모델을 자유롭게 드래그할 수 있습니다

표면 스내핑은 훑어보기에서 모든 3D 모델에 대해 자동으로 활성화됩니다 추가 작업이 필요하지 않죠 이 기능은 테이블이나 바닥 같은 수평면에 사용할 수 있습니다 3D 모델이 표면과 겹쳐지지 않도록 훑어보기에서 스냅 상태에서는 피치 회전이 비활성화됩니다 3D 모델이 표면에 착 붙은 것처럼 표시되도록 모델의 바닥면이 원점에 놓이도록 합니다

이것이 훑어보기의 표면 매핑입니다 다음 개선 사항에 대해 설명하기 위해 iPhone 모델을 다시 살펴보겠습니다

알고 계시듯이 iPhone에는 다양한 색상 옵션이 있죠 이전에는 색상 옵션을 미리보려면 가능한 조합 각각에 대해 개별 USDZ 파일을 만들어야 했습니다 모든 조합을 하나의 파일에서 미리볼 수 있다면 얼마나 좋을까요? 이제는 가능합니다

이제 훑어보기에서 구성을 지원하니까 하나의 파일 내에서 다양한 색상 중에서 선택할 수 있습니다 훑어보기의 구성에 대한 데모를 빠르게 살펴보겠습니다 하단에 있는 메뉴를 탭하면 새로운 옵션이 표시되어 iPhone 색상을 변경할 수 있습니다 색상을 선택하고 화이트 티타늄으로 변경해 보겠습니다

이 색상 정말 마음에 드네요 이렇게 간단하게 훑어보기에서 다양한 구성을 볼 수 있습니다 훑어보기는 USDZ와 Reality 파일 모두에서 구성을 지원합니다

구성은 USDZ의 배리언트와 같습니다

또한 visionOS에서 구성은 FaceTime 통화 중인 모든 참여자 간에 동기화됩니다

구성은 iOS와 macOS를 비롯한 모든 플랫폼에서 지원됩니다 여기 iOS에 같은 iPhone이 있습니다

훑어보기 미리보기에서 바로 다른 구성으로 전환할 수 있는데 이렇게 하면 기기를 구입하기 전에 모든 색상을 쉽게 살펴볼 수 있죠

여기 구성을 활용하는 또 다른 예가 있습니다 훑어보기에서 태양계의 모든 행성을 쉽게 학습할 수 있죠 USDZ의 배리언트에 대한 예시 코드를 바로 살펴보겠습니다 앞서 언급했듯이 훑어보기의 구성은 USDZ 파일의 배리언트와 같습니다 여기 USDZ에서 iPhone 모델을 나타내는 코드 스니펫이 있습니다

모든 배리언트가 기본 프리미티브에 정의되어 있는지 확인하세요 이렇게 하면 훑어보기에서 배리언트를 올바르게 쿼리하고 표시합니다

저는 색상을 제목으로 사용하고 블랙 티타늄을 기본 색상으로 사용했는데 모델과 함께 표시되어 현재 로드된 구성과 같이 나타납니다

구성 버튼을 탭하면 다른 색상을 선택할 수 있습니다

이제 White_Titanium을 선택할 건데 그러면 선택한 색상의 모델이 다시 로드됩니다

배리언트 이름에는 공백 사용이 지원되지 않아서 밑줄을 사용했는데 훑어보기에 표시될 때는 자동으로 공백으로 변환됩니다 구성을 작성할 때 로드 시간에 영향을 미치는 요소를 고려하세요 용량이 큰 텍스처나 복잡한 지오메트리 또는 셰이더를 많이 사용하지 않아야 합니다 빠르고 원활하게 로드되어 매끄러운 훑어보기 경험을 제공하는 구성을 목표로 하세요 구성이 다양한 장치와 플랫폼에서 잘 표시되고 작동하는지 철저하게 테스트하는 것이 좋습니다 자세한 내용은 공간 컴퓨팅을 위해 3D 애셋을 최적화하는 방법에 대한 Scott의 설명을 확인하세요 세션을 요약하겠습니다 PreviewApplication API를 사용하면 앱에서 윈도우형 훑어보기 경험을 더 세밀하게 제어할 수 있습니다 모음 보기로 확장해 세션을 편집하고 관리할 수 있죠 표면 스내핑을 사용하면 수평면에 3D 모델을 더 쉽게 배치할 수 있습니다 마지막으로 구성을 통해 훑어보기 미리보기 기능을 확장하여 제품, 교육 및 디자인 분야에서 새로운 용도로 활용할 수 있습니다

이렇게 훑어보기의 새로운 기능을 살펴보았습니다 멋진 작품을 기대하겠습니다