안녕하세요, 디자인 엔지니어 올리브예요.
GNB(Global Navigation Bar)는 사이트의 모든 페이지를 보여 주는 목록이 아니라, 사용자가 가장 먼저 찾는 몇 갈래 길을 보여 주는 표지판이에요. 페이지가 수백 개인 대형 사이트에서 전부 GNB에 넣으면 고를 게 너무 많아져서 오히려 아무것도 못 찾게 돼요. 나머지 페이지는 하위 메뉴, 검색, 푸터 같은 다른 길로 보내야 해요.
규모가 큰 사이트를 작업하면 "이 페이지도 메뉴에 꼭 넣어 주세요"라는 요청을 정말 많이 받아요. 부서마다 자기 페이지가 중요하니까요. 그럴 때 설명할 근거를 정리해 뒀어요.
GNB란?
GNB는 사이트 어느 페이지에서나 똑같이 보이는 최상위 메뉴예요. 보통 화면 맨 위 가로줄에 있어요. 이 블로그로 치면 맨 위의 카테고리 메뉴(AI 도구, 제작기, 웹디자인 실무, SEO, 생각)가 GNB예요.
비슷한 말도 같이 알아 두면 좋아요.
| 구분 | 뜻 | 보이는 곳 |
|---|---|---|
| GNB | 사이트 전체 공통 메뉴 | 모든 페이지 상단 |
| LNB | 한 섹션 안의 하위 메뉴 | 해당 섹션 왼쪽이나 상단 |
| 유틸리티 메뉴 | 로그인, 장바구니, 언어 선택 | 상단 오른쪽 구석 |
| 브레드크럼 | 지금 위치까지의 경로 | 본문 위 |
| 푸터 메뉴 | 회사 정보, 약관, 전체 링크 | 모든 페이지 하단 |
GNB는 이 중 가장 비싼 자리예요. 모든 페이지에 나오고, 사용자가 가장 먼저 보거든요.
GNB에 모든 페이지를 넣으면 왜 안 되나요?
고를 게 많을수록 왜 늦게 고르나요?
선택지가 많아질수록 결정하는 데 시간이 더 걸려요. 1952년 윌리엄 힉(William Hick)과 레이 하이먼(Ray Hyman)의 실험에서 나온 이 관찰을 힉의 법칙(Hick's law) 이라고 불러요. 메뉴가 5개면 훑어보고 바로 고르지만, 30개면 하나씩 읽어 내려가야 해요. 그사이에 사용자는 "그냥 검색하자" 하거나 사이트를 떠나요.
메뉴가 많으면 중요한 게 왜 묻히나요?
모든 메뉴가 같은 크기, 같은 굵기로 나열되면 무엇이 중요한지 알 수 없어요. 사용자 80%가 찾는 메뉴와 1년에 몇 번 열리는 공지 페이지가 똑같은 무게로 보이게 돼요. 다 강조하면 아무것도 강조하지 않은 것과 같아요.
모바일에서는 왜 더 문제가 되나요?
모바일에서는 GNB가 보통 햄버거 메뉴(☰) 안으로 들어가요. 메뉴가 많으면 그 안에서 길게 스크롤해야 하고, 2단, 3단 아코디언을 계속 펼쳐야 해요. 데스크톱에서 그럭저럭 보이던 긴 메뉴가 모바일에서는 미로가 돼요.
나중에 고치기도 어렵나요?
네. 한번 GNB에 들어간 메뉴는 빼기가 정말 어려워요. 그 메뉴를 맡은 쪽에서 반대하기 쉽고, 메뉴가 바뀌면 주소, 즐겨찾기, 검색 결과까지 영향을 받아요. 그래서 처음부터 GNB 자리를 아껴 두는 편이 훨씬 쉬워요.
그럼 나머지 페이지는 어디에 두나요?
GNB에서 빠진다고 사라지는 게 아니에요. 다른 길로 보내면 돼요.
| 페이지 종류 | 보낼 곳 | 예 |
|---|---|---|
| 섹션 안의 세부 페이지 | LNB, 메가 메뉴 2단 | 제품 > 노트북 > 게이밍 |
| 자주 찾지만 메뉴는 아닌 것 | 검색, 바로가기 배너 | 이벤트, 쿠폰 |
| 꼭 있어야 하지만 드물게 찾는 것 | 푸터 | 개인정보처리방침, 채용 |
| 로그인한 사람만 쓰는 것 | 유틸리티 메뉴 | 마이페이지, 주문 내역 |
| 특정 상황에서만 필요한 것 | 본문 안 링크 | 반품 안내 → 주문 상세 화면 안에 |
메가 메뉴로 다 펼치면 되지 않나요?
메가 메뉴는 GNB에 마우스를 올리면 하위 메뉴를 넓게 펼쳐 보여 주는 방식이에요. 하위 페이지를 한 번에 보여 주기에 좋아요. 다만 GNB의 첫 줄(1depth)은 여전히 적어야 해요. 1depth가 적고, 펼쳤을 때 묶음이 잘 나뉘어 있을 때만 메가 메뉴가 제 역할을 해요. 30개를 펼쳐 놓으면 그냥 커다란 목록이에요.
GNB에 넣을 메뉴는 어떻게 고르나요?
저는 이 세 가지를 순서대로 물어봐요.
- 방문자 대부분이 이걸 찾으러 오나요? 방문 로그나 검색어 순위로 확인해요.
- 다른 메뉴와 겹치지 않나요? "서비스"와 "솔루션"처럼 사용자가 차이를 모르는 메뉴는 하나로 합쳐요.
- 이름만 보고 뭐가 나올지 알 수 있나요? 내부에서만 쓰는 이름은 사용자가 이해하지 못해요.
개수는 정답이 없지만, 보통 5~7개 안팎에서 많이 멈춰요. 저도 이 블로그 카테고리를 다시 짤 때 'Projects, Tips, Note'처럼 경계가 애매하던 메뉴를 정리해서, 이름만 봐도 내용이 보이는 다섯 개로 맞췄어요.
자주 묻는 질문
GNB 메뉴는 몇 개가 적당한가요?
딱 정해진 숫자는 없어요. 한눈에 훑어볼 수 있는 5~7개 안팎이 많이 쓰여요. 숫자보다 중요한 건 메뉴끼리 겹치지 않고 이름만으로 내용이 짐작되는지예요.
중요한 페이지인데 GNB에서 빼도 되나요?
중요한 페이지와 많이 찾는 페이지는 달라요. 개인정보처리방침처럼 꼭 있어야 하지만 드물게 찾는 페이지는 푸터가 맞는 자리예요. 이벤트처럼 잠깐 중요한 건 메인 배너로 알리는 게 나아요.
검색이 있으면 메뉴는 대충 해도 되나요?
아니요. 검색은 찾는 게 뭔지 아는 사람에게 좋아요. 처음 온 사람은 메뉴를 보고 이 사이트에 뭐가 있는지 파악해요. 메뉴와 검색은 서로를 대신하지 않아요.
정리
- GNB: 모든 페이지 목록이 아니라 가장 많이 찾는 길 몇 개를 보여 주는 자리예요.
- 메뉴가 많으면: 고르는 시간이 늘고, 중요한 메뉴가 묻히고, 모바일에서 미로가 돼요.
- 나머지 페이지: LNB, 메가 메뉴, 검색, 푸터, 본문 링크로 나눠 보내요.
- 고르는 기준: 많이 찾는지, 겹치지 않는지, 이름만으로 알 수 있는지.
GNB 자리는 아낄수록 사이트가 쉬워져요.
오늘도 읽어 주셔서 고마워요. 다음 글에서 만나요! 🌿