Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

더 넓은 화면 디자인

더 넓은 화면 앱은 시스템 표시줄 아래에 UI를 그려 전체 화면을 활용합니다.

**그림 1.** 왼쪽 더 넓은 화면을 활용하지 않는 앱 실제로 더 넓은 화면을 사용하는 앱

요약

더 넓은 화면 환경을 위해 시스템 표시줄 아래에 배경과 스크롤 콘텐츠를 그립니다.
시스템 인셋 아래에 탭 동작이나 드래그 타겟을 추가하지 마세요. 이는 더 넓은 화면 및 동작 탐색과 충돌합니다.

시스템 표시줄 뒤에 콘텐츠 그리기

더 넓은 화면 기능을 사용하면 시스템 표시줄 아래에 UI를 그려 몰입감 있는 환경을 제공할 수 있습니다.

앱은 인셋에 반응하여 콘텐츠 중복을 해결할 수 있습니다. 인셋은 시스템 표시줄 또는 디스플레이 컷아웃과 같은 실제 기기 기능과 겹치지 않도록 앱 콘텐츠에 패딩을 적용해야 하는 정도를 설명합니다. Compose 및 뷰에서 더 넓은 화면을 지원하고 인셋을 처리하는 방법을 알아보세요.

더 넓은 화면 사용 사례를 설계할 때는 다음과 같은 유형의 인셋에 유의하세요.

시스템 표시줄 인셋은 탭할 수 있고 시스템 표시줄에 의해 시각적으로 가려져서는 안 되는 UI에 적용됩니다.
시스템 동작 인셋은 OS에서 사용하는 동작 탐색 영역에 적용되며 앱보다 우선순위가 높습니다.
디스플레이 컷아웃 인셋은 카메라 컷아웃과 같이 디스플레이 표면으로 확장되는 기기 영역에 적용됩니다.

상태 표시줄 고려사항

기본 시스템 표시줄 디자인 가이드는 Android 시스템 표시줄을 참고하세요. 다음 섹션에서는 추가 상태 표시줄 고려사항을 설명합니다.

콘텐츠 스크롤

상단 앱 바는 스크롤하는 동안 접혀야 합니다. Material 3 TopAppBar를 접는 방법을 알아보세요. Material 3에서 작은 상단 앱 바는 상태 표시줄 높이로 접히거나 화면 밖으로 스크롤될 수 있습니다. 중형 및 대형 상단 앱 바는 더 작은 앱 바로 접을 수 있습니다. [Material 가이드][10]를 참고하세요.

권장사항

앱 바가 고정되어 있는 경우 작은 상단 앱 바를 상태 표시줄 높이로 접습니다.

권장사항

작은 상단 앱 바가 고정되어 있지 않은 경우 일치하는 배경 색상 그라데이션을 추가합니다.

상태 표시줄 아이콘이 복잡해 보이지 않도록 UI가 아래로 스크롤될 때 상태 표시줄은 반투명해야 합니다. 이렇게 하려면 먼저 LazyColumn 또는 RecyclerView 문서의 단계를 구현하여 스크롤 가능한 UI를 더 넓게 만듭니다. 그런 다음, 다음 중 하나를 실행하여 시스템 표시줄이 반투명한지 확인합니다.

해당하는 경우 스크롤 시 Material 3 TopAppBar 자동 보호 기능을 사용합니다.
맞춤 그라데이션 컴포저블을 만들거나 뷰에 GradientProtection을 사용합니다. Compose에서 이 작업을 실행하는 방법에 관한 자세한 내용은 시스템 표시줄 보호를 참고하세요.