brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 03. 2023

[HIG] Playing video

사용자 경험을 방해하지 않는 비디오 재생

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.


Introduction


사람들은 사용 중인 앱이나 게임에 관계없이 본인의 기기에서 풍부한 비디오 경험을 즐기기를 원합니다.


시스템은 iOS, iPadOS, macOS 및 tvOS의 앱 또는 게임에 맞춰 잘 설계된 비디오 재생 경험을 제공합니다. 또한 TV 앱을 통해 다양한 콘텐츠를 제공할 수 있으므로 사용자들에게 편리하고 일관된 시청 경험을 제공할 수 있습니다.


시스템이 제공하는 비디오 플레이어는 다양한 재생 모드와 PiP(Picture-in-Picture) 보기 모드를 지원합니다. 사용자들은 재생 중에 모드를 전환할 수 있지만 기본적으로 시스템은 비디오의 종횡비에 따라 다음 재생 모드 중 하나를 선택합니다.


전체 화면 또는 가로 세로 채우기 모드(full-screen, aspect-fill mode)에서 비디오는 전체 디스플레이를 채우도록 조절됩니다. 따라서 일부 가장자리 잘림이 발생할 수 있습니다. 이 모드는 와이드 비디오(2:1 ~ 2.40:1)의 비율이 기본 값입니다. 개발자 가이드라인은 resizeAspectFill를 참고하세요.

화면에 맞춤, 화면비 모드(fit-to-screen, aspect mode)에서는 전체 비디오가 화면에 표시되며 필요에 따라 레터박스 또는 필라박스가 발생합니다. 이 모드는 표준 비디오(4:3, 16:9 및 최대 2:1) 및 울트라와이드 비디오(2.40:1 이상)의 비율이 기본 값입니다. 개발자 가이드라인은 resizeAspect를 참고하세요.


역자설명 : 레터박스는 다음과 같이 필름의 원래의 가로 세로비를 보존하면서 표준 너비의 비디오 포맷에 맞추어 와이드스크린 가로 세로비로 촬영하는 방식을 말합니다.

tvOS에서 내장 비디오 플레이어는 자막 또는 오디오 언어 변경과 같은 작업과 라이브러리에 프로그램 추가 또는 클립 즐겨찾기와 같은 작업을 수행할 수 있는 전송 막대 컨트롤(transport bar controls) 도 제공합니다. 비디오 플레이어는 전송 표시줄 아래에 정보, 에피소드 또는 챕터와 같은 콘텐츠 탭을 표시하여 사용자에게 정보를 제공하고 탐색을 간소화하는 데 도움을 줍니다.


역자설명 : 하단의 이미지의 컨트롤이 전송 막대 컨트롤(transport bar controls)입니다.
출처 - Apple Developer


Best practices


시스템이 제공하는 비디오 플레이어를 사용하여 사용자들에게 친숙하고 편리한 경험을 제공하세요. 내장된 비디오 플레이어는 사람들이 몰입형 콘텐츠를 즐기는 데 집중할 수 있도록 일관된 비디오 재생 경험을 제공합니다. 앱에 사용자 지정 비디오 플레이어가 필요한 경우 시스템이 제공하는 비디오 플레이어의 동작과 인터페이스를 참고하여 사용자들이 즉시 이해할 수 있는 경험을 제공하는 것이 좋습니다. 그렇지 않은 사용자 지정 비디오 플레이어는 사용자들에게 불편함을 느끼게 할 수 있습니다.


비디오 콘텐츠를 원래의 종횡비로 표시하는 것이 좋습니다. 비디오 콘텐츠가 특정 종횡비를 준수하기 위해 레터박스 또는 필러박스 패딩을 사용하는 경우 현재 재생 모드에 따라 비디오의 크기를 올바르게 표시하지 못할 수 있습니다. 비디오 프레임에 포함된 패딩으로 인해 전체 화면 및 화면 맞춤 모드에서 비디오가 더 작게 나타날 수 있습니다. 또한 iPad의 Picture in Picture 모드와 같이 전체 화면에서 비디오가 올바르게 표시되지 않게 됩니다.


다음은 패딩이 iPhone X의 비디오 디스플레이에 어떤 영향을 미칠 수 있는지 보여주는 몇 가지 예입니다.


사용자들에게 추가 정보를 제공하세요. iOS, iPadOS 및 tvOS에서 이미지, 제목, 설명 및 기타 유용한 정보를 제공할 수 있습니다. 미디어 재생을 방해하지 않도록 콘텐츠를 제한합니다. 개발자 가이드라인은 externalMetadata를 참고하세요.


재생을 제어하는 데 사용하는 장치에 관계없이 사람들이 원하는 재생 경험을 제공하세요. 예를 들어 키보드에서 스페이스바를 눌러 Mac, iPhone, iPad 및 Apple TV에서 미디어를 재생하거나 일시 중지할 수 있습니다. 마찬가지로 사람들은 Siri Remote로 친숙하고 직관적인 제스처를 사용하여 Apple TV에서 미디어를 이동할 수 있습니다. 가이드라인은 Keyboards and Remotes(링크 없음)를 참고하세요.   


역자설명 : Siri Remote입니다. 시리를 통해 사용자들이 원하는 콘텐츠를 목소리로 찾을 수 있습니다.

사람들이 tvOS 앱에서 재생 옵션 또는 콘텐츠 별로 액세스해야 하는 경우 전송 컨트롤 또는 사용자 지정 콘텐츠 탭을 추가하는 것을 고려해 보세요. 사람들은 일반적으로 비디오를 시청하는 동안 전송 컨트롤 또는 콘텐츠 탭을 확인하기 때문에 가장 중요한 작업과 정보만 제공하는 것이 중요합니다. 작업이 한두 단계 이상 걸리지 않도록 하고 콘텐츠를 간결하게 하여 사람들이 시청 환경으로 빠르게 돌아갈 수 있도록 하세요. 동영상 즐겨찾기와 같은 재생 관련 작업을 활성화하려면 전송 컨트롤을 사용하세요. 사용자 지정 콘텐츠 탭을 사용하여 추가 정보 또는 권장 사항을 표시합니다.


시청자가 전체 화면 모드와 PiP 모드 간에 전환할 때 다른 소스의 오디오가 혼합되지 않도록 하는 것이 좋습니다. 혼합된 오디오는 불쾌하고 좋지 않은 사용자 경험입니다. 일반적으로 오디오 소스 중 하나 이상이 보조 오디오를 올바르게 처리하지 못하는 경우 오디오가 혼합됩니다. 전체 화면 비디오를 시청하는 동안 시청자가 해당 비디오를 PiP 창으로 이동하면 시스템이 자동으로 비디오를 음소거합니다. 전체 화면 창에서 시청자는 배경 음악을 재생하는 게임을 시작한 다음 PiP 창으로 전환하고 비디오 음소거를 해제합니다. 게임에서 보조 오디오를 적절하게 처리하지 않으면 해당 오디오가 음소거 해제된 비디오의 오디오와 혼합됩니다. 개발자 가이드라인은 silenceSecondaryAudioHintNotification를 참고하세요.


Integrating with the TV app


TV 앱은 시스템 전체에서 즐겨찾기, 최근 재생 및 추천 비디오 콘텐츠에 대한 액세스를 제공합니다. 사람들이 앱 내에서 콘텐츠 재생을 시작하면 TV 앱이 자동으로 앱을 열고 앱으로 전환합니다. TV 앱 경험이 매끄럽게 느껴지도록 하려면 다음 가이드를 따르세요.


매끄러운 앱 전환 경험을 제공하세요. TV 앱은 앱으로 전환할 때 검은색으로 희미해지고 앱의 시작 화면이 표시되지 않습니다. 콘텐츠를 재생하거나 다시 시작하기 전에 즉시 검은 화면을 보여주어 시각적 연속성을 유지하세요.


사람들이 원하는 콘텐츠를 바로 보여주세요. 사람들은 재생을 재개할 때 전환이 완료됨과 동시에 선택한 콘텐츠가 재생되기를 원합니다. 앱의 검은 화면에서 콘텐츠로 바로 이동하고 시작 화면, 세부 정보 화면, 소개 애니메이션 또는 콘텐츠에 도달하는 데 더 오래 걸리는 기타 요소를 불필요하게 보여주지 마세요. 선택한 미디어를 재생하기 전에 사용자들은 건너뛰기 또는 단계별 재생 등을 선택할 수 있습니다.


사람들에게 재생을 재개할 것인지 묻지 않는 것이 좋습니다. 재생을 재개할 수 있는 경우 확인 메시지 없이 자동으로 재개하는 것이 좋습니다.


사람들이 연결된 블루투스 키보드에서 스페이스바를 누르면 재생을 재생하거나 일시 중지합니다. 스페이스바를 눌러 미디어 재생을 제어하는 것은 사용 중인 키보드에 관계없이 사람들이 원하는 상호 작용입니다.


콘텐츠가 올바른 뷰어로 재생되는지 확인합니다. 앱이 여러 사용자 프로필을 지원하는 경우 TV 앱은 재생을 할 때 프로필을 지정할 수 있습니다. 재생을 시작하기 전에 앱이 자동으로 이 프로필로 전환되도록 하는 것이 좋습니다. 재생 프로필이 지정되지 않은 경우 나중에 이 기능을 제공할 수 있도록 재생을 시작하기 전에 시청자에게 프로필을 선택하도록 요청하세요.


긴 비디오 클립의 재생을 재개할 때 이전에 종료된 시간부터 재생되는 것이 좋습니다. 이전에 중지된 지점에서 재생을 재개하면 사람들이 중단한 부분부터 빠르게 시청할 수 있습니다.


Loading content


가능하면 로딩 화면을 표시하지 않는 것이 좋습니다. 콘텐츠가 빠르게 로드되는 경우 로드 화면이 필요하지 않지만 로드하는 데 2초 이상 걸리는 경우 활동 스피너가 중앙에 있고 주변 콘텐츠가 없는 검은색 로드 화면을 표시하는 것이 좋습니다.


즉시 재생을 시작하는 것이 좋습니다. 로딩 화면을 표시해야 하는 경우 재생을 시작하기에 충분한 콘텐츠가 로드될 때까지만 표시하십시오. 백그라운드에서 나머지 콘텐츠를 계속 로드하는 것이 좋습니다.


로딩 화면의 콘텐츠를 최소화합니다. 로딩 화면에 브랜딩이나 이미지를 포함하는 경우 재생으로 원활하게 전환할 수 있도록 검은색 배경을 유지하면서 최소한으로 보여주는 것이 좋습니다.


Exiting playback


재생을 종료한 후 사람들은 TV 앱으로 돌아가지 않고 앱에 남아 있으므로 사람들이 현재 위치를 잃지 않도록 하는 것이 좋습니다.


상황에 맞는 화면을 표시합니다. 재생을 종료할 때 시청자가 방금 보고 있던 콘텐츠에 대한 세부 정보 화면을 표시하고 재생을 재개하는 옵션을 보여줍니다. 세부 정보 화면을 사용할 수 없는 경우 콘텐츠를 나열하는 메뉴나 앱의 기본 메뉴를 표시하세요.


사용자들이 재생을 빠르게 종료할 수 있도록 하는 것이 좋습니다. 재생 알림을 받은 후 빠르게 재생 종료 화면을 표시하여 재생 시작 직후 사람들이 나갈 경우 화면을 표시할 수 있도록 준비합니다.


Platform considerations


No additional considerations for iOS, iPadOS, or macOS.


tvOS

비디오 위에 로고 또는 비대화형 오버레이를 표시할 때 콘텐츠를 따릅니다. 작고 눈에 잘 띄지 않는 로고나 카운트다운 타이머가 비디오에 적합할 수 있지만 시청 경험을 향상하지 않는 크고 산만한 오버레이는 피하십시오. 또한 일부 장치는 이미지 잔상이 발생하기 쉽기 때문에 일반적으로 오버레이를 짧게 유지하고 밝고 불투명한 콘텐츠보다 표준 동적 범위(SDR)의 반투명 그래픽을 사용하는 것이 좋습니다.


대화형 오버레이를 우아하게(gracefully) 보여주는 것이 좋습니다. 일부 비디오에는 퀴즈, 설문조사, 진행 상황 확인과 같은 대화형 오버레이가 표시됩니다. 최상의 사용자 경험을 위해 최소 0.5초 지연을 한 후 미디어 재생을 일시 중지하고 대화형 오버레이를 표시합니다. 사람들에게 오버레이를 닫고 상호 작용을 마친 후 미디어 재생을 재개할 수 있는 명확한 방법을 제공하세요.


watchOS

watchOS에서 시스템이 비디오 재생을 관리합니다. 앱이 실행되는 동안 앱은 짧은 비디오 클립을 재생할 수 있습니다. 동영상의 요소를 사용하여 인터페이스에 클립을 내장하고 비디오를 인라인으로 재생하거나 별도의 인터페이스에서 클립을 재생할 수 있습니다. 개발자 가이드라인은 VideoPlayer를 참고하세요.


비디오 클립을 짧게 유지하세요. 30초 이하의 짧은 클립이 좋습니다. 긴 클립은 더 많은 디스크 공간을 소비하고 사람들이 더 오랜 시간 동안 손목의 기기를 확인해야 하므로 피로를 유발할 수 있습니다.


미디어 자산(media assets)에 권장되는 크기와 인코딩 값을 사용하세요. 특히 성능에 영향을 미치고 최적이 아닌 비디오 클립의 크기를 사용하지 마세요. 다음 표에는 비디오 자산(media assets)에 대한 권장 인코딩 및 해상도 값이 나와 있습니다. 오디오 인코딩 값은 동영상과 오디오 모두에 적용됩니다.

시스템 컨트롤처럼 보이는 포스터 이미지를 만들지 않는 것이 좋습니다. 사람들은 재생을 위해 동영상을 탭할 수 있습니다. 동영상의 요소를 다른 것처럼 보이게 하여 사람들을 혼란스럽게 하지 않는 것이 좋습니다.


비디오 클립의 내용을 나타내는 포스터 이미지를 만드는 것이 좋습니다. 사람들이 포스터 이미지를 탭 하면 시스템이 이미지를 비디오로 교체하고 인라인 재생을 시작합니다. 포스터 이미지를 통해 사람들은 동영상을 볼지에 대해 결정할 수 있습니다. 일반적으로 내용과 관련이 없거나 사람들이 혼란스러울 수 있는 포스터 이미지를 만들지 마세요.


Resources


Related   

Playing audio

Feedback


Developer documentation   

AVKit

HTTP Live Streaming


Videos 

Create a great video playback experience WWDC22

Deliver a great playback experience on tvOS WWDC21

Master Picture in Picture on tvOS WWDC 2020

작가의 이전글 [HIG] Playing haptics
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari