레이아웃은 레이아웃을 유지하기 위한 프레임워크를 제공하는 구조적 템플릿입니다. 시각적 일관성이 유지될 수 있습니다 시각적 그리드, 간격, 섹션, 레이아웃은 페이지의 일관되고 체계적인 구조를 정보 및 UI 요소의 표시 방법을 살펴보겠습니다.
![레이아웃용 표지 이미지](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?authuser=0000&hl=ko)
하이라이트
- 웹이나 모바일과 달리 TV는 화면의 가로세로 비율이 16:9로 고정되어 있습니다.
- 사용하기 쉽도록 가로축과 세로축을 따라 레이아웃을 최적화합니다. 관리할 수 있습니다
원칙
TV 레이아웃을 디자인할 때 디자인을 결정하는 데 도움이 되는 가이드라인입니다.
![대형 화면을 위한 디자인](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?authuser=0000&hl=ko)
대형 화면용으로 디자인하기
HDTV가 대중화된 이후, 가로세로 비율이 16:9인 직사각형 TV가 표준이 되었습니다. 이전에 텔레비전은 가로세로 비율이 4:3 또는 1.33:1인 정사각형 모양으로 제조되었습니다.
![Android를 위한 디자인](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/design-on-android-platform.webp?authuser=0000&hl=ko)
Android 플랫폼에서 디자인하기
디자인할 때 dp를 사용하여 다른 Android 지원 기기에서와 마찬가지로 다양한 밀도의 화면에 요소를 균일하게 표시합니다. 항상 MDPI 해상도(960px * 540px)로 디자인합니다.
MDPI 1px = 1dp
확장 소재의 목표는 1080p여야 합니다. 이렇게 하면 Android 시스템에서 필요한 경우 레이아웃 요소를 720p로 축소할 수 있습니다.
![가시성 확보](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/ensuring-visibility-and-overscan-safety.webp?authuser=0000&hl=ko)
가시성 및 오버스캔 방지 보장
중요한 요소가 항상 사용자에게 표시되는지 확인 이렇게 하려면 레이아웃의 왼쪽과 오른쪽에 48dp의 여백 5%, 레이아웃의 상단과 하단에 27dp의 여백을 두고 요소를 배치합니다. 이렇게 하면 레이아웃의 화면 요소가 오버스캔 내에 있게 됩니다.
![전체 화면 채우기](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?authuser=0000&hl=ko)
전체 화면 채우기
백그라운드 화면 요소를 오버스캔 방지 영역에 맞게 조정하거나 자르지 않습니다. 대신 오프스크린 요소의 부분 표시를 허용합니다. 이렇게 하면 모든 화면에 배경 및 화면 밖 요소가 올바르게 표시됩니다.
![축을 사용하여 최적화](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?authuser=0000&hl=ko)
축을 사용하여 최적화
사람들이 TV에서 리모컨을 어떻게 사용하는지 생각해 보세요. 리모컨을 사용한 TV 인터페이스가 간단한지 확인합니다. 각 방향 (위, 아래, 왼쪽, 오른쪽)은 명확한 목적과 탐색 패턴이 있도록 설계하여 사용자가 대규모 옵션 그룹을 어떻게 이동하는지 이해할 수 있도록 합니다.
레이아웃
TV 화면 크기는 기기마다 다릅니다. 최신 TV에는 가로 세로 비율이 16:9일 때를 대비하여 앱을 디자인하는 것이 좋습니다. 960x540px 화면 크기입니다. 이렇게 하면 모든 요소가 HD 또는 4K 화면에 맞게 비례하여 크기가 조정됩니다
오버스캔 여백
오버스캔 여백은 콘텐츠와 화면의 왼쪽과 오른쪽 가장자리에
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
이러한 테두리 여백은 기본 요소를 잠재적인 오버스캔 문제로부터 보호합니다. 콘텐츠와 정보를 안전하게 유지하려면 5% 여백 레이아웃을 사용하세요. (측면 58dp, 상단 및 하단 가장자리 28dp)
기둥 및 거터
콘텐츠는 열과 여백이 있는 화면 영역에 배치됩니다. 그리드 시스템에는 열이 12개 있습니다. 홈통은 콘텐츠를 분할하는 데 도움이 되는 열입니다.
너비가 52dp이고 사이에 간격이 20dp인 열 12개를 사용합니다. 양쪽에 58dp의 여유 공간과 4dp의 세로 공간이 있어야 합니다. 줄 간격
레이아웃 패턴
원하는 목적에 따라 세 가지 레이아웃 패턴을 사용할 수 있습니다. 수평 스택 레이아웃, 세로 스택 레이아웃, 그리드 레이아웃입니다.
가로 스택 레이아웃
수평 스택 레이아웃은 구성요소를 가로로 정렬합니다. 크기, 비율, 형식이 다를 수 있습니다. 이 레이아웃은 콘텐츠 및 구성요소를 그룹화하는 데 사용됩니다.
세로 스택 레이아웃
세로 스택 레이아웃은 구성요소를 세로로 정렬하며, 크기, 비율, 형식을 유연하게 설정할 수 있습니다 일반적으로 다양한 유형의 텍스트, 대화형 구성요소, 사용할 수 있습니다.
그리드 레이아웃
그리드는 교차하는 열과 행의 모음, 그리고 그리드는 레이아웃에서 이 그리드에 콘텐츠를 표시합니다. 콘텐츠를 논리적이고 사용자가 손쉽게 탐색하고 탐색할 수 있습니다.
겹치지 않도록 하려면 셀 안쪽의 패딩을 고려해야 합니다. 항목 및 포커스 상태의 크기 증가를 지원합니다. 예를 들어 포커스가 있는 구성요소 (예: 카드)가 강조 표시됩니다. Google에서 추천하는 그리드 레이아웃 (52dp의 12열, 20dp의 여백), 구성요소 레이아웃과 미리보기를 확인하는 것이 좋습니다
레이아웃 구조
광고의 질을 높이는 데 도움이 되는 몇 가지 레이아웃 구조는 고려해야 할 사항이 많습니다. TV 화면을 가로로 나누면 다른 유형의 구성 요소를 분리하고 정보를 전달하는 데 계층 구조 및 탐색 로직을 구성할 수 있습니다 창은 여러 단위 열을 포함할 수 있습니다. 각 패널은 스택 레이아웃과 같은 다양한 레이아웃 패턴을 호스팅할 수 있음 그리드 레이아웃입니다.
![단일 창 레이아웃 예](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?authuser=0000&hl=ko)
단일 창 레이아웃
단일 창 레이아웃은 주요 콘텐츠에 대한 관심을 유도하는 데 도움이 될 수 있습니다. 콘텐츠 중심 경험과 중요한 정보 페이지에서 사용할 수 있습니다.
![창이 두 개인 레이아웃 예](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=0000&hl=ko)
창이 두 개인 레이아웃
창이 두 개인 레이아웃은 페이지에 계층적 콘텐츠가 표시될 때 성능이 더 좋습니다. 작업 전달 환경에서 널리 사용됩니다.
인지 과부하
복잡하고 불분명한 콘텐츠는 혼란과 짜증을 유발하거나 참여를 유도할 수 있습니다. 눈에 잘 띄고 깔끔하게 정돈된 디자인을 사용하세요. 꼭 필요한 정보만 얻을 수 있습니다.
콘텐츠를 그룹화하는 데 너무 많은 패널을 사용하지 않도록 합니다. 이렇게 하면 계층 구조가 사용자에게 영향을 줄 수 있습니다
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?authuser=0000&hl=ko)
권장사항
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?authuser=0000&hl=ko)
금지사항
익스프레스 계층 구조 및 탐색
패널은 콘텐츠를 시각적으로 구분하고 정리합니다. 사용자를 안내하고 사용 환경을 개선하는 보다 직관적인 인터페이스를 만들 수 있습니다.
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=0000&hl=ko)
권장사항
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?authuser=0000&hl=ko)
금지사항
레이아웃 템플릿
레이아웃 템플릿은 순서, 일관성 및 친숙함을 촉진합니다. 설계 사용자가 광고를 볼 수 있는 위치를 명확하게 전달하는 편안한 UI 환경을 사용자가 어디로 갈 수 있는지에 대한 정보입니다.
찾아보기
미디어 콘텐츠 '클러스터'를 표시하는 브라우저 템플릿 또는 행을 포함할 수 있습니다. 사용자는 위아래로 탐색하여 행을 탐색하고, 좌우로 탐색하여 특정 행의 콘텐츠를 탐색할 수 있습니다.
![찾아보기](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/browse.webp?authuser=0000&hl=ko)
왼쪽 오버레이
왼쪽 탐색 템플릿은 화면 왼쪽에 오버레이 패널을 표시합니다. 일반적으로 백그라운드에서 콘텐츠와 관련하여 작업할 수 있는 탐색 메뉴나 항목이 표시됩니다.
![왼쪽 오버레이](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?authuser=0000&hl=ko)
오른쪽 오버레이
오른쪽 오버레이 템플릿은 화면 오른쪽에 오버레이 패널을 표시합니다. 일반적으로 백그라운드 콘텐츠와 독립적으로 작업한 항목이 표시됩니다.
![오른쪽 오버레이](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?authuser=0000&hl=ko)
중앙 오버레이
가운데 오버레이 템플릿은 기존 뷰 위에 오버레이되는 모달 요소를 표시합니다. 긴급한 정보를 전달하거나 결정을 내리는 데 사용됩니다.
![중앙 오버레이](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?authuser=0000&hl=ko)
하단 오버레이
하단 오버레이 템플릿은 일반적으로 하단 시트에 사용됩니다. 하단 시트는 화면 하단에 고정된 보완 콘텐츠를 포함하는 표면입니다. 이 템플릿을 사용하면 현재 페이지의 맥락을 유지하면서 미니 흐름을 만들 수 있습니다.
![하단 오버레이](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?authuser=0000&hl=ko)
작업
작업 템플릿의 왼쪽에는 제목과 부제목이 표시되고 오른쪽에는 옵션 또는 작업이 표시됩니다. 사용자는 일반적으로 이 템플릿을 사용해 옵션을 선택하거나 작업을 수행하라는 요청을 받습니다.
![작업](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/actions.webp?authuser=0000&hl=ko)
콘텐츠 세부정보
콘텐츠 세부정보 템플릿은 가로 스택 레이아웃으로 콘텐츠를 표시합니다. 콘텐츠에는 일반적으로 제목, 메타데이터, 간단한 설명, 빠른 작업, 관련 정보 클러스터가 포함됩니다.
![콘텐츠 세부정보](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?authuser=0000&hl=ko)
컴파일
편집 템플릿은 화면 왼쪽에 있는 항목(예: 팟캐스트)의 세부정보와 해당 요소(예: 에피소드)가 오른쪽 패널에 표시됩니다.
![컴파일](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?authuser=0000&hl=ko)
그리드
그리드 템플릿은 정리된 그리드에 콘텐츠 컬렉션을 표시합니다. 명확한 원격 탐색 로직과 최적의 탐색 환경을 갖춘 콘텐츠를 표시합니다.
![그리드](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?authuser=0000&hl=ko)
주의
알림 템플릿은 전체 화면 메시지를 표시합니다. 일반적으로 알림을 차단 해제하고 이전 화면으로 돌아가려면 조치를 취해야 합니다.
![주의](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/alert.webp?authuser=0000&hl=ko)
카드 열
카드 레이아웃 1개
카드 너비 — 844dp
![카드 레이아웃 1개](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?authuser=0000&hl=ko)
2카드 레이아웃
카드 너비 — 412dp
![2카드 레이아웃](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?authuser=0000&hl=ko)
3 카드 레이아웃
카드 너비 — 268dp
![3 카드 레이아웃](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?authuser=0000&hl=ko)
4 카드 레이아웃
카드 너비 — 196dp
![4 카드 레이아웃](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?authuser=0000&hl=ko)
5 카드 레이아웃
카드 너비: 124dp
![5 카드 레이아웃](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?authuser=0000&hl=ko)