Prototype Development

프로토타입 개발

목적

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 개발

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

주요 기능:

• 샘플 데이터 생성:

  • 일관된 형식의 예제 데이터 생성
  • 화면 간 데이터 일관성 유지

  // 예시: 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 }
    ]
  };
  

• 화면 전환 함수:

  • 화면 간 이동을 처리하는 공통 함수
  • 데이터 전달 및 상태 유지

  function navigateTo(screenNumber, data) {
    const screenName = screenNumber.toString().padStart(2, '0');
    window.location.href = `${screenName}-화면명.html?data=${JSON.stringify(data)}`;
  }
  

• 공통 UI 컴포넌트:

  • 헤더, 푸터, 네비게이션 등 반복 사용되는 요소
  • 일관된 사용자 경험 제공

2-2. 공통 Stylesheet 개발

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

주요 내용:

• 디자인 시스템 변수:

  :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;
  }
  

• 반응형 디자인:

  /* 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. 보조 화면 개발 (예: 설정, 도움말)

각 화면 개발 시 포함 사항:

<!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 파일에 샘플 데이터 정의
• 각 화면에서 동일한 데이터 구조 사용
• 화면 간 이동 시 데이터 전달

예시:

// 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. 화면 간 전환 구현

각 화면이 자연스럽게 연결되도록 네비게이션을 구현합니다.

구현 방법:

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

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

// 뒤로 가기
<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 구조 이해하기

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

2. 자주 사용하는 HTML 태그

<div>그룹 컨테이너</div>
<h1>큰 제목</h1>
<p>단락</p>
<a href="링크주소">링크</a>
<button>버튼</button>
<input type="text" placeholder="입력 필드">
<img src="이미지주소" alt="설명">

3. 기본 JavaScript 패턴

// 버튼 클릭 이벤트
document.getElementById('버튼ID').addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

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

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

4. 기본 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/