콘텐츠 구성 및 구조

콘텐츠의 구조와 포함 방법을 사용하여 유연한 흐름과 리듬을 만드세요.

1. 기본 구조

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

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

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

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

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

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

2. 격리 적용

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

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

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

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

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

3. 콘텐츠 배치

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

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

4. 콘텐츠 조정

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

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

표기되지 않은 콘텐츠는 예상하거나 원하는 것과 다르게 표시될 수 있습니다.

고정된 콘텐츠

많은 요소에는 슬롯이나 스캐폴드를 사용한 상호작용, 스크롤, 포지셔닝이 내장되어 있습니다. 일부 요소는 스크롤에 반응하는 대신 고정된 상태로 유지되도록 수정할 수 있습니다. 예를 들어 중요한 작업을 포함하는 플로팅 작업 버튼 (FAB)이 있습니다.

정렬

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

구성요소 레이아웃

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

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