TV 레이아웃 빌드

TV 화면은 일반적으로 약 3m 떨어진 곳에서 볼 수 있으며, 대부분의 다른 Android 기기 디스플레이보다 훨씬 크지만 TV 화면은 작은 기기 화면과 같은 수준의 세부정보와 색상을 제공하지 않습니다. 이러한 요인으로 인해 유용하고 즐거운 사용자 환경을 만들기 위해서는 TV 기기를 염두에 두고 앱 레이아웃을 만들어야 합니다.

이 가이드에서는 TV 앱에 효과적인 레이아웃을 빌드하는 데 필요한 최소 요구사항과 구현 세부정보를 설명합니다.

자세한 내용은 TV용 디자인을 참고하세요.

TV 레이아웃 테마 사용

Android 테마는 TV 앱 레이아웃의 기반을 제공할 수 있습니다. 테마를 사용하여 TV 기기에서 실행할 앱 활동 표시를 수정하세요. 이 섹션에서는 사용할 테마를 설명합니다.

Leanback 테마

Leanback androidx 라이브러리에는 일관된 시각적 스타일을 제공하는 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 모바일 앱에서는 Theme.AppCompat 테마 중 하나와 함께 AppCompatActivity를 사용하는 것이 매우 일반적입니다. 이 조합을 사용하면 기기에서 실행되는 Android 버전에 관계없이 드로어블 색조 조정과 같은 기능을 사용할 수 있습니다. Android TV에서만 실행되는 앱을 개발하는 경우 AppCompatActivity를 사용할 필요가 없습니다. Android TV에서 사용 설정된 기능이 이미 Android TV에서 사용 가능하거나 관련이 없기 때문입니다.

Android 모바일과 Android TV 간에 공유 코드베이스를 사용하여 앱을 빌드하는 경우 테마 설정으로 인해 몇 가지 문제가 발생할 수 있습니다. AppCompatActivity 및 다양한 AppCompat 위젯에서는 Theme.AppCompat를 사용해야 하는 반면 Leanback 프래그먼트에서는 FragmentActivityTheme.Leanback를 사용해야 합니다.

Android 모바일과 Android TV에 동일한 기본 활동을 사용해야 하거나 AppCompatImageView와 같은 AppCompat 위젯에 기반한 맞춤 뷰를 사용하려면 Theme.AppCompat.Leanback 테마를 사용하세요. 이러한 테마는 AppCompat의 모든 테마 설정을 제공하며 Leanback 전용 값도 제공합니다.

다른 테마와 동일한 방식으로 Theme.AppCompat.Leanback 테마를 맞춤설정할 수 있습니다. 예를 들어 Leanback의 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% 이며 오버스캔 방지 영역 내에 요소를 포함할 수 있는 중첩된 하위 레이아웃과 백그라운드 요소를 포함할 수 있는 루트 레이아웃을 보여줍니다.

<?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>

주의: AndroidX Leanback 클래스(예: BrowseFragment) 또는 관련 위젯을 사용하는 경우 레이아웃에 이미 오버스캔 방지 여백이 통합되어 있으므로 오버스캔 여백을 레이아웃에 적용하지 마세요.

사용 가능한 텍스트 및 컨트롤 빌드

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 디자인 가이드를 참조하세요.

큰 비트맵 처리

다른 Android 기기와 마찬가지로 TV 기기는 메모리 용량에 제한이 있습니다. 매우 고해상도 이미지로 앱 레이아웃을 빌드하거나 앱 작업에 많은 고해상도 이미지를 사용하면 메모리 제한에 빠르게 도달하고 메모리 오류가 발생할 수 있습니다. 대부분의 경우 Glide 라이브러리를 사용하여 앱에서 비트맵을 가져오고 디코딩하고 표시하는 것을 추천합니다. 비트맵을 사용할 때 최상의 성능을 얻는 방법에 관한 자세한 내용은 일반 Android 그래픽 권장사항을 참고하세요.

효과적인 광고 제공

거실 환경에서는 전체 화면이 표시되고 30초 이내에 닫을 수 있는 동영상 광고 솔루션을 사용하는 것이 좋습니다. 닫기 버튼이나 클릭 같은 Android TV 광고 기능은 터치가 아니라 D패드를 사용하여 액세스할 수 있어야 합니다.

Android TV는 웹 브라우저를 제공하지 않습니다. 광고에서 웹브라우저를 실행하거나 Android TV 기기에서 승인되지 않은 Google Play 스토어 콘텐츠로 리디렉션을 시도해서는 안 됩니다.

참고: 소셜 미디어 서비스 로그인을 위해 WebView 클래스를 사용할 수 있습니다.