visionOS에서 MV 비디오 재생하기

안녕하세요, Eric입니다 미디어 경험 소프트웨어 엔지니어죠 이 세션에서는 새로 출시된 멀티뷰 아키텍처를 사용해 앱에서 비디오를 동시 시청하는 방법을 살펴보겠습니다

visionOS의 몰입감 넘치는 미디어 시청 경험이 무엇으로 이뤄지는지 알아보겠습니다 몰입형 환경을 뒷받침해 주는 공간 음향, 3D 비디오 대형 화면 같은 것들은 시스템에서 사용 가능한 놀라운 경험의 일부일 뿐이죠

이런 기능들은 모두 계속 향상되는 강력한 프레임워크 덕분에 가능합니다 AVFoundation은 2D와 3D 콘텐츠를 비롯해 동영상을 재생하는 모든 작업을 처리합니다 visionOS에서 AVFoundation은 RealityKit과 상호작용해 렌더링하고 고품질의 비디오 및 공간 음향과 상호작용합니다 AVKit은 AVFoundation과 RealityKit, UI 프레임워크와 플랫폼별 기능을 활용해 플랫폼에 맞게 조정된 재생 경험을 창출합니다 AVKit과 특히 AVPlayerViewController는 친숙한 사용자 인터페이스를 제공하고 다른 많은 시스템 기능과 통합하며 비디오 시청 기능을 계속 향상합니다 visionOS에서 AVPlayerViewController를 사용하면 많은 독특한 기능을 제공하는데 그 중 하나가 멀티뷰입니다 먼저 멀티뷰를 소개하고 visionOS에서 동시 시청을 위해 여러 개의 비디오 화면을 제시하는 방법을 보여드리겠습니다

그다음, 멀티뷰의 핵심 개념과 이를 활용해 멋진 멀티뷰 경험을 제작하는 방법을 설명하겠습니다

좋아하는 스트리머 몇 사람을 한 번에 시청하고 싶거나 동시에 보고 싶은 스포츠 경기 두 개가 있다고 상상해 보세요 아마도 시청하는 콘텐츠에는 사용 가능한 카메라 각도가 여러 개 있고 그 향상된 원근법으로 시청하고 싶겠죠

이런 사용 사례의 경우 AVKit이 멀티뷰를 제공하는데 멀티뷰는 애플리케이션에 맞춰 맞춤화할 수도 있는 시스템 통합 시청 경험입니다 멀티뷰의 잠재력을 보여드리겠습니다

여기서 저는 큰 화면으로 콘텐츠를 시청하고 있는데 AVPlayerViewController로 쉽게 만들 수 있는 것이죠 왼쪽 상단에 있는 새로운 멀티뷰 버튼을 보세요 이 버튼을 보고 다른 관련 콘텐츠가 있다는 걸 알 수 있죠 멀티뷰 버튼을 탭하면 앱에서 제공하는 콘텐츠 브라우저가 나타나고 여기에서 스크롤해 콘텐츠를 확인할 수 있습니다

흥미로워 보이죠

이제 멀티뷰로 나란히 시청 중입니다 두 화면이 주변 환경에 조명 효과를 드리우는 방식을 주목하세요 단일 재생 위에 생성되는 멋진 효과죠 원래 비디오에 주 포커스가 있어서 화면이 눈에 약간 더 잘 띄고 오디오가 재생됩니다 콘텐츠 브라우저를 닫으면 미디어 재생 제어기가 나타나고 주 포커스가 있는 비디오가 이 제어기에 바로 반응합니다 일시 정지하거나 이동하고 음량 같은 다른 설정을 조절할 수 있죠 다른 비디오를 탭해서 주 포커스를 옮기면 그 비디오의 오디오가 재생됩니다

일부 설정은 그룹에 적용되는데 예를 들어 포커스를 이동해도 음량은 동일합니다 재생 속도 같은 기타 설정은 설정된 비디오에만 영향을 줍니다

콘텐츠 추가도 가능합니다 재생 제어기의 멀티뷰 버튼을 탭해서 콘텐츠 브라우저를 다시 불러옵니다 비디오를 추가할 때 진행 상황과 브라우저가 선택된 콘텐츠를 보여주는 방식을 주목하세요 멀티뷰에서는 편안함과 가시성을 최대화하는 레이아웃 템플릿으로 한 번에 비디오 화면을 5개까지 보여줄 수 있습니다

비디오를 제거하려면 화면의 닫기 버튼을 탭하거나 브라우저에서 제거하면 됩니다 레이아웃을 변경하고 싶은 경우 드래그하면 비디오가 레이아웃 템플릿 내에서 반응하여 배치할 위치를 나타냅니다 이 비디오를 중앙으로 가져오겠습니다 이 모든 걸 종합하면 비디오를 추가, 제거, 재배열, 위치 조정 크기까지 조절하여 원하는 시청 경험을 얻을 수 있습니다

한 개의 비디오로 쉽게 돌아갈 수도 있죠 여기서 제가 설명한 모든 동작과 조명 드리우기, 재생 제어기 크기 조절 등의 기능은 계속 같은 친숙한 방식으로 작동합니다 멀티뷰는 경험에 많이 추가되었습니다 직관적이고 친숙한 모습을 유지하면서요 멀티뷰는 맞춤화할 수 있는 기능입니다 매력적이고 직관적인 멀티뷰 경험을 디자인하는 방법을 살펴보겠습니다

먼저, 멀티뷰와 관련된 몇 가지 주요 개념을 설명드리겠습니다 이 개념을 사용해 멀티뷰를 지원하는 앱의 요소를 코딩할 겁니다

마지막으로, 멀티뷰를 앱에 추가할 때의 모범 절차를 설명하겠습니다

멀티뷰에 표시되는 모든 비디오 화면은 각각 AVPlayerViewController로 구현된 것입니다 플레이어 뷰 제어기가 멀티뷰에 추가되면 화면이 편안한 시청과 인체 공학을 최대한 적용하는 방식으로 함께 배치됩니다

AVPlayerViewController를 살펴보겠습니다 새로운 상대인 AVExperienceController가 있는데 이 컨트롤러는 상위 플레이어 뷰 제어기가 전환할 수 있는 비디오 재생 경험 세트를 정의합니다 예시 경험은 내장 또는 확장되어 있는데 내장되면 비디오가 다른 앱 콘텐츠와 함께 나타나고 확장되면 여기 그림처럼 비디오 화면만 나타납니다 각 AVExperienceController는 허용되는 고유한 경험 세트를 명시할 수 있습니다 멀티뷰를 허용되는 경험으로 추가하면 멀티뷰 버튼이 해당하는 플레이어 뷰 제어기의 UI에 활성화됩니다 이 버튼을 탭하면 경험 컨트롤러가 멀티뷰 경험으로 전환됩니다 이 지점에서 콘텐츠 선택 브라우저가 나타나서 이 경험의 시작을 알려 줍니다

뷰는 맞춤화할 수 있습니다 콘텐츠 브라우저 뷰 제어기를 제공해 사용 가능한 콘텐츠를 관리하고 해당 콘텐츠와 상호작용하는 UI를 제공합니다 이 뷰 제어기를 AVMultiViewManager에 연결합니다 AVMultiViewManager는 많은 세부 사항을 처리하는데 예를 들면 필요할 때 콘텐츠 브라우저를 사용할 수 있게 합니다 또한 어떤 경험 컨트롤러가 멀티뷰로 전환되었는지 추적하고 비디오 화면의 레이아웃을 유지 관리합니다 기본적으로 브라우저 뷰 제어기와 AVMultiViewManager가 협력하여 진행 중인 멀티뷰 경험에서 콘텐츠를 추가하거나 제거합니다 예를 들어 사용자가 브라우저 UI를 통해 추가 콘텐츠를 선택하면 브라우저 뷰 제어기에 신호를 보내 그 콘텐츠를 재생할 다른 AVPlayerViewController를 생성합니다 해당 경험 컨트롤러를 사용해 진행 중인 멀티뷰 경험으로 전환됩니다 AVMultiViewManager는 멀티뷰로 전환되는 경험 컨트롤러 세트를 추적하고 그에 따라 비디오 화면 레이아웃을 업데이트합니다 이것을 어떻게 코딩하는지 보겠습니다 먼저, 맞춤형 브라우저 뷰 제어기를 그 핵심 기능과 함께 정의합니다 핵심 기능을 통해 멀티뷰에 사용 가능한 콘텐츠를 관리하고 그 콘텐츠를 선택하기 위한 UI를 제공합니다 이 컨트롤러를 AVMultiViewManager에 배치합니다 초기에 이걸 설정하세요, 그러면 멀티뷰 관리자가 필요할 때마다 브라우저 UI를 활성화할 수 있습니다

사용자가 브라우저에서 콘텐츠를 선택할 때 콘텐츠가 멀티뷰에 추가되는 것은 간단합니다 새로운 AVPlayerViewController를 생성하고 선택된 콘텐츠를 재생하도록 설정합니다 해당 AVExperienceController에 접근해 멀티뷰를 허용되는 경험에 추가합니다 AVPlayerViewController가 생성되었지만 아직 해당 뷰가 뷰 계층에는 없다는 걸 유의하세요 지금은 해당 경험 컨트롤러가 플랫폼의 기본 경험에 있습니다 그것을 멀티뷰로 가져오려면 경험 컨트롤러를 전환합니다 멀티뷰 관리자는 여기서부터 담당합니다

사용자가 브라우저에서 콘텐츠를 제거할 때도 비슷한 패턴을 따릅니다 이 경우 해당 콘텐츠의 경험 컨트롤러가 이미 멀티뷰에 있기 때문에 콘텐츠를 허용되는 다른 경험으로 전환합니다 여기서는 내장된 방법이 사용되었습니다 해당하는 AVPlayerViewController가 이전에 뷰 계층에 설치되지 않았다면 멀티뷰 관리자가 콘텐츠를 사라지게 할 겁니다

콘텐츠 브라우저는 멀티뷰 콘텐츠를 추가하거나 제거하는 주된 방법이지만 이 방법만 있는 건 아닙니다 앱이 콘텐츠 브라우저 외부에서 시작된 이벤트를 처리하는데 이때 AVExperienceController의 대리자를 이용합니다 대리자를 이용해 전환 변경에 반응합니다 어떤 전환 이벤트가 발생하든 대리자가 이벤트를 수신하며 이벤트에 각 전환의 진행 상태에 관한 컨텍스트가 포함됩니다 예를 들어 단일 화면의 멀티뷰 버튼인 AVPlayerViewController를 탭하면 해당 ExperienceController가 멀티뷰로 전환되어 앱이 멀티뷰 시작에 반응할 수 있도록 대리자에게 알려 줍니다

또 다른 예로는 사용자가 비디오 화면 중 하나를 탭해 멀티뷰 콘텐츠를 제거하거나 재생 제어기를 통해 멀티뷰를 완전히 종료하는 방법을 들 수 있습니다 대리자는 이런 전환 이벤트를 수신해 앱 상태와 멀티뷰 관리자가 하는 일 사이에 일관성을 유지할 수 있게 합니다

대리자는 전환이 시작되기 전에 추가 작업을 완료하는 옵션을 사용할 수도 있습니다 앱이 상태에 대비하고 관련 UI를 표시하거나 숨기고 매끄러운 전환을 준비하는 기회입니다

멀티뷰 경험을 구현하는 방법에 대한 자세한 내용은 설명서를 참조하세요 앱에서 멀티뷰를 사용할 때의 몇 가지 모범 절차를 살펴보겠습니다 멀티뷰를 기능으로 사용하려면 신중하게 생각해야 합니다 여러 화면을 동시에 보는 건 많이 진행되고 있는데 그걸 기대하지 않은 사람에게는 벅찰 수 있습니다 매끄러운 진행 지원이 유쾌한 멀티뷰 경험의 비결입니다 특히 사용자가 한 번에 시청하는 비디오 개수를 결정할 수 있게 하세요 친숙한 하나의 비디오 시청 경험부터 시작하세요 한 단계 더 나아가고자 분들에게는 AVPlayerViewController로 제공되는 표준 버튼을 사용한 멀티뷰를 제안하세요 이 사용자는 멀티뷰 옵션을 살펴본 후에도 여전히 단일 화면을 선호할 수 있습니다 이런 시나리오에서는 똑같이 좋은 경험을 제공하세요

콘텐츠에 관한 한 사용 사례를 고려하세요 멀티뷰는 콘텐츠 중 하나에 주안점을 두고 동시에 여러 콘텐츠를 시청하는 데 적합합니다 TV 프로그램의 에피소드 시리즈 시청에는 적합하지 않습니다 이 경우에는 AVQueuePlayer를 고려해 보세요 일반적으로 멀티뷰에 대한 좋은 사용 사례가 없으면 올바른 경험을 제공하기 위해 다른 AVKit 옵션 탐색을 고려해 보세요

이제 콘텐츠 브라우징에 관해 말씀드리겠습니다 콘텐츠 브라우저는 콘텐츠를 추가하거나 삭제하는 주요 수단입니다 매력적일 수 있지만 직관적이어야 하죠 사람들은 기대하는 것을 알면 원하는 콘텐츠를 시청할 수 있게 됩니다

직관적인 콘텐츠 브라우저에서 장려하는 건 정보를 명확히 전달하고 선택 사항에 적극적으로 반응해서 여러 비디오 화면과 상호작용하는 것입니다 콘텐츠의 제목과 썸네일 미리보기로 각 콘텐츠를 간단명료하게 설명하세요 브라우저 영역은 비디오 화면에 비해 제한적이니까 장식을 최소화하고 식별을 쉽게 해 주는 요소에 중점을 두세요

경험의 나머지 부분에 맞게 전반적인 브라우저 스타일을 정합니다 예를 들면 재생되는 콘텐츠와 일치하는 양상에 맞는 썸네일을 목표로 하세요 적절한 경우 강조 색상도 일치하게 하세요 지나친 강조나 선택한 색상이 전반적인 경험을 방해할 수 있습니다

현재 선택 항목을 눈에 잘 띄게 강조하세요 사용 가능한 콘텐츠의 일부만 볼 수 있으니까 브라우저에서 어떤 콘텐츠가 화면에 있는지 식별하도록 도와주세요 하지만 브라우저에서 콘텐츠를 너무 적극적으로 재배열하거나 한정된 공간을 빽빽하게 채우면 탐색하고 선택하는 능력을 저해할 수 있음을 명심하세요 앱에서 몰입감 넘치는 미디어 경험을 사용하는 경우 AVKit이 제공하는 것을 확인해 보시기를 권장합니다 AVKit은 풍부한 미디어 재생 기능을 갖추고 있고 계속 향상되고 있습니다 멀티뷰는 AVKit을 활용해서 애플리케이션에 대한 향상된 경험을 할 수 있게 하고 완전히 새로운 가능성을 열 수 있는 훌륭한 예입니다 멀티뷰는 강력합니다 AVKit의 다른 측면과 마찬가지로 멀티뷰는 매끄러운 재생을 위한 최적화와 플랫폼 전체에서 친숙하고 직관적인 시청 경험을 제공하겠다는 약속과 애플리케이션의 요구에 맞추기 위한 맞춤화를 조합한 것입니다 여러분이 멀티뷰로 만드실 작품이 정말 기대됩니다 시청해 주셔서 감사합니다