정보 구조(Information Architecture)
정보 구조란 무엇인가?
∙ 콘텐츠를 조직화하고 레이블링하여 사용자가 쉽게 찾고 이해할 수 있게 하는 것
∙ 보이지 않지만 모든 디지털 경험의 뼈대를 이루는 구조
왜 중요한가?
∙ 아무리 좋은 콘텐츠도 찾을 수 없으면 존재하지 않는 것과 같음
∙ 잘못된 IA는 비즈니스 손실로 직결
∙ Amazon: 로딩 시간 0.1초 증가 → 매출 1% 감소
IA의 4대 구성 요소
1. Organization System (조직 체계)
∙ 콘텐츠를 어떻게 분류하고 구조화할 것인가
∙ 우리가 Card Sorting으로 발견하는 것
2. Labeling System (레이블링 체계)
∙ 정보를 어떻게 표현할 것인가
∙ 사용자가 이해하는 언어로
3. Navigation System (네비게이션 체계)
∙ 정보 사이를 어떻게 이동할 것인가
∙ 길을 잃지 않도록
4. Search System (검색 체계)
∙ 정보를 어떻게 찾을 것인가
∙ 네비게이션의 안전망
정보 구조 설계 시 흔한 실수들
1. Organization의 함정
∙ "우리 조직도를 메뉴로 만들었어요"
◦ 영업1팀 상품 / 영업2팀 상품
◦ 사용자: "뭐가 다른거지?"
∙ 해결: 사용자 목적 중심으로 재구성
2. Labeling의 함정
∙ "멋진 이름을 지었어요"
◦ "Discovery Hub" (뭘 발견?)
◦ "Solution Center" (무슨 솔루션?)
∙ 해결: 평범하지만 명확한 이름
3. Navigation의 함정
∙ "다 보여주면 되잖아요"
◦ 메가 메뉴에 100개 링크
◦ 인지 과부하 → 선택 장애
∙ 해결: 우선순위를 정하고 단계적 공개
4. Search의 함정
∙ "검색만 잘 되면 IA는 대충해도 되겠지"
◦ 검색 의존도 높음 = 구조 실패
◦ 검색도 IA 기반으로 작동
∙ 해결: 구조와 검색의 균형
Card Sorting: 사용자에게 분류를 맡기자
📌 카드 소팅이란?
∙ 사용자가 제공된 개념들을 그룹으로 묶고 이름을 붙이는 과정을 통해 정보 구조(IA)를 사용자 관점에서 설계하는 UX 리서치 방법
🧠 기대 효과
∙ 사용자 친화적인 IA 설계
∙ 탐색성 향상 → 이탈률 감소
∙ 조직 내 이해관계자 설득 자료로 활용 가능
Card Sorting 진행 절차
1️⃣ 단계: 준비 (1-2일)
✅ 카드 준비
∙ 30-60개의 주요 콘텐츠/기능 선정
∙ 명확하고 중립적인 이름으로 작성
∙ 전문용어 배제, 사용자 언어 사용
✅ 참가자 모집
∙ 타겟 사용자 15-20명
∙ 다양한 사용 패턴 대표
✅ 도구 선택
∙ 오프라인: 인덱스 카드, 포스트잇
∙ 온라인: OptimalSort, UserZoom, Maze
2️⃣ 단계: 실행 (참가자당 30-60분)
Open Card Sorting
∙ "이 카드들을 비슷한 것끼리 그룹으로 묶어주세요.
∙ 각 그룹에 이름도 지어주세요."
Closed Card Sorting
∙ "이 카드들을 준비된 카테고리에 넣어주세요.
∙ 어디에 넣을지 헷갈리는 것은 표시해주세요."
3️⃣ 단계: 분석 (1-2일)
∙ 카드 간 그룹핑 빈도 계산
∙ 참가자 간 일치도 분석
∙ 70% 이상 함께 묶임 → 같은 카테고리로
∙ 30% 이하 → 분리 필요
4️⃣ 단계: 적용
∙ 새로운 IA 구조 도출
∙ 애매한 항목은 다중 경로 제공
∙ Tree Testing으로 검증 진행
📌 Card Sorting의 실제
음식 배달 앱을 만든다고 했을 때
: 주문하기, 주문내역, 찜한 가게, 리뷰 쓰기, 쿠폰함, 포인트, 배달 추적, 가게 검색,1:1 문의, 주소 관리, 결제수단 관리, 알림 설정
일반적인 PM의 분류:
∙ 주문 관련: 주문하기, 주문내역, 배달추적
∙ 계정 관리: 주소 관리, 결제수단, 알림 설정
∙ 고객 지원: 1:1 문의, 리뷰
∙ 혜택: 쿠폰함, 포인트
실제 사용자의 분류:
∙ 지금 시킬 때: 주문하기, 가게 검색, 주소 관리
∙ 시킨 후에: 배달추적, 주문내역
∙ 내 것들: 찜한 가게, 쿠폰함, 포인트, 결제수단
∙ 불만있을 때: 1:1 문의, 리뷰 쓰기
💡 Card Sorting 팁
참가자 리크루팅의 함정 - "우리 고객이면 다 되는 거 아니야?"
❌ 잘못된 리크루팅
∙ 헤비 유저만 모집 → 편향된 결과
∙ 신규 유저만 모집 → 깊이 부족
∙ 내부 직원 가족 → 이미 오염됨
✅ 균형잡힌 리크루팅
∙ 초보자 30% : 직관성 테스트
∙ 일반 사용자 50% : 대표성
∙ 헤비 유저 20% : 엣지 케이스
카드 수준 맞추기
❌ 섞인 레벨
∙ "전자제품" (카테고리)
∙ "갤럭시 S24" (구체적 상품)
∙ "구매하기" (기능)
✅ 같은 레벨
∙ "스마트폰"
∙ "노트북"
∙ "태블릿"
Tree Testing: 만든 구조가 정말 찾기 쉬운가?
📌 트리 테스팅이란?
∙ 메뉴나 정보 구조의 탐색 흐름을 텍스트 기반 트리(Tree)로 구성하여, 사용자가 특정 정보를 얼마나 잘 찾는지 테스트하는 방식
🔍 무엇을 검증하나?
∙ 사용자가 예상한 위치에 정보가 있는지
∙ 분류 체계가 명확하고 직관적인지
∙ 메뉴 깊이, 항목 이름, 구조 등이 탐색에 어떤 영향을 미치는지
📈 활용 예시
∙ 리뉴얼 전 IA 구조의 문제 진단
∙ 카드 소팅 후 설계된 IA의 검증
∙ 여러 IA 버전 중 비교 실험 (A/B 트리 테스팅)
📌 Tree Testing의 실제
"여성 겨울 코트 50% 할인 상품을 찾아주세요"
결과:
∙ 40%는 여성의류 > 아우터로 감
∙ 60%는 SALE > 시즌오프로 감
∙ 정답은? 둘 다에 있어야 함!
💡 Tree Testing 실무 가이드
❌ 이렇게 하지 마세요
∙ "상품 정보를 찾으세요" → 너무 모호함
∙ "여성의류 > 아우터에서 코트를 찾으세요" → 답을 알려줌
✅ 이렇게 하세요
∙ "딸아이 겨울 외투를 사려고 합니다. 어디서 찾을 수 있을까요?"
∙ 실제 상황을 구체적으로 설명
∙ 메뉴에 있는 단어를 그대로 쓰지 않음
🔥 Tree Testing 고급 전략
Context가 있는 태스크
∙ ❌ "환불 정책을 찾으세요"
∙ ✅ "해외에서 구매한 제품이 불량이라 환불받고 싶은데, 가능한지 확인하고 싶습니다"
Visual Hierarchy: 중요한 걸 중요하게 보이게
1. SCALE (크기)
∙ 계층적 크기 조절은 가장 중요한 정보에 가장 큰 크기를 부여
∙ 덜 중요한 정보는 상대적으로 축소되어 시각적 순서를 명확히 함
∙ “큰 것부터 본다”는 인간의 인지 특성을 활용한 전략
2. CONTRAST (대비)
∙ 밝고 어두운 색, 단순한 도형과 복잡한 형태 간의 차이는 시각적 우선순위를 만듦
∙ 디자인 내에 대비가 클수록 먼저 인식되고 더 오래 기억
∙ HEADLINE은 복잡한 형태로 대비되어 눈에 띔
3. DIRECTION (방향)
∙ 일반적인 정렬 방식(가로, 수평)에서 벗어난 세로 또는 대각선 정렬은
∙ 사용자 시선을 끌고 정보 흐름을 명확히 만듦
∙ 방향성을 주면 사용자의 탐색 흐름이 설계된 대로 유도
4. POSITION (위치)
∙ 페이지 내 위치만으로도 자동적인 위계가 생성
∙ 일반적으로 좌→우, 상→하로 읽는 환경에서
∙ 좌상단이 가장 먼저 인식되고, 우하단이 가장 늦게 인식됨
∙ 중요한 정보는 페이지의 상단 왼쪽에 두는 것이 효과적
Footer Design의 기초: 페이지 하단의 기회
Footer = 웹페이지의 바닥글 영역
∙ 모든 페이지 하단에 공통으로 들어가는 영역
∙ 보통 회색 배경으로 구분
∙ 회사 정보, 링크 모음, 법적 고지 등 포함
왜 Footer가 중요한가?
∙ 일반적인 생각: "어차피 아무도 안 봐"
∙ 실제 데이터: 방문자의 25%가 Footer까지 스크롤
∙ 더 중요한 사실: Footer를 보는 사용자는 "적극적 사용자"
Footer 도달 사용자의 3가지 유형
1. Mission-Driven (목적형)
∙ 특정 정보를 찾아서 도달
∙ 주로 찾는 것: 회사 정보, 채용, Contact
∙ 설계 포인트: 명확한 카테고리와 레이블
2. Exhaustive Explorer (탐험형)
∙ 페이지 전체를 훑어보는 성향
∙ 추가 콘텐츠나 기능 기대
∙ 설계 포인트: 인기 콘텐츠, 추천 링크
3. Disappointed Searcher (실망형)
∙ 원하는 것을 못 찾아서 도달
∙ 마지막 희망으로 Footer 확인
∙ 설계 포인트: 검색, 사이트맵, 도움말
Footer의 3가지 핵심 역할
1. 🏢 신뢰성 구축 (Trust Building)
∙ 회사 정보로 신뢰감 제공
∙ 사업자 등록번호, 대표자명, 주소, 고객센터 연락처, 인증 마크, 수상 내역
∙ 사용자 심리: "이 회사가 실제로 존재하는구나"
2. 🧭 보조 네비게이션 (Secondary Navigation)
∙ 메인 메뉴에 넣기 애매한 것들의 집합소
∙ 회사 소개, 채용 정보, 이용약관, 개인정보처리방침, 자주 묻는 질문, 고객센터, 파트너십, 제휴 문의
∙ 사용자 심리: "여기서는 뭐든 찾을 수 있겠네"
3. 🎯 전환 기회 (Conversion Opportunity)
∙ 마지막 설득의 기회
∙ 뉴스레터 구독, 앱 다운로드 유도, 소셜 미디어 팔로우, 프로모션 안내
∙ 사용자 심리: "더 볼 게 있나?"
그룹 과제
-
자신이 사용하는 앱 중에서 탐색이 어려워 사용에 불편함을 겪는 앱을 각자 공유합니다. 👉🏻 Starbucks 사이렌오더
-
이 중 IA를 개선하고자 하는 앱을 하나 선택해 해당 앱의 IA를 함께 정리해 봅니다.
-
정리한 IA를 바탕으로 주요 기능의 목록을 정리합니다.
-
이 목록을 새로운 카테고리로 묶는 것을 목표로 각자가 카드 소팅을 진행합니다.
-
서로 진행한 카드소팅을 비교하고, 어떤 목적으로 정보들을 묶는 것이 최선인지에 대한 결과를 정리합니다.
