알아두면 유용한 UI/UX 기본 용어 - GNB, LNB, SNB, FNB(웹사이트 메뉴 용어)

 

GNB, LNB, FNB, SNB는 주로 내비게이션(Navigation) 용도로 사용되는 UI 요소의 약어이다. 각 용어는 콘텐츠와 메뉴를 어떻게 배치하고 연결할지 결정하는 데 중요한 역할을 하며, 사용자 경험을 향상시키기 위해 다양한 방식으로 사용된다.

 

ㅣGNB (Global Navigation Bar)

 

GNB는 Global Navigation Bar의 약자로, 전체 사이트나 앱에서 전반적으로 사용되는 네비게이션 바이다. 사용자가 어느 페이지에 있든 전체 서비스의 주요 메뉴나 카테고리로 쉽게 접근할 수 있도록 상단에 고정된 형태로 나타나는 것이 특징이다. GNB는 일반적으로 서비스의 핵심 메뉴나 기능들을 한눈에 볼 수 있도록 구성돼 있어, 사용자가 자주 찾는 항목을 빠르게 이동할 수 있게 해준다.

 

신한은행 PC / 신한은행 APP

 

신한 은행 PC 사이트를 보면 조회/이체/금융상품/공과금 등등 상단에 고정되어 나오는 메뉴가 보이는데, 이것이 GNB 이다. 신한은행 APP 에서도 상단 메뉴영역에 고정되어 있는 GNB를 확인 할 수 있다. 

 

ㅣLNB( Local Navigation Bar)

 

LNB는 Local Navigation Bar의 약자로, 특정 카테고리나 페이지 내에서 더 세부적인 항목들로 이동할 수 있게 도와주는 네비게이션 바이다. LNB는 사용자가 GNB를 통해 주요 섹션에 접근한 뒤 해당 섹션 내에서 세부적으로 탐색할 수 있도록 돕는다. GNB가 전체 서비스의 큰 틀을 제공한다면 LNB는 사용자가 특정 카테고리나 주제에 대해 더 깊이 탐색할 수 있게 한다.

 

신한은행 PC / 신한은행 APP

 

신한은행 PC와 APP에서 조회,이체 등의 GBN 메뉴를 들어가면 좀 더 세부적인 LNB를 확인 할 수 있다.

 

ㅣSNB(Sub Navigation Bar)

 

SNB는 Sub Navigation Bar의 약자로 서브 메뉴 내비게이션을 뜻한다. 사실 일할때 LNB와 SNB가 모두 세부 메뉴를 뜻하기 때문에 혼용해서 사용하기도 하고 대부분 세부 메뉴는 SNB보다는 LNB로 커뮤니케이션 하는게 사실이다. 

SNB는 LNB보다도 더 세부메뉴라고 이해하면 쉽다.

 

국민연금공단 PC / 국민연금공단 Mobile

SNB는 대부분 추가 세부메뉴가 많은 사이트에서 볼 수 있다. 국민연금공단 PC 사이트와 모바일 화면에서 볼 수 있듯이 연금정보라는 GNB 메뉴 > 알기쉬운 국민연금이라는 LNB > 또 추가로 나누어진 국민연금제도, 가입 및 신고 등의 메뉴가 SNB라고 볼 수 있다. 

 

ㅣFNB(Footer Navigation Bar)

 

FNB는 Footer Navigation Bar의 약자로, 페이지의 하단(푸터)에 위치한 내비게이션이다. 일반적으로 사이트의 법적 정보, 회사 소개, 개인정보 처리방침, 이용 약관 등을 포함하며, 사용자가 페이지를 다 읽고 하단에 도달했을 때 참고할 수 있는 링크로 구성된다.

 

신한은행 PC / 신한은행 모바일

신한은행 PC 사이트와 모바일 화면 제일 하단 푸터영역을 보면 개인정보처리방침, 신용정보활용체제, 전자민원, 위치기반 서비스 약관 등의 FNB를 확인 할 수 있다. 

 

ㅣ결론,요약

1. GNB : 최상단 메뉴로 어디서든 쉽게 접근 가능하다.
2. LNB : 특정 메뉴의 세부 메뉴를 확인 할 수 있다.
3. SNB : 특정 메뉴의 추가 세부 메뉴를 제공하여 사용자에게 더 많은 탐색 옵션을 제공한다.
4. FNB : 하단의 푸터에서 법적 정보나 회사 소개 등 보조적 링크를 포함한다.

 

이 내비게이션 시스템은 사용자에게 직관적이고 편리한 탐색 경험을 제공하며 웹사이트나 앱의 콘텐츠 구조를 이해하기 쉽게 만들어주는 중요한 UI 구성 요소이다. 깔끔하고 직관적인 네비게이션 구조를 만든다면 사용자가 쉽게 원하는 정보를 찾고 서비스에 대한 만족도가 높아질 것이다.