[서비스기획] IA(Information Architecture) 정보구조도 작성 방법과 내비게이션 설계를 통한 사용자 UX 경험 설계 방법에 대해 알아보자

 

 

정보구조도(Information Architecture, IA)란?

정보구조도란 서비스 내 정보의 배치와 흐름을 시각화한 설계도이며, 서비스 목차 역할을 수행하는 문서이다. 

 

사용자 입장에서는 "원하는 정보를 쉽고 빠르게 찾고, 이해할 수 있도록 콘텐츠를 체계적으로 구성하는 과정"
내부 작업자 입장에서는 "우리의 서비스(웹/앱 등)의 화면을 정의하고, 화면 내에 포함된 기능을 정의하는 도구 "로 정의할 수 있다.

 

 

---

 

 

📌 정보구조도의 구성요소 

서비스 흐름(Service Flow)	사용자가 정보를 탐색하는 경로
콘텐츠 계층(Contents layer)	상위-하위 정보의 논리적 구조
내비게이션 패턴(Navigation patterns)	정보 접근 방식 (탭/ 메뉴/ 허브 앤 스포크 등) 아래에서 설명
페이지 관계(Page Relationship)	각 화면(페이지)의 연결성과 이동 경로

 

 

 

---

 

 

 

✔ 정보구조도의 종류

- 트리 구조의 IA

트리구조 IA는 정보나 콘텐츠를 "계층적"으로 배치한 구조로, 상위-하위 관계가 명확하게 시각화되도록 작성할 수 있는 설계 방법이다.

 

장점으로는 도식화를 통해 사용자가 원하는 정보를 단계별로 쉽게 탐색할 수 있으며, 복잡한 서비스도 논리적으로 구조화할 수 있다. 하지만 콘텐츠 확장 및, 하나의 정보가 여러 카테고리에 속할 경우 유연성이 부족하다는 단점을 가지고 있다. 

 

 

 

- 엑셀 형식의 IA

엑셀형식 IA는 정보구조를 "표 형식"으로 정리한 형태로, 각 페이지의 세부 정보와 기능을 체계적으로 나열할 수 있는 설계 방식이다. 트리구조에 비해 복잡성은 높되, 상세한 커뮤니케이션을 위해서는 주로 사용되는 설계 방법이다.

 

장점으로는 기능정의 및 화면설계 내용, 정책설계 내용 등을 포함하고 있어 체계적으로 파악이 가능하며, 그로 인해 팀원 간의 의사소통과 요구사항 전달에 용이하다. 반면,  정보 흐름을 시각적으로 표현할 수 없기 때문에 복잡한 사용자 흐름 (User Flow)나 인터랙션을 담기에는 제한적인 단점을 가지고 있다. 

 

 

※ 트리구조와 엑셀 형식의 IA 비교

구분	트리구조 IA	엑셀 형식 IA
표현 방식	계층적 구조(Tree Diagram)	행·열 기반의 표 (Spreadsheet)
활용 목적	정보 전체 흐름과 관계 시각화	세부 페이지 및 기능정의
장점	◾ 구조 직관성 높음 ◾ 탐색 흐름 이해 용이	◾ 관리의 편의성 ◾ 기능적 요구사항 명확도
단점	◾ 확장 시 복잡성 증가 ◾ 중복 정보 관리의 어려움	◾ 흐름 시각화 어려움 ◾ 관계성 표현 부족
적합한 상황	◾ 사용자 탐색 경로 시각화/ 전체 구조 확인 ◾ 설계 초기단계, 정보설계 시	◾ 기획서 작성 ◾ 기능정의서와 화면별 요구사항 관리

 

 

 

---

 

 

❓ 정보구조도, 왜 작성해야 할까?

[외부] 사용자 경험(UX) 개선 : 이탈률 감소를 위해 정보 탐색을 직관적으로 개선하거나, 비즈니스 수익률을 높이기 위해 정보구조를 개선해야 할 필요등, 데이터기반 문제를 해결할 경우 필요하다. 
[내부] 효율정 커뮤니케이션 : 기획/디자인/개발 팀 간 업무 이해도 향상과 오해도를 줄이는데 필요하다. 
[내·외부] 확장성 확보 : 서비스 기능을 개선하거나 확장할 경우에 유지보수가 용이하다. 

 

 

 

 

---

정보구조도 작성방법 How-To?

 

IA 작성에 정답은 없다. - 출처 : 본인

A안은 [ 사이트 개편을 위한 ]  정보구조도이며(1년 차 작성) , B안은 [사이트 구축을 위한] 정보구조도(3년 차 작성)이다.

 

A안의 관리 항목은 '사이트 구성메뉴(1~3 depth), TAB, 팝업페이지, 언어구분, 접근권한, 화면이름, page, PC, Mobile, 변경요청, 수정일정, 설계완료여부, 디자인, 퍼블리싱, 수정사항, 페이지 정의, 등...'

→ 지금 다시 돌아보니, 왜 이렇게 복잡하게 작성했을까? 누구를 위한 문서인가?라는 생각이 제일 먼저 들었다.

 

 

B안의 관리 항목은 '사이트 구성메뉴(1~3 depth), 기능구분, 기능관리, 기획담당자' + 진행상황 관리 (별도진행)

→ 필요한 내용만 빠르게 확인하는 것을 목표로 축약하여 정리한 문서였다. 개발자들과 소통 시 해당문서를 통해 진행하였으며, 스토리보드 작성 시 추가되는 기능 혹은 정책에 대한 내용을 함께 정리해 두었다. 

 

 

---

 

 

들어가기에 앞서, 정보구조도 작성에는 맞다/틀리다고 하는 정답이 없다. 

정보구조도를 작성하고 있는 이유와, 상황, 시스템 복잡도에 따라 각 내부 이해관계자 혹은 고객의 니즈를 충족시키기 위한 문서로써 복잡하고 세밀하게 작성하는 것을 선호할 수도 있으며, 단순하지만 필요 내용이 모두 추가되어 있는 자료를 선호하는 사람이 있을 수 있다는 것을 고려하고 작성해 보도록 하자. 

 

 

1️⃣ 정보수집 단계

• 이해관계자 인터뷰 : 각 부서의 요구사항을 파악하여 정보를 수집한다. (마케팅, 고객지원, 개발팀)
• 경쟁사 분석 : 유사 서비스를 벤치마킹하여 정보구조와 차별점을 확인한다. (IA 기술활용 서비스 도입, 정보구조 벤치마킹 등 * 다만, 목적과 필요성이 근거로 제시되어야 함)
• 사용자 조사 : 특정인물과 우리 서비스에 해당하는 인물을 고려한 페르소나가 아닌 여러분류의 불특정 다수 페르소나를 작성하고, 다양한 인물에 따른 고객여정(User Journey)을 작성하여 고객의 핵심 행동을 분석한다.  

 

2️⃣ 정보분류 단계

• 카테고리화 : 콘텐츠를 주제별로 묶어서 1단계 ~ 3단계로 계층화시킨다. 
• 우선순위 정리 : 주제별 그룹핑된 콘텐츠를 사용빈도와 중요도에 따라 노출 우선순위를 결정한다. 

💡 TIP
◾ Card Sorting 기법 : 실제 사용자가 제품의 정보와 구조를 어떻게 인식하고 그룹화하는지 확인하는 기법으로, 준비된 카드를 그룹화해 표현하게 하는 유저 리서치 방법론이다.
◾ 3-click rule 준수 : 사용자가 원하는 정보를 최대 3번 클릭 이내로 모든 정보를 찾을 수 있도록 설계하는 기법으로, 복잡성을 고려하여 설계하는 방법이다. 

 

 

3️⃣ 내비게이션 설계

• Primary Navigation(1차 내비게이션) : 주요 서비스 접근 경로 (예 : 홈, 검색, 마이페이지)
• Secondary Navigation(2차 내비게이션) : 서브 카테고리 또는 세부 기능
• Global Navigation(글로벌 내비게이션) : 어디서든 접근 가능한 고정 메뉴, GNB 상단바에 주로 배치( 회원가입, 로그인, 검색, 장바구니)

* 내비게이션 패턴 종류와 사용예시 

패턴명	설명	사용예시
계층 패턴	상위 → 하위로 정보다 단계적으로 구성된 패턴	쿠팡(카테고리 > 상품)
탭 패턴	주요 기능이나 콘텐츠를 탭(TAB)으로 전환하며 접근할 수 있는 패턴	인스타 (피드/검색/추가/릴스/프로필)
허브 앤 스포크	메인 허브에서 독립된 기능(스포크)으로 이동 후 메인으로 복귀하는 패턴	아이폰 설정(메인 설정 → 세부설정)
라이너 패턴	정해진 순서대로 단계를 거쳐 진행하는 직선 흐름의 패턴	크몽 회원가입 (정보입력 → 인증→완료)
네스트 돌 패턴	상위 화면에서 하위 화면으로 점진적 확장하며 탐색하는 패턴	네이버 블로그 (블로그 홈→ 글 목록 →글상세)
벤토 박스 패턴	한 화면에 여러 정보를 병렬로 배치해 한번에 제공하는 패턴	구글 드라이브 (파일 목록, 즐겨찾기, 최근 항목 동시 표시)

 

내비게이션 설계 패턴 - 실 서비스 예시 (출처 : 본인)

 

 

4️⃣ 이동경로 설계

각 페이지 간 이동경로를 정의하고 사용자 흐름(User Flow)을 설계한다.

user flow - 출처 : 본인

 

💡 TIP
◾ CTA(Call to Action) 버튼을 각 단계마다 배치하여 흐름을 유도한다.
◾ 필수 기능(로그인, 검색, 장바구니)은 항상 접근 가능하도록 글로벌 메뉴에 배치한다. (상단 고정메뉴)
＊ CAT :  사람들이 구매하거나, 구독, 예약 등 비즈니스 목표에 걸맞은 행동을 취하도록 유도하는 기능 (클릭 가능한 형태의 텍스트, 이미지 버튼)

 

 

▼ 자세한 User Flow에 대해 알고 싶다면? ▼

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

 

 

 

---

🔅 정보구조도 작성 시, 고려해봐야 할 사항(🍯 tip) 

1️⃣ 사용자 중심으로 설계하자

• 기술적 편의성 < 사용자 니즈를 중점으로 생각하여 설계하자. (기획자가 개발지식에 대해 알고 있어야 하는 이유! 기술을 기반으로 설득하거나, 개발자에게 다른 방향성을 제시할 수 있다)
• 웹/앱 등 서비스의 목적과 사용자가 서비스를 이용하는 이유를 파악하고, 해당 기능과 배치순서를 고려하자 
• ex) 사용자가 자주 찾는 메뉴는 상단에 배치하거나, 1번째 순서에 배치한다. 

 

 

2️⃣ 정보량을 최적화하자 (많지도, 적지도 않게)

• 필수 정보만 노출하도록 그룹핑하여 제거하자
• 과도한 카테고리화는 지양하자 ( 밀러의 법칙에 의하면 사람은 약 7개의 정보만 기억할 수 있으며, 그 이상의 정보는 압도감을 줄 수 있다고 설명한다)
• ex) 복잡한 메뉴는 드롭다운으로 정리한다.

 

 

3️⃣ 데이터를 기반으로 사고하자

• 화면이나 프로그램을 기획할 때, 가장 먼저 고려해야 하는 것은 '어떤 데이터를 수집하고, 어떠한 흐름으로 제어할 것인가'이다. 
• 눈에 보이는 데이터와 눈에 보이지 않는 데이터를 구분하고, 고려하여 설계하자.
• 눈에 보이는 데이터는 성별, 연령, 개인정보, 수집되어야 할 정보들을 고려하자. (단, 정말 필요로 하는 데이터만 수집받는 것을 목표로 설계하자)
• 눈에 보이지 않는 데이터는 완료일자, 수정일자,  저장 횟수 등을 고려할 수 있다. 

 

 

 

4️⃣ 가시성을 확보하자

• 주요 경로는 한눈에 보이도록, 숨겨진 기능은 최소화되도록 하자
• ex) 모바일에서는 하단 고정 바로 핵심 기능을 제공한다.

 

 

 

5️⃣ 유연한 확장을 고려하자

• 기존 기능에서 카테고리 추가 혹은 추첨방식 추가 등의 기능 요구사항이 존재할 경우, 기존 정보 구조와 기능에 문제가 없도록 확장성을 고려하여 설계하자.
• 예) 프로그램을 추첨방식으로 설계할 경우, 추첨방식을 '코드화' 하여 관리하고 확장성을 고려한다.