웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션

세로형 내비게이션이란? 

웹사이트의 콘텐츠 항목을 볼 수 있는 메뉴 내비게이션은 일반적으로 가로형과 세로형이 있습니다. 현재 슬로워크의 내비게이션은 상단에 가로로 보이는 가로형 내비게이션입니다. 흔히 접할 수 있는 방식이죠. 그럼 세로형 내비게이션은 무엇일까요. 세로형은 브라우저 영역을 기준으로 왼쪽 위 기업 로고 아래 수직 배열로 정렬되는 구조를 말합니다. 일반적으로 가로형 내비게이션이 많이 쓰이지만, 스크롤로 제어하는 원 페이지 구조가 등장하면서부터 이에 적합한 세로형도 많이 볼 수 있게 되었습니다.

세로형 내비게이션 메뉴 활용법 

1. 단일 페이지 레이아웃을 활용하여 상하로 동작하도록 만들어주세요.

단일페이지란 반응형 웹에 따라 사용되는 구조인데요. "One page", "Full page" 라고 불리며, 서브페이지로 이동 없이 한 페이지에 보이는 형식으로 사용자에게 스크롤을 유도합니다. 단일 페이지 구성처럼 콘텐츠 양이 적을수록 세로형 내비게이션이 유리합니다.    

jorgerigabert.com : 단일 페이지로 구성되었으며, 왼쪽 메뉴를 하나씩 클릭할 때마다 페이지가 상하로 움직입니다.

2. 2차 메뉴는 3~4단으로 구성하여 같은 시선의 흐름을 유지하세요.

그럼 콘텐츠 양이 많은 사이트는 어떻게 사용하면 좋을까요? 맥도널드 영문 사이트를 예로 들어봅시다. "FOOD"메뉴에 마우스를 가져가 보면 2차 메뉴가 오른쪽으로 펼쳐집니다. 펼쳐진 2차 메뉴의 각 콘텐츠는 3단으로 나뉘며 상하로 정렬됩니다. 즉, 1차 메뉴와 2차 메뉴를 보는 시선이 상하로 동일한 사용자 경험을 제공합니다.

mcdonalds.com: 2차 메뉴의 각 콘텐츠는 3단으로 나뉩니다. 상하로 정렬되어 1차 메뉴와 2차 메뉴를 탐색하는 시선이 상하로 같습니다.

3. 메뉴명은 명료하고 단순할수록 잘 읽힙니다.

세로형 내비게이션을 구성할 때 가장 중요한 부분으로 메뉴의 높이가 세로로 무한대로 길어지면 곤란합니다. 이유는 해상도가 낮은 컴퓨터의 웹 브라우저 뷰포트에서 전체 메뉴가 한눈에 보이지 않기 때문이죠. 이처럼 웹사이트 디자인 전 IA(Information Architecture) 설계, 즉 메뉴구조를 정의하는 작업은 매우 중요합니다. 세로형뿐만 아니라 모든 메뉴구조에서 정보를 효율적으로 압축하여 제시하는 것이 가장 중요합니다. 좋은 메뉴명을 붙이는 방법은 지난 블로그 글 '클릭을 유도하는 이름 붙이기'에서도 다뤘습니다.

edmedu.com : 이번에 슬로워크 웹 개발실에서 리뉴얼한 ed:m에듀케이션의 웹사이트입니다. 세로형 내비게이션을 적용하였고 메뉴명은 짧고 명확하게 만들었습니다. 사용자가 볼 때 쉽게 이해 가능하며 지칭할 수 있습니다. 

세로형 내비게이션 메뉴를 활용하는 방법은 더 많을 텐데요. 분명 비주얼보다는 적절한 콘텐츠와 직관적인 메뉴구조로 정확하게 설계된 웹사이트가 오래도록 남을 수 있습니다. 웹사이트 내비게이션의 메뉴명만 읽어 보아도 어떤 용도의 사이트인지 이해 가능하다면 사용자가 원하는 정보를 찾기 위해 모든 콘텐츠를 확인하여야 하는 번거로움이 줄어들 것입니다. 그럼 조금 더 현명한 웹사이트를 만들 수 있지 않을까요?

참고 : webdesignledger

by 종달새 발자국