홈페이지의 메뉴는 네비게이션이라고도 부르며 홈페이지의 각 세부 영역으로 이동하는 역할을 합니다.

홈 페이지 메뉴를 효과적으로 구성해야 홈페이지 방문자가 원하는 정보를 빨리 찾을 수 있는데 도움을 줄 수 있습니다. 잘못된 메뉴는 방문자는 원하는 정보를 찾기 위해서 불필요한 클릭을 하거나 어디로 이동해야 할지 몰라서 첫페이지로 와서 다시 시작하는 경우도 많습니다.

잘 짜여진 메뉴 네비게션은 사용자에게 직관적으로 사이트의 구조와 그 흐름을 읽을 수 있게 하여 이러한 오류들을 최소화 시켜줍니다.

제작 방법에 따른 홈페이지 메뉴의 종류

① 텍스트 메뉴 : 텍스트에 바로 하이퍼 링크를 걸어서 메뉴로 만듭니다. 가장 쉽고 직관적으로 메뉴를 표현할 수 있습니다. 그리고 검색엔진의 크롤러가 이해하기 가장 쉽습니다. 반면 웹디자인상으로 화려하지 않기에 국내에서는 텍스트 메뉴를 잘 사용하지 않는 경향이 있습니다.

홈짱닷컴의 메뉴들은 검색엔진 최적화와 방문자의 빠른 이동을 위해서 텍스트와 링크로만 제작되었습니다.

② 이미지(그래픽) 메뉴 : 전체적인 디자인과의 조화를 위해서 이미지로 메뉴를 구성하는 방식입니다. 전체 이미지에서 각 메뉴를 따로 떼어서 하이퍼 링크과 롤오버 효과 등을 줍니다. 이미지에 하이퍼링크가 걸리므로 검색엔진의 크롤러가 하이퍼링크의 의미를 잘 파악하지 못하는 단점이 있고 수정시 이미지도 함께 수정해야 하기 때문에 부담이 됩니다.

③ 플래시 메뉴 : 화려한 메뉴 효과를 위해서 플래시가 많이 사용됩니다. 가장 화려한 효과를 줄 수 있지만 검색엔진의 크롤러가 메뉴의 링크에 접근을 할 수 없습니다. 검색엔진 입장에서 보면 가장 바람직하지 않는 메뉴입니다.

화면 위치에 따른 홈페이지 메뉴의 종류

① 상단 메뉴 : 가장 일반적인 방법입니다. 보통 상단 메뉴를 가장 큰 분류로 놓고, 왼쪽 메뉴를 상단 메뉴에 대한 서브 메뉴로 배치합니다.

② 왼쪽 메뉴 : 왼쪽에 메뉴가 배치되고 오른쪽에 본문이 위치하는 방식입니다. 전통적으로 애용되는 방식입니다.

③ 오른쪽 메뉴 : 최근 블로그에서는 본문을 왼쪽에 놓고 메뉴를 오른쪽에 배치하는 경우가 많아졌습니다. 이는 본문을 메뉴보다 좀더 강조하기 위함입니다.

메뉴의 depth

메뉴를 몇단계로 구성할지를 결정하여 이를 일관성있게 구성해야 홈페이지 방문자가 직관적으로 메뉴를 사용할 수 있습니다.

홈 짱닷컴의 예로 들면 상단의 메뉴는 가장 큰 분류를 가지고 왼쪽 메뉴를 2단계로 구성하여 총 3 depth의 구성을 가지고 있습니다. 이처럼 전체 홈페이지의 메뉴 구성이 몇 depth를 가지고 있어야 하는지를 미리 계획하고 홈페이지를 제작해야 합니다. 보통 이 단계를 생략하고 그때 그때 필요한 메뉴들을 끼워넣으면서 홈페이지를 만드는 경향이 많은데 이런식으로 제작된 홈페이지는 방문자를 혼란스럽게 만듭니다.

효과적인 메뉴 구성을 위한 원칙

① 홈페이지의 구조를 명확히 표현해야 합니다.
상위 페이지의 네비게이션에서도 하부 구조의 제목 및 정확한 분류가 반영되어져야 합니다. 상단 메뉴만으로 이 메뉴의 하위 메뉴는 어떤것이 있을것이다는게 유추될만큼 명확한 분류를 해주면 좋습니다.

홈짱 닷컴의 경우 왼쪽 메뉴에서 현재 읽고 있는 페이지가 어디인지 직관적으로 알 수 있게 하기 위해서 볼드 처리를 하고 있습니다.

② 사이트의 전체적인 목적과 컨셉과 어울려야 합니다.
홈 짱닷컴의 경우 강좌 사이트이므로 정보의 전달이 우선입니다. 그래서 텍스트 메뉴로 최대한 클릭수를 줄이면서 원하는 페이지로 이동하기 쉽게 구성을 하였습니다. 반면 어린이를 위한 사이트라면 정확한 정보 전달보다는 재미와 시각적인 요소를 우선적으로 고려해서 메뉴를 제작해야 합니다.

③ 사용자의 접근이 쉬워야 합니다.
펼침 메뉴와 같이 메뉴의 효과를 위해서 자바 스크립트를 사용하는 경우가 많은데 이때 웹브라우저의 호환성을 놓치는 경우가 많습니다. 이런 경우 다른 웹 브라우저 사용자의 접근을 막아 버리는 메뉴가 됩니다.

메뉴는 사이트의 세부페이지를 탐색하는데 가장 기초가 되는 관문인만큼 여러 사용자를 배려한 메뉴를 제작해야 합니다.