← 이전: Week 4 목차 다음: Week 12 →

Week 11: Conceptual Design

📌 학습 목표

📚 주요 내용

1. User Journey Map (사용자 여정 맵)

1.1 정의 및 목적

정의:

목적:

1.2 구성 요소

필수 요소:

1.3 작성 예시: 온라인 쇼핑몰

Persona: 직장인 김민지 (32세, 의류 쇼핑 선호)

단계 Touchpoints Actions Thoughts Emotions Pain Points Opportunities
인지 SNS 광고 광고 클릭 “신상품이 나왔네?” 호기심 광고가 모호함 명확한 가치 전달
탐색 모바일 웹 상품 검색, 필터링 “내 스타일이 있을까?” 기대감 로딩이 느림, 필터 부족 검색 성능 개선, AI 추천
비교 상품 상세 페이지 리뷰 읽기, 비교 “사이즈가 맞을까?” 불안감 사이즈 정보 불충분 가상 피팅, 상세 사이즈표
구매 장바구니, 결제 쿠폰 적용, 결제 “배송은 빨라야 할텐데” 기대 + 조급함 결제 단계가 복잡함 원클릭 결제, 명확한 배송 안내
수령 배송 알림, 상품 개봉 택배 수령, 착용 “맘에 들까?” 설렘 + 불안 포장 상태 불량 프리미엄 포장, 언박싱 경험
사후 앱 푸시, 이메일 리뷰 작성, 재방문 “다음에 또 살까?” 만족 / 실망 리뷰 작성 동기 부족 리뷰 리워드, 개인화 추천

2. Persona (페르소나)

2.1 정의 및 중요성

정의:

중요성:

2.2 Persona 구성 요소

기본 정보:

인구통계 (Demographics):

심리통계 (Psychographics):

행동 패턴 (Behaviors):

Pain Points & Needs:

2.3 Persona 작성 예시

Persona 1: 효율형 프로젝트 매니저 “이지훈”

기본 정보:

특징:

일상:

목표:

Pain Points:

선호 기능:

2.4 Multiple Personas

Primary Persona: 핵심 타겟 (가장 많은 비중) Secondary Persona: 부차적 타겟 Anti-Persona: 서비스 대상이 아닌 사용자 (예: 무료만 사용하려는 사용자)

3. 와이어프레임 (Wireframe)

3.1 정의 및 Fidelity Level

정의:

Fidelity 수준:

3.2 와이어프레임 설계 원칙

Visual Hierarchy (시각적 위계):

Consistency (일관성):

Clarity (명확성):

3.3 주요 화면 와이어프레임 예시

3.3.1 Home 화면

구성:

레이아웃:

+--------------------------------------------+
| [로고]  [검색바]          [로그인][회원가입] |
+--------------------------------------------+
|                                            |
|        [메인 배너 이미지]                   |
|        "새로운 컬렉션"                      |
|        [지금 쇼핑하기 버튼]                 |
|                                            |
+--------------------------------------------+
| 추천 상품                                   |
| [상품1] [상품2] [상품3] [상품4]             |
+--------------------------------------------+
| Footer: 회사소개 | 이용약관 | 고객센터       |
+--------------------------------------------+
3.3.2 Search Results (검색 결과)

구성:

레이아웃:

+--------------------------------------------------+
| Breadcrumb: Home > 검색 결과 "청바지"             |
+--------------------------------------------------+
| Filter Panel (Left)     | Product Grid (Right)   |
|                         |                         |
| 카테고리                | Sort: [인기순 ▼]         |
| [ ] 상의 (120)          |                         |
| [x] 하의 (85)           | [상품1] [상품2] [상품3]  |
|                         | [상품4] [상품5] [상품6]  |
| 가격                    |                         |
| [슬라이더] 0-100,000원   | [더 보기 버튼]           |
+--------------------------------------------------+
3.3.3 Product Detail (상품 상세)

구성:

레이아웃:

+--------------------------------------------------+
| Image Gallery (Left)    | Product Info (Right)    |
|                         |                         |
| [메인 이미지]            | 브랜드: ABC             |
|                         | 상품명: 데님 슬림핏 청바지 |
| [썸네일1][썸네일2]       | 가격: ₩79,000           |
| [썸네일3][썸네일4]       | 할인: 20% (₩63,200)     |
|                         | 평점: ★★★★☆ (4.2)      |
|                         |                         |
|                         | [장바구니 담기] [바로 구매] |
+--------------------------------------------------+
| Tabs: [상세정보] [리뷰] [Q&A] [배송/반품]         |
+--------------------------------------------------+
3.3.4 Cart (장바구니)

구성:

3.3.5 Checkout (결제)

구성:

4. 접근성 체크리스트 (WCAG 2.1)

4.1 WCAG 개요

WCAG (Web Content Accessibility Guidelines):

4대 원칙 (POUR):

4.2 주요 체크리스트

Perceivable (인식 가능):

Operable (조작 가능):

Understandable (이해 가능):

Robust (견고성):

4.3 도구 및 테스트

자동 테스트 도구:

수동 테스트:

5. 반응형 디자인 (Responsive Design)

5.1 Breakpoints (브레이크포인트)

일반적인 Breakpoints:

설정 예시 (CSS):

/* Mobile First */
.container {
  padding: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

5.2 반응형 레이아웃 전략

Fluid Grid:

Flexible Images:

Media Queries:

Mobile-First Approach:

5.3 반응형 패턴

Column Drop:

Layout Shifter:

Tiny Tweaks:

6. 컴포넌트 라이브러리

6.1 컴포넌트 분류 (Atomic Design)

Atoms (원자):

Molecules (분자):

Organisms (유기체):

Templates & Pages:

6.2 컴포넌트 네이밍 규칙

BEM (Block Element Modifier):

<div class="card">
  <h3 class="card__title">Title</h3>
  <p class="card__description">Description</p>
  <button class="card__button card__button--primary">CTA</button>
</div>

6.3 컴포넌트 문서화

Storybook 활용:

7. 스타일 토큰 (Design Tokens)

7.1 Color Palette

Primary Colors:

Neutral Colors:

Semantic Colors:

7.2 Spacing (여백)

8px Grid System:

7.3 Typography

Font Family:

Font Sizes:

Font Weights:

Line Heights:

7.4 Border Radius

8. 프로토타입 링크 전략

8.1 Figma Prototype 설정

Interaction:

Transition:

Starting Frame:

8.2 유저 테스트 시나리오

태스크 예시:

  1. “홈페이지에서 ‘여성 의류’ 카테고리로 이동하세요.”
  2. “검색 기능을 사용하여 ‘청바지’를 검색하세요.”
  3. “마음에 드는 상품을 장바구니에 담으세요.”
  4. “결제 과정을 완료하세요.”

관찰 포인트:

🛠️ 실습 과제

과제 1: User Journey Map 작성

과제 2: Persona 정의

과제 3: 와이어프레임 설계

과제 4: 접근성 체크

과제 5: 스타일 토큰 정의

📖 참고 자료

🔄 복습 체크리스트

📝 다음 주 예습

Week 12: Detailed Design

← 이전: Week 4 목차 다음: Week 12 →

Last Updated: 2026-02-14