Android 시스템 표시줄

상태 표시줄과 탐색 메뉴를 통칭하여 시스템 표시줄이라고 합니다. 여기에는 배터리 수준, 시간, 사용 가능한 배터리 잔량과 같은 알림을 보내고, 어디서나 기기와 직접 상호작용할 수 있게 합니다.

시스템 표시줄의 가시도를 고려해야 합니다. Android OS, 입력 방법 또는 기타 Android OS와의 상호작용을 위한 UI 디자인 기기 기능에 따라 다릅니다. 시스템 표시줄을 대부분의 레이어 상단에 배치하여 반영되어야 합니다.

<ph type="x-smartling-placeholder">
</ph>
그림 1: 시스템 표시줄 뒤의 이미지

요약

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

  • 해야 할 일: 시스템 표시줄을 투명하게 만들고 앱을 전체 화면으로 배치합니다. 막대 아래의 UI를 계속하여 더 넓은 화면 환경을 제공합니다.

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

    <ph type="x-smartling-placeholder">
    </ph>
    그림 2: 시스템 표시줄 색상이 앱의 본체 색상과 일치하는지 확인
  • 동작 인셋 아래에 탭 동작이나 드래그 대상을 추가하지 않습니다. 이러한 항목 더 넓은 화면 및 동작 탐색과 충돌합니다.

    <ph type="x-smartling-placeholder">
    </ph>
    그림 3: 시스템 동작 인셋 탭 배치 피하기 이 영역의 타겟
    를 통해 개인정보처리방침을 정의할 수 있습니다.

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

더 넓은 화면 기능을 사용하면 Android에서 시스템 표시줄 아래에 더욱 몰입감 있는 경험을 제공합니다. 더 넓은 화면에 콘텐츠를 표시하기 때문에 탐색 메뉴가 투명하다는 것은 사용자의 일반적인 요청입니다. (자세한 내용은 더 넓은 화면 지원).

앱은 인셋에 반응하여 콘텐츠의 중복을 해결할 수 있습니다. 인셋은 설명 내 앱의 콘텐츠와 겹치지 않도록 앱의 콘텐츠를 어느 정도 또는 Android OS UI의 일부 또는(예: 탐색 메뉴나 상태 표시줄) 디스플레이 컷아웃과 같은 기기의 물리적 특징에 맞게 설계되었습니다.

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

  • 시스템 표시줄 인셋은 탭할 수 있으면서도 있어서는 안 되는 UI에 적용됩니다. 시스템 표시줄에 의해 시각적으로 가려집니다.
  • 시스템 동작 인셋은 시스템에서 사용하는 동작 탐색 영역에 적용됩니다. 우선순위를 두어야 합니다

상태 표시줄

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

<ph type="x-smartling-placeholder">
</ph>
그림 4: 상단 앱 바 상단에 강조 표시된 상태 표시줄 영역

상태 표시줄은 컨텍스트, 시간대, 사용 가능한 시간에 따라 사용자가 설정한 환경설정이나 테마 및 기타 매개변수가 포함됩니다. 또한 상태 표시줄 스타일로 설정합니다.

<ph type="x-smartling-placeholder">
</ph>
그림 5: 밝은 테마와 어두운 테마의 상태 표시줄

더 넓은 화면이 표시되도록 이제 앱 콘텐츠가 전체 화면에 걸쳐 있는지 확인합니다. 필요합니다. 더 넓은 화면에 콘텐츠가 있는 투명한 시스템 표시줄을 사용합니다(다음 링크 참고). 다음 예를 참고하세요.

<ph type="x-smartling-placeholder">
</ph>
그림 6: 더 넓은 화면 기능: 콘텐츠를 돋보이게 하는 데 적합 화면 공간을 최대한 많이 사용합니다.


<ph type="x-smartling-placeholder">
</ph>
그림 7: 콘텐츠를 개선하거나 앱의 스타일에 맞게 시스템 표시줄의 스타일 지정 브랜드 인지도 제고를 목표로 하는 광고주 시스템 표시줄을 기본 속성으로 설정된 상태로 두지 마세요.

알림이 도착하면 일반적으로 상태 표시줄에 아이콘이 표시됩니다. 이 알림 창에 무언가가 있다고 사용자에게 알립니다. 앱 아이콘이나 채널을 나타내는 기호 등을 사용할 수 있습니다. 자세한 내용은 알림 디자인.

<ph type="x-smartling-placeholder">
</ph>
그림 8: 상태 표시줄의 알림 아이콘

상태 표시줄 스타일 설정

맞춤 색상을 사용하여 앱 테마의 일부로 상태 표시줄 배경 스타일을 지정합니다. 스타일을 지정할 수 있습니다.

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

배경 색상을 수동으로 설정하는 경우 원하는 경우 상태에 스타일을 지정할 수 있습니다. 최적의 대비를 위해 콘텐츠를 밝게 또는 어둡게 설정합니다.

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

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

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

<ph type="x-smartling-placeholder">
</ph>
그림 9: 디스플레이 컷아웃의 예

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

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

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

동작 탐색

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

동작 탐색은 여러 플랫폼에서 설계할 수 있는 보다 확장 가능한 탐색 패턴입니다. 더 큰 화면에서 사용할 수 있습니다. 최상의 사용자 환경을 제공하려면 동작 탐색:

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

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

<ph type="x-smartling-placeholder">
</ph>
그림 10: 동작 핸들 탐색 메뉴

3버튼 탐색

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

<ph type="x-smartling-placeholder">
</ph>
그림 11: 3버튼 탐색 메뉴

기타 탐색 메뉴 변형

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

<ph type="x-smartling-placeholder">
</ph>
그림 12: 두 개의 버튼으로 구성된 탐색 메뉴

탐색 스타일 설정

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

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

Android가 동작으로 사용자 인터페이스의 모든 시각적 보호를 처리합니다. 버튼 모드로 전환할 수 있습니다.

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

    <ph type="x-smartling-placeholder">
    </ph>
    그림 13: 동적 색상 적응
  • 버튼 모드: 시스템에서 시스템 뒤에 반투명 스크림을 적용합니다. 시스템 표시줄 (API 수준 29 이상의 경우) 또는 투명한 시스템 표시줄 (API 수준의 경우) 28 이하).

    <ph type="x-smartling-placeholder">
    </ph>
    그림 14: 시스템 표시줄이 사용되는 동적 색상 적응 배경에 따라 색상을 변경합니다.

키보드 및 탐색

<ph type="x-smartling-placeholder">
</ph>
그림 15: 탐색 메뉴가 있는 터치 키보드

각 탐색 유형은 터치 키보드에 적절하게 반응하여 사용자가 광고를 닫거나 심지어 변경하는 등의 작업을 키보드 유형을 선택할 수 있습니다. 키보드가 원활하게 전환되도록 하려면 키보드 슬라이딩으로 앱의 전환과 동기화 화면 하단에서 위아래로 이동하면서 WindowInsetsAnimationCompat

몰입형 모드

<ph type="x-smartling-placeholder">
</ph>
그림 16: 전체 화면 환경을 보여주는 몰입형 모드 (가로 방향 휴대기기의 경우)

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