디스플레이 컷아웃 지원

Compose 방법 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 디스플레이 컷아웃을 사용하는 방법을 알아보세요.

디스플레이 컷아웃은 일부 기기에서 디스플레이 표면으로 확장되는 영역입니다. 기기 전면의 중요한 센서를 위한 공간을 제공하면서 더 넓은 화면 환경을 제공합니다.

Android는 Android 9 (API 수준 28) 이상을 실행하는 기기에서 디스플레이 컷아웃을 지원합니다. 하지만 기기 제조업체는 Android 8.1 이하를 실행하는 기기에서는 디스플레이 컷아웃도 지원할 수 있습니다.

이 문서에서는 컷아웃 영역(즉, 컷아웃이 포함된 디스플레이 표면의 가장자리 직사각형 직사각형)을 사용하는 방법을 포함하여 컷아웃이 있는 기기를 지원하는 방법을 설명합니다.

중앙 상단 디스플레이 컷아웃의 예를 보여주는 이미지
그림 1. 1 디스플레이 컷아웃

앱의 컷아웃 영역 처리 방법 선택하기

콘텐츠가 컷아웃 영역과 겹치지 않도록 하려면 일반적으로 콘텐츠가 상태 표시줄 및 탐색 메뉴와 겹치지 않는지 확인하는 것으로 충분합니다. 컷아웃 영역으로 렌더링하는 경우 WindowInsetsCompat.getDisplayCutout()를 사용하여 각 컷아웃의 안전 인셋과 경계 상자가 포함된 DisplayCutout 객체를 검색합니다. 이러한 API를 사용하면 콘텐츠가 컷아웃과 겹치는지 확인할 수 있으므로 필요한 경우 위치를 변경할 수 있습니다.

콘텐츠를 컷아웃 영역 뒤에 배치할지 여부도 결정할 수 있습니다. layoutInDisplayCutoutMode 창 레이아웃 속성은 컷아웃 영역에 콘텐츠가 그려지는 방식을 제어합니다. layoutInDisplayCutoutMode를 다음 값 중 하나로 설정할 수 있습니다.

컷아웃 모드는 프로그래매틱 방식으로 설정하거나 활동에서 스타일을 설정하여 설정할 수 있습니다. 다음 예에서는 활동에 LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES 속성을 적용하는 스타일을 정의합니다.

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

다음 섹션에서는 다양한 컷아웃 모드를 자세히 설명합니다.

기본 동작

기본적으로 특수 플래그가 설정되지 않은 세로 모드에서는 컷아웃이 있는 기기의 상태 표시줄 크기가 최소한 컷아웃 높이와 같도록 조절되고 콘텐츠는 아래 영역에 표시됩니다. 가로 모드 또는 전체 화면 모드에서는 콘텐츠가 컷아웃 영역에 표시되지 않도록 앱 창이 레터박스 처리됩니다.

짧은 가장자리 컷아웃 영역에서 콘텐츠 렌더링하기

동영상, 사진, 지도, 게임과 같은 일부 콘텐츠의 경우 컷아웃 영역을 렌더링하는 것이 사용자에게 더 몰입도 높은 더 넓은 화면 환경을 제공하는 좋은 방법이 될 수 있습니다. LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES를 사용하면 시스템 표시줄이 숨겨지거나 표시되는지와 관계없이 세로 모드와 가로 모드에서 모두 콘텐츠가 디스플레이 짧은 가장자리의 컷아웃 영역으로 확장됩니다. 이 모드를 사용할 때는 중요한 콘텐츠가 컷아웃 영역과 겹치지 않도록 하세요.

다음 이미지는 세로 모드 기기의 LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES 예입니다.

세로 모드에서 컷아웃 영역으로 콘텐츠가 렌더링되는 모습을 보여주는 이미지
그림 2. 세로 모드에서 컷아웃 영역으로 콘텐츠 렌더링

다음 이미지는 가로 모드 기기의 LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES 예입니다.

가로 모드에서 컷아웃 영역으로 콘텐츠가 렌더링되는 모습을 보여주는 이미지
그림 3. 가로 모드에서 컷아웃 영역으로 콘텐츠 렌더링

이 모드에서는 창이 시스템 표시줄을 숨기고 있는지와 관계없이 세로 모드와 가로 모드 모두 디스플레이의 짧은 가장자리에 있는 컷아웃 아래로 창이 확장됩니다.

모서리의 컷아웃은 짧은 가장자리에 있는 것으로 간주됩니다.

모서리 컷아웃이 있는 기기를 보여주는 이미지
그림 4. 모서리 컷아웃이 있는 기기입니다.

디스플레이 컷아웃 영역으로 콘텐츠를 렌더링하지 않음

LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER를 사용하면 창이 컷아웃 영역과 겹치지 않습니다.

다음은 세로 모드 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER의 예입니다.

세로 모드의 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER를 보여주는 이미지
그림 5. 세로 모드 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER의 예

다음은 가로 모드에서의 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER 예입니다.

가로 모드의 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER를 보여주는 이미지
그림 6. 가로 모드의 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER

디스플레이 컷아웃 지원 권장사항

디스플레이 컷아웃을 사용할 때는 다음 사항을 고려하세요.

  • UI의 중요 요소의 배치에 유의하세요. 컷아웃 영역이 중요한 텍스트, 컨트롤 또는 기타 정보를 가리지 않도록 하세요.
  • 미세 터치 인식이 필요한 상호작용 요소를 컷아웃 영역에 배치하거나 확장하지 마세요. 컷아웃 영역에서 터치 감도가 더 낮을 수 있습니다.
  • 가능한 경우 WindowInsetsCompat를 사용하여 상태 표시줄 높이를 가져오고 콘텐츠에 적용할 적절한 패딩을 결정합니다. 상태 표시줄 높이를 하드코딩하면 콘텐츠가 겹치거나 잘릴 수 있으므로 하드코딩하지 마세요.

    부적절한 삽입 설정으로 인해 상단에서 콘텐츠를 잘라낸 모습을 보여주는 이미지
    그림 7. 콘텐츠가 겹치거나 잘리지 않도록 WindowInsetsCompat를 사용하세요.
  • View.getLocationInWindow()를 사용하여 앱에서 사용 중인 창 공간을 확인합니다. 앱이 전체 창을 사용한다고 가정하지 말고 View.getLocationOnScreen()를 사용하지 마세요.

  • 앱을 몰입형 모드로 전환하거나 몰입형 모드에서 나가야 한다면 shortEdges 또는 never 컷아웃 모드를 사용합니다. 기본 컷아웃 동작으로 인해 시스템 표시줄이 있는 동안 앱의 콘텐츠가 컷아웃 영역에서 렌더링되지만 몰입형 모드에서는 렌더링되지 않을 수 있습니다. 따라서 다음 예와 같이 전환 중에 콘텐츠가 위아래로 이동합니다.

    전환 중에 콘텐츠가 위아래로 이동하는 모습을 보여주는 이미지입니다.
    그림 8. 전환 중에 콘텐츠가 위아래로 이동하는 예
  • 몰입형 모드에서는 앱이 레터박스 처리할 때 전체 화면을 사용하지 않으므로 창 좌표와 화면 좌표를 사용할 때 주의해야 합니다. 레터박스 때문에 화면 원점의 좌표는 창 원점의 좌표와 같지 않습니다. 필요에 따라 getLocationOnScreen()를 사용하여 화면 좌표를 뷰의 좌표로 변환할 수 있습니다. 다음 이미지는 콘텐츠가 레터박스 처리할 때 좌표가 어떻게 다른지 보여줍니다.

    콘텐츠가 레터박스 처리되었을 때 창 좌표와 화면 좌표를 보여주는 이미지입니다.
    그림 9. 콘텐츠가 레터박스 처리되었을 때의 창 좌표와 화면 좌표
  • MotionEvent를 처리할 때 MotionEvent.getX()MotionEvent.getY()를 사용하면 유사한 좌표 문제를 방지할 수 있습니다. MotionEvent.getRawX() 또는 MotionEvent.getRawY()를 사용하지 마세요.

콘텐츠 렌더링 방식 테스트하기

앱의 모든 화면과 환경을 테스트합니다. 가능하면 다양한 유형의 컷아웃이 있는 기기에서 테스트합니다. 컷아웃이 있는 기기가 없는 경우 다음을 실행하여 Android 9 이상을 실행하는 모든 기기나 에뮬레이터에서 일반적인 컷아웃 구성을 시뮬레이션할 수 있습니다.

  1. 개발자 옵션을 사용 설정합니다.
  2. 개발자 옵션 화면에서 그리기 섹션까지 아래로 스크롤하고 컷아웃이 있는 디스플레이 시뮬레이션을 선택합니다.
  3. 컷아웃 유형을 선택합니다.

    에뮬레이터에서 디스플레이 컷아웃을 시뮬레이션하는 방법을 보여주는 이미지
    그림 10. 콘텐츠가 렌더링되는 방식을 테스트할 수 있는 개발자 옵션입니다.

추가 리소스