다양한 웹사이트 내비게이션 스타일 소개

안녕하세요 찐망고 입니다.

 

오늘은 웹내비게이션에 대해 알아보려 합니다.

웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다.

이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠.

 

내비게이션은 그 구성에 따라 여러 단계로 나누어집니다.

예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 

빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다.

이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다.

한국토지주택공사

 

 

반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다.

때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 다른 내비게이션을 사용하여 

하나는 모바일에 특화시키기도 합니다.

 

무조건 하나가 좋다 두 개가 좋다고 말할 수는 없습니다.

메뉴의 개수가 너무 많아 한눈에 보이지 않는 경우엔 전체메뉴를 이용하여 한눈에 보게 하기 위해

두 개의 내비게이션으로 작업하는 경우도 있으니까요.

 

이 사이트처럼요

한국토지주택공사

 

 

 

각각의 메뉴는 어떻게 부르는 게 좋을까요?

 

1. GNB(Global Navigation Bar)

• 사이트의 주 메뉴가 상단에 노출되며, 하위메뉴는 숨겨져 있음

해피머니아이엔씨 헤더네비게이션

 

 

2. Mega menu

• GNB의 일종으로, 1단 메뉴 선택 시, 전체 하위메뉴가 노출
• 이미지도 함께 노출되는 경우 있음
• 메뉴의 양이 많고 복잡한 보험, 은행, 커머스, 쇼핑몰웹사이트에서 많이 사용

한화생명 다이렉트 헤더 Mega menu

 

 

 

3. Multi-Level Menu

• 상단에 back버튼이 노출되며 멀티로 메뉴가 겹겹이 쌓이는 형태를 뜻함 
• 모바일 사이트에서 많이 사용하는 유형

아모레퍼시픽 멀티레벨 메뉴

 

 

 

4. Drop down Menu

• 메뉴 선택 시 하단으로 세부 메뉴가 떨어지며 노출되는 방식 

새미네부엌 드롭다운 메뉴

해피머니아이엔씨 풀 드롭다운 메뉴

 

 

 

5. 삼선메뉴, 햄버거메뉴

• 삼선 모양의 메뉴는 가장 대중적인 메뉴를 호출하는 아이콘 유형, 숨겨져 있던 내비게이션이 노출
• 햄버거 안에 패티가 들어있는 모양을 따서 햄버거 메뉴라고 부름

삼선메뉴 네비게이션

 

 

 

 

 

 

 

출처

해피머니아이엔씨 Happymoney INC.

 

새미네부엌 플랫폼

 

아모레퍼시픽 - A More Beautiful World

 

한화생명

 

 

 

 

 

제이쿼리로 다양한 내비게이션을 만들 수 있는데요 

음 사이트에서 보이는 저 코드들을 추천하지는 않습니다.

내비게이션의 종류들을 확인해 보라는 차원에서 공유합니다 

40 Free Responsive CSS Menus