바이브 코딩 101: AI로 만들어 Cloudflare에 무료로 자동 배포하기

결론 먼저: 구독을 매달 빌리는 대신, 작은 도구를 직접 만들어 소유한다. 그것도 손으로 다 짜는 게 아니라 — AI가 코드를 쓰고 → clasp·wrangler가 배포하고 → Cloudflare·Apps Script에서 라이브가 되는 루프로, 거의 0원에 공장처럼. 이 글은 그 전체 세팅을 숨김없이 공개합니다. 5분 예제, 자동 배포 스크립트, 실제 비용 숫자, 함정, 그리고 사람이 반드시 손대야 하는 지점까지.

큰 그림: AI 빌드 루프

너가 프롬프트로 시키면 → AI가 코드를 쓰고 → clasp push / wrangler deploy로 밀고 → Apps Script·Cloudflare에서 라이브가 된다 → 다음 기능으로 다시 한 바퀴. 한 바퀴가 짧을수록(기능 하나) 슬롭이 안 쌓이고 빨리 돈다. 이 블로그 자체가 그 증거입니다. 글 초안을 AI가 쓰고, wrangler가 Cloudflare에 자동 배포합니다.

준비물 (전부 무료로 시작)

# 한 번에 깔기 (Node가 이미 있다고 가정)
npm install -g @google/clasp            # Apps Script CLI
npm install -D wrangler                  # Cloudflare CLI (프로젝트별)
npm install -g @anthropic-ai/claude-code # AI 에이전트 (또는 @openai/codex)
npm install -g @googleworkspace/cli      # gws — AI가 Workspace에 직접

• 구글 계정 — Sheets·Drive·Gmail이 데이터베이스이자 백엔드다.
• Node.js — clasp·wrangler를 돌리는 런타임 (node -v로 확인, 없으면 nodejs.org).
• clasp / wrangler / gws-cli (gws) — 배포와 Workspace 연결.
• AI 코딩 에이전트 — Claude Code나 Codex. 챗 앱(복붙)이 아니라 파일을 직접 만지는 에이전트여야 한다.

각 도구 공식 문서 → clasp · Cloudflare Pages · Claude Code · Codex · gws-cli. 설치가 막히면 위 명령어를 그대로 AI 에이전트에게 줘도 알아서 깔아줍니다.

5분 예제: 폼 → 시트 → 알림 메일

말로 설명하면 추상적이니, 진짜 도구 하나를 끝까지 만들어 보자. 구글 폼 대신 쓸 “문의 폼” — 제출하면 시트에 한 줄 기록하고 너한테 알림 메일이 온다.

① 에이전트에게 시키는 프롬프트 (그대로 복붙):

문의 폼을 Apps Script 웹앱으로 만들어줘. 제출하면 시트에 (시각, 이름, 이메일, 내용) 한 줄을 기록하고, 나한테 알림 메일을 보낸다. clasp로 push하고 웹앱으로 배포까지 해줘.

② 에이전트가 만들 코드 (이 정도면 끝):

// Code.gs
const SHEET_ID = "여기에_시트_ID";        // 시트 URL의 /d/ 와 /edit 사이 값
const NOTIFY_TO = "[email protected]";

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index").setTitle("문의 폼");
}

function submit(form) {
  const sheet = SpreadsheetApp.openById(SHEET_ID).getSheets()[0];
  sheet.appendRow([new Date(), form.name, form.email, form.message]);
  MailApp.sendEmail(NOTIFY_TO, "새 문의: " + form.name, form.message);
  return "ok";
}

<!-- index.html -->
<form id="f">
  <input name="name" placeholder="이름" required />
  <input name="email" type="email" placeholder="이메일" required />
  <textarea name="message" placeholder="내용"></textarea>
  <button>보내기</button>
</form>
<script>
  f.addEventListener("submit", (e) => {
    e.preventDefault();
    const form = Object.fromEntries(new FormData(e.target));
    google.script.run.withSuccessHandler(() => alert("접수됐어요!")).submit(form);
  });
</script>

③ 배포:

clasp push        # 로컬 → Apps Script
clasp deploy      # /exec 웹앱 주소 발급

끝. /exec 링크를 폰으로 열면 폼이 뜨고, 제출하면 시트에 쌓이고 메일이 온다. 서버 0대, 비용 0원. 여기까지가 “바이브 코딩으로 도구 하나 소유”의 최소 단위다. 나머지는 이걸 더 예쁘게, 더 자동으로 만드는 일이다.

1단계: clasp — Apps Script를 로컬 코드로

npm i -g @google/clasp
clasp login                                   # 구글 OAuth (브라우저 1회)
clasp create --type webapp --title "my-tool"  # 새 프로젝트 → .clasp.json 생성
# 기존 프로젝트면: clasp clone <scriptId>
clasp push                                     # 로컬 → Apps Script
clasp deploy                                   # 웹앱으로 배포

왜 중요한가: 코드가 로컬 파일이 되는 순간 AI 에이전트가 직접 읽고 고칠 수 있습니다. 웹 편집기를 벗어나면 버전관리·AI·자동화가 한꺼번에 붙습니다.

2단계: Cloudflare — 프런트를 무료로

npm i -D wrangler
npx wrangler login
npx wrangler pages deploy dist --project-name=my-tool --branch=main

마지막 줄을 치면 https://my-tool.pages.dev 주소가 바로 찍혀 나옵니다. HTTPS 자동.

왜 중요한가: 서버를 안 빌립니다. 정적 프런트(또는 Pages Functions)가 Cloudflare 무료 한도 안에서 돕니다. 호스팅 고정비가 0원인 이유입니다. (어떤 결과물을 어디 올리는지는 → localhost에서 어떻게 배포함?)

3단계: gws-cli — AI가 Workspace에 직접

gws는 Google Discovery Service를 런타임에 읽어 명령을 동적으로 만드는 CLI입니다. AI 에이전트(MCP)가 Sheets·Drive·Gmail에 직접 붙습니다.

gws auth login              # Workspace 인증
gws mcp -s sheets,drive     # AI에게 줄 MCP 서버 — 필요한 서비스만

지원 서비스: sheets · drive · gmail · calendar · docs · chat · admin.

왜 중요한가: 이게 있으면 “이 시트 읽어서 정리하고 메일 초안 써”를 AI가 코드 작성부터 실행까지 한 번에 합니다. 백엔드를 잇는 글루 코드를 사람이 손으로 안 짜도 됩니다.

4단계: AI 코딩 루프 — “바이브 코딩”

핵심은 작게, 자주입니다. 한 번에 다 시키면 AI가 그럴듯하지만 안 도는 코드를 한 무더기 쌓아놓는다.

• 기능 하나씩 프롬프트로. “폼 만들어” → 되는지 확인 → “이메일 검증 추가” → 확인 → “스팸 필터 추가”…
• 에이전트가 clasp push / wrangler deploy까지 하도록 시킨다.
• 막히면 에러 메시지를 그대로 붙여넣어라. 에이전트가 원인을 읽고 고친다.
• 헤드리스로 돌리면 사실상 공장이 된다. 이 블로그의 콘텐츠 파이프라인이 그 예입니다 — 매니페스트 → AI 초안 → 자동 배포.

자동 배포로 묶기 (실제 코드)

package.json에 배포 한 줄을 박는다:

"scripts": {
  "deploy": "astro build && wrangler pages deploy dist --project-name=my-tool --branch=main"
}

이제 npm run deploy 한 번이면 빌드+배포가 끝. 정해진 시각에 자동으로 돌리려면 cron 한 줄:

# crontab -e — 매일 09:30에 배포
30 9 * * * cd ~/my-tool && npm run deploy >> ~/deploy.log 2>&1

함정 (시작 전에 꼭)

사람이 꼭 해야 하는 지점

자동화해도 사람이 반드시 손대야 하는 곳이 있습니다.

1. 로그인·시크릿 발급 — clasp login, wrangler login, gws auth, 키 보관. 자동화할 수 없고, 해서도 안 됩니다.
2. AI 출력 승인 — 외부로 나가는 메일·금액·고객 응대는 사람이 한 번 봅니다.
3. 안전·법적 판단 — 규정 판정 같은 책임은 시스템이 대신하지 않습니다.
4. 최종 배포 검토 — 라이브 직전 한 번 눈으로 봅니다.

진짜 비용 (숫자로)

“0원”이라는 말은 어디까지 진짜인지 정직하게 적는다. (정확한 수치는 플랜·시점마다 바뀌니 각 대시보드에서 확인하라.)

항목	무료 한도(대략)	언제 돈이 드나
Cloudflare Pages	정적 요청·대역폭 사실상 무제한, 빌드 월 ~500회, Functions 하루 ~10만 요청	빌드를 분당 수십 번 돌리거나 Functions 트래픽이 폭발할 때
Apps Script (소비자)	실행 1회 6분, 트리거 총 ~90분/일, 메일 ~100통/일	대량 발송·대량 처리·장시간 작업
AI 호출	구독은 정액	API 키로 호출당 — 긴 문서를 대량으로, 고급 모델로 돌릴 때 (AI 비용)

소규모 개인 도구는 거의 항상 0원 안에 들어옵니다. 0원이 깨지는 건 보통 대량·대규모·고급 AI 셋 중 하나입니다.

한 줄 요약

AI가 쓰고, CLI가 배포하고, 사람이 검수한다. clasp + Cloudflare + gws-cli + AI 루프면 작은 도구를 거의 0원에 공장처럼 찍어낸다 — 단, 로그인·시크릿·승인·안전 판단은 사람 몫이다.

더 궁금하면

직접 해보다 막히는 지점이 있으면 편하게 물어보세요. 이 블로그 자체가 이 루프로 돌아가니, 구체적으로 어느 단계가 궁금한지 짚어주면 좋습니다. 다음 단계는 → 그래서 어떤 도구로 함? · 만든 걸 어떻게 배포함?