위키원
"메뉴 (웹사이트)"의 두 판 사이의 차이
(→SNB) |
leejia1222 (토론 | 기여) |
||
| 15번째 줄: | 15번째 줄: | ||
== 종류 == | == 종류 == | ||
| − | === GNB === | + | ===GNB=== |
[[GNB]](Global Navigation Bar)는 웹사이트 방문 경로를 하이퍼링크 형태로 보여주는 내비게이션 메뉴이다. 주로 웹페이지의 자체 콘텐츠와 함께 표시되며, 사용자의 이동 경로를 관리하고 정보에 쉽게 접근할 수 있게 도와주는 역할을 한다. 사용자가 현재 어떤 항목이나 부분을 보고 있는지 표시하며, 원하는 위치로 다시 돌아가 정보를 확인할 수 있는 기능을 제공한다. GNB는 웹페이지의 상단이나 하단에 위치하며, 때로는 왼쪽에도 배치된다. 웹사이트의 성공 여부에 중대한 영향을 미치는 만큼 효율적으로 설계되어야 한다. 그래픽 아이콘 형태로 표시되거나 내용 목록 안에 그래픽 이미지로 나타날 수도 있다. 배치 위치는 일반적으로 웹페이지의 길이와 콘텐츠 디자인에 따라 결정된다. 상단에 배치하면 사용자가 페이지의 시작 부분을 빠르게 스캔하고 주목할 수 있다. 반면 하단에 위치한 경우에는 보통 다른 페이지로 이동할 수 있는 링크 기능을 제공한다.<ref> 〈[https://terms.naver.com/entry.naver?docId=1227161&cid=40942&categoryId=32828 글로벌내비게이션바]〉, 《두산백과》 </ref> | [[GNB]](Global Navigation Bar)는 웹사이트 방문 경로를 하이퍼링크 형태로 보여주는 내비게이션 메뉴이다. 주로 웹페이지의 자체 콘텐츠와 함께 표시되며, 사용자의 이동 경로를 관리하고 정보에 쉽게 접근할 수 있게 도와주는 역할을 한다. 사용자가 현재 어떤 항목이나 부분을 보고 있는지 표시하며, 원하는 위치로 다시 돌아가 정보를 확인할 수 있는 기능을 제공한다. GNB는 웹페이지의 상단이나 하단에 위치하며, 때로는 왼쪽에도 배치된다. 웹사이트의 성공 여부에 중대한 영향을 미치는 만큼 효율적으로 설계되어야 한다. 그래픽 아이콘 형태로 표시되거나 내용 목록 안에 그래픽 이미지로 나타날 수도 있다. 배치 위치는 일반적으로 웹페이지의 길이와 콘텐츠 디자인에 따라 결정된다. 상단에 배치하면 사용자가 페이지의 시작 부분을 빠르게 스캔하고 주목할 수 있다. 반면 하단에 위치한 경우에는 보통 다른 페이지로 이동할 수 있는 링크 기능을 제공한다.<ref> 〈[https://terms.naver.com/entry.naver?docId=1227161&cid=40942&categoryId=32828 글로벌내비게이션바]〉, 《두산백과》 </ref> | ||
| − | === LNB === | + | ===LNB=== |
[[LNB]](local navigation bar)는 웹사이트나 앱 내에서 특정 섹션 또는 페이지 그룹을 탐색할 수 있게 해주는 메뉴이다. 이는 전체 내비게이션 바에서 특정 부분에 집중하는 역할을 한다. GNB와 대조적으로, LNB는 특정 컨텍스트 내에서의 탐색을 용이하게 한다. LNB는 일반적으로 특정 페이지 섹션의 링크, 주제별 탐색, 또는 서브메뉴로 구성될 수 있다. 사용자가 해당 페이지에서 다양한 섹션을 빠르게 찾아갈 수 있도록 돕는 중요한 요소이다. | [[LNB]](local navigation bar)는 웹사이트나 앱 내에서 특정 섹션 또는 페이지 그룹을 탐색할 수 있게 해주는 메뉴이다. 이는 전체 내비게이션 바에서 특정 부분에 집중하는 역할을 한다. GNB와 대조적으로, LNB는 특정 컨텍스트 내에서의 탐색을 용이하게 한다. LNB는 일반적으로 특정 페이지 섹션의 링크, 주제별 탐색, 또는 서브메뉴로 구성될 수 있다. 사용자가 해당 페이지에서 다양한 섹션을 빠르게 찾아갈 수 있도록 돕는 중요한 요소이다. | ||
| − | === FNB === | + | ===FNB=== |
[[FNB (메뉴)|FNB]](Foot Navigation Bar)는 웹사이트나 앱의 하단에 위치한 내비게이션 바를 의미한다. 페이지의 상단에 위치한 [[GNB]]와 달리, FNB는 추가적인 링크와 정보를 제공하여 사용자가 페이지의 맨 아래에서도 쉽게 탐색할 수 있도록 도와준다. 주로 저작권 정보, 사이트 맵 링크, 개인정보 처리 방침 등을 포함하며, 긴 페이지를 스크롤하다가도 하단에 고정된 FNB는 사용자가 추가 정보나 다른 섹션으로 쉽게 이동할 수 있도록 한다. 일반적으로 시각적으로 강조되는 링크와 아이콘이 포함되어 있어, 사용자가 직관적으로 인식할 수 있게 돕는다. 이렇듯 FNB는 웹사이트나 앱의 전체적인 사용자 경험을 향상시키는 데 중요한 역할을 한다. | [[FNB (메뉴)|FNB]](Foot Navigation Bar)는 웹사이트나 앱의 하단에 위치한 내비게이션 바를 의미한다. 페이지의 상단에 위치한 [[GNB]]와 달리, FNB는 추가적인 링크와 정보를 제공하여 사용자가 페이지의 맨 아래에서도 쉽게 탐색할 수 있도록 도와준다. 주로 저작권 정보, 사이트 맵 링크, 개인정보 처리 방침 등을 포함하며, 긴 페이지를 스크롤하다가도 하단에 고정된 FNB는 사용자가 추가 정보나 다른 섹션으로 쉽게 이동할 수 있도록 한다. 일반적으로 시각적으로 강조되는 링크와 아이콘이 포함되어 있어, 사용자가 직관적으로 인식할 수 있게 돕는다. 이렇듯 FNB는 웹사이트나 앱의 전체적인 사용자 경험을 향상시키는 데 중요한 역할을 한다. | ||
| − | === SNB === | + | ===SNB=== |
[[SNB (메뉴)|SNB]](Side Navigation Bar)는 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴로, 측면에 고정된 메뉴를 말한다. 보통 왼쪽에 위치하고 있어 사이드(Side)라고 표현하고, LNB(Left Navigation Bar)라고 하기도 한다.<ref> 셰리, 〈[https://www.inflearn.com/blogs/3780 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)]〉, 《인프런》 </ref> 사용자가 특정 페이지에서 다양한 섹션으로 빠르게 이동할 수 있도록 하며, 전반적인 사용자 경험을 개선하는 데 중요한 역할을 한다. 메뉴 아이콘과 함께 표시되어 사용자가 쉽게 인식할 수 있다. 주로 메인 메뉴 항목과 그 하위 섹션들이 포함되어 있어 사용자가 관심 있는 내용을 빠르게 찾을 수 있다. 페이지를 스크롤하면서도 항상 보이며, 사용자가 필요할 때마다 쉽게 접근할 수 있도록 한다. 이로 인해 사용자 경험을 개선하고 탐색 효율성을 높이는 데 기여한다. | [[SNB (메뉴)|SNB]](Side Navigation Bar)는 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴로, 측면에 고정된 메뉴를 말한다. 보통 왼쪽에 위치하고 있어 사이드(Side)라고 표현하고, LNB(Left Navigation Bar)라고 하기도 한다.<ref> 셰리, 〈[https://www.inflearn.com/blogs/3780 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)]〉, 《인프런》 </ref> 사용자가 특정 페이지에서 다양한 섹션으로 빠르게 이동할 수 있도록 하며, 전반적인 사용자 경험을 개선하는 데 중요한 역할을 한다. 메뉴 아이콘과 함께 표시되어 사용자가 쉽게 인식할 수 있다. 주로 메인 메뉴 항목과 그 하위 섹션들이 포함되어 있어 사용자가 관심 있는 내용을 빠르게 찾을 수 있다. 페이지를 스크롤하면서도 항상 보이며, 사용자가 필요할 때마다 쉽게 접근할 수 있도록 한다. 이로 인해 사용자 경험을 개선하고 탐색 효율성을 높이는 데 기여한다. | ||
| + | |||
| + | ===탑메뉴=== | ||
| + | [[탑메뉴]](top menu)는 [[웹사이트]]의 상단에 위치한 주요 내비게이션 메뉴를 말한다. 웹사이트 [[기획]]과 [[디자인]]에서 중요한 요소로, [[사용자]]가 웹사이트의 주요 섹션으로 쉽게 접근할 수 있도록 돕는 역할을 한다. 좋은 탑메뉴는 방문자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 하며, 웹사이트의 목적과 기능을 효과적으로 지원한다. 대표적인 탑메뉴로는 홈, 제품 또는 서비스, 소개, 블로그, 연락처, FAQ 및 지원이 있다. | ||
| + | |||
| + | 먼저 홈 메뉴는 [[웹사이트]]의 메인 페이지로 이동할 수 있는 [[링크]]다. [[사용자]]가 언제든지 기본 페이지로 돌아갈 수 있게 하여 사이트 내비게이션을 단순화한다. 제품 또는 서비스 메뉴는 회사나 웹사이트에서 제공하는 제품이나 서비스에 대한 상세 정보를 제공한다. 방문자에게 회사의 주요 제공사항을 쉽게 찾고 이해할 수 있게 한다. 소개 메뉴는 회사나 웹사이트의 소개, 역사, 미션, 팀 구성 등을 포함한 페이지다. 신뢰성을 높이고 회사의 배경과 철학을 방문자에게 전달한다. 블로그 메뉴는 뉴스, 업데이트, 정보성 글 등을 게시하는 공간이다. 지속적인 콘텐츠 업데이트를 통해 방문자와의 소통을 유지하고 [[SEO]](검색엔진 최적화)에 도움을 준다. 연락처 메뉴는 연락처 정보나 문의 양식을 제공하는 페이지다. 고객이나 방문자가 쉽게 연락할 수 있게 하여 소통을 원할하게 한다. 마지막으로 FAQ 및 지원 메뉴는 자주 묻는 질문과 답변 또는 고객 지원 페이지다. 방문자가 자주 묻는 질문에 대한 답변을 빠르게 찾을 수 있게 하여 고객지원 업무를 효율화한다. | ||
=== 탭메뉴 === | === 탭메뉴 === | ||
[[탭메뉴]]는 사용자가 서로 다른 섹션 또는 페이지로 쉽게 이동할 수 있도록 돕는 인터페이스 요소이다. 각 탭을 클릭하면 해당 섹션의 내용이 화면에 표시되며, 선택된 탭은 시각적으로 강조된다. 이로 인해 사용자는 원하는 정보를 빠르게 찾을 수 있으며, 페이지의 구조화와 사용자 경험을 개선하는 데 기여한다. 그리고 페이지의 콘텐츠를 다양한 섹션으로 나누어 관리할 수 있어, 사용자가 필요한 정보를 빠르게 찾을 수 있도록 돕는 역할을 한다. 일부 탭 메뉴는 페이지를 다시 로드하지 않고도 콘텐츠를 동적으로 변경하거나 필터링하는 기능을 제공할 수 있다. 탭메뉴는 모바일 장치에서도 사용하기 편리하도록 반응형 디자인이 적용되어야 한다. 작은 화면에서는 드롭다운 메뉴 형태로 변환되기도 한다. 탭 메뉴는 웹사이트의 구조화와 사용자 탐색 경로의 효율성을 높이는 데 중요한 역할을 하며, 디자인과 사용자 경험을 개선하는 데 기여한다. | [[탭메뉴]]는 사용자가 서로 다른 섹션 또는 페이지로 쉽게 이동할 수 있도록 돕는 인터페이스 요소이다. 각 탭을 클릭하면 해당 섹션의 내용이 화면에 표시되며, 선택된 탭은 시각적으로 강조된다. 이로 인해 사용자는 원하는 정보를 빠르게 찾을 수 있으며, 페이지의 구조화와 사용자 경험을 개선하는 데 기여한다. 그리고 페이지의 콘텐츠를 다양한 섹션으로 나누어 관리할 수 있어, 사용자가 필요한 정보를 빠르게 찾을 수 있도록 돕는 역할을 한다. 일부 탭 메뉴는 페이지를 다시 로드하지 않고도 콘텐츠를 동적으로 변경하거나 필터링하는 기능을 제공할 수 있다. 탭메뉴는 모바일 장치에서도 사용하기 편리하도록 반응형 디자인이 적용되어야 한다. 작은 화면에서는 드롭다운 메뉴 형태로 변환되기도 한다. 탭 메뉴는 웹사이트의 구조화와 사용자 탐색 경로의 효율성을 높이는 데 중요한 역할을 하며, 디자인과 사용자 경험을 개선하는 데 기여한다. | ||
| − | === 햄버거 메뉴 === | + | ===드롭다운 메뉴=== |
| − | 햄버거 메뉴(drawer menu)는 그래픽 사용자 인터페이스의 최상위 모퉁이에 위치하는 버튼형 메뉴이다. 모바일 디바이스나 작은 화면에서 주로 사용되는 메뉴 스타일이다. 주로 세로 방향으로 나열된 아이콘 형태의 메뉴 버튼을 클릭하면, 메뉴 항목들이 나오는 형태를 가지고 있다. 이 메뉴 스타일은 이름 그대로 햄버거를 떠올리게 하는 세로로 쌓인 세 줄의 아이콘 모양에서 유래되었다. 아이콘의 형태는 주로 세로로 쌓인 세 줄의 아이콘으로 구성되어 있어, 메뉴가 숨겨져 있음을 나타낸다. 사용자가 아이콘을 클릭하면 메뉴가 화면에 나타나며, 일반적으로 오버레이 형태로 전체 화면을 덮는다. 메뉴가 열리면 여러 항목들이 세로로 나열되어 사용자가 탐색할 수 있도록 한다. 보통 링크, 서브 메뉴, 설정 등을 포함할 수 있다. 햄버거 메뉴는 작은 화면에서 공간을 절약하면서도 다양한 기능에 접근할 수 있도록 도와준다. 사용자가 필요할 때 메뉴를 열고, 사용이 끝나면 다시 닫을 수 있는 것이 장점이다. 또한 햄버거 메뉴는 반응형 디자인의 일환으로, 모바일 브라우저에서 사용할 때 특히 유용하게 적용된다.<ref> 〈[https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC 햄버거 버튼]〉, 《위키백과》 </ref> | + | [[드롭다운 메뉴]](dropdown menu)는 [[그래픽 사용자 인터페이스]](GUI)의 요소로, [[사용자]]가 [[버튼]]을 클릭하거나 항목을 선택했을 때 펼쳐지는 목록을 나타낸다. 주로 [[웹사이트]]와 [[애플리케이션]]의 [[내비게이션]] 요소로 사용되며, 사용자에게 여러 옵션을 제공하는 데 유용하다. 드롭다운 메뉴는 사용자 인터페이스 디자인에서 매우 중요한 요소로, 사용자가 쉽게 접근할 수 있도록 설계되어야 한다. 풀다운 메뉴(pulldown menu)라고도 부른다. 드롭다운 메뉴는 버튼 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 보통 그 버튼의 아래로 하위 메뉴들이 펼처지는 요소를 말한다. 화면에 상위 메뉴만을 노출시키고, 활성화 시에만 하위 메뉴들을 표시하는 방식이기 때문에, 초기 화면에서 보이는 메뉴의 영역을 좀 더 줄일 수 있다. 이렇게 부수 요소의 공간 및 시선을 줄이고 실제 [[콘텐츠]]에 좀 더 집중 시킬 수 있기 때문에 [[웹페이지]]의 상단 메뉴인 [[글로벌 내비게이션 바]](GNB, Global Navigation Bar)에서 표시하고픈 하위 [[링크]]가 있을 경우에 많이 사용된다. 그런데 [[모바일웹]]의 경우 공간이 협소한 경우가 많아, 보통 GNB를 [[햄버거 메뉴]]로 구현한다. 그래서 보통 [[반응형웹]]을 적용한 페이지의 창 사이즈를 서서히 줄이다 보면 GNB가 조금씩 줄어들다가 어느 순간 햄버거 아이콘으로 바뀌는 것을 쉽게 볼 수 있다. |
| + | |||
| + | 클릭하면 펼쳐지는 경우도 있고, [[호버]](hover)만 해도 펼쳐지는 경우가 있다. 호버만 해도 펼쳐지게 만들 경우, [[클릭]] 수를 줄여 전체 하위 메뉴로의 접근을 좀 더 빠르게 만들 수 있는 장점이 있다. 하지만 메뉴 아래의 콘텐츠를 보려고 하는데 의도치 않게 [[마우스]]를 움직이다가 호버되어 메뉴가 펼쳐져 다시 마우스를 움직여 메뉴를 안 보이도록 해야하는 경우가 발생하기도 한다. 또 호버 이벤트의 경우 [[커서]]가 존재하지 않는 [[모바일]] 환경에서는 조금 이상하게 작동하는 단점도 있다. 따라서 상항에 맞게 디자인하는 것이 좋다.<ref name='나무'>〈[https://namu.wiki/w/%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4%20%EB%A9%94%EB%89%B4 드롭다운 메뉴]〉, 《나무위키》</ref> | ||
| + | |||
| + | ===햄버거 메뉴=== | ||
| + | [[햄버거 메뉴]](drawer menu)는 그래픽 사용자 인터페이스의 최상위 모퉁이에 위치하는 버튼형 메뉴이다. 모바일 디바이스나 작은 화면에서 주로 사용되는 메뉴 스타일이다. 주로 세로 방향으로 나열된 아이콘 형태의 메뉴 버튼을 클릭하면, 메뉴 항목들이 나오는 형태를 가지고 있다. 이 메뉴 스타일은 이름 그대로 햄버거를 떠올리게 하는 세로로 쌓인 세 줄의 아이콘 모양에서 유래되었다. 아이콘의 형태는 주로 세로로 쌓인 세 줄의 아이콘으로 구성되어 있어, 메뉴가 숨겨져 있음을 나타낸다. 사용자가 아이콘을 클릭하면 메뉴가 화면에 나타나며, 일반적으로 오버레이 형태로 전체 화면을 덮는다. 메뉴가 열리면 여러 항목들이 세로로 나열되어 사용자가 탐색할 수 있도록 한다. 보통 링크, 서브 메뉴, 설정 등을 포함할 수 있다. 햄버거 메뉴는 작은 화면에서 공간을 절약하면서도 다양한 기능에 접근할 수 있도록 도와준다. 사용자가 필요할 때 메뉴를 열고, 사용이 끝나면 다시 닫을 수 있는 것이 장점이다. 또한 햄버거 메뉴는 반응형 디자인의 일환으로, 모바일 브라우저에서 사용할 때 특히 유용하게 적용된다.<ref> 〈[https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC 햄버거 버튼]〉, 《위키백과》 </ref> | ||
{{각주}} | {{각주}} | ||
| 40번째 줄: | 50번째 줄: | ||
* 셰리, 〈[https://www.inflearn.com/blogs/3780 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)]〉, 《인프런》 | * 셰리, 〈[https://www.inflearn.com/blogs/3780 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)]〉, 《인프런》 | ||
* 〈[https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC 햄버거 버튼]〉, 《위키백과》 | * 〈[https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC 햄버거 버튼]〉, 《위키백과》 | ||
| + | * 〈[https://namu.wiki/w/%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4%20%EB%A9%94%EB%89%B4 드롭다운 메뉴]〉, 《나무위키》 | ||
== 같이 보기 == | == 같이 보기 == | ||
* [[GNB]] | * [[GNB]] | ||
* [[LNB]] | * [[LNB]] | ||
| + | * [[FNB (메뉴)|FNB]] | ||
| + | * [[탑메뉴]] | ||
* [[탭메뉴]] | * [[탭메뉴]] | ||
| + | * [[드롭다운 메뉴]] | ||
| + | * [[햄버거 메뉴]] | ||
{{인터넷|검토 필요}} | {{인터넷|검토 필요}} | ||
2024년 7월 8일 (월) 17:12 판
메뉴(menu)는 웹사이트 또는 모바일 애플리케이션에서 사용자가 다양한 섹션으로 쉽게 탐색할 수 있도록 도와주는 인터페이스 요소이다.
 .jpg) |
목차
개요
메뉴는 웹사이트나 애플리케이션에서 사용자가 쉽게 다양한 섹션으로 이동하거나 필요한 기능에 접근할 수 있도록 돕는 인터페이스 요소이다. 일반적으로 텍스트 링크, 아이콘, 버튼 등으로 구성되어 있으며, 클릭하거나 터치하여 해당 항목으로 이동할 수 있다. 메뉴는 GNB, LNB, FNB 등 다양한 위치에 배치될 수 있으며, 각 위치는 해당 메뉴의 기능과 사용 목적에 맞게 결정된다. 사용자 경험을 개선하는 주요 요소로, 모바일 장치에서도 반응형으로 디자인되어 작은 화면에서도 효과적으로 사용될 수 있다. 메뉴는 사용자 경험을 향상시키는 주요 요소이기 때문에 사용자가 빠르게 필요한 정보에 접근할 수 있도록 설계되어야 힌다. 따라서 메뉴의 구성과 디자인은 사용자의 편의성과 접근성을 최대화하는 데 중점을 둔다. 모바일 장치에서는 반응형 디자인을 적용하여 작은 화면에서도 메뉴가 잘 보이고 쉽게 접근할 수 있도록 설계되어야 한다. 또한 시각적으로 명확하게 구성되어야 하며, 사용자가 직관적으로 메뉴 항목을 식별할 수 있어야 한다.
구조
웹사이트 메뉴의 구조는 웹사이트의 목적, 콘텐츠, 사용자 경험을 고려하여 설계해야 한다. 일반적으로 메뉴는 다음과 같은 구조를 가진다.
- 평면 구조(1단 메뉴 구성): 모든 메뉴 항목이 같은 수준으로 배치된다. 이 구조는 작은 웹사이트나 정보가 적은 사이트에 적합하다.
- 계층 구조(2단 이상의 메뉴 구성): 주요 메뉴 항목 아래에 하위 메뉴 항목이 있는 구조다. 이 구조는 대형 웹사이트에서 많은 콘텐츠를 구성할 때 유용하다.
- 허브-스포크 구조: 중심 메뉴 항목(허브)에 하위 메뉴 항목(스포크)이 있는 구조다. 이 구조는 메인 메뉴가 명확하게 구성되어 있으며, 각 메뉴 항목에 대한 하위 메뉴 항목이 일관성 있게 구성되어 있을 때 유용하다.
메뉴 구조는 웹사이트의 목적, 콘텐츠, 사용자 경험을 고려하여 설계해야 한다. 메뉴 항목의 수는 적당하게 유지해야 하며, 메뉴 항목의 이름은 사용자가 쉽게 이해할 수 있도록 작성해야 한다. 또한, 메뉴 항목은 사용자가 쉽게 찾을 수 있도록 메뉴 위치가 일관성 있게 유지되어야 한다.[1]
종류
GNB
GNB(Global Navigation Bar)는 웹사이트 방문 경로를 하이퍼링크 형태로 보여주는 내비게이션 메뉴이다. 주로 웹페이지의 자체 콘텐츠와 함께 표시되며, 사용자의 이동 경로를 관리하고 정보에 쉽게 접근할 수 있게 도와주는 역할을 한다. 사용자가 현재 어떤 항목이나 부분을 보고 있는지 표시하며, 원하는 위치로 다시 돌아가 정보를 확인할 수 있는 기능을 제공한다. GNB는 웹페이지의 상단이나 하단에 위치하며, 때로는 왼쪽에도 배치된다. 웹사이트의 성공 여부에 중대한 영향을 미치는 만큼 효율적으로 설계되어야 한다. 그래픽 아이콘 형태로 표시되거나 내용 목록 안에 그래픽 이미지로 나타날 수도 있다. 배치 위치는 일반적으로 웹페이지의 길이와 콘텐츠 디자인에 따라 결정된다. 상단에 배치하면 사용자가 페이지의 시작 부분을 빠르게 스캔하고 주목할 수 있다. 반면 하단에 위치한 경우에는 보통 다른 페이지로 이동할 수 있는 링크 기능을 제공한다.[2]
LNB
LNB(local navigation bar)는 웹사이트나 앱 내에서 특정 섹션 또는 페이지 그룹을 탐색할 수 있게 해주는 메뉴이다. 이는 전체 내비게이션 바에서 특정 부분에 집중하는 역할을 한다. GNB와 대조적으로, LNB는 특정 컨텍스트 내에서의 탐색을 용이하게 한다. LNB는 일반적으로 특정 페이지 섹션의 링크, 주제별 탐색, 또는 서브메뉴로 구성될 수 있다. 사용자가 해당 페이지에서 다양한 섹션을 빠르게 찾아갈 수 있도록 돕는 중요한 요소이다.
FNB
FNB(Foot Navigation Bar)는 웹사이트나 앱의 하단에 위치한 내비게이션 바를 의미한다. 페이지의 상단에 위치한 GNB와 달리, FNB는 추가적인 링크와 정보를 제공하여 사용자가 페이지의 맨 아래에서도 쉽게 탐색할 수 있도록 도와준다. 주로 저작권 정보, 사이트 맵 링크, 개인정보 처리 방침 등을 포함하며, 긴 페이지를 스크롤하다가도 하단에 고정된 FNB는 사용자가 추가 정보나 다른 섹션으로 쉽게 이동할 수 있도록 한다. 일반적으로 시각적으로 강조되는 링크와 아이콘이 포함되어 있어, 사용자가 직관적으로 인식할 수 있게 돕는다. 이렇듯 FNB는 웹사이트나 앱의 전체적인 사용자 경험을 향상시키는 데 중요한 역할을 한다.
SNB
SNB(Side Navigation Bar)는 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴로, 측면에 고정된 메뉴를 말한다. 보통 왼쪽에 위치하고 있어 사이드(Side)라고 표현하고, LNB(Left Navigation Bar)라고 하기도 한다.[3] 사용자가 특정 페이지에서 다양한 섹션으로 빠르게 이동할 수 있도록 하며, 전반적인 사용자 경험을 개선하는 데 중요한 역할을 한다. 메뉴 아이콘과 함께 표시되어 사용자가 쉽게 인식할 수 있다. 주로 메인 메뉴 항목과 그 하위 섹션들이 포함되어 있어 사용자가 관심 있는 내용을 빠르게 찾을 수 있다. 페이지를 스크롤하면서도 항상 보이며, 사용자가 필요할 때마다 쉽게 접근할 수 있도록 한다. 이로 인해 사용자 경험을 개선하고 탐색 효율성을 높이는 데 기여한다.
탑메뉴
탑메뉴(top menu)는 웹사이트의 상단에 위치한 주요 내비게이션 메뉴를 말한다. 웹사이트 기획과 디자인에서 중요한 요소로, 사용자가 웹사이트의 주요 섹션으로 쉽게 접근할 수 있도록 돕는 역할을 한다. 좋은 탑메뉴는 방문자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 하며, 웹사이트의 목적과 기능을 효과적으로 지원한다. 대표적인 탑메뉴로는 홈, 제품 또는 서비스, 소개, 블로그, 연락처, FAQ 및 지원이 있다.
먼저 홈 메뉴는 웹사이트의 메인 페이지로 이동할 수 있는 링크다. 사용자가 언제든지 기본 페이지로 돌아갈 수 있게 하여 사이트 내비게이션을 단순화한다. 제품 또는 서비스 메뉴는 회사나 웹사이트에서 제공하는 제품이나 서비스에 대한 상세 정보를 제공한다. 방문자에게 회사의 주요 제공사항을 쉽게 찾고 이해할 수 있게 한다. 소개 메뉴는 회사나 웹사이트의 소개, 역사, 미션, 팀 구성 등을 포함한 페이지다. 신뢰성을 높이고 회사의 배경과 철학을 방문자에게 전달한다. 블로그 메뉴는 뉴스, 업데이트, 정보성 글 등을 게시하는 공간이다. 지속적인 콘텐츠 업데이트를 통해 방문자와의 소통을 유지하고 SEO(검색엔진 최적화)에 도움을 준다. 연락처 메뉴는 연락처 정보나 문의 양식을 제공하는 페이지다. 고객이나 방문자가 쉽게 연락할 수 있게 하여 소통을 원할하게 한다. 마지막으로 FAQ 및 지원 메뉴는 자주 묻는 질문과 답변 또는 고객 지원 페이지다. 방문자가 자주 묻는 질문에 대한 답변을 빠르게 찾을 수 있게 하여 고객지원 업무를 효율화한다.
탭메뉴
탭메뉴는 사용자가 서로 다른 섹션 또는 페이지로 쉽게 이동할 수 있도록 돕는 인터페이스 요소이다. 각 탭을 클릭하면 해당 섹션의 내용이 화면에 표시되며, 선택된 탭은 시각적으로 강조된다. 이로 인해 사용자는 원하는 정보를 빠르게 찾을 수 있으며, 페이지의 구조화와 사용자 경험을 개선하는 데 기여한다. 그리고 페이지의 콘텐츠를 다양한 섹션으로 나누어 관리할 수 있어, 사용자가 필요한 정보를 빠르게 찾을 수 있도록 돕는 역할을 한다. 일부 탭 메뉴는 페이지를 다시 로드하지 않고도 콘텐츠를 동적으로 변경하거나 필터링하는 기능을 제공할 수 있다. 탭메뉴는 모바일 장치에서도 사용하기 편리하도록 반응형 디자인이 적용되어야 한다. 작은 화면에서는 드롭다운 메뉴 형태로 변환되기도 한다. 탭 메뉴는 웹사이트의 구조화와 사용자 탐색 경로의 효율성을 높이는 데 중요한 역할을 하며, 디자인과 사용자 경험을 개선하는 데 기여한다.
드롭다운 메뉴
드롭다운 메뉴(dropdown menu)는 그래픽 사용자 인터페이스(GUI)의 요소로, 사용자가 버튼을 클릭하거나 항목을 선택했을 때 펼쳐지는 목록을 나타낸다. 주로 웹사이트와 애플리케이션의 내비게이션 요소로 사용되며, 사용자에게 여러 옵션을 제공하는 데 유용하다. 드롭다운 메뉴는 사용자 인터페이스 디자인에서 매우 중요한 요소로, 사용자가 쉽게 접근할 수 있도록 설계되어야 한다. 풀다운 메뉴(pulldown menu)라고도 부른다. 드롭다운 메뉴는 버튼 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 보통 그 버튼의 아래로 하위 메뉴들이 펼처지는 요소를 말한다. 화면에 상위 메뉴만을 노출시키고, 활성화 시에만 하위 메뉴들을 표시하는 방식이기 때문에, 초기 화면에서 보이는 메뉴의 영역을 좀 더 줄일 수 있다. 이렇게 부수 요소의 공간 및 시선을 줄이고 실제 콘텐츠에 좀 더 집중 시킬 수 있기 때문에 웹페이지의 상단 메뉴인 글로벌 내비게이션 바(GNB, Global Navigation Bar)에서 표시하고픈 하위 링크가 있을 경우에 많이 사용된다. 그런데 모바일웹의 경우 공간이 협소한 경우가 많아, 보통 GNB를 햄버거 메뉴로 구현한다. 그래서 보통 반응형웹을 적용한 페이지의 창 사이즈를 서서히 줄이다 보면 GNB가 조금씩 줄어들다가 어느 순간 햄버거 아이콘으로 바뀌는 것을 쉽게 볼 수 있다.
클릭하면 펼쳐지는 경우도 있고, 호버(hover)만 해도 펼쳐지는 경우가 있다. 호버만 해도 펼쳐지게 만들 경우, 클릭 수를 줄여 전체 하위 메뉴로의 접근을 좀 더 빠르게 만들 수 있는 장점이 있다. 하지만 메뉴 아래의 콘텐츠를 보려고 하는데 의도치 않게 마우스를 움직이다가 호버되어 메뉴가 펼쳐져 다시 마우스를 움직여 메뉴를 안 보이도록 해야하는 경우가 발생하기도 한다. 또 호버 이벤트의 경우 커서가 존재하지 않는 모바일 환경에서는 조금 이상하게 작동하는 단점도 있다. 따라서 상항에 맞게 디자인하는 것이 좋다.[4]
햄버거 메뉴
햄버거 메뉴(drawer menu)는 그래픽 사용자 인터페이스의 최상위 모퉁이에 위치하는 버튼형 메뉴이다. 모바일 디바이스나 작은 화면에서 주로 사용되는 메뉴 스타일이다. 주로 세로 방향으로 나열된 아이콘 형태의 메뉴 버튼을 클릭하면, 메뉴 항목들이 나오는 형태를 가지고 있다. 이 메뉴 스타일은 이름 그대로 햄버거를 떠올리게 하는 세로로 쌓인 세 줄의 아이콘 모양에서 유래되었다. 아이콘의 형태는 주로 세로로 쌓인 세 줄의 아이콘으로 구성되어 있어, 메뉴가 숨겨져 있음을 나타낸다. 사용자가 아이콘을 클릭하면 메뉴가 화면에 나타나며, 일반적으로 오버레이 형태로 전체 화면을 덮는다. 메뉴가 열리면 여러 항목들이 세로로 나열되어 사용자가 탐색할 수 있도록 한다. 보통 링크, 서브 메뉴, 설정 등을 포함할 수 있다. 햄버거 메뉴는 작은 화면에서 공간을 절약하면서도 다양한 기능에 접근할 수 있도록 도와준다. 사용자가 필요할 때 메뉴를 열고, 사용이 끝나면 다시 닫을 수 있는 것이 장점이다. 또한 햄버거 메뉴는 반응형 디자인의 일환으로, 모바일 브라우저에서 사용할 때 특히 유용하게 적용된다.[5]
각주
- ↑ 〈사이트 메뉴 구성 기초〉, 《트립박스》
- ↑ 〈글로벌내비게이션바〉, 《두산백과》
- ↑ 셰리, 〈알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)〉, 《인프런》
- ↑ 〈드롭다운 메뉴〉, 《나무위키》
- ↑ 〈햄버거 버튼〉, 《위키백과》
참고자료
- 〈사이트 메뉴 구성 기초〉, 《트립박스》
- 〈글로벌내비게이션바〉, 《두산백과》
- 셰리, 〈알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)〉, 《인프런》
- 〈햄버거 버튼〉, 《위키백과》
- 〈드롭다운 메뉴〉, 《나무위키》
같이 보기
