반응형 레이아웃을 사용하고 다양한 화면 크기에 자동으로 적응하는 앱은 사용자에게 추가 가치를 제공하고 더 생산적이고 몰입도 높은 사용자 환경을 제공합니다.
반응형 레이아웃은 최적의 사용자 환경을 위해 버튼, 텍스트 필드, 대화상자와 같은 요소의 형식을 동적으로 지정하고 배치합니다. 반응형 디자인 관행을 활용하여 앱 사용자에게 대형 화면에서 추가 가치를 자동으로 제공합니다. 한눈에 더 많은 텍스트를 표시하거나, 화면에 더 많은 작업을 표시하거나, 더 크고 접근하기 쉬운 탭 타겟을 제공하는 등 반응형 관행은 대형 화면 사용자에게 향상된 환경을 제공합니다.
반응형 디자인을 통해 가치 부여
권장사항
- 반응형 및 적응형 동작이 내장된 M3 Compose 구성요소 라이브러리를 사용하세요.
- 화면 크기에 따라 사용 가능한 공간을 채우도록 자동으로 원활하게 조정되는 반응형 레이아웃을 활용하세요.
금지사항
- 텍스트 필드, 버튼, 대화상자를 비롯한 UI 요소를 늘려 추가 공간을 채웁니다.
- 글꼴이 주로 그래픽 목적으로 사용되지 않는 한 글꼴 크기를 키웁니다.
Wear OS용 반응형 앱 및 카드 빌드
반응형 UI는 렌더링되는 화면 크기와 관계없이 사용 가능한 모든 화면 공간을 최대한 활용하도록 확장되고 변경됩니다.
원형 화면에서 반응형 레이아웃을 설계할 때 스크롤 뷰와 스크롤 불가 뷰에는 각각 UI 요소 크기 조정을 유지하고 균형 잡힌 레이아웃과 구성을 유지하기 위한 고유한 요구사항이 있습니다. 스크롤 뷰의 경우 모든 상단, 하단, 측면 여백을 백분율로 정의하여 잘림을 방지하고 요소의 비례 배율 조정을 제공합니다. 스크롤되지 않는 뷰의 경우 모든 여백에 비율 및 세로 제약 조건을 사용합니다. 이렇게 하면 가운데에 있는 기본 콘텐츠가 사용 가능한 영역을 채우도록 늘어날 수 있습니다.
스크롤 보기
모든 상단, 하단, 측면 여백은 클리핑을 방지하고 요소의 비례 크기 조정을 제공하기 위해 백분율로 정의해야 합니다.
스크롤 불가능한 뷰
모든 여백은 백분율로 정의해야 하며, 가운데에 있는 기본 콘텐츠가 사용 가능한 영역을 채우도록 늘어날 수 있도록 세로 제약 조건을 정의해야 합니다.
예
다음 이미지는 반응형이며 최적화된 앱의 예를 보여줍니다.
가장자리에 맞는 버튼
카드 목록
전환 도구 및 버튼 목록
이미지 카드가 있는 타일
이미지가 있는 카드 목록
그래프가 포함된 타일
