LNB

LNB(Local Navigation Bar)는 GNB를 클릭하거나 마우스 커서를 댔을 때 나오는 하위 카테고리 리스트이다. 특정 GNB 카테고리에 해당하는 특정 페이지로 연결되는 링크 역할을 하기 때문에 웹사이트의 특정 지역을 한정한다는 의미로 'Local'이라고 표현한다. 서브 메뉴라고도 할 수 있다. 쉽게 말해 GNB가 대분류, LNB는 중분류, 소분류 메뉴라고 볼 수 있다.

[아사달] 스마트 호스팅

상세

LNB는 웹사이트나 애플리케이션 내에서 사용자가 특정 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 탐색 도구다. LNB는 주로 화면의 왼쪽 또는 오른쪽에 위치하며, 사용자가 보고 있는 콘텐츠와 관련된 하위 메뉴나 옵션을 제공한다. LNB의 주요 목적은 사용자 경험을 개선하고, 특정 섹션이나 페이지 간의 이동을 더 직관적이고 효율적으로 만드는 것이다. 이를 통해 사용자는 원하는 정보를 빠르게 찾을 수 있으며, 사이트나 애플리케이션의 전반적인 네비게이션 구조를 이해하는 데 도움이 된다.

LNB는 사용자 경험을 향상시키는 중요한 요소로, 웹사이트나 애플리케이션의 성공적인 설계와 운영에 필수적이다. 이를 통해 사용자에게 더 나은 네비게이션 경험을 제공하고 콘텐츠 접근성을 높일 수 있다.

구성 요소

LNB의 기본 구성 요소는 메뉴 항목, 서브 메뉴, 아이콘, 상태 표시로 나눌 수 있다. 메뉴 항목은 각기 다른 페이지나 섹션으로의 링크를 포함하고 있으며, 사용자가 클릭하면 해당 페이지로 이동할 수 있다. 서브 메뉴는 일부 메뉴 항목에 포함되어 더 세부적인 선택지를 제공한다. 이를 통해 사용자는 특정 주제나 기능을 더 깊이 탐색할 수 있다. 아이콘은 텍스트와 함께 사용되어 메뉴 항목의 의미를 더 명확하게 전달하며, 시각적 인식을 돕는다. 상태 표시는 현재 사용자가 위치한 페이지나 섹션을 강조 표시하여 사용자가 어디에 있는지 쉽게 알 수 있게 한다. 이는 보통 색상 변화나 밑줄 등으로 표시된다.

장점

LNB의 장점은 다양하다. 첫째로, 사용자 경험을 개선한다. 사용자가 원하는 정보를 빠르게 찾을 수 있게 도와주며, 전반적인 내비게이션을 단순화한다. 이는 사용자 만족도를 높이고 사이트나 애플리케이션의 사용성을 개선한다. 둘째로, 콘텐츠를 체계적으로 구조화할 수 있다. LNB는 특히 많은 페이지나 섹션을 가진 웹사이트나 애플리케이션에서 유용하다. 셋째로, 전체 사이트나 애플리케이션 내에서 일관된 네비게이션 경험을 제공한다. 사용자는 각 페이지에서 유사한 네비게이션 구조를 기대할 수 있게 되어 학습 곡선을 줄일 수 있다.

고려사항

LNB 설계 시 고려해야 할 사항도 여러 가지 있다. 우선, 사용자 중심 설계가 중요하다. LNB는 사용자의 요구와 행동을 반영하여 설계해야 한다. 이를 위해 사용자 조사와 테스트를 통해 사용자가 가장 자주 찾는 정보나 기능을 파악하는 것이 중요하다. 또한, 반응형 디자인이 필요하다. 다양한 디바이스와 화면 크기에서 일관되게 작동해야 한다. 작은 화면에서는 LNB가 축소되거나 숨겨질 수 있으며, 필요할 때 쉽게 접근할 수 있도록 해야 한다. 명확한 레이블링도 중요하다. 메뉴 항목의 레이블은 명확하고 이해하기 쉬워야 한다. 이는 사용자가 각 항목이 무엇을 의미하는지 바로 알 수 있게 도와준다. 마지막으로, 시각적 계층 구조를 고려해야 한다. 중요한 메뉴 항목과 덜 중요한 항목 간의 시각적 구분을 통해 사용자가 더 쉽게 탐색할 수 있게 한다.

비교

GNB

LNB와 GNB(Global Navigation Bar)는 웹사이트나 애플리케이션 내에서 사용자 탐색을 돕기 위해 설계된 도구로, 두 가지 모두 사용자 경험을 향상시키지만 각각의 목적과 기능은 다르다. LNB는 특정 페이지나 섹션 내에서의 탐색을 돕기 위해 사용된다. 주로 사용자가 현재 보고 있는 콘텐츠와 직접적으로 관련된 메뉴 항목을 제공하며, 해당 섹션 내에서의 이동을 쉽게 만들어 준다. LNB는 보통 화면의 왼쪽 또는 오른쪽에 위치하며, 특정 페이지나 섹션 내에서만 표시된다. 이는 해당 페이지를 벗어나면 보이지 않는 경우가 많다. LNB는 메뉴 항목, 서브 메뉴, 아이콘, 상태 표시 등으로 구성될 수 있다. 각 메뉴 항목은 특정 페이지나 섹션으로의 링크를 포함하며, 하위 메뉴를 통해 더 세부적인 선택지를 제공할 수 있다. 대규모 전자상거래 웹사이트에서 특정 카테고리(예: 전자제품) 내의 세부 카테고리(예: 휴대폰, 노트북)로의 이동을 도울 때 LNB가 사용된다.

반면 GNB는 전체 웹사이트나 애플리케이션의 주요 섹션 간의 탐색을 돕기 위해 사용된다. 이는 모든 페이지에서 일관되게 표시되며, 전체 사이트의 주요 범주나 기능으로의 이동을 쉽게 만들어 준다. GNB는 보통 화면의 상단에 위치하며, 모든 페이지에서 일관되게 나타난다. 이는 사용자가 어느 페이지에 있든지 주요 섹션으로 쉽게 이동할 수 있게 한다. GNB는 주로 주요 섹션(예: 홈, 제품, 서비스, 연락처 등)으로의 링크를 포함한다. 일반적으로 드롭다운 메뉴를 통해 더 세부적인 항목을 제공할 수 있다. 회사 웹사이트에서 주요 섹션(예: 회사 소개, 제품 목록, 고객 지원, 연락처) 간의 이동을 도울 때 GNB가 사용된다.

LNB와 GNB의 차이점

구분	LNB	GNB
내비게이션 범위	특정 페이지나 섹션 내에서의 이동을 도움	전체 사이트나 애플리케이션 내에서의 주요 섹션 간 이동을 도움
위치 및 표시	주로 화면의 왼쪽이나 오른쪽에 위치하며, 특정 페이지나 섹션 내에서만 표시	화면의 상단에 위치하며, 모든 페이지에서 일관되게 표시
목적	특정 섹션 내의 상세 탐색 지원	전체 사이트나 애플리케이션의 주요 영역 간의 전환 지원

참고자료

• NINA.C, 〈기획 용어 7부, 메뉴 혹은 내비게이션 개념 정리〉, 《요즘IT》, 2021-08-25
• djunnni, 〈GNB, LNB, SNB가 뭐야?〉, 《벨로그》, 2022-01-16
• 정 소희, 〈인텐트 마케팅GNB, LNB? 웹사이트 용어 알아보기〉, 《어센트》, 2022-09-16
• Yuhallo, 〈(사용자 친화 웹) UI/UX〉, 《벨로그》, 2023-02-15
• Jamie, 〈(UX/UI) UX/UI 실무 용어〉, 《벨로그》, 2023-11-22
• 셰리, 〈알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)〉, 《인프런》, 2024-08

같이 보기

• GNB

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

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인 인터넷 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) • 크롬 • 파이어폭스 • 판도브라우저 인터넷 서비스 구글 • 구글 미트 • 구글챗 • 구글 행아웃 • 깃허브 • 네아로 • 네이버 • 네이버 웹툰 • 네이버 카페 • 넷플릭스 • 다음 • 라이코스 • 레진코믹스 • 메일루 • 멜론 • 바이두 • 바이트댄스 • 비트토렌트 • 빌리빌리 • 빙 • 소리바다 • 스포티파이 • 아마존 웹서비스(AWS) • 애플 • 야후 • 야후재팬 • 얀덱스 • 에버노트 • 에어비앤비 • 왓챠 • 웹소설 • 웹툰 • 유튜브 • 인스타툰 • 인터넷 서비스 • 인터넷카페 • 잼라이브 • 줌 • 카카오 • 카카오 웹툰 • 카카오페이지 • 탑툰 • 텐센트 • 팟캐스트 • 패스 • 페이오니아 • 페이팔 • 해시넷 • 화상통화 • 화상회의 인터넷쇼핑 11번가 • 그립 • 네이버 쇼핑 • 네이버 쇼핑 라이브 • 라이브방송 • 라이브커머스 • 모바일쇼핑 • 스쉐라이브 • 스타일쉐어 • 아마존 • 알리바바 • 오픈마켓 • 옥션 • 온라인쇼핑 • 위메프 • 이베이 • 인터넷쇼핑 • 인터파크 • 전자상거래 • 지마켓 • 징동닷컴 • 카카오 쇼핑 • 카카오 쇼핑 라이브 • 커머스 • 쿠팡 • 쿠팡 라이브 • 타오바오 • 티몬 소셜 네트워크 SNS(소셜 네트워크 서비스) • 구글 블로거 • 네이버 밴드 • 네이버 블로그 • 디시인사이드 • 링크드인 • 마이크로블로그 • 맞팔 • 브런치스토리 • 블로그 • 소셜 네트워크 • 엑스 (트위터) • 웨이보 • 인스타그램 • 트루스소셜 • 티스토리 • 팔로우 • 페이스북 • 플리커 • 핀터레스트 메신저 골프메신저 • 님버즈 • 대화방 • 두레이 • 디스코드 • 딩톡 • 라인 • 라인웍스 • 마이크로소프트 팀즈 • 메신저 • 버디버디 • 스냅챗 • 스노우 • 스카이프 • 슬랙 • 아이씨큐(ICQ) • 왓츠앱 • 웹메신저 • 위챗 • 잔디 • 직톡 • 카카오워크 • 카카오톡 • 카톡방 • 큐큐(QQ) • 탱고 • 텔레그램 • 틱톡 • 페이스북 메신저 • 플로우 도메인 네임서버 • 다국어도메인 • 도메인 • 레지스트라 • 레지스트리 • 아이피 • 인터넷주소 • 인터넷키워드 • 한글인터넷주소 • 후이즈 호스팅 메일호스팅 • 서버호스팅 • 웹호스팅 • 코로케이션 • 클라우드 • 클라우드 네이티브 • 파킹 • 포워딩 • 호스팅 위키 구스위키 • 나무위키 • 노스모크 • 더위키 • 디시위키 • 리그베다위키(엔하위키) • 리브레위키 • 미디어위키 • 바다위키 • 백괴사전 • 아이티위키 • 알파위키 • 엔하계 위키 • 요다위키 • 우만위키 • 위키 • 위키낱말사전 • 위키독스 • 위키문법 • 위키문서 • 위키문헌 • 위키미디어재단 • 위키백과 • 위키스 • 위키엔진 • 위키원 • 위키원드 • 위키트리 • 위키휴가 • 제이위키 • 제타위키 • 중국위키 • 팬덤(위키아) • 한국어 위키백과 • 한국위키미디어협회 • 항공위키 인터넷 사용자 가입 • 가입자 • 강퇴 • 계정 • 관리자 • 네트워크 관리자 • 네티즌 • 누리꾼 • 대기자 • 데이터베이스 관리자 • 등록자 • 디지털 원패스 • 로그아웃 • 로그인 • 방문자 • 블로거 • 블록체인 관리자 • 비회원 • 사용자 • 사이트 관리자 • 서버관리자 • 시삽 • 시스템 관리자 • 아이디(ID) • 웹관리자 • 웹마스터 • 유튜버 • 접속자 • 차단 • 최고관리자 • 탈퇴 • 탈퇴자 • 회원 • 휴면 • 휴면계정 인터넷 단체 IANA • ICANN • W3C • 다르파 • 유럽입자물리연구소(CERN) 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반