TV 레이아웃 빌드

TV 화면은 일반적으로 3m 정도 떨어져서 봅니다. 이런 유형의 화면은 다른 대부분의 Android 기기 화면보다 크기가 훨씬 크지만 작은 기기에 비해 디테일과 색상의 정확도가 떨어집니다. 이러한 요인 때문에 유용하고 즐거운 사용자 경험을 제공하려면 TV 기기를 염두에 두고 앱 레이아웃을 만들어야 합니다.

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

Android 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 활동에 이 테마를 적용하여 제목 표시줄 화면을 숨기도록 해야 합니다. 다음의 TV 앱 manifest 코드 예는 이 테마를 적용하여 제목 표시줄 화면을 제거하는 방법을 보여줍니다. 

    <application>
      ...

      <activity
        android:name="com.example.android.TvActivity"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar">
        ...

      </activity>
    </application>

기본 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>

주의: BrowseFragment 같은 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 정도 떨어져 있는 사람에게도 명확히 보이도록 충분히 크게 만듭니다. 화면이 매우 큰 경우 이 거리는 더 멀어집니다. 가장 좋은 방법은 절대 크기가 아니라 레이아웃에 비례하는 크기를 사용하고, 절대 픽셀 단위가 아니라 dip(밀도 독립형 픽셀) 단위를 사용하는 것입니다. 예를 들어 위젯 너비를 설정하려면 픽셀 측정이 아닌 wrap_content를 사용하고 위젯 여백을 설정하려면 px 값이 아닌 dip 값을 사용하세요.

밀도 독립형 픽셀과 큰 화면 크기를 처리하는 레이아웃 빌드에 관한 자세한 정보는 여러 화면 지원을 참조하세요.

TV 레이아웃 리소스 관리

일반적인 고화질 TV 디스플레이 해상도는 720p, 1080i, 1080p입니다. TV 레이아웃은 화면 크기를 1920 x 1080 픽셀로 타겟팅하고 Android 시스템이 필요에 따라 레이아웃 요소를 720p까지 낮출 수 있게 허용해야 합니다. 일반적으로 해상도를 축소해도(픽셀 제거) 레이아웃 표시 화질은 하락하지 않습니다. 하지만 해상도를 높이면 레이아웃 화질을 하락시키는 디스플레이 아티팩트가 발생하여 앱 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

이미지 크기 조정에서 최적의 결과를 얻으려면 가능한 한 9-패치 이미지 요소로 제공하세요. 레이아웃에서 저화질 또는 작은 이미지를 제공할 경우, 이미지가 깨지거나 흐릿하거나 선명하지 않게 나타나므로 사용자에게 좋은 환경을 제공할 수 없습니다. 대신 고화질 이미지를 사용하세요.

큰 화면에 맞게 레이아웃과 리소스를 최적화하는 방법에 관한 정보는 다양한 화면에 맞게 디자인을 참조하세요.

레이아웃 안티 패턴 회피

TV 기기에서 제대로 작동하지 않고 좋지 않은 사용자 경험을 제공하므로 피해야 하는 레이아웃 빌드 방식이 몇 가지 있습니다. TV 레이아웃을 개발할 때 특히 사용하지 말아야 할 사용자 인터페이스 방식은 다음과 같습니다.

  • 스마트폰 또는 태블릿 레이아웃 재사용 - 스마트폰 또는 태블릿 앱의 레이아웃을 수정 없이 다시 사용하지 마세요. 다른 Android 기기 폼 팩터용으로 빌드된 레이아웃은 TV 기기에 적합하지 않으므로 TV에서 작동하도록 간소화해야 합니다.
  • ActionBar - 스마트폰 및 태블릿에서는 이 사용자 인터페이스 규칙을 사용하는 것이 좋지만, TV 인터페이스에는 적합하지 않습니다. 특히, 작업 표시줄 옵션 메뉴(또는 모든 풀다운 메뉴)는 리모컨으로 메뉴를 탐색하기 어려우므로 가능하면 사용하지 않는 것이 좋습니다.
  • ViewPager - 화면을 슬라이드해서 전환하는 동작은 스마트폰 또는 태블릿에서는 잘 작동하지만 TV에서는 사용하지 마세요!

TV에 적합한 레이아웃 디자인에 관한 자세한 정보는 TV 디자인 가이드를 참조하세요.

큰 비트맵 처리

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

효과적인 광고 제공

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

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

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

이전
TV 컨트롤러 관리
다음
터치 키보드