Skip to main content Link Menu Expand (external link) Document Search Copy Copied
DonsNote

제 4 강 - 정보 구조와 탐색 설계

사전 질문

  1. 여러분이 자주 사용하는 서비스에서 메뉴나 기능의 위치가 ‘왜 여기 있지?’라고 의아했던 경험이 있나요? 그렇게 배치된 이유는 무엇일까요?
    • 우리은행 오늘의 운세 - 혜택 > 운세 > 오늘의 운세 로 들어야 함 텝스가 많이 깊음
    • 핵심 기능이 아닌 부가 서비스라서 깊은 계층에 배치
    • 사용 빈도가 낮다고 판단되는 기능은 우선순위가 낮음
  2. 사용자가 원하는 기능이나 정보를 쉽게 찾도록 하려면, 무엇을 기준으로 메뉴와 콘텐츠를 구성해야 할까요?
    • 사용 빈도에 따른 배치(뎁스 1, 2 단계에 배치)
    • 사용자가 어떻게 생각하고, 무엇을 자주 사용하며, 어떤 상황에서 필요로 하는지를 중심으로 구성
    • 사용자의 멘탈 모델과 일치하는 분류 체계
    • 명확하고 일관된 레이블링

정보 구조와 탐색 설계

정보 구조 - IA (Information Architecture)

정보 구조(IA)는 정보를 조직하고, 레이블을 붙이고, 탐색 가능하게 만드는 구조적 설계를 의미합니다. 사용자가 필요한 정보를 쉽고 빠르게 찾을 수 있도록 돕는 것이 핵심 목표입니다.

IA의 역할:

  • 복잡한 정보를 이해하기 쉽게 구조화
  • 사용자가 원하는 정보를 찾는 경로 최적화
  • 일관되고 예측 가능한 탐색 경험 제공
  • 비즈니스 목표와 사용자 니즈 사이의 균형

좋은 IA의 특징:

  • 직관적: 사용자가 생각하는 방식과 일치
  • 확장 가능: 새로운 콘텐츠 추가 시에도 구조 유지
  • 유연함: 다양한 사용자 시나리오 지원
  • 일관성: 전체 서비스에서 동일한 패턴 유지

정보 냄새 - Information Scent

정보 냄새는 사용자가 원하는 정보를 찾기 위해 따라가는 단서(cue)를 의미합니다. 마치 동물이 냄새를 맡고 먹이를 찾듯이, 사용자는 링크 텍스트, 버튼 레이블, 메뉴 이름 등의 단서를 보고 클릭할지 말지를 판단합니다.

정보 냄새의 원리:

  • 강한 냄새: 명확한 단서, 사용자가 확신을 가지고 클릭
    • 예: “계좌 이체하기”, “비밀번호 변경”
  • 약한 냄새: 모호한 단서, 사용자가 망설이거나 이탈
    • 예: “더 보기”, “기타 서비스”

정보 냄새를 강화하는 방법:

  1. 구체적인 레이블 사용
    • ❌ “더 보기”
    • ✅ “전체 상품 목록 보기”
  2. 사용자 언어 사용
    • ❌ “금융상품가입”
    • ✅ “적금 만들기”
  3. 맥락 제공
    • 아이콘 + 텍스트 조합
    • 간단한 설명 추가
    • 시각적 계층 구조
  4. 일관성 유지
    • 같은 행동은 같은 레이블 사용
    • 패턴을 학습하면 예측 가능

실무 예시:

약한 정보 냄새:
홈 > 서비스 > 더보기 > 기능 (사용자는 어디로 가는지 모름)

강한 정보 냄새:
홈 > 송금 > 계좌이체 (사용자는 정확히 어디로 가는지 알 수 있음)

F-패턴

F-패턴은 사용자가 웹 페이지를 읽을 때 보이는 시선 추적 패턴입니다. Nielsen Norman Group의 아이트래킹 연구에서 발견되었습니다.

F-패턴의 특징:

  1. 첫 번째 수평 이동: 페이지 상단을 가로로 읽음 (F의 윗줄)
  2. 두 번째 수평 이동: 조금 아래에서 다시 가로로 읽지만 더 짧게 (F의 중간줄)
  3. 수직 이동: 왼쪽을 따라 수직으로 스캔 (F의 세로줄)

F-패턴이 생기는 이유:

  • 사용자는 전체를 읽지 않고 스캔함
  • 왼쪽에서 오른쪽으로 읽는 문화권의 읽기 습관
  • 정보 과부하로 인한 효율적 읽기 전략
  • 시간 절약을 위한 선택적 읽기

F-패턴을 고려한 디자인:

  1. 중요한 정보는 상단과 왼쪽에 배치
    [로고] [중요 메뉴 1] [중요 메뉴 2] [중요 메뉴 3]
─────────────────────────────────────────────
중요한 헤드라인이나 핵심 메시지를 첫 줄에
   
부가 정보는 조금 아래에, 하지만 역시 왼쪽에
   
상세 내용...
  2. 정보의 위계 구조를 명확하게
    • 헤딩을 눈에 띄게
    • 중요 키워드를 앞에 배치
    • 불릿 포인트나 리스트 활용
  3. 텍스트 벽(Text Wall) 피하기
    • 긴 문단을 짧게 나누기
    • 이미지나 여백으로 시각적 쉼표 제공
    • 스캔하기 쉬운 구조

F-패턴의 한계:

  • 모든 페이지에 적용되지는 않음
  • 모바일에서는 다른 패턴 (Layer Cake Pattern 등)
  • 잘 디자인된 페이지는 F-패턴을 덜 따름 (사용자가 전체를 더 읽음)

IA의 4대 구성 요소

1. 조직 체계 (Organization Schemes)

정보를 어떻게 분류하고 그룹화할 것인가를 결정하는 체계입니다.

정확한 조직 체계 (Exact Organization):

  • 알파벳순: A-Z 정렬 (사전, 연락처)
  • 시간순: 최신순, 날짜별 (뉴스, 블로그)
  • 지리적: 위치 기반 (지도, 지역별 매장)
  • 형식별: 파일 타입 (PDF, 이미지, 동영상)

모호한 조직 체계 (Ambiguous Organization):

  • 주제별: 관련 있는 내용끼리 (뉴스 카테고리: 정치, 경제, 사회)
  • 작업별: 사용자가 하려는 행동 (송금하기, 조회하기, 신청하기)
  • 사용자별: 대상 그룹 (개인, 기업, 청년)
  • 은유적: 현실 세계의 은유 (쇼핑 카트, 폴더)

혼합 사용: 대부분의 서비스는 여러 조직 체계를 혼합해 사용합니다.

은행 앱 예시:
- 주제별: 계좌, 카드, 대출
- 작업별: 송금하기, 조회하기
- 시간별: 최근 거래내역
- 사용자별: 기업뱅킹

2. 레이블링 체계 (Labeling Systems)

정보나 기능에 붙이는 이름을 정의하는 체계입니다.

좋은 레이블링의 원칙:

  • 명확성: 사용자가 즉시 이해할 수 있는 단어
  • 일관성: 같은 의미는 같은 단어 사용
  • 간결성: 불필요한 단어 제거
  • 사용자 언어: 전문 용어보다 일상 용어

레이블링 유형:

  1. 텍스트 레이블
    ❌ 금융상품가입관리
✅ 적금 만들기
   
❌ 고객지원센터
✅ 도움말
  2. 아이콘 레이블
    • 아이콘만으로는 부족, 텍스트와 함께 사용
    • 보편적인 아이콘 사용 (집=홈, 돋보기=검색)
  3. 맥락적 레이블
    • 링크 주변의 문맥도 중요
    • “여기를 클릭”보다 “계좌이체 방법 보기”

레이블링 시 피해야 할 것:

  • 마케팅 용어: “고객 감동 솔루션”
  • 내부 용어: “CRM 시스템”
  • 모호한 표현: “더보기”, “기타”
  • 긴 문장: “고객님의 소중한 의견을 들려주세요”

3. 네비게이션 체계 (Navigation Systems)

사용자가 정보 사이를 이동하는 방법을 정의하는 체계입니다.

글로벌 네비게이션 (Global Navigation):

  • 모든 페이지에서 접근 가능
  • 주요 섹션으로 이동
  • 예: 상단 메뉴 바, 햄버거 메뉴

로컬 네비게이션 (Local Navigation):

  • 현재 섹션 내에서만 이동
  • 하위 카테고리나 관련 페이지
  • 예: 사이드바, 탭

컨텍스트 네비게이션 (Contextual Navigation):

  • 현재 콘텐츠와 관련된 링크
  • 예: “관련 상품”, “다음 글 보기”

보조 네비게이션 (Supplementary Navigation):

  • 사이트맵
  • 인덱스
  • 가이드

네비게이션 패턴:

  1. 브레드크럼 (Breadcrumb)
    홈 > 전자제품 > 노트북 > 게이밍 노트북
    • 현재 위치 표시
    • 상위 단계로 쉽게 이동
  2. 탭 (Tabs)
    [홈] [계좌] [카드] [대출] [더보기]
    • 동등한 레벨의 섹션 전환
    • 모바일에서 효과적
  3. 메가 메뉴 (Mega Menu)
    • 드롭다운에 많은 옵션 표시
    • 대형 이커머스에 적합
  4. 드로어 (Drawer)
    • 측면에서 슬라이드
    • 모바일 앱에서 흔함

4. 검색 체계 (Search Systems)

사용자가 능동적으로 정보를 찾을 수 있게 하는 체계입니다.

검색의 역할:

  • 네비게이션의 보완
  • 구체적인 정보를 빠르게 찾기
  • 다양한 경로 제공

검색 기능 구성 요소:

  1. 검색창 (Search Box)
    • 눈에 잘 띄는 위치
    • 충분한 입력 공간
    • 플레이스홀더로 힌트 제공
  2. 자동완성 (Autocomplete) ``` 입력: “계좌” 제안:
    • 계좌이체
    • 계좌번호 조회
    • 계좌 개설 ```
  3. 필터와 정렬
    • 검색 결과 좁히기
    • 관련도, 최신순, 가격순 등
  4. 검색 결과 페이지
    • 명확한 결과 표시
    • 결과가 없을 때 대안 제시
    • 관련 검색어 제안

검색 최적화:

  • 오타 허용 (fuzzy search)
  • 동의어 처리 (“휴대폰” = “핸드폰”)
  • 검색 이력 활용
  • 인기 검색어 제공

Card Sorting

카드 소팅은 사용자가 정보를 어떻게 분류하고 그룹화하는지 파악하는 UX 리서치 방법입니다. 사용자의 멘탈 모델을 이해하고 IA를 설계하는 데 활용됩니다.

카드 소팅의 유형:

  1. 개방형 카드 소팅 (Open Card Sorting)
    • 참가자가 그룹과 카테고리 이름을 자유롭게 정함
    • 새로운 IA 설계 시 사용
    • 사용자의 자연스러운 분류 방식 발견
  2. 폐쇄형 카드 소팅 (Closed Card Sorting)
    • 미리 정해진 카테고리에 카드를 분류
    • 기존 IA 검증 시 사용
    • 카테고리가 직관적인지 확인
  3. 하이브리드 카드 소팅
    • 기본 카테고리 제공 + 새 카테고리 추가 가능
    • 유연한 접근

카드 소팅의 목적:

  • 사용자가 어떻게 정보를 그룹화하는지 이해
  • 카테고리 이름이 적절한지 검증
  • 정보 구조의 문제점 발견
  • IA 설계의 근거 마련

진행 절차

1. 준비 단계

  1. 목표 설정
    • 무엇을 알고 싶은가?
    • 새 구조 설계 vs 기존 구조 검증
  2. 카드 만들기
    • 콘텐츠나 기능 항목을 카드로 만듦
    • 20~60개 정도가 적당
    • 명확하고 중립적인 용어 사용 ``` 예시 (은행 앱):
    • 계좌이체
    • 잔액조회
    • 거래내역
    • 카드발급
    • 대출신청
    • 환율조회
    • ATM 찾기
    • 비밀번호 변경 등등… ```
  3. 참가자 모집
    • 실제 사용자 또는 잠재 사용자
    • 15~30명 정도
    • 다양한 사용자 그룹 포함
  4. 도구 선택
    • 오프라인: 실제 카드와 포스트잇
    • 온라인: Optimal Workshop, Miro, UserZoom

2. 실행 단계

  1. 참가자에게 설명
    "여기 은행 앱의 여러 기능이 적힌 카드가 있습니다.
이 카드들을 여러분이 생각하기에 비슷한 것끼리 묶어주세요.
그리고 각 그룹에 적절한 이름을 붙여주세요."
  2. 자유롭게 분류하도록 함
    • 시간 제한 없음 (보통 20~40분)
    • 사고 발화(Think Aloud) 권장
    • 질문에 답하되 유도하지 않음
  3. 그룹 이름 짓기
    • 각 그룹에 대표 이름 부여
    • 참가자가 직접 이름 짓도록
  4. 기록
    • 어떤 카드를 어떤 그룹에 넣었는지
    • 참가자의 코멘트
    • 망설이거나 어려워한 카드

3. 분석 단계

  1. 유사도 매트릭스 (Similarity Matrix)
    • 카드 A와 B를 같은 그룹에 넣은 참가자 비율
    • 자주 함께 묶이는 카드 파악
  2. 덴드로그램 (Dendrogram)
    • 계층적 클러스터링 시각화
    • 카드 간 관계를 트리 구조로 표현
  3. 패턴 찾기
    • 대부분의 참가자가 동의하는 그룹
    • 의견이 갈리는 카드 (여러 그룹에 배치됨)
    • 자주 사용된 카테고리 이름
  4. 문제 카드 식별
    • 참가자들이 분류하기 어려워한 카드
    • 레이블이 모호하거나 중복되는 카드
    • 개선이 필요한 부분

4. 적용 단계

  1. IA 초안 작성
    • 분석 결과를 바탕으로 정보 구조 설계
    • 일반적인 패턴을 우선 적용
  2. 예외 사항 처리
    • 의견이 갈린 항목은 추가 연구
    • 비즈니스 요구사항과 균형
  3. 검증
    • 트리 테스팅으로 검증
    • 프로토타입 테스트

실무 팁:

  • 카드 수는 적당히: 너무 많으면 피로도 증가
  • 명확한 카드 이름: 사용자가 이해할 수 있는 언어
  • 다양한 참가자: 여러 사용자 그룹 포함
  • 반복적 진행: 한 번으로 끝나지 않음
  • 정량적 + 정성적: 숫자뿐 아니라 참가자 의견도 중요

온라인 도구 예시:

Optimal Workshop:
- 원격으로 여러 참가자 동시 진행
- 자동으로 유사도 매트릭스 생성
- 덴드로그램 시각화
- 결과 분석 리포트 제공

Tree Testing

트리 테스팅은 설계된 정보 구조(IA)가 실제로 직관적이고 사용하기 쉬운지 검증하는 방법입니다. 사용자에게 특정 과제를 주고, 텍스트 기반 메뉴 구조(트리)에서 정답을 찾을 수 있는지 테스트합니다.

트리 테스팅의 특징:

  • 시각적 디자인 제거: 순수하게 구조만 테스트
  • 정량적 데이터: 성공률, 소요 시간 측정
  • 실패 지점 파악: 어디서 잘못된 선택을 했는지 추적

카드 소팅 vs 트리 테스팅:

  • 카드 소팅: IA를 만들 때 (사용자가 어떻게 분류하는지 파악)
  • 트리 테스팅: IA를 검증할 때 (설계된 구조가 작동하는지 확인)

트리 테스팅의 목적:

  • 메뉴 구조가 직관적인지 확인
  • 사용자가 정보를 쉽게 찾을 수 있는지 검증
  • 문제가 있는 카테고리나 레이블 식별
  • 디자인 전에 구조 최적화

진행 절차

1. 준비 단계

  1. 정보 구조 준비
    • 텍스트 기반 메뉴 트리 작성
    • 실제 서비스의 네비게이션 구조 반영
      예시 (은행 앱):
├── 계좌
│   ├── 계좌 조회
│   ├── 계좌 이체
│   └── 거래 내역
├── 카드
│   ├── 카드 신청
│   ├── 카드 이용 내역
│   └── 카드 혜택
├── 대출
│   ├── 대출 상담
│   ├── 대출 신청
│   └── 내 대출 조회
└── 고객지원
  ├── FAQ
  ├── 1:1 문의
  └── 영업점 찾기
  2. 과제(Task) 만들기
    • 실제 사용자 시나리오 기반
    • 명확하고 구체적인 질문
    • 8~12개 정도의 과제 ``` 과제 예시:
    • “친구에게 10만원을 송금하고 싶습니다. 어디서 하면 될까요?”
    • “지난달 카드 사용 내역을 확인하려면?”
    • “신용대출을 받고 싶은데, 먼저 상담을 받고 싶습니다.”
    • “가까운 영업점을 찾으려면?” ```
  3. 난이도 조절
    • 쉬운 과제 + 중간 과제 + 어려운 과제 혼합
    • 모든 주요 섹션 포함
    • 하나의 명확한 정답이 있어야 함
  4. 참가자 모집
    • 실제 사용자 또는 잠재 사용자
    • 최소 30~50명 (통계적 유의성)
    • 원격 테스트 가능
  5. 도구 선택
    • Optimal Workshop (Treejack)
    • UserZoom
    • 또는 자체 제작 도구

2. 실행 단계

  1. 참가자에게 설명
    "화면에 메뉴 구조가 나타날 것입니다.
주어진 과제를 수행하기 위해 어떤 메뉴를 선택할지
클릭해 나가주세요.
디자인은 없고 텍스트만 있습니다."
  2. 과제 제시
    • 한 번에 하나의 과제만 표시
    • 참가자는 트리를 탐색하며 답을 찾음
    • 클릭 경로가 모두 기록됨
  3. 참가자 행동
    과제: "친구에게 송금하려면?"
   
참가자 1:
계좌 → 계좌 이체 ✅ (성공)
   
참가자 2:
계좌 → 계좌 조회 → 뒤로 → 계좌 이체 ✅ (성공, 우회)
   
참가자 3:
카드 → 카드 이용 내역 ❌ (실패, 포기)
  4. 데이터 수집
    • 성공/실패 여부
    • 선택한 경로
    • 소요 시간
    • 직접성(Directness): 우회 없이 바로 찾았는지

3. 분석 단계

  1. 핵심 지표 계산

    a) 성공률 (Success Rate)

    성공률 = (성공한 참가자 수 / 전체 참가자 수) × 100%
   
예시:
과제 1: 45/50 = 90% ✅ 좋음
과제 2: 30/50 = 60% ⚠️ 개선 필요
과제 3: 15/50 = 30% ❌ 심각한 문제

    b) 직접성 (Directness)

    직접성 = (직접 성공한 참가자 / 전체 성공 참가자) × 100%
   
- 직접 성공: 한 번에 올바른 경로로 찾음
- 간접 성공: 우회하거나 뒤로가기 사용
   
예시:
성공 45명 중 직접 성공 30명
직접성 = 30/45 = 67%

    c) 소요 시간

    평균 시간, 중앙값 시간 계산
빠르게 찾는 = 구조가 직관적
오래 걸림 = 헤매거나 어려움
  2. 실패 경로 분석
    • 참가자들이 어디서 잘못된 선택을 했는지
    • 혼동을 일으킨 메뉴 레이블
    • 자주 선택된 오답 ``` 과제: “대출 상담을 받으려면?”

    정답: 대출 > 대출 상담

    흔한 실패 경로:

    • 고객지원 > 1:1 문의 (35%)
    • 대출 > 대출 신청 (20%)
    • 고객지원 > FAQ (15%)

    → “상담”이라는 단어가 “고객지원”과 연관될 수 있음 → “대출 상담”과 “1:1 문의”의 차이가 불명확 ```

  3. 문제 카테고리 식별
    • 성공률이 낮은 과제
    • 소요 시간이 긴 과제
    • 많은 우회가 발생한 과제
  4. 피아 트리맵 (Pietree Map)
    • 시각화 도구로, 각 메뉴에서:
    • 첫 클릭 분포
    • 정답 vs 오답
    • 계속비율
    • 참가자 흐름을 한눈에 볼 수 있음

4. 개선 및 반복 단계

  1. 문제 진단

    • 레이블 문제
       "1:1 문의"와 "대출 상담"의 차이 불명확
 → 레이블 수정: "1:1 문의(일반)" vs "대출 상담 신청"
    • 구조 문제
       기능이 잘못된 카테고리에 있음
 → 위치 변경
    • 누락 문제
       참가자가 예상한 카테고리가 없음
 → 새 카테고리 추가
    • 중복 문제
       같은 기능이 여러 곳에 있어 혼란
 → 통합하거나 명확히 구분
  2. 개선안 작성
    • 분석 결과 기반으로 IA 수정
    • 우선순위 정하기 (성공률이 낮은 것부터)
  3. 재테스트
    • 개선된 구조로 다시 트리 테스팅
    • 비교: 개선 전 vs 개선 후
    • 성공률이 올라갔는지 확인
  4. 반복 개선
    • 목표 성공률 도달까지 반복
    • 보통 80% 이상을 목표

실무 팁:

과제 작성 시:

  • ❌ “계좌 이체는 어디 있나요?” (메뉴 이름 그대로)
  • ✅ “친구에게 돈을 보내려면?” (사용자 언어)

해석 시 주의:

  • 성공률만으로 판단하지 말 것
  • 직접성, 소요 시간, 참가자 피드백 종합
  • 맥락 고려: 어려운 과제는 당연히 성공률이 낮음

개선 우선순위:

  1. 높은 빈도 + 낮은 성공률 → 최우선
  2. 높은 빈도 + 높은 성공률 → 유지
  3. 낮은 빈도 + 낮은 성공률 → 중간 우선순위
  4. 낮은 빈도 + 높은 성공률 → 낮은 우선순위

도구 활용: Optimal Workshop의 Treejack:

온라인으로 대규모 참가자 동시 테스트 자동으로 성공률, 직접성, 시간 계산 Pietree map으로 시각화 경로 분석 자동화 통계 리포트 생성

트리 테스팅의 한계:

  • 시각적 디자인, 아이콘 효과 미반영
  • 실제 사용 맥락과 다를 수 있음
  • 학습 효과 미반영 (처음 사용하는 관점)
  • 검색 기능 사용 불가

푸터(Footer)는 웹사이트나 앱의 하단에 위치한 영역으로, 종종 간과되지만 중요한 역할을 합니다.

푸터의 역할:

  1. 보조 네비게이션
    • 주요 네비게이션에서 누락된 링크
    • 사이트맵 역할
    • 사용자가 막다른 곳에서 빠져나갈 출구
  2. 신뢰도 구축
    • 회사 정보
    • 연락처
    • 소셜 미디어 링크
    • 인증/보안 마크
  3. 법적/정책 정보
    • 이용약관
    • 개인정보처리방침
    • 저작권 정보
  4. 추가 기능
    • 뉴스레터 구독
    • 언어 선택
    • 앱 다운로드 링크

푸터에 포함되는 요소:

1. 기본 구성 (대부분의 사이트)

[회사 로고] | [섹션 1: 서비스] | [섹션 2: 지원] | [섹션 3: 회사] | [섹션 4: SNS] | |——|——–|———–|———-| | 제품 소개 | 고객센터 | 회사 소개 | Facebook | | 가격 | FAQ | 채용 | Instagram | | 기능 | 이용가이드 | 블로그 | Twitter |

[하단] 이용약관 | 개인정보처리방침 | 쿠키 정책 © 2024 Company Name. All rights reserved.

2. 미니멀 푸터 (모바일 앱) [간단한 링크] 도움말 | 설정 | 이용약관 | 개인정보처리방침 © 2024 Company

3. 확장형 푸터 (대형 이커머스) [다단 구성] 고객센터 | 제품 카테고리 | 회사 정보 | 마케팅 | 소셜 미디어 └ 세부 링크들이 여러 줄로 확장됨

푸터 디자인 원칙:

  1. 명확한 계층 구조
    • 중요한 링크는 위쪽이나 왼쪽
    • 시각적 그룹핑
  2. 충분한 여백
    • 답답하지 않게
    • 클릭 가능한 영역 확보
  3. 가독성
    • 작은 글씨지만 읽을 수 있어야 함
    • 적절한 대비
  4. 일관성
    • 전체 페이지에서 동일한 푸터
    • 브랜드 톤 유지
  5. 반응형
    • 모바일에서는 축약형
    • 아코디언 메뉴 활용

푸터 vs 헤더:

구분헤더 (Header)푸터 (Footer)
위치상단하단
우선순위높음낮음
콘텐츠핵심 네비게이션보조 네비게이션
가시성항상 보임 (sticky)스크롤해야 보임
목적빠른 접근완전한 정보

좋은 푸터 예시:

Apple:

  • 깔끔하고 미니멀
  • 제품 카테고리별로 정리
  • 많은 링크를 효율적으로 배치

Amazon:

  • 확장형 푸터
  • 고객센터, 판매자 지원, 회사 정보 등 분리
  • 다국어/통화 선택 옵션

Medium:

  • 극도로 간단
  • 핵심 링크만 포함
  • 브랜드와 일관된 미니멀리즘

모바일 앱의 푸터:

모바일 앱에서는 전통적인 푸터 대신: 하단 탭 바 (Bottom Navigation Bar) 주요 섹션으로 빠른 전환 아이콘 + 레이블

설정 내 정보 이용약관, 개인정보처리방침 등은 설정 메뉴 안에 별도 페이지로

햄버거 메뉴 보조 링크들은 사이드 메뉴에

푸터 디자인 체크리스트:

  • 법적으로 필수인 정보 포함 (이용약관, 개인정보처리방침)
  • 연락처 정보 명확히 제공
  • 소셜 미디어 링크 작동 확인
  • 모든 링크가 올바른 페이지로 연결
  • 모바일에서 터치하기 쉬운 크기
  • 읽기 쉬운 폰트 크기와 대비
  • 브랜드 아이덴티티와 일관성
  • 정보 과부하 피하기

실무 팁:

  1. 사용자 데이터 확인
    • 푸터 링크 클릭률 분석
    • 잘 안 쓰이는 링크는 제거
  2. A/B 테스트
    • 여러 푸터 구조 테스트
    • 전환율, 이탈률 비교
  3. 접근성
    • 키보드 네비게이션 가능
    • 스크린 리더 호환
  4. 로딩 최적화
    • 푸터는 lazy loading 적용 가능
    • 성능에 영향 최소화

과제

연구 과제

  1. 자주 쓰는 앱 하나를 열고, 전체 메뉴 구조를 있는 그대로 파악해 보십시오. 이 구조가 어떤 기준으로 분류되어 있는지 설명할 수 있습니까? 설명하려 할 때 막히는 부분이 있다면 그 이유는 무엇일까요?
  2. 그 앱에서 특정 기능을 하나 골라, 처음 쓰는 사용자가 그 기능을 찾아가는 과정을 단계별로 따라가 보십시오. 각 단계에서 “다음에 어디를 눌러야 하는지”가 명확합니까? 명확하지 않다면 무엇이 부족한 걸까요?
  3. 그 문제를 개선한다면 어떻게 하겠습니까? 개선안을 만들어 본 뒤, 그 개선이 다른 사용자에게도 더 나을 거라고 확신할 수 있는 근거는 무엇입니까?

추가 연구 과제

  1. 잘 만들어진 앱(서비스)를 선택하여 구조를 파악(분해)해 봅니다.

실전 과제

  1. 자신이 사용하는 앱 중에서 탐색이 어려워 사용에 불편함을 겪는 서비스를 하나 선택합니다.
  2. 이 중 IA를 개선하고자 하는 앱을 하나 선택해 해당 앱의 IA를 정리해 봅니다.
  3. 정리한 IA를 바탕으로 주요 기능의 목록을 정리합니다.
  4. 이 목록을 새로운 카테고리로 묶는 것을 목표로 각자가 카드 소팅을 진행합니다.
  5. 결과를 바탕으로 어떤 목적으로 정보들을 묶는 것이 최선인지 개선된 IA를 설계해봅니다.

참고 자료

학습 자료 및 출처

서적

  1. “Don’t Make Me Think” - Steve Krug
    • 웹 사용성의 고전
    • IA와 네비게이션의 기본 원칙
    • 실무 중심의 실용적인 조언
    • Amazon 링크
  2. “Information Architecture: For the Web and Beyond” - Louis Rosenfeld, Peter Morville, Jorge Arango
    • IA의 바이블
    • 조직 체계, 레이블링, 네비게이션, 검색을 심도 있게 다룸
    • 4판 (2015)이 최신
    • O’Reilly
  3. “The Elements of User Experience” - Jesse James Garrett
    • UX의 5단계 모델
    • IA가 전체 UX에서 차지하는 위치
    • 시각적으로 쉽게 설명
    • New Riders
  4. “A Practical Guide to Information Architecture” - Donna Spencer
    • 실무자를 위한 실용 가이드
    • 카드 소팅, 트리 테스팅 등 방법론 상세
    • UX Mastery
  5. “Designing Web Navigation” - James Kalbach
    • 네비게이션 시스템 전문서
    • 다양한 패턴과 실제 사례
    • O’Reilly

관련 강의 및 코스

  1. Nielsen Norman Group (NN/g)
  2. Interaction Design Foundation (IDF)
  3. Coursera - University of Michigan
    • “User Experience Research and Design Specialization”
    • IA를 포함한 종합 UX 과정
    • Coursera 링크
  4. LinkedIn Learning
    • “UX Foundations: Information Architecture”
    • Chris Nodder 강의
    • 실무 중심의 짧은 코스
  5. Udemy
    • “Complete Web Design: from Figma to Webflow to Freelancing”
    • IA와 디자인을 통합한 실전 과정

실무 사례 참고

  1. Nielsen Norman Group 아티클
  2. Boxes and Arrows
  3. UX Collective (Medium)
  4. Smashing Magazine
  5. A List Apart

Youtube 채널

  1. Nielsen Norman Group
    • NN/g YouTube Channel
    • IA, 사용성, UX 리서치 관련 영상
    • 전문가 인터뷰와 케이스 스터디
    • 추천 영상:
      • “Information Scent: How Users Decide Where to Go Next”
      • “Card Sorting: Designing Usable Categories”
  2. The Futur
  3. Google Design
  4. DesignCourse
  5. Flux (한국어)
    • Flux YouTube
    • 한국 UX 커뮤니티
    • IA 관련 세미나 영상

커뮤니티

  1. UX Korea
  2. UXPA Korea (사용자경험전문가협회)
  3. r/userexperience (Reddit)
  4. UX Stack Exchange
  5. Information Architecture Institute
  6. Slack 커뮤니티
    • UX Korea Slack
    • Designer Hangout
    • IA 채널에서 실시간 토론

도구 및 프로토타이핑

  1. 카드 소팅 & 트리 테스팅
  2. 사이트맵 & IA 다이어그램
  3. 프로토타이핑