UX Guidelines

GNB

Global Navigation Bar의 약자로, 서비스의 가장 기본적인 내비게이션을 담당하는 메뉴입니다.
서비스의 정체성을 전달하는 역할로 사용자 동선을 안내와 상위 레벨 탐색을 위해 제공되는 컴포넌트입니다.

  • GNB는 웹사이트의 모든 페이지에서 일관된 네비게이션을 제공합니다.
  • 사용자가 사이트 내에서 쉽게 이동하고 기능에 접근할 수 있도록 도와줍니다.

Anatomy

컴포넌트에 포함되는 요소에 대한 정의입니다.

  • 1. Container
  • 2. Text label
  • 3. GNB Icon
  • 4. Arrow (optional)

    하위 Depth가 있을 경우 표시합니다.

  • 1. Container
  • 2. Text label
  • 3. GNB Icon (optional)
  • 4. Additional Icon (optional)

    설명하고자 하는 부가 정보를 표시합니다.

  • 1. Container
  • 2. Menus
  • 1. 1depth Title

    2depth 메뉴에 진입한 경로를 표기합니다.

  • 2. Arrow

    하단에 추가적인 숨겨진 메뉴가 있을 경우 노출합니다.

  • 3. Container
  • 4. Menus

States

사용자가 현재 위치한 메뉴를 나타내기 위해 시각적으로 강조됩니다.
뎁스에 따라 다른 형상으로 나타납니다.

  • 1. Focused

    사용자가 해당 메뉴에 포커스한 상태입니다.

  • 2. Enabled

    일반적인 메뉴 상태입니다.

  • 3. Selected

    사용자가 해당 메뉴를 선택하여 진입한 상태입니다.

Layout

GNB는 여러 수준의 하위 메뉴를 포함할 수 있습니다.
이는 사용자가 상위 메뉴에서 선택한 옵션에 따라 하위 메뉴가 동적으로 나타날 수 있는 기능을 의미합니다.
하위 메뉴는 사용자에게 더 많은 선택 옵션을 제공하고, 네비게이션의 깊이를 늘릴 수 있습니다.

A GNB 1depth
B GNB 2depth

Additional

GNB가 닫혀있을 경우에는, 아이콘을 통해 현재 위치한 메뉴를 간접적으로 보여줍니다.
fold GNB 상태에서는 메뉴를 변경할 수 없고 GNB로 진입한 이후에만 가능합니다.

  • Fold GNB

    화면의 가장 좌측에 고정적으로 위치합니다.

  • Anatomy
  • States
  • Layout
  • Additional