재직 중인 회사에서 위치별 내비게이션에 대해 잘못된 용어를 사용하고 있어 따로 정리해 보았다.
내비게이션 바의 정의
내비게이션 바에 대해 GPT에 물어보니 아래와 같이 대답했다.
내비게이션바는 일반적으로 모바일 앱이나 웹 페이지에서 화면 상단이나 하단에 위치한 바를 의미합니다. 이 바에는 주로 홈 버튼, 뒤로 가기 버튼, 메뉴 버튼 등이 포함되어 있어 사용자가 앱이나 웹 페이지를 쉽게 탐색할 수 있도록 도와줍니다. 여행 서비스 앱을 개발 중이신 분이라면, 여행 관련 기능이나 메뉴에 대한 내비게이션바가 중요할 것입니다. 사용자가 쉽게 여행 정보를 찾고 이동할 수 있도록 디자인하는 것이 좋습니다.
내비게이션 바의 종류
내비게이션 바는 크게 GNB, LNB, SNB, FNB로 나눌 수 있으며 각각 Global Navigation Bar, Local Navigation Bar, Side Navigation Bar, Footer Navigation Bar의 약자이다.
GNB(Global Navigation Bar)
붉은색 박스 친 부분이 GNB 영역이다. GNB는 보통 웹사이트의 헤더 영역 쪽에 위치한다. 카테고리별 구분할 때 많이 사용되며 대분류라고 부르는 경우도 있다.
LNB(Local Navigation Bar)
GNB에 마우스 오버 했을 때 표시되는 영역을 LNB라고 한다. GNB의 2 depth라고 생각하면 된다. GNB영역은 보통 메인 상단 부분에 노출되기 때문에 2 뎁스 메뉴인 LBN를 호버 시 표출 형태로 숨기는 경우가 많다.
SNB(Side Navigation Bar)
SNB 영역. 보통 GNB와 LNB를 같이 쓰거나, GNB 클릭 후 SNB 메뉴가 표시되는 케이스를 흔히 볼 수 있다.
FNB(Footer Navigation Bar)
FNB 영역. Footer 영역에 사이트맵 형태로 제공되는 것이 대부분이다. GNB의 경우 메인 화면에 위치하기 때문에 주요 콘텐츠 노출을 위해 LNB 형태로 서브 메뉴를 숨기는 반면, FNB의 경우 화면이 끝나는 지점에 위치해 있기 때문에 영역을 넓게 써서 펼쳐진 상태로 표현하기 상대적으로 수월하다.
내비게이션 적용 기준
내비게이션 바를 어떻게 운영할지는 제품의 페이지 뎁스가 얼마나 세분화되어 있는지에 따라 결정하면 될 것 같다. 결국 사용자가 원하는 메뉴에 빠르게 접근할 수 있도록 도움을 주는 기능이기 때문에 그 관점에서 고민하면 된다.