웹 UI 기본 내비게이션 용어 완전 정리: GNB, LNB, SNB, FNB

웹 개발하거나 사이트 구조를 공부하다 보면 내비게이션 메뉴 용어(GNB, LNB, SNB, FNB)를 마주하게 된다.

 

초보자는 물론, 프론트엔드/풀스택 개발자에게도 놓치기 쉬운 UI 기본 개념이다.

이번 글에서는 이 내비게이션 개념들을 한눈에 파악할 수 있게 정리해보고자 한다.

 

보다 설명을 쉽게 하기 위해, 공공기관 사이트인 한국식품안전관리인증원(https://www.haccp.or.kr/main.do) 웹사이트를 실제 예시로 사용한다. 

이 사이트는 식품 안전관리 인증 관련 정보를 제공하는 공공기관 홈페이지로, 다양한 내비게이션 구조가 잘 드러나는 대표적인 사례이다.

 

---

 

웹 내비게이션 바란?

웹사이트에서 사용자가 목적한 콘텐츠로 쉽게 이동하도록 돕는 UI 메뉴이다.

사용자는 이 메뉴를 통해 서비스 기능/페이지를 탐색하고 웹서비스를 빠르게 이해한다.

 

웹 UI에서 내비게이션은 위치에 따라 구분 명칭이 다르며, 각각의 역할이 있다.

 

 

1. GNB (Global Navigation Bar)

- 사이트의 최상단 공통 메뉴

- 페이지 어디에서든 항상 보이는 메인 내비게이션

 

대부분의 웹사이트에서 상단에 항상 보이는 메뉴이다.

 

전체 서비스 흐름을 보여주는 역할을 하며,

아래와 같이 "정보공개, 경용공시, 국민소통" 과 같은 전체 메뉴 리스트가 여기에 해당된다.

→ GNB는 Global이라는 이름처럼 웹 전체를 아우르는 핵심 내비게이션이다.

 

 

 

2. LNB (Local Navigation Bar)

- 특정 페이지나 섹션에서 세부 메뉴 역할

- 보통 GNB에서 메뉴를 클릭/호버하면 나타나는 서브 메뉴

 

LNB는 GNB와 달리 특정 페이지/영역에만 적용된다.

사용자가 GNB에서 메뉴를 선택했을 때, 그 아래 보여지는 세부 카테고리라고 보면 된다.

 

아래와 같이, "정보공개" 클릭 → 또 다른 관련 메뉴(정보공개제도/공공데이터/공무국외출장 등) 가 LNB로 나타나는 구조이다.

 

 

 

3. SNB (Side Navigation Bar)

- 측면 서브 메뉴

- 특정 페이지 내에서 추가적인 메뉴 제공

 

흔히 왼쪽 또는 오른쪽에 추가로 붙는 메뉴이다.

대부분 서비스의 콘텐츠 카테고리/필터 영역으로 활용되며,

페이지 내부 상세 탐색을 돕는 구조이기도 하다.

 

아래와 같이 "정보공개 > 정보공개제도 > 제도안내"  같은 계층 메뉴가 이에 속한다.

 

 

 

4. FNB (Foot Navigation Bar)

- 웹사이트 가장 아래 푸터 영역 메뉴

- 홈페이지 전체에서 공통으로 표시되는 정보

 

푸터(Footer) 영역의 내비게이션이 바로 FNB이다.

아래처럼 기관 주소, 연락처, 개인정보 처리방침 등 부가 정보와 관련된 링크들이 여기 들어간다.

 

 

 

 

마무리

웹 구조를 이해하려면 내비게이션 구조를 먼저 파악하는 것이 중요하다.

UI/UX 설계, 웹페이지 구조 분석, 프론트엔드 개발까지 모두 이 개념을 기반으로 진행된다.

 

- GNB부터 FNB까지 영역별 용어를 정확히 알고 있으면

→ 서비스 설계/협업 커뮤니케이션에서 훨씬 빠르게 이해할 수 있다.