이러한 표준 레이아웃은 검증된 다목적 앱 레이아웃으로, 화면 크기가 큰 기기에서 최적의 사용자 환경을 제공합니다.
카드
카드를 통해 사용자는 작업을 완료하는 데 필요한 정보와 동작에 빠르게 액세스할 수 있습니다. 사용자는 시계 화면에서 스와이프하여 피트니스 목표 달성 현황을 확인하고 날씨를 확인하는 등 다양한 작업을 할 수 있습니다. 카드를 사용하여 앱을 실행하거나 필수 작업을 빠르게 실행할 수 있습니다.
구성요소 및 스타일 지정을 통한 맞춤설정
브랜드 스타일을 특정 구성요소에 적용할 수 있습니다. 여기에는 기본 색상, 앱 아이콘, 글꼴, 아이콘, 카드 환경에 적용되는 모든 시각적 애셋이 포함됩니다.
반응형 레이아웃 (고정 높이 화면 및 비율 여백)에 맞게 빌드
코드 및 디자인 레이아웃을 더 큰 화면 크기에 맞게 조정하기 위해 백분율 기반 여백 및 패딩을 비롯한 반응형 동작을 기본으로 제공하도록 업데이트했습니다. 템플릿을 사용하는 경우 Tiles API를 통해 이러한 업데이트를 자동으로 상속할 수 있으며 화면 크기 중단점 후에 추가 콘텐츠나 구성요소를 추가한 레이아웃만 제공하면 됩니다. 더 큰 화면 크기를 활용하는 방법에 관한 전체 안내와 권장사항은 카드 안내를 참고하세요.
모든 템플릿은 두 가지 기본 화면 크기 중단점인 192dp 및 225dp로 빌드됩니다. 행이 사용 가능한 공간을 채우되 너무 멀리 확장되지 않고 상단과 하단의 곡선 화면에 의해 잘리지 않도록 화면 크기를 기준으로 여백이 백분율 값으로 설정되었습니다. 카드의 화면 높이가 고정되어 있으므로 원치 않는 클리핑을 생성하지 않고 제한된 화면 공간을 최대화하도록 패딩을 조정했습니다.
두 가지 기본 템플릿, 즉 기본 레이아웃과 가장자리 콘텐츠 레이아웃 (진행률 링이 있음)은 여백이 다르지만 모든 디자인 레이아웃은 이 중 하나에 매핑되도록 빌드됩니다. 각 카드에는 세 개의 기본 섹션이 있으며 각각에 할당되는 슬롯이 있습니다. 경우에 따라 한눈에 볼 수 있고 균형 잡힌 디자인을 유지하면서 콘텐츠가 사용 가능한 공간을 채우도록 도와주는 여백과 패딩이 추가로 제공될 수 있습니다.
차별화된 환경 조성
80개 이상의 순열이 내장된 기본 표준 레이아웃 4개를 사용하면 사실상 무한한 맞춤설정이 가능합니다. 카드는 슬롯 기반 시스템을 기반으로 하므로 표준 레이아웃의 슬롯을 원하는 콘텐츠로 대체할 수 있습니다. 이 경우 반응형 동작을 유지하고 설계 권장사항을 따르세요.
이러한 맞춤설정은 제한되어야 하며 카드 템플릿의 구조를 손상해서는 안 됩니다. 이는 사용자가 Wear OS 기기에서 카드 캐러셀을 스크롤할 때 일관성을 유지하기 위한 것입니다.
큰 화면에서 크기 중단점 뒤에 값을 추가합니다.
큰 화면에서 추가 공간을 최대한 활용하려면 225dp에서 크기 중단점을 추가합니다. 이 중단점을 사용하면 추가 콘텐츠를 표시하거나, 버튼 또는 데이터를 더 포함하거나, 더 큰 화면에 더 적합하게 레이아웃을 변경할 수 있습니다.
스크롤 및 비스크롤 앱 레이아웃
원형 화면에서 적응형 레이아웃을 디자인할 때 스크롤 뷰와 비스크롤 뷰에는 각각 UI 요소를 확장하고 레이아웃과 컴포지션의 균형을 유지하기 위한 고유한 요구사항이 있습니다.
스크롤되지 않는 앱 레이아웃
표준 레이아웃 및 전체 화면 구성요소 (미디어 및 피트니스 포함)
스크롤되지 않는 앱 뷰 레이아웃에는 미디어 플레이어, 확인 대화상자, 선택 도구, 전환기, 진행률 표시기를 사용하는 특수 피트니스 또는 추적 화면이 포함됩니다. 모든 화면의 높이를 제한하여 사용자가 옵션 목록을 탐색할 필요 없이 하나의 작업이나 컨트롤 세트에 집중할 수 있도록 할 수 있습니다. 화면 크기가 작은 기기를 수용하려면 제한된 크기를 염두에 두고 디자인하여 한눈에 알아볼 수 있도록 하고 해당하는 경우 원형 화면을 수용합니다.
응답 가이드라인 (백분율 여백)
모든 여백을 백분율로 정의하고 중간의 기본 콘텐츠가 늘어나 사용 가능한 디스플레이 영역을 채울 수 있도록 세로 제약 조건을 정의합니다.
디자인할 때는 스크롤되지 않는 화면을 상단, 중간, 하단 섹션으로 나누는 것이 좋습니다. 이렇게 하면 상단과 하단 섹션에 내부 여백을 추가하여 클리핑을 방지할 수 있지만 중간 섹션이 화면의 전체 너비를 활용하도록 할 수 있습니다. 탭 상호작용만으로는 최상의 환경이 제공되지 않을 수 있으므로 크기가 제한된 경우 로터리 스크롤 버튼을 사용하여 화면의 요소를 제어하는 것이 좋습니다.
차별화된 환경 조성
스크롤되지 않는 레이아웃은 맞춤설정할 수 있지만 화면에 추가할 수 있는 콘텐츠의 양과 가장 효과적인 구성요소의 종류가 더 제한적입니다. 칩 대신 IconButton을 사용하면 제한된 공간을 더 잘 활용할 수 있으며 ProgressIndicators와 같은 시각적 그래픽과 큰 데이터 포인트는 주요 정보를 그래픽 방식으로 전달하는 데 도움이 됩니다.
화면 베젤을 감싸는 모든 요소는 화면 크기에 따라 자동으로 증가하므로 훨씬 더 강력한 인상을 줍니다.
큰 화면에서 중단점 뒤에 값을 추가하는 방법
큰 화면 크기에 맞는 반응형 디자인을 만들 때 스크롤되지 않는 앱 레이아웃은 추가 화면 공간을 최대한 활용합니다. 기존 요소를 확장하여 추가 공간을 채울 수 있고 사용성이 개선되며 구성요소와 콘텐츠가 화면 크기 중단점 뒤에 표시될 수 있습니다.
다음 목록에 이러한 동작의 몇 가지 예가 나와 있습니다.
- 미디어 플레이어는 추가 버튼이나 더 큰 컨트롤을 얻을 수 있습니다.
- 확인 대화상자를 통해 삽화나 추가 정보를 얻을 수 있습니다.
- 피트니스 화면은 추가 측정항목을 얻을 수 있으며 요소의 크기가 커질 수 있습니다.
앱 레이아웃 스크롤
표준 레이아웃
스크롤 앱 뷰 레이아웃에는 목록 (ScalingLazyColumn)과 대화상자가 포함됩니다. 이러한 레이아웃은 앱 화면의 대부분을 구성하며 큰 화면 크기에 맞게 조정되어야 하는 구성요소 모음을 나타냅니다.
구성요소가 반응형인지 확인합니다. 즉, 사용 가능한 너비를 채우고 화면 높이를 더 사용할 수 있을 때 ScalingLazyColumn 조정을 채택하는지 확인합니다. 이러한 레이아웃은 이미 반응형으로 빌드되었으며 확장된 영역을 더 활용하기 위한 몇 가지 추가 권장사항이 있습니다.
응답 가이드라인 (백분율 여백)
모든 상단, 하단, 측면 여백은 자르기를 방지하고 요소의 비례 배율을 제공하려면 백분율로 정의해야 합니다. PositionIndicator는 사용자가 스크롤할 때 표시되고 크기에 관계없이 화면의 베젤을 자동으로 감싸는 역할을 합니다.
차별화된 환경 조성
스크롤 뷰는 세부적인 맞춤설정이 가능하며 임의의 순서로 구성요소 조합을 추가할 수 있습니다.
상단 및 하단 여백은 상단과 하단에 있는 구성요소에 따라 변경될 수 있습니다. 이는 화면의 곡선이 커지기 때문에 콘텐츠가 잘리는 것을 방지하기 위한 것입니다.
대형 화면에서 중단점 뒤에 값 추가
스크롤 레이아웃은 이전에 화면 스크롤해야 볼 수 있는 부분에 숨겨졌던 내용을 자동으로 더 많이 표시하므로 가치를 추가하기 위해 해야 할 작업이 많지 않습니다. 각 구성요소는 사용 가능한 너비를 채우며, 경우에 따라 추가 텍스트 행 (예: 카드)이 있거나 사용 가능한 너비를 채우기 위해 구성요소 (예: 아이콘 버튼)가 늘어나는 경우도 있습니다.