TV 기기는 앱에 제한된 탐색 컨트롤 세트를 제공합니다. TV 앱에 효과적인 탐색 기법을 구현하려면 이러한 제한된 컨트롤과 앱 작동 중 사용자의 인식 한계를 이해해야 합니다. TV용 Android 앱을 빌드할 때는 터치스크린이 아닌 리모컨 버튼을 사용하여 사용자가 실제로 앱을 탐색하는 방식에 특히 주의해야 합니다.
이 과정에서는 효과적인 TV 앱 탐색 기법을 만들기 위한 최소 요구사항과 이러한 요구사항을 앱에 적용하는 방법을 설명합니다.
D패드 탐색 사용
TV 기기에서는 사용자가 리모컨 기기의 컨트롤을 통해 탐색하며, 이때 방향 패드(D패드)나 화살표 키를 사용합니다. 이러한 유형의 컨트롤에서는 위, 아래, 왼쪽, 오른쪽 방향으로 이동이 제한됩니다. TV에 최적화된 우수한 앱을 빌드하려면 사용자가 이렇게 제한된 컨트롤로 앱을 탐색하는 방법을 신속하게 배울 수 있는 탐색 기법을 제공해야 합니다.
Android 프레임워크는 레이아웃 요소 간 방향 탐색을 자동으로 처리하므로 일반적으로 앱에서 추가로 조치를 취할 필요가 없습니다. 하지만 D패드 컨트롤러로 탐색을 철저히 테스트하여 탐색 문제가 있는지 확인해야 합니다. 다음 가이드라인에 따라 앱 탐색 시스템이 TV 기기의 D패드로 잘 작동하는지 테스트하세요.
- 사용자가 D패드 컨트롤러를 사용하여 화면에 표시되는 모든 컨트롤로 이동할 수 있는지 확인합니다.
- 포커스가 있는 스크롤 목록의 경우 D패드 위/아래 키로 목록을 스크롤하고 Enter 키로 목록의 항목을 선택할 수 있어야 합니다. 사용자가 목록에서 요소를 선택할 수 있고 요소를 선택한 뒤에도 계속 목록을 스크롤할 수 있는지 확인합니다.
- 컨트롤 간 전환이 간단하고 예측 가능한지 확인합니다.
방향 탐색 수정
Android 프레임워크는 레이아웃에서 포커스 가능 요소의 상대 위치에 따라 방향 탐색 기법을 자동으로 적용합니다. 생성된 탐색 기법을 앱에서 D패드 컨트롤러를 사용하여 테스트해야 합니다. 테스트 후, 사용자가 레이아웃에서 특정한 방식으로 이동하게 하고 싶다면 컨트롤에 관한 명확한 방향 탐색을 설정하면 됩니다.
참고: 시스템에서 적용되는 기본 순서가 적절하지 않은 경우에만 이러한 속성을 사용하여 탐색 순서를 수정해야 합니다.
다음 코드 샘플은 TextView 레이아웃 객체와 관련된 포커스를 수신할 다음 컨트롤을 정의하는 방법을 보여줍니다.
<TextView android:id="@+id/Category1"
android:nextFocusDown="@+id/Category2"\>
다음 표에는 Android 사용자 인터페이스 위젯에 사용할 수 있는 모든 탐색 속성이 나와 있습니다.
| 속성 | 기능 |
|---|---|
nextFocusDown |
사용자가 아래로 이동할 때 포커스를 받는 다음 뷰를 정의합니다. |
nextFocusLeft |
사용자가 왼쪽으로 이동할 때 포커스를 받는 다음 뷰를 정의합니다. |
nextFocusRight |
사용자가 오른쪽으로 이동할 때 포커스를 받는 다음 뷰를 정의합니다. |
nextFocusUp |
사용자가 위로 이동할 때 포커스를 받는 다음 뷰를 정의합니다. |
이러한 명시적 탐색 속성 중 하나를 사용하려면 레이아웃의 다른 위젯 ID로 값을 설정합니다(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 앱에 효과적인 선택 및 포커스를 디자인하기 위한 추가 권장사항은 Android TV를 위한 디자인을 참조하세요.