메뉴 구조·콘텐츠 구조·페이지 구조, 헷갈리지 않게 설계하는 기준
회사 홈페이지를 둘러보던 사람이 원하는 서비스를 찾지 못하고 10초 만에 나가는 일이 있습니다. 운영자는 메뉴를 여러 번 눌러 보며 기능이 모두 들어갔다고 생각하지만, 방문자에게는 ‘어디를 눌러야 할지 모르겠다’는 화면으로 보일 수 있습니다.
메뉴 구조를 정할 때는 항목을 많이 넣는 것보다 사용자가 어떤 순서로 생각하고 움직이는지를 먼저 살펴야 합니다. 이 글을 읽으면 콘텐츠 구조, 페이지 구조, 정보 구조가 어떻게 다른지 알게 되고, 웹사이트와 모바일 화면에 맞는 메뉴를 점검하는 기준도 세울 수 있습니다.
메뉴 구조란 무엇이며, 왜 중요한가
메뉴 구조는 화면 안에서 여러 페이지나 기능을 묶고, 사용자가 이동할 길을 정하는 방식입니다. 상단에 있는 메뉴 이름만 뜻하는 것이 아니라 메뉴의 순서, 깊이, 그룹, 이동 경로까지 포함합니다.
예를 들어 온라인 서점의 메뉴를 ‘책’, ‘추천’, ‘이벤트’, ‘고객센터’로 나눌 수 있습니다. 그런데 ‘책’ 안에 소설과 자기계발을 두고, 다시 국내와 해외로 나눈다면 사용자는 원하는 책까지 여러 단계를 지나야 합니다. 분류가 논리적이어도 단계가 너무 깊으면 찾기 어렵습니다.
메뉴 구조가 좋은지는 운영자가 보기 편한지가 아니라 방문자가 다음 행동을 예상할 수 있는지로 판단해야 합니다. 메뉴를 본 뒤 “이곳에 내가 찾는 내용이 있겠다”라는 느낌이 들어야 합니다.
- 콘텐츠 구조는 글과 이미지, 영상 같은 내용을 어떤 순서로 배치할지 정하는 일입니다.
- 페이지 구조는 한 화면 안에서 제목, 설명, 버튼, 본문을 어떻게 놓을지 정하는 일입니다.
- 정보 구조는 사이트 전체의 내용을 어떤 기준으로 묶고 이름 붙일지 정하는 큰 설계입니다.
- 메뉴 구조는 이 정보 구조를 사용자가 실제로 이동할 수 있게 보여 주는 장치입니다.
설계 전에 확인할 체크리스트
메뉴를 만들기 전에는 현재 사이트에 무엇이 있는지보다 사용자가 무엇을 찾는지부터 확인하는 편이 좋습니다. 다음 질문에 답하면 불필요한 메뉴가 줄어듭니다.
- 방문자가 사이트에 들어오는 가장 흔한 목적은 무엇인가?
- 첫 화면에서 반드시 보여야 하는 기능은 무엇인가?
- 서로 함께 찾을 가능성이 높은 내용은 무엇인가?
- 운영자의 부서 이름과 사용자가 쓰는 말이 다르지는 않은가?
- 메뉴를 눌렀을 때 실제 페이지 제목과 연결되는가?
- 휴대전화 화면에서 메뉴 이름이 잘리거나 겹치지 않는가?
메뉴 후보를 적을 때는 부서명보다 방문자의 행동을 기준으로 바꿔 보는 것이 좋습니다. ‘홍보팀’보다 ‘소식과 자료’, ‘기술지원부’보다 ‘도움말과 문의’가 이해하기 쉬운 경우가 많습니다. 다만 기관 이름이나 법적 명칭처럼 공식 이름이 중요한 경우에는 짧은 설명을 함께 붙일 수 있습니다.
간단한 표를 만들어 메뉴 후보마다 목적, 주요 이용자, 연결 페이지, 사용 빈도를 적어 보세요. 사용 빈도가 낮고 다른 메뉴와 겹치는 항목은 합치거나 하위 메뉴로 옮길 수 있습니다.
메뉴 구조 유형을 비교하는 방법
메뉴는 사이트 성격에 따라 다른 형태가 어울립니다. 정답을 고르기보다 콘텐츠 양과 이용 목적을 기준으로 비교해야 합니다.
- 가로형 상단 메뉴는 주요 항목이 적은 회사 소개 사이트에 잘 맞습니다. 첫 화면에서 이동 경로가 보이지만, 항목이 많아지면 글자가 작아지고 모바일에서 불편해집니다.
- 드롭다운 메뉴는 하위 항목을 한 번에 보여 줄 수 있습니다. 다만 마우스를 움직이는 방식에 의존하면 휴대전화나 키보드 사용자가 불편할 수 있습니다.
- 햄버거 메뉴는 작은 화면에서 공간을 아낄 수 있습니다. 대신 메뉴가 닫혀 있을 때 주요 기능이 보이지 않아, 자주 쓰는 기능은 화면에 따로 드러내는 것이 좋습니다.
- 사이드 메뉴는 문서, 관리자 화면, 교육 자료처럼 깊은 구조에 유리합니다. 현재 위치를 표시하지 않으면 사용자가 어느 단계에 있는지 잃기 쉽습니다.
예를 들어 메뉴가 다섯 개뿐인 포트폴리오 사이트라면 상단 메뉴가 적절할 수 있습니다. 반면 상품 종류와 도움말 문서가 많은 쇼핑몰은 검색, 필터, 하위 분류를 함께 설계해야 합니다. 화면 모양보다 이동에 필요한 단계를 먼저 비교하세요.
메뉴 구조를 만드는 순서
- 사용자 목적을 적습니다. ‘서비스를 찾는다’, ‘가격을 확인한다’, ‘문의한다’처럼 실제 행동으로 씁니다.
- 페이지 목록을 모읍니다. 새로 만들 페이지뿐 아니라 오래된 공지, 중복 자료, 연결되지 않은 페이지도 함께 확인합니다.
- 비슷한 내용을 묶습니다. 이름이 다르지만 같은 질문에 답하는 페이지는 한 그룹으로 묶습니다. 예를 들어 이용 방법과 자주 묻는 질문은 도움말 아래에 둘 수 있습니다.
- 그룹 이름을 정합니다. 내부에서만 쓰는 전문 용어보다 방문자가 실제로 사용할 말을 고릅니다. ‘리소스’보다 ‘자료실’이 분명한 상황도 있습니다.
- 중요한 항목의 순서를 정합니다. 이용 빈도와 사업상 중요도를 함께 보되, 회사가 강조하고 싶은 항목만 앞에 두지는 않습니다.
- 깊이를 줄입니다. 첫 메뉴에서 목적지까지 네 번 이상 눌러야 한다면 묶음 기준을 다시 살펴봅니다. 단, 페이지 수만 줄이려고 서로 관련 없는 내용을 억지로 합치면 안 됩니다.
- 실제 사용자에게 시험합니다. 메뉴 이름을 설명하지 않고 “환불 방법을 찾아 주세요”처럼 과제를 줍니다. 사용자가 망설인 지점과 잘못 누른 항목을 기록하면 설계의 약점이 드러납니다.
메뉴를 정한 뒤에는 각 페이지에서 상위 메뉴로 돌아가는 길도 확인해야 합니다. 현재 위치를 보여 주는 표시, 이전 단계로 이동하는 버튼, 검색 결과에서 원래 분류를 확인하는 방법이 함께 있어야 이동이 끊기지 않습니다.
자주 생기는 실수와 수정 방법
첫 번째 실수는 메뉴에 모든 것을 넣는 것입니다. 운영자는 중요한 내용을 빠뜨릴까 걱정하지만, 항목이 열 개를 넘으면 중요한 메뉴도 눈에 묻힙니다. 자주 쓰는 기능은 앞에 두고, 나머지는 관련 그룹 안에서 찾게 하세요.
두 번째는 같은 뜻의 메뉴를 다른 이름으로 반복하는 것입니다. ‘공지사항’, ‘새 소식’, ‘알림’이 각각 다른 내용인지 모호하면 사용자는 여러 곳을 돌아다닙니다. 실제 내용과 이용 목적을 비교해 하나의 이름으로 통일하는 것이 좋습니다.
세 번째는 데스크톱 화면만 보고 결정하는 것입니다. 큰 화면에서는 메뉴가 모두 보여도 휴대전화에서는 두 줄로 깨지거나 터치 영역이 너무 좁을 수 있습니다. 손가락으로 누르기 쉬운 간격을 확보하고, 하위 메뉴를 열고 닫는 상태도 분명하게 표시해야 합니다.
네 번째는 메뉴 이름을 멋있게 만드는 데 집중하는 것입니다. ‘인사이트’, ‘솔루션’, ‘허브’ 같은 단어가 브랜드에 어울릴 수는 있지만 내용이 바로 떠오르지 않으면 보조 설명이 필요합니다. 이름을 본 사람에게 세 초 안에 역할이 전달되는지 확인하세요.
다섯 번째는 메뉴를 바꾼 뒤 연결 주소와 검색 결과를 확인하지 않는 것입니다. 기존 페이지 주소가 바뀌면 즐겨찾기나 검색을 통해 들어온 사람이 오류 화면을 만날 수 있습니다. 주소를 바꿀 때는 기존 링크 처리와 내부 연결을 함께 점검해야 합니다.
메뉴 구조에 관한 질문
메뉴는 몇 단계까지 만드는 것이 좋나요?
사이트 규모에 따라 다르지만, 사용자가 첫 화면에서 목적지까지 이동하는 단계는 가능한 한 짧게 만드는 편이 좋습니다. 단계 수를 무조건 줄이기보다 각 단계의 분류 기준이 자연스러운지 확인하세요. 문서 사이트처럼 깊은 구조가 필요한 경우에는 현재 위치와 검색 기능을 함께 제공해야 합니다.
메뉴와 사이트맵은 같은 것인가요?
같지 않습니다. 사이트맵은 사이트에 어떤 페이지가 있는지 보여 주는 전체 목록에 가깝고, 메뉴는 사용자가 자주 이용하는 이동 경로를 추려 보여 주는 장치입니다. 사이트의 모든 페이지를 메뉴에 넣으면 오히려 길을 찾기 어려워질 수 있습니다.
메뉴 이름을 바꿔도 괜찮은가요?
이용자가 더 잘 이해할 수 있다면 바꿀 수 있습니다. 다만 기존 방문자가 익숙한 이름을 잃을 수 있으므로, 일정 기간 보조 설명을 붙이거나 사용성 시험으로 혼란이 줄었는지 확인하는 것이 안전합니다. 기관명과 법적 문구는 관련 공식 안내와 내부 기준도 함께 확인해야 합니다.
검색 기능이 있으면 메뉴를 단순하게 만들어도 되나요?
검색은 메뉴를 대신하지 않습니다. 사용자가 정확한 단어를 알고 있어야 검색할 수 있기 때문입니다. 메뉴는 큰 분류와 이동 방향을 보여 주고, 검색은 특정 자료를 찾도록 돕는 식으로 역할을 나누는 것이 좋습니다.
좋은 메뉴 구조는 화려한 화면보다 방문자의 망설임을 줄이는 설계에 가깝습니다. 메뉴 후보를 만든 뒤 실제 문장으로 과제를 내고, 데스크톱과 모바일에서 같은 목적지를 찾아 보세요. 어디에서 멈추는지 기록하는 작은 점검만으로도 콘텐츠 구조와 페이지 구조의 문제를 구분해 고칠 수 있습니다.