웹사이트를 둘러보다 보면 상단에 메뉴가 쭉 나열된 곳, 화면 왼쪽에 항목이 정리된 곳, 또는 페이지 맨 아래에 작게 적힌 링크들을 본 적 있지? 이런 메뉴들을 한눈에 이해하려면 GNB, LNB, SNB, FNB라는 용어를 알아두면 좋아. 어려운 말 같지만, 사실 엄청 간단하니 아래에서 쉽게 설명해줄께!
1. GNB (Global Navigation Bar)
GNB는 "전역 내비게이션 바"야.
이건 웹사이트 모든 페이지의 맨 위에 있는 메뉴를 말해. 어디를 가든 따라다니는 메뉴라서 가장 중요한 정보나 주요 카테고리를 여기다 배치하지.
- 어디서 볼 수 있어?
👉 쇼핑몰에서 "홈, 카테고리, 장바구니, 마이페이지" 같은 게 다 GNB야.
👉 회사 홈페이지라면 "회사 소개, 서비스, 고객 지원" 같은 메뉴를 떠올리면 돼.
🌟 Tip!
GNB는 웹사이트의 지도 같은 역할을 해. 한 번에 전체를 조망할 수 있거든!
2. LNB (Local Navigation Bar)
LNB는 "지역 내비게이션 바"야.
이건 특정 카테고리 안에서 세부 메뉴를 보여주는 메뉴야. 쉽게 말해, GNB에서 큰 카테고리를 클릭하면 그 안에 있는 작은 메뉴들이 LNB에 뜨는 거지.
- 어디서 볼 수 있어?
👉 예를 들어 옷 쇼핑몰에서 "남성복"을 클릭했더니 "셔츠, 바지, 코트"가 나왔다? 이게 바로 LNB야.
3. SNB (Side Navigation Bar)
SNB는 "사이드 내비게이션 바"야.
이건 이름처럼 화면 왼쪽 또는 오른쪽에 위치한 메뉴를 말해. 보통 LNB와 SNB가 비슷하게 쓰이는데, SNB는 구조적으로 전체를 한눈에 볼 수 있는 경우가 많아.
- 어디서 볼 수 있어?
👉 블로그에서 "카테고리 목록"이나 "태그"가 좌측에 정리된 경우가 많지? 바로 그게 SNB야.
👉 대시보드처럼 한눈에 관리하는 화면에서도 SNB가 자주 쓰여.
4. FNB (Foot Navigation Bar)
FNB는 "푸터 내비게이션 바"야.
이건 웹사이트 맨 아래쪽에 있는 메뉴야. 사이트의 정보(회사 소개, 연락처 등)를 제공하거나 추가 링크를 넣는 데 쓰여.
- 어디서 볼 수 있어?
👉 뉴스 사이트에서 맨 아래쪽에 "개인정보처리방침, 이용약관, 사이트맵"이 보이지? 그게 바로 FNB야.
🌟 Tip!
FNB는 보조적인 정보 제공 역할을 해서, 중요한 내용은 꼭 여기서 확인해 보자.
🔥 내비게이션 바 쉽게 요약!
| GNB | 상단 | 전체 웹사이트의 주요 메뉴 | 홈, 카테고리, 장바구니, 회사 소개 |
| LNB | 중간 (세부 페이지) | 특정 카테고리 안의 세부 메뉴 | 셔츠, 바지, 코트 |
| SNB | 좌우 측면 | 한눈에 보는 전체 구조 메뉴 | 블로그 카테고리 목록, 대시보드 관리 메뉴 |
| FNB | 하단 | 사이트 정보 제공 및 부가적인 탐색 메뉴 | 개인정보처리방침, 이용약관, 사이트맵, 연락처 |
이제 GNB, LNB, SNB, FNB의 차이가 확실히 느껴지지? 이렇게 내비게이션 구조를 이해하면, 웹사이트 기획이나 사용 경험 설계에도 큰 도움이 될 거야. 내비게이션 구조를 확인해보자!