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 사용자 인터페이스 위젯에 사용할 수 있는 모든 탐색 속성이 나와 있습니다.
| 속성 | 기능 |
|---|---|
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패드의 경우처럼 뒤로 탐색을 잘 처리합니다. 탐색 구성요소를 사용하면 다양한 탐색 그래프를 지원할 수 있습니다. 경우에 따라 뒤로 버튼을 사용하여 포커스를 긴 목록의 처음으로 재설정하는 등의 맞춤 동작을 구현해야 할 수도 있습니다.
FragmentActivity 및 AppCompatActivity의 기본 클래스인 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_back가 true이면 앱은 뒤로 이동 동작을 구현해야 합니다.
사용자가 딥 링크 다음에 처음으로 버튼을 누를 때 뒤로 버튼이 아닌 다른 버튼을 누르면 뒤로 이동 요구사항이 적용되지 않으며 표준 뒤로 버튼 동작만 필요합니다.
예를 들어 딥 링크를 따라간 사용자가 D패드의 선택 버튼을 누르면 컨트롤 오버레이가 표시된다고 가정해 보겠습니다. 사용자는 오버레이가 사라질 때까지 기다린 후 뒤로 버튼을 누릅니다. 딥 링크를 따라간 후에 눌린 첫 번째 버튼이 D패드 선택 버튼이므로 뒤로 이동 요구사항이 적용되지 않습니다. 대신 일반 앱 백 스택 로직이 적용됩니다.
뒤로 버튼을 반복해서 누르면 사용자가 앱 루트로 이동한 다음 무한 루프 없이 Google TV 또는 Android TV로 돌아가야 합니다. 자세한 내용은 예측 가능한 뒤로 버튼 동작 섹션을 참고하세요.
탐색 아키텍처
고정 시작 대상
사용자가 런처에서 앱을 실행할 때 표시되는 첫 번째 화면은 뒤로 버튼을 누른 후 런처로 돌아갈 때 마지막으로 표시되는 화면이기도 합니다.
수동 탐색을 시뮬레이션하는 딥 링크
딥 링크를 사용하든 수동으로 특정 대상으로 이동하는지와 상관없이 사용자는 뒤로 버튼을 사용하여 대상을 통해 다시 시작 대상으로 이동할 수 있습니다.
다른 앱에서 앱으로 연결되는 딥 링크는 수동 탐색을 시뮬레이션합니다. 예를 들어 사용자가 Google TV에서 Moviestar 앱의 세부정보 페이지로 직접 이동한 후 뒤로 버튼을 누르면 Moviestar 앱의 홈페이지로 이동합니다.
포커스 가능한 모든 요소의 경로 지우기
사용자가 명확한 방향으로 UI를 탐색할 수 있도록 합니다. 컨트롤로 이동하는 직선 경로가 없으면 컨트롤의 위치를 변경하는 것이 좋습니다.
권장
여기에 표시된 검색 작업과 같은 클릭 가능한 다른 요소와 겹치지 않는 위치에 컨트롤을 배치합니다.
금지사항
접근하기 어려운 위치에 컨트롤이 포함된 레이아웃을 피합니다. 여기에 표시된 검색 작업에 도달하는 것은 D패드로 관리하기가 쉽지 않습니다.
축
가로축과 세로축을 모두 활용할 수 있도록 레이아웃을 디자인합니다. 각 방향에 특정 함수를 부여하여 큰 계층 구조를 빠르게 탐색할 수 있습니다.
권장.
카테고리는 세로축에서 순회할 수 있고 각 카테고리 내의 항목은 가로축에서 탐색할 수 있습니다.
금지사항
복잡하고 중첩된 레이아웃 계층 구조를 사용하지 마세요.