레이아웃은 애플리케이션 전체에서 시각적 일관성을 유지하기 위한 프레임워크를 제공하는 구조적 템플릿입니다. 레이아웃은 시각적 그리드, 간격, 섹션을 정의하여 일관되고 체계적인 구조를 설정하여 정보와 UI 요소를 표시합니다.
하이라이트
- 웹이나 모바일과 달리 TV의 화면 가로세로 비율은 16:9로 고정되어 있습니다.
- 사용 및 제어 편의성을 위해 가로축 및 세로축을 따라 레이아웃을 최적화합니다.
원칙
TV 레이아웃을 디자인할 때 디자인을 결정하는 데 도움이 되는 가이드라인입니다.
대형 화면용으로 디자인하기
HDTV가 대중화되면서 가로세로 비율이 16:9인 직사각형 TV가 표준이 되었습니다. 이전에 텔레비전은 가로세로 비율이 4:3 또는 1.33:1이라고 하는 정사각형 모양으로 제조되었습니다.
Android 플랫폼에서 디자인하기
디자인할 때는 다른 Android 지원 기기와 마찬가지로 dp를 사용하여 다양한 밀도의 화면에 요소를 균일하게 표시합니다. 항상 MDPI 해상도에서 960x540픽셀로 디자인합니다.
MDPI에서 1px = 1dp입니다.
애셋은 1080p를 목표로 해야 합니다. 이렇게 하면 필요한 경우 Android 시스템에서 레이아웃 요소를 720p로 낮출 수 있습니다.
가시성 및 오버스캔의 안전 보장
중요한 요소는 항상 사용자에게 표시됩니다. 이렇게 하려면 레이아웃의 왼쪽과 오른쪽에 여백이 5% 인 요소를 48dp, 레이아웃의 상단과 하단에 배치하세요. 이렇게 하면 레이아웃의 화면 요소가 오버스캔 내에 있게 됩니다.
전체 화면 채우기
오버스캔 방지 영역에 맞게 배경 화면 요소를 조정하거나 잘라내지 않습니다. 대신 화면 밖 요소의 부분 표시를 허용합니다. 이렇게 하면 모든 화면에 배경 및 화면 밖 요소를 올바르게 표시할 수 있습니다.
축을 사용하여 최적화
사람들이 TV에 리모컨을 어떻게 사용할지 생각해 보세요. TV 인터페이스는 리모컨으로 쉽게 사용할 수 있어야 합니다. 사용자가 많은 옵션 그룹을 통해 이동하는 방법을 이해할 수 있도록 각 방향 (위, 아래, 왼쪽, 오른쪽)을 디자인하여 명확한 목적과 탐색 패턴을 갖도록 합니다.
레이아웃
TV 화면 크기는 기기마다 다릅니다. 최신 TV의 가로세로 비율이 16:9이므로 앱을 960px x 540px 화면 크기로 디자인하는 것이 좋습니다. 이렇게 하면 모든 요소의 크기를 HD 또는 4K 화면에 맞게 조정할 수 있습니다.
오버스캔 여백
오버스캔 여백은 콘텐츠와 화면의 왼쪽 및 오른쪽 가장자리 사이의 공간입니다.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
이러한 테두리 여백은 잠재적인 오버스캔 문제로부터 기본 요소를 보호합니다. 콘텐츠와 정보를 안전하게 유지하려면 5% 여백 레이아웃을 사용하세요(측면 58dp, 상단 및 하단 가장자리 28dp).
열 및 여백
콘텐츠는 열과 여백이 있는 화면 영역에 배치됩니다. 그리드 시스템에는 12개의 열이 있습니다. 거터는 열 사이의 공간으로, 콘텐츠를 나누는 데 도움이 됩니다.
너비가 52dp이고 사이에 간격이 20dp인 열 12개를 사용합니다. 양쪽에 58dp의 공간과 줄 사이의 세로 간격 4dp가 있어야 합니다.
레이아웃 패턴
의도된 목적과 디스플레이 기기에 따라 수평 스택 레이아웃, 수직 스택 레이아웃, 그리드 레이아웃의 세 가지 레이아웃 패턴을 사용할 수 있습니다.
가로 스택 레이아웃
가로 스택 레이아웃은 구성요소를 가로로 정렬합니다. 광고 소재의 크기, 비율 또는 형식이 다양할 수 있습니다. 이 레이아웃은 콘텐츠와 구성요소를 그룹화하는 데 주로 사용됩니다.
세로 스택 레이아웃
세로 스택 레이아웃은 구성요소를 세로로 정렬하여 크기, 비율, 형식을 유연하게 구성할 수 있습니다. 일반적으로 다양한 유형의 텍스트, 대화형 구성요소, 레이아웃 패턴을 함께 그룹화하는 데 사용됩니다.
그리드 레이아웃
그리드는 교차하는 열과 행의 모음이고 그리드 레이아웃은 이 그리드에 콘텐츠를 표시합니다. 콘텐츠를 논리적인 방식으로 정렬하여 사용자가 쉽게 탐색하고 탐색할 수 있도록 합니다.
중복을 방지하려면 항목 사이의 패딩과 포커스 상태의 크기 증가를 고려하는 것이 중요합니다. 예를 들어 포커스가 지정된 구성요소 (예: 카드)가 강조표시되는 경우가 있습니다. 추천 그리드 레이아웃 (52dp에 열 12개, 여백이 20dp)을 활용하는 경우 카드를 참고하여 권장되는 구성요소 레이아웃 및 미리보기를 확인하세요.
레이아웃 구조
다음은 TV 레이아웃을 디자인할 때 더 나은 결정을 내리는 데 도움이 되는 몇 가지 레이아웃 구조입니다. TV 화면을 가로로 나누면 다양한 유형의 구성요소를 분리하고 정보 계층 구조와 탐색 로직을 전달할 수 있습니다. 창은 여러 단위 열을 포함할 수 있습니다. 각 패널은 스택 레이아웃 및 그리드 레이아웃과 같은 다양한 레이아웃 패턴을 호스팅할 수 있습니다.
단일 창 레이아웃
단일 창 레이아웃을 사용하면 주요 콘텐츠에 사용자의 관심을 유도할 수 있습니다. 콘텐츠 전달 환경과 중요한 정보 페이지에 사용합니다.
창 두 개 레이아웃
페이지에 계층적 콘텐츠가 표시되면 창 두 개 레이아웃의 성능이 향상됩니다. 태스크 전달 환경에 널리 사용됩니다.
인지 과부하
복잡하고 불분명한 콘텐츠는 혼란과 불편을 야기하고 참여도 저하를 초래할 수 있습니다. 스캔하기 쉽고 깔끔하며 필수 정보만 표시하는 디자인을 만듭니다.
콘텐츠를 그룹화하는 데 너무 많은 패널을 사용하지 않습니다. 이로 인해 사용자에게 불필요한 인지 부하와 계층 구조가 발생합니다.
의견을 제시하지
부적절한 예
익스프레스 계층 구조 및 탐색
패널은 콘텐츠를 시각적으로 구분하고 구성합니다. 또한 사용자를 안내하는 데 도움이 되며 보다 직관적인 인터페이스를 만들어 환경을 개선할 수 있습니다.
의견을 제시하지
부적절한 예
레이아웃 템플릿
레이아웃 템플릿은 순서, 일관성, 친숙함을 촉진합니다. 이러한 디자인은 사용자의 위치와 이동 가능 위치를 명확하게 전달하는 편안한 UI 환경을 만듭니다.
둘러보기
브라우저 템플릿은 미디어 콘텐츠 '클러스터' 또는 행을 세로 스택으로 표시합니다. 사용자는 위아래로 이동하여 행을 탐색하고 좌우로 탐색하여 특정 행의 콘텐츠를 탐색합니다.
왼쪽 오버레이
왼쪽 탐색 템플릿은 화면 왼쪽에 오버레이 패널을 표시합니다. 일반적으로 백그라운드에서 콘텐츠와 관련하여 조치를 취할 수 있는 탐색 메뉴나 항목이 표시됩니다.
오른쪽 오버레이
오른쪽 오버레이 템플릿은 화면 오른쪽에 오버레이 패널을 표시합니다. 일반적으로 백그라운드 콘텐츠와 관계없이 활동 중인 항목을 표시합니다.
가운데 오버레이
가운데 오버레이 템플릿은 기존 뷰 위에 오버레이되는 모달 요소를 보여줍니다. 긴급한 정보를 전달하거나 결정을 촉구하는 데 사용됩니다.
하단 오버레이
하단 오버레이 템플릿은 일반적으로 하단 시트에 사용됩니다. 하단 시트는 화면 하단에 고정된 보완 콘텐츠를 포함하는 표면입니다. 현재 페이지의 컨텍스트를 유지하면서 미니 흐름을 만들 수 있습니다.
작업
작업 템플릿의 왼쪽에는 제목과 부제목이, 오른쪽에는 옵션 또는 작업이 표시됩니다. 사용자는 일반적으로 이 템플릿을 사용하여 옵션을 선택하거나 작업을 수행하라는 요청을 받습니다.
콘텐츠 세부정보
콘텐츠 세부정보 템플릿은 가로 누적 레이아웃으로 콘텐츠를 표시합니다. 콘텐츠에는 일반적으로 제목, 메타데이터, 간단한 설명, 빠른 작업, 관련 정보 클러스터가 포함됩니다.
컴파일
컴파일 템플릿은 화면 왼쪽에 있는 항목(예: 팟캐스트)의 세부정보를 오른쪽 패널에 표시하고 관련 요소(예: 에피소드)를 표시합니다.
GRid
그리드 템플릿은 콘텐츠 컬렉션을 정리된 그리드에 표시합니다. 명확한 원격 탐색 로직과 최적의 탐색 환경을 갖춘 콘텐츠를 표시합니다.
주의
알림 템플릿은 전체 화면 메시지를 표시합니다. 일반적으로 알림을 차단 해제하고 이전 화면으로 돌아가려면 조치를 취해야 합니다.
카드 열
카드 레이아웃 1개
카드 너비: 844dp
2개 카드 레이아웃
카드 너비: 412dp
3 카드 레이아웃
카드 너비: 268dp
4개 카드 레이아웃
카드 너비: 196dp
5 카드 레이아웃
카드 너비: 124dp
