프롬프트 하나로, 앱이 통째로 만들어진다
5장에서 우리는 AI 편집기에 프롬프트를 넣어 가족 단톡방 웹서비스 Talkie 를 만들었습니다. 이번에는 그때 쓴 프롬프트를 글자 하나 바꾸지 않고 Claude Code에 그대로 넣어 봅니다. 요구사항은 똑같고 도구만 다를 때 무엇이 달라지는지, 실제 작업 화면을 처음부터 끝까지 따라갑니다.
이 수업은 “따라 하기”보다 “지켜보기”에 가깝습니다.
사람이 하는 일은 처음 프롬프트 하나와, 중간중간 “이 명령을 실행할까요?”에 답하는 것뿐입니다. 나머지는 전부 Claude Code가 합니다. 프롬프트를 넣고 앱이 돌아가기까지 실제로 걸린 시간은 10분 28초 였습니다.
콘솔을 켜지 않는다
웹앱 등록, 데이터베이스 생성, API 활성화, 보안 규칙 배포 — 5장에서 Firebase 콘솔을 클릭해 하던 일을 터미널 안에서 직접 처리합니다. 사람이 콘솔에서 한 일은 프로젝트를 하나 만든 것뿐입니다.
스스로 검증한다
코드를 다 쓰고 끝내지 않습니다. 빌드하고, 개발 서버를 띄우고, 실제 백엔드를 상대로 도는 E2E 테스트를 직접 작성해서 돌립니다. 프롬프트에 그런 요구는 없었습니다.
스스로 고친다
그 테스트에서 “이메일 로그인이 실제로는 꺼져 있다”를 발견하고, 원인을 찾아 고친 뒤 다시 돌립니다. 사람이 오류를 옮겨 줄 필요가 없었습니다.
① 준비 — 사람이 하는 일은 여기까지
1. 작업 폴더를 하나 만듭니다
C:\Project 아래에 이번 프로젝트가 살 폴더를 만듭니다. 이름은 자유입니다. 5-1 「바이브 코딩의 시작: 폴더 구조」에서 정한 대로 한글과 공백이 없는 경로 에 두세요.
2. PowerShell을 엽니다
Claude Code는 편집기가 아니라 터미널에서 돕니다. 시작 메뉴에서 PowerShell을 검색해 실행합니다.
3. 폴더로 이동한 뒤 claude 를 칩니다
cd C:\Project\talike202607
claudecd 로 방금 만든 폴더에 들어간 다음 claude 한 단어면 끝입니다. Claude Code는 지금 있는 폴더를 작업 공간으로 삼습니다. 어느 폴더에서 실행하느냐가 곧 “어느 프로젝트를 맡기느냐”입니다.
4. 시작 화면에서 작업 폴더를 확인합니다
버전, 사용 중인 모델, 로그인한 계정, 그리고 현재 작업 폴더 가 표시됩니다. 맨 아랫줄의 경로가 내가 의도한 폴더인지 매번 확인하는 습관을 들이세요. 엉뚱한 폴더에서 시작하면 엉뚱한 곳에 파일이 생깁니다.
5. Firebase 콘솔에서 프로젝트만 하나 만듭니다
백엔드로 쓸 Firebase 프로젝트는 사람이 미리 만들어 둡니다. 3장에서 가입한 Firebase 콘솔에서 「프로젝트 만들기」를 누르고 이름을 정합니다.
6. 프로젝트가 준비됐습니다
요금제는 무료인 Spark 그대로 둡니다. 사람이 콘솔에서 하는 일은 여기까지입니다. 웹앱 등록, 데이터베이스 생성, API 켜기, 보안 규칙 배포는 잠시 뒤 Claude Code가 직접 합니다.
② 프롬프트 넣기 — 5장에서 쓰던 그 프롬프트 그대로
7. 5-2 「바이브 코딩을 위한 프롬프트」를 엽니다
이 강의 5-2 레슨에 있는 프롬프트를 그대로 씁니다. AI 편집기에 넣었던 것과 완전히 같은 글 입니다. 도구가 달라져도 “무엇을 만들고 싶은가”가 달라질 이유는 없으니까요.
8. 내 프로젝트에 맞게 몇 글자만 고칩니다
메모장에 붙여넣고 중괄호로 비워 둔 자리에 내 Firebase 프로젝트 ID 를 채웁니다. 초대코드나 서비스 이름처럼 바꾸고 싶은 값도 이때 손봅니다.
9. 통째로 붙여넣고 엔터
Claude Code 입력창에 붙여넣고 엔터를 칩니다. 여기서부터 사람이 하는 일은 승인 질문에 답하는 것뿐입니다.
③ 백엔드부터 만든다 — 콘솔을 켜지 않고
10. 코드를 쓰기 전에 환경부터 확인합니다
바로 파일을 만들지 않습니다. Node 버전과 폴더 상태를 보고, 지정한 Firebase 프로젝트가 실제로 있는지 확인하고, “디렉터리가 비어 있다” 는 사실까지 짚고 넘어갑니다. 사람이 새 프로젝트를 받았을 때 하는 첫 행동과 같습니다.
11. 웹앱을 등록하고 SDK 설정값을 가져옵니다
“등록된 웹앱이 없으니 만들고 설정을 가져오겠다”며 Firebase CLI를 실행합니다. 5장에서 콘솔을 클릭해 API 키를 복사하던 그 과정입니다. 사람이 키를 복사·붙여넣기 할 필요가 없습니다.
12. Firestore가 없으면 만듭니다
데이터베이스가 초기화돼 있는지 확인하고, 없으면 직접 만듭니다. 여기서도 콘솔은 열지 않습니다.
13. 중요한 명령 앞에서는 반드시 물어봅니다
시스템을 바꾸는 명령 앞에서는 항상 멈추고 승인을 요청합니다. 선택지는 셋입니다.
- 1. Yes — 이번 한 번만 실행합니다.
- 2. Yes, and don’t ask again — 앞으로 같은 계열의 명령을 묻지 않습니다. 편한 만큼 위험합니다.
- 3. No — 실행하지 않습니다. Esc 로도 취소됩니다.
2번은 신중하게 — 한 번 허용하면 그 세션 동안 같은 계열 명령이 조용히 실행됩니다. 파일을 지우거나 배포하는 명령이라면 되돌리기 어렵습니다. 읽기만 하는 명령에는 2번, 무언가를 바꾸는 명령에는 1번 이 안전한 기본값입니다.
14. API가 켜지는 동안 다른 일을 시작합니다
gcloud 인증 상태를 확인하고 필요한 API를 켭니다. 활성화가 반영되기까지 몇 분 걸리는데, 멍하니 기다리지 않고 “그동안 앱 뼈대를 만들겠다” 며 할 일 목록을 세운 뒤 곧바로 코드로 넘어갑니다.
15. 설정 파일부터 씁니다
화면에 파일 이름과 실제 내용이 줄 단위로 흘러갑니다. 어떤 파일을 왜 만드는지 그대로 볼 수 있습니다.
16. 보안 규칙과 배포 설정까지
firestore.rules (누가 무엇을 읽고 쓸 수 있는지), 인덱스 정의, 그리고 나중에 쓸 Vercel 배포 설정인 vercel.json 까지 이 단계에서 만들어집니다. 5장에서는 “권한이 부족하다” 오류를 만난 뒤에야 손댔던 파일입니다.
④ 코드가 쏟아진다
17. 파일이 진짜로 생기는지 폴더를 열어 둡니다
화면 코드가 쏟아지기 시작합니다. 탐색기를 함께 열어 두면 비어 있던 폴더가 채워지는 게 보입니다. 터미널 안에서만 벌어지는 일이 아니라 실제 파일이 만들어지고 있습니다.
18. 화면들이 하나씩 완성됩니다
회원가입, 비밀번호 재설정, 채팅 화면… 파일 하나에 100~200줄씩 붙습니다. 사람이 읽으려고 멈출 필요는 없습니다. 지금 중요한 건 흐름입니다.
19. 다 쓰고 나면 패키지를 설치합니다
스타일까지 끝나면 “파일은 다 됐으니 이제 설치하겠다”며 다음 단계로 넘어갑니다.
20. 진행 상황은 항상 아래쪽에 보입니다
화면 아래 목록이 끝난 일과 남은 일입니다. 긴 작업 도중 “지금 어디까지 왔는지” 를 확인하는 곳이니, 오래 걸린다 싶으면 여기를 보세요.
⑤ 빌드하고, 띄우고, 스스로 시험한다
21. 데이터베이스를 만들고 규칙을 배포합니다
아까 켜 둔 API가 준비되자 데이터베이스를 만들고, 앞서 작성해 둔 보안 규칙과 인덱스를 실제 Firebase로 배포합니다. 기다리는 시간을 코드 작성으로 채운 덕분에 낭비가 없습니다.
22. 빌드가 되는지 확인합니다
코드를 쓴 쪽이 스스로 빌드까지 돌려 봅니다. 5장에서는 배포가 실패한 뒤에야 돌려 봤던 명령입니다.
23. 개발 서버를 띄우고 응답을 확인합니다
빌드가 통과하면 개발 서버를 띄우고, 실제로 응답이 오는지까지 확인합니다.
24. 여기서 멈추지 않습니다
“화면이 뜬다”까지 확인했으면 끝내도 됩니다. 그런데 실제 Firebase 백엔드를 상대로 도는 종단 간(E2E) 테스트를 돌려 보겠다 고 합니다. 가입 → 보안 규칙 → 메시지 전송·조회까지 진짜로 되는지 보겠다는 뜻입니다.
25. 테스트 코드를 직접 씁니다
테스트 파일 100여 줄을 그 자리에서 작성하고 곧바로 실행합니다. 아무도 시키지 않은 일입니다. 프롬프트 어디에도 “테스트를 짜라”는 말은 없었습니다.
26. 그 테스트가 문제를 잡아냅니다
화면상으로는 멀쩡했지만 백엔드의 이메일·비밀번호 로그인이 실제로는 켜져 있지 않았습니다. 테스트를 돌리지 않았다면 배포한 뒤에야, 혹은 사용자가 먼저 알았을 문제입니다.
⑥ 막힌 것을 스스로 고친다
27. 확인할 권한부터 얻습니다
인증 설정을 다루는 API를 켜도 되는지 묻습니다. 승인하면 실제 설정값을 조회해 무엇이 꺼져 있는지 확인합니다.
28. 원인을 찾아 직접 고치고, 다시 시험합니다
“이메일 로그인이 꺼져 있다 → 설정을 고쳐서 켜겠다 → 스모크 테스트를 다시 돌리겠다.” 발견도, 진단도, 수정도, 재검증도 전부 스스로 했습니다. 5장에서 우리가 오류 메시지를 복사해 채팅창에 붙여넣던 그 일이 여기서는 필요 없었습니다.
29. 콘솔에서도 확인됩니다
Firebase 콘솔의 「로그인 방법」에 이메일·비밀번호가 사용 설정됨 으로 바뀌어 있습니다. 터미널에서 한 일이 실제 서비스에 반영된 것입니다. 결과는 항상 이렇게 눈으로 확인하세요.
30. 마지막으로 문서를 남깁니다
.env.example (환경 변수 서식)과 README.md (무엇을 어떻게 실행하는지)까지 만들어 둡니다. 몇 달 뒤 이 폴더를 다시 열었을 때 나를 구해 주는 파일들입니다.
⑦ 완성 — 10분 28초
31. 완성 보고를 읽습니다
만든 것, 발견해서 고친 문제, E2E 검증 통과 여부, 남은 참고사항이 한 화면에 정리됩니다. 맨 아래 Baked for 10m 28s — 프롬프트를 넣고 앱이 돌아가기까지 걸린 시간입니다.
32. 브라우저로 직접 확인합니다
주소창에 http://localhost:5173 을 엽니다. 회원가입 화면이 뜹니다.
33. 초대코드를 넣고 가입합니다
프롬프트에서 정한 초대코드를 아는 사람만 가입할 수 있습니다. 요구사항이 그대로 구현돼 있는지 이렇게 하나씩 확인합니다.
34. 실제로 대화가 됩니다
가입하자마자 단톡방으로 들어가고, 메시지를 보내면 바로 올라갑니다.
35. 데이터도 실제로 쌓입니다
Firebase 콘솔의 Firestore를 열어 보면 방금 보낸 메시지가 문서로 저장돼 있습니다. 보낸 사람 이름과 색까지 프롬프트에서 요구한 대로 들어가 있습니다.
이번 레슨에서 남길 것
- 작업 폴더가 곧 작업 범위다 — cd 로 들어간 폴더가 Claude Code의 세계입니다. 시작 화면에서 경로부터 확인하세요.
- 프롬프트는 도구를 가리지 않는다 — 5장에서 쓰던 프롬프트가 그대로 통했습니다. 좋은 요구사항은 어디에 넣어도 좋은 요구사항입니다.
- 콘솔 클릭 대신 CLI — 웹앱 등록·데이터베이스 생성·API 활성화·규칙 배포까지 터미널 안에서 끝납니다. 사람이 콘솔에서 한 일은 프로젝트 생성 하나뿐이었습니다.
- 승인 프롬프트가 안전장치다 — “다시 묻지 않기”는 읽기만 하는 명령에만 쓰세요.
- 시키지 않아도 검증한다 — 빌드·기동·E2E 테스트까지 스스로 했고, 덕분에 배포 전에 문제를 잡았습니다.
- 완성 보고는 판정이 아니다 — 최종 판정은 언제나 브라우저와 콘솔입니다. 끝났다는 말을 들었으면 직접 눌러 보세요.
여기까지가 “만들기”입니다. 다음 레슨에서는 이 소스를 CLI만으로 GitHub에 올립니다. 4장에서 창을 오가며 손으로 하던 일을, 이번에는 “최대한 CLI를 이용해 줘” 한 문장으로 대신합니다.
강의로 이어서 보고 싶다면
이 부록에서 만든 앱은 5장에서 만든 바로 그 단톡방 입니다. 여기서는 Claude Code로, 5장에서는 AI 편집기(Cursor)로 만들었을 뿐입니다. 같은 앱을 만드는 전 과정을 영상 강의로 처음부터 보고 싶다면 아래 인프런 강의에서 이어서 볼 수 있습니다.
