상태 표시줄과 탐색 메뉴를 통칭하여 시스템 표시줄이라고 합니다. 배터리 수준, 시간, 알림 알림과 같은 중요한 정보를 표시하고 어디서나 직접적인 기기 상호작용을 제공합니다.
Android OS와의 상호작용을 위한 UI, 입력 방법 또는 기타 기기 기능을 디자인할 때 시스템 표시줄의 가시도를 고려해야 합니다. 시스템 표시줄을 고려할 수 있도록 대부분의 레이어 상단에 유지합니다.
테이크어웨이
UI 안전 영역, 시스템 상호작용, 입력 방법, 디스플레이 컷아웃 및 기타 기기 기능을 고려하여 디자인에 시스템 표시줄을 포함합니다. 시스템 표시줄을 최상위 레이어에 두어 이를 고려하도록 합니다.
권장사항: 시스템 표시줄을 투명하게 만들고 앱을 전체 화면에 배치하여 막대 아래에 UI를 계속 표시하여 전체 화면 환경을 제공합니다.
두 표시줄을 모두 투명하게 설정할 수 없다면 막대의 색상이 앱 본문의 색상과 일치하는지 확인하세요. 예를 들어 하단 탐색 메뉴 색상을 동작 모음 색상과 일치시키고 상단 상태 표시줄 색상을 본문 색상과 일치시킵니다.
그림 2: 시스템 표시줄 색상이 앱의 본문 색상과 일치하는지 확인 동작 인셋 아래에 탭 동작이나 드래그 대상을 추가하지 마세요. 이렇게 하면 더 넓은 화면 및 동작 탐색과 충돌합니다.
그림 3: 시스템 동작 인셋. 이 영역 아래에 탭 타겟을 배치하지 마세요.
시스템 표시줄 뒤에 콘텐츠를 그립니다.
더 넓은 화면 기능을 사용하면 Android가 시스템 표시줄 아래에 UI를 그려 더 몰입도 높은 환경을 구현할 수 있습니다. 더 넓은 화면은 탐색 메뉴를 투명하게 만드는 것이 사용자의 일반적인 요청이므로 더 넓은 화면을 사용하는 것이 좋습니다. (더 넓은 화면 지원 방법을 알아보세요.)
앱은 인셋에 반응하여 콘텐츠 중복을 해결할 수 있습니다. 인셋은 Android OS UI의 일부(예: 탐색 메뉴나 상태 표시줄) 또는 디스플레이 컷아웃과 같은 실제 기기 기능과 겹치지 않도록 앱의 콘텐츠를 얼마나 패딩해야 하는지 설명합니다.
더 넓은 사용 사례용으로 설계할 때는 다음 유형의 인셋에 유의해야 합니다.
- 시스템 표시줄 인셋은 탭할 수 있고 시스템 표시줄로 인해 시각적으로 가려지면 안 되는 UI에 적용됩니다.
- 시스템 동작 인셋은 시스템에서 사용하는 앱보다 우선순위가 높은 동작 탐색 영역에 적용됩니다.
상태 표시줄
Android 상태 표시줄에는 알림 아이콘과 시스템 아이콘이 있습니다. 사용자는 상태 표시줄을 아래로 당겨 알림 창에 액세스하여 상태 표시줄과 상호작용합니다.
상태 표시줄은 컨텍스트, 시간, 사용자가 설정한 환경설정이나 테마, 기타 매개변수에 따라 다르게 표시될 수 있습니다. 다음 예와 같이 상태 표시줄 스타일을 설정할 수도 있습니다.
알림이 도착하면 일반적으로 상태 표시줄에 아이콘이 나타납니다. 이는 알림 창에 표시할 내용이 있음을 사용자에게 알립니다. 앱 아이콘 또는 채널을 나타내는 기호로 사용할 수 있습니다. 알림 디자인을 참고하세요.
상태 표시줄 스타일 설정
투명도 및 불투명도 설정과 함께 맞춤 색상이나 스타일을 사용하여 앱 테마의 일부로 상태 표시줄 배경의 스타일을 지정합니다.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
배경 색상을 수동으로 설정하는 경우 최적의 대비를 위해 선택적으로 상태 표시줄 콘텐츠의 스타일을 밝은 또는 어둡게로 지정할 수 있습니다.
디스플레이 컷아웃 및 상태 표시줄
디스플레이 컷아웃은 전면 센서를 위한 공간을 제공하기 위해 디스플레이 표면으로 확장되는 일부 기기의 영역입니다. 상태 표시줄의 모양에 영향을 줄 수 있습니다. 디스플레이 컷아웃은 제조업체에 따라 다를 수 있습니다.
디스플레이 컷아웃을 지원하는 방법을 알아보세요.
탐색 메뉴
Android에서는 사용자가 뒤로, 홈, 개요 컨트롤을 사용하여 탐색을 제어할 수 있습니다.
- 뒤로 버튼을 누르면 이전 뷰로 바로 돌아갑니다.
- 홈이 앱에서 나와 기기의 홈 화면으로 전환됩니다.
- 최근 사용에는 앱이 열려 있으며 최근에 열었음이 표시됩니다.
사용자는 동작 탐색 (권장) 및 3버튼 탐색을 비롯한 다양한 탐색 메뉴 구성 중에서 선택할 수 있습니다.
동작 탐색
Android 10 (API 수준 29)에서 도입된 동작 탐색은 권장되는 탐색 유형이지만 사용자의 환경설정을 재정의할 수 없습니다. 동작 탐색은 뒤로, 홈, 개요 버튼을 사용하지 않고 대신 어포던스를 위해 단일 동작 핸들을 표시합니다. 사용자는 화면의 왼쪽 또는 오른쪽 가장자리에서 스와이프하여 상호작용하여 아래에서 앞뒤로 이동하고 홈으로 이동합니다. 위로 스와이프하고 길게 누르면 개요가 열립니다.
동작 탐색은 모바일 및 큰 화면에서 디자인할 수 있는 보다 확장 가능한 탐색 패턴입니다. 최상의 사용자 환경을 제공하려면 다음과 같이 동작 탐색을 고려합니다.
- 더 넓은 화면 콘텐츠 지원
- 동작 탐색 인셋 아래에 상호작용이나 터치 영역을 추가하지 마세요.
동작 탐색 구현을 참고하세요.
3버튼 탐색
3버튼 탐색에는 뒤로, 홈, 개요 버튼이 3개 제공됩니다.
기타 탐색 메뉴 변형
Android 버전 및 기기에 따라 사용자가 다른 탐색 메뉴 구성을 사용할 수 있습니다. 예를 들어 버튼 두 개를 사용하는 탐색에서는 홈 버튼과 뒤로 가기 버튼 두 개가 제공됩니다.
탐색 스타일 설정
다음 예는 탐색 스타일을 구현하는 방법을 보여줍니다.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android는 동작 탐색 모드 또는 버튼 모드에서 사용자 인터페이스의 모든 시각적 보호를 처리합니다.
동작 탐색 모드: 시스템이 동적 색상 적응을 적용합니다. 동적 색상 조정을 사용하면 시스템 표시줄의 콘텐츠 색상이 배경색에 따라 변경됩니다. 다음 예에서는 탐색 메뉴의 핸들이 밝은 콘텐츠 위에 배치되면 어두운 색으로 변경되고 반대의 경우도 마찬가지입니다.
그림 15: 동적 색상 적응 버튼 모드: 시스템은 시스템 바(API 수준 29 이상) 뒤에 반투명 스크림을 적용하거나 API 수준 28 이하의 경우 투명한 시스템 바를 적용합니다.
그림 16: 시스템 표시줄 뒤에 있는 콘텐츠에 따라 색상을 변경하는 동적 색상 적응
키보드 및 탐색
각 탐색 유형은 터치 키보드에 적절하게 반응하여 사용자가 키보드 유형 닫기 또는 변경과 같은 작업을 실행할 수 있도록 합니다. 원활한 키보드 전환을 위해 키보드가 화면 하단에서 위아래로 슬라이드되는 방식으로 앱 전환을 동기화하는 원활한 전환을 위해 WindowInsetsAnimationCompat를 사용합니다.
몰입형 모드
사용자가 영화를 보고 있을 때와 같이 전체 화면 환경이 필요할 때 시스템 표시줄을 숨길 수 있습니다. 사용자가 시스템 컨트롤을 탐색하거나 상호작용하려면 여전히 탭하여 시스템 표시줄과 UI를 표시할 수 있어야 합니다. 전체 화면 모드 디자인에 관해 자세히 알아보거나 몰입형 모드의 시스템 표시줄을 숨기는 방법을 참고하세요.