PRD부터 Vercel 배포까지 한 세션에 끝냈다 — Claude Code 스킬 체인으로 토요일 웹앱 과제 해준 후기
📝 한줄 요약
Claude Code 스킬 3개(show-me-the-prd → kkirikkiri → vercel)를 이어 붙여, 머릿속에만 있던 "혼밥 친구 매칭" 아이디어 한 줄을 PRD 4종 문서 → React 웹앱 → Vercel 배포까지 한 세션에 끝냈다.
바쁘시면 이것만 읽어도 돼요:
GPTers 토요일 웹앱 과제 + 평소 관심사(혼밥/새 친구 만들기)를 합쳐 "한끼"라는 밥친구 매칭 MVP를 만듦
AI에게 "코드 짜줘"가 아니라 "인터뷰로 범위부터 좁혀줘"로 시작한 게 결정타였음
단일 선택 질문에도 자연어로 "1, 3번 같이 가자"라고 답하니 AI가 알아서 조합해줌
스크린샷 한 장 + "메뉴 더 늘리고 다중 선택 되게 해줘" 한 문장으로 데이터 타입(string → string[])까지 전 영역 일괄 수정됨
PRD에 "절대 하지 마(NEVER DO)" 가드레일을 적어두면 빌드 단계에서 AI가 알아서 지킴
결과: 아이디어 → 배포까지 하루. 다른 아이디어에도 같은 스킬 체인을 그대로 재사용 가능
🎯 이런 분들께 도움돼요
GPTers Claude Code 스터디 수강생 (특히 토요일 과제 어디서부터 손대야 할지 막막한 분)
사이드 프로젝트 아이디어는 있지만 "내가 코딩을 잘 못해서…"에서 멈춘 비개발자
회사 일 외에 개인 MVP를 주말 안에 빠르게 검증해보고 싶은 일반 직장인
😫 문제 상황 (Before)
GPTers 스터디 토요일 오프라인 과제 — "한 화면 웹앱을 만들어서 공개 URL을 제출하세요"가 주어졌다. 평소에 혼자 밥 먹을 때마다 "이런 거 같이 먹을 사람 매칭해주는 앱 있으면 좋겠다", "새 친구는 어떻게 만들지" 같은 생각이 머릿속에 둥둥 떠다녔지만, 막상 만들려고 하면 늘 같은 자리에서 막혔다.
아이디어를 어디서부터 어떻게 PRD로 정리하지?
디자인은? 데이터 모델은? 화면 흐름은?
코드 한 줄도 안 짠 상태에서 Vercel 배포까지 가는 길이 너무 멀어 보였다.
스터디 토요일 과제는 미룰 수가 없었고, "이번엔 진짜 끝까지 가보자"는 마음으로 책상에 앉았다.
🛠️ 사용한 도구
Claude Code (CLI) — Opus 4.7 모델
사용한 스킬 체인
gpters-saturday-webapp— 토요일 과제 진행 가이드show-me-the-prd— 인터뷰 → PRD 4종 문서 자동 생성kkirikkiri— 빌드 역할 분담 + 실행vercel— Vercel CLI 설치/배포
특이사항: 코드는 단 한 줄도 직접 짜지 않음. AI가 PRD 보고 직접 짠 코드를 그대로 배포했다.
🔧 작업 과정
1) "혼밥 친구 매칭" 한 줄을 종이로 옮겨준 10라운드 인터뷰
처음부터 "한끼"라는 이름이 있었던 게 아니다. 그냥 머릿속에 있던 한 문장이 출발이었다.
혼밥할 때 모바일 앱에서 같이 밥먹는 밥친구를 찾아주는 서비스를 만들고 싶어.
이 문장 하나를 던지자 AI가 갑자기 "코드를 쓸까요?"가 아니라 객관식 질문을 던지기 시작했다.
주로 쓰는 사용자는 누구예요? → (선택지 4개)
이 사용자가 가장 불편하게 느끼는 건? → (선택지 4개)
사용자가 이 서비스를 켜는 순간은? → (선택지 4개)
첫 화면에서 반드시 해야 할 핵심 행동 1개는?
카드에 들어갈 정보는?
...
한 번에 하나씩, 10라운드가 넘게 이어졌다. 흥미로웠던 건 단일 선택 질문이라도 자연어로 조합해서 답할 수 있다는 점이었다.
1, 3번을 동시에 고려해서 진행해보자
그러면 AI가 "두 가지를 함께 반영하겠습니다"라고 받아치고 다음 질문으로 넘어갔다. 마치 노련한 기획자랑 마주 앉아 대화하는 기분.
10라운드가 끝나자 01-idea-brief.md 파일 한 장이 떨어졌다. 거기엔 내가 한 마디씩 흘렸던 답들이 "타겟 사용자 / 핵심 문제 / 핵심 행동 / MVP 범위 / 제외 범위 / 이름" 항목별로 깔끔하게 정리되어 있었다. 이름은 추천받은 후보 중 "한끼"를 골랐다.
2) show-me-the-prd 한 줄로 PRD 4종 문서가 떨어졌다
브리프가 준비됐으니 다음 단계.
일단은 지금 브리프대로 show-me-the-prd로 PRD 작성을 진행해보자.
이 한 줄을 던졌더니 시각 톤(레트로/아날로그) → 기능 조합 → 데이터 모델 → Phase 분리 → 기술 스택(Vite + React + Tailwind)까지 4-5라운드 추가 인터뷰를 짧게 끝낸 뒤, PRD/ 폴더에 문서 5종이 한꺼번에 생겼다.
01_PRD.md— 제품 요구사항02_DATA_MODEL.md— 데이터 구조03_PHASES.md— MVP / Phase 2 / Phase 3 분리04_PROJECT_SPEC.md— 스펙 + "절대 하지 마" 가드레일README.md— 인덱스
특히 04_PROJECT_SPEC.md에 들어간 "절대 하지 마" 섹션이 인상적이었다. "로그인 만들지 마", "한글 폴더명 쓰지 마", "톤/표현 가드레일" 같은 항목을 미리 적어두니, 나중에 빌드 단계에서 AI가 자동으로 그걸 피해서 코드를 짰다. 가드레일은 코드 짠 뒤가 아니라 PRD 단계에서 적어두는 게 진짜 효과가 있다는 걸 그때 알았다.
PRD가 떨어지자마자 바로 빌드로 넘어가지 않고 한 번 더 멈췄다.
자체 검토 한번 하고 다음으로 넘어가자
AI가 본인이 만든 PRD를 다시 읽어보더니 "한 화면 MVP의 정의가 모호하다", "보조 시나리오를 Phase 2로 분리해야 깔끔하다", "카피 톤 가이드가 빠졌다" — 세 가지 보강 포인트를 스스로 찾아 고쳤다. 사람이 한 번 더 검토 요청만 했을 뿐인데 PRD 품질이 한 단계 올라갔다.
3) kkirikkiri로 단일 세션 빌드 — 역할만 명시하고 직접 짜기
PRD 문서를 읽고 "한끼" 웹앱 Phase 1 MVP를 병렬로 개발해줘.
처음엔 멀티 에이전트 병렬 빌드(여러 AI가 동시에 다른 컴포넌트를 짜는 방식)도 옵션으로 떴는데, "이번 MVP는 PRD가 명확하니까 단일 세션에 PM/프론트/디자이너/QA 역할만 명시하고 내가 직접 짤게요"로 정리하고 진행했다.
그러자 진짜로 한 세션 안에서:
Vite + React + TypeScript + Tailwind 스캐폴딩
종이 질감 배경 + 한글 serif 폰트(Gowun Batang) + 스탬프 형식 점수 배지 같은 레트로/아날로그 디자인 토큰 정의
4문항 진단 → 카드 피드 → 같이 먹어요 신청 모달까지 단일 SPA로 구현
8장의 가상 밥친구 카드와 4문항 진단 데이터를 mock JSON으로 작성
궁합 점수 계산식(식성은 유사도, 말투/페이스/만남 톤은 일치/인접/먼 거리)까지 알아서 구현
"레트로/아날로그 감성"이라는 말 한 마디가 종이 질감, 누런 베이지 톤, 스탬프 같은 점수 배지, 한글 serif 폰트로 구체화돼서 떨어지는 걸 보면서 한 번 더 놀랐다. 색상 코드를 던진 적도, 폰트 이름을 말한 적도 없었다.
4) 스크린샷 한 장 + 한 문장으로 데이터 구조가 통째로 바뀜
빌드를 마치고 진단 화면을 띄워봤더니, 첫 번째 문항(식성)의 옵션이 너무 단순했다. 한식/일식/양식… 정도밖에 안 보였고, 단일 선택만 됐다. 스크린샷을 캡쳐해서 한 줄을 보냈다.
[Image 첨부] 이부분의 메뉴들을 조금 더 구체화하고 많이 선택가능하게 할 수 있어?
그러자 AI가 알아서:
옵션을 4개 → 8개 로 세분화 (한식 / 일식 / 양식 / 분식 / 아시안 / 샐러드·포케 / 카페·브런치 / 야식·술)
단일 선택 → 다중 선택으로 UI 변경 (최소 1개 / 최대 5개 제한, 카운터 표시)
데이터 타입을
string→string[]으로 전 영역 일괄 변경점수 계산식을 단순 일치에서 두 집합의 교집합/합집합 비율(Jaccard 유사도)로 교체
기존 사용자가 저장해둔 데이터가 깨지지 않게 자동 무효화 가드까지 추가
mock 데이터 8장의 식성 정보도 배열로 마이그레이션
내가 요청한 건 정말 한 문장이었는데, 데이터 타입까지 통째로 갈아엎는 변경이 깔끔하게 일어났다. 이건 수동으로는 절대 못 했을 작업이다.
5) Vercel 배포 — "배포해줘"
다음, 배포해줘
이 한 마디로 vercel.json 작성 → CLI 배포 → 공개 URL 발급까지 자동으로 이어졌다. 토요일 과제 제출용 URL이 손에 들어왔다.
다만 Vercel CLI 54 기본 동작이 프로덕션 배포로 바뀐 탓에 예측 가능한 URL이 추가로 발급되는 이슈가 있었고, 이 부분은 비공개 검증(SSO 보호 헤더 확인 + 대시보드에서 Deployment Protection 활성화)으로 마무리했다.
✅ 결과 (After)
Before vs After
항목
Before
After
아이디어 → 배포까지 거리
"그게 가능해?" 단계에서 멈춤
하루 안에 배포 URL 손에 들어옴
PRD 작성
어디서부터 시작해야 할지 막막
인터뷰 답만 했더니 4종 문서 + 인덱스
디자인 결정
색/폰트/레이아웃 일일이 결정 부담
"레트로/아날로그" 한 마디로 톤 결정
코드 작성
직접 짜야 한다는 부담
단 한 줄도 직접 안 짬
토요일 과제 제출물
백지
동작하는 웹앱 + 공개 URL + 코드베이스
결과물
웹앱: 한끼 (밥친구 매칭 MVP)
4문항 성향 진단
궁합 점수 기반 카드 피드 (8장)
"같이 먹어요" 신청 모달
산출물 폴더 구조:
01-idea-brief.md/PRD/5종 /src/전체 코드 /DEVLOG.md다음 아이디어에도 그대로 쓸 수 있는 스킬 체인 경험치
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
처음부터 "코드 짜줘"라고 하지 말기. "인터뷰로 범위부터 좁혀줘"로 시작하니, 내가 미처 답을 못 정한 부분(타겟 사용자, 핵심 행동, 제외 범위)이 질문 형태로 떠올라서 자연스럽게 답을 내릴 수 있었다.
단일 선택 질문에도 자연어로 조합 답이 가능하다. "1, 3번 같이 가자", "2번 중점으로 3번도 가능하게"처럼 말하면 AI가 그대로 받아준다. 굳이 AI가 정해준 선택지에 갇힐 필요 없음.
시각적 변경은 스크린샷 한 장 + 한 문장. 말로 길게 설명하지 말고 화면을 던지고 "이 부분 이렇게 바꿔줘"가 제일 빠르다.
PRD에 "절대 하지 마" 가드레일을 미리 적어두기. 톤/표현, 사용 금지 라이브러리, 기능 제외 범위 같은 걸 PRD 단계에서 박아두면, 빌드 단계에서 AI가 자동으로 지킨다. 코드 짠 뒤에 "이거 빼줘"라고 하는 것보다 훨씬 효율적.
자체 검토 한 번 더 시키기. PRD 떨어지면 바로 빌드로 넘어가지 말고, "자체 검토 한번 하고 다음으로 넘어가자"라는 한 마디만 던지자. AI가 자기가 만든 문서를 다시 읽고 부족한 부분을 채워준다.
이렇게 하면 안 돼요
"멋있는 웹앱 만들어줘"처럼 모호하게 시작하지 않기. 인터뷰 단계 없이 바로 빌드로 들어가면, 결과물도 모호한 채로 나온다.
한 번에 모든 기능을 다 넣으려 하지 않기. Phase 분리(MVP / Phase 2 / Phase 3)를 PRD에 미리 적어두면, 토요일 안에 끝나는 범위가 자연스럽게 줄어든다.
자기 검토 단계 건너뛰지 않기. PRD 처음 나왔을 때는 늘 한두 군데 모호한 부분이 있다. 한 번 더 검토 요청 안 하면 그게 그대로 코드로 굳어진다.
🌍 다른 업무에 적용한다면?
이 스킬 체인(show-me-the-prd → kkirikkiri → vercel)은 한끼에만 쓸 수 있는 게 아니다. 다음과 같은 곳에 그대로 옮겨 쓸 수 있다.
사내 신청 폼 / 출석 체크 같은 한 화면 사이드 툴: PRD부터 배포까지 같은 흐름.
개인 가계부 / 운동 기록 / 책 메모 같은 라이트한 개인용 앱: 백엔드 없이 localStorage만으로 충분한 경우 정말 빠르게 만들 수 있음.
이벤트 페이지 / 청첩장 / 모임 안내 페이지: 디자인 톤만 바꾸면 한 세션에 끝남.
회사 내부 PRD 초안 만들기: 코드는 안 짜고
show-me-the-prd만 쓰는 것도 충분히 의미 있음. 회의 한 번 분 량의 결정을 인터뷰로 압축할 수 있다.
🚀 앞으로의 계획
한끼는 PRD에 이미 Phase 2 명세를 적어뒀다. 이번 토요일 MVP에서 제외했던 항목들을 다음 주말에 같은 흐름으로 붙여볼 예정.
신청 후 채팅/약속 잡기 흐름
약속 카드 (어디서, 언제, 몇 명)
손입 카드 (실제 매칭된 카드 히스토리)
사용자 본인 카드 등록 (mock → 실제 입력)
이번에 만든 PRD 4종 문서가 그대로 Phase 2 작업의 입력이 되기 때문에, 같은 스킬 체인을 한 번 더 돌리면 된다.
📋 재사용 가능한 프롬프트
프롬프트 1: 아이디어 인터뷰 시작
토요일 안에 한 화면 MVP로 만들 수 있는 웹앱을 만들고 싶어. 아이디어는 [여기 한 줄로 적기]야.
바로 코드 짜지 말고, 먼저 객관식 인터뷰로 범위부터 좁혀줘. 한 번에 하나씩 질문하고, 내 답을 받아 다음 질문에 반영해줘. 인터뷰가 끝나면 정리된 브리프 한 장을 파일로 저장해줘.
프롬프트 2: 브리프 → PRD 변환
방금 만든 브리프를 바탕으로 PRD를 만들어줘.
조건:
토요일 오프라인 모임 안에 구현할 수 있는 MVP 범위로 작게.
한 화면에서 핵심 행동 하나가 작동하는 구조로.
로그인, DB, 결제, 복잡한 백엔드는 제외.
입력값, 출력값, 화면 구성, 완료 기준을 분명히.
Vercel CLI로 배포 가능한 정적 구조로.
"절대 하지 마" 섹션에 톤 가드레일과 사용 금지 항목 을 적어줘.
프롬프트 3: PRD 자체 검토
PRD 자체 검토 한번 하고 다음으로 넘어가자. 모호한 정의, 빠진 가드레일, Phase 분리가 어색한 부분을 직접 찾아서 보강해줘.
프롬프트 4: 단일 세션 빌드 요청
PRD 문서를 모두 읽고 [프로젝트명] Phase 1 MVP를 빌드해줘.
진행 방식:
단일 세션 순차 빌드.
PM / 프론트 / 디자이너 / Mock 데이터 / QA 역할은 명시만 하고 네가 직접 구현.
"절대 하지 마" 섹션을 빌드 내내 지켜줘.
프롬프트 5: 화면 피드백 + 일괄 수정
[스크린샷 첨부] 이 부분의 [메뉴 / 레이아웃 / 버튼]을 [요청 내용]으로 바꿔줘. 데이터 타입이나 점수 계산식이 같이 바뀌어야 한다면 전 영역을 일관되게 수정해줘.
프롬프트 6: 배포
Vercel CLI로 배포해줘. Deployment Protection 설정 방법도 같이 알려줘.
