이 섹션에서는 다양한 화면 크기에 맞게 확장할 수 있는 화면 레이아웃을 위한 디자인 가이드라인을 제공합니다.
여기에 정의된 패딩 및 키라인 값은 구성요소, 미디어 사양, 알림 센터 사양, 다이얼 사양에서 사용됩니다.
한눈에 보기 (TL:DR):
- 적절한 화면 크기 카테고리의 기본 레이아웃
- 정렬을 위해 8dp 그리드 사용
- 여백 너비를 앱 작업 공간의 12% 로 설정
- 여백 및 탐색 보조 도구를 여백에 배치
- 엘리먼트 간의 고정된 간격을 위한 패딩 사용
핵심 레이아웃 개념
- 앱 작업 공간: 자동차 제조업체와 시스템 UI 기능이 차지하는 화면 공간을 고려한 후 앱에서 사용할 수 있는 화면 영역
- 화면 크기 카테고리: 4개의 화면 너비 범위 (표준, 와이드, 와이드, 슈퍼 와이드)와 3개의 화면 높이 범위 (짧은 크기, 표준 크기, 높이의 값) 집합. 여기서 '화면'은 가장자리를 포괄하는 전체 공간이 아닌 앱 작업 공간을 의미합니다.
- 패딩: 레이아웃의 요소와 구성요소 간에 고정된 세로 및 가로 간격을 지정하는 간격 값 집합입니다.
- 키라인: 너비 또는 간격 카테고리에 따라 결정되는 가변 너비 간격 범위는 레이아웃의 여백 또는 구성요소 가장자리와 요소 사이의 가로 공간을 나타냅니다.
- 가변 영역: 화면 크기에 맞게 조정할 수 있는 최소 또는 최대 값이 할당되는 구성요소의 일부인 경우
앱 작업 공간
앱의 작업 공간은 자동차 제조업체와 시스템 UI 기능이 차지하는 화면 공간을 고려한 후 남아 있는 사용 가능한 화면 영역입니다. 앱 작업 공간은 왼쪽과 오른쪽 여백, 앱의 기본 콘텐츠 영역인 앱 캔버스를 포함합니다.
각 여백은 앱 작업 공간 너비의 12% 와 같아야 합니다. 여백에는 일반적으로 앱의 스크롤바와 탐색 어포던스가 포함됩니다.
화면 크기
참조 사양 레이아웃은 앱 작업 공간의 너비와 높이를 기준으로 화면 크기 카테고리 조합으로 지정됩니다.
본 가이드라인 전반에서 사양은 카테고리의 이름을 말합니다. 예를 들어 '넓은'은 930dp에서 1279dp 사이의 모든 화면 너비를 의미합니다.
화면 크기 카테고리는 다음에 대한 권장사항에 영향을 미칩니다.
- 구성요소 및 요소의 키라인 간격
- 구성요소 가변 영역의 확장
- 최소화된 컨트롤 바에 앨범 아트와 같은 선택적 요소를 숨기거나 표시하는 경우
너비 카테고리
| 표준 | 넓게 | 아주 넓게 | 슈퍼 와이드 | |
|---|---|---|---|---|
| 화면 너비 범위 | 690~929dp | 930~1279dp | 1280~1919dp | 1920dp 이상 |
높이 카테고리
| 짧은 동영상 | 표준 | 세로로 길게 | |
|---|---|---|---|
| 화면 높이 범위 | 0~609dp | 610~1199dp | 1,200dp 이상 |
간격
참조 사양 레이아웃은 8dp 그리드에서 구조화됩니다. 실제로 이는 사양의 UI 구성요소와 요소가 8dp의 배수로 떨어져 있음을 의미합니다.
두 가지 유형의 간격이 있습니다.
패딩: 고정 너비 및 고정 높이 간격용
키라인(가변 너비 간격용)
패딩
패딩은 참조 사양 레이아웃에서 구성요소 간에 고정 너비 및 고정 높이 간격을 설정합니다. 또한 다이얼패드 구성요소에서 인접한 숫자 대상 사이의 공간 등 구성요소 내의 고정된 간격을 나타낼 수도 있습니다. 일반적으로 두 요소 간의 관계가 가까울수록 요소 사이의 패딩이 좁아집니다.
P0~P8로 지정된 9개의 패딩 값이 있습니다.
다음은 패딩 값과 해당 크기입니다.
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
화면 너비 카테고리에 따라 간격 값을 변경하는 키라인과 달리 패딩 값은 일정하게 유지됩니다. 예를 들어 P1은 항상 8dp입니다. 하지만 일부 구성요소 또는 요소 집합 간의 거리는 참조 화면 크기에서 서로 다른 화면 크기에 맞는 패딩 값을 가질 수 있습니다. 예를 들어 그리드 항목 간의 권장 세로 간격은 짧은 화면의 경우 P4, 표준 및 긴 화면의 경우 P5입니다.
레이아웃
참조 사양에서 요소 사이의 패딩을 표시하는 대신 키라인은 구성요소의 구성요소에서 가장 가까운 여백이나 가장자리로부터의 거리를 지정합니다. 키라인은 화면 너비에 따라 값을 변경합니다. 또한 다양한 화면 크기에 맞게 레이아웃을 확장하면서 요소의 가로 비율을 유지할 수 있는 편리한 방법을 제공합니다.
KL0~KL4로 지정된 5가지 키라인이 있습니다.
다음은 각 화면 너비의 키라인 값입니다.
| 기기의 화면 너비가 작음 | 표준 | 넓게 | 아주 넓게 | 슈퍼 와이드 |
|---|---|---|---|---|
| KL0 | 16dp | 24dp | 24dp | 32dp |
| KL1 | 24dp | 32dp | 32dp | 48dp |
| KL2 | 96dp | 112dp | 112dp | 112dp |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | 168dp |
확장 전략
참조 사양 레이아웃은 앱을 다양한 화면 크기로 확장하기 위한 가이드라인을 제공합니다. 원활한 확장을 위해 일반적으로 사양에는 다음이 포함됩니다.
- 가변 영역: 자동차 제조업체가 특정 화면 크기에 맞게 확장하거나 축소해야 하는 구성요소의 일부입니다.
- 가변 영역에 권장되는 최소 및 최대 너비로, 바람직하지 않은 크기로 구성요소가 확장되지 않도록 합니다.
- 화면 너비 카테고리에 따라 다르게 확장되는 요소의 비례하는 가로 간격을 유지하는 데 사용되는 키라인
- 패딩: 구성요소와 요소 간의 고정된 간격을 지정합니다.
일부 사양은 화면 너비에 따라 특정 요소를 숨기거나 표시할지 여부를 지정합니다.
예 1: 최소화된 컨트롤바
최소화 컨트롤 바는 참조 사양 레이아웃이 더 작은 화면 크기에서 구성요소 너비를 유연하게 설정하고 필수가 아닌 요소를 숨길 것을 권장하는 구성요소의 예입니다.
최소화된 컨트롤 바의 사양에는 2가지 확장 가이드라인이 포함되어 있습니다.
- 왼쪽의 정사각형 요소 (일반적으로 앨범 아트에 사용됨)는 화면 너비가 930dp 이상일 때만 표시되어야 합니다.
- 중간에 있는 가변 너비 섹션은 440dp보다 좁아서는 안 되며 전체 구성요소 너비가 1028dp를 초과하지 않는 한 더 넓은 화면에 맞게 조정할 수 있습니다.
예 2: 그리드
그리드는 레이아웃 내 열과 행에 배치하고 크기를 조절할 수 있는 구성요소의 예입니다.
권장되는 열 개수 (좁은 화면에서 3개, 넓은 화면에서 4개)는 화면 크기에 따라 다릅니다. 그리드가 권장되는 최소 너비보다 작지 않는 한 열 카테고리 및 행 높이는 화면 카테고리 내에서 조정할 수 있습니다. 아래 애니메이션은 참조 레이아웃의 권장사항에 따라 더 넓고 좁은 화면으로 그리드를 확장하는 방법을 보여줍니다.
