GNB

GNB(Global Navigation Bar)는 웹사이트를 방문한 사용자의 이동 경로를 하이퍼링크 형태로 모아서 보여주는 내비게이션 시스템이다.

[아사달] 스마트 호스팅

개요

GNB는 웹페이지와 웹페이지를 서로 연결하는 하이퍼링크를 모아두는 자리로, 웹페이지의 자체 콘텐츠를 포함하는 경우가 많다. 웹사이트 전역에 해당된다는 의미로 'Global'이라고 표현하며, 메인 메뉴라고도 할 수 있다. 웹사이트를 방문한 사용자의 이동경로에 관여하며, 정보에 대한 접근을 쉽게 해주는 모든 요소인 내비게이션 시스템에서 가장 중요한 역할을 한다. 현재 자신이 보고 있는 정보가 어느 항목·어느 부분에 속하는지를 표시하며, 원하는 위치로 되돌아가 정보를 살펴볼 수 있게 구성된다. 웹페이지의 위와 아래에 표시되며, 드물게 왼쪽에 있는 경우도 있다. 얼마나 효율적으로 만들어졌는가에 따라 웹사이트의 성공 여부가 결정될 만큼 중요하다. 웹사이트가 제공하는 모든 서비스를 표현하므로 직관적으로 구성하는 것이 좋다. 그래픽을 적용한 아이콘형·내용목록(table of contents) 안의 그래픽 이미지, 또는 이미지 맵으로서 기능할 수 있다. 배치 위치는 웹페이지의 양쪽 옆보다는 위나 아래가 유리하다. 위치 결정은 콘텐츠의 길이에 따라 선택한다. 위에 배치하면 페이지의 시작 부분을 빨리 읽고 눈을 돌릴 수 있다. 아래는 보통 다른 페이지로 이동하도록 링크 기능을 갖는다.

배열 순서

웹사이트 GNB 배열 순서가 중요한 이유는 방문자들이 원하는 정보를 쉽게 찾는 데 큰 영향을 미치기 때문이다. 원하는 정보를 쉽게 찾지 못한 웹사이트 방문자는 만족도가 크게 떨어지게 되고, 이탈률과 재방문율에도 부정적인 영향이 있게 된다. GNB 메뉴 배열 순서가 중요한 또 다른 이유는 정보 전달에 있다. 리서치(영문)에 따르면 웹사이트 방문자들은 GNB 메뉴 링크 주제나 텍스트가 아닌 구성 순서에 따라 클릭 행동(click behavior)에 영향을 받는다고 한다. 웹사이트 메뉴 리스트에서 구성 순서가 앞서는 메뉴가 뒤따르는 메뉴에 비해 클릭을 받을 가능성이 높아진다는 것이다. 그렇기 때문에 웹사이트에서 중요한 페이지들로 향하는 링크를 GNB 메뉴에서 좋은 자리에 배치해야 한다. 웹사이트에서 중요한 페이지와 방문자들이 원하는 정보를 담고 있는 페이지는 웹사이트의 운영 목적과 주제에 따라 다르고, 그에 맞춰 웹사이트 GNB 메뉴 배열 순서도 달라져야 한다. 하지만 많은 웹사이트에서 이런 점을 감안하지 않고 GNB 메뉴 배열 순서를 정하고는 한다. 가장 대표적인 예를 들자면 전자상거래가 주 목적인 웹사이트 GNB 메뉴 첫 번째 순서에 정보 메뉴를 배치하는 것 등이다.

GNB 메뉴 배열 순서를 정할 때 가장 중요하게 고려해야 할 부분은 웹사이트 내비게이션의 용이성이다. 다시 말해, 웹사이트 방문자들이 관심 있어 하고 얻기를 원하는 정보를 쉽게 찾을 수 있도록 GNB 메뉴가 구성되어야 한다는 것이다. 그런 이유에서 GNB 메뉴 배열 순서를 정하기에 앞서 웹사이트 방문자들의 관심사를 파악하는 것이 중요하다. 웹사이트 방문자들의 관심사를 파악하는 방법에는 여러 가지가 있지만, GNB 개선을 위해 메뉴 배열 순서를 정하는 데에는 가장 직관적인 방법을 사용해 볼 수 있다. 운영 중인 웹사이트에 구글 태그 매니저를 이용해 GNB 메뉴별 링크에 트래킹이 가능한 태그를 삽입하고, 구글 애널리틱스 행동 보고서에서 클릭 이벤트를 트래킹하는 방법이다.

많은 웹 개발자, 마케터, UI/UX 디자이너들은 서열 위치 효과(Serial Position Effect), 즉 리스트의 처음과 마지막 항목을 가장 잘 기억하는 기질을 근거로 웹사이트에서 가장 중요하고 방문자들이 원하는 정보를 제공하는 페이지를 첫 번째 위치와 마지막 위치에 배치해야 한다고 강조한다. 웹사이트의 GNB 메뉴 배열 순서의 첫 번째와 마지막 순서에 중요한 메뉴를 배치해야 하는 것은 비단 원하는 정보 전달만을 위해서라고는 할 수 없다. 서열 위치 효과는 웹사이트 방문자들의 클릭 의사결정에도 영향을 미치기 때문이다. 리서치에 따르면 웹사이트 방문자들은 리스트의 중간에 위치한 항목보다 처음과 끝에 위치한 항목을 더 많이 클릭하는 경향을 가졌다고 한다. 그렇기에 GNB 리스트의 양 끝에 다른 메뉴보다 중요하고, 더 많은 클릭을 받아야 하는 메뉴를 배치하는 것이 필요하다.

참고자료

• 〈글로벌내비게이션바〉, 《두산백과》
• Brian Yang, 〈데이터에 기반한 웹사이트 GNB 메뉴 배열 개선 방법과 개선 사례〉, 《트윈워드》
• 정소희, 〈GNB, LNB? 웹사이트 용어 알아보기〉, 《어센트코리아》, 2022-09-16

같이 보기

• LNB

이 GNB 문서는 인터넷에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인 인터넷 PC통신 • 그누텔라 • 네트워크 • 다크넷 • 다크웹 • 딥웹 • 무선인터넷 • 슈퍼피어 • 스타링크 • 아르파넷 • 아이투피(I2P) • 엑스트라넷 • 오버레이 네트워크 • 오투오(O2O) • 오프라인 • 온라인 • 온오프라인 • 유선인터넷 • 인터넷 • 인트라넷 • 초고속 인터넷 • 토어(토르) • 표면웹 • 프리넷 • 피투피(P2P) • 하이브리드 피투피(P2P) • 홈네트워크 인터넷 기술 ARP • DNS • FTP • G-클라우드 • HTTP • HTTPS • IPFS • IPv4 • IPv6 • IRC • IRI • ISBN • LDAP • MOIP • OpenSSL • OSI 7 계층 • RFC • RFID • SFTP • SOAP • SSH • SSL • SSO • TCP • TCP/IP • TLS • UCI • UDP • URI • URL • URN • VoIP • 강화 내부 게이트웨이 라우팅 프로토콜 • 검색 • 검색엔진 • 게이트웨이 • 경계 경로 프로토콜 • 내부 게이트웨이 라우팅 프로토콜 • 네아로 • 다운로드 • 데몬 • 라우팅 정보 프로토콜 • 백엔드 • 사물인터넷 • 서버 • 서버-클라이언트 • 서브넷마스크 • 세션 • 식별자 • 아이피(IP) • 업로드 • 에듀테크 • 온프레미스 • 원격 프로시저 호출(RPC) • 유비쿼터스 • 인터넷 기술 • 자율시스템 • 정보기술 • 정보통신 • 채팅 • 챗봇 • 최단경로 우선 프로토콜(OSPF) • 쿠키 • 크롤링 • 클라이언트 • 키워드 • 텔넷 • 토폴로지 • 트래픽 • 패킷 • 포털 • 포트 • 프런트엔드 • 프로토콜 • 프록시 • 해시태그 이메일 IMAP • POP3 • SMTP • 계정메일 • 네이버 메일 • 센드메일 • 스팸 • 스팸메일 • 스팸필터링 • 아웃룩 익스프레스 • 웹메일 • 이메일 • 지메일 • 한메일 • 핫메일 웹 KWCAG • WCAG • 서핑 • 시맨틱 웹 • 오프라인 웹 • 웹 • 웹 1.0 • 웹 2.0 • 웹 3.0 • 웹개방성 • 웹서비스 • 웹접근성 • 웹접근성 인증마크 • 웹주소 • 웹페이지 • 웹표준 • 웹호환성 • 피드 웹사이트 BBS • GNB • LNB • UI/UX • 게시판 • 관리자 사이트 • 그래픽 사용자 인터페이스(GUI) • 누리집 • 대시보드 • 랜딩 템플릿 • 랜딩 페이지 • 마이홈피 • 메뉴 • 모달창 • 미니홈피 • 방명록 • 배너 • 사용자 경험(UX) • 사용자 인터페이스(UI) • 왼쪽메뉴 • 웹기획 • 웹사이트 • 웹서비스 • 웹페이지 • 인터페이스 • 쪽지 • 커뮤니티 • 탑메뉴 • 탭메뉴 • 템플릿 • 팝업 • 페이지뷰 • 홈페이지 • 화면 웹브라우저 넷스케이프 • 모자이크 • 브라우저 • 브레이브 브라우저 • 블록체인 브라우저 • 사파리 • 삼성인터넷 • 스윙 • 엣지 • 오시리스 • 오페라 • 웨일 • 웹브라우저 • 인터넷 익스플로러(IE) • 크롬 • 파이어폭스 • 판도브라우저 인터넷 서비스 Mail.ru • 구글 • 구글 미트 • 구글챗 • 구글 행아웃 • 깃허브 • 네이버 • 네이버 카페 • 넷플릭스 • 다음 • 라이코스 • 멜론 • 바이두 • 바이트댄스 • 비트토렌트 • 소리바다 • 스포티파이 • 아마존 웹서비스(AWS) • 애플 • 야후 • 야후재팬 • 얀덱스 • 에버노트 • 에어비앤비 • 왓챠 • 웹툰 • 유튜브 • 인터넷 서비스 • 잼라이브 • 줌 • 카카오 • 텐센트 • 팟캐스트 • 패스 • 페이오니아 • 페이팔 • 해시넷 • 화상통화 • 화상회의 인터넷쇼핑 11번가 • 그립 • 네이버 쇼핑 • 네이버 쇼핑 라이브 • 라이브방송 • 라이브커머스 • 모바일쇼핑 • 스쉐라이브 • 스타일쉐어 • 아마존 • 알리바바 • 오픈마켓 • 옥션 • 온라인쇼핑 • 위메프 • 이베이 • 인터넷쇼핑 • 인터파크 • 전자상거래 • 지마켓 • 징동닷컴 • 카카오 쇼핑 • 카카오 쇼핑 라이브 • 커머스 • 쿠팡 • 쿠팡 라이브 • 타오바오 • 티몬 소셜 네트워크 SNS(소셜 네트워크 서비스) • 구글 블로거 • 네이버 밴드 • 네이버 블로그 • 링크드인 • 마이크로블로그 • 맞팔 • 블로그 • 소셜 네트워크 • 웨이보 • 인스타그램 • 트루스소셜 • 트위터 • 팔로우 • 페이스북 • 플리커 • 핀터레스트 메신저 골프메신저 • 님버즈 • 대화방 • 두레이 • 디스코드 • 딩톡 • 라인 • 라인웍스 • 메신저 • 버디버디 • 스냅챗 • 스노우 • 스카이프 • 슬랙 • 아이씨큐(ICQ) • 왓츠앱 • 웹메신저 • 위챗 • 잔디 • 직톡 • 카카오워크 • 카카오톡 • 카톡방 • 큐큐(QQ) • 탱코 • 텔레그램 • 틱톡 • 페이스북 메신저 • 플로우 도메인 네임서버 • 다국어도메인 • 도메인 • 레지스트라 • 레지스트리 • 아이피 • 인터넷주소 • 인터넷키워드 • 한글인터넷주소 • 후이즈 호스팅 메일호스팅 • 서버호스팅 • 웹호스팅 • 코로케이션 • 클라우드 • 파킹 • 포워딩 • 호스팅 위키 나무위키 • 더위키 • 리그베다위키(엔하위키) • 리브레위키 • 머니파이 • 미디어위키 • 바다위키 • 아이티위키 • 요다위키 • 우만위키 • 위키 • 위키낱말사전 • 위키독스 • 위키문법 • 위키문서 • 위키문헌 • 위키미디어재단 • 위키백과 • 위키스 • 위키아 • 위키엔진 • 위키원드 • 위키트리 • 위키휴가 • 제이위키 • 제타위키 • 중국위키 • 한국위키미디어협회 • 항공위키 • 해시넷위키 인터넷 사용자 가입 • 가입자 • 강퇴 • 계정 • 관리자 • 네트워크 관리자 • 네티즌 • 누리꾼 • 대기자 • 데이터베이스 관리자 • 등록자 • 디지털 원패스 • 로그아웃 • 로그인 • 방문자 • 블로거 • 블록체인 관리자 • 비회원 • 사용자 • 사이트 관리자 • 서버관리자 • 시삽 • 시스템 관리자 • 아이디(ID) • 웹관리자 • 웹마스터 • 유튜버 • 접속자 • 차단 • 최고관리자 • 탈퇴 • 탈퇴자 • 회원 • 휴면 • 휴면계정 인터넷 단체 IANA • ICANN • W3C • 다르파 • 유럽입자물리연구소(CERN) 위키 : 자동차, 교통, 지역, 산업, 기업, 단체, 업무, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반