첫 몰입형 앱 개발하기

♪ 부드러운 기계 힙합 음악 ♪ ♪ 안녕하세요, 저는 Peter이고 Apple의 RealityKit Tools 팀에서 일하고 있습니다 오늘은 여러분의 첫 번째 몰입형 앱 개발을 시작할 수 있는 방법을 알아볼 건데요 공간 컴퓨팅은 완전히 새로운 콘텐츠 표현 방법과 앱에 더 깊은 수준의 몰입감을 통합하는 방법을 제공합니다 플랫폼 자체는 새로운 것이지만 이를 위한 앱 구축은 이미 여러분에게 친숙할 수 있는 작업 흐름을 이용하죠 이번 세션에서는 Xcode에서 새 앱 프로젝트 만들기로 시작할 겁니다 시뮬레이터가 시뮬레이션된 씬에서 여러분이 앱을 경험하게 해줄 수 있는 방법과 Xcode Previews를 사용해 빠르게 반복하는 법을 볼게요 여러분의 앱을 위한 공간 콘텐츠를 준비하고 미리볼 수 있도록 도와주는 새로운 도구 Reality Composer Pro를 소개하겠습니다 앱이 몰입형 씬을 생성하고 SwiftUI 제스처를 RealityKit 엔티티로 타겟팅하는 방식도 보여드릴게요 여러분들과 같은 수백만 명의 개발자들이 매일 Xcode를 사용해 배포 앱을 만들고 미리 보고, 디버깅하고 프로파일링하고, 준비합니다 Xcode는 첫 앱을 빌드하는 데 최고의 공간입니다 Xcode 프로젝트 생성 프로세스를 살펴보고 이 플랫폼의 새로운 기능을 살펴보겠습니다 Xcode에서 새 프로젝트를 생성하면 새 프로젝트 어시스턴트가 표시됩니다 플랫폼 및 프로젝트 유형별로 프로젝트 템플릿을 구성하고 앱 프로젝트 템플릿은 Platform 탭 아래의 Application 섹션에서 사용할 수 있습니다 새 프로젝트 어시스턴트는 플랫폼 지원이 아직 설치되지 않은 경우 다운로드를 요청할 수 있습니다 새로운 프로젝트 어시스턴트는 몇 가지 옵션을 나타냅니다 그 중 두 가지가 이 플랫폼의 새로운 기능인데요 이들 각각을 세밀하게 살펴볼게요 첫 번째 새 옵션인 Initial Scene을 통해 앱에 자동으로 포함되는 초기 씬의 유형을 구체화할 수 있습니다 새 프로젝트 어시스턴트는 항상 여기에서 선택한 유형의 단일 씬으로 시작점을 만들죠 여러분은 개발자로서 추후 추가 씬 추가할 수 있습니다 이들은 초기 씬과 동일한 유형이거나 완전히 다른 씬 유형일 수 있습니다 템플릿은 창과 볼륨이라는 두 개의 초기 씬을 제공하죠 이들의 차이점을 살펴보겠습니다 창은 주로 2차원 콘텐츠를 나타내도록 디자인됩니다 평면 크기를 조정할 수 있지만 깊이는 고정되어 있습니다 창은 실행 중인 다른 앱과 함께 표시됩니다 '공간 컴퓨팅을 위한 SwiftUI' 세션을 통해 SwiftUI에 추가 및 변경 사항과 함께 창 씬 유형에 대해 더 자세히 알아보실 수 있습니다 볼륨은 주로 3D 콘텐츠를 표시하도록 설계됩니다 3차원에서의 크기는 앱 자체에서 제어되나 앱 사용자가 조정할 수는 없습니다 볼륨은 일반적으로 창과 마찬가지로 실행 중인 다른 앱과 함께 표시됩니다 'SwiftUI를 다음 차원으로 가져가기' 세션에서는 볼륨 씬 유형에 대한 자세한 정보를 제공합니다 두 번째 새로운 옵션 Immersive Space는 몰입형 콘텐츠 시작점을 앱에 추가할 수 있는 기회를 제공합니다 Immersive Space 씬 유형을 앱에 추가하면 이를 사용해 무한한 캔버스의 어느 곳이든지 제한 없는 콘텐츠를 표시할 수 있습니다 앱이 이 씬 유형을 활성화하면 공유 공간에서 전체 공간으로 이동합니다 전체 공간에서는 산만함을 피하기 위해 실행 중인 다른 앱을 숨깁니다 앱은 전용 렌더링 리소스에 액세스할 수 있고 손 추적과 같은 ARKit 기능의 활성화 권한을 요청할 수 있습니다 앱에 대한 몰입형 경험을 만들고 싶은 경우 SwiftUI는 세 가지 스타일의 씬을 제공합니다 혼합형 몰입 점진적 몰입 그리고 완전 몰입이 있죠 혼합형 몰입 스타일에서는 앱이 전체 공간에 무한 가상 콘텐츠를 배치할 수 있습니다 패스스루를 통해 사람들과 주변 환경 연결을 유지하면서 말이죠 점진적 몰입 스타일은 포털을 열어 사람을 주변에서 완전히 제거해 버리는 더 몰입감 있는 경험을 제공합니다 사람들은 포털이 열리면 몰입형 콘텐츠에 대한 180도 뷰를 대략 볼 수 있고 Digital Crown을 사용해 포털 크기를 조정할 수 있습니다 완전 몰입형 스타일은 패스스루를 완전히 숨겨 사람들을 앱 환경으로 둘러싸서 새로운 장소로 옮겨줍니다 Immersive Spaces에 대해서는 세션 후반에 더 얘기해 보죠 심층 분석을 위해서는 'SwiftUI로 창 너머로 이동하기' 세션을 시청해 보세요 기본적으로 앱에 Immersive Space는 추가되지 않습니다 이건 '선택하지 않음' 옵션을 선택했을 때의 행동입니다 그러나 옵션 중 한 가지를 선택하면 여러분이 선택한 Immersive Space 스타일과 함께 템플릿이 자동으로 두 번째 SwiftUI 씬을 추가하죠 기본적으로 창으로 된 씬에 SwiftUI 버튼도 제공합니다 누군가가 몰입형 콘텐츠를 열 수 있도록 말이죠 일반적으로 우리는 앱이 항상 이 플랫폼의 창에서 시작하여 명료한 엔트리, 엑시트 컨트롤을 제공하길 권장합니다 사람들이 콘텐츠에 더 몰입할 때를 결정할 수 있도록요 사람들이 자신도 모르는 사이에 더 몰입형 경험으로 이동하게 하는 걸 피해주세요 이 세션을 위해 프로젝트를 구성해 봅시다 Immersive Space 없이 초기 볼륨으로 시작할게요 평소와 같이 프로젝트를 생성하면서 프로젝트명과 Xcode 저장 위치를 알려줍니다 프로젝트가 생성되면 새 프로젝트가 열립니다 왼쪽에는 Xcode의 프로젝트 내비게이터가 있고요 첫 번째 파일은 MyFirstImmersiveApp.swift입니다 초기 볼륨을 나타내는 앱의 WindowGroup을 선언합니다 WindowGroup은 iOS에서 보셨던 앱이 나타내는 최상위 SwiftUI 뷰를 구체화하는 구조와 동일합니다 두 번째 파일은 ContentView.swift인데요 이건 초기 볼륨에 보여지는 뷰입니다 프로젝트는 메인 에디터에서 ContentView.swift로 열리고요 Xcode는 ContentView의 미리보기도 보여줍니다 프로젝트에 자동 포함되는 RealityKit 콘텐츠 패키지의 콘텐츠를 로딩하죠 새 프로젝트 대부분의 코드는 ContentView에 있습니다 ContentView는 새로운 플랫폼별 기능을 사용합니다 자세히 살펴 보죠 ContentView는 볼륨에 의해 표시되는 SwiftUI 뷰의 이름입니다 단순한 효과를 위해 사용되는 'enlarge'라는 단일 SwiftUI State 프로퍼티를 정의하죠 우리의 콘텐츠는 SwiftUI 뷰로서 바디 프로퍼티에 의해 제공됩니다 바디는 VStack에 두 개의 복합 뷰로 구성되죠 VStack은 복합 뷰 스택을 수직으로 만들어 줍니다 첫 복합 뷰는 RealityView입니다 RealityView는 이 플랫폼의 새 뷰인데요 잠시 후에 다시 알아볼게요 두 번째 복합 뷰는 표준 SwiftUI Toggle 뷰입니다 또 다른 VStack에 삽입되어 있죠 Toggle 뷰는 enlarge 프로퍼티의 값을 토글합니다 VStack은 glassBackgroundEffect를 제공하여 버튼이 읽을 수 있고 상호작용하기 쉽게 만들죠 SwiftUI로 작업한 적이 있다면 Toggle 뷰를 보셨을 가능성이 큽니다 다른 플랫폼에서 이미 지원되는 SwiftUI 컨트롤 대부분은 예상대로 작동할 겁니다 잠시 후 제스처를 사용하여 확대 속성을 전환하는 방법을 살펴보도록 하겠습니다 그 전에 먼저 RealityView를 자세히 살펴보죠 RealityView를 사용하면 SwiftUI 뷰 계층에 Reality 콘텐츠를 배치할 수 있습니다 ContentView에서 사용되는 RealityView 초기화는 make 클로저와 update 클로저 이 두 개의 클로저를 매개변수로 사용합니다 make 클로저는 초기 RealityKit 콘텐츠를 뷰에 추가합니다 RealityKit 콘텐츠 패키지의 콘텐츠를 로딩하려고 하죠 성공할 경우 content.add를 사용해 뷰에 로딩된 콘텐츠를 추가합니다 초기 콘텐츠를 절차에 따라 생성하거나 절차적 콘텐츠, 로딩된 콘텐츠의 조합을 사용할 수 있습니다 update 클로저는 옵션이지만 제공되는 경우 SwiftUI 상태가 변경될 때마다 호출됩니다 content.entites에서 첫 엔티티를 가져오는 것으로 시작됩니다 그게 make 클로저에 추가된 것이니까요 그 다음으로는 SwiftUI 상태에서 enlarge 프로퍼티의 값을 기반으로 uniformScale 요인을 선택하고 이 규모를 엔티티에 적용합니다 RealityView update 클로저는 렌더링 업데이트 루프가 아니고 모든 프레임에서 호출되지는 않습니다 대신 update 클로저는 SwiftUI 상태 변경 시에만 호출됩니다 마지막으로 RealityView에는 첨부된 제스처가 있습니다 RealityKit 콘텐츠를 탭하면 enlarge 프로퍼티의 값이 토글되어 이전에 다뤘던 Toggle 뷰를 탭할 때와 동일한 효과가 만들어집니다 RealityView 및 제스처에 대해 자세히 알아보려면 'RealityKit으로 공간 경험 구축하기' 세션을 시청해 보세요 이제 ContentView를 살펴보았으니 시뮬레이터를 소개하고 시뮬레이션된 씬에서 작동하는 앱을 탐색하고 상호작용하는 법을 알아보죠 그 다음 시뮬레이터에서 앱이 어떻게 보이는지 볼게요 시뮬레이터는 자체적으로 다른 플랫폼을 위해 사용하셨다면 여러분에게 친숙할 창을 보여줍니다 처음 시작하면 응용 프로그램 시작 관리자가 표시됩니다 시뮬레이터는 누군가가 디바이스를 착용하고 보는 것을 모방합니다 기본적으로 포인터는 보고 있는 것을 제어합니다 마우스나 트랙패드를 클릭하면 탭이 시뮬레이션되고 클릭을 누르고 있으면 핀칭이 시뮬레이션되죠 공간 컴퓨팅의 큰 부분은 주변을 보고 이동할 수 있다는 것입니다 시뮬레이터는 이를 위해 추가 컨트롤을 제공하죠 시뮬레이터 창 우측 하단 코너에 시뮬레이션 디바이스 제어를 위한 여러 개의 버튼이 있는데요 여기에서 마우스나 트랙패드를 움직이는 동안 클릭한 채로 있으면 주위를 둘러볼 수 있죠 ...패닝... ...궤도... ...앞뒤로 움직이기 이 컨트롤을 클릭 상태로 유지하면 콘텐츠 상호작용과 보고 움직이기 사이를 빠르게 전환할 수 있는 능력이 생깁니다 이 버튼을 클릭하여 주어진 제어 모드로 전환할 수도 있죠 마우스 버튼을 계속 누를 필요가 없습니다 패닝 버튼을 클릭하면 뷰포트를 클릭, 드래그하면 뷰가 패닝됩니다 맨 왼쪽 컨트롤을 클릭하면 보기 및 탭 제어로 다시 전환되죠 시뮬레이터에는 다양한 방과 조명 상태에서 앱을 보는 데 사용할 수 있는 여러 가지 시뮬레이션된 씬을 제공합니다 툴바에 시뮬레이션된 씬 메뉴를 통해 씬 사이를 전환할 수 있죠

시뮬레이터 사용에 관한 자세한 정보는 developer.apple.com의 설명서를 참고해 주세요 이제 시뮬레이터에 익숙해졌으니 여기서 실행되는 새 앱을 살펴보겠습니다 평소와 같이 Product 메뉴에서 Run을 클릭하여 Xcode에서 앱을 실행합니다 앱이 실행되면 볼륨이 표시되면서 RealityKit 콘텐츠 패키지의 콘텐츠를 보여줍니다 Enlarge RealityView Content 버튼을 탭하면 콘텐츠가 확대되고 이걸 다시 탭하면 본래의 크기로 돌아갑니다 구를 탭해서 확대할 수도 있습니다 RealityView의 제스처 덕분이죠

구를 탭하면 버튼의 하이라이트가 변합니다 탭 제스처는 SwiftUI 상태를 업데이트해서 RealityView와 Toggle 뷰 모두 상태 변화에 반응하게 하죠 Xcode Previews를 사용하면 앱 뷰의 모습과 행동에 빠르게 초점을 맞추고 반복할 수 있습니다 SwiftUI 미리보기 제공자를 포함하는 소스 파일을 편집할 때 미리보기 캔버스는 Xcode에서 자동으로 열립니다 시뮬레이터와 마찬가지로 Xcode Previews는 시뮬레이션된 디바이스 뷰로 나타나죠 시뮬레이터를 탐색하기 위해 사용했던 것과 동일한 컨트롤을 미리보기 창에서도 사용 가능합니다 컨트롤을 사용해 콘텐츠에 조금 더 가까이 이동해 볼게요 시뮬레이션된 씬과 카메라 앵글을 바꿀 수도 있습니다 우측 하단 코너의 컨트롤을 사용해서요 SwiftUI 코드도 변경하여 미리보기 업데이트를 실시간으로 확인할 수 있습니다 계속해서 토글의 텍스트를 변경해 볼게요 "Change Size"로 변경해 보겠습니다 텍스트를 변경할 때 미리보기 업데이트가 확인됩니다 또한 Xcode Previews에서는 버튼이 여전히 작동하는 것도 보이죠 RealityView 클로저의 콘텐츠에서도 이걸 사용해 반복할 수 있습니다 Xcode Previews는 카메라 앵글 뿐 아니라 앱의 바운드 너머로 확장되는 콘텐츠를 발견할 수 있게 하는 오브젝트 모드를 포함하여 훨씬 더 많은 고급 기능을 갖추고 있습니다 Xcode Previews에 대해 개발자 문서에서 더 알아보세요 RealityKit 콘텐츠 패키지 작업에 있어 도움이 되는 새로운 도구를 만들었는데요 Reality Composer Pro는 앱의 공간 콘텐츠를 준비하고 미리볼 수 있는 가장 좋은 공간입니다 우리 앱의 ContentView는 RealityView를 사용해 RealityKit 콘텐츠 패키지에서 콘텐츠를 로딩합니다 템플릿에 의해 생성된 콘텐츠 패키지는 RealityKitContent라고 부르고 Xcode 프로젝트에서 Packages 그룹에 위치합니다 여기서 RealityKitContent가 선택된 것을 볼 수 있는데요 RealityKit 콘텐츠 패키지는 RealityKit 콘텐츠를 포함하는 Swift 패키지입니다 런타임 사용을 위한 콘텐츠를 최적화하고자 빌드 시간에 처리되죠 RealityContent의 클로저 지표를 클릭하면 콘텐츠 패키지의 콘텐츠들이 보입니다 큐브 아이콘이 있는 Package를 클릭하면 콘텐츠 패키지 내 씬 중 하나의 미리보기가 보이죠 콘텐츠 패키지를 편집하려면 우측 상단에 있는 Open in Reality Composer Pro 버튼을 클릭하세요 Reality Composer Pro가 실행됩니다 Reality Composer Pro가 실행되면 ContentView가 로딩한 3D 콘텐츠가 보이는데요 Xcode의 메인 포커스는 소스 파일과 앱 리소스 편집에 있지만 Reality Composer Pro는 3D 콘텐츠를 전면 중앙에 배치합니다 기본 보기는 3D 뷰포트로 시뮬레이터의 컨트롤과 유사한 컨트롤을 사용해 탐색할 수 있습니다 Reality Composer Pro는 콘텐츠를 씬으로 구성합니다 프로젝트 템플릿에 포함된 콘텐츠 패키지는 단일 씬으로 시작되죠 프로젝트 개선을 위해 Immersive Space를 위한 콘텐츠를 포함하는 새로운 씬을 만들어 봅시다 Reality Composer Pro의 File 메뉴에서 New > Scene을 선택하세요 파일명을 입력하시고요 이 경우 간단하게 ImmersiveScene라 하고 Save를 클릭하세요 씬을 만들고 나면 자동으로 열리는데요 창 하단에 있는 Project Browser에 텅 빈 씬의 썸네일이 보입니다 창 상단에 있는 씬 이름을 클릭하여 씬 사이를 전환할 수 있고요 Project Browser에 있는 씬들을 더블클릭해도 됩니다 이제 새로운 몰입형 콘텐츠를 새로운 씬에 추가할 준비가 된 건데요 Xcode 프로젝트를 구성할 때 주변 어느 곳에서든 무한한 콘텐츠를 나타내기 위해 SwiftUI의 ImmersiveSpace를 사용할 수 있다고 언급했었죠 이 씬 유형을 이해하기 위한 두 가지 주요 디테일이 더 있습니다 먼저 창과 볼륨 씬 타입과는 다르게 ImmersiveSpace는 발의 추정 위치를 콘텐츠의 출처로 사용합니다 이 좌표계에서는 양의 x축은 여러분의 오른쪽에 양의 y축은 위쪽에 음의 z축은 여러분 앞쪽에 있습니다 두 번째로 앱이 전체 공간에서 실행되면 여러분 손의 정확한 위치나 방향과 같은 추가 데이터 접근을 요청할 수도 있습니다 이 데이터 일부는 개인 정보에 민감할 수도 있습니다 앱이 그런 데이터를 요청할 경우 앱을 사용 중인 사람에게 이 요청을 승인하라고 요청할 것입니다 공유 공간 앱에서는 이용할 수 없습니다 이용 가능한 추가 데이터와 Immersive Space를 나타내는 앱에 대해 개인 정보 고려 사항에 대해 더 알아보고 싶으시다면 '공간 컴퓨팅을 위한 ARKit' 세션을 참고해 주세요 이제 몰입형 경험을 만드는 법에 대해 더 자세히 알게 되었으니 ImmersiveSpace에서 잘 작동하는 콘텐츠를 모으는 법을 알아봅시다 제게는 몰입형 경험에 적절한 콘텐츠를 만들기 위해 사용할 USDZ 구름 모델이 있는데요 Reality Composer Pro 씬에 USDZ 모델을 추가하기 위해 File 메뉴를 열고 Import를 클릭하세요 그 다음 해당 파일을 선택하세요 Project Browser에 USDZ 모델이 나타날 겁니다 씬에 추가하기 위해 뷰포트로 드래그하세요 USDZ 파일을 Finder 창에서 뷰포트 창으로 드래그 앤 드롭하셔도 됩니다 그러면 임포팅하여 씬에 추가하는 게 동시에 되죠 이제 몰입형 씬에 구름을 배치해 봅시다 오브젝트를 선택해서 나타나는 핸들을 사용해 오브젝트를 옮길 수 있는데요 아니면 우측에 있는 Inspector 패널에 직접 값을 입력해도 됩니다 이 씬 유형은 여러분 발의 추정 위치를 출처로 생각하기 때문에 우리가 즉시 볼 수 있는 어딘가에 나타날수 있도록 구름을 배치해야 합니다 이 경우 여러분의 앞 약간 오른쪽 눈높이 약간 위쪽에 배치할 겁니다 이 구름이 약간 오른쪽에 나타났으면 합니다 양의 x축이 오른쪽으로 향하니 X 값을 50으로 설정하죠 이 변화가 일어났을 때 구름이 뷰포트 밖으로 움직인 게 보이실 겁니다 다시 초점을 맞추기 위해 좌측 씬 계층에 있는 이곳을 더블클릭하세요 다시 구름이 보이면 Y 좌표에 대해 생각해 봅시다 구름이 우리 위에 나타나게 하고 싶으니 200cm 높이에 배치하도록 하죠 플로어 위로 약 6.5피트 떨어진 정도입니다 구름이 다시 뷰포트에서 벗어났네요 다시 뷰로 가져옵시다 구름을 우리의 약간 앞쪽에 배치해야 합니다 수직으로 위를 보지 않아도 될 수 있도록요 우리에게서 벗어나는 방향은 음의 z축인데요 Z 좌표를 -200cm로 설정해 봅시다 다시 한번 씬 계층에서 이곳을 클릭해서 전면 중앙으로 구름을 가져오시고요 이 구름은 이 몰입형 씬에서 작은 편에 속합니다 더 크게 만들 수 있는 방법을 살펴보죠 규모를 키우기 위해 원을 바깥쪽으로 드래그합니다 임포팅됐을 때보다 5배 정도 커졌음 하는데요 마지막으로 두 번째 구름을 추가할게요 이번에는 왼쪽에요 메뉴에서 Edit > Duplicate 명령을 사용하여 첫 구름의 복사본을 만들 수가 있습니다 복사본을 왼쪽에 배치하기 위해 X 좌표를 -50으로 설정하죠

씬의 모든 콘텐츠를 뷰포트 안에 넣기 위해 계층에서 Root를 더블클릭하세요 좋습니다, 이제 몰입형 경험에 적절한 콘텐츠 씬이 되었네요 Xcode로 돌아가기 전에 File > Save All을 이용해 변경 사항을 저장할게요 Reality Composer Pro는 공간 콘텐츠를 준비하고, 미리보고 앱에 통합할 수 있는 강력한 툴입니다 더 상세한 소개를 원하신다면 'Reality Composer Pro 만나보기' 세션을 시청하세요 'Xcode에서 Reality Composer Pro 콘텐츠 작업하기' 세션은 첫 세션을 기반으로 RealityKit의 콘텐츠 패키지 내 콘텐츠를 여러분의 앱에 더 긴밀하게 통합하는 방법을 보여줍니다 다음 단계는 우리가 만든 몰입형 콘텐츠를 여러분의 앱에 나타내는 건데요 앱이 나타내는 씬은 소스 파일 App.swift에 있고 프로젝트명 앞에 붙습니다 이걸 더 자세히 살펴볼게요 우리의 앱이 ContentView를 나타내기 위해 얼마나 알고 있는지 궁금하실 겁니다 ContentView를 볼륨의 콘텐츠로 나타내기 위해 우리 앱이 단일 WindowGroup을 사용한다는 걸 알고 있죠 WindowGroup은 주어진 뷰를 나타내는 하나 이상의 창이나 볼륨을 만드는 씬입니다 바디 프로퍼티의 첫 씬은 실행되었을 때 앱에서 보여주게 될 씬인데요 첫 씬 다음에 추가 씬을 넣어 씬을 추가할 수 있습니다 우리의 앱이 Reality Composer Pro에서 우리가 만든 콘텐츠와 함께 몰입형 공간을 나타냈음 합니다 그 공간에서는 우리가 앱에 추가할 ImmersiveView라는 새로운 뷰 콘텐츠를 보여줄 거고요 그래서 그 공간에 ID를 할당해야 합니다 ImmersiveSpace 문자열을 ID로 선택했는데요 나중에 공간을 열 때 사용할 겁니다 이 코드를 우리 프로젝트의 App.swift 소스 파일에 추가하고 ImmersiveView에도 코드를 추가해서 우리가 Reality Composer Pro에서 만든 새 씬을 로딩합시다 Xcode에서 SwiftUI View를 사용해 이미 ImmersiveView.swift를 프로젝트에 추가했습니다 프로젝트의 App.swift에는 ImmersiveSpace를 추가했고요 이제 ImmersiveView.swift 상단에 RealityKitContent를 임포팅할 겁니다 RealityKit 콘텐츠 패키지를 이용할 수 있도록요 RealityView를 사용하기 위해서도 임포팅해야 하고요 ImmersiveView의 기본 콘텐츠를 그냥 텍스트 상자입니다 이 상자를 우리가 콘텐츠 패키지에 추가한 새로운 씬에 있는 콘텐츠를 로딩하는 RealityView로 대체해 봅시다 이를 위해 좌측의 프로젝트 계층에 있는 ContentView를 더블클릭하시고 첫 클로저와 함께 RealityView에 대한 코드를 선택하여 복사해 주세요 이 오픈 파일 탭을 이용해 ImmersiveView으로 돌아갈 수 있고 여기서 텍스트 뷰를 선택해 붙여넣음으로써 RealityView 코드로 바꿀 수가 있습니다 RealityView에 대한 update 클로저는 복사하지 않았는데요 이건 우리가 SwiftUI 상태 변화에 대응해 이 뷰의 콘텐츠를 업데이트할 의도가 없기 때문입니다 마지막으로 우리가 만든 Immersive Scene의 콘텐츠를 로딩하게 할 수 있도록 로딩된 씬의 이름을 "Scene"에서 "ImmersiveScene"으로 변경해 주세요

미리보기는 이제 ImmersiveScene에서 콘텐츠를 로딩하고 있는데 왜 우리 미리보기 캔버스에는 보이지 않는 걸까요? ImmersiveView를 만들었을 때 Xcode Preview가 자동으로 만들어졌는데요 더 자세히 살펴보죠 ImmersiveView.swift의 하단을 살펴보면 Xcode에게 미리보기를 보여달라고 말하는 코드가 있습니다 #Preview로 시작하는 코드 블록인데요 기본적으로 미리보기는 기본 씬 바운드에 맞게 잘리는데요 콘텐츠가 이 바운드 외부로 로딩되는 뷰가 나타나면 콘텐츠는 보이지 않게 됩니다 이 바운드를 넘어가는 몰입형 콘텐츠 미리보기를 지원하기 위해 .previewLayout(.sizeThatFits)로 준비되는 뷰를 수정하세요 바로 해볼게요 ImmersiveView의 미리보기에 .previewLayout(.sizeThatFits)를 추가하면 미리보기가 업데이트되어 몰입형 콘텐츠가 보일 겁니다

마지막으로 앱에서 Immersive Space를 열어보죠 iOS에서 멀티씬 SwiftUI 앱으로 작업한 적이 있다면 이미 SwiftUI 코드에서 추가 씬들이 어떻게 열리는지 보셨을 겁니다 첫 단계는 뷰의 SwiftUI 환경에서 클로저를 캡처하는 건데요 이건 추후 버튼 누르기와 같은 이벤트에 응답하여 호출될 겁니다 Immersive Space를 나타내는 건 새 플랫폼에서의 SwiftUI에서와 동일하게 작동합니다 캡처된 클로저가 openImmersiveSpace라 불리고 비동기라면 여러분의 코드는 언제 Immersive Space가 나타날지 알게 됩니다 ContentView로 돌아가서 우리는 SwiftUI 환경에서 openImmersiveSpace 클로저를 캡처하고 이걸 호출하는 버튼을 추가할 수 있습니다

이제 우리 앱이 몰입형 콘텐츠를 나타내기 위해 필요한 변화는 모두 완료했는데요 시뮬레이터에서 콘텐츠를 경험할 수 있지만 몰입은 디바이스 자체에서 특히나 강렬합니다 한 번 확인해 보죠 새롭게 나타난 버튼을 눌러보면 ImmersiveSpace 콘텐츠로 구름이 나타납니다 우리 앞에 두 개의 구름이 보이죠 하나는 왼쪽 다른 하나는 오른쪽에요 Immersive Space는 앱의 초기 씬과 완전히 다르다는 걸 확인하세요 초기 씬을 주변으로 이동하면 ImmersiveSpace 내 콘텐츠는 고정 상태를 유지하는 게 보입니다 앱의 초기 볼륨을 원하는 곳으로 이동할 수 있기는 하나 ImmersiveSpace는 열렸을 때 고정 위치에 배치됩니다 Immersive Space 주변을 움직이지 않고 Immersive Space 내에서 스스로 움직여야 하죠 Immersive Space를 이용해 우리 머리 위에 구름을 보여주는 간단한 앱을 만들었는데요 우리의 앱이 이 구름과의 상호작용에 응답하기를 원한다면요? 간결성을 위해 구름 위를 탭하면 하늘 전체를 둥둥 떠다니게 된다고 생각해 보세요 이렇게 만들 수 있는 방법을 살펴 보죠 SwiftUI 뷰가 입력 이벤트에 응답하려면 뷰에 제스처를 첨부해야 합니다 이번 예시는 간단한 텍스트 뷰인데요 TapGesture를 뷰에 첨부함으로써 사람이 뷰를 탭했을 때 응답할 수 있게 됩니다 제스처가 뷰에 첨부된 경우 제스처가 인식됐을 때 호출될 클로저가 주어지죠 RealityView는 또 다른 SwiftUI 뷰이기 때문에 동일한 방식으로 제스처에 응답할 겁니다 그러나 RealityView는 다양한 엔티티와 함께 RealityKit 콘텐츠를 포함합니다 가령 우리의 앱은 우리의 구름 모델을 포함하는 RealityView 뷰를 보여주는 ImmersiveSpace를 열죠 사람이 구름 중 하나를 탭하면 SwiftUI는 RealityView에서 TapGesture를 호출합니다 하지만 어떤 구름이 탭의 타겟임을 알 수 있죠? 여기서 엔티티 타겟팅이 역할을 하는 겁니다 targetedToAnyEntity 제어자는 RealityView에 첨부된 제스처에서 작동하여 제스처가 타겟팅한 정확한 엔티티를 알아냅니다 이용 가능한 엔티티 타겟팅 방법은 또 있는데요 특정 엔티티를 타겟팅하거나 쿼리에 맞는 모든 엔티티를 타겟팅할 수 있습니다 더 알아보시려면 developer.apple.com에 있는 개발자 문서를 읽어 보세요 onEnded와 같이 제스처의 핸들러에 보내진 값은 그 사람이 RealityView 내에 있는 엔티티와 상호작용했다는 사실을 나타내는 엔티티 프로퍼티를 가집니다 주어진 RealityKit 엔티티에서 엔티티 타겟팅이 작동하려면 엔티티에는 CollisionComponent와 InputTargetComponent 모두 있어야 합니다 RealityKit 엔티티가 이 구성요소를 갖출 것을 요구함으로써 RealityView 콘텐츠의 선택 부분과만 상호작용하는 것으로 제한할 수가 있습니다 이 구성요소들은 Reality Composer Pro에 있는 엔티티에 추가할 수 있고 아니면 앱 프로그램 상에 추가할 수도 있습니다 엔티티 타겟팅 방식을 살펴보았으니 사람이 구름을 탭한 순간을 감지하기 위해 사용해 보죠 이 상호작용이 일어나면 우리는 RealityKit 애니메이션을 시작할 겁니다 Reality Composer Pro에서 우리가 필요한 구성요소를 추가하는 것으로 시작해 보죠 RealityKit 콘텐츠 패키지에서 커맨드 클릭을 사용하여 뷰 계층에서 두 구름을 한번에 선택할 수 있습니다 그 다음 Inspector 패널 하단에 있는 Add Component 버튼을 클릭하고 Collision을 선택합니다

Inspector 패널에서 구름에 CollisionComponent가 추가된 걸 볼 수 있습니다 Reality Composer Pro는 자동으로 적절한 콜리전 모양을 선택함으로써 해당 모델에 대한 CollisionComponent를 만듭니다 필요할 경우 콜리전 모양을 바꿀 수도 있고요 InputTargetComponent에 대해서도 동일한 작업을 해볼게요 다시 Add Component 버튼을 클릭하고 이번에는 Input Target을 선택하겠습니다

좋습니다! File > Save All을 선택해 변경 사항을 저장하세요 구름이 하늘을 가로질러 움직이게 하기 위해서는 구름이 탭됐을 때 호출될 제스처 핸들러에 RealityKit 애니메이션을 사용할 겁니다 먼저 구름 변형의 현재 값을 변형 가능한 값으로 캡처하고 번역에 대한 오프셋을 추가해 앞과 오른쪽으로 100cm 이동시킨 다음 cloud 엔티티에서 .move를 호출하여 RealityKit 변형 애니메이션을 적용합니다 앱을 종료하기 위해 Xcode로 돌아가 보죠 ImmersiveView는 몰입형 콘텐츠가 있는 RealityView를 나타내는 소스 파일입니다 해당 코드를 RealityView에 대한 TapGesture에 추가하고 이에 대해 엔티티 타겟팅을 이용해 봅시다 탭이 감지되면 변형 애니메이션이 일어납니다 시뮬레이터에서 실행시켜 작동 모습을 확인해 보죠! 아까와 같이 구름이 있는 ImmersiveSpace를 열기 위해 버튼을 탭하세요 이제는 구름을 탭하면 하늘 전체를 부드럽게 떠다니죠 엔티티 타겟팅은 SwiftUI 상호작용과 RealityKit 콘텐츠를 연결하는 접착제와 같습니다 예시에서 우리는 탭에 대한 응답으로 단순한 애니메이션만 발생시켰죠 더 복잡한 앱에서는 엔티티 타겟팅을 이용해 추가 뷰 나타내기나 오디오 재생하기 애니메이션 시작하기와 같이 보다 정교한 동작들을 트리거할 수 있습니다 오늘의 주요 토픽을 요약해 정리해 보죠 Xcode의 새 프로젝트 어시스턴트를 사용해 첫 몰입형 앱을 만드는 방법으로 시작했죠 그다음 새 플랫폼을 위한 시뮬레이터를 소개하고 Xcode Previews를 통해 앱 콘텐츠에서 작업이 얼마나 간편한지를 보여드렸습니다 Reality Composer Pro를 소개하고 이걸 통해 RealityKit 콘텐츠를 얼마나 손쉽게 준비하고 미리볼 수 있는지 봤고요 마지막으로 ImmersiveSpace을 여는 방법과 엔티티 타겟팅을 이용하여 프로그램 상 몰입형 콘텐츠를 가능케 하고 상호작용할 수 있는 방법을 보여드렸습니다 이 프레젠테이션을 즐기셨길 바라고 새로운 SwiftUI와 RealityKit API는 물론 Reality Composer Pro의 더 진보한 사용 사례에 관한 더 깊이 있는 세션을 탐색해 보시길 권하는 바입니다 시청해 주셔서 감사합니다! ♪