«바이브 01~04»에서 GitHub·Vercel·장부·열쇠를 개념으로 익혔다면, 이번엔 처음부터 끝까지 실제로 만듭니다. 도구는 OpenAI의 Codex 데스크톱 앱, 주제는 HRD 담당자가 매년 엑셀로 씨름하는 신입사원 30일 온보딩 체크리스트입니다. 제가 한 일은 Codex에게 말한 것, 그리고 Codex가 «사람이 눌러 주세요»라고 할 때 버튼 두 번 누른 것이 전부입니다. GitHub 저장소 만들기, Firebase 장부와 로그인, Cloudflare 배포까지 Codex가 직접 했습니다. 외부 서비스가 연결만 돼 있으면, AI가 거기까지 손을 뻗는다 — 이 장면을 보여 드리려고 2026년 10월 8일 오후 한 번에 찍었습니다.
한 앱에 들어가지만 로그인한 사람에 따라 보이는 화면이 다릅니다. 화면 속 이름은 모두 가상의 닉네임입니다.
1~4편은 GitHub → Vercel → Supabase 길로 설명했습니다. 이번 편은 같은 역할을 Cloudflare(가게)와 Firebase(장부+로그인)로 바꿔 갑니다. 이름만 다를 뿐 지도는 같습니다. 웹 버전 Claude Code로 Supabase·Vercel 길을 가는 편은 «실전 01»입니다.
| 준비물 | 쉬운 말 | 이번 실습에서는 |
|---|---|---|
| Codex 데스크톱 앱 | 내 컴퓨터 폴더에서 일하는 OpenAI의 코딩 AI(ChatGPT 유료 요금제) | GPT-6 Astra, «전체 액세스» 모드 |
| GitHub | 창고 — 명령 도구(gh)가 로그인돼 있으면 Codex가 저장소를 직접 만듦 | 미리 로그인돼 있었음 |
| Firebase | 구글의 장부+로그인 서비스 — 명령 도구(firebase)로 프로젝트까지 생성 | 도중에 재로그인 1번 |
| Cloudflare | 가게 — 명령 도구(wrangler)로 배포 | 도중에 승인 1번 |
각 서비스에는 컴퓨터용 명령 도구가 있습니다(gh·firebase·wrangler). 한 번 로그인해 두면, Codex는 그 도구를 대신 실행해서 사람이 웹 화면에서 누르던 일을 대화 한 줄로 처리합니다. 설치·로그인은 Codex에게 «GitHub·Firebase·Cloudflare 명령 도구가 준비돼 있는지 확인하고 없으면 설치해줘»라고 시작하면 됩니다.
PRD는 «누가 어떤 문제를 해결하려고 무엇을 만들고, 어떻게 완성을 확인할지» 적은 문서입니다. 사람 개발자에게 맡길 때도, AI에게 맡길 때도 이 문서가 기준이 됩니다.
Codex는 로그인 방식·마감일·운영 기본값 세 가지를 «개발 전 확인 필요»로 남기고 멋대로 정하지 않았습니다. 저는 다음 요청에서 그 셋을 정해 줬습니다 — 로그인은 이메일·비밀번호(공개 가입 없음, 지금은 가상 계정만), 마감일·운영값은 제안대로.
| 그 21분 동안 Codex가 한 일 | 쉬운 말 |
|---|---|
| Firebase 프로젝트·웹앱 생성 | 장부를 넣을 책장을 새로 삼(«onboarding-30-…») |
| Firestore(서울) 생성, 접근 규칙 작성 | 장부를 만들고 «신입은 본인만, 멘토는 자기 부서만, HRD는 전체» 규칙을 걸음 |
| 가상 계정 6개 생성 | HRD 1·멘토 2·신입 3 — 가짜 이메일(…@onboarding.test) |
| 화면 3종 구현 | 신입·멘토·HRD 화면, 휴대폰 크기 대응 |
| 권한 검사 21개 + 화면 검사 | «신입이 남의 체크리스트를 고칠 수 있나?» 같은 공격을 스스로 시험 |
Codex가 검사를 통과했다고 해도, 마지막 확인은 사람이 합니다. 내 컴퓨터에서만 열리는 주소(127.0.0.1:5173)로 HRD·멘토·신입 가상 계정에 차례로 로그인해 봤습니다. 맨 위 «완성품 먼저»의 세 화면이 그 결과입니다.
테스트 계정의 이메일·비밀번호는 Codex가 test-accounts.md에 적어 줬습니다. 이 파일은 «GitHub에 절대 올리지 마»라고 처음부터 말해 둔 덕분에, 업로드 대상에서 빠져 있었습니다(아래 GitHub 화면 파일 목록에 없습니다). 화면 캡처·강의 슬라이드에도 이 파일은 띄우지 마세요.
이 장면이 이 글의 핵심입니다. 저는 GitHub 웹에서 저장소를 만들지도, Cloudflare 화면에서 프로젝트를 만들지도 않았습니다. 모두 Codex가 했습니다.
시각은 화면 기록을 바탕으로 한 대략값입니다. 기다리는 동안 저는 다른 일을 했습니다.
| 막힌 곳 | 왜 | 어떻게 풀었나 |
|---|---|---|
| Firebase 로그인 만료 | 오래 안 쓴 명령 도구는 로그인이 풀려 있음 | Codex가 알려 준 대로 재로그인 |
| 이메일 로그인 켜기 | 무료 요금제에선 명령 도구로 못 켜는 설정 | Codex가 멈추고 안내 → 콘솔에서 직접 |
| Cloudflare 로그인이 안 보임 | Codex 실행 환경이 내 터미널과 설정을 다르게 읽음 | Codex가 새 승인 절차 → Authorize |
처음 요청에 «내가 직접 눌러야 하는 게 있으면 멈추고 알려줘»를 넣어 둔 덕분입니다. 이 한 줄이 없으면 AI가 우회로를 찾다 엉뚱한 설정을 바꾸거나, 결제가 필요한 기능을 켜려 할 수 있습니다(실제로 Codex는 «결제 연결이 필요한 자동 설정은 진행하지 않았다»고 보고했습니다).
나는 기업 인재개발팀의 HRD 담당자야. 신입사원이 입사 후 30일 동안 해야 할 일을 부서별로 챙기는 «신입 온보딩 체크리스트» 웹앱을 만들고 싶어. 아직 코드는 쓰지 말고, 먼저 기획을 같이 다듬자. 누가 언제 어떻게 쓰는지, 꼭 필요한 기능과 나중에 해도 되는 기능을 나눌 수 있게 나한테 질문을 5개 이내로 해줘. 나는 개발자가 아니라서 쉽게 물어봐 줘.
좋아, 이 기획대로 가자. 이제 개발자에게 넘겨도 될 수준의 PRD(요구사항 문서)를 이 프로젝트 폴더에 PRD.md 파일로 만들어줘. - 목적, 사용자와 권한, 화면 목록, 데이터 구조, 첫 버전 범위와 나중 범위, 완료 기준을 넣어줘 - 사용할 서비스: 코드 저장은 GitHub 비공개 저장소, 데이터와 로그인은 Firebase, 배포는 Cloudflare Pages - 실제 개인정보는 넣지 말고 예시 데이터는 가상의 닉네임으로 - 초보자도 읽을 수 있게 쉬운 말로 쓰고, 다 쓰면 핵심만 5줄로 요약해줘 아직 앱 코드는 만들지 마.
PRD대로 첫 버전을 만들어줘. - Firebase 프로젝트는 새로 만들고, 접근 규칙까지 PRD 권한대로 설정해줘 - 체험용 가상 계정만 만들고, 계정 목록은 test-accounts.md 에 적되 GitHub에는 절대 올라가지 않게 해줘 - 화면은 한국어, 휴대폰에서도 보기 좋게 - 내가 직접 눌러야 하는 설정이 있으면 멈추고 어디를 누르면 되는지 알려줘 - 다 만들면 내 컴퓨터에서 먼저 열어 볼 수 있게 주소를 알려줘. 배포는 아직 하지 마.
이제 배포하자. 1) GitHub에 비공개(Private) 저장소를 만들어서 올려줘. 계정 파일과 비밀 값은 절대 올리지 말고, 올리기 전에 키나 비밀번호가 섞였는지 한 번 더 점검해줘. 2) Cloudflare Pages로 배포해줘. 3) 배포된 주소에서 로그인 화면이 열리는지 확인하고, Firebase 로그인 허용 도메인에 그 주소를 추가해야 하면 해줘. 내가 직접 눌러야 하는 게 있으면 멈추고 알려줘. 끝나면 배포 주소와 GitHub 저장소 주소를 알려줘.
| 편 | 내용 |
|---|---|
| 실전 01 · Claude Code(웹) | 설치 없이 브라우저에서 — «교육 현장 피드백 보드»를 GitHub + Supabase + Vercel로 |
| 실전 02 · Codex (지금 글) | 내 컴퓨터에서 — «신입 온보딩 체크리스트»를 GitHub + Firebase + Cloudflare로 |
| 실전 03 · 강의장 실전 키트 | 실시간 퀴즈·순위판·랜덤 조 편성 3종 |
| 자료 | 왜 이걸 |
|---|---|
| 바이브 01 · 지도 | 작업실·창고·가게·장부 — 이 글의 서비스들이 어디에 있는지 |
| 바이브 03 · 장부 | «신입은 본인만» 같은 접근 규칙(RLS)의 원리 |
| 바이브 04 · 열쇠 | 배포 전 비밀 값 점검을 왜 시켰는지 |
2026년 10월 8일 오후 Codex 데스크톱 앱(GPT-6 Astra)에서 처음부터 끝까지 한 번에 진행하며 찍었습니다. 앱 데이터는 모두 가상 닉네임입니다. 화면의 개인 대화 목록·컴퓨터 경로·이메일은 잘라내거나 가렸고, 가상 계정 비밀번호는 싣지 않았습니다. 체험용 배포 주소는 실습 확인 뒤 정리될 수 있습니다.