교육이 끝나면 학습자는 휴대폰으로 QR을 찍어 만족도 3개와 한 줄 소감을 남기고, 빔프로젝터 화면에는 평균 점수와 소감 카드가 실시간으로 올라오고, 담당자는 차수별 결과를 CSV로 받는 앱. 강사·HRD 담당자라면 한 번쯤 «이거 있으면 좋겠다» 했던 그 앱을, 브라우저 하나로 만들었습니다. 도구는 claude.ai/code — 웹 버전 Claude Code입니다. 내 컴퓨터에 아무것도 설치하지 않고, GitHub 저장소를 연결해 클라우드에서 일합니다. 그리고 claude.ai에 연결해 둔 Supabase 커넥터로 장부까지 직접 만들었습니다. «실전 02(Codex)»와 같은 여섯 단계지만, 다른 길(브라우저·Supabase·Vercel)로 갔고 다른 곳에서 막혔습니다. 그 막힌 곳까지 그대로 담았습니다.
아래 화면은 실습 확인용으로 만든 가상 차수(«가나다전자(가상)·신임 팀장 코칭 리더십 2차»)와 가상 응답 4건입니다.
Claude 유료 요금제, GitHub 계정(웹 Claude Code에서 처음 저장소를 고를 때 GitHub 연결을 허락), 그리고 claude.ai 설정의 커넥터에서 Supabase·Vercel을 연결해 두면 이번 편과 같은 흐름이 됩니다. 저장소는 «바이브 02»처럼 비공개로 미리 하나 만들어 두세요.
Claude는 보기 번호를 붙인 질문 5개(몇 명이 언제, 어떻게 입장, 무엇을 묻고, 강사 화면은 어떻게, 결과는 어디에)를 냈고, 끝에 이런 표를 붙였습니다 — «지금 세션에 이미 연결된 것: Supabase MCP(응답 저장·실시간), Vercel MCP(배포), Canva MCP(QR 안내 슬라이드)». 설치할 것 없이 이미 손이 닿아 있다는 뜻입니다.
«창고(main)에 바로 넣지 말고, 옆에 따로 둔 수정본을 보고 합칠지 정하세요»라는 제안서입니다. 웹 Claude Code는 기본적으로 이렇게 일해서, 사람이 검토하고 «합치기(Merge)»를 누를 기회가 생깁니다. 이번엔 «다 만들면 main에 합쳐 주세요»라고 맡겨서 Claude가 직접 합쳤습니다. 자세한 건 «확장 05 · 팀으로 만들기».
| Claude가 스스로 한 일 | 쉬운 말 |
|---|---|
| Supabase에 fb_ 표 2개 + 보안 함수 | 장부를 만들고, «서버를 거쳐서만» 읽고 쓰게 잠금 (같은 책장의 다른 앱 100여 개 표와 섞이지 않게) |
| DB 시험 16개 → 원상복구 | 장부 규칙이 제대로 막는지 시험하고, 시험 흔적은 지움 |
| 앱 코드 3,700여 줄 | 학습자 화면·강사 콘솔·QR·실시간 보드·CSV |
| 화면 테스트 22개 | 실제 브라우저로 끝까지 눌러 보기 |
| PR #1 → main 합치기 | 창고에 정식으로 넣기 |
실전 02의 Codex처럼, Claude도 «제 연결로는 여기까지입니다»라며 세 번 멈췄습니다. 이 부분이 «연결만 돼 있으면 다 된다»의 현실적인 경계입니다.
| 멈춘 곳 | 왜 | 어떻게 했나 |
|---|---|---|
| 1. Vercel 프로젝트 만들기 | 커넥터가 읽기 권한만 있음 | Vercel 화면에서 Import → Deploy (아래 화면). «바이브 02»와 같은 동작 |
| 2. 환경 변수 6개 넣기 | 역시 쓰기 권한 없음. Claude는 «Vercel 화면에 붙여 넣으라»고 값을 대화에 보여 줌 | 대화에 노출된 값은 쓰지 않고, 내 컴퓨터의 Vercel 명령 도구로 새 비밀 값을 만들어 등록(«바이브 04» 원칙) |
| 3. 삭제 함수 SQL 실행 | «delete»가 들어간 명령은 사람 승인이 필요한데, 웹 화면에 승인 창이 뜨지 않음 | Supabase SQL Editor에 붙여 넣고 Run → 경고 확인 → 실행 |
이번에 Claude는 «이 대화에만 나오니 공유하지 마세요»라며 비밀 값과 체험용 강사 비밀번호를 대화에 적었습니다. 대화 화면은 캡처·공유되기 쉽습니다. 그래서 저는 그 값을 쓰지 않고 새 값으로 바꿔 넣었습니다(Supabase 쪽 비밀 값도 함께 교체). 대화에 비밀 값이 나왔다면 «노출된 것으로 보고 바꾼다»가 안전한 습관입니다.
| 실전 01 · 웹 Claude Code | 실전 02 · Codex 데스크톱 | |
|---|---|---|
| 일하는 곳 | 브라우저(클라우드), GitHub 저장소 | 내 컴퓨터 폴더 |
| 외부 서비스 손 | claude.ai 커넥터(Supabase 쓰기 가능, Vercel 읽기 전용) | 컴퓨터의 명령 도구(gh·firebase·wrangler) |
| GitHub에 넣는 방식 | PR(제안서) → 합치기 | 바로 main에 올리기 |
| 사람이 한 일 | Vercel Import, 환경 변수, 삭제 SQL 실행 | Firebase 이메일 로그인 켜기, Cloudflare 승인 |
| 스스로 한 검사 | DB 16개 + 화면 22개 | 권한 21개 + 화면 검사(총 54개) |
| 잘 맞는 사람 | 설치가 막힌 회사 PC, 이동 중에도 이어서 | 내 PC에서 여러 서비스를 한 번에 |
① «코드 쓰지 말고 질문부터»로 시작하면 둘 다 좋은 기획을 끌어낸다 ② «내가 눌러야 할 게 있으면 멈추고 알려줘»가 있으면 둘 다 정직하게 멈춘다 ③ 연결이 «읽기만»인지 «쓰기까지»인지에 따라 사람 몫이 달라진다 — 도구보다 연결 권한이 자동화 범위를 정합니다.
나는 기업교육 강사이자 HRD 담당자야. 교육이 끝날 때 학습자들이 휴대폰으로 만족도와 한 줄 소감을 남기고, 강사 화면에는 결과가 실시간으로 모이는 «교육 현장 피드백 보드»를 만들고 싶어. 아직 코드는 쓰지 말고 기획부터 같이 다듬자. 누가 언제 어떻게 쓰는지, 꼭 필요한 기능과 나중에 해도 되는 기능을 나눌 수 있게 나한테 질문을 5개 이내로 쉽게 해줘. 나는 개발자가 아니야.
이제 개발자에게 넘겨도 될 수준의 PRD(요구사항 문서)를 이 저장소에 PRD.md 로 만들어 주세요. - 목적, 사용자와 권한, 화면 목록, 데이터 구조, 첫 버전 범위와 나중 범위, 완료 기준 - 사용할 서비스: 코드 저장은 이 GitHub 저장소, 데이터는 Supabase, 배포는 Vercel - Supabase는 새 프로젝트를 만들지 말고, 내 기존 프로젝트에 이 앱 전용 표를 fb_ 로 시작하는 이름으로 만들어 주세요 - 초보자도 읽을 수 있게 쉬운 말로, 다 쓰면 핵심만 5줄로 요약해 주세요 아직 앱 코드는 만들지 마세요.
개발 시작해 주세요. - Supabase 표는 PRD대로 만들고, 보안 규칙(RLS)도 켜 주세요 - 비밀 값은 GitHub에 올리지 말고 Vercel 환경 변수에만 넣어 주세요. 비밀 값을 이 대화에 그대로 적지는 말아 주세요 - 다 만들면 PR을 main에 합치고, Vercel 프로젝트를 만들어 이 저장소를 연결해서 배포까지 해 주세요 - 배포 주소에서 학습자 화면과 강사 로그인이 실제로 되는지 확인해 주세요 - 제가 직접 눌러야 하는 게 있으면 멈추고 알려 주세요
| 편 | 내용 |
|---|---|
| 실전 01 · 웹 Claude Code (지금 글) | 브라우저에서 — 피드백 보드를 GitHub + Supabase + Vercel로 |
| 실전 02 · Codex | 내 컴퓨터에서 — 온보딩 체크리스트를 GitHub + Firebase + Cloudflare로 |
2026년 10월 8일 저녁 웹 Claude Code(Opus 5.5) 한 세션에서 진행하며 Aside 브라우저로 찍었습니다. 앱 데이터는 가상 차수·가상 응답입니다. 화면의 대화 목록·이름·저장소 목록은 잘라내거나 가렸고, 비밀 값과 강사 비밀번호는 싣지 않았습니다(대화에 노출된 값은 교체). 강사 보드·QR 화면은 같은 장부에 연결된 앱을 제 컴퓨터에서 띄워 찍었습니다. 체험용 주소는 실습 확인 뒤 정리될 수 있습니다.