DAY 1
SESSION 01
Codex & Antigravity 시작하기
AI 개발 도구와 표준 작업 방식 익히기 (6시간 / 360분)
01 AI 개발 기본 파이프라인
02 폴더·파일·절대경로 이해
03 도구별 역할 분담
Day 1. Codex & Antigravity 시작하기 세션 시작
AI 개발 도구와 표준 작업 방식 익히기
Day 1 세션 오프닝입니다. 처음부터 복잡한 코딩을 진행하기보다 폴더 ➔ 파일 ➔ 프롬프트 ➔ 결과확인 ➔ 수정 요청이라는 기본 작업 사이클을 익히는 날임을 강조해 주세요.
- 설문 목적: 수강생의 AI 및 Web MVP 개발 사전 경험, 학습 기대치 파악
- 참여 대상: 1기 및 2기 전체 수강생 (본인의 해당 기수 선택 필수)
- 참여 방법: 해당 기수의 QR 코드를 스마트폰으로 스캔하거나 바로가기 링크로 접속
- 진행 안내: 설문 완료 후 본격적인 5일간의 AI MVP 빌드 실습이 시작됩니다.
- 결과 활용: 1기/2기 맞춤형 멘토링 코칭 및 교육 성과 분석용으로만 활용됩니다.
🌱 1기 (Cohort 1)
1기 사전 설문
스마트폰 QR 스캔
설문 열기 ↗
🌿 2기 (Cohort 2)
2기 사전 설문
스마트폰 QR 스캔
설문 열기 ↗
Day 1 수업 시작 전 사전 설문조사 안내 슬라이드입니다. 수강생들의 AI 및 프로그래밍 경험 수준을 파악하기 위해 1기 또는 2기 구분에 맞추어 QR 코드를 스캔해 설문을 완료하도록 안내해 주세요.
1. 동일 Workspace 구성
Codex와 Antigravity에서 같은 프로젝트 절대경로(my-project)를 열 수 있다.
2. 요구사항 MD 작성
Codex에서 목표, 조건, 완료 기준이 포함된 PAGE_REQUIREMENTS.md를 작성한다.
3. MD 기반 구현
Antigravity에서 작성된 MD를 읽고 index.html 및 화면을 자동 구현한다.
4. 품질 검증 & 보완
Codex에서 구현 결과가 MD와 일치하는지 테스트하고 VALIDATION.md를 작성한다.
오늘 수업 종료 시 수강생들이 스스로 완성하게 될 4가지 핵심 목표입니다.
- 오리엔테이션 (20분): 5일간 프로젝트 전체 흐름 및 오늘의 완료 기준 확인
- 강의 (40분): AI 개발 기본 사이클과 Codex vs Antigravity 도구별 역할 분담
- 시연 (30분): 프롬프트 작성, 파일 변경 확인, 브라우저 실행 및 수정 과정
- 실습 1 (50분): 설치·로그인 및 `my-project` 폴더 열기
- 실습 2 (50분): Codex로 `README.md` & `PAGE_REQUIREMENTS.md` 작성
- 실습 3 (70분): Antigravity로 MD 기반 웹페이지(`index.html`) 구현
- 검증 실습 (40분): Codex로 문서 대비 구현 점검 & `VALIDATION.md` 생성
- 공유 & 회고 (30분): 프롬프트 경험 공유 및 Day 2 예고
Day 1 세부 일정 안내입니다. 강의 40분, 시연 30분 진행 후 즉시 직접 실습으로 들어가는 체계입니다.
Codex: 요구사항 MD 작성 ➔ Antigravity: 서비스 구현 ➔ Codex: 테스트·검증
➔ Codex: 검증 결과를 MD에 반영 ➔ Antigravity: 변경된 MD 기준으로 수정
- AI가 생성한 코드는 완성품이 아니라 검토 대상입니다.
- 한 번에 전체 서비스를 만들기보다, 확인 가능한 작은 단위로 작업을 나눕니다.
- 각 단계마다 파일 형태의 산출물이 남아있어야 다음 AI가 같은 기준을 공유합니다.
Codex는 기획/검증, Antigravity는 개발이라는 역할 분담과 선-문서 후-개발 패턴을 설명해 주세요.
- 프로젝트 폴더: 문서, 코드, 이미지가 함께 위치하는 작업 공간
- 절대경로: 컴퓨터 내에서 프로젝트 위치를 완벽히 지정하는 고유 주소 (예: `/Users/name/my-project`)
- 동일 경로 열기: 두 도구에서 같은 절대경로를 열어야 문서 수정 및 구현 결과가 실시간으로 공유됩니다.
📁 my-project/
├── 📄 README.md
프로젝트 목적
├── 📄 PAGE_REQUIREMENTS.md
Codex 요구사항 명세
├── 📄 VALIDATION.md
Codex 검증 보고서
└── 🌐 index.html
Antigravity 구현 코드
수강생들이 두 도구에서 서로 다른 폴더를 열지 않도록 절대경로 개념을 다시 가리켜 줍니다.
📘 Codex
요구사항 MD 작성·수정, 테스트·자동화 검증, PAGE_REQUIREMENTS.md 생성
⚡ Antigravity
MD 분석, 프로젝트 생성, UI/UX 화면 개발 및 index.html 웹 코드 구현
🌐 브라우저 (Chrome)
AI 설명 대신 실제 사용자 화면과 동작 결과를 직접 검증하는 판단자
도구 간 중복 작업을 하지 않도록 주 도구를 명확히 인식하게 시킵니다.
1. 목표 (Goal)
어떤 결과물(파일, 화면)을 만들어야 하는가?
2. 조건 (Constraints)
디자인 스타일, 폰트, 기술 및 금지 조건
3. 완료 기준 (Criteria)
사용자가 화면에서 무엇을 확인해야 성공인가?
프롬프트를 줄 때 "잘 만들어줘"라는 모호한 표현을 버리고 3요소를 갖추도록 유도합니다.
- 🔒 보안 원칙: API 키, 개인정보, 비밀번호를 프롬프트에 절대 입력하지 않습니다.
- 🔍 변경 파일 확인: AI가 변경한 파일 목록을 적용 전에 실행 창에서 항상 확인합니다.
- 💾 복구 포인트 생성: 정상 동작하는 시점에 복사본을 남겨 언제든 복구할 수 있게 합니다.
초보자 수강생들의 실수를 예방하기 위한 보안 체크리스트입니다.
`my-project` 폴더를 생성하고 Codex와 Antigravity에서 각각 엽니다.
📌 Codex용 프롬프트
Prompt
이 프로젝트 폴더(my-project)의 기본 역할을 정의해 줘.
프로젝트 목적은 "AI 개발 도구를 활용한 기본 웹 서비스 실습"이야.
기본 README.md 파일을 생성하고 설명 구조를 작성해 줘.
두 도구 모두 동일 절대경로로 오픈했는지 실습 조교와 함께 확인해 줍니다.
📌 PAGE_REQUIREMENTS.md 생성 프롬프트
Codex
PAGE_REQUIREMENTS.md 파일을 생성해 줘.
내용: "예비창업자 프로필 및 서비스 소개 페이지"
1. 제목: My Startup Pitch
2. 상단: 창업자 이름, 한 줄 소개, 핵심 분야 태그
3. 중단: 해결하려는 문제, 해결책 카드 2개
4. 하단: 문의하기 버튼
5. 조건: 다크 모드 스타일, Pretendard 폰트
6. 완료 기준: 브라우저에서 올바르게 표시될 것.
Codex로 요구사항 명세서를 먼저 문서화하는 실습입니다.
📌 Antigravity 서비스 개발 프롬프트
Antigravity
PAGE_REQUIREMENTS.md 파일을 읽고, 명시된 요구사항을 완벽히 만족하는 index.html 웹페이지를 만들어 줘.
1. 레이아웃 & 디자인:
- Pretendard 폰트와 모던하고 세련된 다크 글래스모피즘(Dark Glassmorphism) UI를 적용해 줘.
- CSS는 <style> 태그 내에 정리하고 모바일/PC 모두 완벽히 지원하는 반응형 flex/grid 레이아웃을 구현해 줘.
2. 필수 구성 요소:
- 상단: 창업자 프로필(아바타, 이름, 한 줄 소개, 핵심 분야 태그 3개)
- 중단: 정의한 '해결하려는 문제'와 '솔루션(해결책)' 카드 2개 (아이콘, 제목, 상세 설명 포함)
- 하단: 인터랙티브한 '문의하기(Contact)' 버튼 및 호버 애니메이션
3. 완료 기준:
- 작성 완료 후 브라우저에서 바로 실행 가능한 완성도 높은 단일 HTML 파일로 완성해 줘.
- Pretendard 폰트와 깔끔한 다크 UI를 적용해 줘.
- 상단 프로필, 문제/해결책 카드, 하단 문의 버튼을 모두 포함해야 해.
- 작성 완료 후 완성된 웹페이지를 바로 브라우저에서 실행할 수 있게 해줘.
Antigravity가 문서를 읽고 실제 HTML 코드를 자동 작성하는 과정입니다.
📌 Codex 검증 프롬프트
Validation
index.html 코드를 검토하고 PAGE_REQUIREMENTS.md 내용과 비교해 줘.
1. 누락된 요구사항이나 잘못 구현된 부분이 있는지 점검해 줘.
2. VALIDATION.md 파일을 새로 만들고 테스트 체크리스트(통과/미통과)를 작성해 줘.
3. 누락 부분이 있다면 PAGE_REQUIREMENTS.md에 수정 요청사항으로 추가해 줘.
Bonus 01 · 자율 도전 (UI/UX)
📱 모바일 반응형 뷰포트 & 카드 레이아웃 최적화
스마트폰 화면(360px~480px)에서도 좌우 스크롤 없이 1열로 유려하게 정렬되는 반응형 미디어 쿼리 구현
산출물: my-project/index.html (반응형 개선)
Bonus 02 · 자율 도전 (인터랙션)
🌓 인터랙티브 다크/라이트 모드 토글 스위치
JavaScript 이벤트 리스너를 활용하여 브라우저 테마를 전환하고 사용자 선택을 유지하는 토글 버튼 구현
산출물: my-project/index.html (다크모드 스크립트)
기본 Task 01~04를 완료한 수강생에게 반응형 및 인터랙션 도전 과제를 안내해 주세요.
📁 Day 1 산출물 구글 드라이브 업로드
팀별 실습 파일 및 완성 결과물 제출
제출 폴더 ↗
📝 퍼실리테이터 멘토링 일지 작성
전담 퍼실리테이터 일일 코칭 기록
일지 작성 ↗
수업 종료 전 수강생들이 1기/2기 구분에 맞추어 일일 만족도 조사를 작성하고 오늘 산출물을 구글 드라이브에 제출하도록 안내해 주세요.
NEXT STEP
DAY 2 PREVIEW
Day 2. AI와 프로젝트 기획하기
머릿속 아이디어를 AI 지시서 PROJECT.md로 구조화하기
오늘 하루도 정말 수고 많으셨습니다! Day 1 실습 결과 제출을 완료해 주세요 🎉
Day 1 세션을 종료하며 Day 2 기획 수업에 대한 동기부여와 실습 제출 안내를 진행해 주세요.
DAY 2
SESSION 01
AI와 개발 가능한
프로젝트 기획하기
아이디어를 PROJECT.md로 — Codex 기반 기획 문서 완성 (6시간 / 360분)
01 아이디어 → 문제 정의
02 핵심 흐름 · 화면 · 데이터
03 PROJECT.md & HANDOFF
Day 2. AI와 개발 가능한 프로젝트 기획하기
Day 2는 코드를 한 줄도 작성하지 않습니다. 기획 문서 품질이 Day 3~5 구현 품질을 결정함을 강조해 주세요. PROJECT.md가 Antigravity의 단일 기준 문서가 됩니다.
많은 기능보다 하나의 완전한 사용자 흐름을 먼저 만든다.
- MVP 정의: 기능이 적은 완제품이 아니라 가장 중요한 가설을 검증하기 위한 최소 제품
- Day 2 제약: 서비스 코드를 구현하지 않는다. 기획과 요구사항 문서화에 집중
- 결과물: 완성된 PROJECT.md는 Day 3 Antigravity 개발의 단일 기준 문서
Day 2에서는 코드를 작성하지 않습니다. Codex로 기획 문서만 작성합니다. 수강생이 "왜 코드를 안 쓰나요?"라고 물으면, "문서 품질이 구현 품질을 결정한다"고 설명해 주세요.
❌ 아이디어 중심
"AI 기반 여행 플래너 앱을 만들고 싶다"
→ 해결책부터 출발. 누구의 문제인지 불명확.
✅ 문제 중심
"혼자 해외여행 가는 20~30대가 동선 계획에 2시간 이상 소비한다"
→ 사용자 + 상황 + 어려움 + 원하는 변화
문제 문장 필수 요소: 사용자 | 상황 | 어려움 | 원하는 변화
기술이나 기능부터 정하면 실제 사용자 문제와 관계없는 제품이 됩니다. "AI", "플랫폼", "자동화" 같은 단어는 문제 자체가 아님을 강조하세요.
- ❌ "20~30대 직장인" → 너무 광범위. 인터뷰·테스트 대상을 찾기 어려움
- ✅ "퇴근 후 혼자 저녁 식사 장소를 10분 안에 결정하고 싶은 직장인"
문제 상황 캔버스 5요소:
사용자 → 상황 → 현재 행동 → 불편/비용 → 원하는 변화
- 핵심 기준: 연령보다 상황과 행동으로 정의
- 테스트 가능성: 관찰 가능·인터뷰 가능·테스트 가능한 사용자인가?
연령·성별보다 상황과 행동으로 정의하면 인터뷰 대상을 찾기 훨씬 쉬워집니다. 3분 판단 활동: A("모든 직장인")와 B("퇴근 후 혼자 저녁 장소를 고르는 직장인") 중 어느 쪽이 검증하기 쉬운지 묻는다.
입력: 선호 장소와 여행 가능 시간 입력
처리: 조건에 맞는 방문 순서와 이동 동선 생성
결과: 사용자가 일정표를 확인하고 저장
홈 → 조건 입력 → 일정 생성 → 결과 확인 → 일정 저장
- 핵심 흐름 선택 기준: 가장 중요한 가설을 검증하는 단 하나의 흐름
- 로그인은 핵심 흐름이 아닌 보조 기능일 가능성이 높다.
- 이 흐름이 Day 3 구현 순서와 Day 5 데모 시나리오의 기준이 된다.
로그인은 사용자의 최종 목적이 아니라 보조 기능입니다. 핵심 흐름은 Day 3 구현 순서와 Day 5 데모 시나리오의 기준이 된다고 강조하세요.
## 1. Project Overview ## 2. Problem
## 3. Target User ## 4. Current Alternatives
## 5. Core Value and Hypothesis ## 6. Core User Flow
## 7. Features and Acceptance Criteria
## 8. Screen List ## 9. Data Model
## 10. Technical Requirements ## 11. MVP Scope
## 12. Out of Scope ## 13. Risks and Open Questions
## 14. Demo Scenario
- 제공하지 않은 사실은 임의로 확정하지 말고 Open Questions로 분리
- Must 기능은 3~5개로 제한
- 이 문서가 Day 3~5 동안 Antigravity와 Codex가 공유하는 단일 기준 문서
PROJECT.md는 Day 3에 Antigravity가 읽고 서비스를 개발하는 단일 기준 문서입니다. AI가 임의로 추가한 내용은 반드시 검토하고 수정해야 합니다.
- Must: 핵심 사용자 흐름 동작에 반드시 필요 → 이번 MVP 구현
- Should: 중요하지만 없어도 흐름 동작 → Must 완료 후 구현
- Could: 있으면 좋지만 핵심 가설과 무관 → 향후 개선 목록
- Out of Scope: 5일 안에 구현 어려움 → 이번 과정 제외
핵심 질문: "이 기능이 없어도 핵심 사용자 행동을 완료할 수 있는가?"
답이 "예"라면 → Must에서 제외 / Must는 최대 3~5개로 제한
Must는 최대 3~5개로 제한합니다. "이 기능이 없어도 핵심 사용자 행동을 완료할 수 있는가?"를 계속 질문하게 하세요.
📌 Codex 프롬프트:
내가 만들 서비스를 한 장 정의서로 작성해 줘.
아이디어: [내 아이디어를 자유롭게 작성]
1. 목표 사용자 (상황과 행동으로 구체적으로)
2. 사용자 문제 (상황, 불편, 현재 대안 포함)
3. 핵심 가치 제안 (기존 대안보다 무엇이 더 빠르고 쉬운가)
4. 한 줄 서비스 문장
임의로 사실을 추가하지 말고, 불확실한 부분은 질문으로 남겨줘.
- 완료 기준: 목표 사용자, 문제, 핵심 가치, 한 줄 서비스 문장이 각 1~2문장으로 정의됨
강사가 예시 서비스로 먼저 한 구간을 시연한 뒤 학생이 자신의 아이디어로 따라 합니다.
실습 2 프롬프트:
핵심 흐름(입력→처리→결과), 화면 목록(3~5개), 데이터 모델을 구조화해 줘.
실습 3 프롬프트:
PROJECT.md 파일을 14섹션으로 생성해 줘.
Must 기능은 3~5개로 제한, 각 기능에 완료 조건 포함,
불확실한 사실은 Open Questions로 분리해 줘.
- AI 문서 검토: AI가 임의로 추가한 내용은 반드시 검토·수정
- Must 기능이 핵심 사용자 흐름과 연결되는지 확인
AI가 임의로 추가한 내용은 반드시 검토하고 수정합니다. "AI가 사용자의 문제를 임의로 바꾸지 않았는가?"를 확인하게 하세요.
실습 4 프롬프트:
PROJECT.md의 MVP 범위를 검토해 줘.
Must는 3~5개로 제한. 최종 결정 전 문서 수정 금지.
실습 5 프롬프트:
PROJECT.md 기준으로 정상, 빈 값, 실패 사용자 시나리오를 만들어 줘.
문서에 정의되지 않은 동작은 별도 표시. 임의 요구사항 추가 금지.
- 시나리오 3종: 정상 / 빈 값 / 실패
- Day 5 발표에 사용할 정상 데모 시나리오를 이 시점에 확정
시나리오로 문서의 누락·모순을 발견하고 PROJECT.md를 보완합니다. Day 5 발표에서 사용할 정상 데모 시나리오가 정해져 있어야 합니다.
[기준 문서] PROJECT.md를 먼저 읽고 구현 기준으로 사용해 주세요.
[이번 작업 범위] MVP 기본 구조와 첫 번째 핵심 사용자 흐름을 구현해 주세요.
[우선순위] Must 기능부터 구현. Should/Could/Out of Scope 제외.
[제약사항] 문서에 없는 요구사항 임의 추가 금지.
[완료 기준] 로컬 실행 + 핵심 흐름 시작 화면 확인 가능.
[작업 보고] 파일목록·실행방법·구현항목·미구현항목 정리.
- Day 3에 이 지시문을 Antigravity에 그대로 전달하여 개발 시작
HANDOFF_PROMPT.md는 Day 3에 Antigravity에 전달할 개발 지시문입니다. 모든 요구사항을 복사하지 않고 PROJECT.md를 단일 기준 문서로 참조하도록 합니다.
🗺️ 자율 주제 A
AI 기반 여행 일정 플래너 PROJECT.md 작성
핵심 흐름: 장소 입력 → AI 동선 생성 → 일정표 확인 → 저장
Must: 장소 입력 폼, 일정 생성 결과, 저장
산출물: TRAVEL_PROJECT.md
💡 자율 주제 B
내 아이디어 기반 서비스 PROJECT.md 직접 완성
본인의 창업 아이디어로 사용자 문제, 핵심 흐름, Must 3~5개, 완료 기준 직접 정의
산출물: MY_PROJECT.md
기본 따라하기 실습을 먼저 끝낸 학생에게 자율형 실습을 권장합니다. 두 주제 모두 PROJECT.md 형식으로 작성합니다.
- 📄 한 장 서비스 정의서: 목표 사용자, 핵심 문제, 가치 제안, 한 줄 서비스 문장
- 📄 PROJECT.md: Codex로 작성한 14섹션 기획 문서. Day 3 단일 기준 문서
- 📄 시나리오 검증표: 정상·빈값·실패 3개 시나리오와 화면·기능·데이터 연결
- 📄 HANDOFF_PROMPT.md: Day 3 Antigravity 개발 지시문. 기준문서·범위·완료기준 포함
4가지 산출물이 모두 완성되어야 Day 2를 완료한 것입니다. PROJECT.md와 HANDOFF_PROMPT.md가 Day 3의 시작점이 됩니다.
📁 Day 2 산출물 구글 드라이브 업로드
팀별 실습 파일 및 완성 결과물 제출
제출 폴더 ↗
📝 퍼실리테이터 멘토링 일지 작성
전담 퍼실리테이터 일일 코칭 기록
일지 작성 ↗
수업 종료 전 수강생들이 1기/2기 구분에 맞추어 일일 만족도 조사를 작성하고 오늘 산출물을 구글 드라이브에 제출하도록 안내해 주세요.
- 오늘 PROJECT.md와 HANDOFF_PROMPT.md가 완성되었는지 확인
- Must 기능이 3~5개로 제한되었는지 확인
- 정상 데모 시나리오가 정해져 있는지 확인
Day 3 예고:
PROJECT.md에서 동작하는 MVP 만들기
→ Antigravity 구현 + 브라우저 확인 + Codex 검증 사이클
Day 3에는 오늘 완성한 PROJECT.md를 Antigravity에 전달하여 실제 웹 서비스를 구현합니다. HANDOFF_PROMPT.md를 Antigravity에 그대로 전달하면 바로 시작할 수 있습니다.
DAY 3
SESSION 01
PROJECT.md에서
동작하는 MVP 만들기
Antigravity 구현 + Codex 검증 사이클 (6시간 / 360분)
01 문서 기반 구현
02 단계적 구현 사이클
03 Codex 검증 문서
Day 3. PROJECT.md에서 동작하는 MVP 만들기
Day 3의 목표는 화면을 많이 만드는 것이 아니라 핵심 사용자 흐름의 시작과 끝이 연결된 MVP v0.1을 만드는 것입니다. 구현 속도보다 정확성을 강조하세요.
Antigravity에서 작게 구현
→ 브라우저에서 바로 확인
→ Codex에서 문서 대비 검증
→ MD 수정
→ Antigravity에서 반영
- 목표: 핵심 사용자 흐름의 시작과 끝이 연결된 MVP v0.1 완성
- 금지: Antigravity에 전체 서비스를 한 번에 요청하지 않는다
구현 완료 보고가 아니라 검증 결과로 다음 작업을 정합니다.
PROJECT.md
├── Core User Flow → 구현 순서
├── Features → 작업 단위
├── Screen List → 화면 파일과 이동
├── Data Model → 입력과 결과 구조
├── Acceptance Criteria → 구현 완료 판단
└── Out of Scope → 만들지 않을 기능
- 문서의 각 항목은 구현 또는 검증과 연결되어야 한다
PROJECT.md에서 이번 작업에 필요한 화면, Must 기능, 데이터, 완료 조건과 제외 범위만 확인하고 구현 순서를 나눕니다.
my-startup-mvp/
├── PROJECT.md
├── HANDOFF_PROMPT.md
├── src/
│ ├── screens/ 또는 pages/
│ ├── components/
│ ├── data/
│ └── styles/
└── VALIDATION_DAY3.md
- 핵심 흐름: 사용자 입력 → 화면 이벤트 → 데이터 처리 → 결과 상태 변경 → 화면 갱신
- 파일 이름보다 역할과 연결 관계를 이해한다
기술 스택은 운영자가 제공한 스타터 템플릿을 사용합니다. 학생은 프레임워크 선택보다 파일의 역할과 실행 흐름을 이해하는 데 집중합니다.
❌ 큰 요청
"PROJECT.md를 보고 서비스를 전부 완성해 주세요."
✅ 작은 요청
"기본 구조와 홈 화면만 구현해 주세요. 실행 방법과 변경 파일을 보고해 주세요."
한 단계 구현 → 한 단계 확인 → 다음 단계
좋은 구현 단위는 작업 후 브라우저에서 한 가지 결과를 바로 확인할 수 있습니다.
- 기본: 입력 또는 시작 안내 — 다음 행동이 분명한가?
- 로딩: 처리 중 표시 — 중복 클릭을 방지하는가?
- 빈 값: 필요한 입력 안내 — 무엇을 입력해야 하는가?
- 성공: 핵심 결과와 다음 행동 — 목표를 완료했는가?
- 오류: 원인과 다시 시도 방법 — 사용자가 복구할 수 있는가?
정상 화면 하나만으로는 사용자 흐름이 완성되지 않는다.
5가지 상태를 모두 구현해야 MVP라고 할 수 있습니다. 특히 오류 상태는 사용자가 복구할 수 있어야 합니다.
1단계 (요약 먼저):
PROJECT.md와 HANDOFF_PROMPT.md를 읽고 이번 작업 범위를 요약해 주세요.
아직 구현하지 말고 구조·화면·완료기준·질문을 보고해 주세요.
2단계 (구현):
기본 프로젝트 구조와 홈 화면을 구현해 주세요.
홈 화면과 첫 번째 CTA까지만. Out of Scope 구현 금지.
완료 후 실행방법·변경파일·미구현 Must를 보고해 주세요.
구현 전 요약을 먼저 받는 것이 중요합니다. 첫 요청에서 모든 화면을 만들지 않습니다. 실행 명령을 README.md에 기록합니다.
📌 Antigravity 프롬프트:
PROJECT.md의 Core User Flow 중 홈→입력 단계만 구현해 주세요.
정의된 입력 필드와 완료 조건을 그대로 사용하고 빈 값 안내를 포함합니다.
다른 Must 기능은 아직 구현하지 마세요.
- 확인 체크: 홈→입력 이동 / 빈 값 메시지 / 모바일 가로 스크롤 없음
홈에서 입력 화면으로의 이동, 필수 입력 필드, 빈 값 검증을 확인합니다.
📌 Antigravity 프롬프트:
PROJECT.md의 첫 번째 핵심 사용자 흐름을 결과 화면까지 완성해 주세요.
기본, 로딩, 빈 값, 성공, 오류 상태를 문서의 완료 기준에 맞게 처리합니다.
실제 외부 서비스가 필요하면 교육용 Mock 데이터를 사용하고 이를 명시합니다.
- 완료 기준: 정상 시나리오가 처음부터 끝까지 동작 / 5가지 상태 모두 확인
외부 서비스가 필요하면 Mock 데이터를 사용하고 화면에 명시합니다. Mock 데이터임을 화면에 표시해야 합니다.
📌 Codex 프롬프트 1 (비교):
PROJECT.md의 Acceptance Criteria와 현재 구현을 비교해 주세요.
코드는 수정하지 말고 Pass, Fail, Manual Check, Not Implemented로 분류.
근거 파일과 브라우저 확인 방법을 표로 작성해 주세요.
📌 Codex 프롬프트 2 (VALIDATION 작성):
PROJECT.md와 현재 MVP를 비교해 VALIDATION_DAY3.md를 작성해 주세요.
Must별 상태·근거·재현 단계와 Day 4 우선순위 포함. 코드 수정 금지.
검증 결과를 기반으로 Day 4 개선 백로그를 우선순위화합니다. 코드를 수정하기 전에 검증 문서를 먼저 작성합니다.
📝 자율 주제 A
단순 CRUD 노트 앱 MVP v0.1 구현
Must: 노트 생성(localStorage), 목록 조회, 삭제
완료: 노트 생성→조회→삭제가 새로고침 후에도 유지
🔢 자율 주제 B
BMI 계산기 또는 단위 변환기 구현
Must: 입력 폼, 계산 결과 표시, 재입력 버튼
완료: 올바른 입력 시 결과 및 판정이 표시될 것
자율형 실습은 PROJECT.md 없이 직접 명확한 지시문으로 구현하는 연습입니다.
📁 Day 3 산출물 구글 드라이브 업로드
팀별 실습 파일 및 완성 결과물 제출
제출 폴더 ↗
📝 퍼실리테이터 멘토링 일지 작성
전담 퍼실리테이터 일일 코칭 기록
일지 작성 ↗
수업 종료 전 수강생들이 1기/2기 구분에 맞추어 일일 만족도 조사를 작성하고 오늘 산출물을 구글 드라이브에 제출하도록 안내해 주세요.
- 🗂️ 기본 프로젝트 구조: 로컬에서 실행 가능한 파일 구조. 홈 화면이 PROJECT.md와 일치
- 🌐 MVP v0.1: 핵심 사용자 흐름(입력→처리→결과)의 시작부터 끝이 연결
- 📄 VALIDATION_DAY3.md: Must별 Pass/Fail/Manual Check와 Day 4 개선 백로그
Day 4 예고: 서비스 기능 확장과 완성도 높이기
→ 변경 명세 작성 → 선택 트랙 기능 구현 → 회귀 검증 → MVP v1.0
Day 4에서는 오늘 만든 MVP v0.1을 확장하여 선택 트랙 기능을 구현하고 MVP v1.0을 완성합니다.
DAY 4
SESSION 01
서비스 기능 확장과
완성도 높이기
변경 명세 → 트랙 구현 → 예외 처리 → 회귀 검증 (6시간 / 360분)
01 안전한 변경 요구사항
02 선택 트랙 기능 구현
03 회귀 검증 사이클
Day 4. 서비스 기능 확장과 완성도 높이기
Day 4의 핵심 원칙은 "변경은 코드를 바로 수정하는 작업이 아니라 기준 문서를 갱신하는 일부터 시작한다"입니다. 새 기능이 동작해도 Day 3의 정상 시나리오가 실패하면 MVP v1.0이 아님을 강조하세요.
문서 변경이 구현 변경보다 먼저다.
- CHANGE_REQUEST_DAY4.md 없이 Antigravity에 구현을 요청하지 않는다
- 새 기능이 동작해도 Day 3의 정상 시나리오가 실패하면 MVP v1.0이 아니다
- Must 기능은 최대 두 개만 추가한다
수강생이 "바로 구현하면 안 되나요?"라고 물으면, "문서 없이 추가하면 기존 기능이 깨질 위험이 높고, 검증도 어렵다"고 설명하세요.
- 🛒 커머스형: 상품, 주문, Mock Payment, Point — 실제 결제·실개인정보 금지
- 🏠 플랫폼형: 회원 상태, 게시물, 검색, 상태 변경 — 간단한 Mock 사용자 허용
- 🔧 업무도구형: 입력, 조회, 수정, 필터, 내보내기 — 민감 데이터 사용 금지
- 🤖 AI 서비스형: 프롬프트, Mock/실제 AI 응답, 결과 저장 — API 키 노출 금지
한 팀은 한 트랙만 선택. Must 기능은 최대 두 개 추가.
트랙 선택은 VALIDATION_DAY3.md의 Fail 항목과 팀의 서비스 특성을 기준으로 합니다.
[변경 목적] ← 왜 이 기능이 필요한가
[추가할 기능] ← 무엇을 만드는가
[변경할 화면·데이터] ← 어디가 영향받는가
[반드시 유지할 기존 기능] ← 무엇이 깨지면 안 되는가
[신규 완료 조건] ← 언제 완료라고 판단하는가
[오류·예외 상태] ← 어떤 예외를 처리하는가
[Out of Scope] ← 이번에 만들지 않는 것
[회귀 테스트 항목] ← 기존 기능도 확인할 것
- 핵심: 추가할 것과 깨지면 안 되는 것을 함께 쓴다
보존 조건이 누락된 변경 요구사항은 기존 기능을 파괴할 위험이 높습니다. 8개 항목 중 보존 조건과 회귀 테스트를 가장 강조하세요.
- 빈 값: 아무 반응 없음 → 필요한 입력과 위치 안내
- 중복: 동일 항목 반복 생성 → 중복 안내와 기존 항목 보기
- 처리 실패: 기술 오류 노출 → 쉬운 설명과 다시 시도 버튼
- 권한 없음: 빈 화면 → 접근 조건과 돌아가기 제공
- 데이터 없음: 오류처럼 표시 → 첫 데이터 생성 행동 안내
오류 화면도 사용자 흐름의 일부다.
오류 메시지에 항상 다음 행동을 포함해야 합니다. 사용자가 오류에서 복구할 수 있는 UI가 완성도의 핵심입니다.
신규 기능 테스트 + 기존 핵심 흐름 테스트 + 오류 상태 테스트
- 새 기능을 추가했지만 기존 핵심 흐름이 깨졌다 → MVP v1.0이 아니다
- VALIDATION_DAY4.md에 기존 Must와 신규 Must를 구분하여 기록
새 기능을 확인하고 이전 기능도 다시 확인한다.
회귀 테스트는 새 기능 추가 후 기존 기능이 여전히 동작하는지 확인하는 과정입니다. 별도의 자동화 도구 없이 브라우저에서 직접 확인하는 것도 회귀 테스트입니다.
📌 Codex 프롬프트:
PROJECT.md와 VALIDATION_DAY3.md를 읽고 CHANGE_REQUEST_DAY4.md 초안을 작성해 줘.
선택 트랙은 [트랙명]이고 추가할 Must는 [기능]이야.
포함 내용:
1. 변경 목적 및 추가 기능
2. 영향받는 화면 및 데이터 구조
3. 반드시 유지해야 할 기존 핵심 기능 (보존 조건)
4. 신규 완료 조건 및 오류·예외 상태
5. Out of Scope 및 회귀 테스트 항목
아직 PROJECT.md나 코드는 수정하지 마.
- 체크포인트: 추가 Must 최대 2개 / 보존 조건 명시 / 회귀 테스트 포함
추가 Must가 최대 두 개인지, 기존 기능 보존 조건이 명시됐는지, 신규 완료 조건과 회귀 테스트가 있는지 확인하게 합니다.
📌 Antigravity 프롬프트:
갱신된 PROJECT.md와 CHANGE_REQUEST_DAY4.md를 기준으로 선택 기능을 구현해 줘.
- 보존 조건에 있는 기존 핵심 흐름은 절대 변경하지 말 것.
- 작업 전 수정 대상 파일 목록을 먼저 보고할 것.
- 완료 후 변경 파일, 신규 기능 테스트 방법, 기존 기능 동작 확인 결과를 정리해 줘.
- 구현 전: 영향 파일 목록을 먼저 받아 예상 범위를 파악
- 구현 후: 신규 기능 + 기존 흐름이 모두 정상 동작하는지 브라우저 확인
구현 전 영향 파일 목록을 먼저 받는 것이 중요합니다. 예상보다 많은 파일이 영향받는다면 범위를 좁혀야 합니다.
📌 Antigravity 프롬프트:
MVP v1.0의 완성도를 높여 줘.
1. 필수 예외 처리: 빈 값 안내, 중복 입력 방지, 처리 실패 복구, 데이터 없음 안내
2. 원칙:
- 기술 오류 메시지를 사용자에게 날것으로 보여주지 않을 것
- 처리 실패 시에도 사용자가 입력한 내용을 최대한 보존할 것
- 모든 오류 화면에 '다시 시도' 또는 '홈으로 돌아가기' 버튼을 제공할 것
- 완료 기준: 동료가 사전 설명 없이 5분간 핵심 흐름을 완주할 수 있는가?
동료 테스트가 가장 중요합니다. 설명 없이 5분간 사용하게 하고 막히는 지점을 기록합니다.
📌 Codex 프롬프트:
PROJECT.md, CHANGE_REQUEST_DAY4.md, VALIDATION_DAY3.md와 현재 구현을 비교해 회귀 검증해 줘.
1. 기존 Must(Day 3)와 신규 Must(Day 4)를 명확히 구분하여 기록
2. 각 항목을 Pass / Fail / Manual Check로 평가
3. Fail 항목은 재현 단계와 기대/실제 결과를 명시
4. 평가 결과를 VALIDATION_DAY4.md에 기록하고, 코드는 수정하지 마.
- 중요: 기존 Must(Day 3)와 신규 Must(Day 4)를 명확히 구분하여 기록
VALIDATION_DAY4.md는 Day 5 최종 데모 준비의 기준이 됩니다. Fail 항목은 Day 5에 해결하거나 데모 제한사항으로 명시합니다.
⚡ 자율 도전 A · 검색/탐색성
실시간 키워드 검색 & 카테고리 필터링
기존 데이터 목록 상단에 검색창과 탭 필터를 추가하여 새로고침 없이 즉각 필터링되는 인터랙션 구현
산출물: src/components/search-filter.js
🛡️ 자율 도전 B · 완성도/복구
에러 상태 & 빈 값 UX 전면 리팩토링
모든 입력 필드에 실시간 검증(Inline validation)과 에러 토스트 팝업, 친절한 빈 화면 일러스트/아이콘 적용
산출물: src/styles/empty-state.css, toast.js
필수 Task 01~04를 조기 완료한 학생들에게 실시간 검색/필터 또는 에러 복구 UX 심화 도전을 안내해 주세요.
📁 Day 4 산출물 구글 드라이브 업로드
팀별 실습 파일 및 완성 결과물 제출
제출 폴더 ↗
📝 퍼실리테이터 멘토링 일지 작성
전담 퍼실리테이터 일일 코칭 기록
일지 작성 ↗
수업 종료 전 수강생들이 1기/2기 구분에 맞추어 일일 만족도 조사를 작성하고 오늘 산출물을 구글 드라이브에 제출하도록 안내해 주세요.
- 📄 CHANGE_REQUEST_DAY4.md: 추가 기능, 영향 범위, 보존 조건, 회귀 테스트 포함
- 🌐 MVP v1.0: 선택 트랙 기능, 오류·예외 처리, 반응형 개선 완료
- 📄 VALIDATION_DAY4.md: 기존 Must와 신규 Must 구분 회귀 검증 결과
Day 5 예고: 최종 검증·배포·발표와 개선
→ FINAL_VALIDATION.md → 외부 배포 URL → 5분 발표 시연 → 2주 개선 로드맵
VALIDATION_DAY4.md의 Fail 항목이 Day 5의 최우선 개선 대상입니다. 데이터·발표 시나리오 준비를 오늘 시작합니다.
DAY 5
SESSION 01
최종 검증·배포·
발표와 개선
외부 데모 URL 완성 + 5분 발표 + 회고 (6시간 / 360분)
01 최종 검증 피라미드
02 안전한 배포
03 5분 발표 구조
Day 5는 5일 여정의 마지막입니다. 오늘의 목표는 외부 URL에서 핵심 흐름이 동작하는 MVP를 발표하는 것입니다. 발표 직전에 대규모 수정은 하지 않습니다.
- 로컬에서 동작함 ≠ 배포 환경에서 동작함
- AI가 완료했다고 말함 ≠ 사용자가 핵심 흐름을 완료함
- 발표가 끝남 ≠ 검증이 끝남
발표 직전에는 대규모 구조 변경이나 새 기능을 추가하지 않는다.
정상 데모를 깨뜨릴 가능성이 있는 변경은 발표 후 로드맵으로 이동한다.
발표 직전에 새 기능을 추가하려는 팀이 있으면, "발표 후 로드맵으로 이동"을 권장하세요.
- 🟢 자동 검사: 빌드, 테스트, 정적 검사, 민감정보 패턴 확인
- 🟡 수동 검사: 핵심 흐름, 모바일, 오류 상태, 배포 URL
- 🔴 사용자 검사: 설명 없이 첫 행동과 핵심 결과를 완료하는지 관찰
자동화만으로 사용자 경험을 검증할 수 없다.
자동화가 많을수록 좋지만, 사용자 관찰 없이 "완료"라고 말할 수 없습니다. 오늘 상호 리뷰가 가장 중요한 검증입니다.
- 비밀번호, API 키, 토큰이 코드나 MD에 포함되지 않았는가?
- .env 같은 비밀정보 파일이 공개 대상에서 제외됐는가?
- 실제 개인정보 대신 데모 데이터를 사용하는가?
- 실제 결제가 아닌 Mock Payment임을 화면에 표시했는가?
- 외부 API 실패 시 데모가 완전히 중단되지 않는가?
공개 URL은 로컬보다 더 엄격하게 확인한다.
배포 전 이 5가지를 체크리스트로 확인합니다. API 키가 코드에 하드코딩된 경우가 자주 발생합니다.
새 브라우저 → 데모 URL 접속 → 정상 시나리오
→ 빈 값 → 실패 상태 → 모바일 화면
→ 새로고침 → 공유 링크 재접속
- 로컬 캐시나 로그인 상태에 의존하지 않도록 시크릿 창 또는 다른 기기에서 확인
- 핵심: 배포 성공 메시지보다 실제 URL의 사용자 흐름을 확인한다
배포 로그에 "Success"가 뜨더라도 실제 URL에서 흐름이 동작하지 않는 경우가 있습니다. 반드시 다른 기기에서 확인하게 하세요.
- 40초 — 사용자와 문제: "누구가 무엇 때문에 힘들었나?"
- 40초 — 현재 대안과 핵심 가치: Before / After
- 2분 — 핵심 사용자 흐름: 실제 데모 URL 시연
- 50초 — 구현·검증 과정: Codex → Antigravity → Codex 흐름
- 30초 — 배운 점과 다음 단계: 2주 개선 로드맵
- 20초 — 여유: 데모 지연 대비
기능 목록보다 문제와 사용자 변화를 보여준다.
발표 중 데모가 실패할 경우를 대비해 스크린샷을 준비합니다. "인터넷 연결이 불안정할 경우를 대비해..."라고 말하며 스크린샷으로 전환합니다.
📌 Codex 프롬프트:
PROJECT.md, VALIDATION_DAY4.md와 현재 구현을 기준으로 최종 검증 계획을 세워 줘.
안전하게 실행 가능한 테스트·빌드·정적 검사와 민감정보(API Key, Token) 패턴 점검을 수행하고,
브라우저에서 확인할 항목은 Manual Check로 남겨줘.
결과를 FINAL_VALIDATION.md에 근거와 함께 기록해 줘.
검증 전에 코드를 절대 수정하지 마.
- 원칙: 검증 전에 코드를 수정하지 않습니다. 검증 결과에서 필수 문제만 이후 최종 개선에서 처리합니다.
검증 전에 코드를 수정하지 않습니다. 검증 결과에서 필수 문제만 이후 최종 개선에서 처리합니다.
- 배포 대상·제외 파일·환경변수 확인 (6분)
- 공통 배포 방식으로 첫 배포 실행 (10분)
- 새 브라우저/모바일 기기에서 데모 URL 접속 (8분)
- 정상·빈 값·실패 상태 및 반응형 레이아웃 확인 (10분)
- 데모 URL과 알려진 제한사항(Known Limitations)을 README.md에 기록 (6분)
📌 배포 후 README 업데이트 프롬프트 (Codex):
배포 URL에서 확인한 결과를 README.md에 추가해 줘.
포함 항목: Demo URL, 확인된 기능 체크리스트, Known Limitations, 데모 데이터 초기화 방법.
코드는 수정하지 말고 문서만 업데이트해 줘.
다른 학생의 기기에서도 접속을 확인하게 합니다. 모바일 화면에서 가로 스크롤이 생기는 경우가 많으므로 반드시 확인합니다.
📌 Codex 프롬프트:
PROJECT.md와 FINAL_VALIDATION.md를 기반으로 5분 발표안을 작성해 줘.
구조: 문제(40초) → 핵심 가치(40초) → 라이브 데모(2분) → 개발 과정(50초) → 다음 단계(30초)
데모 시나리오는 5단계 이내로 제한하고,
네트워크 장애 시 보여줄 백업 스크린샷과 대체 설명도 포함해 줘.
- 실전 리허설: 5분 발표를 실제로 말해보며 시간을 측정합니다 (초과 시 데모 단계 압축).
리허설 시간이 5분을 초과하면 데모 단계를 줄입니다. 발표 중 "모든 기능을 보여드리겠습니다"라고 하지 않도록 안내합니다.
피드백 기록 5요소:
[관찰] 사용자가 실제로 한 행동
[문제] 목표 달성을 막거나 혼란을 준 지점
[근거] 화면, 메시지 또는 재현 단계
[제안] 바꾸면 좋을 한 가지
[우선순위] 발표 전 필수 / 발표 후 개선
- 블라인드 체험: 설명 없이 동료에게 URL을 주고 첫 5분간 막히는 지점을 관찰
- 최소 긴급 패치: '발표 전 필수'로 분류된 1~2개 항목만 수정 후 재배포
팀이 설명하려고 하면 막아야 합니다. "잠깐, 설명 없이 사용해 보세요"라고 안내합니다. 막히는 지점이 실제 UX 문제입니다.
📌 Codex 프롬프트:
5일간의 프로젝트(PROJECT.md, FINAL_VALIDATION.md, FEEDBACK_NOTES.md)를 바탕으로 NEXT_STEPS.md를 작성해 줘.
1. 5일간 검증된 핵심 가설과 사용자 반응
2. 기술적 부채 및 향후 개선 백로그
3. 향후 2주간의 주차별 개발 로드맵 (Week 1, Week 2)
4. 창업 관점에서의 다음 액션 아이템
- 5일 과정 종료 후에도 실제 창업/비즈니스로 확장할 수 있는 구체적인 실행 계획 수립
NEXT_STEPS.md는 5일 완주 후 실제 비즈니스로의 도약을 돕는 로드맵입니다.
🛡️ 자율 도전 A · 안정성
데모 안전 모드 (Mock Fallback Toggle) 구현
발표 중 Wi-Fi 장애나 API 단절이 발생해도 시연이 중단되지 않도록 원클릭 데모 Mock 모드 토글 구축
산출물: src/demo-mode-fallback.js
🌐 자율 도전 B · 바이럴/공유
오픈 그래프(OG) 및 소셜 카드 최적화
카카오톡, 슬랙, SNS에 배포 URL을 공유할 때 대표 썸네일과 서비스 소개가 매력적으로 표시되도록 메타태그 적용
산출물: index.html (OG 태그), og-thumbnail.png
배포와 발표 준비를 일찍 마친 팀에게 라이브 데모 안전 모드 및 소셜 공유 최적화 도전을 권장하세요.
- 문제 명확성: 목표 사용자와 문제가 구체적인가?
- 핵심 가치: 기존 방법보다 나아지는 변화가 보이는가?
- 데모 완성도: 외부 URL에서 핵심 흐름이 동작하는가?
- 문서 일치성: PROJECT.md와 구현 결과가 일치하는가?
- 검증 과정: 테스트·오류·제한사항을 솔직하게 설명하는가?
- 향후 계획: 다음 검증 또는 개선이 구체적인가?
평가 기준을 미리 공개합니다. "솔직한 제한사항 설명"을 긍정적으로 평가한다고 강조하세요.
- 5일 동안 검증한 가장 중요한 가설은 무엇인가?
- 사용자 반응으로 새롭게 알게 된 사실은 무엇인가?
- 제거하거나 미룰 기능은 무엇인가?
- 다음에 인터뷰하거나 테스트할 사용자는 누구인가?
- 2주 안에 개선할 기능·문서·검증 항목은 무엇인가?
💡 가설 수립 → AI 문서 기획 → 초고속 MVP 개발 → 회귀 검증 → 배포 & 데모 피칭 완료!
회고는 개인 또는 팀 단위로 진행합니다. NEXT_STEPS.md를 작성하면 과정 이후에도 계속 발전시킬 수 있습니다.
📁 Day 5 산출물 구글 드라이브 업로드
팀별 실습 파일 및 완성 결과물 제출
제출 폴더 ↗
📝 퍼실리테이터 멘토링 일지 작성
전담 퍼실리테이터 일일 코칭 기록
일지 작성 ↗
수업 종료 전 수강생들이 1기/2기 구분에 맞추어 일일 만족도 조사를 작성하고 오늘 산출물을 구글 드라이브에 제출하도록 안내해 주세요.
- 설문 목적: 5일간의 AI MVP 과정 이수 후 수강생의 성장도 측정 및 만족도 종합 평가
- 참여 대상: 1기 및 2기 전체 수강생 (본인의 해당 기수 선택 필수)
- 설문 내용: AI 도구 활용 역량 향상도, 커리큘럼 만족도, 퍼실리테이터 멘토링 평가
- 유의 사항: 본 설문은 수료증 발급 및 차기 교육 고도화의 핵심 기초 자료로 활용됩니다.
🌱 1기 (Cohort 1)
1기 사후 평가
스마트폰 QR 스캔
설문 열기 ↗
🌿 2기 (Cohort 2)
2기 사후 평가
스마트폰 QR 스캔
설문 열기 ↗
5일 과정을 모두 마친 후 진행하는 최종 사후 설문조사입니다. 1기 또는 2기 구분에 맞추어 모든 수강생이 빠짐없이 완료할 수 있도록 안내해 주세요.
COMPLETED
AI STARTUP BOOTCAMP
5일 AI 창업 부트캠프
여정 완주를 축하합니다! 🎉
Day 1 환경구축 ➔ Day 2 PROJECT.md ➔ Day 3 MVP v0.1 ➔ Day 4 MVP v1.0 ➔ Day 5 배포 & 발표
여러분의 아이디어가 AI를 통해 실제 동작하는 비즈니스가 되었습니다. 앞으로의 도전을 응원합니다! 🚀
수강생들의 여정을 격려합니다. 부트캠프가 끝이 아니라 실제 창업의 시작임을 강조해 주세요.