TV 화면은 일반적으로 약 3m 떨어진 곳에서 볼 수 있으며 다른 대부분의 Android 지원 기기 디스플레이보다 크기가 훨씬 크지만 TV 화면은 소형 기기 화면과 같은 수준의 세부정보와 색상을 제공하지 않습니다. 이러한 요인으로 인해 유용하고 즐거운 사용자 환경을 만들려면 TV 기기를 염두에 두고 앱 레이아웃을 만들어야 합니다.
TV 레이아웃 테마 사용
Android 테마는 TV 앱 레이아웃의 기초를 제공할 수 있습니다. 테마를 사용하여 TV 기기에서 실행할 앱 활동의 표시를 수정합니다. 이 섹션에서는 사용할 테마를 설명합니다.
Leanback 테마
androidx.leanback 라이브러리에는 일관된 시각적 스타일을 제공하는 TV 활동의 테마인 Theme.Leanback가 포함되어 있습니다. AndroidX Leanback 클래스로 빌드된 모든 TV 앱에 이 테마를 사용합니다. 다음 코드 샘플은 이 테마를 활동에 적용하는 방법을 보여줍니다.
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar 테마
제목 표시줄은 스마트폰 및 태블릿의 Android 앱용 표준 사용자 인터페이스 요소이지만 TV 앱에는 적합하지 않습니다. AndroidX Leanback 클래스를 사용하지 않는다면 TV 활동에 NoTitleBar 테마를 적용하여 제목 표시줄이 표시되지 않도록 합니다. 다음 TV 앱 매니페스트의 코드 예는 이 테마를 적용하여 제목 표시줄 표시를 제거하는 방법을 보여줍니다.
<application>
...
<activity
android:name="com.example.android.TvActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
...
</activity>
</application>
AppCompat 테마
Android 모바일 앱에서는 AppCompatActivity를 Theme.AppCompat 테마 중 하나와 함께 사용하는 것이 매우 일반적입니다. 이렇게 조합하면 기기에서 실행 중인 Android 버전을 신경 쓰지 않고 드로어블 색조 조정과 같은 기능을 사용할 수 있습니다. Android TV에서만 실행되는 앱을 개발하는 경우 Android TV에서 지원하는 기능이 이미 Android TV에서 사용 가능하거나 관련이 없으므로 AppCompatActivity을 사용하지 마세요.
Android 모바일과 Android TV 간에 공유되는 코드베이스로 앱을 빌드하는 경우 테마 설정으로 인해 몇 가지 문제가 발생할 수 있습니다. AppCompatActivity 및 다양한 AppCompat 위젯에서는 Theme.AppCompat를 사용해야 하지만 Leanback UI 도구 키트 프래그먼트는 FragmentActivity 및 Theme.Leanback를 사용해야 합니다.
Android 모바일과 Android TV에 동일한 기본 활동을 사용해야 하거나 AppCompatImageView와 같은 AppCompat 위젯에 기반한 맞춤 뷰를 사용하려는 경우 Theme.AppCompat.Leanback 테마를 사용하세요. 이러한 테마는 AppCompat의 모든 테마 설정을 제공하며 Leanback 전용 값도 제공합니다.
다른 테마와 동일한 방식으로 Theme.AppCompat.Leanback 테마를 맞춤설정할 수 있습니다. 예를 들어, Leanback UI 툴킷의 OnboardingSupportFragment와 관련된 값을 변경하려면 다음과 유사한 작업을 실행하세요.
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
<item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
<item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>
기본 TV 레이아웃 빌드
TV 기기용 레이아웃은 대형 화면에서 사용할 수 있고 효과적일 수 있도록 몇 가지 기본 가이드라인을 따라야 합니다. 다음 팁에 따라 TV 화면에 최적화된 레이아웃을 빌드하세요.
- 가로 방향 레이아웃 빌드. TV 화면은 언제나 가로 모드로 표시됩니다.
- 화면의 왼쪽이나 오른쪽에 화면 탐색 컨트롤을 배치하고 세로 공간을 콘텐츠용으로 저장하세요.
- 프래그먼트를 사용하여 섹션으로 나뉘는 UI를 만듭니다. 가로 화면 공간을 더 잘 활용하려면
ListView대신GridView와 같은 뷰 그룹을 사용하세요. RelativeLayout또는LinearLayout와 같은 뷰 그룹을 사용하여 뷰를 정렬합니다. 이 접근 방식을 사용하면 시스템에서 TV 화면의 크기, 정렬, 가로세로 비율 및 픽셀 밀도에 따라 뷰의 위치를 조정할 수 있습니다.- 레이아웃 컨트롤 사이에 충분한 여백을 두어서 UI가 어수선하지 않게 합니다.
오버스캔
시청자에게 전체 화면 영상을 표시하기 위해 TV 표준이 발전함에 따라 TV 레이아웃에는 몇 가지 고유한 요구사항이 있습니다. 이러한 이유로 TV 기기는 전체 화면이 채워지도록 앱 레이아웃의 바깥 가장자리를 자를 수 있습니다. 이러한 동작을 일반적으로 오버스캔이라고 합니다.
항상 사용자에게 표시되어야 하는 화면 요소를 오버스캔 방지 영역 내에 배치합니다. 레이아웃의 왼쪽과 오른쪽 가장자리에 48dp, 상단 및 하단 가장자리에 27dp 여백을 5% 추가하여 레이아웃의 화면 요소가 오버스캔 방지 영역 내에 있도록 할 수 있습니다.
사용자가 직접 상호작용하지 않는 백그라운드 화면 요소를 조정하지 말고 요소를 오버스캔 방지 영역에 자르지 마세요. 이 접근 방식을 사용하면 백그라운드 화면 요소가 모든 화면에서 올바르게 표시됩니다.
다음 예는 백그라운드 요소를 포함할 수 있는 루트 레이아웃과 여백이 5% 이고 오버스캔 방지 영역 내에 요소를 포함할 수 있는 중첩된 하위 레이아웃을 보여줍니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Screen elements that can render outside the overscan-safe area go here. -->
<!-- Nested RelativeLayout with overscan-safe margin. -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="27dp"
android:layout_marginBottom="27dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp">
<!-- Screen elements that need to be within the overscan-safe area go here. -->
</RelativeLayout>
</RelativeLayout>
주의: BrowseSupportFragment와 같은 AndroidX Leanback 클래스나 관련 위젯을 사용하는 경우 레이아웃에 이미 오버스캔 방지 여백이 통합되어 있으므로 오버스캔 여백을 레이아웃에 적용하지 마세요.
사용 가능한 텍스트 및 컨트롤 빌드
다음 팁을 따르면 TV 앱의 텍스트와 컨트롤을 멀리서도 더 쉽게 볼 수 있습니다.
- 사용자가 쉽게 스캔할 수 있는 작은 덩어리로 텍스트를 나눕니다.
- 어두운 배경에 밝은 텍스트를 사용합니다. TV에서는 이 스타일이 읽기 쉽습니다.
- 얇은 글꼴 또는 획이 매우 좁거나 넓은 글꼴은 피합니다. 단순한 sans-serif 글꼴과 앤티앨리어싱을 사용하여 가독성을 높입니다.
- Android의 표준 글꼴 크기를 사용합니다.
<TextView android:id="@+id/atext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleLine="true" android:textAppearance="?android:attr/textAppearanceMedium"/> - 모든 뷰 위젯은 화면에서 3m 떨어진 곳에 있는 사람이 선명하게 볼 수 있을 정도로 크게 만듭니다. 가장 좋은 방법은 절대 크기보다는 레이아웃에 비례하는 크기를 사용하고, 절대 픽셀 단위 대신 밀도 독립형 픽셀 (dp) 단위를 사용하는 것입니다. 예를 들어 위젯 너비를 설정하려면 픽셀 측정 단위 대신
wrap_content를 사용하고 위젯 여백을 설정하려면 px 값 대신 dp 값을 사용합니다.
밀도 독립형 픽셀과 큰 화면 크기를 처리하는 레이아웃 빌드에 관한 자세한 내용은 화면 호환성 개요를 참고하세요.
TV 레이아웃 리소스 관리
다른 모든 Android 기기와 마찬가지로 TV는 화면 크기가 다양하며 720p, 1080p, 4K를 포함하되 이에 국한되지 않는 다양한 해상도를 지원합니다. 앱이 다양한 화면 크기를 지원하는지 확인합니다.
화면 크기와 해상도에 따라 픽셀 밀도가 다릅니다. 화면 크기, 해상도, 픽셀 밀도에서 UI 모양을 유지하려면 픽셀이 아닌 밀도 독립형 픽셀 (dp)을 사용하여 UI 측정을 정의하세요. 다양한 TV 패널 해상도의 화면 픽셀 밀도는 아래에 요약되어 있습니다.
| 패널 해상도 | 화면 픽셀 밀도 |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
대형 화면에 맞게 레이아웃과 리소스를 최적화하는 방법에 관한 자세한 내용은 화면 호환성 개요를 참고하세요.
피해야 할 레이아웃 패턴
TV 기기에서 제대로 작동하지 않는 레이아웃을 빌드하는 데는 몇 가지 접근 방식이 있습니다. 다음은 TV 레이아웃을 개발할 때 피해야 할 사용자 인터페이스 접근 방식입니다.
- 스마트폰 또는 태블릿 레이아웃 재사용: 스마트폰 또는 태블릿 앱의 레이아웃을 수정 없이 재사용하면 안 됩니다. 다른 Android 기기 폼 팩터용으로 빌드된 레이아웃은 TV 기기에 적합하지 않으므로 TV에서 작동하려면 이를 단순화해야 합니다.
ActionBar사용: 휴대전화 및 태블릿에서는 작업 모음을 사용하는 것이 좋지만 TV 인터페이스에는 적합하지 않습니다. TV 앱에서는 작업 모음 옵션 메뉴나 모든 풀다운 메뉴를 사용하지 않는 것이 좋습니다. 리모컨으로 메뉴를 탐색하기가 어려우니까요.ViewPager사용: 화면을 슬라이드하는 동작은 휴대전화나 태블릿에서는 잘 작동할 수 있지만 TV에서는 사용하지 마세요.
TV에 적합한 레이아웃 디자인에 관한 자세한 내용은 TV 디자인 가이드를 참조하세요.
큰 비트맵 처리
TV 기기는 다른 Android 기기와 마찬가지로 메모리 용량에 제한이 있습니다. 매우 고해상도 이미지로 앱 레이아웃을 빌드하거나 앱 작동에 고해상도 이미지를 많이 사용하면 빠르게 메모리 제한에 도달하여 메모리 오류가 발생할 수 있습니다. 대부분의 경우 Glide 라이브러리를 사용하여 앱에서 비트맵을 가져오고 디코딩하고 표시하는 것을 추천합니다. 비트맵을 사용할 때 최고의 성능을 얻는 방법에 관한 자세한 내용은 일반 Android 그래픽 권장사항을 참고하세요.
효과적인 광고 제공
거실 환경에서는 전체 화면으로 표시되고 30초 이내에 닫을 수 있는 동영상 광고 솔루션을 사용하는 것이 좋습니다. 닫기 버튼 및 클릭과 같은 Android TV 광고 기능은 터치가 아닌 D패드를 사용하여 액세스할 수 있어야 합니다.
Android TV는 웹 브라우저를 제공하지 않습니다. 광고가 웹브라우저를 실행하거나 Android TV 기기에서 승인되지 않은 Google Play 스토어 콘텐츠로 리디렉션하려고 해서는 안 됩니다.
참고: 소셜 미디어 서비스 로그인을 위해 WebView 클래스를 사용할 수 있습니다.