모든 웹사이트 운영자는 트래픽이 사이트의 생명선임을 알고 있습니다. 좋은 콘텐츠가 방문자를 끌어모으는 핵심이지만, 방문자를 유입시키는 것만큼 이들을 사이트에 붙잡아 두는 것도 중요합니다. 바로 여기서 웹 디자인과 사용자 인터페이스가 큰 역할을 하게 됩니다. 웹사이트가 직관적이고 보기 편하다면 방문자는 더 오래 머물 것이고, 검색 엔진도 사이트를 좋게 평가해 검색 결과에서 더 높은 순위를 차지하게 됩니다.
직관적이고 사용하기 쉬운 웹 디자인의 핵심 요소 중 하나가 바로 메뉴입니다. 흔해 빠진 평범한 메뉴 대신 눈에 띄는 메뉴를 만들고 싶다면 메가 메뉴(mega menu)를 활용해 보세요. 이미지, 위젯은 물론 원하는 거의 모든 인터랙티브 요소를 메뉴 안에 담을 수 있습니다. 그리고 워드프레스 사용자라면 이를 위한 플러그인도 이미 준비되어 있습니다.
메가 메뉴란 무엇인가?
메가 메뉴는 최근 웹 디자인 트렌드 중 하나로, 월마트(Wal-Mart), 오피스맥스(OfficeMax), 타겟(Target), 아디다스(Adidas), 푸마(Puma), 토이저러스(Toys-R-Us) 같은 대형 전자상거래 사이트들이 앞다투어 도입했습니다. 메가 메뉴의 특성상 온라인 쇼핑몰에 특히 잘 어울리지만, 백악관(The White House)이나 IMDB처럼 성격이 전혀 다른 사이트에도 훌륭한 선택지가 됩니다.
메뉴는 웹사이트만큼 오래된 요소로, 방문자가 사이트를 탐색할 때 사용하는 기본 도구입니다. 우리에게 익숙한 기존 메뉴들은 텍스트 목록과 드롭다운 방식으로 구성되어 있지만, 메가 메뉴는 여기서 한 단계 더 나아갑니다.
메가 메뉴를 사용하면 메뉴에 다른 웹 요소를 추가할 수 있습니다. 예를 들어 블로그의 최신 게시물 5개와 대표 이미지를 메뉴 안에 넣을 수 있죠. 이 기능을 활용하면 온라인 판매업체는 상품 이미지나 오늘의 특가 정보를 메가 메뉴에 배치해, 또 하나의 광고판처럼 활용할 수도 있습니다.
워드프레스 블로그에 메가 메뉴 추가하기
워드프레스로 웹사이트를 운영하고 있다면, 플러그인 하나 설치와 간단한 설정만으로 메가 메뉴를 손쉽게 도입할 수 있습니다.
워드프레스 플러그인 저장소에는 여러 대안이 있지만, 여기서는 10만 건 이상 설치되었고 거의 만점에 가까운 별점을 받으며 꾸준히 업데이트되는 가장 인기 있는 플러그인 중 하나인 Max Mega Menu를 사용해 보겠습니다. 기존 테마와 함께 사용할 수 있으며, 드래그 앤 드롭 방식으로 요소를 편집할 수 있다는 장점도 있습니다.
플러그인은 워드프레스 관리자 페이지에서 '플러그인 → 새로 추가' 메뉴로 이동한 후 'Max Mega Menu'를 검색하면 설치할 수 있습니다.
플러그인을 설치하고 활성화했다면 사이드바에서 '외모 → 메뉴'로 이동하세요. 그런 다음 메뉴 트리 왼쪽의 설정을 통해 Max Mega Menu를 활성화해야 합니다. 설정이 보이지 않는다면 화면 상단의 드롭다운에서 편집할 메뉴로 'Primary'를 선택해 보세요.
개별 메뉴 항목 위에 마우스 포인터를 올리면 추가된 메가 메뉴 옵션을 확인할 수 있습니다.
기존 메뉴를 기반으로 메가 메뉴를 구성할 수도 있고, 처음부터 새 메뉴를 만들 수도 있습니다. 워드프레스에서 메뉴를 생성하는 방법은 별도의 주제이므로 여기서 자세히 다루지 않겠지만, 워드프레스 공식 문서를 참고하면 쉽게 따라 할 수 있습니다.
메가 메뉴 옵션을 클릭하면 해당 메뉴 항목에 대한 모든 설정이 담긴 패널이 열립니다. 기본적으로 할 수 있는 작업은 다음과 같습니다.
- 일반적인 드롭다운 방식인 'Flyout'과, 메뉴 영역이 전체 폭을 채우는 'Mega Menu' 중 선택
- 사용 가능한 위젯을 메뉴에 추가
- 해당 메뉴에 사용할 열(column) 개수 지정
추가된 각 위젯에는 편집 버튼이 함께 제공되어 내용을 자유롭게 조정할 수 있습니다.
최종 결과물은 결국 메가 메뉴에 어떤 위젯을 넣느냐에 달려 있습니다. 활용할 수 있는 위젯이 많을수록 표현할 수 있는 가능성도 무궁무진해지죠.
일부 테마와 플러그인은 고유한 특수 위젯을 제공하기도 합니다. 검색을 통해 더 다양한 워드프레스 위젯을 찾아볼 수도 있습니다. 또한 '텍스트(Text)' 위젯과 간단한 코드를 조합하면 거의 모든 것을 추가할 수 있으니, 상상력이 닿는 한 어디까지나 자유롭게 꾸밀 수 있습니다.
간단한 적용 사례
이 플러그인으로 무엇을 할 수 있는지 감을 잡으실 수 있도록 간단한 사례를 소개합니다.
먼저 메뉴 방식을 Flyout에서 Mega Menu로 변경했습니다. 그런 다음 하위 메뉴가 있는 기존 메뉴를 골라 불필요한 하위 메뉴를 정리하고, Max Mega Menu 패널을 열었습니다. 하위 메뉴 개수에 맞춰 열 개수를 조정한 뒤, 젯팩(JetPack)의 이미지 위젯을 이용해 이미지를 추가했습니다.
분위기를 한층 살리고자 캘린더 위젯과 소셜 미디어 아이콘 위젯도 함께 넣어 보았습니다.
이제 적용 전후를 비교해 보겠습니다. 먼저 메가 메뉴 적용 전의 메뉴 모습입니다.
그리고 몇 가지 조정을 마친 후의 결과물입니다.
메가 메뉴에 대해 어떻게 생각하시나요? 잠깐의 유행일까요, 아니면 오래 지속될 트렌드일까요? 여러분의 사이트에도 메가 메뉴를 도입할 계획이 있으신가요? 아래 댓글로 의견을 나눠 주세요.