레이아웃 조정

적응형 디자인은 특정 중단점과 기기에 맞게 적응하는 레이아웃을 디자인하는 원칙입니다.

적응형 레이아웃을 효과적으로 구현하려면 다음을 따르세요.

  • 먼저 기기의 창 클래스 너비를 고려하여 레이아웃 변경을 결정한 다음 높이에 맞게 조정합니다.
  • Android는 웹 개발과 유사한 반응형 디자인 개념을 활용하여 유연한 그리드와 이미지를 사용하여 컨텍스트에 효과적으로 반응하는 레이아웃을 만듭니다.

모바일 및 태블릿 크기의 생산성 앱 화면

확장된 화면 크기에 맞게 레이아웃을 조정하는 디자인 가이드라인은 Compose의 다양한 화면 크기 지원 개발자 가이드와 M3 레이아웃 적용 페이지를 참고하세요. Android 대형 화면 표준 갤러리에서 대형 화면 레이아웃의 아이디어와 구현을 확인할 수도 있습니다.

적응형으로 생각하기

앱을 설계할 때는 적응형을 기본값으로 사용해야 합니다. Android 모바일 시장은 끊임없이 진화하므로 모바일을 핸드셋 휴대전화로만 생각할 수는 없습니다. 대신 핸드셋 휴대전화, 폴더블, 태블릿 등 모든 기기를 포함해야 합니다.

특정 기능과 사용 사례는 모든 화면 크기나 폼 팩터에서 적합하지 않을 수 있습니다. 적응형 디자인을 사용하면 사용자가 인체 공학, 사용성, 앱의 품질 측면에서 더 자유롭게 사용할 수 있습니다.

방법 및 품질

클래스 크기를 중단점으로 사용하여 핵심 화면 (필수 개념 또는 앱 전달)을 디자인하여 나머지 앱의 가이드라인으로 삼을 수 있습니다. 이러한 히어로 환경은 차별화된 적응형 및 폼 팩터 품질을 강조할 수 있습니다. 또는 콘텐츠가 제한되거나 확장되거나 리플로우되는 방식을 표기하여 기본 수준에서 반응형이 되도록 콘텐츠를 디자인합니다.

콘텐츠와 구성요소의 최대 너비를 설정하여 전체 너비로 늘어나는 것을 방지합니다.

콘텐츠가 전체 너비로 늘어나도록 허용합니다.

컨테인먼트 또는 창의 관점에서 생각하세요.

내재적 컨테이너와 시각적 컨테이너를 사용하여 요소를 그룹화합니다. 창은 이동하거나, 숨겨지거나, 확장되거나, 제한되거나, 팝업될 수 있습니다. 창을 사용하면 모든 휴대기기에서 더 쉽게 디자인할 수 있습니다.

요소가 그리드에 적응하는 방식에 초점을 맞춰 요소가 이동하고 재정렬되도록 허용합니다. 요소의 세로 변경사항을 고려하고 제약 조건 및 프레젠테이션 변경사항과 결합합니다.

고품질 앱은 핵심 앱대형 화면 품질 가이드라인의 차별화된 등급을 충족해야 합니다.

레이아웃에 관한 자세한 내용은 Material Design 3 (M3) 레이아웃 이해 페이지를 참고하세요.