정보 구조, 메뉴 설계·사용자 동선·정보 디자인으로 길 잃지 않는 화면 만들기
온라인 쇼핑몰에서 원하는 상품을 찾다가 메뉴를 몇 번이나 눌러도 같은 화면만 반복해서 본 경험이 있을 것입니다. 회사 홈페이지에서 서비스 이용 방법을 찾는데 메뉴 이름이 모호해 검색창부터 켜는 경우도 있습니다. 화면 색상과 글꼴은 보기 좋은데도 사용자가 헤매는 이유는 정보가 놓인 순서와 분류가 자연스럽지 않기 때문입니다.
정보 구조를 제대로 잡으면 메뉴를 어디에 둘지, 콘텐츠를 어떤 순서로 보여줄지, 사용자가 다음에 무엇을 해야 할지를 설명할 수 있습니다. 이 글을 읽으면 정보 구조와 정보 디자인의 차이, 정보 구조도를 만드는 과정, 좋은 구조와 나쁜 구조를 가르는 기준을 실제 웹사이트 사례와 함께 알게 됩니다.
정보 구조란 무엇이며 왜 먼저 정해야 할까
정보 구조는 웹사이트나 앱에 있는 내용을 사용자가 찾기 쉬운 방식으로 나누고 연결하는 설계입니다. 건물로 비유하면 색상과 장식은 인테리어이고, 정보 구조는 방의 위치와 복도의 흐름에 가깝습니다. 아무리 예쁜 건물이라도 화장실과 출입구를 찾기 어렵다면 좋은 공간이라고 말하기 힘듭니다.
정보 구조에는 보통 세 가지 요소가 들어갑니다. 첫째는 비슷한 내용을 어떤 그룹으로 묶을지 정하는 분류입니다. 둘째는 메뉴와 버튼에 어떤 이름을 붙일지 정하는 표시 방식입니다. 셋째는 사용자가 현재 어디에 있고 다음에 어디로 이동할지 보여주는 이동 흐름입니다.
예를 들어 교육 사이트의 메뉴를 ‘배움’, ‘성장’, ‘도움’처럼 감성적인 단어로만 나누면 처음 방문한 사람은 원하는 내용을 추측해야 합니다. 반면 ‘강의 찾기’, ‘수강 중인 강의’, ‘학습 기록’, ‘고객센터’처럼 이용 목적을 드러내면 메뉴를 보는 순간 다음 행동을 결정하기 쉽습니다.
정보 구조를 만들기 전 확인할 체크리스트
- 사용자의 목적을 한 문장으로 적기: 방문자가 무엇을 하려고 들어오는지 먼저 씁니다. 상품을 구매하려는 사람과 회사 정보를 확인하려는 사람은 같은 메뉴를 보더라도 우선순위가 다릅니다.
- 콘텐츠 목록을 빠짐없이 모으기: 현재 운영 중인 페이지뿐 아니라 새로 추가될 자료, 공지, 문의 과정도 적습니다. 보이지 않는 관리자용 화면이나 예외 상황도 함께 확인해야 합니다.
- 서로 겹치는 이름 찾기: ‘자료실’, ‘콘텐츠’, ‘소식’처럼 비슷해 보이는 메뉴가 여러 개라면 각각 무엇을 담는지 구분합니다. 이름이 겹치면 사용자는 어느 메뉴를 눌러야 할지 고민합니다.
- 가장 많이 쓰는 기능 확인하기: 내부에서 중요하다고 생각하는 기능과 실제 방문자가 자주 쓰는 기능은 다를 수 있습니다. 방문 기록, 문의 내용, 검색어를 함께 살펴보는 편이 좋습니다.
- 처음 보는 사람의 언어 사용하기: 조직 안에서만 쓰는 약어와 전문 용어는 메뉴 이름에서 줄입니다. 꼭 필요한 용어라면 짧은 설명을 붙입니다.
이 단계에서 바로 화면을 그리기보다 종이나 문서에 콘텐츠 이름을 먼저 적어보면 좋습니다. 페이지를 예쁘게 배치하는 일보다 무엇을 어디에 넣을지 결정하는 일이 먼저이기 때문입니다.
좋은 정보 구조와 불편한 구조의 차이
| 비교 기준 | 좋은 구조 | 불편한 구조 |
|---|---|---|
| 메뉴 이름 | 내용과 행동이 구체적으로 드러남 | 의미를 추측해야 하는 표현이 많음 |
| 분류 기준 | 사용자의 목적을 기준으로 나눔 | 부서 이름이나 내부 업무 순서만 따름 |
| 이동 흐름 | 현재 위치와 다음 행동을 알 수 있음 | 뒤로 가거나 처음부터 다시 찾아야 함 |
| 콘텐츠 깊이 | 중요한 정보까지 적은 단계로 접근 가능 | 여러 메뉴를 지나야 핵심 내용에 도착함 |
예를 들어 공공기관 사이트에서 ‘홍보관’, ‘알림마당’, ‘행정자료’처럼 기관 중심으로 메뉴를 나누면 내부 사람에게는 익숙할 수 있습니다. 하지만 이용자는 보도자료를 찾는지, 신청 서식을 찾는지에 따라 메뉴를 선택합니다. 이용 목적이 분명한 ‘공지사항’, ‘신청 서식’, ‘통계 자료’가 더 빠르게 이해될 수 있습니다.
정보 디자인은 이렇게 정한 구조를 화면에서 읽기 좋게 보여주는 작업입니다. 제목의 크기, 여백, 색상, 목록, 아이콘은 구조를 돕는 도구입니다. 구조가 잘못된 상태에서 색상만 바꾸면 보기에는 달라져도 찾기 어려운 문제는 그대로 남습니다.
정보 구조도 만드는 순서
- 대상 사용자와 핵심 과업을 정합니다. ‘모든 사람을 위한 사이트’처럼 넓게 잡기보다 ‘처음 방문해 이용 신청을 하려는 사람’처럼 구체적으로 적습니다.
- 페이지와 기능을 카드처럼 나눕니다. 페이지 이름을 하나씩 적고, 비슷한 내용끼리 직접 묶어봅니다. 이때 기존 메뉴 이름은 잠시 잊고 콘텐츠의 실제 내용을 기준으로 봅니다.
- 그룹마다 의미 있는 이름을 붙입니다. 사용자가 검색하거나 말할 법한 단어를 선택합니다. ‘서비스 안내’ 안에 신청, 요금, 이용 시간만 있다면 ‘이용 안내’처럼 더 정확한 이름을 검토할 수 있습니다.
- 상위 메뉴와 하위 메뉴의 관계를 정합니다. 상위 메뉴를 지나치게 많이 만들면 선택하기 어렵고, 하위 메뉴를 너무 깊게 넣으면 도착까지 오래 걸립니다. 핵심 기능은 첫 화면이나 상위 메뉴에서 보이게 배치합니다.
- 대표 사용 흐름을 직접 따라갑니다. ‘첫 방문자가 이용 신청을 완료하는 과정’, ‘기존 회원이 결제 내역을 찾는 과정’처럼 시나리오를 만들고 실제로 몇 번 눌러야 하는지 확인합니다.
- 다른 사람에게 이름만 보여주고 물어봅니다. 설명을 붙이지 않은 채 메뉴 이름을 보고 어떤 내용이 나올지 말해달라고 합니다. 예상이 크게 다르면 메뉴 이름이나 분류를 다시 손봅니다.
정보 구조도는 복잡한 그림일 필요가 없습니다. 상위 메뉴, 하위 메뉴, 연결되는 페이지를 상자와 선으로 표시해도 충분합니다. 중요한 점은 화면 모양이 아니라 콘텐츠 사이의 관계와 이동 순서가 드러나는 것입니다.
자주 하는 실수와 고치는 방법
첫 번째 실수는 회사 조직도를 메뉴로 사용하는 것입니다. 부서가 바뀌면 메뉴도 흔들리고, 외부 이용자는 어느 부서가 자신의 문제를 해결하는지 알기 어렵습니다. 조직명이 꼭 필요하다면 이용자 메뉴와 분리해 소개 페이지에서 보여주는 편이 낫습니다.
두 번째는 모든 내용을 첫 화면에 넣는 것입니다. 중요한 정보를 빠뜨리지 않으려다 배너, 공지, 추천 콘텐츠, 설명 문장이 한꺼번에 쌓이면 오히려 시선이 분산됩니다. 첫 화면에서는 가장 중요한 목적과 다음 행동을 먼저 보여주고, 자세한 내용은 단계적으로 나누는 것이 좋습니다.
세 번째는 메뉴를 바꾼 뒤 실제 사용자 확인을 하지 않는 것입니다. 만든 사람에게는 익숙한 구조도 처음 온 사람에게는 낯설 수 있습니다. 다섯 명 안팎의 사용자에게 특정 정보를 찾아보게 하고, 막힌 지점과 혼동한 메뉴를 기록하면 문제를 빠르게 발견할 수 있습니다.
네 번째는 검색 기능에만 기대는 것입니다. 검색은 오타, 다른 표현, 오래된 콘텐츠 때문에 원하는 결과를 놓칠 수 있습니다. 검색창을 제공하더라도 기본 메뉴와 분류가 이해되도록 만들어야 합니다.
정보 구조에 대해 자주 묻는 질문
정보 구조도와 화면 설계는 같은 것인가요?
같지 않습니다. 정보 구조도는 어떤 콘텐츠가 어디에 속하고 서로 어떻게 연결되는지 보여줍니다. 화면 설계는 그 구조를 실제 페이지의 영역, 버튼, 글자, 이미지로 배치하는 과정입니다. 구조도를 먼저 만들면 화면을 수정할 때 기준을 잃지 않을 수 있습니다.
메뉴는 몇 개가 적당한가요?
정해진 숫자보다 사용자가 구분할 수 있는지가 중요합니다. 메뉴가 너무 많으면 선택 부담이 커지고, 너무 적으면 한 메뉴 안에 내용이 뒤섞입니다. 각 메뉴를 봤을 때 어떤 내용이 들어갈지 설명하기 어렵다면 분류 기준을 다시 확인해야 합니다.
정보 구조를 언제 다시 점검해야 하나요?
사이트를 크게 개편할 때만 볼 필요는 없습니다. 새로운 서비스가 추가됐을 때, 문의가 특정 메뉴에 몰릴 때, 방문자가 원하는 페이지에서 자주 이탈할 때 점검하는 것이 좋습니다. 정책이나 운영 방식이 바뀌었다면 관련 페이지의 이름과 연결도 공식 안내와 함께 다시 확인해야 합니다.
정보 디자인은 예쁜 화면보다 기능이 우선인가요?
둘 중 하나만 선택하는 문제는 아닙니다. 다만 예쁜 장식이 정보를 가리거나 버튼의 의미를 흐리면 사용성이 떨어집니다. 먼저 읽기 순서와 행동 흐름을 분명히 만든 뒤 색상, 이미지, 움직임을 더해야 디자인과 구조가 서로 도움을 줍니다.
좋은 정보 구조는 사용자가 구조를 의식하지 않아도 원하는 곳에 도착하게 만듭니다. 메뉴 이름이 정확하고, 분류 기준이 일관되며, 다음 행동이 자연스럽게 이어지는지 확인해보세요. 작은 사이트라도 이 세 가지를 점검하면 콘텐츠를 추가할 때마다 화면이 복잡해지는 문제를 줄일 수 있습니다.