웹사이트에서 유저의 서비스 탐색을 도와주는 카테고리. 서비스를 찾은 유저가 원하는 것을 쉽게 찾아낼 수 있게 직관적인 UI 구성이 필요한데요. 내비게이션 바라고 불리는 이 카테고리 영역은 위치와 역할에 따라 GNB, LNB, SNB, FNB 등으로 나눌 수 있어요. 인프런 사이트에서 GNB, LNB, SNB, FNB를 찾아볼까요?

1. GNB (Global Navigation Bar)

웹사이트 전체에 똑같이 적용되는 내비게이션 바이며, 어떤 페이지를 클릭해도 공통으로 쓸 수 있는 메뉴입니다. 보통 웹사이트 최상단에 위치하고 있어 메인 메뉴라고도 불러요. GNB의 Global 역시 웹사이트 모든 영역에 해당된다는 의미를 내포하고 있어요. 인프런 사이트에선 상단의 '강의', '로드맵', '멘토링' 등의 메뉴가 GNB 영역입니다.

2. LNB (Local Navigation Bar)

GNB를 클릭하거나 마우스를 호버했을 때 노출되는 하위 메뉴입니다. LNB의 Local은 웹사이트 중 특정 영역으로 한정한다는 의미가 있어, LNB 영역을 서브 메뉴라고도 해요. 인프런 사이트에선 GNB 영역에 마우스를 호버했을 때 LNB가 노출돼요.

3. SNB (Side Navigation Bar)

보통 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴를 SNB라고 해요. 보통 왼쪽이나 오른쪽에 위치하고 있어 Side라고 표현합니다. 인프런에서 GNB 영역의 '강의'나 '로드맵'을 클릭해서 이동했을 때 왼쪽에 SNB가 노출됩니다.

4. FNB (Foot Navigator Bar)

웹사이트 가장 하단에 위치하는 메뉴입니다. GNB처럼 사이트 내 모든 페이지에 공통으로 노출되는 메뉴입니다. 가장 하단에 위치하고 있어 Foot이라고 표현하며, 해당 영역을 푸터(Footer)라고도 해요. 보통 기업 정보 등 사이트의 정보가 위치하는 영역이에요. 인프런의 FNB에는 기업 정보, 코드 등록, 고객센터 등이 있어요.