XR용 Material Design 구현

Material Design은 XR에 맞게 조정되는 구성요소와 레이아웃을 제공합니다. 기존 Material 3 라이브러리를 사용하여 구성요소와 적응형 레이아웃이 공간 UI 동작으로 향상됩니다.

EnableXrComponentOverrides 래퍼를 추가하여 현재 M3 구현을 조정할 수 있습니다.

EnableXrComponentOverrides를 사용하여 기존 앱 조정

EnableXrComponentOverrides 래퍼 내의 모든 M3 Compose UI는 XR 기기에서 조정됩니다. 이 래퍼를 사용하면 이 동작에서 제외할 구성요소를 선택할 수 있습니다.

EnableXrComponentOverrides 래퍼를 추가하여 앱을 XR용 Material Design에 맞게 조정합니다.

NavigationSuiteScaffold를 비롯한 모든 Compose 레이아웃의 탐색 레일이 XR Orbiter에 자동으로 맞춰집니다. 자세한 내용은 Material Design 가이드라인을 참고하세요.

공간화되지 않은 탐색 레일
공간화된 (XR에 적응된) 탐색 레일

NavigationSuiteScaffold를 비롯한 모든 Compose 레이아웃의 탐색 메뉴가 XR 오리터에 자동으로 맞춰집니다. 자세한 내용은 Material Design 가이드라인을 참고하세요.

공간화되지 않은 탐색 메뉴
공간화된 (XR에 적응된) 탐색 메뉴

XR용 목록-세부정보 레이아웃

XR의 Compose Material 3 적응형 레이아웃은 각 창이 자체 XR 공간 패널 내에 배치되는 1:1 매핑을 갖습니다. ListDetailPaneScaffold적응형 디자인 가이드라인에 대해 자세히 알아보세요.

공간화되지 않은 ListDetailPaneScaffold
공간화된 (XR에 적응된) ListDetailPaneScaffold

XR의 창 레이아웃 지원

XR의 Compose Material 3 적응형 레이아웃은 각 창이 자체 XR 공간 패널 내에 배치되는 1:1 매핑을 갖습니다. SupportingPaneScaffold적응형 디자인 가이드라인에 대해 자세히 알아보세요.

공간화되지 않은 SupportingPaneScaffold
공간화된 (XR에 맞게 조정된) SupportingPaneScaffold

Figma용 Material 3 디자인 키트로 디자인 시작하기

Material 3 Design Kit의 요소 콜라주

Material 3 디자인 키트를 다운로드하여 시작하기

참고 항목