정적 페이지로는 못 만드는 회원/결제/DB가 들어간 진짜 웹 사이트도
GitHub Pages × Supabase × 토스페이먼츠 조합으로
한 줄도 직접 코딩하지 않고 만들 수 있습니다
한 번에 완벽한 결과는 거의 없습니다 — Anthropic 공식 권장 흐름
Anthropic이 공식 가이드로 권장하는 4단계 루프입니다
이번 프로젝트도 이 흐름을 그대로 따랐습니다
Explore (탐색)
이미 프로젝트가 있고 처음 claude로 시작한다면 /init 실행
Plan (계획)
/plan 으로 설계부터 — 단, /plan 명령은 요구사항을 명확히 하기 위해 기술적 사항 포함 질문을 함
Implement (구현)
요청 → 확인 → 수정 요청, 이 흐름을 반복하는 걸 추천
Commit
완성 후, 개발에서는 보통 GitHub repository 에 최종 업로드하는 것을 의미
Claude가 자기 작업을 검증할 수 있을 때(테스트 실행, 스크린샷 비교, 출력값 확인) 성능이 극적으로 향상됩니다. 명확한 성공 기준 없이는 "그럴듯하지만 실제로는 동작하지 않는" 결과물이 나오기 쉽습니다.
예시 프롬프트
"결과를 직접 확인하여, 이슈 있으면 재수정하는 작업을 이슈 없을 때까지 반복하여, 최종적으로 완벽한 결과물을 만들어줘"
잠깐 — 이게 곧 "하네스 엔지니어링"입니다
하네스 엔지니어링(Harness Engineering)은 AI가 자기 작업을 스스로 검증·반복할 환경을 만드는 일입니다 — 자동 테스트, 빌드 검증, 스크린샷 비교 같은 피드백 루프죠.
그런데 클로드코드는 이미 그 환경을 갖추고 있습니다 — 터미널·파일·웹·서버를 다룰 수 있어 별도 harness를 구축할 필요가 없습니다.
그래서 입문 레벨에서는 프롬프트에 "결과 확인 → 이슈 있으면 재수정 → 이슈 없을 때까지 반복" 한 줄만 넣어도 훌륭한 하네스 엔지니어링이 됩니다. Claude가 알아서 도구로 검증·재수정 루프를 돌리거든요.
무관한 작업들이 한 세션에 섞임 → 작업 사이마다 /clear
같은 이슈로 두 번 이상 고침 → /clear 후 더 나은 프롬프트로 재시작
너무 길어서 핵심 규칙이 묻힘 → 가차 없이 가지치기
그럴듯하지만 엣지케이스 미처리 → 검증 수단 항상 제공, 검증 못 하면 출시 금지
범위 없는 "investigate" 요청 → 조사 범위 좁히기 (또는 아래 서브에이전트로 위임)
/init — 현재 프로젝트에 CLAUDE.md 자동 생성/clear — 새 대화 시작 (지금까지 대화 내용 모두 비움)/plan — 작업 전 먼저 계획부터 세우기 (Claude가 질문하면서 설계)/compact — 대화가 너무 길어졌을 때 요약해서 가볍게 (작업은 그대로 이어감)/rewind — 이전 결과로 복원/btw — 작업 흐름은 그대로 두고, 잠깐 옆길 질문서브에이전트는 특정 역할을 맡긴 보조 에이전트입니다. 예를 들어 "개발 코드 리뷰 전문가 서브에이전트를 만들어서, 코드 검증을 맡겨줘" 식으로 프롬프트에 넣으면 됩니다.
"개발 코드 리뷰 전문가" 서브에이전트를 하나 만들어줘.
이 에이전트가 점검할 항목은:
- 코드 스타일이 일관적인지
- 보안상 위험한 부분이 있는지 (입력 검증, 토큰 노출 등)
- 동작하지 않는 엣지 케이스가 있는지
- 결과는 한국어로 요약해서 보고
이후 내가 작성·수정한 코드의 검증은 모두 이 서브에이전트에
맡겨줘.단, 토큰 사용량이 늘어 보통 월 100달러 이상 요금제가 필요합니다. 꼭 써야 하는 건 아니니 참고만 하세요.
CLAUDE.md는 프로젝트의 설명·가이드를 적어두는 마크다운 파일입니다.
/init으로 자동 생성하거나 직접 작성해도 됩니다.
정해진 포맷은 없고 — 프로젝트 목표·자주 쓰는 명령·코딩 스타일 등
매 세션마다 다시 설명하기 번거로운 내용을 자유롭게 적으면 됩니다.
핵심은 — 새 세션 시작마다 클로드코드가 CLAUDE.md를 자동으로 읽어 컨텍스트에 포함합니다. 매번 "이 파일 먼저 읽어줘"라고 안 해도 Claude가 알아서 그 내용대로 작업합니다.
Andrej Karpathy(테슬라 전 AI 디렉터, OpenAI 공동창업자)가 공유한 CLAUDE.md가 최근 개발자들에게 큰 호응을 받았습니다. 핵심 4원칙만 정리하면 —
입문자 팁 — CLAUDE.md, 처음엔 이 정도면 충분합니다
영어로 정교하게 쓸 필요 없습니다. 최상단에 프로젝트 목표·설명만 한글로 간략히 넣어둬도 됩니다 — Claude가 매 세션마다 그걸 먼저 읽고 맥락을 잡습니다.
예시 (본 프로젝트 기준):
# CLAUDE.md 이 프로젝트는 회원가입·결제·관리자 기능을 갖춘 실전 웹 사이트입니다. Supabase로 인증·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 로 하고
- github pages 웹페이지는 HTML/CSS/JS 로 작성
결재
- 토스 페이먼트를 테스트 모드
문서 작업
- 핵심 프로젝트 내용은 CLAUDE.md 에, 세부 구조는 ARCH.md 로 만들고 싶어
유의 사항
- supabase 회원가입시, 이메일 인증 기능은 하지않도록 설정참고 — /plan은 경우에 따라 질문이 다릅니다
/plan으로 시작하면 Claude가 기술적인 내용을 포함한 다양한 질문을 할 수 있습니다.
요청사항을 명확히 하기 위함이지만, 입문자에게는 어려울 수 있습니다.
답변 감사합니다. 입문자에게 친화적으로 빌드 단계 없이 순수 HTML/JS로
가되, Supabase는 ESM CDN으로 임포트하는 방식으로 정리하고, 결제
승인은 Edge Function에서 처리하는 구조로 plan을 작성하겠습니다.plan은 수정/거절 가능합니다
마음에 안 들면 "이 부분은 …로 바꿔줘" 한 줄이면 Claude가 plan 파일을 직접 다시 씁니다. 승인되면 그때부터 코드 작업이 시작돼요.
Plan이 끝나면 Claude가 권한 prompt 없이 끝까지 자동으로 진행합니다
DB·인증·결제·GitHub 배포까지 한 번에
보통 10~15분이면 라이브 URL이 나옵니다
도중에 Claude가 plan만 다 짜고 멈출 수도 있고, 그대로 구현까지 자연스럽게 이어가는 경우도 있어요. 멈추면 "이 plan대로 구현해줘" 한 줄이면 됩니다.
작업이 끝나면 Claude가 라이브 URL을 알려줍니다
직접 눌러보고 안 되는 건 한 줄 자연어로 수정 요청 — 이 사이클이 핵심
직접 눌러보고 이상한 부분이 보이면, 그 증상을 그대로 한 줄 자연어로 적어 Claude에게 다시 요청하면 됩니다. 이 사이클을 반복하면서 점점 완성도를 올리는 게 핵심입니다.
프롬프트 팁 — 결과 퀄리티를 한 단계 높이는 두 줄
수정 요청 프롬프트 끝에 아래 두 줄을 함께 붙이면, 같은 요청이라도 결과 퀄리티가 좀 더 올라갈 수 있습니다.
한발짝 떨어져서 전체 프로젝트를 탐색하여 근본 원인을 파악한 후,
정확히 수정결과를 직접 너가 확인하여, 이슈 있으면 재수정하는 작업을
이슈 없을 때까지 반복하여, 최종적으로 완벽한 결과물을 만들어줘처음하는 클로드코드 Part2 · 복잡한 웹 한 번에 만들기 (GitHub Pages × Supabase × 토스페이먼츠)
실제 강의에서 사용한 프롬프트 그대로 · 모든 결과물은 GitHub Pages에 라이브 배포