[웹 디자인 용어] GNB, LNB, SNB, FNB

왠지 물음표 짤 블로그가 될 것만 같은 불안한 예감

전공자가 아니다 보니 개발을 하거나 혹은 회사생활을 하면서 새로운 용어를 접할때가 많다.

나야 뭐 대충 말하고 다니니 상관없지만 외부 업체랑 미팅을 하거나 혹은 기획자, 디자이너, 다른 개발자 분들과 협업을 하기 위해선 공통의 약속된 단어와 개념을 익히는거도 중요하다.

 

... 상단영역엔 검생창 영역과 GNB영역이 있으신 걸 보실 수 있습니다. ...

 

대충 문맥과 맥락상..그래도 신이 날 버리지 않은건지 상단검색창 아래의 웬 버튼들 모음을 GNB라고 하는건 알겠는데..

뭔 .. GNB 영어학원도 아니고.. 도대체 먼솔인고...

 

모르면 검색..검색.. 나중에 있어보이게 기록해둬야지...

GNB 란?

'글로벌 내비게이션 바 (Global Navigation Bar)' 의 약자로 웹페이지와 웹페이지를 서로 연결하는 하이퍼링크를 모아두는 자리를 뜻한다.

 

우리가 매일 보고 있는 웹사이트, 웹서비스들은 여러 웹페이지를 묶어서 이거 누르면 저리로 갈수있고 이거 누르면 이페이지 보내줄께요. 이렇게 동작하게 되는데 해당 링크들을 모아두는 자리이다.

어렵게 말했지만 보통 사이트 최상단, 혹은 좌측, 우측, 폴딩 형태로 제공되는 네비게이션 메뉴바를 의미한다.

당근마켓 서비스 GNB 영역

 

 

비슷한 단어들로 LNB(Local Navigation Bar), SNB(Side Navigation Bar), FNB(Foot Navigation Bar) 등이 있다.

LNB(Local Navigation Bar) - 현재 서비스 영역(Local)만 해당하는 네비게이션바

SNB(Side Navigation Bar) - 보편적으로 측면에 많이 있어 LNB, RNB 라고도 불리운다.

FNB(Foot Navigation Bar) - 하단메뉴 · 하단로고 · 주소 · 카피라이팅 영역에 있는 네비게이션 메뉴를 뜻함.

 

다이소 웹서비스의 GNB, LNB 영역

리디북스 서비스의 FNB 영역

 

참고

https://hanyonghee9264.github.io/front&design/2019/12/28/Front&Design-Web-Design(GNB-LNB-SNB-FNB)/