Android 시스템 표시줄

상태 표시줄과 탐색 메뉴를 통칭하여 시스템 표시줄이라고 합니다. 배터리 잔량, 시간, 알림 알림과 같은 중요한 정보를 표시하고 어디서나 직접적인 기기 상호작용을 제공합니다.

Android OS와의 상호작용을 위한 UI, 입력 방법 또는 기타 기기 기능을 설계할 때 시스템 표시줄의 가시도를 고려해야 합니다. 시스템 표시줄을 처리할 수 있도록 레이어의 맨 위에 시스템 표시줄을 둡니다.

테이크어웨이

• UI 안전 영역, 시스템 상호작용, 입력 방법, 디스플레이 컷아웃 및 기타 기기 기능을 고려하여 시스템 표시줄을 디자인에 포함합니다. 시스템 표시줄을 최상위 레이어에 유지하면 시스템 표시줄이 표시될 수 있습니다.

• 권장사항: 시스템 표시줄을 투명하게 만들고 앱을 전체 화면에 배치하고, 표시줄 아래에 UI를 계속 표시해 더 넓은 화면 환경을 제공합니다.

• 두 표시줄을 모두 투명하게 설정할 수 없는 경우 표시줄의 색상이 앱 본문의 색상과 일치해야 합니다. 예를 들어 하단 탐색 메뉴 색상은 동작 메뉴 색상과 일치시키고 상단 상태 표시줄 색상은 본문 색상과 일치시킵니다.

  

• 동작 인셋 아래에 탭 동작이나 드래그 타겟을 추가하지 마세요. 더 넓은 화면 및 동작 탐색과 충돌합니다.

  

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

더 넓은 화면 기능을 사용하면 Android에서 시스템 표시줄 아래에 UI를 그려서 더 몰입감 있는 환경을 제공할 수 있습니다. 탐색 메뉴를 투명하게 만드는 것은 사용자의 일반적인 요청이므로 더 넓은 화면 사용을 권장합니다. 더 넓은 화면을 지원하는 방법을 알아보세요.

앱은 인셋에 반응하여 콘텐츠의 중복을 해결할 수 있습니다. 인셋은 Android OS UI의 일부(예: 탐색 메뉴, 상태 표시줄) 또는 실제 기기 기능(예: 디스플레이 컷아웃)과 겹치지 않도록 앱의 콘텐츠를 얼마나 패딩해야 하는지 설명합니다.

더 넓은 화면 사용 사례를 위해 디자인할 때는 다음 인셋 유형에 유의하세요.

• 시스템 표시줄 인셋은 탭할 수 있고 시스템 표시줄로 시각적으로 가려서는 안 되는 UI에 적용됩니다.
• 시스템 동작 인셋은 시스템에서 사용하는 동작 탐색 영역에 앱보다 우선 적용됩니다.

상태 표시줄

Android 상태 표시줄에는 알림 아이콘과 시스템 아이콘이 있습니다. 사용자는 상태 표시줄을 아래로 당겨 알림 창에 액세스함으로써 상태 표시줄과 상호작용합니다.

상태 표시줄은 컨텍스트, 시간, 사용자가 설정한 환경설정이나 테마, 기타 매개변수에 따라 다르게 표시될 수 있습니다. 다음 예와 같이 상태 표시줄 스타일을 설정할 수도 있습니다.

더 넓은 화면이 필요하기 때문에 앱 콘텐츠가 전체 화면에 걸쳐지는지 확인합니다. 다음 예와 같이 더 넓은 화면에 투명 시스템 표시줄을 사용합니다.

알림이 도착하면 일반적으로 상태 표시줄에 아이콘이 표시됩니다. 이는 알림 창에 표시할 항목이 있다고 사용자에게 알립니다. 앱 아이콘이나 채널을 나타내는 기호 등을 사용할 수 있습니다. 알림 설계를 참고하세요.

상태 표시줄 스타일 설정

투명도 및 불투명도 설정과 함께 맞춤 색상이나 스타일을 사용하여 상태 표시줄 배경을 앱 테마의 일부로 지정합니다.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

배경 색상을 수동으로 설정하는 경우 최적의 대비를 위해 상태 표시줄 콘텐츠를 밝은 색이나 어두운 색으로 지정할 수도 있습니다.

디스플레이 컷아웃 및 상태 표시줄

디스플레이 컷아웃은 전면 센서를 위한 공간을 제공하기 위해 디스플레이 표면으로 확장되는 일부 기기에서의 영역입니다. 상태 표시줄의 모양에 영향을 줄 수 있습니다. 디스플레이 컷아웃은 제조업체에 따라 다를 수 있습니다.

디스플레이 컷아웃을 지원하는 방법을 알아보세요.

탐색 메뉴

Android에서는 사용자가 뒤로, 홈, 개요 컨트롤을 사용하여 내비게이션을 제어할 수 있습니다.

• Back: 이전 뷰로 바로 돌아갑니다.
• 홈이 앱에서 나와 기기의 홈 화면으로 전환됩니다.
• 최근 사용에는 앱이 열려 있고 최근에 열렸다고 표시됩니다.

사용자는 동작 탐색 (권장) 및 3버튼 탐색을 포함한 다양한 탐색 메뉴 구성 중에서 선택할 수 있습니다.

동작 탐색

Android 10 (API 수준 29)에서 도입된 동작 탐색은 권장되는 탐색 유형이지만 사용자의 환경설정을 재정의할 수는 없습니다. 동작 탐색은 뒤로, 홈, 개요에 버튼을 사용하지 않고 어포던스를 위한 단일 동작 핸들을 표시합니다. 사용자는 화면의 왼쪽이나 오른쪽 가장자리에서 스와이프하여 아래에서 앞뒤로 이동하고, 아래에서 위로 스와이프하여 홈으로 이동합니다. 위로 스와이프하고 길게 누르면 개요가 열립니다.

동작 탐색은 모바일과 큰 화면에 걸쳐 디자인할 수 있도록 보다 확장 가능한 탐색 패턴입니다. 최상의 사용자 환경을 제공하려면 다음과 같은 동작 탐색을 고려하세요.

• 더 넓은 화면 콘텐츠 지원
• 동작 탐색 인셋 아래에 상호작용이나 터치 영역을 추가하지 않습니다.

동작 탐색 구현에 관해 읽어봅니다.

3버튼 탐색

3버튼 탐색에는 뒤로, 홈, 개요 등 3개의 버튼이 있습니다.

기타 탐색 메뉴 변형

Android 버전 및 기기에 따라 사용자가 다른 탐색 메뉴 구성을 사용할 수 있습니다. 예를 들어, 버튼 두 개 탐색은 홈과 뒤로 가기에 버튼 두 개를 제공합니다.

탐색 스타일 설정

다음 예는 탐색 스타일을 구현하는 방법을 보여줍니다.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

Android는 동작 탐색 모드 또는 버튼 모드에서 사용자 인터페이스의 모든 시각적 보호를 처리합니다.

• 동작 탐색 모드: 시스템은 동적 색상 적응을 적용합니다. 시스템 표시줄의 콘텐츠는 뒤에 있는 콘텐츠에 따라 색상을 변경합니다. 다음 예에서 탐색 메뉴의 핸들은 밝은 콘텐츠 위에 배치되면 어두운 색상으로 변경되고 그 반대의 경우도 마찬가지입니다.

  

• 버튼 모드: 시스템에서 시스템 표시줄 (API 수준 29 이상) 또는 투명한 시스템 표시줄 (API 수준 28 이하) 뒤에 반투명 스크림을 적용합니다.

  

키보드 및 탐색

각 탐색 유형은 터치 키보드에 적절히 반응하여 사용자가 키보드 유형 닫기 또는 변경과 같은 작업을 실행할 수 있습니다. 키보드가 원활하게 전환되도록 하려면 키보드가 화면 하단에서 위아래로 슬라이드되는 앱의 전환을 동기화하는 전환을 원활하게 하려면 WindowInsetsAnimationCompat를 사용합니다.

몰입형 모드

전체 화면 환경이 필요한 경우(예: 사용자가 영화를 시청할 때) 시스템 표시줄을 숨길 수 있습니다. 사용자는 시스템 컨트롤을 탐색하거나 시스템 컨트롤과 상호작용하기 위해 여전히 탭하여 시스템 표시줄과 UI를 표시할 수 있어야 합니다. 전체 화면 모드를 위한 디자인에 관해 자세히 알아보거나 몰입형 모드의 시스템 표시줄을 숨기는 방법을 읽어 보세요.