상태 표시줄, 자막 표시줄, 탐색 메뉴를 함께 시스템 표시줄이라고 합니다. 배터리 잔량, 시간, 알림 알림과 같은 중요한 정보를 표시하고 어디서나 기기와 직접 상호작용할 수 있도록 지원합니다.
Android OS, 입력 방법 또는 기타 기기 기능과의 상호작용을 위한 UI를 설계하든 시스템 표시줄의 가시성을 고려하는 것이 중요합니다.
요약
앱을 설계할 때 시스템 표시줄을 포함합니다. UI 안전 영역, 시스템 상호작용, 입력 방법, 디스플레이 컷아웃, 상태 표시줄, 자막 표시줄, 탐색 메뉴, 기타 기기 기능을 고려합니다.
시스템 상태 표시줄과 탐색 메뉴를 투명 또는 반투명하게 유지하고 이러한 표시줄 뒤에 콘텐츠를 그려 더 넓은 화면에 표시합니다.
동작 인셋 아래에 탭 동작이나 드래그 타겟을 추가하지 마세요. 이러한 동작은 전체 화면 및 동작 탐색과 충돌합니다.
그림 2: 시스템 동작 삽입 이러한 영역 아래에 탭 타겟을 배치하지 마세요.
시스템 표시줄 뒤에 콘텐츠 그리기
전체 화면 기능을 사용하면 Android에서 몰입도 높은 환경을 위해 시스템 표시줄 아래에 UI를 그릴 수 있습니다. 이는 사용자의 일반적인 요청입니다.
앱은 인셋에 반응하여 콘텐츠의 겹침을 해결할 수 있습니다. 인셋은 상태 표시줄, 자막 표시줄, 탐색 메뉴와 같은 Android OS UI의 일부나 디스플레이 컷아웃과 같은 실제 기기 기능과 겹치지 않도록 앱 콘텐츠의 패딩을 얼마나 적용해야 하는지 나타냅니다. Compose 및 뷰에서 더 넓은 화면을 지원하고 인셋을 처리하는 방법을 알아보세요.
화면 전체 사용 사례를 디자인할 때는 다음과 같은 유형의 인셋에 유의하세요.
- 시스템 표시줄 인셋은 탭할 수 있고 시스템 표시줄에 의해 시각적으로 가려져서는 안 되는 UI에 적용됩니다.
- 시스템 동작 삽입은 시스템에서 사용하고 앱보다 우선하는 동작 탐색 영역에 적용됩니다.
- 디스플레이 컷아웃 인셋은 카메라 컷아웃과 같이 디스플레이 표면으로 확장되는 기기 영역에 적용됩니다.
상태 표시줄
Android 상태 표시줄에는 알림 아이콘과 시스템 아이콘이 있습니다. 사용자가 상태 표시줄을 아래로 당겨 알림 창에 액세스하여 상태 표시줄과 상호작용합니다.
상태 표시줄 아이콘은 컨텍스트, 시간, 사용자가 설정한 환경설정 또는 테마, 기타 매개변수에 따라 다르게 표시될 수 있습니다. 다음 예와 같이 상태 표시줄 아이콘 스타일을 설정할 수 있습니다.
앱 콘텐츠가 전체 화면에 걸쳐 표시되는지 확인하세요. 다음 예와 같이 엣지 투 엣지 콘텐츠를 사용하여 상태 표시줄과 탐색 메뉴를 투명 또는 반투명하게 유지합니다.
Android 15에서는 시스템 표시줄이 기본적으로 투명 또는 반투명하도록 더 넓은 화면이 적용됩니다. 이전 버전의 Android에서는 시스템 표시줄을 불투명하게 두지 마세요.
알림이 수신되면 일반적으로 상태 표시줄에 아이콘이 표시됩니다. 이렇게 하면 알림 창에 볼 것이 있음을 사용자에게 알립니다. 채널을 나타내는 앱 아이콘이나 기호일 수 있습니다. 알림 디자인을 참고하세요.
상태 표시줄 스타일 설정
enableEdgeToEdge()를 호출하여 모든 버전에서 상태 표시줄이 투명한지 확인합니다. 대비를 위해 상태 표시줄 아이콘 색상을 업데이트해야 합니다.
예를 들어 어두운 아이콘을 만들려면 다음 단계를 따르세요.
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
탐색 메뉴
Android에서는 사용자가 뒤로, 홈, 개요 컨트롤을 사용하여 탐색을 제어할 수 있습니다.
- 뒤로 버튼을 누르면 이전 뷰로 바로 돌아갑니다.
- 홈이 앱에서 기기의 홈 화면으로 전환됩니다.
- 개요에는 앱이 열려 있고 최근에 열렸음을 나타내는 아이콘이 표시됩니다.
사용자는 동작 탐색 (권장) 및 3버튼 탐색을 비롯한 다양한 탐색 메뉴 구성 중에서 선택할 수 있습니다. 최상의 환경을 제공하려면 여러 유형의 탐색을 고려하세요.
동작 탐색
Android 10 (API 수준 29)에서 도입된 동작 탐색은 권장되는 탐색 유형이지만 사용자의 환경설정을 재정의할 수는 없습니다. 동작 탐색은 뒤로, 홈, 개요에 버튼을 사용하지 않고 대신 어포던스용 단일 동작 핸들을 표시합니다. 사용자는 화면 왼쪽 또는 오른쪽 가장자리에서 스와이프하여 뒤로 이동하고 하단에서 위로 스와이프하여 홈으로 이동합니다. 위로 스와이프한 후 눌러 개요를 엽니다.
동작 탐색은 모바일과 대형 화면에서 설계할 때 더 확장 가능한 탐색 패턴입니다. 최상의 사용자 환경을 제공하려면 다음을 통해 동작 탐색을 고려하세요.
- 더 넓은 화면에 콘텐츠 표시를 지원합니다.
- 동작 탐색 인셋 아래에 상호작용이나 터치 영역을 추가하지 마세요.
동작 탐색 구현에 대해 알아보세요.
3버튼 탐색
3버튼 탐색은 뒤로, 홈, 개요 버튼 3개를 제공합니다.
기타 탐색 메뉴 변형
Android 버전 및 기기에 따라 사용자에게 다른 탐색 메뉴 구성이 제공될 수 있습니다. 예를 들어 2버튼 탐색은 홈과 뒤로 이동을 위한 버튼 두 개를 제공합니다.
탐색 스타일 설정
enableEdgeToEdge()를 호출하여 모든 버전에서 탐색 메뉴가 투명하거나 반투명한지 확인합니다.
Android 15 이상 기기 또는 enableEdgeToEdge()를 호출한 후에는 동작 탐색이 기본적으로 투명합니다. 3버튼 탐색은 기본적으로 반투명하며 대형 화면 기기의 작업 표시줄 내에 있는 경우 불투명합니다.
앱에 하단 앱 바가 있는 경우 Window.setNavigationBarContrastEnforced()를 false로 설정하여 하단 앱 바가 3버튼 탐색에 반투명 스림이 적용되지 않고도 시스템의 탐색 메뉴 아래에 그려질 수 있도록 합니다.
Android는 동작 탐색 모드와 버튼 모드에서 사용자 인터페이스의 시각적 보호를 처리합니다.
동작 탐색 모드: 시스템은 동적 색상 조정을 적용하며, 이때 시스템 표시줄의 콘텐츠가 그 뒤의 콘텐츠를 기반으로 색상을 변경합니다. 다음 예에서 탐색 메뉴의 핸들은 밝은 콘텐츠 위에 배치되면 어두운 색상으로 변경되고 그 반대의 경우도 마찬가지입니다.
그림 11: 동적 색상 조정 버튼 모드: 시스템은 버튼 탐색 메뉴 뒤에 반투명한 스림을 적용하며,
Window.setNavigationBarContrastEnforced()를false로 설정하여 삭제할 수 있습니다.
그림 12: 시스템 표시줄이 뒤에 있는 콘텐츠에 따라 색상을 변경하는 동적 색상 조정
키보드 및 탐색
각 탐색 유형은 터치 키보드에 적절하게 반응하여 사용자가 키보드 유형 닫기 또는 변경과 같은 작업을 실행할 수 있도록 합니다. 키보드 전환을 원활하게 하려면 앱 전환을 화면 하단에서 위아래로 슬라이딩하는 키보드와 동기화하는 원활한 전환을 위해 WindowInsetsAnimationCompat를 사용하세요.
디스플레이 컷아웃
디스플레이 컷아웃은 일부 기기에서 디스플레이 표면으로 확장되는 영역으로, 전면 센서를 위한 공간을 제공합니다. 디스플레이 노출 영역은 제조업체에 따라 다를 수 있습니다.
디스플레이 노출 영역은 UI의 모양에 영향을 줄 수 있습니다. Android 15(API 수준 35) 이상을 타겟팅하는 경우 앱은 기본적으로 디스플레이 노출 영역에 그립니다. 앱은 중요한 UI가 디스플레이 노출 영역 아래에 그려지지 않도록 디스플레이 노출 영역 인셋을 처리해야 합니다. 디스플레이 컷아웃을 지원하는 방법을 알아보세요.
몰입형 모드
사용자가 영화를 시청하는 등 전체 화면 환경이 필요한 경우 시스템 표시줄을 숨길 수 있습니다. 사용자는 시스템 컨트롤을 탐색하거나 상호작용하기 위해 시스템 표시줄과 UI를 표시하도록 계속 탭할 수 있어야 합니다. 전체 화면 모드용 디자인에 대해 자세히 알아보거나 몰입형 모드의 시스템 표시줄을 숨기는 방법을 알아보세요.