레이아웃 조정

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

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

  • 먼저 기기의 창 클래스 너비를 고려하여 레이아웃 변경사항을 결정한 다음 높이를 조정합니다. 다양한 화면 크기를 지원합니다.

  • Android는 웹 개발과 유사한 반응형 디자인 개념을 활용하여 유연한 그리드와 이미지를 사용하여 컨텍스트에 효과적으로 반응하는 레이아웃을 만듭니다.

  • 적응형 메서드(리플로우, 표시, 프레젠테이션 변경)를 사용하여 다양한 크기에 반응하는 레이아웃을 허용합니다.

  • 앱을 세로 모드로만 잠그지 마세요. 이렇게 하면 앱 크기가 조절될 때 레터박스가 표시됩니다.

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

금지사항

세로 모드 휴대전화 레이아웃만 디자인하면 레터박스가 표시됩니다. 앱 크기가 기기, 데스크톱 창 모드, 멀티태스킹에서 조절됩니다.

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

적응형 디자인

앱을 디자인할 때는 적응형 디자인을 기본값으로 설정해야 합니다. Android 모바일 시장은 끊임없이 진화하고 있으므로 모바일을 휴대전화로만 생각할 수는 없습니다. 대신 휴대전화, 폴더블, 태블릿, 그 사이의 모든 기기를 포함해야 합니다.

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

메서드 및 품질

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

레이아웃 리플로우

이 예에서는 탐색 및 콘텐츠가 리플로우, 플렉스, 확장되어 인체공학적 탐색이 개선됩니다. 레이아웃 그리드가 세로 방향에서 다중 열로 확장됩니다. 앱 바의 주소와 필터가 리플로우되고 플렉스되어 레이아웃 그리드에 맞게 조정됩니다.

권장사항

전체 너비로 늘어나는 것을 방지하려면 콘텐츠 및 구성요소에 최대 너비를 설정하세요.

금지사항

콘텐츠가 전체 너비로 늘어나도록 허용하지 마세요.

권장사항

격리 또는 창의 관점에서 생각하세요.

권장사항

구성요소가 프레젠테이션을 변경하도록 허용합니다. 예를 들어 하단 시트는 더 큰 크기에서 측면 시트가 될 수 있습니다.

금지사항

구성요소를 늘리지 말고 구성요소가 프레젠테이션을 변경하고 최대 너비를 설정하도록 허용하세요.

늘어난 UI 요소 입력 및 버튼이 늘어나지 않도록 하세요.

격리 및 창의 관점에서 생각하세요.

창의 격리 개념을 사용하여 적응형 레이아웃의 콘텐츠를 그룹화합니다. 예를 들어 사용된 예는 목록 세부정보 레이아웃에 표시될 수 있는 창 하나인 세부정보 화면입니다.

컴팩트 크기는 단일 창 레이아웃을 고수해야 합니다.

중간 크기는 1~2개의 창 레이아웃을 사용할 수 있습니다.

대형 및 초대형 크기는 여러 창 레이아웃을 사용할 수 있습니다.

목록 세부정보 창

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

대형 화면에서는 창이 필수적이지 않지만 유연성을 위해 격리 그룹화에서 콘텐츠를 고려해야 합니다.

반응형 동작이 있는 레이아웃

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

화면 크기 및 거리에 따라 UI 확장

표시되는 콘텐츠의 크기와 양을 고려합니다.

휴대전화에서는 동영상 그리드가 작지만 태블릿에서는 너무 빽빽하고 압도적입니다.

휴대전화의 작은 동영상 그리드는 태블릿에서 꽉 차고 압도적으로 보입니다. 화면 크기, 밀도, 입력에 따라 UI 요소의 크기를 업데이트합니다.

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

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

고유한 폼 팩터 크기 활용

Android 휴대전화는 다양한 크기를 제공하며 폴더블에는 앱을 표시할 수 있는 작은 커버 화면이 포함될 수 있으므로 작은 화면 크기와 다양한 가로세로 비율도 잊지 마세요.

가로 모드 레이아웃

미디어 플레이어와 같은 컨트롤 기반 레이아웃의 경우 컨트롤이 리플로우되고 콘텐츠가 표시되도록 허용합니다.

커버 화면 레이아웃

사용자가 조정할 수 있도록 큰 재생 버튼과 같은 앵커 요소를 사용하여 주변 콘텐츠를 조정하고 주요 이미지가 커버 화면의 배경이 되도록 합니다.

크기 클래스 외

창 크기는 적응형 디자인의 일반적인 요소이지만 앱은 사용자가 모니터와 입력 기기를 연결하고, 다양한 거리에서 보고, 기기의 자세를 변경할 수 있도록 준비되어 있어야 합니다. `mediaQuery` API를 사용하면 이러한 변경사항을 확인할 수 있습니다. 이 API를 사용하면 앱이 특정 사용 사례에 특정 UI 요소를 조정하는 방식을 디자인할 때 미묘한 차이를 추가할 수 있습니다. 크기, 입력, 폼 팩터, 자세별로 전체 화면을 디자인하는 대신 구성요소 또는 창 수준에서 앱의 디자인을 조정합니다.

입력 상호작용에 관한 자세한 내용은 데스크톱 환경 상호작용 가이드를 참고하세요.

키보드 입력

최신 적응형 API 및 디자인 가이드로 빌드 및 디자인된 샘플 우수사례인 Pawparrazzi를 확인하세요.

Pawparazzi 우수사례