정적 페이지로는 못 만드는 회원/결제/DB가 들어간 진짜 웹 사이트도
Claude Code + Supabase + 토스페이먼츠 조합으로
한 줄도 직접 코딩하지 않고 만들 수 있습니다
/plan 한 번
→
③ 권한 모두 Yes
→
④ 테스트·수정
, 끝
한 번에 완벽한 결과는 거의 없습니다 — Anthropic 공식 권장 흐름
Anthropic이 공식 가이드로 권장하는 4단계 루프입니다
이번 프로젝트도 이 흐름을 그대로 따랐습니다
Explore (탐색)
이미 프로젝트가 있고 처음 claude로 시작한다면 /init 실행
Plan (계획)
/plan 으로 설계부터
Implement (구현)
요청 → 확인 → 수정 요청, 이 흐름을 반복하는 걸 추천
Commit
완성 후, 개발에서는 보통 GitHub repository 에 최종 업로드하는 것을 의미
Claude가 자기 작업을 검증할 수 있을 때(테스트 실행, 스크린샷 비교, 출력값 확인) 성능이 극적으로 향상됩니다. 명확한 성공 기준 없이는 "그럴듯하지만 실제로는 동작하지 않는" 결과물이 나오기 쉽습니다.
| 좋지 않은 프롬프트 | 좋은 프롬프트 |
|---|---|
| "이메일 검증 함수 만들어줘" | "validateEmail 함수 작성. 테스트: user@example.com → true, invalid → false. 구현 후 테스트 실행" |
| "대시보드 더 예쁘게 해줘" | "[스크린샷 첨부] 이 디자인 구현. 결과 스크린샷 찍고 원본과 비교, 차이점 나열 후 수정" |
| "빌드가 안 돼" | "빌드 에러: [에러 붙여넣기]. 수정 후 빌드 성공 확인. 증상이 아니라 근본 원인 해결" |
무관한 작업들이 한 세션에 섞임 → 작업 사이마다 /clear
같은 이슈로 두 번 이상 고침 → /clear 후 더 나은 프롬프트로 재시작
너무 길어서 핵심 규칙이 묻힘 → 가차 없이 가지치기
그럴듯하지만 엣지케이스 미처리 → 검증 수단 항상 제공, 검증 못 하면 출시 금지
범위 없는 "investigate" 요청 → 조사 범위 좁히거나 subagent에 위임
/clear — 무관한 작업 사이에 컨텍스트 완전 초기화/compact <지시> — 같은 작업 계속하면서 컨텍스트만 가볍게Esc — 진행 중인 동작 중단 (컨텍스트 유지)Esc + Esc 또는 /rewind — 이전 체크포인트로 되돌리기/btw — 컨텍스트에 남기지 않고 잠깐 질문비개발자에게 가장 직관적이지 않은 부분
"왜 컨텍스트를 비워야 하는지" — "한 채팅창에서 요리 레시피 묻다가 세금 신고 묻다가 다시 요리 얘기하면 AI가 헷갈린다"는 비유로 풀어주면 잘 통합니다
토스 테스트 키(test_ck_ / test_sk_)로 연결한 동안에는 실제 청구가 발생하지 않습니다 (토스 공식 명시). 그래도 불안하면 임의 16자리 카드번호 사용 — 테스트 환경에선 통과됩니다
브라우저 캐시. Cmd+Shift+R / Ctrl+Shift+R 강제 새로고침. 또는 시크릿/프라이빗 창으로 접속
Claude Code 세션 안에선 OK이지만 셋업 끝나면 회전(revoke 후 재발급) 권장. 절대 공개 GitHub 이슈 · 블로그 · SNS에는 X
"orders 테이블에서 status='pending'인 row 다 삭제해" 한 줄이면 정리됩니다 — Claude가 Management API로 SQL 실행
학습 분량에선 전부 무료 플랜으로 충분합니다 — GitHub Pages(월 100GB), Supabase(무료 프로젝트 2개 + 500MB DB), 토스 테스트 키(과금 없음)
GitHub Pages는 정적 페이지만 띄울 수 있어서
회원가입 · 결제 · DB 같은 동적 기능은 불가능합니다
그 자리를 Supabase(서버 · DB · Auth)와 토스페이먼츠(결제)가 채워줍니다
HTML/CSS/JS 정적 파일을 무료 URL로 서빙. 화면 보여주기 담당.
회원가입/로그인(Auth) + Postgres DB + Edge Function까지. 서버 역할 전부 무료 플랜으로 시작.
실 결제 처리. 테스트 키로는 실제 카드 넣어도 청구되지 않아 학습용으로 안전.
한 줄 요약
화면(GitHub Pages) + 서버·DB·Auth(Supabase) + 결제(토스) 조합이면 "실제로 돌아가는 웹 서비스" 한 세트가 완성됩니다. Claude Code가 이 셋을 묶어 자동으로 셋업해줍니다.
본인이 직접 만지는 건 토큰 한 번 + /plan 한 번뿐
아래 두 칸을 비교해 보면 누가 무엇을 하는지 한 번에 보입니다
/plan 한 번 — Claude가 4가지 설계 질문을 던져옴 → Recommended 선택~/.zshrc에 안전하게 저장각 단계마다 실제로 사용한 프롬프트를 그대로 공개합니다
GitHub 토큰은 이전 강의 그대로 사용
여기서는 Supabase 토큰만 추가로 발급받으면 됩니다
https://supabase.com/dashboard/account/tokens 접속)claude-code-setupsbp_로 시작하는 문자열 복사토큰은 발급 직후 한 번만 보입니다
페이지를 떠나면 다시 못 봅니다 — 메모장에 즉시 저장
비밀번호 등급 정보 — 공개 채팅 · GitHub · 블로그 노출 금지
토큰 하나만 주면 Claude가 ~/.zshrc에 안전하게 저장하고, 새 터미널에서도 자동으로 인증되도록 만들어 둡니다.
github 는 토큰 셋업해서 너가 작업할 수 있지?
supabase 토큰은 sbp_xxxxxxxxxxxxxxxxxx 이거든 이걸로 supabase 너가 작업할
수 있도록 셋업해놔. 내가 입문자라서 토큰을 부득이 채팅창에 한번 준
거니까 이해해줘.
특히 내가 입문자니까, 나에게 묻거나 한다면, 최대한 입문자도 이해하기
쉽게 설명해줘야해토큰은 본인 것으로 교체
위 프롬프트의 sbp_xxxxxxxx... 부분을 1-1에서 발급받은 본인 토큰으로 바꿔서 입력
셋업이 끝나면 토큰을 회전시키세요
Claude Code 세션 안에선 OK이지만, 작업이 끝난 뒤 해당 토큰은 폐기(revoke) 후 재발급하는 것이 안전합니다 — 채팅창에 한 번이라도 노출됐다면 더더욱
/plan 으로 설계부터
코드를 짜기 전에 Claude가 먼저 묻고 정리하게 만드는 게 핵심
잘못된 방향으로 가는 걸 막는 가장 효과적인 안전장치예요
/plan이 뭔가요?Claude가 코드를 짜기 전에 "무엇을 만들지" 먼저 정리하는 모드입니다.
파일을 읽고, 질문하고, 설계만 하지 변경은 하지 않습니다. 한 번에 큰 시스템을 만들 때 잘못된 가정을 미리 잡아주는 가장 효과적인 도구예요.
채팅창에 /plan을 입력하면 자동완성으로 plan 모드가 잡힙니다. 그 뒤에 만들고 싶은 사이트의 큰 그림을 그대로 적어주세요.
/plan
굿즈 판매하는 작은 웹사이트 만들꺼야.
만들 페이지
- 회원가입/로그인 페이지
- 상품 보고 결재하는 페이지
- 내 결제 내역 보는 페이지
- 관리자 페이지: ID: admin@admin.com , PW: superadmin 로 로그인하면,
모든 사람들의 결재 내역을 보는 페이지
호스팅 서비스
- github pages + supabase 로 하고
결재
- 토스 페이먼트를 테스트 모드
문서 작업
- 핵심 프로젝트 내용은 CLAUDE.md 에, 세부 구조는 ARCH.md 로 만들고 싶어/plan에 들어가면 Claude가 핵심 갈림길마다 한국어로 선택지를 줍니다.
입문자라면 (Recommended)로 표시된 답을 그대로 고르면 됩니다.
| # | Claude의 질문 | 입문자 추천 답 |
|---|---|---|
| 1 | 프런트엔드 기술 스택은? (입문자 친화 + GitHub Pages 호환) | 순수 HTML/CSS/JS |
| 2 | 상품 데이터는 어디에 저장? | Supabase DB의 products 테이블 (Recommended) |
| 3 | 관리자 인증은 어떻게 처리? admin@admin.com / superadmin은 요청대로 동작합니다. |
Supabase Auth + is_admin 플래그 (Recommended) |
| 4 | 토스페이먼츠 결제 승인(confirm)은 어디서? | Supabase Edge Function에서 서버 승인 (Recommended) |
답변 감사합니다. 입문자에게 친화적으로 빌드 단계 없이 순수 HTML/JS로
가되, Supabase는 ESM CDN으로 임포트하는 방식으로 정리하고, 결제
승인은 Edge Function에서 처리하는 구조로 plan을 작성하겠습니다.plan은 수정/거절 가능합니다
마음에 안 들면 "이 부분은 …로 바꿔줘" 한 줄이면 Claude가 plan 파일을 직접 다시 씁니다. 승인되면 그때부터 코드 작업이 시작돼요.
작업이 시작되면 Claude가 파일 쓰기 / 터미널 / git push 등을 할 때마다 권한을 물어요
전체 허용을 선택하면 같은 종류의 작업은 다시 묻지 않고 끝까지 진행됩니다
Allow Bash(supabase projects create ...) ?
❯ 1. Yes
2. Yes, and don't ask again for similar commands
3. No, and tell Claude what to do differently입문자라면 망설이지 말고 2번 (Yes, and don't ask again)을 고르세요. 같은 종류의 명령은 다음부터 묻지 않습니다.
권한을 거절하면 작업이 그 자리에서 멈춥니다
이 강의 범위에서 Claude가 하려는 모든 작업은 이 프로젝트 폴더 안이거나, 본인이 발급한 토큰으로만 접근 가능한 본인 계정 자원입니다 — 안심하고 허용해도 OK
is_admin = true 적용mailer_autoconfirm)main 푸시 → Actions 자동 빌드 → 라이브 URL 출력보통 10~15분이면 라이브 URL이 나옵니다
도중에 Claude가 plan만 다 짜고 멈출 수도 있고, 그대로 구현까지 자연스럽게 이어가는 경우도 있어요. 멈추면 "이 plan대로 구현해줘" 한 줄이면 됩니다.
작업이 끝나면 Claude가 라이브 URL을 알려줍니다
직접 눌러보고 안 되는 건 한 줄 자연어로 수정 요청 — 이 사이클이 핵심
https://<본인id>.github.io/goods-shop/)4330-1234-1234-1234 (CVC/만료일 임의) 또는 본인 실제 카드 — 토스 테스트 키 동안에는 청구 발생 Xadmin@admin.com / superadmin으로 로그인 → 관리자 페이지 접근 → 모든 결제 내역 노출 확인화면에 뜬 빨간 메시지나 콘솔 에러를 토씨 하나 바꾸지 말고 Claude에게 그대로 붙여넣으면 됩니다.
| 증상 (그대로 복붙) | Claude가 자동으로 한 일 |
|---|---|
상품을 불러오지 못했습니다: infinite recursion detected in policy for relation "profiles" |
RLS 정책의 USING 절이 profiles를 다시 select 하면서 재귀 → SECURITY DEFINER 헬퍼 함수로 우회 |
결제하기 눌렀더니 결제가 취소되었습니다. |
catch 블록이 모든 에러를 "취소"로 묻고 있던 것 발견 → 에러 코드를 화면/콘솔에 그대로 노출 |
apigw-sandbox.tosspayments.com/... → 401 |
client key가 v2 docs 데모용이라 v1 SDK가 거부 → v1 호환 표준 테스트 키로 즉시 교체 (config.js / GitHub Secret / Supabase secret 모두 자동) |
디버깅이 가장 잘 되는 프롬프트 패턴
화면 메시지 / 콘솔의 빨간 줄을 그대로 복사해서 붙여넣기. "이거 무슨 뜻이야?" 한 줄이면 충분합니다 — 가끔은 그게 가장 정확한 진단 정보예요
| 상황 | 한 줄 프롬프트 |
|---|---|
| 결제 실패 후 pending이 잔뜩 쌓일 때 | orders 테이블에서 status='pending'인 row 다 삭제해줘 |
| 옛 페이지가 계속 보일 때 | (브라우저 단축키) Cmd+Shift+R / Ctrl+Shift+R |
| 배포 안 됐는지 의심될 때 | 방금 배포 상태 확인해줘 |
| 관리자 페이지 컬럼 추가 | admin.html에 결제일자 컬럼도 추가해줘 |
| 상품 더 추가 | products 테이블에 새 상품 3개 더 시드 추가해줘 |
처음하는 클로드코드 Part2 · 복잡한 웹 한 번에 만들기 (Supabase × 토스페이먼츠)
실제 강의에서 사용한 프롬프트 그대로 · 모든 결과물은 GitHub Pages에 라이브 배포