TV 탐색

TV 기기는 앱에 제한된 탐색 컨트롤 세트를 제공합니다. TV 앱에 효과적인 탐색 기법을 구현하려면 이러한 제한된 컨트롤과 앱 작동 중 사용자의 제한사항을 이해해야 합니다. TV용 Android 앱을 빌드할 때는 터치스크린이 아닌 리모컨 버튼을 사용하여 사용자가 탐색하는 방식에 특히 주의해야 합니다.

원칙

목표는 사용자 인터페이스를 지배하거나 콘텐츠에서 주의를 돌리지 않고 탐색이 자연스럽고 친숙하게 느껴지도록 하는 것입니다. 다음 원칙은 TV 앱 전체에서 일관되고 직관적인 사용자 환경의 기준을 설정하는 데 도움이 됩니다.

컨트롤러

컨트롤러는 최소한의 리모컨부터 복잡한 게임 컨트롤러까지 다양한 스타일로 제공됩니다. 모든 컨트롤러에는 방향 패드 (D패드)와 선택, 홈, 뒤로 버튼이 포함됩니다. 기타 버튼은 모델에 따라 다릅니다.

D패드
TV의 기본 탐색 방법은 위, 아래, 왼쪽, 오른쪽 방향 하드웨어 버튼이 포함된 D패드를 사용하는 것입니다. D패드는 포커스를 한 객체에서 누른 버튼의 방향에 있는 가장 가까운 객체로 이동합니다.

선택 버튼
포커스가 있는 화면의 항목을 선택합니다.

홈 버튼
사용자를 시스템 홈 화면으로 이동합니다.

뒤로 버튼
사용자에게 이전 뷰로 돌아가는 방법을 제공합니다.

마이크 버튼
Google 어시스턴트 또는 음성 입력을 호출합니다.

D패드 탐색

TV 기기에서는 사용자가 D패드나 화살표 키를 사용하여 탐색합니다. 이러한 유형의 컨트롤은 위, 아래, 왼쪽, 오른쪽으로의 이동을 제한합니다. TV에 최적화된 우수한 앱을 빌드하려면 사용자가 이렇게 제한된 컨트롤로 앱을 탐색하는 방법을 신속하게 배울 수 있는 탐색 기법을 제공해야 합니다.

Android 프레임워크는 레이아웃 요소 간 방향 탐색을 자동으로 처리하므로 일반적으로 앱에서 추가로 조치를 취할 필요가 없습니다. 하지만 D패드 컨트롤러로 탐색을 철저히 테스트하여 탐색 문제가 있는지 확인해야 합니다.

다음 가이드라인에 따라 앱의 탐색 시스템이 TV 기기의 D패드에서 잘 작동하는지 테스트하세요.

• 사용자가 D패드 컨트롤러를 사용하여 화면에 표시되는 모든 컨트롤로 이동할 수 있는지 확인합니다.
• 포커스가 있는 스크롤 목록의 경우 D패드 위/아래 버튼으로 목록을 스크롤하고 선택 버튼으로 목록의 항목을 선택할 수 있어야 합니다. 사용자가 목록에서 요소를 선택할 수 있고 요소가 선택된 경우에도 목록이 계속 스크롤되는지 확인합니다.
• 컨트롤 간 전환이 간단하고 예측 가능한지 확인합니다.

방향 탐색 수정

Android 프레임워크는 레이아웃에서 포커스 가능 요소의 상대 위치에 따라 방향 탐색 기법을 자동으로 적용합니다. 생성된 탐색 기법을 앱에서 D패드 컨트롤러를 사용하여 테스트합니다. 테스트 후, 사용자가 레이아웃에서 특정한 방식으로 이동하게 하고 싶다면 컨트롤에 관한 명확한 방향 탐색을 설정하면 됩니다.

다음 코드 샘플은 TextView 레이아웃 객체에 포커스를 받을 다음 컨트롤을 정의하는 방법을 보여줍니다.

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

다음 표에는 Android 사용자 인터페이스 위젯에 사용할 수 있는 모든 탐색 속성이 나와 있습니다.

이러한 명시적 탐색 속성 중 하나를 사용하려면 레이아웃의 다른 위젯 android:id로 값을 설정합니다. 탐색 순서를 루프로 설정하여 마지막 컨트롤이 첫 번째 컨트롤로 포커스를 다시 이동하게 해야 합니다.

명확한 포커스와 선택 제공

TV 기기에서 앱 탐색 기법이 성공적으로 작동하려면 사용자가 포커스가 지정된 사용자 인터페이스 요소를 빠르게 확인할 수 있어야 합니다. 포커스 지정 항목을 명확히 나타내지 않고, 이에 따라 사용자가 작업할 수 있는 항목이 확실하게 표시되지 않으면 사용자가 금세 좌절하여 앱을 종료할 수 있습니다. 같은 이유로 앱을 시작한 후 또는 유휴 상태에 있을 때 항상 사용자가 곧바로 작업할 수 있는 항목에 포커스가 지정되어 있어야 합니다.

앱 레이아웃과 구현에서는 색상, 크기, 애니메이션 또는 이러한 속성의 조합을 사용하여 사용자가 다음에 어떤 작업을 할 수 있는지 확인할 수 있도록 해야 합니다. 애플리케이션에서 포커스를 나타내는 데는 일관된 체계를 사용하세요.

포커스가 지정되어 선택된 컨트롤을 강조표시할 수 있도록 Android에서는 드로어블 상태 목록 리소스 를 제공합니다. 다음 코드 예에서는 사용자가 컨트롤로 이동해서 컨트롤을 선택했음을 나타내도록 버튼의 시각적 동작을 사용 설정하는 방법을 보여줍니다.

<!-- res/drawable/button.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
button.xml

다음 레이아웃 XML 샘플 코드는 이전 상태 목록 드로어블을 Button에 적용합니다.

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

포커스 가능하며 선택 가능한 컨트롤 안에 충분한 패딩을 제공하여 컨트롤에 관한 강조표시가 명확하게 나타날 수 있도록 해야 합니다.

뒤로 버튼 탐색

플랫폼의 앱 전반에서 일관성을 유지하려면 뒤로 버튼의 동작이 다음 가이드라인을 준수하는지 확인하세요.

예측 가능한 뒤로 버튼 동작 사용

간단하고 예측 가능한 탐색 환경을 만들려면 사용자가 리모컨의 뒤로 버튼을 누를 때 이전 대상으로 이동하도록 합니다.

사용자가 메뉴 항목에서 페이지 중간에 있는 카드로 이동한 후 뒤로 버튼을 누르면 결과는 앱에서 상단 탐색을 사용하는지 또는 왼쪽 탐색을 사용하는지에 따라 달라집니다.

• 앱에서 상단 탐색 사용: 빠르게 스크롤하고 메뉴에서 포커스를 활성화하여 사용자를 페이지 상단으로 다시 이동합니다.
• 앱에서 왼쪽 탐색 사용: 왼쪽 사이드 메뉴를 활성화하고 현재 활성 메뉴 항목에 포커스를 맞춥니다.

뒤로 버튼이 확인 화면으로 제한되거나 무한 루프의 일부가 아닌지 확인합니다.

부적절한 예
종료 게이팅을 피하세요. 사용자가 확인 없이 앱을 종료하도록 허용합니다.

부적절한 예
메뉴를 닫고 여는 무한 루프에 절대 들어가지 마세요. 뒤로 버튼을 누르면 앱이 종료되는 것이 좋습니다. 어린이 프로필과 같은 특별한 경우가 아니면 메뉴에 종료 버튼을 표시하지 마세요.

위로 또는 뒤로 버튼을 표시하지 않음

휴대기기와 달리 리모컨의 뒤로 버튼은 TV에서 뒤로 탐색하는 데 사용됩니다. 화면에 가상 뒤로 버튼을 표시할 필요는 없습니다.

부적절한 예

필요한 경우 취소 버튼 표시

표시되는 작업이 확인, 파괴적 작업 또는 구매 작업뿐인 경우 이전 대상으로 돌아가는 취소 버튼을 사용하는 것이 좋습니다.

적절한 예

뒤로 탐색 구현

Android 프레임워크는 일반적으로 D패드와 마찬가지로 뒤로 탐색을 잘 처리합니다. 탐색 구성요소 를 사용하는 경우 다양한 탐색 그래프를 지원할 수 있습니다. 경우에 따라 뒤로 버튼으로 긴 목록의 시작 부분으로 포커스를 재설정하는 것과 같은 맞춤 동작을 구현해야 할 수 있습니다.

FragmentActivity 및 AppCompatActivity의 기본 클래스인 ComponentActivity를 사용하면 getOnBackPressedDispatcher()를 호출하여 가져올 수 있는 OnBackPressedDispatcher를 사용하여 뒤로 버튼의 동작을 제어할 수 있습니다.

자세한 내용은 맞춤 뒤로 탐색 제공을 참고하세요.

TV 재생 컨트롤

동영상 재생은 TV에서 가장 중요한 기능 중 하나입니다. Android TV의 앱에서 동영상 플레이어가 동일하게 동작하는 것이 중요합니다. TV의 재생 컨트롤 가이드라인을 참고하세요.

라이브 탭 탐색

TV 앱 품질 요구사항을 준수하는 것 외에도 라이브 탭에 라이브 TV 피드가 통합된 앱은 다음 섹션에 설명된 대로 원활한 재생 및 되감기 요구사항도 충족해야 합니다.

원활한 재생

원활한 재생은 Google TV 및 Android TV의 라이브 또는 선형 채널 딥 링크를 따른 인앱 동작에 적용됩니다.

사용자가 딥 링크를 클릭하면 다음 규칙이 적용됩니다.

• 지연 없음: 사용자는 로그인 또는 가입 흐름이나 브랜딩 동영상과 같은 화면을 차단하거나 지연하지 않고 채널 재생으로 바로 이동해야 합니다.
• 콜드 부팅 예외: 딥 링크가 콜드 부팅에서 대상 앱 로드를 시작하는 경우 부팅 지연이 허용됩니다. 이 경우 앱 부팅 브랜딩 동영상 또는 애니메이션도 허용됩니다.
• 로드 지연 예외: 채널을 튜닝하는 데 몇 초가 걸리는 경우 브랜딩을 표시할 수 있습니다. 기간은 채널을 로드하는 데 걸리는 시간만큼만이어야 합니다.

사용자가 로그아웃되었거나 구독하지 않은 경우 유료 채널의 재생을 차단하여 로그인 또는 가입 흐름을 완료할 수 있습니다.

되감기

사용자가 라이브 탭의 딥 링크에서 앱을 실행한 후 뒤로 버튼을 누르면 경과된 시간과 관계없이 한 번의 뒤로 누르기로 라이브 탭으로 돌아가야 합니다. 이 되감기 동작은 Google TV 및 Android TV의 모든 라이브 탭 딥 링크에 필요합니다.

라이브 탭 딥 링크는 추가된 딥 링크 매개변수 ?exit_on_back=[true|false]로 구분됩니다. 앱은 이 매개변수를 파싱하여 앱이 라이브 탭에서 실행되었는지 확인해야 합니다. exit_on_back이 true이면 앱은 되감기 동작을 구현해야 합니다.

사용자가 딥 링크 후 첫 번째 버튼 누르기로 뒤로 버튼 이외의 버튼을 누르면 되감기 요구사항이 적용되지 않으며 표준 뒤로 버튼 동작만 필요합니다.

예를 들어 사용자가 딥 링크를 따라간 후 컨트롤 오버레이를 표시하는 D패드의 선택 버튼을 누른다고 가정해 보겠습니다. 사용자는 오버레이가 사라질 때까지 기다린 후 뒤로 버튼을 누릅니다. 딥 링크를 따라간 후 누른 첫 번째 버튼이 D패드 선택 버튼이므로 되감기 요구사항이 적용되지 않습니다. 대신 일반적인 앱 백 스택 로직이 적용됩니다.

뒤로 버튼을 반복해서 누르면 무한 루프 없이 사용자가 앱 루트로 이동한 후 Google TV 또는 Android TV로 돌아가야 합니다. 자세한 내용은 예측 가능한 뒤로 버튼 동작 섹션을 참고하세요.

탐색 아키텍처

잘 정의된 탐색 아키텍처는 사용자가 앱에서 현재 위치와 다양한 콘텐츠에 액세스하는 방법을 이해하는 데 도움이 됩니다. 탐색 디자인의 다음 측면을 고려하세요.

고정 시작 대상

사용자가 런처에서 앱을 실행할 때 처음으로 표시되는 화면은 사용자가 뒤로 버튼을 누른 후 런처로 돌아오면 마지막으로 표시되는 화면이기도 합니다.

수동 탐색을 시뮬레이션하는 딥 링크

딥 링크하는지 또는 수동으로 특정 대상으로 이동하는지와 상관없이 사용자는 뒤로 버튼을 사용하여 대상을 통해 다시 시작 대상으로 이동할 수 있습니다.

다른 앱에서 앱으로 딥 링크하면 수동 탐색이 시뮬레이션됩니다. 예를 들어 사용자가 Google TV에서 Moviestar 앱의 세부정보 페이지로 바로 이동한 후 뒤로 버튼을 누르면 Moviestar 앱의 홈페이지로 이동합니다.

모든 포커스 가능 요소로의 명확한 경로

사용자가 명확한 방향으로 UI를 탐색할 수 있도록 합니다. 컨트롤로 이동하는 직접적인 경로가 없는 경우 컨트롤을 재배치하는 것이 좋습니다.

적절한 예
여기에 표시된 검색 작업과 같은 컨트롤을 다른 클릭 가능한 요소와 겹치지 않는 위치에 배치합니다.

부적절한 예
도달하기 어려운 위치에 컨트롤이 포함된 레이아웃은 피하세요. 여기에 표시된 검색 작업은 D패드로 도달하기 어려울 수 있습니다.

축

가로축과 세로축을 모두 활용하도록 레이아웃을 디자인합니다. 각 방향에 특정 기능을 부여하여 대규모 계층 구조를 빠르게 탐색할 수 있도록 합니다.

적절한 예
카테고리는 세로축에서 순회할 수 있으며 각 카테고리의 항목은 가로축에서 탐색할 수 있습니다.

부적절한 예
복잡하고 중첩된 레이아웃 계층 구조는 피하세요.