레이아웃 기본사항

레이아웃은 사용자가 활동에서와 같이 앱과 인터페이스할 수 있는 시각적 구조를 정의합니다. 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과 같은 표준 웹브라우저를 사용하여 사용자에게 콘텐츠를 제공하는 것이 좋습니다. 웹브라우저에 관한 자세한 내용은 인텐트로 브라우저 호출 가이드를 참고하세요.