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