2회차 가이드 | 내 앱 PRD & 첫 배포

수업 전에 읽어보세요

오늘부터 진짜 내 앱입니다

🎯 오늘의 목표

어제 정한 내 앱 아이디어로 PRD를 쓰고, 개발하고, 인터넷에 배포까지 합니다. 오늘 끝나면 카톡으로 보낼 수 있는 진짜 URL이 생겨요.

✅ 꼭 가져오세요

어제 메모한 ① POV 한 문장 (WHO·WHAT·WHY) ② 앱 이름 ③ 핵심 기능 3개. 특히 POV 한 문장은 오늘 PRD의 첫 줄로 그대로 들어갑니다. 못 정했어도 괜찮아요, 수업 시작할 때 같이 찾습니다.

🛠️ 오늘 쓰는 도구

어제 설치한 것 그대로예요. 새로 설치할 건 없습니다! 혹시 어제 못 끝낸 설치가 있으면 시작 전에 알려주세요.

💡 오늘의 핵심 흐름

PRD 쓰기 → 4종 문서 만들기 → GitHub 저장소 만들기 → 개발 → 배포. 이 다섯 단계를 오늘 하루에 다 경험합니다. 앞으로 매번 반복할 흐름이니 오늘 몸에 익혀두세요.

오늘 흐름

이렇게 진행됩니다

13:00 ~ 13:10

📋 오프닝 & 설치 점검

어제 복습, 못 끝낸 설치 확인, 오늘 흐름 안내

13:10 ~ 13:50

✍️ PRD 티키타카

AI가 먼저 질문 → 내가 답변 → PRD 완성 → 저장 여부 판단

📌 PRD 작성법 →

13:50 ~ 14:10

📄 4종 문서 만들기

prd.md / CLAUDE.md / readme.md / current_status.md

📌 4종 문서 →

14:10 ~ 14:20

☕ 쉬는 시간

14:20 ~ 14:45

📁 GitHub 저장소 세팅

새 저장소 생성 → 4종 문서 넣기 → 첫 커밋 & 푸시

📌 세팅 가이드 →

14:45 ~ 15:30

⚡ Phase 0~2 개발

PRD를 읽히고 단계별로 앱 만들기

📌 개발 시작 →

15:30 ~ 15:50

🚀 Vercel 배포

내 앱에 URL이 생기는 순간! 🎉

📌 배포하기 →

15:50 ~ 16:00

📌 마무리 & 3회차 안내

서로 URL 공유해보기, 다음 시간 예고

🎯 오늘의 최소 목표

배포 URL 확보. 기능이 조금 부족해도 괜찮아요. "내 앱이 인터넷에 올라갔다"는 것만 되면 오늘은 성공입니다. 기능은 다음 시간부터 계속 붙입니다.

PRD가 뭔가요?

PRD = Product Requirements Document = 제품 요구사항 정의서. 쉽게 말하면 "AI에게 주는 설계도"예요.

🤔 왜 필요한가요?

"운동 기록 앱 만들어줘" 한 줄만 던지면 AI는 '평균적인 앱'을 만듭니다. 내 상황이 하나도 안 담겨요. PRD가 있으면 내가 원하는 앱이 나옵니다.

핵심 원리 — 한 번에 쓰지 말고, 대화하면서 만들기

PRD는 혼자 머리 굴려서 완성하는 게 아니에요. AI와 짧은 대화를 주고받으며 만듭니다.

🔑 가장 중요한 한 가지 — AI가 먼저 질문하게 만드세요

초보자가 PRD에서 가장 많이 하는 실수는 "내가 아는 것만 써서 던지는 것"입니다. 그러면 AI는 내가 빠뜨린 부분을 알아서 채워버려요. 그게 곧 "내 앱이 아닌 앱"이 되는 지점입니다.

해결책은 간단합니다. "바로 만들지 말고, 먼저 나에게 질문해줘"라고 시키세요. 내가 생각하지 못한 걸 AI가 물어봐 주기 때문에, 답만 해도 PRD의 빈칸이 채워집니다.

이렇게 하면"이런 앱 만들어줘" → AI가 임의로 결정 → 내 상황과 안 맞는 앱

이렇게 하세요"먼저 질문해줘" → 내가 답변 → 내 맥락이 담긴 PRD

1

Chat 탭에서 — AI가 먼저 질문하게 시작

Claude 데스크탑 → Chat 탭 열기. 1회차에 정한 POV 한 문장을 그대로 붙이고, "먼저 질문해줘"로 끝내세요.

① 질문 받기 프롬프트 (여기서 시작!)

나는 코딩을 전혀 모르는 초보야. 웹앱을 하나 만들고 싶어. [1회차에 쓴 POV 한 문장을 여기 붙여넣기] 예) 인사 담당 3년차인 나는 매달 30여 명의 당직을 편성하는데, 휴가·교육 일정을 따로 확인하다 보니 중복이 나서 매번 두세 시간이 든다. 바로 만들지 말고, PRD를 쓰기 전에 내가 놓치고 있을 것 같은 부분을 5개만 질문해줘. 한 번에 다 묻지 말고, 하나씩 물어봐 줘.

질문에 답하다 보면 "아, 그것도 정해야 하는구나" 하는 게 나옵니다. 그게 바로 PRD의 재료예요. 5개 질문에 다 답했으면 다음 프롬프트로 넘어갑니다.

② PRD 초안 요청 프롬프트

좋아, 지금까지 내가 답한 내용을 반영해서 PRD 초안을 만들어줘. 핵심 기능은 3개로만 좁혀줘. 개발 단계는 Phase 0부터 단계별로 나눠줘.

2

티키타카로 다듬기 (15~20분)

AI가 만들어준 PRD를 보면서 내 상황에 맞게 계속 수정 요청하세요.

· "이 기능은 필요 없어, 빼줘"
· "이런 기능을 추가하고 싶어"
· "모바일에서 주로 쓸 거야"
· "로그인 없이 바로 쓸 수 있게 해줘"
· "우리 부대에서는 [이런 용어]를 써"

⚠️ AI 제안을 다 받아들이지 마세요! 다 반영하면 PRD가 비대해지고 핵심이 흐려집니다. 내가 정말 원하는 것만 골라야 앱이 나다워져요.

3

범위 가드 걸기 — "하지 않을 것" 정하기

이게 오늘 PRD의 가장 중요한 부분입니다. 안 만들 것을 미리 못 박아두면 AI가 딴 길로 새지 않아요.

범위 가드 프롬프트

PRD에 "이번에 하지 않을 것" 섹션을 핵심 기능 바로 뒤에 추가해줘. 로그인, 회원가입, 결제, 알림, 관리자 페이지는 이번 범위에서 제외야. 핵심 기능 3개에만 집중할 거야.

4

내 앱, 데이터를 "저장"해야 하나? — 지금 판단하기

이 판단을 PRD 단계에서 미리 해두는 게 중요합니다. 개발 중간에 "아, 저장이 안 되네"를 발견하면 구조를 다시 짜야 하거든요. 아래 두 갈래로 나뉩니다.

🟢 간단한 앱 — 저장 안 해도 됨

계산기, 타이머, 체크리스트, 변환기처럼 지금 이 화면에서만 쓰고 끝나는 앱.

창을 닫으면 내용이 사라져도 괜찮다면 여기입니다. 2회차에 바로 완성 가능.

🟠 복잡한 앱 — 저장이 필요함

기록을 쌓아두고 나중에 다시 봐야 하거나, 여러 사람이 같이 쓰는 앱.

당직 편성, 상벌점 관리, 점검 기록 같은 게 여기예요. 3회차에서 Supabase로 연결합니다.

⚠️ 복잡한 앱이어도 오늘은 저장 없이 만듭니다. 화면과 기능을 먼저 눈으로 확인하고, 저장은 3회차에 붙입니다. 대신 PRD에 "3회차에 데이터베이스 연결 예정"이라고 한 줄 적어두세요.

데이터 판단 프롬프트

내 앱은 데이터를 저장해서 나중에 다시 봐야 하는 앱인지, 아니면 그 화면에서만 쓰고 끝나는 앱인지 판단해줘. 저장이 필요하다면, PRD에 이렇게 적어줘. - 2단계: 우선 저장 없이 화면과 기능만 완성 - 3단계: Supabase로 데이터 저장 연결 (다음 회차) 어떤 데이터를 어떤 항목으로 저장해야 할지도 미리 목록으로 정리해줘.

5

검토 요청

3~5번 정도 대화를 주고받았다면 이제 검토 타이밍이에요.

검토 요청 프롬프트

지금까지 만든 PRD에서 빠진 핵심 부분이 있다면 최대 3가지만 알려줘. 중요하지 않은 건 굳이 말하지 마.

💡 완벽하게 쓸 필요 없어요

PRD는 앱을 보면서 계속 고쳐나가는 살아있는 문서입니다. 틀린 PRD가 아니라 덜 구체적인 PRD일 뿐이에요. 70~80% 되면 다음 단계로 넘어가세요.

PRD 하나만으로는 부족해요. 프로젝트를 끌고 가려면 4개 문서가 필요합니다. 각각의 역할을 먼저 보세요.

📄 prd.md

무엇을 만들지

앱의 설계도. 기능 목록과 개발 단계. Claude Code가 이걸 보고 만들어요.

🤖 CLAUDE.md

어떻게 작업할지

Claude Code가 프로젝트를 열 때 가장 먼저 읽는 파일. 규칙과 맥락을 담아요.

📖 readme.md

이 앱이 뭔지

사람이 읽는 소개서. GitHub 저장소 첫 화면에 자동 표시됩니다.

📊 current_status.md

지금 어디까지 왔는지

개발 현황 파일. 다음 수업에서 "어디까지 했지?" 없이 바로 이어서 시작!

🔑 current_status.md가 이번 과정의 생명줄입니다. 수업과 수업 사이에 2주 공백이 있어요. 이 파일이 없으면 매번 처음부터 상황을 설명해야 합니다. 반드시 만들고, 매 회차 끝날 때 갱신하세요.

4종 문서 한 번에 만들기 프롬프트

이 프로젝트를 위한 4개 파일을 만들어줘. 1. prd.md — 기능 목록과 개발 단계가 포함된 PRD (개발 단계를 Phase 0~5로 세분화) 2. CLAUDE.md — Claude Code가 이 프로젝트를 작업할 때 참고할 규칙과 컨텍스트 3. readme.md — 이 앱의 소개, 실행 방법, 사용 방법 4. current_status.md — 현재 개발 진행 상황 (아직 시작 안 함, Phase 0 준비 중) 디자인 작업 시에는 반드시 /mnt/skills/public/frontend-design/SKILL.md 파일을 먼저 읽고 가이드라인을 따라줘.

1

4개 파일 다운로드

Claude가 만들어준 파일 4개를 각각 다운로드 버튼으로 받으세요. 잠시 후 프로젝트 폴더에 넣습니다.

✅ 여기까지 되면

4개 파일이 다운로드 폴더에 있는 상태. 이제 GitHub 저장소를 만들고 여기에 넣습니다!

GitHub Desktop에서 새 저장소를 처음부터 만듭니다. 이렇게 하면 .gitignore 파일이 자동으로 생성돼서 나중에 따로 설정할 필요가 없어요.

1

새 저장소 만들기

GitHub Desktop → 상단 메뉴 File > New repository

2

저장소 정보 입력

① Name: 영문으로 (예: duty-schedule-app). 한글 금지!
② Description: 간단한 설명 (선택)
③ Local path: "Choose..." 클릭 → 바탕화면 선택
④ "Initialize this repository with a README" 체크 ✅
⑤ Git ignore: 드롭다운에서 Node 선택
⑥ "Create repository" 클릭

💡 Git ignore에서 Node를 선택하면 node_modules, .env 같은 파일이 자동으로 제외됩니다. 나중에 Supabase 키를 넣을 때 이게 안전장치가 돼요!

3

GitHub.com에 올리기 (Publish)

상단 "Publish repository" 버튼 → "Publish repository"

"Keep this code private" 체크는 켜도 되고 꺼도 됩니다. 비공개(private)로 만들어도 Vercel 무료 플랜에서 커밋·푸시하면 자동 배포까지 정상 작동합니다. 내 코드를 남에게 보이고 싶지 않으면 체크를 켠 상태(비공개)로 두세요.

⚠️ 딱 하나만 확인하세요 — 저장소는 반드시 내 개인 계정 아래에 만들어야 합니다. "Organization" 드롭다운에서 부대·단체 계정을 고르면, 비공개일 때 Vercel 무료 플랜에서 배포가 막힙니다. 기본값(내 아이디)이면 그대로 두면 됩니다.

4

폴더 열고 4종 문서 복사

GitHub Desktop → Repository > Show in Explorer 클릭 → 바탕화면에 생긴 프로젝트 폴더가 열립니다.

다운로드한 4개 파일을 이 폴더 안으로 드래그하세요.

5

첫 커밋 & 푸시

GitHub Desktop으로 돌아오면 4개 파일이 변경 목록에 보여요.
① 왼쪽 아래 Summary에 "초기 세팅 완료" 입력
② "Commit to main" 클릭
③ 상단 "Push origin" 클릭

💡 커밋과 푸시가 뭔가요?

구글 드라이브 같은 자동저장은 계속 덮어씌워져서 어제 버전으로 못 돌아가요. 커밋은 "지금 이 상태를 하나의 버전으로 찍어놓는 것"입니다.

커밋 = 내 컴퓨터에 버전 저장 (게임 세이브)
푸시 = 그걸 GitHub에 올리기 (클라우드 백업)

코드는 한 줄 잘못 바꾸면 전체가 망가질 수 있어요. 커밋해두면 언제든 되돌릴 수 있습니다.

✅ 세팅 완료!

GitHub에 내 프로젝트 저장소가 생겼고, 4종 문서가 올라갔어요. 이제 개발만 하면 됩니다!

1

VS Code로 프로젝트 폴더 열기

VS Code → 파일 > 폴더 열기 → 방금 만든 프로젝트 폴더 선택. 왼쪽에 4개 파일이 보이면 성공!

2

Claude Code 연결

터미널 방식: 상단 "터미널" → "새 터미널" → claude 입력
확장팩 방식: 왼쪽 Claude 아이콘 클릭

3

파일 확인 요청 — 제대로 읽었는지 먼저 체크

파일 확인 프롬프트

이 폴더의 CLAUDE.md, prd.md, current_status.md를 읽고, 프로젝트 현황을 간단하게 정리해줘

내용을 잘 요약해주면 준비 완료! 엉뚱한 소리를 하면 폴더 선택이 잘못된 거예요.

4

바로 만들지 말고 — 개발 계획을 먼저 받으세요

여기서 대부분이 실수합니다. "만들어줘"라고 하면 AI가 한 번에 다 만들어버려요. 그러면 뭔가 잘못됐을 때 어디가 문제인지 찾을 수 없습니다. 먼저 계획을 받아 눈으로 확인하고, 한 단계씩 진행하세요.

① 개발 계획 요청 프롬프트

prd.md를 기준으로 개발 계획을 먼저 세워줘. 아직 코드는 작성하지 마. 어떤 순서로 어떤 단계를 만들 건지 목록으로만 보여줘. 각 단계가 끝나면 내가 뭘 눈으로 확인할 수 있는지도 같이 적어줘.

계획이 나오면 내 PRD와 맞는지 확인하세요. 빠진 게 있으면 "이것도 넣어줘", 과하면 "이건 빼줘"라고 고치세요. 계획을 고치는 게 코드를 고치는 것보다 100배 쉽습니다.

5

한 단계씩 개발 — "다음 단계 진행해줘"의 반복

② 개발 시작 프롬프트

좋아, 이 계획대로 진행하자. 한 번에 다 만들지 말고 1단계만 먼저 만들어줘. 1단계가 끝나면 멈추고, 내가 확인할 수 있게 알려줘.

한 단계가 끝날 때마다 브라우저로 직접 확인하고, 잘 됐으면 이렇게 넘어갑니다.

③ 다음 단계 진행 프롬프트 (계속 반복)

잘 동작해. 다음 단계 진행해줘.

⚠️ 권한 허용 창이 뜨면 "항상 허용". 중간에 멈추면 "계속해줘". 확인 안 하고 계속 넘어가면 나중에 어디서 틀어졌는지 못 찾습니다.

💡 가이드 단계가 아니라 내 PRD 단계가 진짜입니다

앱마다 단계 수가 달라요. 8개일 수도, 12개일 수도 있습니다. 아래 Phase 표는 참고용이고, 기준은 여러분이 방금 받은 내 개발 계획입니다. 단계 수가 다르다고 잘못된 게 아니에요.

📊 오늘 어디까지 가면 될까요?

PHASE 0

프로젝트 셋업

기본 파일 구조와 환경 설정. AI가 알아서 해줍니다.

PHASE 1 ⭐ 오늘 목표

핵심 기능 구현

데이터 입력·저장 등 가장 중요한 기능부터. 아직 화면은 단순합니다.

PHASE 2 ⭐ 오늘 목표

기본 UI 완성

버튼, 입력창, 목록이 보이기 시작합니다. 여기까지 가면 오늘은 성공!

PHASE 3+

스타일링 & 추가 기능 (다음 회차)

3회차 이후에 계속 이어서 붙입니다. 조급해하지 마세요.

⏰ 15:30에는 개발을 멈추고 배포로 넘어갑니다. 기능이 덜 됐어도 괜찮아요. 오늘의 진짜 목표는 "배포까지 한 번 경험하기"입니다.

1

지금까지 작업 커밋 & 푸시

GitHub Desktop → Summary에 "Phase 2까지 개발" 입력 → Commit to main → Push origin

⚠️ 푸시를 해야 GitHub에 코드가 올라갑니다. 커밋만 하면 내 컴퓨터에만 있어요!

2

Vercel에서 프로젝트 가져오기

vercel.com 접속 → "Add New... > Project" → 목록에서 내 저장소 찾기 → "Import"

⚠️ 저장소가 목록에 안 보이면 "Adjust GitHub App Permissions" → All repositories → Save

3

Deploy!

① Framework Preset: Other 선택
② 나머지는 그대로
③ "Deploy" 클릭 → 30초~1분 대기

4

🎉 내 앱 URL 확인!

폭죽이 터지면 성공! "Continue to Dashboard" → 상단 Domains에 내 앱 주소가 보여요.

주소를 클릭해서 열어보고, 휴대폰으로도 접속해보세요. 카톡으로 친구에게 보내보세요!

🎉 이제부터 자동 배포입니다

오늘 한 번 연결했으니, 앞으로는 커밋 + 푸시만 하면 Vercel이 자동으로 새 버전을 배포합니다. Vercel을 다시 건드릴 일이 없어요!

마지막 — current_status.md 갱신

오늘 작업을 마치기 전에 반드시 현황을 기록하세요. 다음 수업(10/9)에 이걸 읽고 바로 이어서 시작합니다.

현황 갱신 프롬프트

current_status.md를 업데이트해줘. 아래 4개 항목으로 정리해줘. ## 지금 상태 ## 오늘 한 것 ## 다음에 할 것 ## 건드리면 안 되는 것 오늘은 Phase 2까지 개발했고, Vercel 배포를 완료했어. 배포 URL도 기록해줘.

📌 갱신 후 커밋 + 푸시까지 하세요. 안 하면 GitHub에 반영이 안 됩니다!

문제 해결

막히면 확인하세요

PRD 티키타카를 얼마나 해야 하나요?

3~5번 주고받으면 충분합니다. 핵심 기능 3개가 명확해졌고 "하지 않을 것"이 정해졌다면 다음 단계로 가세요. 완벽한 PRD는 없고, 개발하면서 계속 수정됩니다.

Publish repository 버튼이 안 보여요

먼저 "Create repository"를 눌렀는지 확인하세요. 저장소를 만든 후에야 상단에 Publish 버튼이 나타납니다.

Vercel에서 내 저장소가 안 보여요

"Adjust GitHub App Permissions" 클릭 → "All repositories" 선택 → Save. 그러면 모든 저장소가 보입니다.

배포했는데 화면이 하얗게 나와요

폴더에 index.html 파일이 있는지 확인하세요. 메인 파일 이름이 index.html이어야 주소로 바로 열립니다. 다르면 Claude에게 "메인 파일을 index.html로 바꿔줘"라고 하고 다시 커밋+푸시하세요.

푸시했는데 Vercel에 반영이 안 돼요

Commit → Push origin 순서를 다 했는지 확인하세요. 푸시 후 1~2분 기다리면 반영됩니다. 그래도 안 되면 Vercel 대시보드에서 "Redeploy"를 눌러보세요.

Phase 2까지 못 갔어요

전혀 괜찮습니다! 오늘의 진짜 목표는 배포까지 한 번 경험하기였어요. 기능은 3회차부터 계속 붙입니다. 배포 URL만 있으면 오늘은 성공입니다.

수업이 끝나면

다음 시간 준비 & 체크리스트

📝 3회차(10/9 금) 전까지

특별한 과제는 없습니다. 대신 두 가지만 확인해주세요.

① 배포 URL을 메모해두기 — 휴대폰에서 열어보고 저장
② current_status.md를 갱신하고 푸시했는지 확인

그리고 일상에서 앱을 쓰다가 "이런 기능 있으면 좋겠다" 싶은 게 떠오르면 메모해두세요. 3회차에 그걸 붙입니다!

오늘 배운 것 체크리스트

내 아이디어로 PRD를 티키타카로 완성했다
PRD에 "하지 않을 것"을 명시했다
4종 문서를 만들고 다운로드했다
GitHub에 새 저장소를 만들고 Publish했다
4종 문서를 폴더에 넣고 첫 커밋&푸시를 했다
Phase 0~2 개발을 진행했다
Vercel에 배포해서 내 앱 URL을 얻었다
current_status.md를 갱신하고 푸시했다

궁금한 것

자주 묻는 질문

Chat 탭과 Code 탭은 뭐가 달라요?

Chat 탭은 AI와 대화하는 공간(PRD 만들기), Code 탭은 실제로 코드를 만드는 공간(앱 개발)이에요. 오늘은 Chat에서 PRD를 만들고 → Code에서 개발하는 흐름을 익힙니다.

왜 4개 문서나 만들어야 하나요?

AI는 어제 우리가 뭘 했는지 기억하지 못합니다. 대화창이 길어지면 앞의 맥락도 잊어버려요. 이 문서들이 AI의 '기억'을 대신합니다. 특히 이번 과정은 회차 사이에 2주 공백이 있어서 current_status.md가 결정적이에요.

개발할 때마다 Vercel에서 다시 설정해야 하나요?

아니요! 오늘 한 번 연결하면 끝이에요. 이후에는 커밋 + 푸시만 하면 자동으로 새 버전이 배포됩니다. 1~2분 후 내 URL에서 확인할 수 있어요.

아이디어를 바꾸고 싶어요

3회차(10/9)까지는 가능합니다. 4회차부터는 본격 개발 구간이라 바꾸면 시간이 부족해져요. 바꾸기로 했다면 오늘 흐름(PRD → 4종 문서 → 저장소 → 개발 → 배포)을 처음부터 다시 하면 됩니다.

다음 시간에는 뭘 하나요?

3회차(10/9 금)에는 기능을 더 붙이고, 데이터를 제대로 저장하는 법을 배웁니다. Supabase라는 무료 데이터베이스를 전원 연결해서, 어디서 접속해도 데이터가 보이는 진짜 앱으로 만들어요.

설문

오늘 수업, 어떠셨나요?

1분이면 끝나는 짧은 설문입니다. 여러분의 솔직한 피드백이 다음 수업을 더 좋게 만듭니다. 꼭 참여해 주세요!

📋 2주차 설문 참여하기 →

내 앱 PRD &첫 배포