정보구조도(IA) 만드는 법: 홈페이지 메뉴 구조 잡기 5단계

정보구조도(IA)는 홈페이지에 어떤 페이지를 두고, 각 페이지를 어느 메뉴 아래 묶고, 메뉴를 무엇이라고 부를지 정한 설계 문서입니다. 인터넷에 있는 IA 작성법은 앱·서비스 기획 기준이 많아서, 이 글은 기업 홈페이지를 처음 기획하거나 리뉴얼하는 담당자를 위해 정보구조도의 뜻, 사이트맵과의 관계, 만드는 5단계와 자주 하는 실수를 정리했습니다. 정보구조도가 확정된 다음 단계인 화면 설계는 와이어프레임이란? 뜻부터 홈페이지 기획 예시·툴까지 정리에서 다룹니다.

정보구조도(IA)란? 뜻과 역할

정보구조도는 IA(Information Architecture, 정보 구조)를 문서로 정리한 것으로, 홈페이지의 모든 화면을 계층으로 나열하고 화면마다 이름, 주소, 유형을 적은 설계도입니다. 방문자가 원하는 정보를 몇 번 만에 찾을 수 있는지, 같은 정보가 두 군데 흩어져 있지 않은지가 이 문서에서 결정됩니다.

정보구조도가 정하는 것은 세 가지입니다. 어떤 페이지가 있는가, 각 페이지가 어느 메뉴 아래 있는가, 각 메뉴를 무엇이라고 부르는가입니다. 페이지 안에 무엇을 어떤 순서로 둘지는 다음 단계인 와이어프레임에서 정하고, 한 페이지 안에서 요소를 몇 열로 어떻게 놓을지는 웹디자인 레이아웃 가이드에서 다룬 영역입니다. 정보구조도는 페이지와 페이지 사이의 구조, 레이아웃은 페이지 안의 구조라고 나눠 보면 쉽습니다. GNB·LNB처럼 기획 단계에서 함께 쓰는 말은 홈페이지 기획 용어 정리에서 한 번에 볼 수 있습니다.

정보구조도를 먼저 확정해야 하는 이유는 뒤 단계가 모두 이 문서를 기준으로 움직이기 때문입니다. 화면 수는 디자인·퍼블리싱 작업량의 기준이 되고, 메뉴 계층은 URL과 이동 경로가 되며, 화면별 유형(고정 페이지인지 게시판인지)은 관리자 기능의 범위를 정합니다. 디자인이 시작된 뒤 메뉴를 갈아엎으면 이 세 가지가 함께 흔들립니다.

정보구조도, 사이트맵, XML 사이트맵 차이

정보구조도와 기획 사이트맵은 같은 구조를 다른 형태로 보여주는 문서이고, XML 사이트맵은 검색엔진에 제출하는 별개의 파일입니다. 이름이 같아서 회의 중에 서로 다른 것을 가리키는 일이 잦으니 먼저 구분해 두세요.

네이버 서치어드바이저는 사이트맵을 「사이트 내의 수집 대상 URL 목록을 담은 XML 형식의 파일」로 정의하고, 구글은 사이트맵 파일 하나에 압축 전 50MB 또는 URL 50,000개까지 담을 수 있다고 안내합니다. 이 파일은 정보구조도가 확정되고 사이트가 만들어진 뒤 자동으로 생성하는 경우가 일반적입니다.

두 문서는 이렇게 이어집니다. 구글은 페이지끼리 링크가 제대로 연결되어 있으면 사이트맵이 없어도 대부분의 페이지를 찾을 수 있다고 설명합니다. 그 「링크 연결」을 설계하는 문서가 정보구조도이고, 정보구조도의 URL 목록이 나중에 XML 사이트맵의 내용이 됩니다.

정보구조도 만드는 법 5단계

기업 홈페이지 정보구조도는 콘텐츠 목록 작성, 방문자 기준으로 묶기, 메뉴 이름 정하기, 깊이 정리, 화면 ID와 URL 부여의 5단계로 만듭니다. 순서를 바꿔 메뉴 이름부터 정하면 이름에 맞춰 내용을 끼워 넣는 일이 생기기 쉽습니다.

1단계. 콘텐츠 목록 만들기

홈페이지에 올라갈 수 있는 정보를 메뉴 구분 없이 모두 적습니다. 출처는 세 곳입니다.

• 현행 홈페이지: 리뉴얼이라면 지금 있는 페이지를 전부 뽑습니다. 상단 메뉴만 보면 메뉴에 연결되지 않은 페이지를 놓치므로 푸터의 사이트맵 링크, 게시판, 다운로드 자료까지 확인합니다.
• 회사 자료: 회사소개서, 제품 카탈로그, 인증서, 연혁 자료에서 홈페이지에 실을 항목을 뽑습니다.
• 새로 필요한 것: 견적 문의 폼, 채용 공고, 자료 요청처럼 지금은 없지만 사업에 필요한 기능입니다.

이 단계에서 항목마다 「어느 페이지에 쓸지, 쓰지 않을지」를 판정해 두면 나중에 빠진 자료와 두 번 들어간 자료가 함께 드러납니다.

2단계. 방문자 기준으로 묶기

목록을 비슷한 것끼리 묶습니다. 기준은 회사 내부 조직이 아니라 방문자가 홈페이지에서 확인하려는 질문입니다. 기업 홈페이지 방문자는 대개 「어떤 회사인가」, 「무엇을 만들거나 제공하나」, 「믿을 만한가」, 「어떻게 연락하나」를 확인하러 옵니다. 이 질문들이 대메뉴 후보가 됩니다.

어디에 넣을지 애매한 항목이 많다면 실제 고객이나 영업 담당자에게 항목을 적은 카드를 주고 직접 묶어 보게 하는 방법(카드 소팅)이 도움이 됩니다. 회사 안에서는 당연한 분류가 바깥 사람에게는 낯선 경우를 미리 찾을 수 있습니다.

3단계. 메뉴 이름 정하기

묶음마다 이름을 붙입니다. 원칙은 세 가지입니다.

• 한 메뉴는 한 개념: 「생산·솔루션」처럼 두 단어를 가운뎃점으로 잇지 않습니다. 고치는 방법은 아래 「흔한 실수」에서 다룹니다.
• 방문자가 쓰는 말: 사내 약어나 부서 용어 대신, 동종업계 홈페이지에서 실제로 쓰는 메뉴 이름인지 확인하고 씁니다.
• 메뉴 이름과 페이지 제목 일치: 메뉴 「연혁」을 눌렀는데 페이지 제목이 「History」나 「성장 과정」이면 방문자는 제대로 왔는지 다시 확인하게 됩니다.

메뉴 이름은 검색에도 쓰입니다. 구글은 검색 결과에서 사이트 아래에 붙는 하위 페이지 링크(사이트링크)를 자동으로 만들며, 이때 사이트의 링크 구조를 분석한다고 설명합니다. 개선 방법으로는 페이지 제목과 제목 문구를 정보가 담기게 짧게 쓰고, 방문자가 탐색하기 쉬운 논리적인 구조를 만들고, 내부 링크 문구를 연결되는 페이지에 맞게 간결하게 쓰라고 안내합니다. 메뉴 이름이 곧 그 내부 링크 문구입니다.

4단계. 깊이는 2단계로 정리하기

기업 홈페이지 메뉴는 대메뉴와 하위 메뉴, 두 단계로 정리하는 것을 원칙으로 하세요. 상단 메뉴에 마우스를 올렸을 때 펼쳐지는 목록이 무리 없이 보여줄 수 있는 범위가 두 단계이고, 모바일 메뉴에서는 단계가 하나 늘 때마다 펼치는 동작이 한 번씩 더해지기 때문입니다.

세 번째 단계가 필요해 보이면 메뉴가 아니라 페이지 안에서 해결합니다.

• 하위 메뉴 아래 내용이 몇 개뿐이라면: 한 페이지 안의 탭이나 섹션으로 나눕니다.
• 제품처럼 분류와 품목이 많다면: 분류를 하위 메뉴로 펼치고, 품목은 분류 페이지의 목록과 필터로 보여줍니다.
• 게시물 상세처럼 반복되는 화면이라면: 메뉴에 올리지 않고 목록에서 들어가는 화면으로 둡니다.

메뉴가 두 단계여도 실제 위치는 더 깊을 수 있습니다. 「홈 > 제품 > 산업용 펌프 > 품목명」처럼 현재 위치를 보여주는 이동 경로(브레드크럼)를 두면 방문자가 길을 잃지 않습니다. 구글은 브레드크럼이 사이트 계층에서 페이지의 위치를 나타낸다고 설명하면서, URL 구조를 그대로 옮기기보다 방문자가 실제로 거쳐 오는 경로를 반영하라고 권장합니다. 원문은 구글 검색 센터의 브레드크럼 구조화 데이터 문서에 있고, 이 경로를 검색엔진에 알리는 마크업 방법은 JSON-LD 구조화 데이터 작성법에서 다룹니다.

5단계. 화면 ID와 URL 붙이기

마지막으로 화면마다 고유 번호(화면 ID)와 주소(URL)를 붙여 표로 완성합니다. 화면 ID가 있으면 디자이너, 개발자, 고객이 「PG-006 화면」처럼 같은 화면을 정확히 가리키며 이야기할 수 있습니다. 아래는 가상의 제조 기업을 예로 든 정보구조도 표입니다.

• 화면 ID 구성: 웹닷은 「고객사 코드-기기-화면 구분-순번」으로 붙이고, 화면 구분은 공통 영역(헤더·푸터) CM, 일반 화면 PG, 관리자 화면 AD로 나눕니다. 형식은 업체마다 달라도 되지만 한 프로젝트 안에서는 하나로 통일해야 합니다.
• 번호는 당기지 않기: 한 번 붙인 번호는 중간 화면을 빼도 뒤 번호를 당기지 않습니다. 고객과 이미 번호로 의견을 주고받았다면 번호가 바뀌는 순간 기록이 어긋납니다.
• URL은 메뉴 계층 순서로, 읽을 수 있는 단어로: 구글은 URL에 긴 ID 번호 대신 읽을 수 있는 단어를 쓰고, 단어 사이는 밑줄(_)보다 하이픈(-)으로 구분하라고 권장합니다. 방문자의 언어로 된 단어도 쓸 수 있으며, 한글처럼 ASCII 밖의 문자는 링크의 href에서 퍼센트 인코딩하라고 안내합니다.

규모가 큰 사이트라면 비슷한 주제를 디렉터리(폴더)로 묶는 것도 구글 SEO 기본 가이드가 권하는 방법입니다. 같은 문서는 그렇다고 지금 운영 중인 사이트를 당장 재구성할 필요는 없다고 덧붙입니다. 그래서 디렉터리 구조는 새로 만들거나 리뉴얼하는 시점에 정보구조도와 함께 정해 두는 편이 부담이 적습니다.

정보구조도에서 흔한 실수 4가지

정보구조도에서 가장 자주 생기는 실수는 회사 안의 시선으로 메뉴를 짜는 것입니다. 아래 네 가지는 기획 검토 회의에서 바로 걸러낼 수 있습니다.

1. 회사 조직도대로 메뉴 짜기

「영업본부」, 「생산본부」, 「연구소」처럼 부서 단위로 대메뉴를 만들면 방문자는 자기가 찾는 정보가 어느 부서 소관인지 알아야 길을 찾을 수 있습니다. 제품 사양은 연구소 아래에, 납품 실적은 영업본부 아래에, 인증서는 품질팀 아래에 흩어지는 식입니다. 메뉴는 방문자의 질문 단위로 묶고, 부서 구분은 회사소개 안의 조직도 한 장으로 충분합니다.

2. 「A·B」 복합 메뉴명

「성장·사업체계」, 「품질·안전」처럼 두 개념을 가운뎃점으로 이은 메뉴명은 대개 서로 다른 페이지의 내용을 한 페이지로 끌어모았다는 신호입니다. 웹닷은 이런 메뉴를 아래 순서로 고칩니다.

1. 그 페이지의 섹션이 다른 페이지와 겹치는지 먼저 찾습니다. 겹치는 섹션은 원래 페이지로 돌려보냅니다.
2. 남은 내용을 한 개념으로 부를 수 있으면 이름을 바꿉니다. 예를 들어 「생산·솔루션」은 「생산시설」로, 「품질·안전」은 「품질경영」으로 바꿉니다.
3. 정말 두 개념이라면 페이지를 나눕니다. 다만 나눈 각 페이지를 채울 자료가 충분하고, 늘어난 화면이 계약 범위 안일 때만 나눕니다.

3. 공용 양식을 메뉴로 올리기

「제품 상세」, 「공지 상세」처럼 같은 양식에 내용만 바뀌는 화면은 메뉴가 될 수 없습니다. 제품마다 주소가 달라서 메뉴에서 누를 목적지가 없기 때문입니다. 제품군이 나뉘어 있다면 분류를 하위 메뉴로 펼치고(제품 아래 산업용 펌프, 밸브, 계측기), 상세 화면은 각 분류 페이지의 목록에서 들어가게 합니다. 정보구조도 표에는 위 예시처럼 「상세 공용 양식 ×N」으로 반복 수를 적어 두면 디자인과 퍼블리싱 범위가 정확해집니다. 퍼블리싱이 맡는 범위는 웹 퍼블리싱이란? 뜻, 디자인·개발과 차이와 품질 확인법을 참고하세요.

4. 같은 정보를 두 메뉴에 두기

「회사소개 > 공지사항」과 「홍보센터 > 새소식」이 사실상 같은 게시판이라면 방문자는 어디에 최신 글이 있는지 헷갈리고, 관리자는 같은 글을 두 번 올리게 됩니다. 정보 하나는 한 곳에 두고, 다른 곳에서는 링크로 연결하세요. 아직 자료가 없는 영역을 미리 메뉴로 만들어 두는 것도 비슷한 문제를 낳습니다. 내용이 하나도 없는 메뉴는 오픈 직후 「준비 중」 페이지가 되기 쉬우므로, 자료가 생길 때 추가하는 편이 낫습니다.

리뉴얼 정보구조도는 이관·이동·신설로 나눕니다

리뉴얼 정보구조도는 빈 종이에서 시작하지 않고, 현행 홈페이지의 모든 페이지를 새 구조로 어떻게 옮길지 분류하는 데서 시작합니다. 웹닷은 현행 페이지마다 아래 분류 중 하나를 적어 고객 검토를 받습니다.

「신설」은 현행 사이트에 정말 없던 화면에만 붙입니다. 이미 있던 내용을 나누거나 고친 것을 신설로 적으면 고객이 「이건 원래 있던 건데요」라고 바로 알아보고, 문서 전체를 믿기 어려워집니다. 신설 항목에는 왜 필요한지 근거(경쟁사 홈페이지에 있는 메뉴, 고객이 요청한 날짜 등)를 함께 적어 두세요. 리뉴얼 기획 전체 흐름은 홈페이지 리뉴얼 기획안 작성 7단계 가이드에 정리되어 있습니다.

자주 묻는 질문

정보구조도와 메뉴 구조도는 같은 건가요?

같은 구조를 다른 형태로 보여주는 문서입니다. 메뉴 구조도는 전체를 한눈에 보는 그림이고, 정보구조도는 화면 ID, URL, 화면 유형까지 적은 작업용 표입니다. 업체에 따라 둘을 합쳐 「사이트맵」이나 「IA」라고 부르기도 합니다.

정보구조도는 누가 만드나요?

보통 제작 업체의 기획자가 초안을 만들고, 회사 담당자는 콘텐츠 목록에 빠진 것이 없는지와 메뉴 이름이 고객에게 익숙한 말인지를 검토합니다. 담당자가 회사소개서, 카탈로그, 고객이 자주 묻는 질문 목록을 미리 모아 두면 첫 초안부터 빠지는 항목이 줄어듭니다.

대메뉴는 몇 개가 적당한가요?

정해진 숫자는 없습니다. 2단계에서 정리한 방문자 질문 가운데 실제로 채울 자료가 있는 것만큼 만듭니다. 대메뉴가 늘어나면 PC 상단 한 줄에 무리 없이 들어가는지, 모바일 메뉴에서 한 화면에 보이는지를 함께 확인하세요.

엑셀로 만들어도 되나요?

됩니다. 표는 엑셀이나 구글 스프레드시트, 도식은 피그마나 화이트보드형 도구로 그리는 경우가 많습니다. 도구보다 중요한 것은 원본을 하나로 유지하고, 바뀐 날짜와 이유를 기록해 두는 것입니다.

오픈 후에 메뉴를 바꿔도 되나요?

바꿀 수 있습니다. 다만 URL까지 바뀌면 옛 주소에서 새 주소로 리디렉션을 걸어야 합니다. 메뉴 이름만 고치고 URL은 그대로 두는 방법도 있으니, 변경 전에 어느 쪽인지 먼저 정하세요.

웹닷은 계약 직후 현행 사이트의 페이지를 전수로 확인해 정보구조도를 만들고, 확정된 화면 ID를 기준으로 와이어프레임, 디자인, 개발은 물론 XML 사이트맵과 브레드크럼 구조화 데이터까지 빌드 단계에서 함께 처리합니다.

정리

정보구조도는 홈페이지의 페이지 목록, 메뉴 계층, 메뉴 이름을 디자인 전에 확정하는 설계 문서입니다. 방문자의 질문을 기준으로 묶고 두 단계 깊이로 정리한 뒤 화면 ID와 URL을 붙여 두면, 와이어프레임부터 XML 사이트맵까지 뒤 단계가 같은 기준으로 움직입니다.