레이아웃 기본사항

레이아웃은 사용자가 활동에서와 같이 앱과 상호작용할 수 있는 시각적 구조를 정의합니다. Android는 콘텐츠를 표시하고 배치하기 위한 다양한 라이브러리, 표준 시작점, 기법을 제공합니다.

테이크어웨이

• 디스플레이 컷아웃, 더 넓은 화면 인셋, 가장자리 디스플레이, 소프트웨어 키보드, 시스템 바와 같은 UI 일부를 포함하는 기기 안전 영역을 준수합니다.

• 권장사항: 사용자가 키보드와 상호작용할 수 있는 유연한 레이아웃을 제공합니다.

• 기본 탐색과 같은 필수 상호작용은 연결 가능한 화면 영역에 유지합니다.

  

• 포함을 사용하여 관련 콘텐츠를 그룹화하여 사용자에게 콘텐츠와 작업을 안내합니다.

  

• 유사한 콘텐츠와 UI 요소 간에 일관된 정렬을 제공합니다.

  금지: 요소와 같은 간격에 일관성이 없어 가독성을 해치면 디자인이 모호하게 보일 수 있습니다.

  권장사항: 같은 요소 사이에 일관된 간격을 설정합니다.

  

• 세로 모드나 이상적인 레이아웃을 고수하지 마세요. 사용자에게 발생할 수 있는 다양한 가로세로 비율, 크기 클래스, 해상도를 고려합니다.

• 조회당 너무 많은 액션을 유도하여 사용자가 부담을 느끼지 않도록 합니다.

• 맞춤 레이아웃을 빌드할 때 정렬, 제약 조건 또는 중력 조건을 사용하여 레이아웃 내에 콘텐츠가 배치되는 방식을 명시합니다. 올바르게 표시하기 위해 이미지가 컨테이너에 응답하는 방식을 포함합니다.

일반적인 Android 앱 화면의 요소

대부분의 Android 앱은 시스템 표시줄, 탐색 영역, 본문이라고 하는 영역으로 구성됩니다.

시스템 표시줄

상태 표시줄과 탐색 메뉴(통칭 시스템 표시줄)는 배터리 수준, 시간, 알림 알림과 같은 중요한 정보를 표시하고 어디서나 직접적인 기기 상호작용을 제공합니다. 시스템 표시줄에 관해 자세히 알아보세요.

시스템 표시줄은 기기 인터페이스의 필수 부분입니다. 이러한 요소를 디자인의 상단 레이어로 추가하여 화면 레이아웃 내에서 고려되도록 합니다. 그러지 않으면 사용자가 아이콘을 숨기려는 의도로 잘못 가정할 수 있으며, 이렇게 하면 스타일을 지정하지 못하게 되며 간격이 해제될 수 있습니다.

막대를 상단 레이어로 추가합니다. android:navigationBarColor 및 android:statusBarColor를 사용하여 앱 테마의 시스템 표시줄에 색상을 적용합니다.

탐색 지역

탐색은 사용자가 앱 내에서 탐색하고 중요한 작업에 액세스하거나 Android 플랫폼 전체에서 이동할 수 있는 다양한 어포던스를 나타냅니다.

신체 부위

본문 영역에는 화면 콘텐츠가 포함됩니다. 본문 콘텐츠는 추가 그룹화 및 레이아웃 매개변수로 구성됩니다. 탐색 및 시스템 메뉴 영역 아래에서 계속되어야 합니다.

에지 투 에지 인셋의 경우 WindowCompat.setDecorFitsSystemWindows(window, false)를 선언합니다.

레이아웃에 적합한 컴포지션 및 탐색 패턴을 결정하려면 사용자가 콘텐츠와 상호작용하는 방식과 앱의 정보 아키텍처를 탐색하는 방법을 이해해야 합니다. 이러한 이해를 바탕으로 사용자가 조치를 취할 수 있는 UI를 만들어 보다 사용자 중심 디자인으로 만들 수 있습니다.

콘텐츠 구성 및 구조

콘텐츠의 구조와 억제 방법을 통해 유연한 흐름과 리듬을 형성합니다.

기본 구조: 시각적 안전장치에 여백 및 열 사용

일관된 가드레일을 사용하여 견고한 구조를 만들려면 레이아웃에 여백과 열을 추가합니다.

여백은 화면과 콘텐츠의 왼쪽과 오른쪽 가장자리에 간격을 제공합니다. 작은 크기 조정의 표준 여백 값은 16dp이지만 여백은 더 큰 화면에 맞게 조정되어야 합니다. 앱의 본문 콘텐츠와 작업은 이 여백 내에 있어야 하며 이 여백과 정렬되어야 합니다.

이 단계에서 인셋 안전 영역 또는 인셋도 확인할 수 있습니다. 시스템 표시줄 인셋은 중요한 작업이 시스템 표시줄 아래로 떨어지는 것을 방지합니다. 자세한 내용은 시스템 표시줄 뒤에 콘텐츠 그리기를 참고하세요.

일관된 정렬을 위한 유연한 그리드 구조를 빌드하고 본문 영역 내의 콘텐츠를 분할하여 레이아웃에 세로 정의를 제공하려면 열을 사용합니다. 콘텐츠는 열이 포함된 화면의 영역에 들어갑니다. 이러한 열은 레이아웃에 구조를 더해주므로 요소를 정렬하는 데 편리한 구조를 제공합니다.

열 그리드를 사용하여 콘텐츠를 기본 그리드에 맞게 정렬하되 유연한 크기는 유지합니다. 열 그리드는 특정 지점의 화면 크기에 따라 열 크기와 열 수를 필요에 따라 변경하면서 콘텐츠도 조정할 수 있어 다양한 폼 팩터를 수용할 수 있습니다. 열 그리드를 너무 세분화하지 마세요. 일관성 있는 간격 단위를 제공하는 기준 그리드의 용도입니다.

함께하는 행의 그리드를 설정할 때는 주의해야 합니다. 방향과 폼 팩터에 걸쳐 가로 콘텐츠 크기 조정을 제한할 수 있기 때문입니다. 일반적으로 패딩 규칙을 설정하면 필요한 시각적 일관성이 제공됩니다.

포함을 사용하여 요소를 시각적으로 그룹화

포함이란 공백과 표시 요소를 함께 사용하여 시각적 그룹을 만드는 것을 의미합니다. 컨테이너는 닫힌 영역을 나타내는 도형입니다. 단일 레이아웃에서는 비슷한 콘텐츠나 기능을 공유하는 요소를 그룹화하고 열린 공간, 서체, 구분선을 사용하여 다른 요소와 구분할 수 있습니다.

유사한 항목을 공백이나 눈에 잘 띄는 구분으로 그룹화하여 사용자에게 콘텐츠를 안내하는 데 도움을 줄 수 있습니다.

암시적 포함은 공백을 사용하여 콘텐츠를 시각적으로 그룹화하여 컨테이너 경계를 만드는 반면 명시적 포함은 구분선 및 카드와 같은 객체를 사용하여 콘텐츠를 그룹화합니다.

다음 그림은 암시적 포함을 사용하여 헤더와 기본 사본을 포함하는 예를 보여줍니다. 열 그리드는 그룹을 정렬하고 만드는 데 사용됩니다. 하이라이트가 카드 안에 명시적으로 포함됩니다. 시각적 분리를 위해 아이콘과 유형 계층 구조를 사용합니다.

콘텐츠 배치

Android에는 각 컨테이너에서 콘텐츠 요소를 적절하게 배치하는 데 도움이 되는 여러 가지 방법(예: 중력, 간격, 크기 조정)이 있습니다.

중력은 특정 사용 사례를 위해 잠재적으로 더 큰 컨테이너 내에 객체를 배치하는 표준입니다. 다음 그림은 객체의 시작 및 중앙 (1), 상단 및 중앙 가로 (2), 왼쪽 하단(3), 끝 및 오른쪽(1) 배치의 예를 보여줍니다.

크기 조정

확장은 동적 콘텐츠, 기기 방향 및 화면 크기를 수용하는 데 중요합니다. 엘리먼트는 고정된 상태로 유지하거나 조정할 수 있습니다.

기기 컨텍스트와 관계없이 이미지가 표시되는 방식을 표시하려면 컨테이너 내에서 이미지가 크기 조정 및 위치를 사용하여 표시되는 방식을 확인하는 것이 중요합니다. 그렇지 않으면 이미지의 기본 초점이 잘려 보일 수 있고 이미지가 레이아웃에 비해 너무 작거나 클 수 있거나 기타 바람직하지 않은 효과가 있을 수 있습니다.

표기법을 사용하지 않은 콘텐츠는 예상한 대로 표시되거나 다르게 표시될 수 있습니다.

고정된 콘텐츠

많은 요소에는 슬롯 또는 스캐폴드와의 상호작용, 스크롤, 위치 지정 기능이 내장되어 있습니다. 일부 요소는 스크롤에 반응하는 대신 고정된 상태로 유지되도록 수정할 수 있습니다(예: 중요한 작업을 수용하는 플로팅 작업 버튼(FAB)).

정렬

AlignmentLine를 사용하여 상위 요소 레이아웃에서 하위 요소를 정렬하고 배치하는 데 사용할 수 있는 맞춤 정렬 선을 만듭니다.

금지: 요소와 같은 간격을 일관되지 않게 표시하여 가독성을 방해하므로 디자인이 위험하게 보일 수 있습니다.

권장사항: 같은 요소 사이에 일관된 간격을 설정합니다.

구성요소 레이아웃

Material 3 구성요소는 상호작용 및 콘텐츠를 위한 자체 구성과 상태를 제공합니다.

Compose는 머티리얼 구성요소를 일반 화면 패턴으로 결합하는 편리한 레이아웃을 제공합니다. Scaffold와 같은 컴포저블은 다양한 구성요소 및 기타 화면 요소를 위한 슬롯을 제공합니다. Material 구성요소 및 레이아웃에 관해 자세히 알아보세요.

레이아웃 및 탐색 패턴

앱에 사용자가 순회할 대상이 여러 개 포함되어 있다면 다른 앱에서 흔히 사용하는 레이아웃 및 탐색 쌍을 사용하는 것이 좋습니다. 많은 사용자가 이미 이러한 페어링을 위한 멘탈 모델을 가지고 있으므로 앱이 더 직관적일 것입니다.

레이아웃 및 탐색 페어링

탐색 메뉴와 모달 탐색 창은 상위 레이아웃 뷰와 기본 탐색 대상의 기본 탐색 패턴으로 사용됩니다.

탐색 메뉴는 동일한 계층 구조 수준에서 3~5개의 탐색 대상을 보유할 수 있습니다. 이 구성요소는 대형 화면의 탐색 레일로 변환됩니다.

탐색 창에는 5개 이상의 탐색 대상을 보유할 수 있지만 소형 크기에서는 상단 표시줄에 도달해야 하므로 패턴은 탐색 메뉴만큼 이상적이지 않습니다.

Material 3 탭과 하단 앱 바는 기본 탐색을 보완하거나 하위 뷰에 표시할 때 사용할 수 있는 보조 탐색 패턴입니다.

레이아웃 작업

사용자가 작업을 완료할 수 있도록 제어 기능을 제공합니다. 일반적인 패턴에는 상단 바 작업, 플로팅 작업 버튼 (FAB), 메뉴가 있습니다.

중요도가 가장 높은 작업의 경우 FAB는 사용자에게 크고 눈에 띄는 버튼을 제공합니다. 이 수준에서는 한 번에 하나의 작업만 제공합니다. FAB는 여러 크기 및 라벨이 포함된 확장된 형태로 표시될 수 있습니다. Scaffold를 사용하여 FAB를 고정하여 스크롤할 때도 항상 표시되도록 합니다.

상단 바 내에 또는 보조 작업을 배치할 수 있습니다(관련 콘텐츠 근처에 그룹화된 경우 페이지 내에).

즉시 또는 자주 필요하지 않은 추가 작업의 경우 더보기 메뉴에 해당 작업을 추가합니다.

표준 레이아웃

표준 레이아웃을 시작점, 즉 즉시 사용할 수 있는 컴포지션으로 활용하여 레이아웃을 일반적인 사용 사례와 화면 크기에 맞게 조정합니다. 이러한 레이아웃은 심미적이고 기능적이며 Material 3 가이드에서 파생됩니다.

Android 프레임워크에는 Jetpack Compose나 뷰 API를 사용하여 간단하고 안정적으로 레이아웃을 구현할 수 있는 특수 구성요소가 포함되어 있습니다.

목록 세부정보 레이아웃

목록 세부정보 레이아웃을 사용하면 사용자가 설명, 설명 또는 기타 추가 정보가 있는 항목의 목록(항목 세부정보)을 탐색할 수 있습니다. 작은 화면 크기의 경우 목록 뷰 또는 세부정보 뷰만 표시됩니다. 행 기반 레이아웃으로 콘텐츠 모음을 표시하는 목록은 앱의 가장 일반적인 레이아웃 형식을 구성합니다. 목록 세부정보는 메시지 앱, 연락처 관리자, 파일 브라우저 또는 추가 정보를 표시하는 항목 목록으로 콘텐츠를 구성할 수 있는 앱에 적합합니다.

콘텐츠는 정적이거나 동적일 수 있습니다.

• 동적 콘텐츠는 앱이 즉석에서 제공하는 콘텐츠로, 사용자 제작 콘텐츠를 표시하거나 사용자의 환경설정이나 작업을 반영하는 데 이상적입니다. 예를 들어 스크롤 가능한 사용자 제작 사진 목록이 있는 사진 앱이 있다고 가정해 보겠습니다. 이 목록은 사용자마다 고유하고 사용자가 더 많은 이미지를 업로드할 때 변경됩니다. 이러한 이미지는 동적 콘텐츠입니다.
• 정적 콘텐츠는 하드 코딩된 콘텐츠를 나타내며, 앱 코드를 직접 변경해야만 수정할 수 있습니다. 정적 콘텐츠의 예로는 모든 사용자가 볼 수 있는 이미지와 텍스트가 있습니다.

Now in Android Figma 파일은 여러 레이아웃 예를 제공합니다. 다음 예는 콘텐츠의 1차원 모음을 보여줍니다.

목록 구성요소 및 사양에 관한 자세한 디자인 안내는 Material 3 목록을 참고하세요.

피드 레이아웃

피드 레이아웃은 구성 가능한 그리드에 동등한 콘텐츠 요소를 정렬하여 많은 양의 콘텐츠를 빠르고 편리하게 표시합니다. 컬렉션에서 카드 사용에 관한 Material 3 가이드라인을 참고하세요. 피드는 일반적으로 카드 또는 타일로 된 소형 디스플레이의 목록 또는 그리드 기반 구성일 수 있습니다. 콘텐츠는 동적일 수 있습니다. 즉, API와 같은 동적 외부 소스에서 '피드'됩니다.

그리드 레이아웃은 암시적 또는 명시적인 포함 원칙으로 구성된 행과 열로 구성됩니다. (자세한 내용은 이 페이지의 포함을 참조하세요.) 그리드 레이아웃은 더 엄격하게 적용하거나 시차를 두고 행과 열을 바꿀 수 있습니다. 사용자에게 혼란을 주지 않도록 간격과 로직을 일관되게 적용해야 합니다. 피드 디자인에 관한 Material 3 가이드라인을 살펴보세요.

Compose에서는 지연 목록 또는 지연 그리드를 사용하거나 RecyclerView 또는 CardView를 사용하여 뷰에서 피드 레이아웃을 구현할 수 있습니다.

창 레이아웃 지원

모바일 뷰에는 지원되는 콘텐츠 또는 컨트롤이 필요할 수 있습니다. 일반적으로 시트나 대화상자 형식이며 기본 뷰를 집중하고 깔끔하게 유지하는 데 도움이 될 수 있습니다. 지원 창 표준 레이아웃 사용을 위한 M3 안내를 확인하세요.

하단 시트에 관한 M3 안내에 대해 자세히 알아보세요.

상대 레이아웃

입력, 콘텐츠 또는 기타 작업은 서로에 대해 상대적으로 표시되거나 상위 컨테이너에 제한될 수 있습니다. 레이아웃은 좀 더 맞춤설정할 수 있지만 일관된 그룹화, 열, 간격을 따라야 합니다.

레이아웃에서 여러 레이아웃 유형의 조합을 사용할 수도 있습니다. 예를 들어 캐러셀이나 가로 스크롤을 세로 카드와 페어링할 수 있습니다. 또는 세로 목록 데이터가 포함된 맞춤 차트를 표시할 수도 있습니다.

지연 행과 지연 열이 있는 스크롤 행 또는 열에 콘텐츠를 표시할 수 있습니다.

Compose 레이아웃 기본사항과 컴포저블을 구성하는 요소에 관해 자세히 알아보세요.

인증은 다음 그림과 같이 일반적인 상대 레이아웃입니다.

전체 화면 레이아웃은 몰입형 모드에서 사용되는 또 다른 일반적인 레이아웃입니다.

Compose 대신 뷰를 사용하는 경우 ConstraintLayout를 사용하여 동위 뷰와 상위 요소 레이아웃 간의 관계에 따라 뷰를 배치할 수 있으므로 크고 복잡한 레이아웃이 가능합니다. ConstraintLayout를 사용하면 Layout Editor로 XML을 수정하는 대신 드래그 앤 드롭으로 완전히 빌드할 수 있습니다. Layout Editor로 UI 빌드에 관해 자세히 알아보세요.

레이아웃 조정

적응형 디자인은 특정 중단점 및 기기에 맞게 조정되는 레이아웃을 디자인하는 관행입니다. 일반적으로 Google에서는 기기의 너비를 고려하여 레이아웃을 변경하거나 조정해야 하는 위치를 결정합니다. 웹과 Android는 모두 유연한 그리드와 이미지와 같은 반응형 디자인 개념을 활용하여 컨텍스트에 더 잘 반응하는 레이아웃을 만듭니다.

확장 화면 크기에 맞게 레이아웃을 조정하는 방법에 관한 디자인 가이드라인은 Compose의 적응형 레이아웃 빌드 개발자 가이드 및 M3 레이아웃 적용 페이지를 참고하세요. 대형 화면 레이아웃의 아이디어와 구현을 알아보려면 Android 대형 화면 표준 갤러리를 참고하세요.

모든 앱을 모든 화면 크기에서 사용할 수 있어야 하는 것은 아니지만 사용자는 인체공학, 사용성, 앱 품질과 관련해 더 자유롭게 사용할 수 있습니다.

• 클래스 크기를 가이드라인 역할을 하는 중단점으로 사용하여 주요 화면을 설계 (필수 개념이나 앱을 전달)할 수 있습니다.
• 또는 콘텐츠를 제한, 확장, 리플로우하는 방식을 표시하여 반응에 따라 콘텐츠를 디자인할 수 있습니다.

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

WebView

WebView는 인앱 웹페이지를 표시하는 뷰입니다. 대부분의 경우 Chrome과 같은 표준 웹브라우저를 사용하여 사용자에게 콘텐츠를 제공하는 것이 좋습니다. 웹브라우저에 관한 자세한 내용은 인텐트로 브라우저 호출 가이드를 참고하세요.