스트리밍은 대부분의 브라우저와
Developer 앱에서 사용할 수 있습니다.
-
맞춤형 환경에서 더욱 몰입감 넘치는 미디어 시청 경험 만들기
Docking Region, Reverb, Virtual Environment Probe 등 Reality Composer Pro 구성요소를 사용하여 미디어 시청 경험을 확장하세요. Reflections, Tint Surroundings 효과, SharePlay 및 Immersive Environment Picker를 통해 몰입감을 더욱 향상시키는 방법을 확인할 수 있습니다.
챕터
- 0:00 - Introduction
- 1:48 - Immersive playback
- 3:33 - Custom Docking Region
- 7:56 - Media reflections
- 10:14 - Grounding the experience
- 14:34 - Immersive environment picker
- 15:33 - SharePlay
리소스
- Building an immersive media viewing experience
- Destination Video
- Enabling video reflections in an immersive environment
- Forum: Media Technologies
관련 비디오
WWDC24
-
다운로드
안녕하세요, Apple의 visionOS Program 팀의 Jonathan입니다 오늘은 영화관 수준의 시청 환경을 Apple Vision Pro의 미디어 시청 경험에 도입하는 방법을 다루겠습니다
맞춤형 환경에 아름다운 미디어 반사를 전송하면 사람들이 영화관에서 조명이 꺼진 후 경험하는 것과 같은 몰입감 넘치는 경험을 생성할 수 있습니다 지금 제가 보여드리고 있는 Destination Video 샘플의 새 Studio 환경처럼요 조명이 어두워진 후 패스스루의 색조를 지정하여 시각적 효과를 강화하면 시청자의 손이 환경의 조명과 어울리도록 하고 Reverb 프리셋을 설정하여 주변 환경에 오디오를 적용할 수 있죠 미디어와 환경 간의 매끄러운 전환 효과가 보이시나요? 또한 다양한 모습과 느낌의 장면을 제공하기 위해 여러 변형을 제공할 수도 있습니다 시스템 조명 기능과 그림자 통합을 통해 맞춤형 환경에서 전체 시청 경험의 토대를 마련하면서요
이 세션에서는 몰입감 넘치는 재생 환경을 제공하는 미디어 시청 경험을 구축하는 데 필요한 기초 내용을 다루겠습니다 우선 Reality Composer Pro의 새 맞춤형 Docking 구성요소로 맞춤형 환경에서 동영상을 재생하기 위한 최적의 위치를 정의하는 방법을 살펴보겠습니다 그다음 맞춤형 환경에서 재생되는 동영상의 미디어 반사를 다루고 시각 효과와 음향을 사용하여 맞춤형 환경의 전반적인 경험을 고정하는 방법을 설명할게요 그 후 몰입형 환경 선택기로 사용자가 맞춤형 환경을 쉽게 찾을 수 있도록 설정하는 방법을 다루겠습니다 마지막으로 SharePlay가 활성화된 앱에서 환경이 동기화되는 방식과 여러 참여자가 같은 몰입감 넘치는 시청 경험을 공유하도록 하는 방법을 설명할게요 우선 공간과 미디어 시청 경험의 기본 요소를 설명하겠습니다
미디어를 시청하는 동안 윈도우의 크기 및 위치를 조정할 수 있다는 점도 훌륭하지만 Apple Vision Pro의 몰입감 관련 기능은 더 많은 장점을 제공하죠 동영상 시청 경험의 몰입감을 한층 더 개선하려면 immersiveSpace 장면 유형과 AVKit의 기능을 활용하세요 immersiveSpace 장면 유형을 사용하면 미디어 앱에서 시청자에게 맞춤형 점진적 몰입 효과를 제공할 수 있습니다 즉, 시청자는 몰입 효과를 원하는 수준으로 설정할 수 있죠 Apple Vision Pro의 Digital Crown으로 몰입 효과를 없애거나 가장 큰 수준으로 올릴 수 있습니다 immersiveSpace 장면 유형은 다른 이점도 제공합니다 이 세션에서 나중에 다룰 맞춤 색조 색상이나 패스스루 밝기와 같은 기능 말이죠
몰입감 넘치는 공간을 맞춤화하는 방법을 자세히 알아보려면 ‘볼륨 및 몰입형 공간 자세히 알아보기’ 세션을 확인하세요
visionOS를 위한 놀라운 미디어 시청 경험을 빌드할 때는 AVKit의 기능을 활용하는 것이 가장 좋습니다 AVPlayerViewController가 특히 유용하죠 이 기능은 시스템과 통합되어 동영상 재생 기능을 개선해 줍니다
AVPlayerViewController 사용 시 HLS 스트리밍이 지원되며 TV 및 음악과 같은 시스템 앱과 일치하는 친숙한 재생 환경을 간편하게 제공할 수 있습니다 간소화된 재생 컨트롤 덕분에 시청자는 미디어에 집중할 수 있죠 visionOS에서 AVPlayerViewController를 전체 화면으로 표시하면 시스템 도킹 동작에 관여하는 등 여러 이점을 제공합니다 도킹을 활성화하면 동영상 화면이 특정 위치에 고정되므로 몰입형 공간 내 전체 화면 경험이 개선됩니다 기본적으로 도킹 위치는 시스템에서 결정되지만 맞춤 도킹 영역을 지정하여 도킹 위치를 맞춤화할 수 있습니다 AVKit 및 ImmersiveSpace Foundation으로 빌드된 Destination Video 샘플에서 맞춤 도킹 영역의 사용 예를 볼 수 있죠 Reality Composer Pro에서 Docking Region 구성요소로 맞춤 환경 내 최적의 위치에 동영상을 배치하는 방법을 보여드릴게요 Reality Composer Pro를 열었습니다 Reality Composer Pro에서는 3D 콘텐츠를 준비하고 경험을 시각화할 수 있습니다 저는 Reality Composer Pro로 새 프로젝트에 Video Dock 프리셋을 추가하려고 합니다 왼쪽에 장면 내비게이터가 있습니다 장면 내비게이터의 하단에는 더하기 기호가 있는데 이것이 삽입 버튼입니다 삽입 버튼을 선택한 다음 Environment 메뉴에서 Video Dock 프리셋을 선택하겠습니다
뷰포트에 Video Dock 프리셋의 일부가 표시되죠 뷰포트를 통해 3D 장면을 시각화하고 탐색하고 미리 볼 수 있습니다 Video Dock 프리셋 전체가 더 잘 보이도록 Viewport 메뉴의 Frame Scene을 사용하겠습니다 장면 내비게이터로 돌아가서 Player 엔티티가 보이도록 Video Dock 엔티티를 확장할게요
Player 엔티티를 선택하면 Inspector의 우측에 사용 가능한 새 속성이 나타납니다 Inspector에서 Position이나 Rotation 등을 통해 Player 엔티티의 속성을 간단하게 편집할 수 있습니다
Player 엔티티의 Inspector 하단에는 Docking Region 구성요소도 있죠 이를 통해 Docking Region을 맞춤화할 수 있습니다
Docking Region을 맞춤화하기 전에 Viewport 메뉴에서 Reset Camera를 선택하겠습니다
이렇게 하면 원점을 볼 수 있도록 카메라가 이동합니다
immersiveSpace는 일종의 장면이므로 자체 좌표 시스템을 암시적으로 정의합니다 공간에 배치되는 모든 항목은 공간의 원점을 기준으로 배치되죠 공간의 원점은 시청자 밑에 위치합니다 공간이 처음 열렸을 때 시청자의 발 근처에 위치하게 되죠 뷰포트 중앙에 Docking Region이 있습니다 Docking Region의 위치에 따라 동영상 플레이어의 위치가 달라지므로
원점을 기준으로 Docking Region의 위치를 지정해야 합니다
Inspector에 Docking Region 구성요소의 너비 속성이 있습니다 Docking Region의 너비는 2:4:1의 화면 비율을 갖는 최대 크기의 미디어 재생용 바운딩 영역을 정의하죠 최대 너비보다 큰 동영상은 바운딩 영역에 맞게 크기가 조정됩니다 너비 속성을 변경하면 Docking Region의 크기를 맞춤화할 수 있죠 여기서 보실 수 있듯이 Docking Region의 너비에 따라 높이가 달라집니다
이제 Docking Region의 너비와 높이가 커졌으므로 Player 엔티티의 위치를 높여야 합니다 위치를 높이려면 Transform 아래의 Position을 사용하면 됩니다 플레이어는 지면보다 약간 위에 두는 것이 좋습니다 영화관의 화면처럼요
이는 프로젝트의 시작에 불과합니다 이를 완성하기 위한 단계를 더 알아보죠 Destination Video 샘플에는 Reality Composer Pro 프로젝트를 포함하는 Studio라는 폴더가 있습니다 프로젝트 설정을 보기 위해 Studio 프로젝트를 연 다음 프로젝트를 미리 보기 위해 Viewport 메뉴에서 Reset Camera를 선택합니다
시청자와 미디어 재생 사이에 최소한의 물체가 위치하도록 Studio의 Docking Region이 배치된 것을 볼 수 있습니다 시청자에게 명확한 시야를 제공하기 위해서죠
Studio에서 공간 내 Docking Region의 위치는 대칭성과 건축학적 요소를 기반으로 지정되었습니다 이 배치 덕분에 공간의 미적 요소를 살리면서도 미디어 재생이 공간과 어울리며 더욱 몰입감 넘치는 경험을 제공할 수 있습니다
맞춤형 환경이 Docking Region을 수용할 수 있도록 설계되었는지 확인하세요 시청자가 장시간 시청할 때 피로나 불편함을 느끼지 않도록 편안한 시야각을 제공하는 것이 좋습니다 Reality Composer Pro의 미리보기 기능도 유용하지만 반드시 Apple Vision Pro에서 환경과 도킹 위치를 확인하세요 비율과 레이아웃은 모니터와 Apple Vision Pro에서 다르게 인식될 수 있으므로 기기에서 직접 테스트하는 것이 좋습니다 이제 최적의 위치에 Docking Region을 배치했으니 동영상 재생이 맞춤형 환경에 어떻게 반사되는지 살펴보겠습니다
Destination Video에서 Studio 표면에 반사되는 미디어를 통해 미디어가 재생되는 위치를 파악하고 이 공간에 고정할 수 있습니다 미디어 반사가 맞춤형 환경과 어울리도록 하면 시청자가 가상 공간에서 동영상이 재생되는 위치를 이해하는 데 도움이 됩니다
Reality Composer Pro의 ShaderGraph 노드로는 정반사, 난반사 등 2가지 미디어 반사를 만들 수 있습니다 이러한 반사는 미디어 콘텐츠와 가상 공간 간에 상호작용을 형성하여 사실감과 몰입감을 높입니다 이러한 반사를 뎁스 큐로 사용하여 시청자가 맞춤형 환경에서 화면의 위치를 파악할 수 있도록 하세요 이렇게 하면 시청자가 동영상 재생에 집중할 수 있습니다 정반사는 동영상 콘텐츠의 직접적인 반사를 제공하며 금속, 거울, 물처럼 광택이 많이 나는 표면에 유용합니다
미디어의 정반사를 설정하려면 Docking Region 구성요소가 있는 엔티티를 장면 안에 넣고 Reflection_Specular 노드가 연결된 표면에 머티리얼을 두면 되죠 RealityKit에서 Docking Region의 위치와 지면의 텍스처 좌표로 반사를 계산하고 반사된 미디어를 표면에 렌더링하게 됩니다 난반사는 동영상 콘텐츠의 부드러운 감쇠를 제공하므로
나무 바닥, 콘크리트 등 거칠고 유기적인 표면에 유용합니다 Video Dock 프리셋에 제공된 구현은 예시에 불과합니다 Docking Region을 이동하거나 엔티티를 고정하거나 고유한 메시를 사용하면 Reflection_Diffuse를 위한 텍스처 좌표를 다시 계산하고 해당 데이터를 Reality Composer Pro로 가져오세요
Studio에서는 난반사를 사용하고 있습니다 완만한 감쇠가 바닥 머티리얼의 속성에 더 어울리기 때문입니다 정반사는 시연 목적으로만 Studio에 포함되어 있습니다 visionOS 시스템 환경에서 시청자를 방해하지 않고 미디어와 환경을 보완하는 균형 잡힌 방식으로 반사를 통합하는 예시를 확인해 보세요 배울 수 있는 내용이 많으므로 Destination Video 샘플과 보조 자료를 확인해 보세요 정반사를 활성화하고 난반사를 구성하는 방법을 더 자세히 다루고 있습니다 다음으로는 시각 효과와 음향을 통해 맞춤형 환경의 전반적인 경험을 고정하는 방법을 설명할게요 여기에서 다룰 새 기능은 Virtual Environment Probe 밝기 및 색조 그리고 Reverb입니다 Virtual Environment Probe부터 설명하겠습니다
Virtual Environment Probe는 색상 변화와 조명 강도의 관점에서 위치를 설명합니다 시스템은 이 정보를 사용하여 물리 기반 렌더링 머티리얼을 자동으로 음영 처리하고 빛이 물체에서 반사되는 방식에 가깝게 근사화할 수 있습니다 이 프로브를 사용하여 ImmersiveSpace의 물체에 환경 조명을 제공할 수 있으며 Progressive 몰입 스타일로 환경을 만드는 경우 이 가상 환경 조명은 ImmersiveSpace 외부의 물체에 적용되는 현실 환경의 조명을 점진적으로 대체합니다 예를 들어, 이 금속성 구체는 Studio와 실제 환경을 혼합하여 반사하고 있습니다 이 사실적 물체는 Progressive 몰입에서 자연스럽게 구현되죠
또한 Destination Video의 밝은 Studio와 어두운 Studio처럼 장면에서 두 개의 변형을 지원하는 경우 미리 생성된 두 개의 EnvironmentResource와 이들 사이에 blendFactor가 설정된 Virtual Environment Probe를 구성할 수 있죠 이 경우 앱 코드는 어두운 리소스와 밝은 리소스 간의 원활한 전환을 유도하고 시스템은 몰입감 블렌딩을 유도합니다 전환은 짧게 유지하는 것이 좋습니다 visionOS 시스템 환경에서는 어두운 조명에서 밝은 조명으로 전환하는 데 1.5초가 소요됩니다 다음으로 밝기와 색조를 다루겠습니다 맞춤형 환경의 디자인에 따라 영화관의 조명이 꺼질 때처럼 시청자의 손에 비치는 조명이 환경의 조명과 잘 어우러지기를 원할 수 있습니다 이제 visionOS에서 색조와 밝기를 맞춤화하여 시청자의 환경과 미디어 재생 사이의 경계를 부드럽게 만들고 시청자가 자신이 경험의 일부가 된 것처럼 보이도록 할 수 있죠
Studio의 어두운 버전에 맞춰 제 손의 밝기가 달라지죠 이렇게 하면 맞춤형 환경에 더 몰입하고 시청 경험에 집중할 수 있습니다
Destination Video의 immersiveContentBrightness 및 surroundingsEffect 코드 샘플을 확인하여 이러한 기능을 미디어 앱에서 사용하는 방법을 알아보세요 은은한 색조 색상을 사용하여 시청자를 방해하지 않고 몰입감을 강화하세요 이러한 개선된 시각 효과만으로도 멋있는 환경을 구축할 수 있지만 Reality Composer Pro의 새 Reverb 구성요소도 사용하면 직접 제작한 공간 음향과 시스템 음향이 맞춤형 환경과 잘 어울리도록 하여 몰입감을 더 높일 수 있습니다
현실에서 소리는 벽과 가구에서 반사되어 사람의 귀에 도달하기 전에 울려 퍼집니다 기본적으로 visionOS는 실제 환경의 음향을 시뮬레이션하여 공간 음향의 소스에서 반향을 일으킵니다
가상 환경에서도 반향을 시뮬레이션할 수 있습니다 Mount Hood 시스템 환경을 확인해 보셨다면 밤중 개구리 울음소리를 들으셨을 것입니다 이러한 공간 음향에는 반향이 있어 야외 환경을 시뮬레이션하죠 이제 맞춤형 환경의 공간 및 시스템 음향에 반향을 적용할 수 있습니다 Reverb를 활성화하기 위해 Inspector의 Add Component 버튼을 사용하여 새 프로젝트에 Reverb 구성요소를 추가하겠습니다
그다음 Inspector에서 가장 적합한 Reverb 프리셋을 선택하면 되죠 프리셋은 고품질의 자연스러운 Reverb 설정으로 구성되었으므로 공명을 추가하며 현재 맞춤형 환경과 유사한 환경에서 들을 수 있는 공간 음향을 시뮬레이션합니다 맞춤형 오디오를 제공하지 않는 경우에도 맞춤형 환경에서는 Reverb 프리셋을 선택하는 것이 좋습니다 시스템에서 프리셋을 통해 UI, 버튼 등을 위한 시스템 음향을 공간화할 수 있기 때문이죠 시스템 음향은 런타임에 존재하는 공간 음향의 소스입니다
예를 들어, 약간의 반향이 적용된 최적의 듣기 경험을 추가하려는 경우 Medium Room (Treated) 프리셋을 사용하고 맞춤형 환경이 야외 공간인 경우 Outdoor 프리셋을 사용할 수 있습니다 큰 규모의 실내 환경인 경우 Very large room Reverb 프리셋을 사용하세요 Studio에서 사용한 프리셋이기도 합니다 반향을 구현하고 조정하는 방법을 자세히 알아보려면 ‘RealityKit 오디오로 공간 컴퓨팅 앱 강화하기’라는 RealityKit Audio 관련 세션을 확인하세요 지금까지 맞춤형 환경에서 미디어 재생의 몰입감을 개선하는 방법을 알아봤습니다 이제 몰입형 환경 선택기를 사용하여 visionOS 시스템 환경과 동일한 목록에 맞춤형 환경이 표시되도록 할 수 있습니다 자세히 살펴보겠습니다 이 몰입형 환경 선택기에는 Studio 환경을 위한 새로운 Destination Video 섹션이 있습니다
Studio를 선택하면 환경이 열리며 Docking Region에 미디어가 고정됩니다 이 목록에 맞춤형 환경도 추가할 수 있습니다 제목, 이미지와 같은 메타데이터를 사용하여 맞춤형 환경을 설명하여 선언하세요 그러면 시청자가 Dock에서 해당 환경을 발견할 수 있습니다
보기에서 .immersiveEnvironmentPicker 편집자를 사용하여 해당 보기의 동영상 플레이어에 몰입형 환경을 추가하세요 선택기에서 각 맞춤형 환경이 표시되는 방식을 선언할 수 있습니다 각 환경에 대해 제목과 이미지를 포함하세요 이렇게 하면 몰입형 공간이 선택되었을 때 열립니다
이제 SharePlay에 대해 설명해 드리겠습니다 이미 SharePlay로 미디어를 동기화하고 있는 경우 AVKit을 통해 환경 상태도 동기화할 수 있습니다 사용자는 몰입형 시청 경험을 더 많은 사람들과 공유할 수 있죠 사용 방법을 알아보겠습니다 이 코드 스니펫은 GroupSession을 사용하여 공유 가능한 콘텐츠를 기기 간에 동기화합니다 세션에서 미디어를 동기화하려면 이를 AVPlayer의 AVPlaybackCoordinator로 전달하세요 같은 세션에서 보기 환경을 동기화하려면 먼저 AVKit 및 GroupActivities를 모두 가져오고 해당 세션을 AVPlayerViewController의 AVGroupExperienceCoordinator로 전달합니다 그러면 활동의 참여자가 전체 화면으로 시청할 때 동일한 보기 환경을 공유할 수 있습니다
오늘은 재생 경험의 토대를 구축하기 위해 ImmersiveSpace 공간 유형과 AVKit를 사용하고 맞춤형 Docking Region과 미디어 반사로 몰입감을 강화하고 Virtual Environment Probe와 Reverb, 밝기, 색조로 경험을 개선하는 방법을 다루었습니다 이러한 기능을 사용하여 몰입감을 개선하면 시청자가 여러분의 공간에 실제로 있는 것처럼 느끼고 여러분이 제공하려고 했던 경험을 즐길 수 있습니다 시청자가 경험에 집중할 수 있도록 방해 요소를 제거하고 명확하고 편안한 시야각을 제공하는 것을 잊지 마세요 또한 몰입형 환경 선택기와 SharePlay를 시작하는 방법도 알려드렸습니다 이번 세션을 통해 미디어 경험의 몰입감을 개선하는 데 도움이 되는 기본 지식을 많이 배우셨기를 바랍니다 Destination Video 샘플과 다양한 세션을 통해 다른 내용도 자세히 살펴보세요 여러분이 구축한 맞춤형 환경에서 몰입감 넘치는 미디어 재생을 경험할 수 있기를 기대하겠습니다
-
-
15:14 - Add environments to the Immersive Environment Picker
WindowGroup { ContentView() .immersiveEnvironmentPicker { ForEach(viewModel.environmentItems) { item in Button(item.title, image: item.thumbnail) { Task { await openImmersiveSpace(id: item.id) } } } } }
-
15:47 - Synchronization of an environment state using SharePlay
import AVKit import GroupActivities for await session in MyActivity.sessions() { // join the session, activate the activity, etc. playerViewController .player? .playbackCoordinator .coordinateWithSession(session) playerViewController .groupExperienceCoordinator .coordinateWithSession(session) }
-
-
찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.
쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.