탐색 창

탐색 창은 사용자가 다양한 대상과 기능에 액세스할 수 있도록 해주므로 모든 TV 앱의 필수 구성요소입니다. 탐색 창은 앱 정보 아키텍처의 중추이며, 앱을 탐색하는 명확하고 직관적인 방법을 제공합니다.

모바일 탐색 창과 달리 TV의 탐색 창에는 펼쳐진 상태와 접힌 상태가 모두 사용자에게 표시됩니다.

리소스

유형	링크	상태
디자인	디자인 소스 (Figma)	사용 가능
구현	Jetpack Compose (NavigationDrawer) Jetpack Compose (ModalNavigationDrawer)	사용 가능

하이라이트

• 대상은 사용자 중요도에 따라 정렬되며 자주 발생하는 대상이 먼저 나오고 관련 대상이 함께 그룹화됩니다.
• 탐색 레일은 접을 때 표준 탐색 창과 모달 탐색 창 모두에 필요합니다.

변형

탐색 창 스타일에는 두 가지 유형이 있습니다.

1. 표준 탐색 창 — 펼쳐져서 탐색을 위한 추가 공간을 만들고 페이지 콘텐츠를 옆으로 밀어냅니다.
2. 모달 탐색 창 - 창이 펼쳐질 때 가독성을 개선하는 데 도움이 되는 스크림과 함께 앱 콘텐츠 위에 오버레이로 표시됩니다.

표준 탐색 창

분석

1. 상단 섹션: 앱 로고가 표시됩니다. 프로필을 전환하거나 검색 작업을 트리거하는 버튼의 역할을 합니다. 접힌 상태에서는 상단 컨테이너에 아이콘만 표시됩니다.
2. 탐색 항목: 탐색 레일의 각 항목에는 아이콘과 텍스트의 조합이 있으며 접힌 상태에서는 아이콘만 표시됩니다.
3. 탐색 레일: 탐색 레일은 기본 메뉴 역할을 하는 3~7개의 앱 대상을 보여주는 열입니다. 각 대상에는 텍스트 라벨과 아이콘(선택사항)이 있으며, 더 나은 문맥을 위해 메뉴 항목을 그룹화하는 옵션과 함께 제공됩니다.
4. 하단 섹션: 설정, 도움말, 프로필과 같은 페이지에 적합한 작업 버튼을 1~3개 포함할 수 있습니다.

동작

• 탐색 창 확장: 펼쳐지면 표준 탐색 창이 페이지 콘텐츠를 밀어 탐색의 확장된 버전을 위한 공간을 만듭니다.
• 탐색 업데이트: 한 탐색 항목에서 다른 탐색 항목으로 이동하면 페이지가 새 대상으로 자동 업데이트됩니다.

모달 탐색 창

분석

1. 상단 섹션: 앱 로고가 표시됩니다. 프로필을 전환하거나 검색 작업을 트리거하는 버튼의 역할을 합니다. 접힌 상태에서는 상단 컨테이너에 아이콘만 표시됩니다.
2. 탐색 항목: 탐색 레일의 각 항목에는 아이콘과 텍스트의 조합이 있으며 접힌 상태에서는 아이콘만 표시됩니다.
3. 탐색 레일: 기본 메뉴 역할을 하는 3~7개의 앱 대상을 표시하는 열입니다. 각 대상에는 텍스트 라벨과 아이콘(선택사항)이 있으며 더 나은 상황을 위해 메뉴 항목을 그룹화하는 옵션과 함께 제공됩니다.
4. 스크림: 탐색 항목 텍스트의 가독성을 개선합니다.
5. 하단 섹션: 설정, 도움말, 프로필과 같은 페이지에 적합한 작업 버튼을 1~3개 포함할 수 있습니다.

동작

• 창 확장: 앱 콘텐츠 위에 오버레이로 표시되며 창이 펼쳐질 때 가독성을 개선하는 스크림과 함께 표시됩니다.
• 탐색 업데이트: 사용자가 탐색 항목을 선택할 때 발생합니다.

스크림

모달 탐색 창의 경우 창 뒤에 스크림이 있어 창 콘텐츠를 읽을 수 있습니다. 탐색 창 뒤에 그라데이션 또는 단색 표면을 사용하여 다양한 UI 변형을 만들 수 있습니다.

사양

사용

배지

배지는 탐색 항목에 추가하여 추가 정보를 제공할 수 있는 시각적 신호입니다. 예를 들어 배지를 사용하여 스트리밍 앱에서 시청할 수 있는 새 영화의 수를 나타낼 수 있습니다. 배지는 UI가 번잡하고 어수선해 보일 수 있으므로 꼭 필요한 경우에만 드물게 사용하세요. 배지를 사용할 때는 배지가 명확하고 이해하기 쉬워야 하며, 사용자의 앱 탐색 기능을 방해하지 않아야 합니다.

라벨

탐색 창의 라벨은 명확하고 간결해야 보다 쉽게 읽을 수 있어야 합니다.

탐색 창은 앱의 계층 구조를 나타내는 기본 요소이며 기본 탐색 대상을 5~6개만 나열하는 데 사용해야 합니다.