훌륭한 공간 재생 경험 만들기

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ 안녕하세요 저는 제러미입니다 미디어 경험 소프트웨어 엔지니어죠 이 세션에서는 비디오 재생을 위한 훌륭한 공간 경험을 만드는 방법을 다룹니다 훌륭한 경험은 플랫폼에 최적화되어 있으며 강력한 미디어 기능을 활용해 전체 시스템과 통합됩니다 우선 최소한의 앱으로 미디어 경험을 살펴보겠습니다 다음으로 고급 UI 기능을 다루며 비디오를 표시하는 다른 방법도 알아보겠습니다 마지막으로는 옵션들을 비교해 보겠습니다 iOS나 tvOS에서 미디어 API를 사용한 적 있다면 익숙한 내용일 겁니다 이 플랫폼은 같은 API를 기반으로 빌드되었고 특수 기능을 위해 API를 확장했습니다 AVFoundation은 무비 재생에 필요한 모든 작업을 처리합니다 스트리밍, 파싱, 디코딩 동기화 등이죠 AVKit는 AVFoundation과 UI 프레임워크를 기반으로 빌드해서 사용자화 재생 경험을 만들고 각 플랫폼에 적합한 경험을 제공합니다 이 플랫폼에서는 AVFoundation이 향상되어 새로운 미디어 포맷이 지원되므로 3D 비디오 같은 고유한 기능을 활용할 수 있습니다 이 포맷에 대한 자세한 내용은 해당 세션을 참고하세요 AVFoundation은 RealityKit를 사용해서 렌더링 성능과 품질을 향상했습니다 그래서 비디오가 주변 환경에 매끄럽게 합성되고 오디오도 주변 환경에 반응할 수 있게 되었습니다 AVKit의 AVPlayerViewController는 RealityKit의 강력함을 이용하고 플랫폼의 특수한 능력을 사용하기 위해 확장됐습니다 수준 높은 경험을 제공하려는 거죠 기대하는 모든 재생 컨트롤이 포함되어 있고 고유한 기능도 많이 있습니다 이를 앱에서 활용하려면 무엇이 필요할까요? 우선 Xcode 타깃은 이 플랫폼의 SDK로 빌드해야 하죠 iOS SDK로 빌드된 호환 가능한 iOS 앱으로는 iOS와 호환되는 경험을 할 수 있습니다 AVPlayerViewController를 사용하세요 iOS나 tvOS처럼요 마지막으로 뷰 컨트롤러를 표시하여 윈도우를 채웁니다 코드로 시연하겠습니다 먼저 AVFoundation과 AVKit를 가져옵니다 그다음 AVPlayerViewController를 생성하고 AVPlayer와 연결합니다 그다음 콘텐츠 URL로 새로운 플레이어 항목을 만들고 플레이어에 설정합니다 뷰 컨트롤러에서 플레이어를 설정한 뒤 항목을 추가하면 성능이 향상됩니다 미디어가 로딩되기 전에 플레이어가 어떻게 표시될지 알 수 있기 때문이죠 그리고 SwiftUI에서 사용하려면 UIViewControllerRepresentable로 코드를 래핑하세요 이것을 PlayerView라고 부르겠습니다 그다음 앱을 만들어서 이름을 MoviePlayingApp이라고 하겠습니다 방금 정의한 뷰 컨트롤러를 추가하여 윈도우를 채우게 하세요 이렇게 무비 재생 앱이 완성됐습니다 만약에 이 코드가 다른 Apple 플랫폼에서와 유사해 보인다면 실제로 비슷하기 때문입니다 AVPlayerViewController와 AVPlayer가 많은 작업을 처리해서 여러분은 그럴 필요가 없습니다 이렇게 단순한 앱의 미디어 경험을 보여드리죠 앱이 실행되기 전에는 방만 보입니다 앱이 실행되면 큰 화면이 바로 앞에 나타나고 방이 어두워져서 멋진 분위기를 조성합니다 움직이면 화면은 그 자리에 유지되고 오디오는 화면에 고정됩니다 재생 컨트롤을 표시하려면 화면을 보고 탭하세요 컨트롤이 비디오 바로 앞에 뜹니다 재생 중에는 아무것도 하지 않으면 컨트롤이 자동으로 사라집니다 혹은 화면을 보고 다시 탭해서 사라지게 할 수도 있죠 화면 아래의 윈도우 막대를 잡아 화면을 이동할 수도 있습니다

화면 모서리를 잡아 크기를 조정할 수도 있죠 화면 크기가 조정될 때는 움직임이 부드럽고 비디오의 화면 비율도 맞습니다 Digital Crown을 돌려 볼륨을 조절할 수 있습니다 또는 Digital Crown으로 이렇게 주변 환경을 열 수도 있죠 전 이렇게 영화를 보는 걸 매우 좋아합니다 여러분도 직접 경험해 보셔야 합니다

재생 컨트롤을 자세히 살펴보고 기능을 알아보겠습니다 여기에 우리의 플레이어 인터페이스가 있습니다 오른쪽 상단에는 볼륨 컨트롤이 있어서 빠른 조정이나 음소거가 가능합니다 앞서 언급한 것처럼 볼륨을 조절할 때 Digital Crown을 사용할 수도 있습니다 왼쪽 하단에는 익숙한 재생, 일시 정지 이전, 다음 버튼이 있습니다 하단 중앙에는 스크러버가 있어서 영화의 다른 시간으로 이동할 수 있습니다 오른쪽 하단에는 더 많은 옵션을 지원하는 버튼이 있습니다 이것은 재생 속도를 조절하는 옵션입니다 영화에 여러 오디오 트랙이나 캡션 트랙이 포함된 경우 이 옵션을 사용해서 오디오 트랙에서 언어를 선택하거나 선호하는 언어로 캡션을 활성화할 수 있습니다 마지막 옵션은 조도 조절 기능입니다 저는 영화에 집중하기 위해 어두운 곳에서 시청하는 것을 좋아하는데 비디오에만 집중하지 않을 때도 있습니다 조도 조절 기능을 해제하면 주변을 더 잘 볼 수 있습니다 지금까지 내장된 기본 기능을 살펴봤습니다 이제 조금 더 수준 높은 기능을 알아보죠 섬네일 스크러빙은 스크러빙하는 동안 작은 비디오 이미지를 표시하여 원활하게 콘텐츠를 탐색할 수 있게 합니다 Trick Play 트랙이라고도 불리는 iFrame만 있는 재생 목록을 HLS 스트림에서 스크러빙할 때 컨트롤은 자동으로 섬네일을 표시합니다 폭이 145픽셀인 작은 Trick Play 트랙을 일반적으로 선호합니다 자세한 내용은 이 문서를 참고하세요 타임라인에 미디어를 삽입해야 할 때가 있습니다 로고나 요약, 광고처럼요 인터스티셜 지원으로 이 기능을 활성화할 수 있습니다 인터스티셜이 있는 경우 컨트롤이 타임라인에 표시하여 자동으로 인터스티셜을 반영합니다 AVPlayerInterstital EventController을 이용해 이런 인터스티셜을 프로그래밍으로 구성할 수도 있고 HLS 스트림 내에서 설명할 수도 있습니다 자세한 내용은 이 세션을 참고하세요 비디오 재생 앱에서 일반적으로 사용하는 추가 UI 옵션들이 있습니다 콘텍스추얼 동작으로 건너뛰기나 다음 에피소드 재생 등 버튼을 추가할 수 있죠 제목을 넣을 수 있고 이미지도 선택할 수 있습니다 사용자 설정 정보 뷰 컨트롤러는 콘텐츠의 메타데이터를 표시하고 관련 콘텐츠를 제안할 수 있습니다 이런 API들은 다른 Apple 플랫폼과 동일하게 작동합니다 자세한 내용은 이 세션을 참고하세요 Immersive Space라는 기능을 사용하면 앱을 다른 공간으로 이동할 수 있습니다 앱이 Immersive Space를 생성하면 그 공간이 어떻게 보일지 결정할 수 있죠 게다가 비디오 화면은 자동으로 해당 공간으로 이동하고 예측되는 크기와 위치로 고정되어 매번 훌륭한 시청 각도를 보장합니다 그리고 컨트롤을 분리하고 가까이 이동해서 상호 작용이 더 쉬워집니다 코드를 살펴보겠습니다 아까 만든 MoviePlayingApp이 있습니다 먼저 Immersive Space를 추가하겠습니다 3D 콘텐츠는 RealityKit 엔티티로 설명됩니다 그다음 PlayerView의 onAppear를 사용해 Space를 열겠습니다 무비 플레이어가 도킹됐을 때 Immersive Space에 적용할지 확인하세요 Space를 빌드하고 표시하는 방법에 대한 자세한 내용은 이 세션을 참고하세요 AVPlayerViewController는 이 플랫폼에서의 멋진 경험을 위해 철저하게 디자인됐습니다 AVPlayerViewController가 여러분에게 도움이 되길 바랍니다 제안하고자 하는 기능이나 동작이 있다면 피드백을 제공해서 여러분의 사용 예에 맞게 개선될 수 있도록 해주세요 하지만 특수한 상황에서는 사용자 설정 재생 컨트롤을 빌드해야 할 수도 있습니다 이 경우에도 피드백을 제공해 주세요 저희는 AVPlayerViewController의 사용을 권장합니다 컨트롤을 숨기고 사용자 지정 UI에 오버레이를 제공할 수 있습니다 저수준 API를 사용하는 것보다 선호되죠 앞서 설명한 대로 AVPlayerViewController는 재생 컨트롤 이상의 많은 시스템 통합 기능을 제공합니다 게다가 뛰어난 시스템 통합 기능을 계속해서 사용하실 수 있습니다 지금까지 AVPlayerViewController의 전체 화면 경험을 살펴봤습니다 이제 비디오 재생의 다른 사용 예를 알아봅시다 윈도우에서 인라인으로 영화를 재생하고 싶을 때가 있습니다 도큐먼트의 일부이거나 미리보기 재생일 수도 있죠 AVPlayerViewController의 인라인은 그런 상황에 적합합니다 인라인 뷰를 어떻게 설정할까요? 윈도우를 채우지 않고 표시될 때는 자동으로 이 모드를 사용합니다 인라인 컨트롤 또한 이 OS에 맞게 재설계됐죠 AVPlayerLayer를 사용하여 윈도우 내에서 비디오가 합성되기 때문에 3D 비디오는 표시할 수 없습니다 앱이 3D 씬의 엔티티로 비디오를 재생하려고 할 때가 있습니다 스플래시 화면이나 비디오 전환 같은 경우죠 그럴 때는 재생 컨트롤이나 도킹 같은 시스템 통합이 필요하지 않습니다 그런 경우에는 RealityKit의 VideoPlayerComponent를 쓰세요 VideoPlayerComponent는 RealityKit 엔티티와 AVPlayer를 연결합니다 다른 엔티티와 마찬가지로 RealityKit 씬에 배치할 수 있습니다 그러면 비디오에 적절한 화면 비율의 메시를 생성하고 캡션 표시도 지원합니다 가능하면 AVPlayerLayer보다는 이쪽을 사용하세요 RealityKit의 최적화를 활용하여 AVPlayerLayer보다 나은 성능을 보여주며 새로운 3D 비디오 포맷을 지원하기 때문입니다 자세한 사항은 이 세션을 참고하세요 비디오를 이펙트로 사용하는 3D 씬에서 비디오를 사용하고 싶을 때가 있습니다 자체 지오메트리를 생성하고 비디오 표시 방식을 세밀하게 제어하고 싶을 수 있죠 VideoMaterial은 저수준 API로 임의의 지오메트리에 비디오를 표시합니다 원본 화면 비율을 보장할 수 없고 캡션을 표시할 수 없다는 뜻입니다 자세한 내용은 관련 세션을 확인하세요 추가적인 UI 기능과 다른 사용 예를 알아봤습니다 DestinationVideo 샘플 앱은 다음과 같은 기능이 있습니다 비디오를 선택하는 비디오 브라우저가 있고 Immersive Space에서 재생됩니다 보여드리겠습니다 정보 페이지를 보여주기 위해 비디오를 선택하면 Immersive Space가 열립니다 사용자 지정 UI 컨트롤이 있는 인라인 플레이어가 미리보기에 사용됩니다 그리고 영화를 재생합니다 플레이어 UI가 나타나고 바로 Immersive Space에 고정 크기와 위치로 도킹되어 최적의 시청을 보장합니다 다른 이점은 이런 식으로 화면이 Immersive Space에 도킹되면 재생 컨트롤이 분리되고 약간 더 가까워져서 상호 작용이 더 편리해진다는 점입니다 목록 버튼을 탭합니다 앱은 사용자 설정 정보 뷰 컨트롤러를 제공해서 비디오를 시청하는 동안 콘텐츠의 정보를 더 보여주고 관련 콘텐츠를 표시합니다 비디오가 끝나갈 때는 Play Next라고 쓰인 콘텍스추얼 동작 버튼이 오른쪽 하단 모서리에 나타납니다 지금까지 비디오 재생을 위한 공간 경험을 다뤘습니다 눈앞에 떠 있는 커다란 화면에 아름다운 시각적 요소와 멋진 공간 음향이 표현됩니다 필요한 모든 작업이 재생 컨트롤로 가능하다는 것과 다른 재생 사용 예를 이야기했습니다 앱에 비디오를 표시하는 방법은 여러 가지가 있는데요 한번 비교해 보죠 이들은 비디오를 보여주는 API입니다 각자 다른 기능이 있죠 필요한 미디어 경험에 맞는 API를 사용하세요 미디어가 정확히 표시되고 사용하기 쉬운지 확인하세요 플랫폼에 맞게 최적화되어 있고 RealityKit로 3D 비디오 포맷을 렌더링할 수 있는지 확인하세요 또한 플랫폼에 적합한 강력한 재생 컨트롤이 있는지도 확인하세요 그리고 훌륭한 경험을 위해 전체 시스템과 통합되어 있는지 확인하세요 AVPlayerViewController를 사용하면 다른 Apple 플랫폼에서 사용하던 기능을 앱이 완벽히 활용할 수 있고 이 플랫폼만의 특수한 기능도 활용할 수 있습니다 사용자에게 훌륭한 무비 재생 경험을 제공할 수 있습니다 공간 미디어 기능은 사람들이 새로운 방식으로 비디오를 경험하게 합니다 시작하려면 DestinationVideo 샘플 프로젝트를 확인하세요 여기에서 설명한 많은 기능을 보여줍니다 그리고 이 관련 세션들도 참고하세요 여러분이 이런 강력한 도구들로 무엇을 만들지 너무나도 기대됩니다 하지만 지금은 방송을 보러 가 봐야겠네요 재밌게 즐기세요 ♪