---
name: prototype-development
description: UI/UX 설계서를 기반으로 기본 HTML과 JavaScript를 사용하여 동작하는 프로토타입을 개발합니다. 개발 경험이 없는 사용자도 쉽게 사용할 수 있도록 설계되었습니다.
---

# 프로토타입 개발

## 목적

UI/UX 설계서와 스타일 가이드를 기반으로 실제 동작하는 인터랙티브 프로토타입을 개발합니다. 기본 HTML과 JavaScript를 사용하여 개발 경험이 없는 사용자도 쉽게 이해하고 수정할 수 있도록 합니다.

## 사용 시점

- UI/UX 디자인이 완료된 후
- 유저스토리가 정의된 후
- 실제 사용자 테스트를 위한 프로토타입이 필요할 때
- 사용자가 "프로토타입", "HTML 개발", "화면 구현"을 언급할 때

## 필수 입력

- UI/UX 디자인 명세 (uiux-design 결과):
  - `design/uiux/uiux.md`
  - `design/uiux/style-guide.md`
- 유저스토리: `design/userstory.md` (user-stories 결과)
- 선정된 솔루션: `think/핵심솔루션.md` (solution-selection 결과)

## 개발 준비

### 1. 개발 범위 결정

UI/UX 설계서(`design/uiux/uiux.md`)에서 개발할 화면을 확인합니다.
- 전체 화면을 개발할지
- 특정 화면만 개발할지
- MVP 범위의 화면만 개발할지

### 2. 기존 프로토타입 확인

`design/uiux/prototype` 디렉토리에 이미 작성 중인 프로토타입이 있는지 확인합니다.
- 기존 파일이 있으면 해당 파일들을 분석하여 일관성 있게 개발
- 공통 JavaScript와 Stylesheet가 있으면 재사용
- 샘플 데이터 구조가 있으면 동일한 형식 사용

## 프롬프팅 구조

### 기본 프롬프트 템플릿

```
design/uiux/prototype 디렉토리에 작성중인 프로토타입을 먼저 파악한 후 프로토타입을 개발해 주세요.

[요청사항]
- design/uiux/uiux.md에 정의된 모든 화면을 개발 (또는 특정 화면만 지정 가능)
- <작성원칙>을 준용하여 설계
- <작성순서>에 따라 설계
- [결과파일] 안내에 따라 파일 작성
- Sequential MCP와 Playwright MCP 이용

[가이드]
<작성원칙>
- **UI/UX설계서와 매칭**되어야 함. **불필요한 추가 개발 금지**
- 스타일가이드를 준수하여 개발
- Mobile First 디자인 철학 준용
  - 우선순위 중심 설계: 작은 화면에서는 공간이 제한되므로, 가장 중요한 콘텐츠와 기능에 집중
  - 점진적 향상: 모바일 기본 경험을 먼저 구축한 후, 화면이 커질수록 추가 기능과 콘텐츠를 더해감
  - 성능 최적화: 모바일 환경의 제약(느린 네트워크, 제한된 처리 능력)을 먼저 고려하므로, 결과적으로 모든 기기에서 빠른 성능을 제공

<작성순서>
- 준비: 참고자료 분석 및 이해
- 실행:
  - 공통 Javascript와 공통 Stylesheet 개발
  - 사용자 플로우에 따라 각 화면을 순차적으로 개발
  - 예제 데이터는 화면 간 일관성 있게 개발
  - 각 화면간 전환이 되도록 개발
- 검토:
  - <작성원칙> 준수 검토
  - '[체크리스트]'에 따라 검토하고 수정
- 테스트:
  - Playwright MCP를 이용하여 웹브라우저에서 프로토타입 실행
  - 각 화면을 웹브라우저에서 열어 동작 확인
  - 콘솔 에러 및 화면 레이아웃 검토
  - 버그 수정 및 화면 개선

[참고자료]
- design/userstory.md
- design/uiux/style-guide.md
- design/uiux/uiux.md

[결과파일]
- 프로토타입: design/uiux/prototype/{화면순서번호 2자리}-{화면명}.html
- 화면명은 한글로 작성
  예: design/uiux/prototype/01-스플래시.html
```

## 작성 가이드

### 작성원칙

#### 1. UI/UX설계서 매칭 (필수)
- UI/UX설계서에 정의된 화면과 기능만 개발
- 설계서에 없는 추가 기능이나 화면은 개발하지 않음
- 각 화면의 레이아웃, 요소, 동작이 설계서와 일치해야 함

#### 2. 스타일가이드 준수
- `design/uiux/style-guide.md`에 정의된 디자인 시스템 사용
- 색상, 타이포그래피, 간격, 컴포넌트 스타일 일관성 유지
- 브랜드 아이덴티티와 일치하는 디자인

#### 3. Mobile First 디자인
- **우선순위 중심 설계**:
  - 작은 화면에서 가장 중요한 콘텐츠와 기능에 집중
  - 핵심 사용자 경험을 우선 구현
- **점진적 향상**:
  - 모바일 기본 경험을 먼저 구축
  - 화면이 커질수록 추가 기능과 콘텐츠 추가
- **성능 최적화**:
  - 느린 네트워크와 제한된 처리 능력 고려
  - 모든 기기에서 빠른 성능 제공

### 작성순서

#### 1단계: 준비
- **참고자료 분석**:
  - `design/userstory.md`: 사용자 요구사항과 기능 이해
  - `design/uiux/style-guide.md`: 디자인 시스템과 스타일 규칙 파악
  - `design/uiux/uiux.md`: 각 화면의 상세 설계 내용 확인
- **기존 프로토타입 확인**:
  - `design/uiux/prototype` 디렉토리의 기존 파일 검토
  - 공통 컴포넌트와 스타일 파악

#### 2단계: 실행

##### 2-1. 공통 JavaScript 개발
프로토타입 전체에서 사용할 공통 기능을 개발합니다.

**주요 기능**:
- **샘플 데이터 생성**:
  - 일관된 형식의 예제 데이터 생성
  - 화면 간 데이터 일관성 유지
  ```javascript
  // 예시: common.js
  const sampleData = {
    user: {
      name: "홍길동",
      email: "hong@example.com",
      role: "Product Manager"
    },
    products: [
      { id: 1, name: "상품 A", price: 10000 },
      { id: 2, name: "상품 B", price: 20000 }
    ]
  };
  ```

- **화면 전환 함수**:
  - 화면 간 이동을 처리하는 공통 함수
  - 데이터 전달 및 상태 유지
  ```javascript
  function navigateTo(screenNumber, data) {
    const screenName = screenNumber.toString().padStart(2, '0');
    window.location.href = `${screenName}-화면명.html?data=${JSON.stringify(data)}`;
  }
  ```

- **공통 UI 컴포넌트**:
  - 헤더, 푸터, 네비게이션 등 반복 사용되는 요소
  - 일관된 사용자 경험 제공

##### 2-2. 공통 Stylesheet 개발
프로토타입 전체에서 사용할 공통 스타일을 개발합니다.

**주요 내용**:
- **디자인 시스템 변수**:
  ```css
  :root {
    /* 색상 */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #ffffff;

    /* 타이포그래피 */
    --font-family: 'Noto Sans KR', sans-serif;
    --font-size-base: 16px;
    --font-size-large: 20px;

    /* 간격 */
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
  }
  ```

- **반응형 디자인**:
  ```css
  /* Mobile First */
  .container {
    padding: var(--spacing-medium);
  }

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

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

- **공통 컴포넌트 스타일**:
  - 버튼, 입력 필드, 카드 등 재사용 가능한 스타일

##### 2-3. 화면 순차적 개발
사용자 플로우에 따라 각 화면을 순서대로 개발합니다.

**개발 순서**:
1. 사용자 진입 화면부터 시작 (예: 스플래시, 온보딩)
2. 주요 화면 개발 (예: 홈, 검색)
3. 상세 화면 개발 (예: 상품 상세, 프로필)
4. 보조 화면 개발 (예: 설정, 도움말)

**각 화면 개발 시 포함 사항**:
```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{화면명}</title>

    <!-- 공통 스타일 -->
    <link rel="stylesheet" href="common.css">

    <!-- 화면별 스타일 -->
    <style>
        /* 이 화면에만 필요한 스타일 */
    </style>
</head>
<body>
    <!-- 화면 내용 -->
    <div class="container">
        <header>
            <!-- 헤더 내용 -->
        </header>

        <main>
            <!-- 주요 콘텐츠 -->
        </main>

        <footer>
            <!-- 푸터 내용 -->
        </footer>
    </div>

    <!-- 공통 JavaScript -->
    <script src="common.js"></script>

    <!-- 화면별 JavaScript -->
    <script>
        // 이 화면에만 필요한 스크립트
        // 샘플 데이터 로드
        // 이벤트 리스너 등록
        // 화면 전환 로직
    </script>
</body>
</html>
```

##### 2-4. 예제 데이터 일관성
모든 화면에서 동일한 샘플 데이터를 사용합니다.

**일관성 유지 방법**:
- 공통 JavaScript 파일에 샘플 데이터 정의
- 각 화면에서 동일한 데이터 구조 사용
- 화면 간 이동 시 데이터 전달

**예시**:
```javascript
// common.js에 정의된 샘플 데이터
const userData = {
  id: 1,
  name: "홍길동",
  email: "hong@example.com"
};

// 01-로그인.html에서 사용
document.getElementById('user-name').textContent = userData.name;

// 05-홈.html에서도 동일한 데이터 사용
document.getElementById('welcome-message').textContent =
  `${userData.name}님, 환영합니다!`;
```

##### 2-5. 화면 간 전환 구현
각 화면이 자연스럽게 연결되도록 네비게이션을 구현합니다.

**구현 방법**:
```javascript
// 버튼 클릭으로 화면 이동
document.getElementById('next-button').addEventListener('click', function() {
  // 데이터 전달이 필요한 경우
  const data = { userId: 1 };
  navigateTo('05', data);
});

// 링크를 통한 화면 이동
<a href="06-통합검색.html">검색하기</a>

// 뒤로 가기
<button onclick="history.back()">뒤로</button>
```

#### 3단계: 검토

##### 3-1. 작성원칙 준수 검토
- UI/UX설계서와 매칭되는지 확인
- 스타일가이드 준수 여부 확인
- Mobile First 원칙 적용 여부 확인

##### 3-2. 체크리스트 검토
다음 섹션의 체크리스트를 사용하여 상세 검토를 수행합니다.

#### 4단계: 테스트

##### 4-1. 웹브라우저 테스트
- 프로토타입 파일을 웹브라우저에서 열어 확인
- 개발자 도구(F12)의 콘솔 창을 열어 에러 확인
- 다양한 화면 크기에서 테스트 (모바일, 태블릿, 데스크톱)

##### 4-2. 버그 수정
- 콘솔 에러 메시지를 확인하고 수정
- 화면 레이아웃 문제 수정
- 동작하지 않는 기능 수정

##### 4-3. Playwright MCP 활용
Playwright MCP를 이용하여 브라우저에서 프로토타입을 자동으로 열고 테스트합니다.

**기본 테스트 프로세스**:

1. **브라우저에서 프로토타입 열기**
```
design/uiux/prototype/01-스플래시.html 파일을 웹브라우저로 열어서
화면이 제대로 표시되는지 확인해 주세요.
```

2. **특정 화면 테스트**
```
트리구조탐색화면을 웹브라우저로 열어봐요.
좌측 이미지 컬렉션이 이상하게 나오네요.
```

3. **인터랙션 테스트**
```
05-홈.html을 브라우저로 열어서 검색 버튼을 클릭해봐요.
검색 화면으로 제대로 이동하는지 확인해 주세요.
```

4. **스크린샷 캡처**
```
현재 홈 화면을 브라우저로 열어서 스크린샷을 캡처해 주세요.
모바일 화면 크기(375x667)로 캡처해 주세요.
```

5. **반응형 테스트**
```
05-홈.html을 다양한 화면 크기(모바일, 태블릿, 데스크톱)로
브라우저에서 열어서 레이아웃이 제대로 표시되는지 확인해 주세요.
```

6. **콘솔 에러 확인**
```
모든 프로토타입 화면을 브라우저로 열어서
콘솔 에러가 있는지 확인하고 리스트로 정리해 주세요.
```

7. **화면 전환 플로우 테스트**
```
01-스플래시.html부터 시작해서 사용자 플로우대로
각 화면을 순차적으로 이동하면서 테스트해 주세요.
화면 전환이 정상적으로 동작하는지 확인해 주세요.
```

**Playwright MCP 활용 시나리오**:

**시나리오 1: 전체 화면 검증**
```
design/uiux/prototype 폴더의 모든 HTML 파일을 순서대로
브라우저에서 열어서 다음을 확인해 주세요:
1. 화면이 정상적으로 로드되는지
2. 콘솔 에러가 있는지
3. 레이아웃이 깨지지 않는지
결과를 표로 정리해 주세요.
```

**시나리오 2: 반응형 디자인 검증**
```
05-홈.html을 다음 해상도로 브라우저에서 열어서 스크린샷 캡처해 주세요:
- 모바일: 375x667 (iPhone SE)
- 태블릿: 768x1024 (iPad)
- 데스크톱: 1920x1080
각 화면에서 레이아웃 문제가 있는지 확인해 주세요.
```

**시나리오 3: 사용자 플로우 테스트**
```
사용자 로그인부터 상품 구매까지의 플로우를
브라우저에서 실제로 진행해 보고 문제점을 찾아주세요:
1. 01-로그인.html 열기
2. 로그인 버튼 클릭
3. 05-홈.html로 이동 확인
4. 상품 검색
5. 상품 상세 화면 이동
6. 장바구니 추가
7. 결제 화면까지 이동

각 단계에서 문제가 있으면 보고해 주세요.
```

**시나리오 4: 성능 측정**
```
05-홈.html을 브라우저로 열어서 다음 성능 지표를 측정해 주세요:
- 페이지 로드 시간
- 리소스 로드 시간
- 렌더링 완료 시간
성능 문제가 있으면 개선 방안을 제안해 주세요.
```

## 체크리스트

프로토타입 개발이 완료된 후 아래 체크리스트를 사용하여 검증합니다.

### 체크리스트 프롬프트 템플릿

```
아래 체크리스트에 따라 design/uiux/prototype 디렉토리의 프로토타입 개발결과를 체크하고 수정해 주세요.

[체크리스트]
1. 화면별 기능 동작 체크
2. 화면간 데이터 일관성 체크
3. 화면간 연결성 체크
```

### 1. 화면별 기능 동작 체크

각 화면의 모든 기능이 정상적으로 동작하는지 확인합니다.

**체크 템플릿**:
```
{화면명}
| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 |
|-----------|-----------|-----------|------|------|
| [수행할 액션] | [기대하는 동작] | [실제 확인된 동작] | 성공/실패/부분성공 | [특이사항] |
```

**예시**:
```
메인/홈 화면
| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 |
|-----------|-----------|-----------|------|------|
| 로고 클릭 | 메인 페이지 새로고침/유지 | 메인 페이지 새로고침됨 | 성공 | |
| 검색 버튼 클릭 | 검색 화면으로 이동 | 검색 화면으로 이동됨 | 성공 | |
| 메인 메뉴 클릭 | 해당 페이지로 이동 | 일부 메뉴만 동작 | 부분성공 | 프로필 메뉴 링크 누락 |
| 상품 카드 클릭 | 상품 상세 화면으로 이동 | 404 에러 발생 | 실패 | 상세 화면 파일 없음 |
```

**체크 항목**:
- 모든 버튼이 클릭 가능한가?
- 폼 입력이 정상적으로 동작하는가?
- 드롭다운, 모달, 탭 등 UI 컴포넌트가 정상 작동하는가?
- 데이터가 화면에 정상적으로 표시되는가?
- 에러 처리가 적절한가?

### 2. 화면간 데이터 일관성 체크

여러 화면에서 사용되는 데이터가 일관성 있게 표시되는지 확인합니다.

**체크 템플릿**:
```
| 데이터 | 데이터 사용 화면 | 일관성 | 비고 |
|-------------|-------|-------|-------|
| [데이터명] | [화면명] | 일치/불일치 | [차이점] |
```

**예시**:
```
| 데이터 | 데이터 사용 화면 | 일관성 | 비고 |
|-------------|-------|-------|-------|
| 사용자 이름 | 홈 화면, 프로필 화면, 설정 화면 | 일치 | 모든 화면에서 "홍길동"으로 일치 |
| 상품 정보 | 메인 화면, 상품 상세 화면 | 불일치 | 메인 화면에서 클릭한 상품(A)과 상세 화면 상품(B)이 다름 |
| 장바구니 개수 | 헤더, 장바구니 화면 | 일치 | 두 화면 모두 3개로 표시 |
| 가격 정보 | 상품 목록, 장바구니, 결제 화면 | 일치 | 모든 화면에서 동일한 가격 표시 |
```

**체크 항목**:
- 사용자 정보가 모든 화면에서 동일한가?
- 선택한 데이터가 다음 화면에 정확히 전달되는가?
- 목록 화면과 상세 화면의 데이터가 일치하는가?
- 숫자, 날짜, 상태 정보가 일관성 있게 표시되는가?

### 3. 화면간 연결성 체크

화면 간 네비게이션이 정상적으로 동작하는지 확인합니다.

**체크 템플릿**:
```
| 출발화면 | 연결방법 | 도착화면 | 예상 동작 | 실제 동작 | 상태 |
|-----------|-----------|-----------|-----------|-----------|------|
| [화면A] | [버튼/링크명] | [화면B] | [동작설명] | [확인결과] | 정상/비정상 |
```

**예시**:
```
| 출발화면 | 연결방법 | 도착화면 | 예상 동작 | 실제 동작 | 상태 |
|--------|----------|--------|------|------|------|
| 모든 화면 | 로고 클릭 | 메인 화면 | 메인 화면으로 이동 | 동작 안 함 | 비정상 |
| 모든 화면 | 메인 메뉴 | 각 주요 화면 | 각 화면 연결 | 정상 연결됨 | 정상 |
| 로그인 화면 | 로그인 버튼 | 홈 화면 | 홈 화면으로 이동 | 정상 이동 | 정상 |
| 상품 목록 | 상품 카드 클릭 | 상품 상세 | 선택한 상품의 상세 화면 표시 | 항상 첫 번째 상품만 표시 | 비정상 |
| 장바구니 | 결제하기 버튼 | 결제 화면 | 결제 화면으로 이동 | 404 에러 | 비정상 |
| 모든 화면 | 뒤로가기 버튼 | 이전 화면 | 이전 화면으로 돌아감 | 정상 작동 | 정상 |
```

**체크 항목**:
- 모든 네비게이션 링크가 정상 작동하는가?
- 버튼을 클릭했을 때 올바른 화면으로 이동하는가?
- 뒤로 가기 기능이 정상 작동하는가?
- 브레드크럼 또는 네비게이션 경로가 정확한가?
- 외부 링크가 새 창에서 열리는가?

## 프로토타입 수정 및 개선

### 1. Playwright MCP로 브라우저 자동 테스트
Playwright MCP를 활용하여 프로토타입을 브라우저에서 자동으로 열고 테스트합니다.

**기본 테스트 프롬프트**:
```
Playwright MCP를 이용하여 design/uiux/prototype/05-홈.html을
웹브라우저로 열어서 확인해 주세요.
```

**전체 화면 일괄 테스트**:
```
design/uiux/prototype 폴더의 모든 HTML 파일을 브라우저로 열어서
콘솔 에러가 있는지 확인하고 리스트로 정리해 주세요.
```

### 2. 콘솔 에러 확인 및 수정

**Playwright MCP로 에러 자동 수집**:
```
모든 프로토타입 HTML 파일을 브라우저로 열어서
JavaScript 콘솔 에러를 수집하고 표로 정리해 주세요.
```

**에러가 발견된 경우**:
- Playwright MCP가 자동으로 콘솔 에러를 감지합니다
- 에러 메시지, 파일명, 라인 번호를 보고합니다
- 수정을 요청합니다

**프롬프트 예시**:
```
05-홈.html 파일을 브라우저로 열었더니 콘솔에 다음 에러가 나옵니다. 수정해 주세요.

Uncaught ReferenceError: navigateTo is not defined at HTMLButtonElement.onclick
```

### 3. 화면 레이아웃 검증

**스크린샷으로 레이아웃 확인**:
```
05-홈.html을 브라우저로 열어서 전체 화면 스크린샷을 캡처해 주세요.
레이아웃에 문제가 있는지 확인해 주세요.
```

**반응형 디자인 검증**:
```
05-홈.html을 다음 화면 크기로 브라우저에서 열어서 스크린샷 캡처해 주세요:
- 모바일: 375x667
- 태블릿: 768x1024
- 데스크톱: 1920x1080
각 화면에서 레이아웃 문제가 있으면 보고해 주세요.
```

### 4. 개선 요청

**Playwright MCP로 문제 파악 후 개선**:
```
트리구조탐색화면을 웹브라우저로 열어봐요.
좌측 이미지 컬렉션이 이상하게 나오네요.
이미지가 세로로 길게 늘어나 있습니다.
스크린샷을 캡처해서 보여주고 수정해 주세요.
```

**터치 영역 개선**:
```
05-홈.html을 모바일 화면(375x667)으로 브라우저에서 열어봐요.
상단 메뉴 버튼이 너무 작아서 터치하기 어려워요.
스크린샷 찍어서 보여주고, 터치하기 쉽게 더 크게 만들어주세요.
```

**인터랙션 동작 확인**:
```
05-홈.html을 브라우저로 열고 검색 버튼을 클릭해 봐요.
검색 화면으로 제대로 이동하는지 테스트해 주세요.
문제가 있으면 수정해 주세요.
```

### 5. 사용자 플로우 테스트

**전체 플로우 자동 테스트**:
```
Playwright MCP를 이용하여 사용자 플로우를 자동으로 테스트해 주세요:
01-스플래시.html → 05-홈.html → 06-검색.html → 07-상품상세.html

각 화면 전환이 정상적으로 동작하는지 확인하고,
문제가 있으면 수정해 주세요.
```

### 6. 성능 측정 및 최적화

**페이지 로드 성능 측정**:
```
05-홈.html을 브라우저로 열어서 다음 성능 지표를 측정해 주세요:
- 페이지 로드 시간
- 리소스 로드 시간
- 렌더링 완료 시간

성능 문제가 있으면 개선 방안을 제안해 주세요.
```

## 도구 활용

### Sequential MCP 사용
복잡한 프로토타입 개발 시 Sequential MCP를 활용하여:
- 체계적인 화면 개발 계획 수립
- 단계별 개발 진행 상황 추적
- 문제 해결을 위한 구조적 사고

### Playwright MCP 사용
프로토타입 테스트를 위해 Playwright MCP를 활용하여 브라우저 자동화 테스트를 수행합니다.

#### 주요 기능

**1. 브라우저에서 프로토타입 자동 열기**
- 로컬 HTML 파일을 브라우저에서 자동으로 실행
- 파일 경로를 `file://` 프로토콜로 변환하여 접근
- 여러 브라우저(Chrome, Firefox, Safari)에서 테스트 가능

**2. 화면 스크린샷 캡처**
- 전체 화면 또는 특정 요소의 스크린샷 저장
- 다양한 화면 크기(모바일, 태블릿, 데스크톱)로 캡처
- PNG, JPEG 형식 지원
- 반응형 디자인 검증을 위한 비교 자료 생성

**3. 인터랙션 테스트 자동화**
- 버튼 클릭, 폼 입력, 화면 전환 등 사용자 동작 시뮬레이션
- 사용자 플로우 자동 테스트
- 예상 동작과 실제 동작 비교
- 에러 발생 시 자동 감지 및 보고

**4. 다양한 화면 크기에서 테스트**
- 모바일: 375x667 (iPhone SE), 414x896 (iPhone 11)
- 태블릿: 768x1024 (iPad), 820x1180 (iPad Air)
- 데스크톱: 1366x768, 1920x1080, 2560x1440
- 반응형 디자인 동작 검증

**5. 콘솔 에러 및 네트워크 모니터링**
- JavaScript 콘솔 에러 자동 수집
- 네트워크 요청 실패 감지
- 리소스 로드 문제 파악
- 성능 지표 측정

#### 실전 활용 예시

**예시 1: 단일 화면 테스트**
```
Playwright MCP를 이용하여 design/uiux/prototype/05-홈.html을
웹브라우저로 열어주세요.
```

**예시 2: 스크린샷 캡처**
```
05-홈.html을 브라우저로 열고 전체 화면 스크린샷을
design/screenshots/home-desktop.png로 저장해 주세요.
```

**예시 3: 반응형 테스트 및 캡처**
```
05-홈.html을 모바일 화면(375x667)으로 열어서
design/screenshots/home-mobile.png로 스크린샷 저장해 주세요.
```

**예시 4: 인터랙션 테스트**
```
05-홈.html을 열고 다음 동작을 수행해 주세요:
1. 검색 버튼 클릭
2. 검색 화면으로 전환되는지 확인
3. 결과를 보고해 주세요.
```

**예시 5: 콘솔 에러 확인**
```
design/uiux/prototype 폴더의 모든 HTML 파일을
브라우저로 열어서 콘솔 에러를 수집하고
에러가 있는 파일 목록을 정리해 주세요.
```

**예시 6: 전체 플로우 테스트**
```
사용자 플로우를 따라 브라우저에서 자동으로 테스트해 주세요:
01-스플래시.html → 02-온보딩.html → 03-로그인.html → 05-홈.html
각 화면 전환이 정상적으로 동작하는지 확인해 주세요.
```

#### 테스트 체크리스트

프로토타입 개발 완료 후 다음 항목을 Playwright MCP로 검증합니다:

- [ ] 모든 HTML 파일이 브라우저에서 정상적으로 로드되는가?
- [ ] 콘솔에 JavaScript 에러가 없는가?
- [ ] 모든 링크와 버튼이 정상 작동하는가?
- [ ] 모바일, 태블릿, 데스크톱에서 레이아웃이 정상인가?
- [ ] 화면 전환이 올바르게 동작하는가?
- [ ] 이미지와 리소스가 모두 로드되는가?
- [ ] 폼 입력과 검증이 정상 작동하는가?
- [ ] 반응형 디자인이 각 화면 크기에서 적절한가?

## 결과 파일

- **프로토타입 HTML**: `design/uiux/prototype/{화면순서번호 2자리}-{화면명}.html`
  - 화면명은 한글로 작성
  - 예: `design/uiux/prototype/01-스플래시.html`
  - 예: `design/uiux/prototype/05-홈.html`
  - 예: `design/uiux/prototype/12-프롬프트-상세.html`

- **공통 파일**:
  - `design/uiux/prototype/common.js`: 공통 JavaScript
  - `design/uiux/prototype/common.css`: 공통 Stylesheet

## 주의사항

### 개발 관련
- 반드시 기본 HTML과 JavaScript만 사용합니다 (React, Vue 등 프레임워크 사용 금지)
- UI/UX 설계서에 없는 기능은 추가하지 않습니다
- 모든 화면은 독립적으로 실행 가능해야 합니다 (서버 없이도 동작)
- 공통 JavaScript와 Stylesheet를 재사용하여 일관성을 유지합니다

### 데이터 관련
- 샘플 데이터는 실제와 유사하게 작성합니다
- 모든 화면에서 동일한 샘플 데이터를 사용합니다
- 개인정보는 가상의 데이터를 사용합니다

### 스타일 관련
- 스타일가이드를 반드시 준수합니다
- Mobile First 원칙을 따릅니다
- 반응형 디자인을 구현합니다

### 테스트 관련
- 개발 완료 후 반드시 웹브라우저에서 테스트합니다
- 체크리스트를 사용하여 철저히 검증합니다
- 에러가 있으면 즉시 수정합니다

## 개발 팁

### 초보자를 위한 가이드

#### 1. HTML 구조 이해하기
```html
<!DOCTYPE html>           <!-- HTML5 문서임을 선언 -->
<html lang="ko">          <!-- 한국어 문서 -->
<head>                    <!-- 문서 정보 영역 -->
    <meta charset="UTF-8"> <!-- 한글 표시 -->
    <title>화면제목</title>
</head>
<body>                    <!-- 실제 화면에 표시되는 영역 -->
    <div>내용</div>
</body>
</html>
```

#### 2. 자주 사용하는 HTML 태그
```html
<div>그룹 컨테이너</div>
<h1>큰 제목</h1>
<p>단락</p>
<a href="링크주소">링크</a>
<button>버튼</button>
<input type="text" placeholder="입력 필드">
<img src="이미지주소" alt="설명">
```

#### 3. 기본 JavaScript 패턴
```javascript
// 버튼 클릭 이벤트
document.getElementById('버튼ID').addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

// 텍스트 변경
document.getElementById('요소ID').textContent = '새로운 텍스트';

// 화면 이동
window.location.href = '다음화면.html';
```

#### 4. 기본 CSS 스타일
```css
/* 색상 변경 */
.요소 {
    color: #333333;           /* 글자 색 */
    background-color: #ffffff; /* 배경 색 */
}

/* 크기와 간격 */
.요소 {
    width: 100%;              /* 너비 */
    padding: 16px;            /* 안쪽 여백 */
    margin: 8px;              /* 바깥 여백 */
}

/* 정렬 */
.요소 {
    text-align: center;       /* 텍스트 가운데 정렬 */
}
```

## 다음 단계

프로토타입 개발 완료 후:
1. 사용자 테스트 수행
2. 피드백 수집 및 반영
3. 실제 개발 진행 (백엔드 연동)
4. 배포 및 운영

## 참고 자료

### 학습 자료
- HTML 기초: https://developer.mozilla.org/ko/docs/Web/HTML
- CSS 기초: https://developer.mozilla.org/ko/docs/Web/CSS
- JavaScript 기초: https://developer.mozilla.org/ko/docs/Web/JavaScript

### 도구
- 브라우저 개발자 도구: F12 키
- 온라인 HTML 편집기: CodePen, JSFiddle
- 색상 선택기: https://htmlcolorcodes.com/ko/