바이브코딩 워크샵 (Antigravity)

## 목표
이 앱이 어떤 문제를 해결하거나 어떤 일을 도와주는지 한 문장으로 작성한다.

## 사용자
이 앱을 사용할 사람을 구체적으로 작성한다.

## 제약
- 외부 API는 사용하지 않는다.
- 로그인/회원가입은 만들지 않는다.
- 데이터베이스는 연결하지 않는다.
- 새 패키지 설치는 최소화한다.
- 2~3시간 안에 완성 가능한 MVP로 만든다.

# idea-brief.md

## 1. 목표

## 2. 사용자

## 3. 핵심 기능 3개

## 4. 제약
- 외부 API는 사용하지 않는다.
- 로그인/회원가입은 만들지 않는다.
- 데이터베이스는 연결하지 않는다.
- 새 패키지 설치는 최소화한다.
- 2~3시간 안에 완성 가능한 MVP로 만든다.

## 5. 완성 기준

나쁜 한 줄 (3강 비교용)
「할 일 앱 예쁘게 만들어줘」

idea-brief.md 파일을 프로젝트 루트에 만들어줘.
내용은 아래와 같아. plan만, 다른 파일 수정 금지.

[idea-brief 붙여넣기]

Google Antigravity
Git
GitHub CLI
AGENTS.md (에이전트 규칙)
vibe-test 워크숍 폴더

https://antigravity.google/download

winget install -e --id Google.Antigravity

# 설치·업데이트 확인 (Windows)
winget list --id Google.Antigravity

에이전트 패널 열기/포커스: Ctrl + Shift + I
에이전트 패널 토글: Ctrl + L

https://git-scm.com

git --version

winget install --id GitHub.cli

brew install gh

gh --version

gh auth login

gh auth status

mkdir vibe-test
cd vibe-test

git status

Context:
- vibe-test 폴더를 Antigravity workspace로 열어 둔 상태
- 1강 idea-brief.md가 있다면 참고 가능

Goal:
- AGENTS.md와 README.md 초안을 위한 plan만 작성
- 워크숍용 최소 규칙: plan 선행, 승인 후 실행, 작은 범위 유지

Constraints:
- 지금은 plan만. 파일 생성·npm install·터미널 실행 금지
- .cursor 폴더 생성 금지

Acceptance Criteria:
- AGENTS.md에 들어갈 섹션 목록이 표로 정리됨
- README.md 한 줄 소개 초안 포함

plan 승인. AGENTS.md와 README.md만 생성해줘. 다른 파일은 만들지 마.

vibe-test/
├── AGENTS.md
├── README.md
├── idea-brief.md        (1강에서 작성)
└── .git/                (Step 12~13에서 생성)

git init
git add AGENTS.md README.md idea-brief.md
git commit -m "chore: antigravity workshop project init"

gh repo create vibe-test --public --source=. --remote=origin --push

# Windows PowerShell — 홈 또는 작업 드라이브에서
cd vibe-test
dir

git status

On branch main
nothing to commit, working tree clean

mkdir ag-workshop-app
cd ag-workshop-app
git init

Context:
- 빈 React 워크샵 프로젝트 폴더를 Antigravity에서 열어 둔 상태
- 아직 todo/메모 기능 코드는 없음

Goal:
- Vite + React 기반 최소 웹앱 스캐affold plan 작성
- 1차 MVP: 메모(또는 할 일) 1줄 추가 + 목록 표시만

Constraints:
- 지금은 plan만. 파일 생성·npm install·터미널 실행 금지
- UI 라이브러리(MUI, Chakra 등) 추가 금지
- TypeScript 대신 JavaScript(jsx) 사용

Acceptance Criteria (plan 품질):
- 생성할 파일 경로 목록 (package.json, src/App.jsx 등)
- npm scripts: dev, build
- 예상 위험(패키지 설치, 삭제) 명시
- 1차 MVP 범위가 「추가+목록」으로 제한됨

Verification (plan):
- plan을 artifact 또는 markdown 표로 정리

먼저 plan만 작성해. 승인 전까지 코드·파일 변경하지 마.

plan에서 2차 기능(삭제, 필터, 스타일링)은 Phase 2로 미루고
Phase 1만 다시 요약해줘. 파일 수정 금지.

Phase 1 = package.json + src/main.jsx + src/App.jsx + 최소 CSS

plan Phase 1만 승인해. 이제 실행해.

Constraints:
- plan에 없는 파일 생성 금지
- npm install은 plan에 적힌 패키지만
- 완료 후 터미널에서 npm run dev 실행
- 브라우저 localhost 화면이 뜨는지 확인
- 각 파일 역할을 표로 artifact에 정리

destructive command (rm, git clean 등) 금지.

dir
# 또는
ls

vibe-test/
├─ package.json
├─ index.html
├─ vite.config.js
├─ src/
│  ├─ main.jsx
│  ├─ App.jsx
│  └─ App.css
└─ README.md

npm install

npm run dev

VITE v5.x.x  ready in xxx ms
  ➜  Local:   http://localhost:5173/

메모 앱 좀 예쁘게 만들어줘. 알아서 최신 UI로.

Context:
- Vite+React 메모 앱, src/App.jsx에 입력창·추가 버튼·목록만 있음

Goal:
- 빈 문자열은 추가되지 않게
- 추가 시 목록 맨 위에 즉시 표시
- 각 항목 오른쪽에 삭제 버튼

Constraints:
- src/App.jsx, src/App.css 만 수정
- 새 npm 패키지 설치 금지
- plan 먼저 → 승인 후 1단계만 구현

Acceptance Criteria:
- "" 입력 후 추가 클릭 → 목록 변화 없음
- "할 일 1" 추가 → 목록 1행
- 삭제 클릭 → 해당 행만 제거

Verification:
- npm run dev 유지
- 브라우저에서 위 3케이스 실행 후 통과/실패 표

git add .
git commit -m "chore: before bad prompt experiment"

메모 앱 UI 전체를 최신 트렌드로 싹 바꿔줘. 알아서 예쁘게.

실패/불만족 이유:
1. (예: 수정 파일이 10개 넘음)
2. (예: plan 없이 바로 diff)
3. (예: 완료 기준이 없음)

git checkout .
# 또는
git reset --hard HEAD

Context:
[Step 6 Context 그대로]

Goal:
- 각 메모 행에 Delete 버튼

Constraints:
[Step 6 Constraints 그대로]

Acceptance Criteria:
- 2개 추가 후 1개 삭제 → 1개만 남음

Verification:
- 브라우저 수동 테스트 + artifact 표

먼저 이 Task의 implementation plan만 작성해. 파일 수정 금지.
plan 승인 후에만 1단계 구현해.
plan에 수정·생성 파일 목록을 명시해.

Context:
- 3강에서 만든 React 앱을 todo 앱으로 확장 예정
- 현재: [메모 또는 빈 App]

Goal:
- 할 일 추가 + 목록 (4강 Task 1)

Constraints:
- plan 선행
- 새 UI 라이브러리 금지

Acceptance Criteria:
- [관찰 가능한 3개]

Verification:
- npm run dev + localhost 브라우저 테스트

mkdir todo-app-mvp
cd todo-app-mvp
git init

# 프로젝트 루트에서
echo. > tasks-log.md
echo. > requirements.md

Context:
- Vite + React 프로젝트 (src/App.jsx 존재)
- 3강에서 메모/Hello 수준 UI만 있을 수 있음

Goal:
- 「할 일 관리 앱」 MVP 구현 plan 작성
- 기능: 추가, 완료 토글, 삭제, 필터(전체/진행중/완료), 빈 입력 방지, 모바일 레이아웃

Constraints:
- 지금은 plan만. 코드·파일 변경 금지
- UI 라이브러리 추가 금지
- 구현을 4단계로 나눌 것:
  Step A: 추가+목록+빈입력방지
  Step B: 완료 토글+삭제
  Step C: 필터 3종
  Step D: 모바일 CSS (375px)

Acceptance Criteria (plan):
- 각 Step별 수정 파일 목록
- todo 상태 구조 (예: id, text, done) 명시

Verification:
- plan을 markdown artifact로 출력

파일 수정 금지. plan만.

plan Step A만 승인하고 구현해.

Context:
- src/App.jsx 기준

Goal:
- input + 「추가」 버튼
- todos 배열 state: { id, text, done:false }
- 목록 렌더링
- text.trim() === "" 이면 추가하지 않음

Constraints:
- src/App.jsx, src/App.css 만 수정 (plan과 다르면 plan 따름)
- 새 npm 패키지 금지
- Step B(완료/삭제/필터)는 아직 구현 금지

Verification:
- npm run dev 실행
- 브라우저에서:
  1) "첫 할일" 추가 → 1행
  2) "둘째" 추가 → 2행
  3) 빈 칸 추가 클릭 → 변화 없음
- 결과를 통과/실패 표로 artifact

완료 후 변경 파일 목록 출력.

plan Step B만 구현해. Step C/D 금지.

Goal:
- 각 todo에 완료 토글(체크박스 또는 「완료」 버튼)
- 「삭제」 버튼 → 해당 id만 배열에서 제거

Constraints:
- todo state 구조 유지
- 스타일 대규모 변경 금지

Verification:
- "A","B" 추가 → A 완료 → B 삭제 → 목록 A만, done=true
- 통과/실패 표

destructive command 금지.

plan Step C만: 필터 UI + 로직.

Goal:
- 필터 state: "all" | "active" | "done"
- 버튼 3개: 전체 / 진행 중 / 완료
- 선택한 필터에 맞는 todos만 렌더

Constraints:
- 필터 관련 코드 + 최소 CSS만
- 새 파일은 src/components/TodoFilter.jsx 1개까지 허용

Verification:
- 미완료 2 + 완료 1 상태 만들기
- all → 3개, active → 2개, done → 1개
- 375px DevTools에서 필터 버튼 캡처 (깨져도 OK — 5강용)

브라우저 검증 표 artifact.

Context:
- 375px에서 필터 버튼이 두 줄로 깨질 수 있음

Goal:
- 375px, 1280px 모두 필터 영역 레이아웃 정리
- flex-wrap 또는 gap 조정

Constraints:
- CSS/App.css 또는 TodoFilter.jsx 스타일만
- JS 로직·state 구조 변경 금지
- 새 패키지 금지

Verification:
- 375px, 1280px 스크린샷 또는 설명
- 수정 전후 2문장 요약

할 일 앱 회귀 테스트만. 코드 수정 금지 unless 실패 항목 수정 Task 별도.

브라우저에서 실행 후 표 작성:

| # | 시나리오 | 기대 | 결과 |
|---|----------|------|------|
| 1 | 빈 입력 추가 | 변화 없음 | |
| 2 | 2건 추가 | 2행 | |
| 3 | 1건 완료 | done 표시 | |
| 4 | 1건 삭제 | 1행 | |
| 5 | 필터 all/active/done | 개수 일치 | |
| 6 | 375px 레이아웃 | 버튼 겹침 없음 | |

실패 항목마다 bug Task 초안 1줄 제안.

버그: 완료 토글 후 필터「진행 중」에서 항목이 사라지지 않음 (가상 또는 실제)

범위:
1) 원인 조사 — 코드 수정 전 설명
2) 최소 diff
3) 재검증 1케이스

관련 없는 리팩터링 금지.

// src/App.jsx — 개념적 구조
const [todos, setTodos] = useState([]); // { id, text, done }
const [filter, setFilter] = useState('all'); // all | active | done

const addTodo = (text) => {
  if (!text.trim()) return;
  setTodos([...todos, { id: Date.now(), text: text.trim(), done: false }]);
};

// filteredTodos = filter에 따라 todos.filter(...)

git status
git add .
git commit -m "feat(todo): mvp add toggle delete filter mobile"

git diff --stat 기준으로 Conventional Commits 영어 메시지 1줄만 제안해. 실행은 내가 함.

## Task A — add list
(Step 3 프롬프트 전문)

## Task B — toggle delete
(Step 4)

## Task C — filter
(Step 5)

## Task D — mobile css
(Step 6)

4강 Step A 구현 전에 작성했던 todo 앱 plan을 다시 markdown으로 요약해줘.
코드 수정 금지.

| 질문 | YES/NO | 메모 |
|------|--------|------|
| Step A~D로 쪼개져 있었는가? | | |
| 삭제/install 위험이 명시됐는가? | | |
| 실제 구현이 plan Step 순서를 지켰는가? | | |

git log --oneline -5
git show --stat HEAD

변경 파일 수: ___
예상 파일: App.jsx, App.css, (TodoFilter.jsx)
범위 이탈 파일: ___

Constraints: src/ 외 폴더 수정 금지

Context:
- todo 앱, src/App.css 또는 TodoFilter 스타일
- 375px에서 필터 버튼 줄바꿈 문제 (있었다면)

Goal:
- 375px에서 필터 버튼 한 줄 또는 균등 wrap
- 1280px에서도 정렬 유지

Constraints:
- CSS/스타일만 수정
- todos state·filter 로직 변경 금지
- 새 파일 생성 금지

Verification:
- DevTools 375px, 1280px 확인
- 수정 파일명 1~2개만

plan 먼저 → 승인 후 수정.

git diff main -- src/ 를 읽고 코드 리뷰만 해줘.
새 코드 작성·파일 수정 금지.

형식:
| 우선순위 | 파일 | 문제 | 이유 | 제안 |
| High/Med/Low | | | | |

High 1건을 골라 bug Task 초안 작성.

Context: [리뷰 High 항목]

Goal: [한 문장]

Constraints: 최소 변경, plan 선행

Verification: [1케이스]

[ ] 경로: 어디에 쓰나?
[ ] workspace 밖? → 거절
[ ] rm/del/clean/reset? → 거절 또는 plan 확인
[ ] git status 봤나?
[ ] undo 가능?
[ ] 이유 설명?

에러 나니까 node_modules랑 dist, .cache 싹 지워줘.

Context:
- npm run dev 실행 중 [에러 메시지 한 줄 붙여넣기]
- todo-app-mvp 프로젝트

Goal:
- 에러 원인 조사 및 해결 **후보** 3가지 제시

Constraints:
- rm, del, git clean, node_modules 삭제 금지
- 파일 이동·rename 금지
- install은 후보만, 실행 금지

Verification:
- 원인 가설 + 확인 명령(읽기 전용) + 추천 순서

plan 먼저. destructive command 금지.

Context: todo 앱, date-fns 없음

Goal:
- due date 표시를 **새 패키지 없이** 가능한지 plan
- 불가능하면 date-fns vs dayjs 비교 (번들 크기, 사용법)
- install 명령은 plan에만, 실행 금지

Constraints: 코드 수정 금지

Verification: 비교 표 artifact

설치 승인: YES / NO
이유:
대안(없이): native Date.toLocaleDateString()

git status
git branch

아래 git status 출력을 읽고 변경 요약 3줄만. 파일 수정 금지.

[git status 출력 붙여넣기]

---
Safety:
- no rm/del/git clean/git reset --hard
- no install without approval
- workspace 외 경로 금지
- plan before edit

요청: sudo npm install -g typescript && rm -rf node_modules
거절: workspace 밖/전역 install/대량 삭제가 plan에 없어 거절. 원인 조사 Task로 대체.

Context:
- 개인 할 일 웹앱 (React, 로컬)
- 이미: 추가/완료/삭제/필터

Goal:
- 「todo app UX best practices mobile」 리서치
- 우리 앱에 **아직 없는** 개선 3가지

Constraints:
- 코드·README 수정 금지
- 웹 검색 사용
- 링크 3개 이상 (공식/신뢰 출처)

Verification:
| # | 출처 URL | 요약 | 우리 앱 적용 아이디어 |
|---|----------|------|---------------------|

artifact로 저장.

Context: src/ 와 package.json 읽기

Goal: PRD.md 초안 (코드에 있는 기능만 「구현됨」)

포함:
1. 문제 정의 (1강 idea-brief에서 2문장)
2. 사용자
3. 기능 표: 기능 | 상태(구현됨/예정) | 파일
4. 비기능: 모바일 375px, 빈 입력

Constraints:
- 없는 기능을 구현됨으로 쓰지 마
- 파일 수정 금지, PRD 내용만 출력

Verification: 구현됨 항목 3개를 App.jsx 줄번호와 대조

PRD 초안의 「구현됨」 항목 각각에 대해
App.jsx에서 근거 줄번호를 표로 매칭해.
틀린 항목은 「수정안」만. 코드/PRD 파일 수정 금지.

Goal: README.md 전문 작성 (파일 생성 OK)

필수 섹션:
## 목적
## 기능 (체크리스트)
## 요구 사항 (Node 버전)
## 설치 및 실행
- npm install
- npm run dev
## 폴더 구조 (tree)
## 기술 스택
## 로드맵 (7강 Step 1 아이디어 1개)

Constraints:
- package.json scripts와 일치
- 없는 기능 금지

Verification: 5줄 요약 artifact

cd todo-app-mvp
npm install
npm run dev

README의 「설치 및 실행」만 실제와 맞게 수정해. 다른 섹션 건드리지 마.

git log --oneline 과 tasks-log.md 기준 CHANGELOG.md 작성.

형식:
## [0.1.0] - YYYY-MM-DD
### Added
- ...

mkdir docs-capstone
copy README.md docs-capstone\
copy PRD.md docs-capstone\
copy CHANGELOG.md docs-capstone\
copy tasks-log.md docs-capstone\
copy verification.md docs-capstone\

선택: A 할일확장 / B 회의록→할일 / C 독서카드 / D 문의분류 / E 랜딩

MVP (2~3시간, 1~2 기능만):
- 기능1:
- 기능2:
- 제외(하지 않을 것):

1강 idea-brief 연결:

Goal: 새로고침 후에도 todos 유지 (localStorage)
Constraints: 새 패키지 금지, utils/storage.js 1파일까지

Context: [capstone-brief]
Goal: capstone MVP plan only
Constraints: 파일 수정 금지, 2단계 구현으로 분할
Verification: plan.md artifact

00:00 plan 승인
00:15 Task2 구현 시작
00:40 Task3
00:55 verification Task
01:05 bugfix 1건 (선택)
01:15 README
01:25 retrospective.md
01:30 리허설

Context:
- todos state in App.jsx
- 새로고침 시 초기화됨

Goal:
- localStorage key "todos-v1" save/load
- load on mount, save on todos change

Constraints:
- utils/storage.js 신규 1파일 + App.jsx 수정만
- plan 먼저

Verification:
- 2건 추가 → F5 → 2건 유지

## 1. 문제
## 2. 에이전트에 맡긴 일 3가지
## 3. 내가 거절/수정한 순간
## 4. Task before → after
## 5. 실패한 요청 1개
## 6. 다음 개선 2가지

0:00 문제 (30s)
0:30 라이브 데모 localhost (2m)
2:30 Task 1개 + plan 승인 (1m)
3:30 안전 거절/artifact (1m)
4:30 회고 1줄

git add .
git commit -m "feat(capstone): [한 줄 설명]"