콘텐츠 구성 및 구조

콘텐츠의 구조와 포함 방법을 사용하여 유연한 흐름과 리듬을 만드세요. 먼저 레이아웃 컨테이너를 디자인한 다음 콘텐츠를 추가합니다.

1. 기본 구조: 콘텐츠를 안내하는 레이아웃 그리드

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

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

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

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

콘텐츠 중요도 또는 계층 구조는 더 많은 구조를 가져오는 레이아웃 그리드 유형을 결정하는 데 도움이 될 수 있습니다. 콘텐츠에 명확한 계층 구조가 있는 경우 계층적 레이아웃 그리드가 적합합니다. 예를 들어 대형 헤더와 주요 아트가 있는 편집 레이아웃이나 세부정보 화면이 있습니다.

모듈식 그리드는 사진 갤러리와 같이 중요도는 동일하지만 매우 구조화된 콘텐츠와 레이아웃에 적합합니다.

일관되게 반응형인 단방향 레이아웃을 만들거나 유연성이 더 필요한 경우 열 그리드를 선택하세요.

어떤 유형이든 레이아웃 그리드는 크기와 폼 팩터에 따라 조정되어야 합니다.

이 예시에서는 그리드 열을 사용하여 콘텐츠를 기본 그리드에 정렬하면서 유연한 크기 조정을 유지합니다. 다양한 폼 팩터를 수용하기 위해 열 그리드는 화면 크기에 따라 열 크기와 열 수를 변경하므로 콘텐츠도 조정할 수 있습니다. 레이아웃 그리드를 너무 세부적으로 설정하지 마세요. 대신 기준 그리드를 사용하여 일관된 간격 단위를 제공하세요.

또는 계층적 레이아웃 그리드를 사용하여 세부정보 화면을 순서대로 유지합니다.

일관된 레이아웃 그리드로 시작하세요. 콘텐츠에 필요한 경우 그리드를 나눕니다. 이 경우에도 다른 그리드가 콘텐츠의 요구사항에 적합할 수 있습니다.

페이저, 유동 레이아웃과 같은 레이아웃 컨테이너에 대해 자세히 알아보세요.

원고와 메이슨리는 다른 유형의 레이아웃 그리드입니다.

선택한 레이아웃 그리드는 창의 포함 개념을 사용하여 적응형 레이아웃의 콘텐츠를 그룹화할 수도 있습니다. 예를 들어 사용된 예는 세부정보 화면으로, 목록-세부정보 레이아웃에 표시될 수 있는 창입니다.

2. 격리 적용

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

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

Android는 행, 열, 상자를 빌딩 블록으로 사용하므로 비슷한 방식으로 포함을 설계할 수 있습니다. 비슷한 항목을 화이트 스페이스나 눈에 보이는 구분자로 그룹화하면 콘텐츠를 소화하는 데 도움을 줄 수 있습니다.

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

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

3. 콘텐츠 배치

레이아웃 그리드를 선택하고 컨테이너에 콘텐츠를 배치하면 Android에서는 기본 빌드 블록과 수정자 또는 그리드 및 플렉스박스와 같은 레이아웃 컨테이너를 사용하여 콘텐츠 요소를 처리하고 배치하는 다양한 방법을 제공합니다.

콘텐츠가 1차원인지 2차원인지 고려하세요. 예를 들어 콘텐츠는 가로, 세로 또는 양방향으로 흐를 수 있습니다.

다음 그림과 같이 인증 레이아웃은 2차원 그리드 레이아웃을 사용할 수 있습니다.

UI 요소는 필터나 콘텐츠 태그와 같이 한 방향으로 유연하게 배치될 수도 있습니다. Flexbox에 대해 자세히 알아보세요.

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

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

정렬

자동 레이아웃 흐름 및 정렬과 마찬가지로 UI 요소 정렬 및 정렬을 지정할 수 있습니다.

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

4. 콘텐츠 크기 조정 및 자르기

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

이미지가 모든 기기에서 올바르게 표시되도록 컨테이너 내에서 이미지의 크기를 조정하고 위치를 지정합니다. 그렇지 않으면 이미지의 기본 초점이 잘리거나 이미지가 레이아웃에 비해 너무 작거나 너무 클 수 있습니다.

적절한 크기 조절 및 자르기를 통해 다양한 기기 가로세로 비율과 방향을 수용합니다. 화면 비율은 크게 다를 수 있으므로 콘텐츠가 이러한 시나리오를 처리하는 방법을 지정하세요.

예를 들어 가로 모드의 휴대전화에서 전체 너비 히어로 이미지는 화면 전체를 차지합니다.

세로 전용 동영상과 같이 콘텐츠가 가로세로 비율을 유지해야 하는 경우 가로세로 비율을 제한하고 빈 공간을 균형 있게 조정합니다.

고정된 콘텐츠

많은 구성요소에는 앱 바와 같이 슬롯이나 스캐폴드를 사용한 상호작용, 스크롤, 위치 지정이 내장되어 있습니다. 일부 요소는 스크롤에 반응하는 대신 고정된 상태를 유지하도록 수정할 수 있습니다. 예를 들어 중요한 작업을 포함하는 플로팅 작업 버튼 (FAB)이 있습니다. 특정 사용 사례에서 더 나은 포커스를 위해 요소를 고정합니다. 예를 들어 숨겨진 입력을 방지하기 위해 텍스트 입력을 키보드에 고정합니다.

메시지 및 인증과 같은 텍스트 입력의 경우 입력이 키보드에 연결되고 단독 포커스가 부여됩니다.

레이아웃의 구성요소

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

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