탐색 창

탐색 창은 사용자가 다양한 대상과 기능에 액세스할 수 있도록 해주므로 모든 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가 번잡하고 어수선해 보일 수 있으므로 꼭 필요한 경우에만 드물게 사용하세요. 배지를 사용할 때는 배지가 명확하고 이해하기 쉬워야 하며, 사용자의 앱 탐색 기능을 방해하지 않아야 합니다.

배지가 펼쳐짐

배지 접힘

라벨

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

warning

주의

긴 라벨 사용을 피할 수 없는 경우 생략 부호를 사용하여 라벨을 자릅니다.

cancel

부적절한 예

줄바꿈이 필요한 긴 텍스트 라벨은 사용하지 않습니다.

cancel

부적절한 예

사용자가 앱을 탐색하기 어려울 수 있으므로 아이콘이 없는 탐색 창을 만들지 않는 것이 좋습니다.

cancel

부적절한 예

아이콘 탐색 항목과 아이콘이 아닌 탐색 항목을 섞지 마세요. 탐색 환경이 사용자에게 혼란을 줄 수 있습니다.

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

check_circle

의견을 제시하지

더 나은 사용자 환경을 위해 탐색 창의 기본 탐색 대상 수를 5~6개로 제한합니다.

cancel

부적절한 예

탐색 항목을 너무 많이 추가하면 세로 스크롤이 생성되어 사용자가 앱을 탐색하기 어렵게 만들 수 있으므로 피해야 합니다.