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

Week 13: UI/UX Design & Implementation

📌 학습 목표

📚 주요 내용

1. UI/UX 디자인 목표 및 원칙

1.1 디자인 목표

사용자 중심 목표:

비즈니스 목표:

1.2 주요 디자인 원칙

Fitts’s Law:

Hick’s Law:

Miller’s Law:

2. 와이어프레임 주요 화면 상세

2.1 Home 화면

구성 요소:

+--------------------------------------------------+
| Header                                            |
| [로고]  [검색바]         [장바구니] [로그인]      |
+--------------------------------------------------+
| Navigation Bar                                   |
| [카테고리1] [카테고리2] [카테고리3] [세일]        |
+--------------------------------------------------+
| Hero Banner                                      |
| [이미지] "신상품 출시"                            |
| [CTA: 지금 쇼핑하기]                              |
+--------------------------------------------------+
| Featured Products                                |
| [상품1] [상품2] [상품3] [상품4]                   |
+--------------------------------------------------+
| Promotion Section                                |
| "특별 할인 이벤트" [배너]                         |
+--------------------------------------------------+
| Footer                                           |
| 회사소개 | 이용약관 | 개인정보처리방침 | 고객센터  |
| SNS 아이콘                                        |
+--------------------------------------------------+

인터랙션:

2.2 Search Results (검색 결과)

구성 요소:

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

인터랙션:

2.3 Product Detail (상품 상세)

구성 요소:

+--------------------------------------------------+
| Breadcrumb: Home > 하의 > 청바지 > [상품명]       |
+--------------------------------------------------+
| Image Gallery (Left)    | Product Info (Right)    |
|                         |                         |
| [메인 이미지]            | 브랜드: ABC             |
|                         | 상품명: 데님 슬림핏 청바지 |
| [썸네일1][썸네일2]       | 가격: ₩79,000           |
| [썸네일3][썸네일4]       | 할인: 20% (₩63,200)     |
|                         | 평점: ★★★★☆ (4.2/5.0)  |
|                         |                         |
|                         | 옵션 선택:              |
|                         | 사이즈: [28][30][32]    |
|                         | 색상: [Blue][Black]     |
|                         |                         |
|                         | [장바구니 담기] [바로 구매] |
+--------------------------------------------------+
| Tabs: [상세정보] [리뷰] [Q&A] [배송/반품]         |
|                                                  |
| [선택된 탭의 콘텐츠 영역]                         |
+--------------------------------------------------+
| Related Products: "이 상품과 함께 본 상품"        |
| [상품1] [상품2] [상품3] [상품4]                   |
+--------------------------------------------------+

인터랙션:

2.4 Cart (장바구니)

구성 요소:

+--------------------------------------------------+
| 장바구니 (3개 상품)                               |
+--------------------------------------------------+
| [체크박스] [이미지] [상품명] [옵션] [수량] [가격] [삭제] |
| [x]       [img]   데님 청바지  Blue/30  [2]  ₩126,400  [X] |
| [x]       [img]   화이트 티셔츠  M      [1]  ₩29,000   [X] |
| [ ]       [img]   스니커즈     280     [1]  ₩89,000   [X] |
+--------------------------------------------------+
| 쿠폰/포인트 사용                                  |
| 쿠폰: [쿠폰 선택 ▼]  포인트: [       ] P 사용     |
+--------------------------------------------------+
| 주문 금액                                         |
| 상품 금액:         ₩244,400                       |
| 배송비:            ₩3,000                         |
| 할인:              -₩10,000                       |
| 최종 결제 금액:    ₩237,400                       |
|                                                  |
| [선택 상품 삭제] [계속 쇼핑하기] [주문하기]        |
+--------------------------------------------------+

인터랙션:

2.5 Checkout (결제)

구성 요소:

+--------------------------------------------------+
| Step Indicator: [1.장바구니] → [2.주문/결제] → [3.완료] |
+--------------------------------------------------+
| 배송지 정보                                       |
| 받는 사람: [홍길동]                               |
| 연락처: [010-1234-5678]                           |
| 주소: [서울시 강남구...]                          |
| 배송 요청사항: [부재 시 경비실에 맡겨주세요]       |
+--------------------------------------------------+
| 주문 상품 (2개)                                   |
| [상품1] 데님 청바지 x2 - ₩126,400                 |
| [상품2] 화이트 티셔츠 x1 - ₩29,000                |
+--------------------------------------------------+
| 결제 수단                                         |
| ( ) 신용카드  ( ) 계좌이체  (x) 카카오페이        |
+--------------------------------------------------+
| 최종 결제 금액: ₩158,400                          |
|                                                  |
| [x] 개인정보 처리 방침에 동의합니다.              |
| [x] 구매 조건 확인 및 결제 진행에 동의합니다.      |
|                                                  |
| [결제하기]                                        |
+--------------------------------------------------+

2.6 Settings (설정)

구성 요소:

+--------------------------------------------------+
| 설정                                              |
+--------------------------------------------------+
| [프로필 사진]  홍길동                             |
| user@example.com                                 |
+--------------------------------------------------+
| 계정 설정                                         |
| > 개인정보 수정                                   |
| > 비밀번호 변경                                   |
| > 알림 설정                                       |
| > 배송지 관리                                     |
+--------------------------------------------------+
| 앱 설정                                           |
| > 언어: 한국어                                    |
| > 테마: 라이트 모드                               |
+--------------------------------------------------+
| 기타                                              |
| > 이용약관                                        |
| > 개인정보처리방침                                |
| > 고객센터                                        |
| > 로그아웃                                        |
| > 회원탈퇴                                        |
+--------------------------------------------------+

3. UI 컴포넌트 명세

3.1 Button 컴포넌트

Variants:

Sizes:

States:

Accessibility:

3.2 Input Field 컴포넌트

Types:

Elements:

States:

Validation:

3.3 Card 컴포넌트

구조:

Variants:

Interactive States:

4. 디자인 토큰 시스템

4.1 Color Tokens

Brand Colors:

--color-primary: #0066CC;
--color-primary-hover: #0052A3;
--color-primary-active: #003D7A;
--color-primary-disabled: #99CCFF;

Semantic Colors:

--color-success: #28A745;
--color-warning: #FFC107;
--color-error: #DC3545;
--color-info: #17A2B8;

Neutral Colors:

--color-text-primary: #1A1A1A;
--color-text-secondary: #4D4D4D;
--color-text-disabled: #B3B3B3;
--color-background: #FFFFFF;
--color-surface: #F5F5F5;
--color-border: #E6E6E6;

4.2 Spacing Tokens (8px Grid System)

--spacing-xs: 4px;   /* 0.25rem */
--spacing-sm: 8px;   /* 0.5rem */
--spacing-md: 16px;  /* 1rem */
--spacing-lg: 24px;  /* 1.5rem */
--spacing-xl: 32px;  /* 2rem */
--spacing-2xl: 48px; /* 3rem */
--spacing-3xl: 64px; /* 4rem */

4.3 Typography Tokens

--font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'Fira Code', monospace;

--font-size-xs: 12px;   /* 0.75rem */
--font-size-sm: 14px;   /* 0.875rem */
--font-size-base: 16px; /* 1rem */
--font-size-lg: 18px;   /* 1.125rem */
--font-size-xl: 20px;   /* 1.25rem */
--font-size-2xl: 24px;  /* 1.5rem */
--font-size-3xl: 30px;  /* 1.875rem */
--font-size-4xl: 36px;  /* 2.25rem */

--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;

4.4 Shadow Tokens

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

5. 접근성 (WCAG 2.1)

5.1 4대 원칙 (POUR)

Perceivable (인식 가능):

Operable (조작 가능):

Understandable (이해 가능):

Robust (견고성):

5.2 주요 체크리스트

시각적 접근성:

키보드 접근성:

콘텐츠 접근성:

기술적 접근성:

5.3 키보드 내비게이션

주요 키:

Tab Order:

5.4 스크린 리더 지원

Semantic HTML:

<header>
  <nav aria-label="Main Navigation">
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>

<footer>
  <p>&copy; 2026 Company</p>
</footer>

ARIA Attributes:

5.5 명암비 (Contrast Ratio)

WCAG AA 기준:

테스트 도구:

6. 반응형 디자인

6.1 Breakpoints 전략

Mobile First Approach:

/* Mobile (기본) */
.container {
  padding: 16px;
}

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

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

6.2 Mobile vs Desktop 차이점

요소 Mobile Desktop
Navigation Hamburger Menu Full Menu Bar
Layout 1 Column 2-3 Columns
Image Size Smaller Larger
Touch Target 최소 44x44px 마우스 클릭
Interaction Swipe, Tap Click, Hover
Font Size 16px+ (iOS 줌 방지) 14px+

6.3 Responsive Images

Picture Element:

<picture>
  <source media="(min-width: 1024px)" srcset="https://example.com/image-desktop.jpg">
  <source media="(min-width: 768px)" srcset="https://example.com/image-tablet.jpg">
  <img src="https://example.com/image-mobile.jpg" alt="Description">
</picture>

6.4 Flexible Layout

CSS Grid:

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

Flexbox:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

7. UX 패턴

7.1 Pull-to-Refresh (모바일)

동작:

구현 고려사항:

7.2 Swipe-to-Delete

동작:

구현:

.list-item {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.list-item.swiped {
  transform: translateX(-80px);
}

7.3 Touch Target Rules

최소 크기:

간격: 최소 8px 여백

예시:

.touch-target {
  min-height: 44px;
  min-width: 44px;
  margin: 4px; /* 8px 간격 확보 */
}

8. 내비게이션 아키텍처

8.1 Global Navigation

위치: Header (고정)

항목:

모바일 처리:

Desktop: [로고] [메뉴1] [메뉴2] [메뉴3] [검색] [장바구니] [로그인]
Mobile:  [☰] [로고]                     [검색] [장바구니]

8.2 Local Navigation

위치: 특정 섹션 내

예시:

8.3 3-Click Rule

원칙: 사용자가 목표까지 최대 3번 클릭 이내 도달

예외: 복잡한 구조에서는 명확한 경로가 더 중요

Breadcrumb 활용:

Home > 카테고리 > 서브카테고리 > 상품

예시:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category/fashion">패션</a></li>
    <li><a href="/category/fashion/pants">바지</a></li>
    <li aria-current="page">청바지</li>
  </ol>
</nav>

9. Empty State & Error Handling

9.1 Empty State

상황: 데이터가 없을 때

디자인:

예시:

<div class="empty-state">
  <svg class="empty-icon">...</svg>
  <h3>장바구니가 비어 있습니다</h3>
  <p>마음에 드는 상품을 담아보세요!</p>
  <button class="btn-primary">쇼핑 계속하기</button>
</div>

9.2 Error Handling

유형:

디자인:

10. 피드백 시스템

10.1 Inline Feedback

Form Validation:

예시:

<div class="input-group">
  <label for="email">이메일</label>
  <input type="email" id="email" class="error">
  <span class="error-message">
    <svg class="error-icon">⚠️</svg>
    올바른 이메일 형식을 입력해주세요.
  </span>
</div>

10.2 Toast Notification

특징:

예시:

<div class="toast success">
  <svg class="toast-icon">✓</svg>
  <span>장바구니에 상품이 추가되었습니다.</span>
  <button class="toast-action">보기</button>
  <button class="toast-close">×</button>
</div>

CSS:

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  box-shadow: var(--shadow-lg);
  border-radius: 8px;
  padding: 16px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}

10.3 Modal Dialog

용도:

구조:

<div class="modal-overlay">
  <div class="modal">
    <div class="modal-header">
      <h2>배송지 추가</h2>
      <button class="modal-close">×</button>
    </div>
    <div class="modal-content">
      <!-- 폼 또는 내용 -->
    </div>
    <div class="modal-actions">
      <button class="btn-secondary">취소</button>
      <button class="btn-primary">저장</button>
    </div>
  </div>
</div>

접근성:

11. 마스터 템플릿 & 사용자 플로우

11.1 마스터 템플릿

공통 레이아웃 요소:

페이지별 템플릿:

11.2 사용자 플로우 다이어그램

예시: 상품 구매 플로우

[홈 화면]
   ↓ (검색 또는 카테고리)
[검색 결과 / 목록]
   ↓ (상품 클릭)
[상품 상세]
   ↓ (장바구니 담기)
[장바구니]
   ↓ (주문하기)
[결제]
   ↓ (결제 완료)
[주문 완료]

조건 분기 예시:

[상품 상세]
   ↓
[로그인 여부 확인]
   ↓ (Yes)      ↓ (No)
[장바구니 담기] → [로그인 페이지]
                    ↓
                [로그인 후 원래 페이지 복귀]

12. 인터랙션 패턴

12.1 Loading States

Skeleton UI:

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Spinner:

<div class="loading-spinner" aria-label="로딩 중"></div>

12.2 Hover Effects

Card Hover:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

Button Hover:

.btn-primary {
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

12.3 Focus States

.focusable:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 마우스 클릭 시에는 outline 숨김 */
.focusable:focus:not(:focus-visible) {
  outline: none;
}

13. 성능 최적화

13.1 이미지 최적화

Lazy Loading:

<img src="https://example.com/image.jpg" alt="상품 이미지" loading="lazy">

WebP 포맷 사용:

<picture>
  <source srcset="https://example.com/image.webp" type="image/webp">
  <img src="https://example.com/image.jpg" alt="상품 이미지">
</picture>

13.2 CSS 최적화

Critical CSS:

CSS 압축:

13.3 JavaScript 최적화

Code Splitting:

// 동적 import로 필요할 때만 로딩
const Modal = lazy(() => import('./components/Modal'));

Bundle 분석:

🛠️ 실습 과제

과제 1: 와이어프레임 블루프린트 작성

과제 2: UI 컴포넌트 라이브러리 구축

과제 3: 디자인 토큰 시스템 정의

과제 4: 사용자 플로우 다이어그램

과제 5: 접근성 체크리스트 적용

📖 참고 자료

🔄 복습 체크리스트

📝 다음 주 예습

Week 14: Prototyping

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

Last Updated: 2026-02-14