NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

기획

기획 용어 7부, 메뉴 혹은 내비게이션 개념 정리

메뉴를 오프라인으로 호환한다면 이는 Sign의 역할을 해줍니다. 현재 사용자가 어떤 위치에 있는지, 그리고 어떤 그룹 안에 속해 있는지 확인이 가능하며, 다른 메뉴로 이동을 돕는 기능을 말합니다. 그래서 기획 시, 메뉴의 레이블을 정하고 그룹화하는 업무를 진행하게 됩니다. 서비스의 사용성에 따라, 고객 여정의 흐름에 따라, 혹은 기능성에 따라 메뉴를 구분합니다. 이외 메뉴 설계에서 신경 써야 할 부분은 속도인데요. 서비스를 이용할 때, 사용자의 방문 목적이 분명한 경우가 많은데요. 이때 사용자의 빠른 목적 달성을 돕도록 설계해야 합니다. 이런 측면에서 음성으로 메뉴를 선택할 수 있으면, 스텝을 밟지 않고 즉각 이동할 수 있어 편리합니다. 또한 하드웨어 조작기가 있고, 직사각형의 긴 패널을 디자인하는 경우엔 Focus move를 고려하여, 메뉴 이동을 돕고 인지적으로 무리가 없는지 사용성 테스트를 진행합니다.

 

다른 UI와 마찬가지로 한 가지의 메뉴를 부르는 데 있어, 여러 개의 이름을 가지고 있는 경우가 많아 혼동의 여지가 있는데요. 오늘은 범용적인 메뉴 타입의 개념을 함께 알아보겠습니다.

 

1. 메뉴, 기본개념 짚어보기

메뉴

 

  • GNB(Global Navigation Bar)
GNB(Global Navigation Bar)

웹사이트 상위에 노출되는 메뉴를 의미합니다. 일반적으로 2 depth, 3 depth가 숨겨져 있고, 1 depth메뉴만 노출되어있습니다. 클릭 시, 하위 메뉴가 노출됩니다. (*다양한 메뉴 유형에 따라 2 depth, 3 depth가 함께 노출될 수도 있습니다.) 마우스 오버 시, 선택된 1 depth 메뉴가 blinking(점멸)하는 등 여러 형태의 effect를 주어 인지성을 높입니다. 네이버 같이 볼륨이 큰 서비스 혹은 플랫폼은 이 메뉴를 편집하여, 맞춤형 메뉴로 사용하는 경우도 많습니다. 1 depth메뉴는 회사에 따라 슈퍼 카테고리라고 부르는 경우도 봤습니다.

 

  • Footer menu, FNB(Footer Navigation Bar)

웹사이트 UI 레이아웃 맨 하단 영역에 위치하고 있습니다. 이 Footer 메뉴 내용은 모바일 서비스에서 노출되지 않은 경우도 있지만, 볼륨이 큰 커머스 모바일 서비스에서는 사용하기도 합니다. 고객 서비스와 같은 공통 영역과 라이선스나 회사 주소 등의 정보가 주로 노출됩니다.

 

  • Ribbon menu
Ribbon menu

리본 메뉴는 PPT나 Word에서 보듯이, 1차 메뉴 홈 아래 2차 메뉴까지 함께 노출되는 형태를 말합니다. 소프트웨어에서 많이 본 타입입니다.

 

  • Context menu

팝업 메뉴이나 바로가기 메뉴, 마우스 오른쪽 선택 시, 해당 메뉴가 호출됩니다.

 

  • Mega menu 

GNB의 일종으로, 1 depth메뉴 선택 시, 전체 하위 메뉴 전체가 노출됩니다. 이때에 이미지도 함께 노출될 수 있습니다. 메뉴의 양이 많고 복잡한 커머스, 쇼핑몰 웹사이트에서 많이 사용됩니다.

 

  • Tree table menu
Tree table menu
<출처: scriptcase>

트리 테이블 메뉴는 window의 사례를 통해 많이 접해 본 메뉴입니다. 마치 트리처럼 1 depth 메뉴 선택 시, 하위 메뉴가 노출되며 접기 펼치기를 통해 hierarchy가 한눈에 쉽게 확인되는 장점이 있습니다.

 

  • Multi-Level Menu
Multi-Level Menu
<출처: designseer.com>

서브 메뉴 항목이 없는 경우 해당 화면으로 이동하며, 하위 항목이 있는 경우, 메뉴 레이어에 서브 메뉴가 노출되며 상단에 back버튼이 노출되는 형식입니다. 지라 소프트웨어의 "보고서" 선택 시, 위와 같은 메뉴 유형이 사용되었습니다.

 

  • Drop down menu
Drop down menu
<출처: designseer.com>

특정 메뉴를 선택 시, 하단으로 세부 메뉴가 떨어지며 노출되는 방식입니다. pc, software, mobile 할 것 없이 모두 활용되는 UI 형태이지만, 터치 영역이 상대적으로 적은 모바일에서는 바텀 시트 형태로 대체되기도 합니다.

 

  • 삼선 메뉴, 햄버거 메뉴
삼선 메뉴, 햄버거 메뉴

<카카오 웹툰은 메뉴 호출 방식이나 삼선 메뉴도의 인터랙션도 흥미롭습니다.>

 

삼선 모양의 메뉴는 가장 대중적인 메뉴를 호출하는 아이콘 유형입니다. 선택 시, 숨겨져 있던 LNB가 노출되거나 합니다. 내비게이션 메뉴를 불러오기 위한 트리거(trigger)라고 부릅니다.

 

  • Full screen navigation menu

메뉴의 레이어가 전체를 가리느냐 혹은 일부만 노출되느냐 이런 부분도 기획자가 정의할 부분입니다. 해당 메뉴는 레이블링 그대로 전체 화면 위를 덮으며 노출되는 메뉴를 의미합니다.

 

  • Pushy Menu
Pushy Menu
<출처: designseer.com>

메뉴를 선택 시, 슬라이딩 형태로 메뉴 위에 왼쪽에서 노출되거나, 전체 화면을 덮는 형태로 노출되는 메뉴 레이어가 아닌 메뉴 버튼을 밀고 노출하는 형태의 메뉴입니다. 인터랙션에 따라 메뉴의 종류가 다양해지는 느낌입니다.

 

  • Circular menu, Wheel menu
Circular menu, Wheel menu
<출처: designseer.com>

원형 메뉴는 몇 년 전 네이버 모바일에서 보여준 UI 형태입니다. 혹은 wheel menu 타입으로 봐도 무방할 것 같습니다. 이를 모방하려는 타 서비스도 있었으나 대다수는 슬라이드 형태를 사용하고 있습니다. 마케팅에도 레트로 열풍이 있었듯이 원형 메뉴의 등장도 처음은 아니었지만, 상대적으로 많이 쓰이는 형태는 아닙니다.

 

  • Floating Menus.

플로팅 메뉴는 한 개의 메뉴만 화면에 노출되어 있고, 선택 시, 여러 세부 메뉴가 팝업 되어 노출되는 형식입니다. 숨겨져 있다가 메뉴가 노출됨으로 화면의 활용성이 커지는 장점이 있습니다. 몇 년 전에 많이 활용되다가 현재는 주춤한 느낌입니다.

 

  • LNB (Left Navigation Bar), Sliding Menu
LNB (Left Navigation Bar), Sliding Menu

왼쪽에서 노출되는 메뉴를 의미합니다. 웹사이트에서는 왼쪽에 배치되어있는 메뉴를 연상하셔도 좋고 모바일 서비스에서는 왼쪽에서 창이 호출되는 메뉴를 떠오르시면 됩니다. 슬라이딩 메뉴라고도 불립니다. 대형 커머스 웹사이트 같은 경우, LNB에서 상세 옵션을 선택하는 UI를 제공하기도 합니다.

 

  • Category tab menu

안드로이드에서 많이 보이던 타입입니다. 모바일 상단에 메뉴가 붙어있고 2 depth까지 노출되어 있는 형태로 선택 시, 하단의 contents가 변경되는 방식입니다. 2 depth가 많은 경우 딤드(dimmed) 처리되어 노출되고, 스와이프 하여 탐색하는 방식입니다. Horizontal tab menu와 유사한 UI 레이아웃입니다.

 

  • Bottom navigation menu

바텀 내비게이션 바의 메뉴는 가장 중요한 성격의 대메뉴가 배치됩니다. 바텀 내비게이션 메뉴를 사용하는 빈도가 많아졌는데요. 모바일에서 사용할 경우, 손가락 범위 안에서 가장 쉽게 조작이 가능하여 사용성을 개선할 수 있기 때문입니다. 실제로 여러 테스트를 통해 서비스의 사용 빈도가 증가했고, 사용성과 효율성도 증가했다는 조사 결과가 많았습니다.

 

  • Breadcrumbs, Directory
Breadcrumbs, Directory

소프트웨어 혹은 웹사이트 등에서 현재 내가 위치하고 있는 메뉴와 Hierarchy를 확인할 수 있습니다. 디렉터리는 개발자가 사용하는 용어입니다. 3 depth까지 제공하고, 많게는 4 depth까지 breadcrumbs를 통해 위치를 확인하며 이전 depth를 선택하여 이동하게끔 되어있습니다.

 

  • Step UI

상품 신청 프로세스에서 많이 볼 수 있는 UI입니다. 현재 어떤 단계까지 진행됐는지 손쉽게 확인하도록 합니다. 정확하게는 라디오 버튼 UI로도 노출되기도 하고, 간단하게 꺾쇠를 활용하기도 합니다.

 

* IA와 Menu structure의 차이

메뉴 설계를 할 때, IA란 개념을 정의에 맞게 사용하는 분들도 있지만 menu structure와 의미를 혼용해서 사용하는 분들도 계십니다. 따라서 IA를 어떤 의미로 이해하고 사용하는지 확인 후에 업무를 진행하는 것을 추천합니다.

 

* 마이크로 인터랙션 같은 디테일 효과

마이크로 인터랙션은 몇 년 전 등장한 개념입니다. 가장 흔한 사례로 페이스북에서 시작한 특정 영역을 long-tap시, 좋아요, 싫어요 등 여러 움직이는 귀여운 이모티콘이 노출되며 사용자의 감성을 자극하는 것을 말합니다. 메뉴에도 사용자에게 이와 같은 impact 혹은 피드백을 줄 수 있는 여러 재미 요소를 넣는다면, 타 서비스의 메뉴와 차별화되는 디테일 높은 기획을 하는데 도움이 될 것 같습니다.

 

 

WRAP-UP

언뜻 보기에 메뉴의 구조도를 정하고, 메뉴 UI나 사용될 인터랙션의 정의, 메뉴 레이블링 등 기획자의 작업은 다소 단순한 듯하고, 크게 능력 발휘가 안 되는 것처럼 보입니다. 그러나 그 안에서 재미있게 변형을 하거나 임팩트를 주는 일도 가능하다고 봅니다. 자주 사용되는 표준적인 메뉴 아이콘 디자인에 변형을 줄 수도 있고, 제스처와 인터랙션의 사용에 따라 메뉴가 hidden되고, 노출되는 부분을 색다르게 정의할 수도 있습니다.

 

※ 메뉴를 설계할 때 고려해야 할 점

  • 사용자를 직관적으로 빠르게 이동할 수 있게 만든다.
  • 메뉴에는 정보 구성과 체계가 필요하다.
  • 메뉴 설계에는 납득 가능한 인터랙션과 시선의 흐름을 반영한다.

<참고 이미지 출처>

https://designseer.com/jquery-navigation-plugins-menus/

https://www.scriptcase.net/tutorials/tree-menu/>

댓글 0

NINA.C

UX를 전공하고 UXUI, 서비스 기획자, 강사, 작가 활동을 하는 NINA입니다. 대중성 있는 UX를 연구하며 디자인 비즈니스를 구상하고 있습니다.

당신이 사인하기 전에 알아야 할 것들: ②일을 맡길 때

아웃소싱

당신이 사인하기 전에 알아야 할 것들: ①일을 할 때

아웃소싱

2022년 주목해야 할 IT 키워드 10가지

기획

비정규 직원과 커뮤니케이션 툴로 협업하는 방법

아웃소싱

UX측면에서 잘 만들어진 B2C사례 9부, 텍스트 콘텐츠 플랫폼의 UX는?

디자인

초보자를 위한 스토리보드 작성 팁

기획

외주 잘 맡기는 방법 3부: 외부 업체와 Co-working 하기

아웃소싱

ERP 중심의 물류전산화 2부, ERP 제품 집중 분석

프로덕트

UX측면에서 잘 만들어진 B2C사례: 8부, 피그마와 캔바

디자인

UX측면에서 잘 만들어진 B2C사례: 7부, 노인을 위한 UX는 있다

디자인

UX측면에서 잘 만들어진 B2C사례: 6부, 테슬라의 경험디자인

디자인

외주 잘 맡기는 방법 2부: 분쟁과 리스크를 줄이는 9가지 팁

아웃소싱

기획 용어 10부, JD로 보는 직무 개념 및 용어

기획

기획 용어 9부, AI 음성인식 기획 기초 용어

기획

ERP 중심의 물류 전산화 1부, ERP 가볍게 다가가기

프로덕트

기획 용어 8부, 팝업과 오류 유형 정리

기획

기획 용어 6부: 시작하기 프로세스 기초개념 알기

기획

외주 잘 맡기는 방법 1부: 외주 계약 전에 꼭 보세요!

아웃소싱

코로나로 인해 고용 및 비즈니스 환경은 어떻게 변화하고 있을까?

아웃소싱

UX측면에서 잘 만들어진 B2C사례: 5부, 교통서비스와 길안내

디자인

화면 정의와 기능 정의 3부, 유용한 상세 가이드 꿀팁

기획

기획 용어 5부: 인터랙션/제스처 알아가기

기획

‘아웃소싱’ 하기 전에 꼭 알아야 할 것들

아웃소싱

어디까지 왔나요? AI 적용사례

개발

프리랜서가 겪는 문제와 해결방안

프리랜싱

알아두면 좋을 IT관련 웹사이트들: 5부, IT 채용 정보 웹사이트

아웃소싱

화면 정의와 기능 정의 2부, 기획자를 위한 디스크립션 작성 원칙

기획

UX측면에서 잘 만들어진 B2C사례: 4부, 나이키 러닝 NRC & Fitbit

디자인

알아두면 좋을 IT관련 웹사이트들: 4부, UX디자이너가 포트폴리오를 만들 때

디자인

기획 용어 4부: 검색 기획/설계를 위한 기본 용어 알고 가기

기획

왜 아웃소싱인가?

아웃소싱

알아두면 좋을 IT관련 웹사이트들: 3부, 기획자의 웹사이트 10개

기획

UX측면에서 잘 만들어진 B2C사례: 3부, 카카오 모빌리티와 이브이패스

디자인

화면 정의와 기능 정의 1부, 기획자를 위한 화면 정의 원칙

기획

알아두면 좋을 IT관련 웹사이트들: 2부, IT 트렌드 세터를 위한 웹사이트 추천

기획

자율주행 기술의 현황: 3부, 자율주행차 디자인이 다른 점은?

개발

알아두면 좋을 IT관련 웹사이트들: 1부, 성장러를 위한 IT 웹사이트

기획

기획 용어 3부: 이커머스 페이지 기획 시 알아야 하는 기본 용어

기획

자율주행 기술의 현황: 2부, 움직이는 스마트폰, 무인 자동차!

개발

UX측면에서 잘 만들어진 B2C사례: 2부, 토스와 기업은행 아이원뱅킹

디자인

기획 용어 2부: UI 기획 시 알아야 하는 기초 용어

기획

기획 용어 1부: 웹, 앱 UI 설계 전 알아야 하는 기본 개념

기획

자율주행 기술의 현황: 1부, 완전 초짜들을 위한 자율주행 이해하기!

개발

UX측면에서 잘 만들어진 B2C사례: 1부, 디터람스 제품 디자인

디자인

프리랜서와의 프로젝트를 안정감 있게 이어가려면

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.