한눈에 보는 정의
사이트 어느 페이지에서나 같은 위치에 보이는 주 메뉴 영역. 보통 화면 맨 위에 로고와 함께 놓인다.
이런 말로 들어요
- GNB 메뉴는 5개 이내로 줄이는 게 좋겠습니다.
- GNB에서 "가격" 메뉴를 빼면 문의 전환이 떨어질 수 있어요.
그림으로 보기
GNB는 어느 페이지에서나 같은 위치·순서로 보여야 길을 잃지 않습니다. 모바일에서도 중요한 버튼은 밖에 둡니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
GNB는 방문자가 "지금 이 사이트에서 갈 수 있는 큰 길"을 한눈에 보는 곳입니다. 어느 페이지에서도 같은 순서와 이름으로 보여야 길을 잃지 않습니다. 현재 보고 있는 메뉴를 표시해 주면 위치를 알기 쉽습니다. 모바일에서는 공간이 좁아 햄버거 메뉴로 접는 경우가 많지만, 상담 신청처럼 중요한 버튼은 밖에 남겨 둡니다.
실무 예시
예를 들어 병원 홈페이지라면 GNB에 "진료 안내·의료진·오시는 길·예약"을 고정하고, 모바일에서는 나머지를 햄버거 메뉴에 넣되 "예약" 버튼만 밖에 둡니다.
함께 살펴볼 점
메뉴 이름을 내부 용어로 짓거나 페이지마다 순서를 바꾸면 방문자가 길을 잃습니다. 메뉴는 HTML의 nav 영역으로 만들어 화면 낭독기 사용자도 찾을 수 있게 합니다.
AI에게 이렇게 요청해 보세요
사이트 상단 GNB를 로고·메뉴 5개·상담 버튼 순서로 만들어 줘. nav 태그를 쓰고, 현재 페이지 메뉴는 aria-current로 표시하고, 모바일에서는 상담 버튼만 밖에 남겨 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Menu-Design Checklist: 17 UX Guidelines - Nielsen Norman Group 새 창
내비게이션을 잘 보이게 하고 현재 위치를 알려야 한다는 사용성 지침을 확인했습니다.
자료 확인 - <nav>: The Navigation Section element - MDN 새 창
주요 내비게이션 링크를 nav 요소로 묶는 방법을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정