네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자

👋 들어가며

웹사이트 개발, 기획 등을 하다보면 GNB, LNB 등의 단어를 듣게 된다. 필자도 실무를 하면서 알게되었고, 항상 들을때마다 헷갈려서 이번 기회에 한 번 정리해보려한다.

네비게이션 영역?

네비게이션 영역은 이름처럼 네비게이션 즉 특정 페이지 이동을 위해 필요한 영역을 의미한다. 또한, 이러한 영역들은 모든 페이지에서 항상 고정된 영역을 차지하는 특징을 가지게된다.

GNB(Global Navigation Bar)

네이버 공식 홈페이지 GNB 영역

 

네이버 뉴스 서비스 GNB 영역

• 사이트 전체에 동일하게 적용되는 최상위 공통 네비게이션

포함되는 콘텐츠

• 사이트 로고 - 홈페이지 링크
• 메인 메뉴 - 대분류 메뉴라고도 하며, 주요 페이지 링크 버튼 역할을 하거나 호버시 서브 메뉴를 볼 수 있는 버튼 역할을 한다. 서브 메뉴가 있는 경우 클릭시 메인 서브 메뉴로 가는 링크 역할을 하기도 한다.

LNB(Local Navigation Bar)

네이버 공식 홈페이지 LNB(Local Navigation Bar) 영역

네이버 뉴스 서비스 LNB 영역

• GNB의 메인 메뉴의 서브 메뉴로 나오는 네비게이션 영역

포함되는 콘텐츠

• 서브 메뉴 - 중분류 메뉴라고도 하며, GNB 메뉴의 하위 페이지 혹은 GNB 메뉴 페이지의 특정 영역의 링크 역할을 한다.

SNB(Side Navigation Bar)

네이버 뉴스 서비스 SNB 영역

• 일반적으로 왼쪽에 위치해있으며, 메인 메유, 서브 메뉴를 제외한 나머지 사이드 메뉴를 포함하는 영역

FNB(Footer Navigation Bar)

네이버 뉴스 서비스 FNB 영역

• 하단메뉴, 하단로고, 회사의 주소, 카피라이팅 영역