레이아웃 기본사항

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

요약

• 디스플레이 컷아웃, 끝면까지 이어지는 인셋, 가장자리 디스플레이, 소프트웨어 키보드, 시스템 표시줄과 같은 UI 부분을 포함하는 기기 안전 영역을 준수합니다.

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

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

  

• 컨테이너링을 사용하여 관련 콘텐츠를 그룹화하여 사용자를 콘텐츠와 작업으로 안내합니다.

  

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

  금지: 요소와 같은 간격을 일관되게 유지하지 않아 가독성을 방해하지 마세요. 디자인이 엉성해 보일 수 있습니다.

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

  

• 세로 모드 또는 이상적인 레이아웃에만 고집하지 마세요. 사용자가 경험할 수 있는 다양한 가로세로 비율, 크기 클래스, 해상도를 고려하세요.

• 조회당 너무 많은 작업으로 사용자에게 부담을 주지 마세요.

• 맞춤 레이아웃을 빌드할 때는 정렬, 제약 조건 또는 중력 용어를 사용하여 콘텐츠가 레이아웃 내에 배치되는 방식을 지정합니다. 이미지가 제대로 표시되도록 컨테이너에 응답해야 하는 방식을 포함합니다.

일반적인 Android 앱 화면의 구성요소

대부분의 Android 앱은 시스템 표시줄, 탐색 영역, 본문으로 칭해지는 여러 영역으로 구성됩니다.

시스템 표시줄

상태 표시줄과 탐색 메뉴(총칭하여 시스템 표시줄이라고 함)는 배터리 잔량, 시간, 알림 알림과 같은 중요한 정보를 표시하고 어디서나 기기와 직접 상호작용할 수 있도록 지원합니다. 시스템 표시줄에 대해 자세히 알아보세요.

탐색 지역

탐색은 사용자가 앱 내에서 이동하고, 중요한 작업에 액세스하고, Android 플랫폼의 여러 곳을 이동할 수 있도록 지원하는 각종 어포던스를 나타냅니다.

신체 부위

본문 영역에는 화면 콘텐츠가 포함됩니다. 본문 콘텐츠는 추가 그룹 및 레이아웃 매개변수로 구성됩니다. 본문은 탐색 영역과 시스템 표시줄 영역 하단에서 이어져야 합니다.

전체 화면 인셋의 경우 WindowCompat.setDecorFitsSystemWindows(window, false)를 선언합니다.

레이아웃에 적합한 구성 및 탐색 패턴을 결정하려면 사용자가 콘텐츠와 상호작용하는 방식과 앱의 정보 아키텍처를 탐색하는 방식을 파악하세요. 이를 이해하면 사용자가 작업할 수 있는 UI를 만들어 디자인을 더 사용자 중심적으로 설계할 수 있습니다.

콘텐츠 구성 및 구조

콘텐츠의 구조와 컨테이너 메서드를 사용하여 유연한 흐름과 리듬을 만들어 보세요.

기본 구조: 시각적 가드레일로 여백과 열 사용

일관된 가이드라인으로 견고한 구조를 만들려면 레이아웃에 여백과 열을 추가하세요.

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

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

열을 사용하여 일관된 정렬을 위한 유연한 그리드 구조를 빌드하고 본문 영역 내에서 콘텐츠를 나누어 레이아웃에 세로 정의를 제공합니다. 콘텐츠는 열이 포함된 화면 영역에 표시됩니다. 이러한 열은 레이아웃에 구조를 제공하여 요소를 정렬하는 편리한 구조를 제공합니다.

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

행의 그리드를 함께 설정하면 방향과 폼 팩터 전반에서 가로 콘텐츠 크기 조정이 제한될 수 있으므로 주의하세요. 일반적으로 패딩 규칙을 설정하면 필요한 시각적 일관성을 제공할 수 있습니다.

격리를 사용하여 요소를 시각적으로 그룹화

격리는 화이트 스페이스와 눈에 보이는 요소를 함께 사용하여 시각적 그룹을 만드는 것을 말합니다. 컨테이너는 밀폐된 영역을 나타내는 도형입니다. 단일 레이아웃에서 유사한 콘텐츠 또는 기능을 공유하는 요소를 그룹화하고 여백, 서체, 구분선을 사용하여 다른 요소와 구분할 수 있습니다.

비슷한 항목을 화이트 스페이스나 눈에 보이는 구분자로 그룹화하면 사용자가 콘텐츠를 소화하는 데 도움을 줄 수 있습니다.

암시적 격리는 화이트 스페이스를 사용하여 콘텐츠를 시각적으로 그룹화함으로써 컨테이너 경계를 만드는 방법이고, 명시적 격리는 구분선과 카드와 같은 객체를 사용하여 콘텐츠를 하나로 그룹화하는 방법입니다.

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

콘텐츠의 위치

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

Gravity는 특정 사용 사례를 위해 더 큰 컨테이너 내에 객체를 배치하기 위한 표준입니다. 다음 그림은 객체를 시작 및 가운데 (1), 맨 위 및 가운데 수평 (2), 왼쪽 하단(3), 끝 및 오른쪽(1)에 배치하는 예를 보여줍니다.

크기 조정

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

기기 컨텍스트와 관계없이 이미지가 원하는 방식으로 표시되도록 하려면 이미지가 컨테이너 내에서 어떻게 크기 조절 및 위치와 함께 표시되는지 확인하는 것이 중요합니다. 그러지 않으면 이미지의 기본 초점이 잘리거나 이미지가 레이아웃에 비해 너무 작거나 커지거나 기타 원치 않는 효과가 발생할 수 있습니다.

음표가 표시되지 않은 콘텐츠는 예상과 다르게 표시될 수 있습니다.

고정된 콘텐츠

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

정렬

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

금지: 요소와 같은 간격을 일관되게 유지하지 않아 가독성을 방해하면 디자인이 엉성해 보일 수 있습니다.

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

구성요소 레이아웃

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

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

레이아웃 및 탐색 패턴

앱에 사용자가 이동할 수 있는 여러 대상이 포함된 경우 다른 앱에서 일반적으로 사용하는 레이아웃 및 탐색 페어링을 사용하는 것이 좋습니다. 많은 사용자가 이미 이러한 페어링에 대한 멘탈 모델을 보유하고 있으므로 앱이 더 직관적으로 느껴질 것입니다.

레이아웃 및 탐색 페어링

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

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

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

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

레이아웃 작업

사용자가 작업을 완료할 수 있는 컨트롤을 제공합니다. 일반적인 패턴에는 상단 표시줄 작업, 플로팅 작업 버튼 (FAB), 메뉴가 있습니다.

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

보조 작업은 상단 표시줄에 배치하거나 관련 콘텐츠 근처에 그룹화된 경우 페이지 내에 배치할 수 있습니다.

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

표준 레이아웃

표준 레이아웃을 시작점으로 활용하세요. 표준 레이아웃은 레이아웃이 일반적인 사용 사례와 화면 크기에 맞게 조정될 수 있도록 도와주는 즉시 사용 가능한 컴포지션입니다. 이러한 레이아웃은 보기에도 좋고 기능적이며 Material 3 가이드에서 파생되었습니다.

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

목록-세부정보 레이아웃

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

콘텐츠는 정적 또는 동적일 수 있습니다.

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

Now in Android Figma 파일에는 여러 레이아웃 예시가 제공됩니다. 다음 예는 일차원적인 콘텐츠 모음을 보여줍니다.

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

피드 레이아웃

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

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

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

지원 창 레이아웃

모바일 뷰에는 콘텐츠 또는 컨트롤을 지원해야 할 수 있습니다. 일반적으로 시트 또는 대화상자의 형태로 제공되며, 기본 보기의 포커스를 유지하고 깔끔하게 정리하는 데 도움이 됩니다. 지원 창 표준 레이아웃 사용을 위한 M3 안내를 확인하세요.

하단 시트의 M3 가이드를 알아보세요.

상대적 레이아웃

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

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

지연 행 및 지연 열을 사용하여 스크롤하는 행 또는 열에 콘텐츠를 표시할 수 있습니다.

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

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

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

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

레이아웃 조정

적응형 디자인은 특정 중단점과 기기에 맞게 적응하는 레이아웃을 디자인하는 원칙입니다. 레이아웃이 변경되어야 하는(적응해야 하는) 지점을 정할 때는 보통 기기의 너비를 고려합니다. 웹과 Android 모두 유연한 그리드 및 이미지와 같은 반응형 디자인 개념을 활용하여 컨텍스트에 더 잘 반응하는 레이아웃을 만듭니다.

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

모든 앱을 모든 화면 크기에서 사용할 수 있어야 하는 것은 아니지만, 적응형 디자인을 사용하면 사용자가 인체 공학, 사용성, 앱의 품질 측면에서 더 자유롭게 작업할 수 있습니다.

• 클래스 크기를 가이드라인으로 하는 브레이크포인트로 주요 화면 (핵심 개념 또는 앱 전달)을 디자인할 수 있습니다.
• 또는 콘텐츠를 제한, 확장 또는 리플로해야 하는 방식을 표시하여 반응형으로 작동하도록 콘텐츠를 디자인합니다.

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

WebView

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