ACE AI Startup Bootcamp · 자기주도 학습 교재

D3

PROJECT.md에서
동작하는 MVP 만들기

기획 문서를 AI로 실제 동작하는 서비스로 구현하기

🏗️

Chapter 1

점진적 개발 원칙

⚡

Chapter 2

Antigravity로 MVP 생성

🔧

Chapter 3

오류 수정 & 디버깅

🌐

Chapter 4

로컬 서버 실행

교육 기관

ODA AI SW · ACE Program

과정

창업 지망생 AI 웹 개발

ACE AI Startup Bootcamp · Day 3 도입 및 점진적 개발 원칙

ACE AI Startup Bootcamp · Day 3 자기주도 학습 교재

PROJECT.md에서 동작하는 MVP 만들기

📚 오늘은 Day 2에서 완성한 PROJECT.md를 가지고 실제로 브라우저에서 동작하는 웹 서비스를 만듭니다.
Antigravity(Google AGY)를 주도구로 사용합니다.

1. 오늘은 무엇을 만드는가?

🎯 Day 3 핵심 목표:
HANDOFF_PROMPT.md를 Antigravity에게 전달하여, 브라우저에서 핵심 흐름이 동작하는 MVP 웹 서비스를 완성합니다.

완료 기준: 브라우저에서 index.html을 열었을 때, PROJECT.md에 정의한 핵심 흐름(입력→처리→결과)을 실제로 확인할 수 있어야 합니다.

📄

준비물

Day 2에서 만든 PROJECT.md와 HANDOFF_PROMPT.md 파일이 my-project 폴더에 있어야 합니다.

⚙️

주 도구

Antigravity(Google AGY) — 코드 생성
Codex — 오류 수정 요청, 검증

🌐

최종 결과물

index.html 하나로 동작하는 웹 서비스. 브라우저에서 열면 핵심 흐름 확인 가능.

2. 한 번에 다 요청하면 안 되는 이유

❌ 흔히 하는 실수

"반려동물 산책 매칭 서비스를 전부 만들어줘. 회원가입, 도우미 목록, 예약, 결제, 채팅까지."

→ Antigravity가 너무 많은 것을 한 번에 처리하려다 중요한 기능이 빠지거나, 동작하지 않는 화면이 생깁니다.
→ 오류가 나도 어디서 났는지 찾기 어렵습니다.

❌ 한 번에 다 요청

"모든 기능을 완성해줘"

문제: 어떤 부분이 틀렸는지 알 수 없음.
실패 시 처음부터 다시 해야 함.
AI가 임의로 기능 추가할 가능성 높음.

✅ 단계별 요청

1단계: 기본 구조와 홈 화면만
2단계: 도우미 목록 화면 추가
3단계: 상세보기 + 예약 폼

각 단계마다 브라우저에서 확인 후 다음 단계 진행.

💡 구현 우선순위 결정 원칙:
PROJECT.md의 핵심 흐름 순서대로 구현합니다.
예: 홈 → 조건 입력 화면 → 목록 화면 → 상세 화면 → 완료 화면

ACE AI Startup Bootcamp · Day 3 화면 상태 5가지 UX 원칙

3. 화면 상태 5가지 — 반드시 알아야 할 UX 원칙

모든 화면에는 5가지 상태가 있습니다. Antigravity에게 구현을 요청할 때 이 5가지를 지정하면 완성도 높은 서비스가 만들어집니다.

① Empty State — 빈 상태

데이터가 없을 때 보여주는 화면. 사용자가 다음에 무엇을 해야 하는지 안내해야 합니다.

<div class="empty-state"> <p>🐕 아직 등록된 도우미가 없습니다.</p> <p>조건을 변경하거나 다른 날짜를 선택해보세요.</p> </div>

② Loading State — 로딩 상태

데이터를 불러오는 중일 때. 사용자가 "기다려야 하는구나"를 알게 해야 합니다.

③ Success State — 성공 상태

정상 데이터가 있을 때 보여주는 화면. 핵심 정보를 명확하게 표시합니다.

④ Error State — 오류 상태

문제가 발생했을 때. 사용자가 무엇을 할 수 있는지 알려줘야 합니다.

<div class="error-state"> <p>⚠️ 검색 중 오류가 발생했습니다.</p> <button onclick="retry()">다시 시도하기</button> </div>

⑤ Partial State — 부분 상태

일부 데이터만 있는 상태. 예: 도우미가 1명만 있을 때, 오늘만 가능한 경우.

ACE AI Startup Bootcamp · Day 3 실습: MVP 구조 및 기본 화면

4. 오늘의 실습 — Antigravity로 MVP 구현하기

🔧 실습 전 체크 — Day 2 파일 확인

1

my-project 폴더에 파일 있는지 확인

PROJECT.md와 HANDOFF_PROMPT.md가 있어야 합니다.
없다면 Day 2 교재로 돌아가서 먼저 완성하세요.

2

Antigravity 폴더 경로 확인

Antigravity의 작업 폴더가 my-project로 설정되어 있는지 확인합니다.

⚙️ 실습 1 — 첫 번째 요청: 기본 구조 생성

한 번에 모든 것을 요청하지 말고, 기본 구조부터 시작합니다.

📌 Antigravity 첫 번째 요청: HANDOFF_PROMPT.md와 PROJECT.md를 읽고 아래 범위만 구현해줘. [이번 구현 범위] 1. 기본 HTML 구조 (head, body, 기본 스타일) 2. 상단 네비게이션 바 (서비스 이름, 배경 다크 네이비) 3. 홈 화면 (서비스 소개 문구, 시작하기 버튼) [조건] - 단일 index.html 파일로 구현 - Pretendard 폰트 사용 (CDN) - 다크 모드 기본 스타일 - PROJECT.md의 Out of Scope 항목은 구현하지 마세요 [완료 기준] 브라우저에서 열면 서비스 이름과 "시작하기" 버튼이 보이면 완료

✓

완료 확인

index.html 파일이 생성되면 Chrome 브라우저로 열어 확인합니다.
서비스 이름과 시작하기 버튼이 보이면 다음 단계로!

ACE AI Startup Bootcamp · Day 3 실습: 상세 및 완료 흐름 구현

⚙️ 실습 2 — 두 번째 요청: 핵심 화면 추가

📌 Antigravity 두 번째 요청: 기존 index.html에 아래 화면들을 추가해줘. 기준 문서: PROJECT.md ## 8. Screen List 참고 [추가할 화면] 1. 조건 입력 화면: PROJECT.md에 명시한 입력 필드들 2. [서비스 핵심] 목록 화면: 더미 데이터 3개로 카드 형태 표시 (카드에는 PROJECT.md ## 9. Data Model 기준 필드 표시) [화면 전환] - 홈 "시작하기" 버튼 클릭 → 조건 입력 화면 - 입력 후 "검색/찾기" 버튼 → 목록 화면 [Empty State] - 목록이 비어있을 때 "결과가 없습니다" 메시지 표시 [완료 기준] 버튼을 클릭해서 화면이 전환되고, 더미 데이터 카드 3개가 보이면 완료

⚙️ 실습 3 — 세 번째 요청: 상세보기 + 완료 흐름

📌 Antigravity 세 번째 요청: index.html에 아래 기능을 추가해줘. [추가할 화면/기능] 1. 상세보기 화면: 목록에서 카드 클릭하면 상세 정보 표시 2. 예약/신청 폼: 날짜, 시간 등 PROJECT.md에 명시한 입력 필드 3. 완료 화면: 신청 버튼 클릭 시 "신청이 완료되었습니다!" 메시지 [데이터 저장] 신청 정보를 localStorage에 저장 (Key: 'reservations') [완료 기준] 카드 클릭 → 상세보기 → 신청 버튼 클릭 → 완료 메시지까지 전체 핵심 흐름이 하나의 index.html에서 동작하면 완료

✅ 핵심 흐름 완성 기준 체크:
위 3단계 실습을 마쳤을 때 브라우저에서 아래 흐름이 동작해야 합니다:
홈 화면 → [시작하기 클릭] → 조건 입력 → [검색 클릭] → 목록(카드 3개) → [카드 클릭] → 상세보기 → [신청 클릭] → 완료 메시지

ACE AI Startup Bootcamp · Day 3 오류 대처 3단계 & 복사 프롬프트

5. 오류가 났을 때 어떻게 하는가?

Antigravity가 만든 코드에서 오류가 생기는 것은 정상입니다. 중요한 것은 오류를 읽고 구체적으로 수정 요청하는 방법을 아는 것입니다.

🔴 브라우저 콘솔에서 오류 확인하기

1

Chrome 개발자 도구 열기

Windows: F12 또는 Ctrl + Shift + J
Mac: Cmd + Option + J

2

Console 탭 클릭

빨간색 글자로 오류 메시지가 나타납니다. 이 메시지를 복사하세요.

3

Codex에 오류 메시지 전달

오류 메시지를 붙여넣고 어떤 상황에서 났는지 설명하면 Codex가 원인을 분석해줍니다.

📋 오류 유형별 대처 방법

오류 메시지 패턴	의미	해결 방법
`is not defined`	없는 함수나 변수를 사용함	Codex에 오류 메시지 붙여넣고 "undefined 오류 수정해줘" 요청
`null` 관련	HTML 요소가 없는데 JS가 찾으려 함	"HTML과 JS의 ID가 일치하는지 확인하고 수정해줘" 요청
화면이 흰 화면	JS 오류로 렌더링 실패	콘솔 오류 확인 후 해당 오류 메시지로 수정 요청
버튼 클릭 무반응	이벤트 리스너 미연결	"버튼 클릭 이벤트가 동작하지 않습니다. 이벤트 연결 확인해줘" 요청

🔧 Antigravity에게 오류 수정 요청 프롬프트 예시

📌 오류 수정 요청 방법: index.html에서 아래 문제가 발생했어. [문제 상황] 도우미 카드를 클릭해도 상세보기 화면으로 이동하지 않음. [브라우저 콘솔 오류] Uncaught TypeError: Cannot read properties of undefined (reading 'id') at showDetail (index.html:124) [수정 요청] 위 오류를 수정하고, 카드 클릭 시 상세보기가 정상 동작하도록 해줘. 수정 전에 어떤 부분이 문제인지 먼저 설명해줘.

ACE AI Startup Bootcamp · Day 3 자율 실습 및 체크리스트

6. 도전! 자율형 실습 주제 2종

🏆 [자율 주제 A] 독서 기록 & 요약 서비스 MVP

책 제목, 저자, 읽은 날짜, 감상 메모를 입력하면 목록으로 관리할 수 있는 서비스
핵심 흐름: 책 추가 → 목록 확인 → 상세 보기

📌 Antigravity 요청: BOOK_REQUIREMENTS.md를 읽고 독서 기록 MVP를 만들어줘. Must 기능: 1. 책 추가 폼 (제목, 저자, 읽은 날짜, 별점, 메모) 2. 책 목록 화면 (카드 형태, localStorage 저장) 3. 책 상세보기 (기록한 모든 정보 표시) Empty State: "아직 기록한 책이 없습니다. 첫 책을 추가해보세요!" 기술: 단일 index.html, localStorage

🚀 [자율 주제 B] 내 MVP 기능 개선

기본 MVP 완성 후 아래 중 1가지를 직접 추가해보세요:
• 검색 기능 추가 (목록에서 이름/제목으로 필터링)
• 삭제 기능 추가 (카드에 삭제 버튼)
• 빈 상태/로딩 상태 메시지 추가

7. Day 3 완료 셀프 체크리스트

Antigravity가 my-project 폴더를 작업 경로로 인식하고 있다
첫 번째 요청(기본 구조)을 완료하고 브라우저에서 확인했다
두 번째 요청(목록 화면)을 완료하고 더미 카드 3개가 보인다
세 번째 요청(상세보기 + 완료)을 완료했다
홈 → 입력 → 목록 → 상세 → 완료 전체 흐름이 동작한다
Empty State(빈 상태) 메시지가 있다
오류가 발생했다면 콘솔에서 확인하고 수정 요청했다
신청 정보가 localStorage에 저장된다

📌 다음 시간 예고 — Day 4: 서비스 기능 확장과 완성도 높이기
오늘 만든 MVP를 기반으로 검색, 필터, 오류 처리 등 사용자 경험을 높이는 기능을 추가합니다.

PROJECT.md에서동작하는 MVP 만들기