위키원
LNB
LNB(Local Navigation Bar)는 GNB를 클릭하거나 마우스 커서를 댔을 때 나오는 하위 카테고리 리스트이다. 특정 GNB 카테고리에 해당하는 특정 페이지로 연결되는 링크 역할을 하기 때문에 웹사이트의 특정 지역을 한정한다는 의미로 'Local'이라고 표현한다. 서브 메뉴라고도 할 수 있다. 쉽게 말해 GNB가 대분류, LNB는 중분류, 소분류 메뉴라고 볼 수 있다.
 .jpg) |
상세[편집]
LNB는 웹사이트나 애플리케이션 내에서 사용자가 특정 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 탐색 도구다. LNB는 주로 화면의 왼쪽 또는 오른쪽에 위치하며, 사용자가 보고 있는 콘텐츠와 관련된 하위 메뉴나 옵션을 제공한다. LNB의 주요 목적은 사용자 경험을 개선하고, 특정 섹션이나 페이지 간의 이동을 더 직관적이고 효율적으로 만드는 것이다. 이를 통해 사용자는 원하는 정보를 빠르게 찾을 수 있으며, 사이트나 애플리케이션의 전반적인 네비게이션 구조를 이해하는 데 도움이 된다.
LNB는 사용자 경험을 향상시키는 중요한 요소로, 웹사이트나 애플리케이션의 성공적인 설계와 운영에 필수적이다. 이를 통해 사용자에게 더 나은 네비게이션 경험을 제공하고 콘텐츠 접근성을 높일 수 있다.
구성 요소[편집]
LNB의 기본 구성 요소는 메뉴 항목, 서브 메뉴, 아이콘, 상태 표시로 나눌 수 있다. 메뉴 항목은 각기 다른 페이지나 섹션으로의 링크를 포함하고 있으며, 사용자가 클릭하면 해당 페이지로 이동할 수 있다.[1] 서브 메뉴는 일부 메뉴 항목에 포함되어 더 세부적인 선택지를 제공한다. 이를 통해 사용자는 특정 주제나 기능을 더 깊이 탐색할 수 있다. 아이콘은 텍스트와 함께 사용되어 메뉴 항목의 의미를 더 명확하게 전달하며, 시각적 인식을 돕는다.[2] 상태 표시는 현재 사용자가 위치한 페이지나 섹션을 강조 표시하여 사용자가 어디에 있는지 쉽게 알 수 있게 한다. 이는 보통 색상 변화나 밑줄 등으로 표시된다.
장점[편집]
LNB의 장점은 다양하다. 첫째로, 사용자 경험을 개선한다. 사용자가 원하는 정보를 빠르게 찾을 수 있게 도와주며, 전반적인 내비게이션을 단순화한다. 이는 사용자 만족도를 높이고 사이트나 애플리케이션의 사용성을 개선한다.[3] 둘째로, 콘텐츠를 체계적으로 구조화할 수 있다. LNB는 특히 많은 페이지나 섹션을 가진 웹사이트나 애플리케이션에서 유용하다. 셋째로, 전체 사이트나 애플리케이션 내에서 일관된 네비게이션 경험을 제공한다. 사용자는 각 페이지에서 유사한 네비게이션 구조를 기대할 수 있게 되어 학습 곡선을 줄일 수 있다.
고려사항[편집]
LNB 설계 시 고려해야 할 사항도 여러 가지 있다. 우선, 사용자 중심 설계가 중요하다. LNB는 사용자의 요구와 행동을 반영하여 설계해야 한다. 이를 위해 사용자 조사와 테스트를 통해 사용자가 가장 자주 찾는 정보나 기능을 파악하는 것이 중요하다. 또한, 반응형 디자인이 필요하다. 다양한 디바이스와 화면 크기에서 일관되게 작동해야 한다. 작은 화면에서는 LNB가 축소되거나 숨겨질 수 있으며, 필요할 때 쉽게 접근할 수 있도록 해야 한다. 명확한 레이블링도 중요하다. 메뉴 항목의 레이블은 명확하고 이해하기 쉬워야 한다. 이는 사용자가 각 항목이 무엇을 의미하는지 바로 알 수 있게 도와준다. 마지막으로, 시각적 계층 구조를 고려해야 한다. 중요한 메뉴 항목과 덜 중요한 항목 간의 시각적 구분을 통해 사용자가 더 쉽게 탐색할 수 있게 한다.[4]
비교[편집]
GNB[편집]
LNB와 GNB(Global Navigation Bar)는 웹사이트나 애플리케이션 내에서 사용자 탐색을 돕기 위해 설계된 도구로, 두 가지 모두 사용자 경험을 향상시키지만 각각의 목적과 기능은 다르다. LNB는 특정 페이지나 섹션 내에서의 탐색을 돕기 위해 사용된다. 주로 사용자가 현재 보고 있는 콘텐츠와 직접적으로 관련된 메뉴 항목을 제공하며, 해당 섹션 내에서의 이동을 쉽게 만들어 준다. LNB는 보통 화면의 왼쪽 또는 오른쪽에 위치하며, 특정 페이지나 섹션 내에서만 표시된다. 이는 해당 페이지를 벗어나면 보이지 않는 경우가 많다. LNB는 메뉴 항목, 서브 메뉴, 아이콘, 상태 표시 등으로 구성될 수 있다. 각 메뉴 항목은 특정 페이지나 섹션으로의 링크를 포함하며, 하위 메뉴를 통해 더 세부적인 선택지를 제공할 수 있다. 대규모 전자상거래 웹사이트에서 특정 카테고리(예: 전자제품) 내의 세부 카테고리(예: 휴대폰, 노트북)로의 이동을 도울 때 LNB가 사용된다.
반면 GNB는 전체 웹사이트나 애플리케이션의 주요 섹션 간의 탐색을 돕기 위해 사용된다. 이는 모든 페이지에서 일관되게 표시되며, 전체 사이트의 주요 범주나 기능으로의 이동을 쉽게 만들어 준다. GNB는 보통 화면의 상단에 위치하며, 모든 페이지에서 일관되게 나타난다. 이는 사용자가 어느 페이지에 있든지 주요 섹션으로 쉽게 이동할 수 있게 한다. GNB는 주로 주요 섹션(예: 홈, 제품, 서비스, 연락처 등)으로의 링크를 포함한다. 일반적으로 드롭다운 메뉴를 통해 더 세부적인 항목을 제공할 수 있다. 회사 웹사이트에서 주요 섹션(예: 회사 소개, 제품 목록, 고객 지원, 연락처) 간의 이동을 도울 때 GNB가 사용된다.[5][6]
LNB와 GNB의 차이점 구분 LNB GNB 내비게이션 범위 특정 페이지나 섹션 내에서의 이동을 도움 전체 사이트나 애플리케이션 내에서의 주요 섹션 간 이동을 도움 위치 및 표시 주로 화면의 왼쪽이나 오른쪽에 위치하며, 특정 페이지나 섹션 내에서만 표시 화면의 상단에 위치하며, 모든 페이지에서 일관되게 표시 목적 특정 섹션 내의 상세 탐색 지원 전체 사이트나 애플리케이션의 주요 영역 간의 전환 지원
각주[편집]
- ↑ NINA.C, 〈기획 용어 7부, 메뉴 혹은 내비게이션 개념 정리〉, 《요즘IT》, 2021-08-25
- ↑ 셰리, 〈알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)〉, 《인프런》, 2024-08
- ↑ Yuhallo, 〈(사용자 친화 웹) UI/UX〉, 《벨로그》, 2023-02-15
- ↑ Jamie, 〈(UX/UI) UX/UI 실무 용어〉, 《벨로그》, 2023-11-22
- ↑ djunnni, 〈GNB, LNB, SNB가 뭐야?〉, 《벨로그》, 2022-01-16
- ↑ 정 소희, 〈인텐트 마케팅GNB, LNB? 웹사이트 용어 알아보기〉, 《어센트》, 2022-09-16
참고자료[편집]
- 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
같이 보기[편집]
