손님은 원하는 정보를 못 찾아 메뉴만 헤매다, 결국 전화도 안 하고 나간다 — 작은 회사 웹사이트 내비게이션(메뉴) 설계의 5가지 원칙

손님은 원하는 정보를 못 찾아 메뉴만 헤매다, 결국 전화도 안 하고 나간다 — 작은 회사 웹사이트 내비게이션(메뉴) 설계의 5가지 원칙
웹사이트 내비게이션 메뉴 설계 개념 일러스트

홈페이지에 손님이 들어왔습니다. 원하는 정보는 분명 어딘가에 있는데, 메뉴 이름은 낯설고 항목은 너무 많습니다. 몇 번 눌러 봐도 원하던 화면이 안 나오자, 손님은 전화도 걸지 않고 조용히 창을 닫습니다. 잘 만든 디자인도, 공들인 소개글도 손님이 그 페이지에 닿지 못하면 없는 것이나 마찬가지입니다. 내비게이션(메뉴)은 홈페이지의 '이정표'이고, 이정표가 헷갈리면 손님은 길을 잃습니다.

왜 작은 회사일수록 메뉴 설계가 중요한가

대기업 사이트는 손님이 시간을 들여 뒤져 볼 이유가 있습니다. 하지만 동네 가게나 작은 회사의 홈페이지에 온 손님은 대개 딱 한두 가지가 궁금합니다. 여기가 뭐 하는 곳인지, 얼마인지, 어떻게 연락하는지. 이 세 가지에 3초 안에 닿지 못하면 손님은 미련 없이 떠납니다. 메뉴 설계는 '멋'이 아니라 손님을 붙잡는 동선의 문제입니다.

손님이 헤매지 않는 내비게이션 설계 5가지 원칙

1. 메뉴 항목은 5~7개로 줄여라

사람이 한눈에 파악할 수 있는 선택지는 대략 5~7개가 한계입니다. 항목이 열 개를 넘어가면 손님은 고르는 대신 '피곤하다'고 느낍니다. 회사소개·서비스·요금·후기·문의처럼 손님이 실제로 찾는 것만 상단에 남기고, 나머지는 하위 메뉴나 푸터로 내리세요. 메뉴는 회사가 가진 걸 다 보여주는 진열장이 아니라, 손님을 원하는 곳으로 데려가는 안내판입니다.

2. 손님의 언어로 이름을 붙여라

'연혁·CI', '비전', '솔루션 포트폴리오' 같은 이름은 회사 내부에서나 통합니다. 손님은 '회사소개', '가격', '작업 사례'라는 익숙한 말을 찾습니다. 메뉴 이름을 지을 때는 손님이 검색창에 칠 법한 단어를 쓰세요. 멋있는 표현보다 한 번에 알아듣는 표현이 훨씬 많은 클릭을 만듭니다.

3. 지금 어디에 있는지 항상 보여줘라

손님이 여러 페이지를 오가다 보면 '내가 지금 어디에 있지?'를 놓치기 쉽습니다. 현재 보고 있는 메뉴 항목에 밑줄이나 색을 넣어 지금 위치를 표시하고, 로고를 누르면 언제든 첫 화면으로 돌아오게 하세요. 지금 위치를 알 수 있는 손님은 안심하고 더 깊이 둘러봅니다.

4. 모바일 메뉴는 엄지 안에 두어라

손님 열에 일곱은 휴대폰으로 들어옵니다. 화면 위쪽에만 메뉴를 몰아두면, 한 손으로 잡은 손님의 엄지는 거기까지 닿지 않습니다. 햄버거 메뉴는 열었을 때 항목이 충분히 크고 손가락 간격이 넉넉해야 하고, '전화'와 '문의' 버튼은 화면 하단에 고정해 엄지가 바로 닿게 두세요. 모바일에서 누르기 편한 메뉴가 곧 전환율입니다.

5. 어느 페이지에서든 '문의'로 가는 길을 열어둬라

손님은 소개 페이지를 보다가도, 후기를 읽다가도 마음이 움직입니다. 그 순간 연락하는 버튼이 눈앞에 없으면 결심은 식어버립니다. 모든 페이지 상단과 하단에 '문의하기'나 '전화 걸기'를 공통으로 두어, 손님이 어디서 마음을 먹든 한 번의 터치로 연락할 수 있게 하세요. 내비게이션의 마지막 목적지는 언제나 '연락'입니다.

메뉴는 손님을 위한 길이지, 회사를 위한 목차가 아니다

좋은 내비게이션은 눈에 띄지 않습니다. 손님이 헤맨 기억 없이 원하는 곳에 '어느새' 도착했다면, 그 메뉴는 제 역할을 다한 것입니다. 반대로 손님이 메뉴를 '공부'해야 한다면, 그건 회사의 목차를 손님에게 떠넘긴 셈입니다. 오늘 우리 홈페이지 메뉴를 처음 보는 손님의 눈으로 한 번 눌러 보세요. 세 번 안에 원하는 곳에 닿지 못한다면, 손을 봐야 할 때입니다.

CYAN은 작은 회사의 홈페이지를 만들 때 화면 디자인보다 먼저 손님의 동선을 그립니다. 손님이 처음 들어와 연락하기까지 몇 번을 누르는지, 어디서 멈칫하는지를 따져 메뉴를 설계합니다. 우리 홈페이지에서 손님이 길을 잃고 있는 것 같다면, 편하게 문의를 남겨 주세요.