쇼핑몰에 상품이 늘어나고 게시판이 많아질수록 메인 화면 상단의 메뉴(GNB)는 점점 복잡해집니다. 방문자가 사이트에 들어와서 “내가 찾는 카테고리가 어디 있지?”라며 5초 이상 헤맨다면, 그 고객은 조용히 뒤로가기를 누르고 경쟁사 쇼핑몰로 떠나게 됩니다.
대형 마트에서 우유를 찾을 때 당연히 ‘유제품’ 코너로 가는 것처럼, 웹사이트에서도 고객이 헤매지 않고 목적지에 도달하게 만드는 뼈대가 필요합니다. 오늘은 복잡한 메뉴를 직관적으로 정리하여 이탈률을 방어하는 웹 기획의 핵심, IA(Information Architecture, 정보 구조) 설계와 네비게이션 기획법을 알아봅니다.
1. IA(정보 구조) 설계란 무엇인가?
웹 기획에서 IA(정보 구조) 설계란, 웹사이트에 존재하는 수많은 정보(상품, 게시판, 소개 페이지 등)를 성격에 맞게 분류하고, 사용자가 가장 찾기 쉬운 순서대로 위계질서를 잡아주는 작업입니다.
쉽게 말해 **’웹사이트의 목차’**이자 **’건물의 안내도’**를 그리는 것입니다. 앞서 다룬 와이어프레임 작성이 한 화면 내에서의 배치를 그리는 스케치라면, IA는 웹사이트 전체의 수십 개 페이지가 서로 어떻게 연결되는지를 보여주는 거대한 지도(Map)입니다.
2. 고객이 길을 잃지 않는 메뉴 설계 3원칙
개발자나 대표님의 머릿속에 있는 분류 기준이 고객의 기준과 같을 것이라는 착각을 버려야 합니다. 철저하게 사용자 중심의 네비게이션을 만들기 위한 3가지 원칙을 소개합니다.
원칙 1. 공급자 중심이 아닌 ‘사용자 중심’으로 분류하기
대표님들은 보통 ‘생산 방식’이나 ‘브랜드 라인업’을 기준으로 카테고리를 나눕니다. 하지만 고객은 철저히 **’자신의 목적(용도)’**을 기준으로 움직입니다.
- ❌ 나쁜 예(공급자 중심): 26년 S/S 라인업, 프리미엄 원단 시리즈
- ⭕ 좋은 예(사용자 중심): 하객룩, 출근룩, 홈웨어
만약 메뉴를 어떻게 묶어야 할지 막막하다면, 포스트잇에 모든 카테고리를 적어놓고 주변 사람들에게 직접 분류해 보라고 하는 ‘카드 소팅(Card Sorting)’ 기법을 활용해 보세요. 뜻밖의 직관적인 아이디어를 얻을 수 있습니다.
원칙 2. 뎁스(Depth)의 최소화: 3번 클릭 법칙
메뉴를 눌렀을 때 하위 메뉴가 나오고, 그 하위 메뉴를 누르면 또 세부 메뉴가 나오는 구조를 뎁스(Depth, 깊이)가 깊다고 표현합니다. 뎁스가 3단계를 넘어가면 사용자는 극심한 피로감을 느낍니다. 메인 화면에서 단 3번의 클릭 안에 사용자가 원하는 최종 상품 페이지나 정보에 도달할 수 있도록 카테고리를 얕고 넓게 묶어주세요. 모바일 퍼스트 UX 원칙을 고려할 때, 좁은 스마트폰 화면에서 하위 메뉴가 계속 열리는 것은 치명적인 이탈 원인이 됩니다.
원칙 3. 낯선 전문 용어 피하기 (직관적인 레이블링)
메뉴의 이름(Label)은 초등학생이 봐도 클릭했을 때 어떤 화면이 나올지 예측 가능해야 합니다. 멋을 부리기 위해 영어 약자나 업계 전문 용어를 사용하면 고객은 주저하게 됩니다.
- ‘Q&A’나 ‘고객센터’ 대신 ‘Help Desk’라고 쓰거나, ‘리뷰’ 대신 ‘Customer Voice’라고 쓰는 식의 레이블링은 사용자 경험(UX)을 크게 해칩니다.
💡네비게이션은 웹사이트의 나침반입니다
IA(정보 구조) 설계는 쇼핑몰의 규모가 커질수록 그 진가를 발휘합니다. 건물을 높게 올리려면 기둥이 튼튼해야 하듯, 우리 브랜드가 확장될 때마다 새로운 메뉴를 자연스럽게 끼워 넣을 수 있는 탄탄한 뼈대가 필요합니다.
지금 당장 내 쇼핑몰의 상단 메뉴(GNB)를 살펴보세요. 중복되는 메뉴는 없는지, 고객이 한 번에 알아듣기 힘든 어려운 단어가 쓰이지 않았는지 점검해 보시기 바랍니다. 고객의 탐색 시간을 1초 줄여주면, 매출은 그 이상으로 상승하게 될 것입니다!