← 이전: Week 13 목차

Week 14: Prototyping

📌 학습 목표

📚 주요 내용

1. 프로토타입 전략

1.1 Fidelity Level (충실도 수준)

Lo-Fi (Low Fidelity):

Mid-Fi (Medium Fidelity):

Hi-Fi (High Fidelity):

1.2 프로토타입 유형

Click-through Prototype:

Interactive Prototype:

Functional Prototype:

1.3 선택 기준

목적 추천 Fidelity 소요 시간 적합한 단계
아이디어 검증 Lo-Fi 1-3시간 초기 기획
기능 검토 Mid-Fi 1-2일 상세 기획
사용자 테스트 Hi-Fi 3-7일 개발 직전
투자 피칭 Hi-Fi 5-10일 투자 유치

2. 도구 선택 매트릭스

2.1 프로토타이핑 도구 비교

도구 Fidelity Learning Curve 협업 가격 (월) 추천 용도
Figma Mid-Hi 중간 우수 (실시간) Free~$15 전반적 디자인 & 프로토타입
Framer Hi 높음 (코딩) 보통 $5~$20 고급 인터랙션, 개발자 친화적
Adobe XD Mid-Hi 중간 보통 Free~$10 Adobe 생태계 사용자
Sketch Mid-Hi 중간 플러그인 필요 $9 macOS 사용자
Balsamiq Lo 낮음 보통 $9 빠른 Lo-Fi 와이어프레임
ProtoPie Hi 높음 보통 $25 복잡한 인터랙션
Axure RP Mid-Hi 높음 보통 $29 복잡한 조건 로직
InVision Mid 낮음 우수 Free~$15 간단한 Click-through

2.2 선택 기준

팀 크기별:

프로젝트 복잡도별:

개발 연동:

3. AI 도구 활용

3.1 Claude 활용 예시

1. User Story 생성

Prompt:

"사용자가 상품을 검색하고 장바구니에 담는 기능의 User Story를 작성해줘.
Acceptance Criteria도 Given-When-Then 형식으로 포함해서."

Output:

User Story:
As a 쇼핑몰 사용자,
I want to 상품을 검색하고 장바구니에 담을 수 있어서,
So that 나중에 한꺼번에 결제할 수 있다.

Acceptance Criteria:
1. Given: 홈 화면에 있음
   When: 검색창에 "청바지" 입력 후 엔터
   Then: 검색 결과 페이지로 이동하고, 관련 상품 표시

2. Given: 검색 결과 페이지
   When: 상품 클릭
   Then: 상품 상세 페이지로 이동

3. Given: 상품 상세 페이지, 옵션 선택 완료
   When: "장바구니 담기" 버튼 클릭
   Then: 장바구니에 상품 추가, Toast 알림 표시

2. API 명세 생성

Prompt:

"쇼핑몰의 상품 목록 조회 API 명세서를 작성해줘.
Query 파라미터, Response 스키마, Error 코드까지 포함해서."

3.2 Cursor 활용 예시

1. 와이어프레임 → React 컴포넌트

Prompt (Figma 이미지 첨부 후):

"이 와이어프레임을 React 컴포넌트로 변환해줘.
Tailwind CSS 사용하고, 반응형 디자인 적용."

Output:

import React from 'react';

const ProductCard = ({ image, title, price, rating }) => {
  return (
    <div className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-4 cursor-pointer">
      <img 
        src={image} 
        alt={title} 
        className="w-full h-48 object-cover rounded-md mb-4"
      />
      <h3 className="text-lg font-semibold mb-2 line-clamp-2">{title}</h3>
      <div className="flex items-center justify-between mb-4">
        <span className="text-xl font-bold text-blue-600">
          ₩{price.toLocaleString()}
        </span>
        <div className="flex items-center">
          <span className="text-yellow-500">★</span>
          <span className="ml-1 text-sm text-gray-600">{rating}</span>
        </div>
      </div>
      <button className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition-colors">
        장바구니 담기
      </button>
    </div>
  );
};

export default ProductCard;

2. API 호출 함수 생성

코드 입력 (주석만):

// Fetch product list from API with filters and pagination

Cursor 제안:

// Fetch product list from API with filters and pagination
const fetchProducts = async (filters = {}, page = 1, limit = 20) => {
  try {
    const queryParams = new URLSearchParams({
      ...filters,
      page: page.toString(),
      limit: limit.toString(),
    });
    
    const response = await fetch(`/api/v1/items?${queryParams}`, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('accessToken')}`,
        'Content-Type': 'application/json',
      },
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching products:', error);
    throw error;
  }
};

3.3 GitHub Copilot 활용

상황: 장바구니 상태 관리 (Redux)

코드 입력:

// Redux slice for shopping cart
import { createSlice } from '@reduxjs/toolkit';

Copilot 제안:

// Redux slice for shopping cart
import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],
    total: 0,
    itemCount: 0,
  },
  reducers: {
    addItem: (state, action) => {
      const existingItem = state.items.find(item => item.id === action.payload.id);
      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        state.items.push({ ...action.payload, quantity: 1 });
      }
      state.itemCount = state.items.reduce((sum, item) => sum + item.quantity, 0);
      state.total = state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
      state.itemCount = state.items.reduce((sum, item) => sum + item.quantity, 0);
      state.total = state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    },
    updateQuantity: (state, action) => {
      const { id, quantity } = action.payload;
      const item = state.items.find(item => item.id === id);
      if (item) {
        item.quantity = Math.max(0, quantity);
        if (item.quantity === 0) {
          state.items = state.items.filter(i => i.id !== id);
        }
      }
      state.itemCount = state.items.reduce((sum, item) => sum + item.quantity, 0);
      state.total = state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    },
    clearCart: (state) => {
      state.items = [];
      state.total = 0;
      state.itemCount = 0;
    },
  },
});

export const { addItem, removeItem, updateQuantity, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

4. 우선순위 결정 프레임워크

4.1 MoSCoW Method

분류:

쇼핑몰 프로토타입 예시:

Must-have:

Should-have:

Could-have:

Won’t-have (v2로 연기):

4.2 RICE Scoring

공식:

RICE Score = (Reach × Impact × Confidence) / Effort

요소 정의:

예시 계산:

기능 Reach Impact Confidence Effort RICE Score
상품 검색 1,000 3 90% 0.5 5,400
추천 알고리즘 800 2 60% 2 480
리뷰 작성 500 1 100% 0.5 1,000
소셜 로그인 1,000 1 90% 1 900

우선순위: 상품 검색 (5,400) > 리뷰 작성 (1,000) > 소셜 로그인 (900) > 추천 알고리즘 (480)

4.3 Kano Model

분류:

Basic Needs (기본 기능):

Performance Needs (성능 기능):

Excitement Needs (기쁨 기능):

개발 전략:

  1. Basic → Performance → Excitement 순서
  2. Basic 완성 후 Performance 개선으로 차별화
  3. Excitement로 경쟁 우위 확보

5. 개발 프로세스 플로우

5.1 Design-Dev-Test Loop

1단계: Design (설계):

2단계: Develop (개발):

3단계: Test (테스트):

4단계: Iterate (반복):

5.2 Acceptance Criteria

Given-When-Then 형식:

예시 1: 장바구니 담기:

Given: 사용자가 로그인된 상태
  And: 상품 상세 페이지에 있음
  And: 사이즈와 색상을 선택함
When: "장바구니 담기" 버튼 클릭
Then: 장바구니에 상품 추가됨
  And: 장바구니 아이콘에 수량 배지 표시
  And: Toast 알림 "장바구니에 추가되었습니다" 표시
  And: 페이지 이동 없이 같은 페이지 유지

예시 2: 검색 기능:

Given: 홈 화면 또는 임의의 페이지
When: 검색창에 "청바지" 입력 후 엔터 또는 검색 버튼 클릭
Then: 검색 결과 페이지로 이동
  And: 검색어와 관련된 상품 목록 표시
  And: 검색 결과 개수 표시 ("청바지 검색 결과 45개")
  And: 검색창에 입력한 검색어 유지

Given: 검색 결과가 없는 경우
When: 검색 수행
Then: "검색 결과가 없습니다" 메시지 표시
  And: 추천 키워드 또는 인기 상품 제안

5.3 Testing Metrics

성능 지표:

만족도 지표:

6. 리소스 배분

6.1 Role-based Allocation

역할 책임 비중 산출물
PM/PO 기획, 요구사항 정의, 우선순위 결정 20% PRD, User Story, 백로그
UI Designer 와이어프레임, 시각 디자인, 프로토타입 30% Figma 파일, 디자인 시스템
Frontend Dev UI 구현, 인터랙션 개발, API 연동 35% React/Vue 코드, 컴포넌트
Backend Dev API 개발, 데이터베이스 설계, 인증 10% API 엔드포인트, DB 스키마
Data/AI 추천 알고리즘, 데이터 분석 5% 추천 모델, 대시보드

6.2 리소스 부족 대응 전략

Frontend 리소스 부족 시:

Designer 리소스 부족 시:

Backend 리소스 부족 시:

6.3 리스크 완화

기술적 리스크:

일정 리스크:

7. 스프린트 로드맵 (4주 프로토타입 개발)

7.1 Sprint 1 (Week 1): Foundation Setup

목표: 기반 구조 및 핵심 화면 구현

Task List:

Deliverables:

Success Criteria:

7.2 Sprint 2 (Week 2): Core Features

목표: 핵심 기능 구현

Task List:

Deliverables:

Success Criteria:

7.3 Sprint 3 (Week 3): Integration & Polish

목표: 통합 및 디테일 개선

Task List:

Deliverables:

Success Criteria:

7.4 Sprint 4 (Week 4): Testing & Finalization

목표: 테스트 및 최종 마무리

Task List:

Deliverables:

Success Criteria:

8. Storyboard & Interaction Flow

8.1 Storyboard 작성

목적: 사용자 여정을 시각적으로 표현

구성:

Scene 1: 홈 화면 진입

Scene 2: 상품 목록 탐색

Scene 3: 상품 상세 검토

Scene 4: 장바구니 확인

Scene 5: 결제 진행

Scene 6: 주문 완료

8.2 Interaction Map

표기법:

복잡한 플로우 예시:

[홈 화면]
   ↓ 검색
[검색 결과]
   ↓ 상품 선택
[상품 상세]
   ↓ 장바구니 담기
<로그인 여부?>
   ↓ No        ↓ Yes
[로그인 페이지] [장바구니]
   ↓             ↓
[인증 완료]      [주문하기]
   ↓             ↓
[원래 페이지] → [결제 페이지]
                ↓
             [주문 완료]

9. 최종 산출물 체크리스트

9.1 필수 산출물 (Must-have)

9.2 선택 산출물 (Nice-to-have)

9.3 품질 기준 (Quality Criteria)

기능적 요구사항:

비기능적 요구사항:

사용성 요구사항:

10. 프로토타입 테스팅

10.1 Usability Testing 시나리오

태스크 1: 상품 검색 및 구매

목표: 사용자가 “청바지”를 검색하여 구매 프로세스 완료

단계:

  1. 홈 화면에서 검색창 찾기
  2. “청바지” 검색어 입력
  3. 검색 결과에서 원하는 상품 선택
  4. 상세 페이지에서 사이즈/색상 선택
  5. 장바구니에 담기
  6. 장바구니에서 주문하기 클릭
  7. 배송지 입력 및 결제 완료

예상 시간: 3-5분 성공 기준: 주문 완료 페이지 도달

관찰 포인트:

태스크 2: 위시리스트 및 장바구니 관리

목표: 여러 상품을 비교하고 장바구니 수량 조절

단계:

  1. 카테고리에서 여성 의류 선택
  2. 마음에 드는 상품 3개를 위시리스트에 추가
  3. 그 중 2개를 장바구니에 담기
  4. 장바구니에서 수량을 각각 2개, 1개로 조정
  5. 총 결제 금액 확인

예상 시간: 2-3분

태스크 3: 고객 지원

목표: 주문 관련 문의하기

단계:

  1. 프로필 메뉴에서 주문 내역 확인
  2. 특정 주문의 배송 상태 확인
  3. 고객센터 또는 문의하기 기능 찾기
  4. 질문 작성 및 전송

예상 시간: 2-3분

10.2 Testing Metrics 측정

정량적 (Quantitative) 지표:

지표 측정 방법 목표 값
완료 시간 스톱워치 측정 태스크 1: ≤ 5분
클릭 수 화면 녹화 분석 태스크 1: ≤ 15클릭
오류 횟수 잘못된 클릭 집계 ≤ 2회/태스크
성공률 완료한 사용자 비율 ≥ 85%
페이지 이탈률 중간에 포기한 비율 ≤ 20%

정성적 (Qualitative) 지표:

지표 측정 방법 목표
주관적 만족도 5점 척도 설문 ≥ 4.0점
사용 편의성 SUS 설문 (10문항) ≥ 70점
추천 의향 NPS 설문 ≥ 50점
인지된 난이도 5점 척도 ≤ 2.0점

데이터 수집 도구:

10.3 A/B Testing (선택사항)

예시: CTA 버튼 위치 테스트

Version A: “장바구니 담기” 버튼 우측 상단 Version B: “장바구니 담기” 버튼 옵션 선택 바로 아래

측정 지표:

통계적 유의성:

11. LLM 활용 프로토타이핑

11.1 Claude 활용 시나리오

시나리오 1: 요구사항 문서 생성

Input:

"온라인 쇼핑몰의 장바구니 기능에 대한 상세한 요구사항 명세서를 작성해줘.
기능 요구사항, 비기능 요구사항, 예외 상황, 테스트 케이스까지 포함해서."

Output 예시:

# 장바구니 기능 요구사항 명세서

## 기능 요구사항 (Functional Requirements)

### FR-CART-001: 상품 추가
- 사용자는 상품 상세 페이지에서 상품을 장바구니에 추가할 수 있다.
- 사이즈, 색상 등 필수 옵션 선택 후 추가 가능
- 동일 상품 추가 시 수량 증가

### FR-CART-002: 수량 변경
- 사용자는 장바구니에서 상품 수량을 변경할 수 있다.
- +/- 버튼 또는 직접 입력으로 수량 조절
- 수량 0 설정 시 상품 삭제 확인

## 비기능 요구사항 (Non-functional Requirements)

### NFR-CART-001: 성능
- 장바구니 페이지 로딩 시간 < 2초
- 수량 변경 시 즉시 반영 (< 500ms)

### NFR-CART-002: 데이터 보존
- 로그인 사용자: 서버에 영구 저장
- 비로그인 사용자: 로컬스토리지에 7일간 보관

시나리오 2: 테스트 케이스 생성

Input:

"로그인 기능에 대한 테스트 케이스를 작성해줘.
정상 케이스, 예외 케이스, 보안 테스트까지 포함해서."

11.2 Cursor 활용 시나리오

시나리오 1: 컴포넌트 자동 생성

Input (자연어 주석):

// 상품 카드 컴포넌트
// 프로퍼티: image, title, price, rating, onAddToCart
// 호버 시 그림자 효과
// 장바구니 버튼 클릭 시 onAddToCart 콜백 호출
// Tailwind CSS 사용

Cursor 생성 결과:

import React from 'react';

const ProductCard = ({ 
  image, 
  title, 
  price, 
  rating, 
  onAddToCart 
}) => {
  return (
    <div className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 cursor-pointer">
      <div className="relative">
        <img 
          src={image} 
          alt={title} 
          className="w-full h-48 object-cover rounded-md mb-4"
        />
      </div>
      <h3 className="text-lg font-semibold mb-2 line-clamp-2 text-gray-900">
        {title}
      </h3>
      <div className="flex items-center justify-between mb-4">
        <span className="text-xl font-bold text-blue-600">
          ₩{price.toLocaleString()}
        </span>
        <div className="flex items-center">
          <div className="flex text-yellow-400">
            {[...Array(5)].map((_, i) => (
              <svg
                key={i}
                className={`w-4 h-4 ${
                  i < Math.floor(rating) ? 'fill-current' : 'text-gray-300'
                }`}
                viewBox="0 0 20 20"
              >
                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
              </svg>
            ))}
          </div>
          <span className="ml-1 text-sm text-gray-600">
            ({rating})
          </span>
        </div>
      </div>
      <button 
        onClick={onAddToCart}
        className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors duration-200 font-medium"
      >
        장바구니 담기
      </button>
    </div>
  );
};

export default ProductCard;

시나리오 2: API 연동 코드

Input:

// 상품 목록을 가져오는 React Hook
// useQuery 사용, 로딩/에러 상태 관리
// 필터링 파라미터 지원 (category, priceMin, priceMax)

Cursor 생성 결과:

import { useQuery } from 'react-query';
import { useState } from 'react';

const useProducts = (initialFilters = {}) => {
  const [filters, setFilters] = useState(initialFilters);

  const { data, isLoading, error, refetch } = useQuery(
    ['products', filters],
    async () => {
      const queryParams = new URLSearchParams();
      
      Object.entries(filters).forEach(([key, value]) => {
        if (value !== undefined && value !== '') {
          queryParams.append(key, value);
        }
      });

      const response = await fetch(`/api/v1/items?${queryParams}`);
      
      if (!response.ok) {
        throw new Error('Failed to fetch products');
      }

      return response.json();
    },
    {
      staleTime: 5 * 60 * 1000, // 5분
      cacheTime: 10 * 60 * 1000, // 10분
    }
  );

  const updateFilters = (newFilters) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
  };

  return {
    products: data?.data || [],
    total: data?.total || 0,
    isLoading,
    error,
    filters,
    updateFilters,
    refetch,
  };
};

export default useProducts;

11.3 GitHub Copilot 활용

상황: 폼 유효성 검사

코드 시작:

const validateForm = (formData) => {
  const errors = {};
  
  // 이메일 유효성 검사

Copilot 자동 완성:

const validateForm = (formData) => {
  const errors = {};
  
  // 이메일 유효성 검사
  if (!formData.email) {
    errors.email = '이메일은 필수 항목입니다.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    errors.email = '올바른 이메일 형식을 입력해주세요.';
  }

  // 비밀번호 유효성 검사
  if (!formData.password) {
    errors.password = '비밀번호는 필수 항목입니다.';
  } else if (formData.password.length < 8) {
    errors.password = '비밀번호는 8자 이상이어야 합니다.';
  } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/.test(formData.password)) {
    errors.password = '비밀번호는 대소문자, 숫자, 특수문자를 포함해야 합니다.';
  }

  // 이름 유효성 검사
  if (!formData.name) {
    errors.name = '이름은 필수 항목입니다.';
  } else if (formData.name.length < 2) {
    errors.name = '이름은 2자 이상이어야 합니다.';
  }

  // 전화번호 유효성 검사
  if (!formData.phone) {
    errors.phone = '전화번호는 필수 항목입니다.';
  } else if (!/^010-\d{4}-\d{4}$/.test(formData.phone)) {
    errors.phone = '전화번호 형식이 올바르지 않습니다. (010-0000-0000)';
  }

  return {
    isValid: Object.keys(errors).length === 0,
    errors,
  };
};

12. 협업 및 버전 관리

12.1 Git Workflow

브랜치 전략:

main (프로덕션)
├── develop (개발 통합)
│   ├── feature/user-auth
│   ├── feature/product-list
│   └── feature/cart-management
└── hotfix/critical-bug

커밋 메시지 컨벤션:

type(scope): subject

feat(auth): 소셜 로그인 기능 추가
fix(cart): 수량 변경 시 총액 계산 오류 수정
docs(api): API 문서 업데이트
style(ui): 버튼 스타일 통일
refactor(cart): 장바구니 상태 관리 Redux로 변경
test(auth): 로그인 테스트 케이스 추가

12.2 코드 리뷰 체크리스트

기능:

품질:

보안:

13. 배포 및 모니터링

13.1 배포 전략

프론트엔드 배포:

백엔드 배포:

13.2 환경 설정

Environment Variables:

# .env.production
REACT_APP_API_URL=https://api.myshop.com
REACT_APP_PAYMENT_KEY=pk_live_xxxxx
REACT_APP_GA_TRACKING=GA-XXXXX-X

# .env.development  
REACT_APP_API_URL=http://localhost:3001
REACT_APP_PAYMENT_KEY=pk_test_xxxxx
REACT_APP_GA_TRACKING=

13.3 모니터링 설정

성능 모니터링:

비즈니스 지표:

🛠️ 실습 과제

과제 1: 프로토타입 전략 수립

과제 2: Hi-Fi 프로토타입 개발

과제 3: AI 도구 활용 실습

과제 4: 사용자 테스트 진행

과제 5: 최종 발표 자료

📖 참고 자료

🔄 복습 체크리스트

🎓 과정 총정리

축하합니다! 🎉

AX/DX 서비스 기획 과정을 성공적으로 완주하셨습니다!

학습 여정 요약

Phase 1: Foundation (Week 1-2)

Phase 2: Analysis & Strategy (Week 3-4)

Phase 3: Design & Implementation (Week 11-14)

습득한 핵심 역량

1. 기획 역량:

2. 디자인 역량:

3. 기술 역량:

4. 검증 역량:

다음 단계 로드맵

1. MVP (Minimum Viable Product) 개발:

2. 시장 검증:

3. 투자 유치:

4. 스케일업: