진도
🏗️ Stage 6 · 백엔드 인프라 완전 이해

단단한 백엔드가
서비스를 살린다

여기가 단단해야 고도화된 서비스를 만들 수 있습니다. 이론과 각 프로그램의 역할을 제대로 이해하면 Claude Code가 만든 코드가 보입니다. 보이면 고칠 수 있고, 고칠 수 있으면 진짜 운영자가 됩니다.

학습 시간 약 6~8시간
6개 파트 · 라이브 URL 완성
산출물 3개
✦ 이 커리큘럼을 관통하는 한 문장
"기술은 AI가, 영혼은 사람이"
DB·Auth·결제·배포는 AI가 짭니다. 하지만 "왜 이 데이터를 모으는지, 누구의 결제를 받는지, 어떤 알림이 진짜 도움이 되는지"는 오직 당신이 결정합니다. 이 Stage가 끝나면 라이브 URL 위에 진짜 사용자가 가입할 수 있게 됩니다.
🎯 Stage 5에서 받아온 것 → Stage 6에서 만들 것
예시 프로젝트: AI 뉴스레터 자동화 서비스
Stage 5의 로컬 코드를 가져와서 — Supabase에 DB·Auth 연결, 토스페이먼츠로 월 9,900원 구독 결제, 텔레그램 봇 알림, Vercel에 배포. https://my-newsletter.vercel.app 같은 진짜 URL 위에서 진짜 사용자가 가입·결제 가능한 상태가 됩니다. Happy Path 한 번 완주.
Stage 1: 기획
→
Stage 2: 문서
→
Stage 3: 컨텍스트
→
Stage 4: 디자인
→
Stage 5: Claude Code
→
Stage 6: 배포·운영
→
Stage 7: n8n
PART A
백엔드 개념 완전 이해
"Claude Code가 짠 코드가 무엇을 하는지" 진짜로 보이게 만드는 시간

전체 데이터 흐름 + API + JSON

한 번 그림이 머릿속에 박히면 "이 코드가 뭘 하는지"가 즉시 보입니다

웹 서비스의 모든 동작은 4개 노드 사이의 데이터 이동입니다. 사용자 화면에서 시작해서 DB에 저장되거나 그 반대로 나옵니다. 이 그림 하나가 백엔드의 80%를 설명합니다.

🖥️
Frontend
사용자가
보는 화면
↔
🔌
API
중간
창구
↔
⚙️
Backend
로직
처리
↔
💾
DB
데이터
저장소
🍱 식당 비유로 RESTful API 이해하기
손님 = Frontend · 웨이터 = API · 주방장 = Backend · 창고 = DB

손님이 메뉴(요청)를 주문하면 웨이터(API)가 받아서 주방(Backend)에 전달. 주방은 창고(DB)에서 재료를 꺼내 요리해 다시 웨이터를 통해 손님에게 줍니다.

RESTful이란 "이 주문 양식이 표준화되어 있어서 어떤 식당이라도 같은 방식으로 주문 가능한 것"을 의미합니다.
📨 HTTP 메서드 4가지 — 주문의 종류
GET
읽기
"메뉴 보여주세요"
구독자 목록 조회
POST
생성
"새 주문 넣어주세요"
새 구독자 가입
PUT
수정
"주문 변경할게요"
구독 주제 변경
DELETE
삭제
"주문 취소할게요"
구독 해지
📦 JSON 데이터 구조 읽는 법

API가 주고받는 표준 데이터 형식. 키-값 쌍의 묶음입니다. 한국어로 "{이름: 값, 이름: 값}" 메모지를 주고받는 셈.

JSON 예시 — 구독자 한 명 데이터 JSON
{ "id": 42, "email": "junho@example.com", "name": "이준호", "plan": "monthly", "topics": ["IT", "투자", "AI"], // 배열 "settings": { // 중첩 객체 "send_time": "08:00", "notify": { "telegram": true, "email": true } }, "active": true, "created_at": "2026-05-05T08:00:00Z" }
💚 읽는 4가지 규칙
1. "키": 값 쌍 — 이름 옆에 콜론(:)
2. [ ] 배열 — 여러 값 묶음
3. { } 객체 — 키-값 묶음 (중첩 가능)
4. "문자"는 따옴표, 숫자/true/false는 따옴표 없음
🔑 환경변수 — .env.local과 NEXT_PUBLIC_ 규칙

API 키·비밀번호 같은 민감 정보는 코드에 박지 않고 .env.local 파일에 분리합니다. GitHub에 안 올라가게 .gitignore에 등록 필수.

.env.local (절대 git commit 금지) 규칙
# 서버에서만 사용 (프론트엔드 노출 X) SUPABASE_SERVICE_KEY=eyJxxx... TOSS_SECRET_KEY=test_sk_xxx... TELEGRAM_BOT_TOKEN=123456:ABC... # NEXT_PUBLIC_ 접두사가 붙은 것만 브라우저에 노출됨 # → 공개해도 안전한 값에만 사용! NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx... NEXT_PUBLIC_API_URL=https://my-newsletter.vercel.app
🚨 절대 금지 — 결제 키 NEXT_PUBLIC_ 노출
NEXT_PUBLIC_TOSS_SECRET_KEY 같은 실수는 브라우저에 결제 비밀키가 노출됩니다. 결제·관리자 키는 절대 NEXT_PUBLIC_ 접두사 금지. CLAUDE.md의 CRITICAL 섹션에 박아두세요.
PART B
Supabase 완전 이해
DB·Auth·Storage·Edge Functions — 백엔드 4종 세트를 한 곳에

Supabase 4가지 역할

"백엔드 개발자 한 명을 채용하는 비용"을 무료~소액으로 대체하는 도구

Supabase는 단순 DB가 아닙니다. DB + Auth + 파일저장 + 서버리스 함수까지 한 플랫폼에서 제공. 1인 창업가가 백엔드 개발자 없이 서비스를 굴릴 수 있는 결정적 도구입니다.

💾
DB (PostgreSQL)
데이터 저장소
테이블 설계 + SQL 쿼리 + RLS(행 단위 권한) 정책. 진짜 PostgreSQL이라 Excel 수준이 아닌 견고함.
Claude에게: "users·subscriptions·newsletters 3개 테이블 SQL 짜고, 각 테이블에 RLS 정책 적용해줘"
🔐
Auth (인증)
로그인 시스템
이메일/비밀번호 + Magic Link + 카카오·구글·애플 OAuth + JWT 세션 관리까지. 직접 짜면 한 달 걸리는 것을 5분에 활성화.
Claude에게: "Supabase Auth로 카카오 로그인 + 이메일 가입 둘 다 가능하게 설정해줘"
📦
Storage (파일)
파일 저장소
이미지·PDF·동영상 업로드. 자동 CDN 배포. 무료 1GB → 그 이후도 저렴.
Claude에게: "프로필 사진 업로드 기능. 5MB 제한, JPG/PNG만, public 버킷"
⚡
Edge Functions
서버리스
서버 없이 도는 함수. Webhook 처리·정기 작업·외부 API 호출 등에 적합. Deno 기반 TypeScript.
Claude에게: "토스페이 Webhook을 Edge Function으로 받아 subscriptions 테이블 업데이트"
🚨 자주 나오는 에러 5가지 + 해결법
1
RLS로 데이터가 안 보임 (응답은 성공인데 빈 배열)
RLS(Row Level Security) 정책이 모두 차단 중. 해결: 해당 테이블에 CREATE POLICY ... USING (auth.uid() = user_id) 추가. 개발 중 임시로 끄려면 ALTER TABLE ... DISABLE ROW LEVEL SECURITY.
2
Vercel에서 환경변수 누락 → "supabaseUrl is required"
로컬 .env.local은 잘 되는데 Vercel 배포본만 죽음. 해결: Vercel 대시보드 → Settings → Environment Variables에서 1:1 동일하게 등록 + 재배포.
3
CORS 에러 — "Access-Control-Allow-Origin"
브라우저에서 다른 도메인 API 호출 차단. 해결: Supabase 대시보드 → Settings → API → CORS에 도메인 추가, 또는 Next.js API Route를 프록시로 사용.
4
Auth 콜백 URL 미등록 — 카카오 로그인 후 404
OAuth 후 Supabase가 돌려보내는 URL이 등록 안 됨. 해결: Supabase → Auth → URL Configuration에 https://my-app.vercel.app/auth/callback 추가. localhost도 함께.
5
Storage 업로드 실패 — 401 Unauthorized
Storage 버킷의 RLS 정책 미설정. 해결: Supabase → Storage → 버킷 → Policies에 INSERT 정책 추가 (예: 인증된 사용자만 자기 폴더에 업로드).
📰 뉴스레터 서비스 DB 스키마
supabase/migrations/0001_init.sql PostgreSQL
-- 1. users (Supabase Auth와 1:1 매칭) CREATE TABLE users ( id uuid PRIMARY KEY REFERENCES auth.users, email text NOT NULL, name text, created_at timestamptz DEFAULT now() ); -- 2. subscriptions (구독 상태 + 결제 정보) CREATE TABLE subscriptions ( id uuid PRIMARY KEY DEFAULT gen_random_uuid(), user_id uuid REFERENCES users(id), plan text CHECK (plan IN ('monthly', 'yearly')), status text DEFAULT 'active', topics text[], -- 배열 (IT, AI, 투자) started_at timestamptz, next_billing timestamptz ); -- 3. newsletters (발송 콘텐츠) CREATE TABLE newsletters ( id uuid PRIMARY KEY DEFAULT gen_random_uuid(), topic text, title text, content_md text, -- 마크다운 issued_at timestamptz ); -- 4. send_logs (발송 추적) CREATE TABLE send_logs ( id uuid PRIMARY KEY DEFAULT gen_random_uuid(), user_id uuid REFERENCES users(id), newsletter_id uuid REFERENCES newsletters(id), channel text, -- 'email' | 'kakao' status text, -- 'sent' | 'failed' opened_at timestamptz, sent_at timestamptz DEFAULT now() ); -- 5. RLS 정책 (자기 데이터만 읽기/수정) ALTER TABLE users ENABLE ROW LEVEL SECURITY; CREATE POLICY "own data" ON users USING (auth.uid() = id);
⚡ Supabase 스키마 + RLS 설계 프롬프트
AI 뉴스레터 서비스의 Supabase DB 스키마를 설계해줘. 요구사항: - 4개 테이블: users / subscriptions / newsletters / send_logs - users는 Supabase auth.users와 1:1 연결 (id를 uuid로) - subscriptions: monthly/yearly plan, 활성 상태, 구독 주제 배열 - newsletters: 토픽별 발송 콘텐츠 (마크다운) - send_logs: 발송 채널(email/kakao), 발송 상태, 오픈 추적 각 테이블별로: 1. CREATE TABLE SQL 2. 필요한 인덱스 3. RLS 정책 (자기 데이터만 보이게) 4. 자주 쓸 쿼리 예시 3개 (TypeScript Supabase Client) 마지막에 마이그레이션 파일 구조 (supabase/migrations/0001_init.sql) 제안. Claude Code가 supabase CLI로 그대로 실행 가능한 수준으로.
PART C
로그인 시스템 설계
한국 서비스의 표준은 카카오 OAuth — 그 외는 보조

Auth + 카카오 OAuth + JWT

한국 사용자는 가입 폼이 길면 떠납니다 — 카카오 한 번 클릭이 전환률 3배

Supabase Auth는 이메일/비밀번호 + Magic Link + 소셜 OAuth를 모두 지원합니다. 한국 서비스라면 카카오 OAuth는 필수. 가입 전환률에서 압도적입니다.

🔄 OAuth 4단계 흐름
👆
1. 클릭
사용자가
"카카오 로그인" 클릭
→
💬
2. 카카오 인증
카카오 화면에서
로그인 + 동의
→
↩️
3. 콜백
/auth/callback으로
코드 전달
→
🎫
4. 세션
JWT 발급 →
로그인 완료
🟡 카카오 OAuth 연동 5단계
1. 카카오 개발자센터: 앱 생성 → 앱 키 발급 (REST API 키)
2. Redirect URI 등록: https://xxx.supabase.co/auth/v1/callback (Supabase URL)
3. Supabase Auth Provider 활성화: Auth → Providers → Kakao → 토글 ON + 키 입력
4. 동의 항목 설정: 카카오 → 비즈니스 → 동의 항목에서 "닉네임", "이메일" 활성화 (이메일은 비즈니스 앱 등록 필요)
5. 코드: supabase.auth.signInWithOAuth({ provider: 'kakao' }) 한 줄
🚱 흔한 에러 — Redirect URI 잘못 설정
가장 자주 마주치는 사고: window.location.origin을 redirectTo에 박았다가 Vercel 배포 후 localhost로 돌려보냄.

해결: 항상 process.env.NEXT_PUBLIC_API_URL 사용. Vercel과 로컬에서 다른 값으로 자동 분기.

이메일 수집: 개인 개발자도 비즈니스 앱 등록 가능 (사업자 없이도). 등록 안 하면 이메일 비어 있음.
🎫 JWT — "왜 로그인이 유지되나"

로그인 후 받는 토큰. "이 사람은 ○○○○이고 1시간 동안 유효함"이 암호화돼 들어있는 일종의 출입증입니다. 브라우저 쿠키나 localStorage에 저장. API 호출 때마다 자동으로 헤더에 붙어 "이 사람은 인증된 회원"임을 증명합니다.

🎯 권한 레벨 설계 — 일반 vs 관리자
일반 구독자: 자기 데이터만 (RLS로 자동 차단)
관리자: users 테이블에 role 컬럼 추가 (예: 'admin') → RLS에서 auth.jwt() ->> 'role' = 'admin' 조건으로 전체 접근 허용

Supabase는 JWT 안에 커스텀 claims도 넣을 수 있어 권한 분리가 깔끔합니다.
⚡ 카카오 OAuth 연동 프롬프트
Next.js 15 + Supabase 환경에서 카카오 OAuth 로그인을 구현해줘. 요구사항: 1. 카카오 개발자센터 앱 등록 가이드 (단계별 스크린샷 위치 설명) 2. Supabase Auth Kakao Provider 활성화 단계 3. /auth/callback Route Handler 구현 (App Router) 4. 로그인 버튼 컴포넌트 (signInWithOAuth) 5. redirectTo는 NEXT_PUBLIC_API_URL 환경변수 사용 (window.location.origin 절대 금지) 6. 로그인 후 users 테이블에 자동으로 row 생성 (Supabase Trigger) 7. 흔한 에러 5가지와 해결법 (콜백 URL 미등록, 이메일 비어있음, JWT 만료 등) 코드는 TypeScript. 환경변수 모두 .env.local 파일 형식으로 정리. Vercel 배포 시 추가로 등록할 환경변수 목록 별도 표기.
PART D
결제 시스템
한국은 토스페이먼츠, 글로벌은 Stripe — 가장 단순한 연동부터

토스페이먼츠 vs Stripe

"PG 비교에 한 달 쓰지 마세요" — 한국 서비스면 토스, 글로벌이면 Stripe. 끝.

💙
한국 표준
토스페이먼츠
✓ 한국 사용자 결제 UX 1위
✓ 카드/계좌이체/토스/카카오 다 지원
✓ 테스트 모드 즉시 사용
✓ 한글 문서·CS 우수
✓ 빌링키로 자동 정기결제
✗ 해외 카드는 약함
VS
💜
글로벌 표준
Stripe
✓ 전 세계 통화·카드 지원
✓ Subscription·Invoice 모델 표준
✓ Customer Portal 기본 제공
✓ Webhook·SDK 품질 최고
✗ 한국 사용자 UX는 토스가 우위
✗ 한국 카드 전환률 낮음
🎯 1인 창업가 추천 — 단계별 진화
Phase 1 (한국 MVP): 토스페이먼츠 한 개. 빌링키로 정기결제 구현.
Phase 2 (해외 진출): Stripe 추가. 결제 옵션 분기.
두 개 동시 도입 금지 — 둘 다 어설프게 됩니다.
💳 결제 흐름 — 토스페이먼츠 정기결제 4단계
STEP 1
사용자 카드 등록: 결제 페이지 → 토스 위젯 → 카드 정보 입력 → 빌링키 발급 받아 DB에 저장 (실제 카드 번호는 토스만 보관)
STEP 2
첫 결제: POST /v1/billing/{billingKey} 호출 → 9,900원 즉시 결제 → 응답에서 결제 결과 확인
STEP 3
Webhook 수신: 토스 → 우리 서버로 결제 완료 알림 POST → subscriptions 테이블 status='active' + next_billing 30일 뒤로 업데이트
STEP 4
매월 자동 청구: n8n cron (Stage 7) 또는 Supabase pg_cron으로 매일 next_billing 도래한 사용자에게 자동 결제 → 실패 시 재시도 + 실패 메일
🚨 결제 보안 절대 규칙
1. Secret Key는 절대 NEXT_PUBLIC_ 금지. 서버에서만.
2. Webhook은 시그니처 검증 필수 (위조 방지). 토스는 X-Toss-Signature 헤더.
3. 결제 금액은 클라이언트에서 받지 말고 서버에서 다시 조회 (사용자가 임의로 9,900 → 100원으로 바꿀 수 있음).
4. 환불은 사용자 요청 → 사람이 확인 → 토스 API 호출. 자동화 금지.
⚡ Webhook 구현 프롬프트 (토스페이먼츠)
토스페이먼츠 Webhook을 Next.js 15 App Router로 구현해줘. 엔드포인트: POST /api/payment/webhook 요구사항: 1. X-Toss-Signature 헤더 시그니처 검증 (HMAC-SHA256) 2. 이벤트 타입별 분기 (PAYMENT.DONE, PAYMENT.CANCELED, PAYMENT.FAILED 등) 3. 결제 완료 시: - subscriptions 테이블 status='active' 업데이트 - next_billing = 30일 뒤 - send_logs에 이벤트 기록 - 텔레그램 봇으로 관리자 알림 4. 실패 시: - 사용자에게 결제 실패 이메일 - Sentry 에러 로깅 5. 멱등성 보장 (같은 webhook이 두 번 와도 한 번만 처리 — payment_id로 중복 체크) 6. 응답: 200 OK 빠르게 (3초 안에) 코드는 TypeScript + Supabase Server Client + zod 검증. 환경변수: TOSS_SECRET_KEY, TOSS_WEBHOOK_SECRET (둘 다 NEXT_PUBLIC_ 금지). 실제 토스 docs URL과 함께 구현 가이드.
PART E
알림 시스템
상황별로 채널이 달라야 합니다 — 긴급은 텔레그램, 거래는 카카오, 콘텐츠는 이메일

3채널 알림 — 텔레그램·카카오·이메일

"모든 알림을 한 채널로" 안 됩니다. 상황별 맞춤이 신뢰도와 비용을 가릅니다

💙
텔레그램 봇
긴급·내부 알림용
무료, 즉시. BotFather로 30분 안에 봇 생성. 운영자(나)가 받는 시스템 알림에 최적.
예: 새 구독자 / 결제 실패 / 발송 오류
💛
카카오 알림톡
거래·공식 알림용
한국인이 가장 신뢰하는 채널. 이메일 대비 오픈율 5배. 단 템플릿 심사 1~2주 + 비즈니스 계정 필요.
예: 결제 완료 / 가입 환영 / 구독 갱신 안내
💚
이메일 (Resend)
콘텐츠·뉴스레터용
긴 콘텐츠는 무조건 이메일. Resend가 무료 월 3,000건. Next.js와 가장 매끄럽게 연동.
예: 매일 뉴스레터 본문 / 주간 요약
💙 텔레그램 봇 — Claude Code 30분 구축

가장 빠른 알림 채널. 무료. 본인 운영용으로 거의 필수입니다. BotFather에게 한국어로 "/newbot" 한 줄이면 봇 생성 + API 키 발급 끝.

텔레그램 봇 구축 흐름 (30분) Step by Step
# 1. 텔레그램에서 @BotFather 검색 → 대화창에서 > /newbot > [봇 이름]: NewsletterAlertBot > [사용자명]: my_newsletter_bot # → API 키(token) 발급: 123456:ABC-DEF... # 2. 본인 채팅 ID 확인 (@userinfobot 검색 → /start) # → chat_id: 987654321 # 3. .env.local에 추가 TELEGRAM_BOT_TOKEN=123456:ABC-DEF... TELEGRAM_CHAT_ID=987654321 # 4. Next.js API Route — /api/notify/telegram export async function POST(req) { const { message } = await req.json(); await fetch(`https://api.telegram.org/bot${process.env.TELEGRAM_BOT_TOKEN}/sendMessage`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ chat_id: process.env.TELEGRAM_CHAT_ID, text: message }) }); return Response.json({ ok: true }); } # 5. 구독 신청 webhook에서 호출 → 즉시 알림
💛 카카오 알림톡 — PlayMCP 활용 + 비즈니스 채널

한국 사용자에게 가장 효과적이지만 설정 비용이 큽니다. 카카오 비즈니스 채널 개설 → 알림톡 사업자 등록 → 템플릿 심사(1~2주). MVP 단계에서는 텔레그램으로 시작하고, 첫 100명 넘으면 카카오 도입.

🤖 Claude Cowork + PlayMCP 카카오톡 나채방 MCP
2026년 새 옵션: Claude Cowork(컴퓨터 조작 에이전트)와 PlayMCP의 카카오톡 나채방 MCP를 조합하면 비즈니스 계정 없이 개인 카카오톡으로 알림 가능. 본인 또는 베타 테스터 그룹에 알림 보낼 때 임시 활용. 단, 상용 서비스는 반드시 정식 알림톡 채널로 전환할 것.
💚 이메일 (Resend) — 무료 월 3,000건

2026년 Next.js 사용자의 사실상 표준 이메일 서비스. SendGrid보다 매끄럽고, Mailgun보다 한국 도달률이 좋습니다. 무료 티어가 넉넉해서 첫 100명 구독자까진 한 푼도 안 듭니다.

📧 Resend + React Email 조합 ★
Resend는 React Email 컴포넌트를 그대로 받습니다. Tailwind로 만든 React 컴포넌트가 그대로 이메일 HTML이 됩니다. 디자인 일관성 유지 + 마크업 안전. Claude Code에게: "Resend + React Email로 뉴스레터 템플릿 만들어줘. Inter 폰트, 본문 600px, 그린 포인트."
🗺️ 알림 채널 선택 가이드
상황추천 채널이유
새 구독자 가입 (운영자 알림)텔레그램즉시·무료·내부용
발송 오류·결제 실패 (운영자 알림)텔레그램긴급, 즉시 대응
가입 환영·결제 영수증 (사용자)카카오 알림톡 (없으면 이메일)신뢰도, 오픈율
구독 갱신·만료 안내 (사용자)카카오 알림톡거래 알림 표준
매일 뉴스레터 본문 (사용자)이메일 (Resend)긴 콘텐츠, 비용
주간 요약 리포트이메일읽고 보관 가능
PART F
배포 & Happy Path
로컬 → 라이브 URL — 5단계로 진짜 사용자가 가입할 수 있게

Vercel 배포 + Happy Path 검증

배포 자체는 5분, 환경변수 동기화가 95%

Vercel은 GitHub 저장소를 연결만 하면 자동 배포. 실제 어려움은 "로컬에서는 되는데 배포본에서는 안 되는" 환경변수 누락입니다. 이걸 막는 체크리스트가 핵심입니다.

🚀 Vercel 배포 5단계
STEP 1
🐙
GitHub 연결
vercel.com → Import Project → 저장소 선택
→
STEP 2
🔧
프레임워크
Next.js 자동 감지
Build Command 확인
→
STEP 3
🔑
환경변수
.env.local과
1:1 동일하게
→
STEP 4
🚀
Deploy
버튼 클릭 →
2~3분 빌드
→
STEP 5
🌐
도메인
Settings → Domain
커스텀 도메인 연결
📋 .env.local ↔ Vercel 환경변수 동기화 체크리스트
NEXT_PUBLIC_SUPABASE_URL — 양쪽 동일 https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY — 양쪽 동일
SUPABASE_SERVICE_KEY — Vercel에만 (NEXT_PUBLIC_ 절대 금지)
NEXT_PUBLIC_API_URL — 로컬 http://localhost:3000 / Vercel https://my-newsletter.vercel.app (값 다름!)
TOSS_SECRET_KEY — 양쪽 동일 (테스트→실 키 분리)
TOSS_WEBHOOK_SECRET — Vercel만
TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID — 양쪽 동일
RESEND_API_KEY — 양쪽 동일
Supabase Auth Redirect URL에 Vercel 도메인 추가됨
토스페이먼츠 Webhook URL에 Vercel 도메인 등록됨
⚙️ "로컬에서는 되는데 Vercel에서 안 됨" TOP 5
1. 환경변수 누락 (NEXT_PUBLIC_API_URL 자주 빠짐)
2. NEXT_PUBLIC_ 접두사 안 달려서 클라이언트가 못 읽음
3. Supabase Redirect URL에 Vercel 도메인 미등록 → 카카오 로그인 후 404
4. Webhook URL이 localhost로 박힘 → 외부에서 못 부름
5. .env.local과 Vercel 값이 다름 (예: 토스 테스트 키 vs 실 키)
🎯 Happy Path 구현 — 핵심 한 줄짜리 흐름

"모든 게 잘 됐을 때의 가장 단순한 경로"입니다. 이 흐름이 막힘없이 한 번 돌아가야 진짜로 배포된 것입니다. 엣지 케이스는 그 다음.

SCENE 1
방문 → 가입: 사용자가 my-newsletter.vercel.app 방문 → "카카오로 시작" → 카카오 인증 → users 테이블에 row 생성
SCENE 2
주제 선택 → 결제: "IT/AI/투자" 중 1개 선택 → 9,900원 결제 → 토스 위젯 → 빌링키 발급 → subscriptions 활성화
SCENE 3
결제 완료 알림: 토스 Webhook 수신 → DB 업데이트 → 이메일 영수증 사용자에게 + 텔레그램으로 운영자에게 알림
SCENE 4
다음날 8시: n8n cron → newsletters 테이블 조회 → Resend로 발송 → send_logs 기록
✅ 4 Scene 모두 한 번 통과하면 = 진짜 배포 완료
혼자 본인 카드로 한 번 결제 → 본인 메일 도착 확인. 그 한 번이 모든 것을 검증합니다. 오류 없이 통과한 순간 진짜 사업자가 됩니다.
📊 배포 직후 모니터링 — PostHog + Sentry

배포는 시작입니다. 사용자가 들어오기 시작하면 "누가 어디서 막혔나"를 봐야 합니다. 무료 티어 두 개면 충분.

📈 PostHog (사용자 추적) + Sentry (에러 추적)
PostHog: 누가 가입했는지·결제까지 갔는지·어디서 이탈했는지 funnel로 시각화. 무료 1M 이벤트/월. Stage 9에서 NSM 추적의 핵심.
Sentry: 사용자가 마주친 에러를 자동 수집. 무료 5K 이벤트/월. 새 에러 발생 즉시 텔레그램으로 알림 연결 가능.

둘 다 npm install + 1줄 코드로 활성화. Stage 6 마무리 단계에서 반드시 셋업.
🎯 Stage 6 산출물 — 이걸 만들어야 끝입니다
진짜 사용자가 가입·결제할 수 있는 라이브 URL
읽기만 하면 의미 없습니다. 본인 카드로 본인 서비스에 한 번 결제해보세요. 그 순간이 진짜 사업자가 되는 순간입니다. 아래 3개를 끝내면 다음 Stage 7의 자동화 토대가 완성됩니다.
🌐 카카오 로그인 + 구독 결제 작동하는 라이브 URL
Supabase Auth + Kakao OAuth + 토스페이먼츠 정기결제 + Resend 영수증까지 통합. 본인 카드로 한 번 9,900원 결제 → DB에 active 저장 → 영수증 메일 도착 확인. URL: https://my-newsletter.vercel.app
💙 텔레그램 봇 알림 작동
새 구독자 가입 시 본인 텔레그램에 즉시 알림. BotFather로 봇 생성 → /api/notify/telegram 구현 → 가입 webhook에서 호출. 환경변수: TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID
📊 PostHog 대시보드 구독자 추적 셋업
PostHog 무료 가입 → SDK 설치 → 핵심 이벤트 3개 등록(visit_landing / signup_complete / payment_success). 가입 funnel 시각화. Stage 9 AARRR 분석의 데이터 축적 시작점. 대시보드 URL: app.posthog.com/...
📎 Stage 연결 고리: 지금 만든 라이브 URL이 Stage 7에서 n8n 자동화의 연결 포인트가 됩니다. DB 스키마(users·subscriptions·newsletters·send_logs)는 Stage 7 자동화 워크플로우가 읽고 쓰는 데이터 소스. PostHog는 Stage 9 AARRR(획득·활성화·유지·추천·수익) 분석의 데이터 축적이 오늘부터 시작됩니다. 일주일 뒤 첫 진짜 사용자 데이터가 쌓이기 시작합니다.
🏗️
Stage 6 AI 튜터
Supabase · Auth · 토스페이먼츠 · 텔레그램 · Vercel 배포
LIVE AI
AI 튜터 응답