디스플레이 컷아웃 지원

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 디스플레이 컷아웃을 사용하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> Compose의 디스플레이 컷아웃 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

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

Android는 Android 9 (API 수준 28) 및 더 높습니다. 그러나 기기 제조업체는 디스플레이 컷아웃을 지원할 수도 있습니다. Android 8.1 이하를 실행하는 기기에서 지원됩니다.

이 문서에서는 컷아웃이 있는 기기 지원을 구현하는 방법을 설명합니다. 예를 들어 컷아웃 영역, 즉 더 넓은 화면 가장자리를 컷아웃을 포함하는 디스플레이 표면의 직사각형을 만듭니다.

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

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

콘텐츠가 컷아웃 영역과 겹치지 않도록 하려면 일반적으로 콘텐츠가 상태 표시줄 및 화면 상단과 겹치지 않도록 탐색 메뉴 컷아웃 영역으로 렌더링하는 경우 WindowInsetsCompat.getDisplayCutout() 드림 DisplayCutout 객체를 가져옵니다. 각 컷아웃에 대한 안전 인셋과 경계 상자가 들어 있습니다. 이러한 API를 사용하면 콘텐츠가 컷아웃과 겹치는지 확인하여 필요한 경우 위치를 변경합니다.

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

  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: 디스플레이 컷아웃이 시스템 표시줄 그러지 않으면 창이 디스플레이 컷아웃과 겹치지 않습니다. 대상: 예를 들어 콘텐츠가 가로 모드로 표시될 때 레터박스가 적용될 수 있습니다. 만약 앱이 SDK 35를 타겟팅하면 플로팅이 아닌 경우 ALWAYS로 해석됩니다. 있습니다.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS: 콘텐츠는 항상 컷아웃 영역으로 확장될 수 있습니다. 앱이 SDK 35를 사용하고 Android 15 기기에서 실행되는 경우 더 넓은 화면에 표시할 수 있습니다.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: 콘텐츠는 세로 모드와 가로 모드 모두의 컷아웃 영역으로 렌더링됩니다. 금지사항 플로팅 창에 사용됩니다. 앱이 SDK 35를 타겟팅하는 경우 플로팅이 아닌 창의 경우 ALWAYS
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: 콘텐츠는 컷아웃 영역으로 렌더링되지 않습니다. 앱이 SDK 35를 타겟팅하는 경우 플로팅이 아닌 창의 경우 ALWAYS로 해석됩니다.

컷아웃 모드를 프로그래매틱 방식으로 설정하거나 style을 사용하는 것이 좋습니다. 다음 예에서는 LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES를 적용할 스타일을 정의합니다. 속성을 추가합니다.

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

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

기본 동작

앱이 SDK 35를 타겟팅하고 Android 15 기기에서 실행 중인 경우 LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS가 기본 동작입니다. LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT는 다음과 같이 해석됩니다. 플로팅이 아닌 창의 경우 LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS입니다.

그 외의 경우에는 LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT가 기본값입니다.

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

앱이 SDK 35를 타겟팅하고 Android 15 기기에서 실행 중인 경우 LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES는 다음과 같이 해석됩니다. 플로팅이 아닌 창의 경우 LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS입니다.

LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES를 사용하면 콘텐츠는 양쪽 측면에 있는 디스플레이의 짧은 가장자리에 있는 컷아웃 영역으로 시스템 표시줄이 숨겨져 있거나 가로로 놓여 있든지 관계없이 표시됩니다. 이 모드를 사용할 때는 중요한 콘텐츠가 콘텐츠와 겹치지 않도록 컷아웃 영역 안에 있어야 합니다.

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

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

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

가로 모드에서 컷아웃 영역으로 콘텐츠 렌더링이 이루어지는 모습을 보여주는 이미지
그림 3. 컷아웃 영역으로 콘텐츠 렌더링 사용할 수 있습니다.

이 모드에서 창은 디스플레이의 짧은 가장자리에 있는 컷아웃 아래로 확장됩니다. 창이 가로 방향으로 놓여 있는지와 상관없이 가로 및 세로 방향 모두 시스템 표시줄

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

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

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

앱이 SDK 35를 타겟팅하고 Android 15 기기에서 실행 중인 경우 LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER는 다음과 같이 해석됩니다. 플로팅이 아닌 창의 경우 LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS입니다.

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(으)로 상태 표시줄 높이를 가져오고 적용할 적절한 패딩을 결정 추가할 수 있습니다. 상태 표시줄 높이를 하드코딩하지 마세요. 겹치거나 잘린 콘텐츠

    <ph type="x-smartling-placeholder">
    </ph> 부적절한 인셋 설정으로 인해 상단에서 콘텐츠가 잘린 모습을 보여주는 이미지 <ph type="x-smartling-placeholder">
    </ph> 그림 7. WindowInsetsCompat 사용 용도 콘텐츠가 겹치거나 잘리지 않도록 하세요.
  • View.getLocationInWindow() 사용 를 사용하여 앱이 사용 중인 창 공간을 확인합니다. 앱이 다음과 같다고 가정하지 마세요. 전체 창을 사용하고 View.getLocationOnScreen()

  • 앱이 필요한 경우 always, shortEdges 또는 never 컷아웃 모드를 사용합니다. 몰입형 모드로 전환하거나 몰입형 모드를 종료할 수 있습니다. 기본 컷아웃 동작으로 인해 시스템 표시줄이 표시되어 있는 동안 컷아웃 영역에 렌더링할 수 있습니다. 몰입형 모드에서는 표시되지 않습니다. 이렇게 하면 콘텐츠가 위로 올라갑니다. 아래로 스크롤하면 됩니다.

    <ph type="x-smartling-placeholder">
    </ph> 전환 중에 콘텐츠가 위아래로 이동하는 모습을 보여주는 이미지입니다. <ph type="x-smartling-placeholder">
    </ph> 그림 8. 콘텐츠가 위아래로 이동하는 예 사용할 수 있습니다.
  • 몰입형 모드에서는 창 좌표와 화면 좌표를 사용할 때 주의하세요. 앱이 레터박스 처리되었을 때 전체 화면을 사용하지 않습니다. 왜냐하면 레터박스, 화면 원점으로부터의 좌표가 좌표와 같지 않음 창 원점에서 추출해야 합니다. 화면 좌표를 뷰의 getLocationOnScreen()를 사용하여 필요에 따라 좌표를 조정할 수 있습니다. 다음 이미지 콘텐츠가 레터박스 처리되었을 때 좌표가 어떻게 달라지는지 보여줍니다.

    <ph type="x-smartling-placeholder">
    </ph> 콘텐츠가 레터박스 처리된 경우 창 좌표와 화면 좌표를 보여주는 이미지입니다. <ph type="x-smartling-placeholder">
    </ph> 그림 9. 창 좌표와 화면 좌표 레터박스 처리됩니다.
  • MotionEvent를 처리할 때는 다음을 사용합니다. MotionEvent.getX() 및 피해야 할 사항 MotionEvent.getY() 좌표 문제가 있습니다. 사용 안함 MotionEvent.getRawX() 또는 MotionEvent.getRawY()

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

앱의 모든 화면과 환경을 테스트합니다. 다양한 유형의 컷아웃 유형을 차단하세요. 컷아웃이 있는 기기가 없는 경우 Android를 실행하는 모든 기기나 에뮬레이터에서 일반적인 컷아웃 구성을 시뮬레이션 버전 9 이상을 실행하는 방법은 다음과 같습니다.

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

    <ph type="x-smartling-placeholder">
    </ph> 에뮬레이터에서 디스플레이 컷아웃을 시뮬레이션하는 방법을 보여주는 이미지 <ph type="x-smartling-placeholder">
    </ph> 그림 10. 개발자 옵션을 사용하여 있습니다.

추가 리소스