스크롤되지 않는 앱 뷰 레이아웃에는 미디어 플레이어, 확인 대화상자, 선택 도구, 전환 도구, 진행률 표시기를 사용하는 특별한 피트니스 또는 추적 화면이 포함됩니다. 화면의 높이를 제한하면 사용자가 옵션 목록을 탐색할 필요 없이 하나의 작업이나 컨트롤 세트에 집중할 수 있습니다. 화면 크기가 더 작은 기기를 수용하려면 한정된 크기를 염두에 두고 디자인하여 한눈에 볼 수 있도록 하고 해당하는 경우 원형 화면을 수용합니다.
반응형 및 최적화된 디자인 빌드
스크롤 불가능한 뷰는 한눈에 볼 수 있는 정보에 중점을 두고 최소한의 상호작용으로 사용자에게 가치를 제공합니다. 하지만 이러한 레이아웃에 반응형 동작을 빌드하는 것은 쉽지 않을 수 있습니다. 이 문제를 해결하기 위해 Android UI 라이브러리 레이아웃과 구성요소를 비율 기반 여백 및 패딩을 비롯한 내장 반응형 동작으로 업데이트했습니다. Compose 구성요소를 활용하는 경우 이 반응성을 자동으로 상속할 수 있습니다.
고유한 화면 디자인의 경우 다양한 화면 크기에서 철저히 테스트하여 구성요소와 요소가 원활하게 조정되고 콘텐츠가 잘리지 않도록 합니다. 비율 여백은 스페이서를 효과적으로 조정하는 데 도움이 되며, 225dp의 브레이크포인트를 사용하여 더 큰 시계 화면에 추가 정보와 향상된 기능을 도입하는 것이 좋습니다.
구성요소가 사용 가능한 너비와 높이에 맞게 조정되는지 확인
모든 구성요소는 반응형으로 빌드되므로 사용 가능한 너비 (전체 화면인 경우 높이)에 맞게 조정됩니다. 콘텐츠가 화면의 둥근 곡선에 의해 잘리지 않도록 필요한 여백이 있는지 확인합니다. 또한 스크롤되지 않는 화면 콘텐츠가 레이아웃을 스크롤하거나 잘리지 않도록 필요한 레이아웃 동작을 확인합니다.
적응형 및 차별화된 디자인 빌드
더 큰 화면 크기에서 추가 공간을 최대한 활용하려면 225dp에 크기 브레이크포인트를 추가합니다. 이 브레이크포인트를 사용하면 추가 콘텐츠를 표시하거나, 더 많은 정보, 옵션, 데이터를 포함하거나, 더 큰 화면 크기에 더 적합하도록 레이아웃을 변경할 수 있습니다.
이를 위해서는 각 중단점마다 다른 디자인이 필요합니다. 더 큰 화면 디자인(225인치 이상)에는 다음과 같은 추가 요소가 포함될 수 있습니다.
기존 구성요소의 크기를 늘리거나 상태를 변경합니다.
브레이크포인트를 사용하여 더 많은 세부정보를 표시하거나 콘텐츠를 한눈에 파악할 수 있도록 만듭니다. 소형 화면에서 환경이나 기능이 손상되지 않고 대형 화면 변경사항이 추가로 적용되는지만 확인하면 됩니다.
현재 레이아웃 내에 콘텐츠 추가
구성요소나 콘텐츠를 추가하면 레이아웃에서 추가 옵션, 세부정보, 궁극적으로 가치를 제공합니다.
하지만 한눈에 파악할 수 있는 기능을 희생해서는 안 됩니다.
페이지로 나누기 사용
환경에 더 많은 콘텐츠가 필요하지만 스크롤이 없는 레이아웃을 유지하려는 시나리오에서는 세로 또는 가로 페이지로 구성된 다중 페이지 레이아웃을 고려해 보세요.
반응형 및 적응형 동작
Compose 라이브러리의 모든 구성요소가 더 넓은 화면 크기에 자동으로 적응하고 너비와 높이를 얻습니다. 특히 이러한 뷰의 경우 브레이크포인트를 활용하면 모든 사용자에게 특히 풍부하고 가치 있는 환경을 제공할 수 있습니다. 모든 여백을 백분율로 정의하고 가운데에 있는 기본 콘텐츠가 사용 가능한 디스플레이 영역을 채우도록 늘어날 수 있도록 세로 제약 조건을 정의합니다.
디자인할 때는 스크롤되지 않는 화면을 상단, 중간, 하단 섹션으로 나누는 것이 가장 좋습니다. 이렇게 하면 상단 및 하단 섹션에 내부 여백을 추가하여 잘림을 방지할 수 있지만 중간 섹션은 화면의 전체 너비를 활용할 수 있습니다. 화면 크기가 제한된 경우 탭 상호작용만으로는 최적의 환경을 제공하지 못할 수 있으므로 로터리 스크롤 버튼을 사용하여 화면의 요소를 제어하는 것이 좋습니다.
체크리스트
- 모든 화면 크기에서 적절하게 표시되는 유연한 레이아웃을 만듭니다.
- 권장되는 상단, 하단, 측면 여백을 적용합니다.
- 콘텐츠가 잘릴 수 있는 위치에 여백을 백분율 값으로 정의합니다.
- 요소가 화면 내 공간을 최대한 활용하고 다양한 기기 크기에서 균형을 유지하도록 레이아웃 제약 조건을 활용합니다.
- 시간 텍스트를 사용하는 경우 페이지 상단 섹션과 겹치지 않도록 합니다 (자세한 내용은 상단 간격이 있는 진행률 표시기 참고).
- 가장자리에 맞는 버튼을 사용하여 제한된 공간을 더 많이 활용해 보세요.
- 225dp에 브레이크포인트를 적용하여 추가 콘텐츠를 표시하거나 더 큰 화면 크기에서 기존 콘텐츠를 한눈에 볼 수 있도록 하는 것이 좋습니다.
전체 화면 진행률 표시기
진행률 표시기는 화면 크기에 자동으로 맞춰지므로 동작이 변경되지는 않지만, 공간을 최대한 활용하려면 중앙 영역에 비례 (백분율) 여백과 패딩을 적용하는 것이 좋습니다. 또한 더 큰 화면에서 구성요소의 크기나 수를 늘리기 위한 브레이크포인트를 고려하세요.
차별화된 환경 만들기
스크롤이 없는 레이아웃은 맞춤설정할 수 있지만 화면에 추가할 수 있는 콘텐츠의 양과 가장 효과적인 구성요소 유형이 더 제한적입니다. 더 넓은 알약 모양의 버튼 대신 아이콘 버튼을 사용하면 제한된 공간을 더 잘 활용할 수 있으며 진행률 표시기 및 큰 데이터 포인트와 같은 시각적 그래픽을 사용하면 그래픽 방식으로 주요 정보를 전달하는 데 도움이 됩니다. 화면 베젤을 감싸는 모든 요소는 화면 크기에 따라 자동으로 커지므로 더욱 효과적입니다.
