영어로 읽기

다음을 통해 공유


탐색 레일

대형 화면 Android 장치는 휴대폰 폼 팩터보다 탐색 요소를 위한 공간이 더 많습니다. 재질 디자인 팀은 최근 대형 화면 및 접이식 장치에서 사용할 탐색 레일 구성 요소를 추가했습니다.

이 구성 요소는 더 큰 화면에서 탐색하는 인체 공학적 방법을 제공하며 위쪽, 가운데 및 아래쪽의 세 가지 맞춤을 지원합니다. 탐색 레일에는 8개 이상의 선택 항목이 있어야 합니다.

Navigation Rail with three variants aligned – top, center, and bottom

Navigation Rail 구성 요소를 사용하는 샘플 애플리케이션은 Surface Duo에서 실행되는 아래에 나와 있습니다. 이중 세로 방향으로 탐색 레일은 화면 왼쪽에 고정되어 화면이 열린 자세 상태일 때 탐색 요소에 쉽게 액세스할 수 있습니다. 이 동작은 태블릿과 같은 대형 화면 디바이스에도 적용됩니다.

Sample app spanned across two screens, using Navigation Rail on the left screen with five icon elements. Photos of plants are shown on the left screen and a single plant is selected on the right screen, with descriptive text also showing

접이식 파일은 일반적으로 더 작은 화면 영역(디바이스에 따라 완전히 접히거나 닫힌 경우)을 제공하는 기능을 제공하므로 앱은 아래쪽 탐색과 같이 화면 크기에 적합한 탐색 옵션으로 전환해야 합니다.

Example bottom navigation bar with five icon elements

아래쪽 탐색을 사용하는 전체 예제는 다음과 같습니다.

Sample app on a single screen showing the bottom navigation bar being used instead of Navigation Rail

아래쪽 탐색이 있는 기존 Android 휴대폰 앱은 더 큰 화면 및 접이식 화면에 적응할 때 탐색 레일을 추가하는 것을 고려해야 합니다.

사용 시기

다음 지침에 따라 기본 탐색 옵션에 대해 접이식 및 대형 화면 디스플레이에서 탐색 레일을 사용합니다.

  • 앱의 어디에서나 액세스할 수 있어야 하는 최상위 대상
  • 앱의 3~8개 주요 대상

탐색 레일은 다음 용도로 사용하면 안 됩니다.

  • 더 작은 화면 크기(대신 아래쪽 탐색 사용 고려)
  • 목록 또는 스레드 보기와 같은 단일 작업 작업
  • 보조 탐색

샘플 Android 앱

Xml 레이아웃과 Jetpack Compose를 사용하는 Kotlin을 사용하여 사용할 수 있는 Navigation Rail 샘플 앱이 있습니다.

Jetpack Compose example of Navigation Rail sample app

디자인 구성 요소

탐색 레일 레이아웃에 대한 시각적 지침은 디자인 키트 를 참조하세요.

Design Kit screenshot showing six different Navigation Rail alignments