탐색 창

탐색 창은 사용자가 다양한 대상과 기능에 액세스할 수 있도록 해주므로 모든 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개만 나열하는 데 사용해야 합니다.

의견을 제시하지

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

부적절한 예

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