TV 탐색

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

원칙

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

효율성

콘텐츠를 빠르고 쉽게 이용할 수 있도록 합니다. 사용자는 최소한의 클릭으로 콘텐츠에 빠르게 액세스하기를 원합니다. 필요한 화면 수가 적은 방식으로 정보를 구성합니다.

예측 가능

권장사항과 권장사항에 따라 사용자가 탐색 방식을 예측할 수 있도록 하세요. 탐색 패턴을 불필요하게 재창조하지 마세요. 혼동과 예측이 불가능해집니다.

직관적임

널리 채택되는 사용자 행동을 원활하게 지원할 수 있을 만큼 간단하게 탐색하세요. 불필요한 탐색 레이어를 추가하여 지나치게 복잡하게 만들지 마세요.

컨트롤러

컨트롤러는 미니멀한 리모컨부터 복잡한 게임 컨트롤러까지 다양한 스타일로 제공됩니다. 모든 컨트롤러에는 방향 패드 (D패드)와 선택, 홈, 뒤로 버튼이 포함되어 있습니다. 다른 버튼은 모델마다 다릅니다.

샘플 리모컨
그림 1: TV 리모컨의 예

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 사용자 인터페이스 위젯에 사용할 수 있는 모든 탐색 속성이 나와 있습니다.

속성 기능
nextFocusDown 사용자가 아래로 이동할 때 포커스를 받는 다음 뷰를 정의합니다.
nextFocusLeft 사용자가 왼쪽으로 이동할 때 포커스를 받는 다음 뷰를 정의합니다.
nextFocusRight 사용자가 오른쪽으로 이동할 때 포커스를 받는 다음 뷰를 정의합니다.
nextFocusUp 사용자가 위로 이동할 때 포커스를 받는 다음 뷰를 정의합니다.

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

명확한 포커스와 선택 제공

TV 기기에서 앱 탐색 스킴의 성공 여부는 사용자가 어떤 사용자 인터페이스 요소에 포커스가 있는지 확인하기가 얼마나 쉬운지에 따라 달라집니다. 포커스가 맞춰진 항목이 명확하게 표시되어 사용자가 조치를 취할 수 있는 항목이 없다면 사용자는 금방 불만을 느끼고 앱을 종료할 수 있습니다. 같은 이유로 사용자가 앱이 시작된 후 또는 유휴 상태일 때 즉시 조치를 취할 수 있는 항목에 항상 초점을 맞추는 것이 중요합니다.

앱 레이아웃 및 구현에서 색상, 크기, 애니메이션 또는 이러한 속성의 조합을 사용하면 사용자가 다음에 어떤 작업을 할지 쉽게 결정할 수 있습니다. 애플리케이션 전반에서 포커스를 나타낼 때는 동일한 스키마를 사용합니다.

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

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<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>

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

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

포커스 가능하고 선택 가능한 컨트롤 내에 충분한 패딩을 제공하여 컨트롤 주변의 하이라이트가 명확하게 표시되도록 합니다.

뒤로 버튼 탐색

플랫폼의 여러 앱에서 일관성을 유지하려면 뒤로 버튼의 동작이 다음 가이드라인을 따라야 합니다.

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

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

상단 탐색을 사용하는 경우
상단 탐색을 사용할 때의 탐색 흐름을 설명하는 이미지
왼쪽 탐색 메뉴를 사용하는 경우
왼쪽 탐색을 사용할 때의 탐색 흐름을 설명하는 이미지

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

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

뒤로 버튼이 확인 화면이나 무한 루프의 일부로 제어되지 않는지 확인합니다.

사용자에게 종료 여부를 묻는 대화상자를 보여주는 스크린샷

금지.
종료 게이팅을 피합니다. 사용자가 확인 없이 앱을 종료할 수 있도록 합니다.


탐색 반복을 보여주는 스크린샷

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

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

휴대기기와 달리 리모컨의 뒤로 버튼은 TV에서 뒤로 이동하는 데 사용됩니다. 화면에 가상 뒤로 버튼을 표시하지 않아도 됩니다.

화면의 소프트 뒤로 버튼을 보여주는 스크린샷

금지.

필요한 경우 취소 버튼 표시

표시되는 작업만 확인, 파괴 또는 구매 작업인 경우 이전 대상으로 돌아가는 Cancel 버튼이 있는 것이 좋습니다.

화면의 소프트 취소 버튼을 보여주는 스크린샷

적절한 예

뒤로 탐색 구현

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

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

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

TV 재생 컨트롤

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

실시간 탭 탐색

실시간 탭에 통합된 실시간 TV 피드가 있는 앱은 TV 앱 품질 요구사항을 준수하는 것 외에도 다음 섹션에서 설명하는 것처럼 원활한 재생 및 되감기 요구사항도 충족해야 합니다.

원활한 재생

원활한 재생은 Google TV 및 Android TV의 실시간/선형 채널 딥 링크를 따르는 인앱 동작에 적용됩니다.

Google TV 및 Android TV에서 실시간/선형 채널 딥 링크를 클릭하는 사용자는 타겟 앱의 화면을 차단하거나 지연시키지 않고 채널 재생으로 바로 연결되어야 합니다. 로그인 흐름, 가입 과정, 브랜딩 동영상 및 기타 지연은 허용되지 않습니다.

그러나 딥 링크가 콜드 부팅에서 타겟 앱 로드를 시작하면 재생 전 이러한 부팅 지연은 허용됩니다. 이 경우 앱 부팅 브랜딩 동영상 또는 애니메이션도 허용됩니다. 이러한 콜드 부팅 환경은 세션당 두 번 이상 발생할 가능성이 낮습니다.

또한 딥 링크 채널에 적응하는 데 몇 초 정도 걸린다면 채널 또는 서비스 브랜딩을 표시할 수 있습니다. 단, 이 기간은 채널을 로드하는 데 걸리는 시간만큼만 길어야 합니다 (앱의 평균 채널 로드 시간과 유사함).

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

다이렉트백

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

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

사용자가 딥 링크 다음에 처음으로 버튼을 누를 때 뒤로 버튼 이외의 버튼을 누르는 경우 뒤로 이동 요구사항이 적용되지 않으며 표준 뒤로 버튼 동작만 필요합니다.

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

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

고정 시작 대상

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

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

딥 링크를 사용하든 수동으로 특정 대상으로 이동하든 사용자는 뒤로 버튼을 사용하여 대상을 다시 시작 대상으로 이동할 수 있습니다.

앱 내의 세부정보 페이지로 연결되는 딥 링크를 보여주는 스크린샷. 뒤로를 누르면 앱의 홈 화면으로 이동하고 뒤로를 다시 누르면 원래 화면으로 돌아갑니다.

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

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

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

탐색 포커스 가능 예

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

탐색 포커스 가능 예

금지.
접근하기 어려운 장소에서는 컨트롤이 포함된 레이아웃을 사용하지 않습니다. 여기 표시된 검색 작업에 도달하는 것은 D패드를 사용하여 관리하기가 쉽지 않습니다.

가로축 및 세로축을 모두 활용하도록 레이아웃을 설계합니다. 각 방향에 특정 함수를 지정하면 대규모 계층 구조를 빠르게 탐색할 수 있습니다.

탐색 축 예

권장사항
카테고리는 세로축을 기준으로 순회할 수 있으며 각 카테고리 내의 항목은 가로축에서 탐색할 수 있습니다.

탐색 축 예

금지.
복잡하고 중첩된 레이아웃 계층 구조를 피하세요.