[4주차] 바이브 코딩, 1인 창업가 부트캠프 (AI Product Builder)

영상: https://youtube.com/watch?v=cjmMNlOMBdg 강사: 조코딩

📋 4주차 핵심 요약

3주차까지 만든 Personal Stylist (단건 결제 서비스)를 구독형 SaaS로 전환하는 과정. 데이터베이스, 스토리지, 회원가입/로그인, 구독 결제, 무료 체험, 심리학 기반 전환율 최적화, 퍼널 분석 세팅, 페이지 속도 최적화, 전문성 강화까지 다룸.

3주차 → 4주차 변화 요약

• 3주차: 로그인 없이 → 사진/키/몸무게 입력 → 단건 결제($3.99) → 1회성 스타일 리포트
• 4주차: 회원가입/로그인 → 프로필 등록(키/몸무게/사진/거주도시) → 구독 결제($9.99/월, 7일 무료) → 매일 아침 날씨 기반 스타일 리포트 이메일 발송
• 단건 결제는 그대로 유지 (비로그인으로 이용 가능), 구독은 로그인 필수

0. 해커톤 & 이벤트 안내

해커톤(해코톤)

• 원래 무박 2일 → 당일 결승(3월 7일 토요일)으로 변경
• 온라인 예선 → 결승 진출 팀 선발
• 프라이머 참여 확정: 권도윤 대표 직접 심사, 괜찮은 팀 투자 의향
• 프라이머 포트폴리오: 업스테이지, 3.3, 라프텔, 번개장터(매각), 스타일쉐어(무신사 매각), 데일리호텔(야놀자 매각) 등
• OpenAI 크레딧 대규모 지원 예정 (API 비용 0원으로 마진율 100% 가능)
• 신청자 약 2,200명 대기 중

과제 이벤트

• 3주차 과제 제출: 5명 (구독자 중 실결제 성공 포함)
• 4주차 이벤트: 첫 구독 수익 달성 → SNS에 #조코딩 태그 → 교촌 허니콤보+콜라(26,000원) 10명

1. 데이터베이스(DB) 개념

왜 DB가 필요한가?

• 3주차까지는 DB 불필요: 사용자가 입력 → OpenAI가 한 번에 처리 → 결과 전달 → 데이터 휘발
• 4주차 구독 모델: 사용자 정보(키/몸무게/사진/도시)를 저장해두고 매일 재사용
• 매번 입력하는 수고 제거 → 자동 반복 결제 + 자동 리포트 발송

SQL DB vs NoSQL DB

• SQL DB (관계형): 엑셀 표처럼 컬럼/로우 형태
• 데이터 타입을 엄격히 관리 (예: 나이 필드에 "많음" 같은 문자 입력 차단)
• 컬럼(열) + 로우(행)으로 체계적 정리
• 예시: 출석체크 테이블 — Name, Note, Created 컬럼으로 구성
• 새 컬럼 추가 시 제약이 있어 철저한 관리 가능
• NoSQL DB: 다양한 형태
• Redis: 키-밸류만 저장, 자주 조회하는 데이터 캐싱용 (빠른 조회)
• MongoDB: JSON 문서 형태, 스키마 자유로움 (새 키 추가 자유)
• 그래프 DB 등 다양한 형태 존재

DBMS (Database Management System)

• 데이터 형식 관리 (숫자 필드에 문자 차단)
• 접근 권한 관리 (누가 볼 수 있는지)
• 무결성 보장 (데이터 일관성 유지)
• AI 시대에는 DB 설계도 AI에게 위임 가능 → "너는 최고의 DBA야, 최적으로 만들어줘"
• 정규화, 인덱스 최적화 등 전통적으로 어려웠던 작업을 AI가 처리
• 서비스에 따라 SQL/NoSQL 선택도 AI가 추천

클라우드 DB 서비스

• 직접 서버에 PostgreSQL 설치 → 스케일링 어려움 (사용자 급증 시 서버 추가 필요)
• 클라우드 DB: 알아서 서버 늘려줌 (오토스케일링)
• Supabase (이번 강의 사용): PostgreSQL 래퍼
• "Build in a weekend, scale to millions" — 주말에 만들고 수백만까지 스케일
• 무료 플랜:
• MAU(월간 활성 유저) 5만 명까지 무료
• 500MB 스토리지 무료
• API 요청 무제한
• 프리 프로젝트는 1주일 미사용 시 자동 중지 (재접속해서 다시 켜야 함)
• 프로젝트 2개까지 무료
• 파이어베이스 대비 가격이 합리적, 성장할수록 비용 구조가 나음
• 기타: Convex, Cloudflare D1, AWS RDS 등

2. 스토리지 개념

왜 별도 스토리지가 필요한가?

• DB에 사진을 직접 저장하면: 문자로 인코딩 시 엄청 길어짐 → DB가 무거워짐
• DB에는 이미지 URL만 저장, 실제 파일은 스토리지(구글 드라이브의 개발자 버전)에 업로드
• 스토리지에 올린 뒤 공유 링크를 DB에 저장하는 구조

Cloudflare R2 (이번 강의 사용)

• Egress(송신료) 무료 → 데이터 다운로드 비용 0원
• AWS S3는 Egress 비용이 꽤 비쌈
• 스토리지 10GB 월 무료
• Ingress(수신) 비용도 무료 사용량 제공
• Supabase에도 스토리지가 있지만, R2가 더 저렴해서 선택

R2 설정 방법

1. Cloudflare 대시보드 → Storage & Databases → R2 Object Storage
2. "Subscribe to R2" 클릭 (과금 정보 등록, 무료 사용량 범위 내 무과금)
3. Create Bucket → 버킷 이름 지정 (예: personal-stylist-photos)
4. Pages 프로젝트 Settings → Bindings에서 R2 버킷 연결
5. Variable name: PHOTO_BUCKET
6. R2 bucket: 생성한 버킷 선택

3. 회원가입/로그인 구현 (Supabase Auth)

Supabase 가입 및 프로젝트 생성

1. supabase.com 가입 (GitHub 연동 또는 이메일)
2. Organization 생성 (Personal, Free Plan)
3. 프로젝트 생성
4. DB 패스워드 설정: 크롬 추천 비밀번호 사용 권장 (안전한 곳에 보관 필수)
5. Region: 글로벌 서비스는 Asia 또는 기본값, 한국 타겟이면 Korea 선택 가능

이메일 로그인

1. .env에 환경 변수 설정:
2. VITE_SUPABASE_URL — Settings → Data API에서 확인
3. VITE_SUPABASE_ANON_KEY — API Keys에서 확인
4. Anon Key = Publishable Key (최근 이름 변경됨)
5. "공개돼도 괜찮은 키"라서 프론트엔드에 노출 가능
6. 클로드 코드에 "회원가입 로그인 기능 구현해줘, Supabase 이용해서" → 딸깍 한 번으로 구현
7. 자동으로 다국어(한글/영어) 지원, 디자인도 기존 사이트와 어울리게 생성

보안 설정 (Authentication → Configuration → Sign-in Providers)

• Secure email change: 기존+새 이메일 모두 인증 필요 → 활성화
• Secure password change: 로그인 상태에서만 비밀번호 변경 → 활성화
• Minimum password length: 기본 6자 → 8자 이상 권장
• Password requirements: No required → Letters + Digits + Symbols 활성화
• 대소문자 + 숫자 + 특수문자 조합 → 경우의 수 무한대로 추측 불가
• "1234567890" 같은 취약한 비밀번호 방지
• 유출된 비밀번호 차단: Pro 플랜 이상에서 지원

URL Configuration

• Site URL: 개발 서버 주소 등록 (나중에 운영 서버로 변경)
• Redirect URL: 개발 서버 + 운영 서버 주소 등록
• 이메일 인증 링크 클릭 시 올바른 사이트로 리다이렉트되도록 설정 필수

이메일 발송 제한 해결 (SMTP 설정)

• Supabase 무료: 시간당 이메일 2건만 발송 가능 (3명 가입하면 1명은 실패)
• Resend SMTP 연결:
• 월 3,000건 무료
• SMTP 설정 후 시간당 최대 10,000건으로 확장 가능 (32,767건까지 설정 가능)
• 설정 방법:
• Authentication → SMTP Settings → Custom SMTP 활성화
• Sender email: noreply@yourdomain.com
• Host: Resend SMTP 설정에서 확인
• Port: 465
• Username: resend
• Password: Resend API Key (Sending 권한, 해당 도메인에서 생성)
• 효과: 자체 도메인으로 이메일 발송 → 신뢰도 향상 (Supabase 도메인 vs 자체 도메인)

소셜 로그인 (Google OAuth)

1. Google Cloud Platform 가입 및 프로젝트 생성
2. 카드 등록 필요 (실제 과금은 거의 없음)
3. 새 프로젝트 생성 (예: week-4)
4. 인증 플랫폼(OAuth Consent Screen) 설정
5. 앱 이름: Personal Stylist
6. 사용자 유형: 외부 (글로벌 서비스)
7. 연락처 이메일 등록
8. OAuth 클라이언트 ID 생성
9. 애플리케이션 유형: 웹 애플리케이션
10. 승인된 JavaScript 원본: 개발서버 URL + 운영서버 URL (슬래시 없이 도메인까지만)
11. 승인된 리디렉션 URI: Supabase Google Provider의 Callback URL 복사해서 등록
12. Client ID, Client Secret → Supabase Google Provider에 등록
13. Skip Nonce Check: 웹에서는 반드시 꺼놓기 (보안 약화 방지, iOS 앱에서만 필요)
14. 권한은 최소한(이름, 프로필, 이메일)으로 → 심사 간소화
15. 권한 많이 요청 시 Google 심사 빡세짐 + 사용자 불안

Cloudflare Pages 환경 변수 등록

• .env의 키를 Cloudflare Pages Settings → Environment Variables에도 등록 필수
• VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY → Text로 등록 (공개 키이므로 안전)
• 등록 안 하면 "SUPABASE_URL is required" 에러 발생

배포 시 주의사항

• 운영 서버 배포 후 Supabase URL Configuration의 Site URL을 운영 서버 주소로 변경
• Redirect URL에 운영 서버 주소 추가

마이페이지

• 내 정보 확인, 비밀번호 변경, 회원 탈퇴, 비밀번호 찾기
• 회원 탈퇴는 개인정보보호법상 필수 (삭제 요구 권리, 지체없이 처리 의무)
• 정보통신망법에서도 개인정보 파기 요구
• 탈퇴 시 Supabase Authentication에서 해당 유저 실제 삭제 확인

로그인 원리 (TMI)

• 로그인 성공 시 Access Token이 브라우저 Local Storage에 저장
• 이 토큰이 있으면 로그인 상태, 삭제되면 로그아웃 상태
• 토큰으로 인증(Authentication) + 인가(Authorization) 처리

4. 구독 서비스 구현 (Polar)

구독 상품 설정

• Polar에서 Recurring Subscription 선택 (Monthly)
• 상품 이름/설명: AI에게 시켜서 작성 (페르소나: "너는 최고의 가격 결정 전문가야")
• 가격: $9.99/월 — AI와 토론하여 결정
• 단건 $3.99 대비 구독이 훨씬 가성비 좋도록 설계
• 미국 앱스토어 인기 가격대 참고
• 원가 계산: 매일 AI 호출 비용 약 $0.0731/일 × 31일 = $2.27/월 → 충분한 마진
• 무료 체험(Free Trial) 7일 적용
• 3일은 너무 짧아서 습관 형성 어려움 → 7일 추천 (AI 제안)
• 진입 장벽 확 낮춤 → 까먹으면 자동 결제 전환
• Metered Price (크레딧 기반) 옵션도 있지만, 이번엔 Fixed Price 사용

구독 관리 — Polar Customer Portal

• Polar Customer Portal 활용 → 별도 취소 UI 구현 불필요
• "Generate Customer Portal" 클릭 → 구독 관리 페이지 자동 생성
• Eleven Labs, Cursor 등 유명 SaaS도 동일 방식 (Stripe Portal 등)
• 마이페이지에서 "구독 관리" 버튼 → Polar Portal로 이동
• 직접 취소 UI 만드는 것보다 훨씬 간단 + 책임 위임

Polar API 키 권한 추가

• Settings → General → Developers에서 업데이트:
• customer:read — 구독 여부 확인
• subscription:read — 구독 상태 조회
• checkout:write — 결제 처리 (기존에 있음)
• customer_session:write — Customer Portal 접근

구독 서비스 구조

1. 사용자가 로그인 후 프로필 등록 (키, 몸무게, 사진, 거주 도시)
2. 키/몸무게/도시/타임존 → Supabase DB 저장
3. 사진 → Cloudflare R2에 업로드, URL만 DB에 저장
4. 구독 결제 → Polar에서 관리
5. Polar Customer ID를 Supabase DB에 저장하여 두 시스템 연결 (키 역할)
6. 매일 아침 6시(사용자 타임존 기준), 거주 도시의 날씨 + 유저 정보 기반 AI 스타일 리포트를 이메일 발송
7. 크론잡(Cron Job)으로 정기 실행

DB-Polar 연동의 핵심

• DB 2개 체제: Supabase (회원 정보) + Polar (구독 정보)
• 가입 이메일 ≠ Polar 결제 이메일일 수 있음 → Polar Customer ID로 연결
• user_profiles 테이블에 polar_customer_id 컬럼 추가
• 직접 SQL 에디터에서 실행: ALTER TABLE user_profiles ADD COLUMN polar_customer_id TEXT;

단건 결제 vs 구독의 UX 분리

• 비로그인 사용자: 단건 결제($3.99) 가능 → 1회성 리포트
• 로그인 사용자: 구독($9.99/월, 7일 무료) + 단건 결제 모두 가능
• 비로그인 화면에서도 로그인 유도 → 구독 전환 설계

Polar API 속도 제한

• 분당 300건 요청 제한
• DB처럼 빈번한 조회에는 부적합 → Supabase에 구독 정보 캐싱 권장
• 웹훅(Webhook)으로 구독 상태 변경 시 자동 동기화 가능

웹훅(Webhook) 개념

• 상대방 서버에서 이벤트 발생 시 우리 서버로 알림
• Polar에서 구독 생성/취소 → Webhook → 우리 워커 → Supabase DB 업데이트
• 폴링(매번 확인) 대비 효율적
• 실패 시 Polar 대시보드에서 실패 로그 확인 가능 → 재시도 로직 구현 가능
• 현재 규모에서는 Polar API 직접 호출로 충분

5. 크론잡(Cron Job) 구현

크론잡이란?

• 유닉스 운영체제의 정기 작업 스케줄러 (크로노스 = 시간의 신)
• 시간에 따라 자동으로 작업 실행: DB 백업, 로그 정리, 주간 리포트 등
• GitHub Actions, Cloudflare Cron Triggers 등도 "크론잡"이라 통칭 (일반 명사화)

Cloudflare Pages의 한계와 해결

• Cloudflare Pages Functions: 크론 트리거 미지원 (무료 플랜 한계)
• 해결: 별도의 Cloudflare Worker 생성 → Cron Trigger 설정 → Pages 워커에 요청 전송

구현 구조

[크론 워커] --매시 정각--> [Pages Function(워커)] --이메일--> [사용자]
         (암구호 포함)         (날씨+DB조회+AI생성)

1. 크론 전용 워커 생성 (Workers & Pages → Create Worker)
2. 이름: daily-report-cron
3. 역할: 단순히 Pages Function에 HTTP 요청(fetch)만 보냄
4. 코드: fetch(URL, { headers: { 'x-cron-secret': SECRET } })
5. 크론 시크릿(암구호) 설정
6. 아무 복잡한 값 (UUID 등): 워커와 Pages Function이 동일 키 공유
7. 해커의 무단 요청 차단: 키 없으면 거부
8. 환경 변수로 양쪽 모두 등록
9. 크론 트리거 설정
10. 워커 Settings → Triggers → Cron: 0 (매시 정각)
11. 글로벌 서비스이므로 매시간 실행 → "현재 오전 6시인 타임존의 구독자" 필터링

환경 변수 목록 (Cloudflare Pages에 등록)

6. 날씨 API (OpenWeatherMap)

왜 전용 API를 쓰나?

• ChatGPT 웹서치로 날씨 조회: $10/1K콜 = 건당 약 14원
• OpenWeatherMap API: 일 1,000콜 무료, 이후 건당 약 1.1원
• 비용 차이 12배 이상 → 전용 API 사용이 합리적

설정 방법

1. openweathermap.org 가입
2. My API Keys에서 키 발급
3. .env에 추가 + Cloudflare Pages 환경 변수에 Secret으로 등록
4. 프라이싱: 일 1,000콜 무료 → 1,000명까지 무과금

대안

• Google Maps Weather API도 사용 가능
• 한국만 타겟이면 기상청 API도 옵션

7. 인간 심리를 활용한 전환율 최적화

이론적 배경

• 인간은 본질적으로 불완전: 인지 편향과 의사결정 오류가 존재
• 초천재 연구자들의 실험과 논문으로 검증된 법칙들
• 참고 자료: 해봄 블로그 "언젠가 써먹는 심리효과 101" (블로그 주인 허락 받음, 조코딩 구독자)
• 넥슨, 넷마블 등 게임 회사: 심리학 전문가가 밥 먹고 과금 구조만 연구

적용된 심리학 원칙

⚠️ 절대 금지사항

• 거짓 정보(구라) 절대 금지 → Polar MoR 심사에서 거부됨
• ❌ "2,000명이 이용 중" 같은 검증 불가능한 사회적 증거
• ❌ "노벨상 수상자 검증" 같은 허위 권위
• AI가 할루시네이션으로 넣는 가짜 숫자/주장 반드시 제거
• 모든 수치와 주장은 사실 기반이어야 함

8. 퍼널 분석 세팅 (Google Analytics + Clarity)

Google Analytics 이벤트 추적

• 2주차에 GA 기본 설치 완료 → 4주차에 이벤트 기반 퍼널 설계
• G태그 이벤트로 8단계 퍼널 설계:

Landing Page View (200명)
    ↓ 50% 이탈
Click Get Started (100명)
    ↓
View Input Form (90명)
    ↓
Upload Photo (70명)
    ↓
Begin Checkout (50명)
    ↓ ── 단건결제 / 구독 분기
Subscribe or Purchase (30명)
    ↓
View Result (28명)
    ↓
Save/Share Report (10명)

• 금액 포함 이벤트 → LTV 추적 가능

  gtag('event', 'purchase', {
    value: 3.99,
    currency: 'USD',
    items: [...]
  });

• 각 단계별 이탈률 확인 → 병목 구간 개선
• 랜딩 → Get Started 50% 이탈? → 랜딩 페이지 후킹 강화
• Input Form → Upload 이탈? → 업로드 UX 개선
• 바이럴 추적: Save/Share 이벤트로 공유 비율 측정

Google Analytics 설정 방법

1. GA 관리 → 속성 만들기 (Personal Stylist)
2. 시간대: 한국, 통화: USD
3. G태그 설치 (코드에 에 삽입)
4. SPA(Single Page Application) 특성 고려한 페이지뷰 추적
5. 이벤트 등록: 클로드에게 "퍼널 분석 전문가" 페르소나 → 자동 설계

Microsoft Clarity 연동

• 히트맵, 세션 리플레이로 사용자 행동 시각적 분석
• Google Analytics와 통합 설정 가능
• 무료 → 별도 비용 없음

9. 페이지 속도 최적화

문제 분석

• React(Vite) SPA 특성상 JavaScript 번들이 무거움
• HTML: 코드 몇 줄 (빠르게 다운로드)
• JavaScript: 엄청 긴 코드 (다운로드 + 실행 모두 느림)
• JS가 HTML을 동적으로 변환하는 구조 → 첫 로딩이 구림
• PageSpeed Insights 성능 점수: 51점 (모바일 기준)
• 데스크탑은 상대적으로 양호

개선 작업

• 폰트 로딩 최적화 (preload, font-display)
• 이미지 최적화 (적절한 포맷, 크기)
• 불필요한 번들 제거 (code splitting)
• robots.txt 추가
• 접근성, SEO 메타태그 개선
• 개선 후: 92점 (접근성 100점, SEO 크게 개선)

프레임워크 권장사항

• Astro: 정적 사이트에 최적, 사전 렌더링 강점
• 빠른 렌더링 전문 프레임워크
• React와 결합 가능
• Cloudflare Pages에 배포 가능 (무료)
• 이런 서비스(랜딩+결제 중심)에는 Astro가 최적
• Next.js: SSR/SSG 세분화 가능
• 어떤 페이지는 미리 렌더링, 어떤 페이지는 서버사이드 처리 가능
• 하지만 Vercel 비용 발생 가능 + 이 서비스에는 오버스펙
• Vite Pre-rendering 플러그인: 빌드 시점에 정적 HTML 생성
• vite-plugin-prerender 등 활용 가능
• 적용 시 주의: 기존 코드 구조가 많이 바뀔 수 있음 (롤백 고려)

10. 서비스 전문성 강화

방법

1. 딥리서치 활용 (ChatGPT Deep Research + Gemini)
2. 퍼스널 컬러, 패션 스타일링 관련 학술 논문/전문 자료 수집
3. 얼굴형별 넥라인 (둥근형, 각진형, 타원형 등)
4. 체형별 실루엣, 소재감, 질감
5. 컬러 시즌 (봄웜/여름쿨/가을웜/겨울쿨 등)
6. 키/몸무게에 따른 프로포션 스타일링
7. ChatGPT → PDF 보고서 다운로드
8. Gemini → Google Docs로 내보내기
9. 수집한 자료를 프로젝트에 추가 (예: reports/ 폴더)
10. 클로드에게 자료 참고하여 프롬프트 전문화 지시
11. "첨부한 자료들 기반으로 전문적인 프롬프트 설계해줘"
12. 결과: 일반적인 추천 → 퍼스널 컬러/체형 기반 전문가 수준 추천
13. V넥/스퀘어넥 등 구체적 넥라인, cm 단위 여유분 등 전문 용어 적용

고도화 옵션

• RAG(Retrieval Augmented Generation)로 논문 DB 구축 → 필요할 때 참조
• 단, 컨텍스트 토큰 낭비 주의 → 프롬프트에 핵심만 반영이 실용적

11. 핵심 비즈니스 개념 (판교 사투리)

핵심 공식

• LTV = ARPU × 평균 유지 기간
• 예: 월 $9 × 3개월 유지 = LTV $27
• 사업 = LTV > CAC 만드는 게임
• LTV/CAC 비율:
• 3x 이상 → 괜찮음 (CAC $100, LTV $300)
• 5x → 매우 좋음 (CAC $100, LTV $500)
• 10x+ → 훌륭함 (CAC $100, LTV $1,000+)
• 코호트별로 LTV가 다를 수 있음 (나이, 성별, 유입 채널 등)
• 정확한 LTV 계산에는 충분한 모수 + 시간 필요 (큰 수의 법칙)

무료 체험 7일의 비용 분석 (AI와 함께 계산)

• AI 원가: $0.0731/일 × 7일 = ~$0.51 (무료 유저 1명당)
• "커피 반잔도 안 됨"
• 서버/인프라 비용 약간 추가
• 보수적 시나리오 (평균 2개월 유지): LTV = $14~21
• 결론: "말도 안 되게 좋음", "안 할 이유가 없는 구조"
• 무료 체험의 추가 효과:
• 결제 마찰 제거
• 7일간 습관 형성
• 디폴트가 자동 결제 → 관성의 힘

12. 보안 주의사항 ⚠️

노출되면 안 되는 키 (Secret)

• Supabase Secret Key (구 Service Role Key)
• Supabase Access Token (DB 관리용)
• API Secret Keys (OpenAI, Weather API, Polar 등)
• DB 비밀번호
• Cron Secret (워커 간 암구호)
• → 유출 시 DB 전체 털림, 뉴스 주인공 + 과징금

노출돼도 괜찮은 키 (Publishable)

• Supabase Anon Key = Publishable Key (이름 변경됨)
• 프론트엔드에서 사용하는 공개 키
• RLS(Row Level Security)로 보호됨
• VITE_SUPABASE_URL

Supabase 키 체계 변경 (최근 업데이트)

• 구 방식 (Legacy): anon key + service_role key
• 신 방식: Publishable Key + Secret Key
• 이름 변경 이유: "anon"이 역할을 명확히 안 드러냄 → "publishable"로 직관적
• AI에게 최신 키 체계 알려주기: "안온키가 퍼블리셔블 키로, 서비스롤키가 시크릿 키로 바뀌었어"

실천 사항

• .env에 비밀 키 관리, Git에 절대 커밋 X (.gitignore 설정)
• GitHub Public 레포에 키 노출 → DB 즉시 털림
• Cloudflare Workers(페이지 펑션)로 민감한 API 호출 처리
• 프론트엔드에서 직접 OpenAI API 호출 X → 워커 경유
• 정기적으로 보안 취약점 점검해줘 AI에 요청
• 방송/화면 공유 시 키 노출되면 즉시 재발급 (키 로테이션)
• 3주차까지는 회원정보 없어서 상대적으로 안전, 4주차부터 보안 신경 필수

13. Polar MoR 통과 요건

심사 프로세스

• Polar 직원(Isaac)이 직접 고객 여정 체험
• 요청사항:
• 고객 여정(Customer Journey) 영상 제출 또는 100% 할인코드 제공
• 테스트 결제 건은 환불 처리 필수
• 개인 SNS 링크 등록 요구 가능 (사기 방지 목적, 서비스 프로필이 아닌 개인 SNS)
• 거짓 숫자/주장 → 즉시 거부

자금세탁 주의 ⚠️

• 본인이 만든 서비스에 본인이 결제 → 자금세탁 의심행위
• Polar MoR에서는 거의 무조건 문제 소지
• 정산 받으면 매우 위험 → 계정 정지 가능
• 1회 테스트는 봐줄 수 있으나 반복 결제는 위험
• 안전한 방법: 테스트 모드(Sandbox) 또는 100% 할인 쿠폰 사용

14. 시스템 아키텍처 종합

[사용자 브라우저]
    │
    ├─ 회원가입/로그인 ──→ [Supabase Auth]
    │
    ├─ 프로필 등록 ──→ [Supabase DB] (키/몸무게/도시/타임존)
    │                 ├─→ [Cloudflare R2] (사진 저장)
    │                 └─→ polar_customer_id로 Polar와 연결
    │
    ├─ 구독 결제 ──→ [Polar] (구독 관리, Customer Portal)
    │
    ├─ 단건 결제 ──→ [Polar] (1회성)
    │
    └─ 이메일 수신 ←── [Cloudflare Pages Functions(워커)]
                              ↑ 매시 정각 트리거
                       [Cron Worker] (크론 시크릿으로 인증)
                              │
                       [OpenWeatherMap] (날씨 조회)
                       [OpenAI API] (스타일 추천 + 이미지 생성)
                       [Resend SMTP] (이메일 발송)

Cloudflare Pages vs Workers 차이

• Pages: 정적 파일(HTML/CSS/JS) 캐시 + 전달만 → 공짜, 무제한
• Pages Functions: Pages에 붙은 작은 워커 → 코드 실행 가능 (API 호출 등)
• Workers: 독립 실행 코드 → 크론 트리거 지원, 코드 실행 가능
• Pages Functions에서 크론 미지원 → 별도 Worker로 트리거

15. 개발 실전 팁

코드 롤백 (Git 활용)

• GitHub 커밋 히스토리에서 원하는 버전의 커밋 해시 복사
• 클로드에게: "이 커밋 버전으로 돌려놔" → git checkout 자동 실행
• Claude Code의 rewind 기능도 활용 가능

AI 시대 개발 패턴

• 큰 개념 설명 → 딸깍(AI에게 시킴) → 기다림 → 확인 → 디버깅 반복
• "이것이 요즘 개발이다"
• 에러 발생 시: 에러 메시지 복사 → "이거 안 되네" → AI가 원인 분석 + 수정
• 기능은 금방, 설정/연동 작업이 시간 소모 (DB 가입, OAuth 등록, API 키 발급 등)

도구 선택

• 클로드 코드(Claude Code) Max 사용 중 — 코딩 품질이 가장 좋음
• Codex, Gemini CLI도 상향 평준화 → 큰 차이 없음
• Gemini: 무료 사용량 많음 + 구글 계정 여러 개로 확장 가능
• 커서(Cursor): 업데이트 많이 돼서 좀 지저분해짐 → 터미널의 깔끔함 선호
• Firebase Studio: 환경 설정 없이 바로 시작 가능 (Node.js, Git 설치 불필요)

Supabase SQL 에디터

• 대시보드 왼쪽 메뉴 → SQL Editor
• 직접 SQL 구문 입력 + 실행 가능
• AI가 CLI로 못 하는 작업 시 수동 실행 옵션

가격 전략

• 너무 싸면 가치 없어 보임 → 프리미엄 전략도 고려
• "명품이 괜히 비싼 게 아니다"
• AI와 가격 토론: 원가, 경쟁사, 심리학적 가격대 종합 분석

16. 레딧 마케팅 사례

• 구독자 "행복하세요" 님의 사례
• 한국 여행 비용 계산 사이트 제작 → r/KoreaTravel에 게시
• 조회수 3.4만 달성
• 핵심: 타겟 유저가 있는 커뮤니티에 관련 서비스 홍보 → 유입 극대화

✅ 액션 아이템

1. Supabase 가입 및 프로젝트 생성
2. Cloudflare R2 버킷 생성 (사진 저장용) + Pages 바인딩
3. 이메일 로그인 구현 + 보안 설정 (비밀번호 8자+, 복합 요구사항)
4. Resend SMTP 연결 (이메일 발송 한도 확장, 시간당 10,000건)
5. Google Cloud OAuth 설정 → 소셜 로그인 구현 (권한 최소화)
6. 마이페이지 구현 (내 정보, 비밀번호 변경, 회원 탈퇴, 비밀번호 찾기)
7. Polar에 구독 상품 등록 ($9.99/월, 7일 무료 체험)
8. Polar API 키 권한 업데이트 (customer:read, subscription:read, customer_session:write)
9. DB 테이블 설계 (user_profiles: 키, 몸무게, 사진URL, 거주도시, 타임존, polar_customer_id)
10. OpenWeatherMap API 가입 및 키 발급 (일 1,000콜 무료)
11. 크론 워커 생성 + 크론 시크릿 설정 + 크론 트리거 (매시 정각)
12. Cloudflare Pages 환경 변수 등록 (6개 키)
13. Google Analytics 이벤트 추적 (8단계 퍼널) + Clarity 연동
14. PageSpeed Insights로 성능 측정 및 최적화 (51점 → 92점)
15. 딥리서치로 전문 자료 수집 → 프롬프트 전문화
16. Polar MoR 심사 요건 충족 (고객 여정 영상 + 환불 처리 + SNS 등록)
17. Polar Customer Portal 연결 (구독 관리 페이지)

📌 5주차 예고

• 퍼포먼스 마케팅: Meta 광고 등 (카드 등록 필요, 사례 위주)
• 웹 → 앱 변환 (PWA): "되게 간단하다"
• 실무 운영 및 퍼널 분석 결과 확인 (4주차에 세팅한 GA 데이터)
• 미국 법인 설립 + Stripe 연동 (조코딩 경험담)
• Stripe 사용하려면 미국 법인 필수
• 엑싯(Exit) 전략 및 사례
• 해자(Moat) 구축 전략

🔗 주요 링크

• Supabase: https://supabase.com
• Supabase API Key 문서: https://supabase.com/docs/guides/api/api-keys
• Cloudflare R2: https://developers.cloudflare.com/r2/
• Polar: https://polar.sh
• OpenWeatherMap: https://openweathermap.org
• Google Cloud Console: https://console.cloud.google.com
• Google Cloud 인증 플랫폼: https://console.cloud.google.com/auth
• Supabase Google Login 문서: https://supabase.com/docs/guides/auth/social-login/auth-google
• PageSpeed Insights: https://pagespeed.web.dev
• Microsoft Clarity: https://clarity.microsoft.com
• Google Analytics: https://analytics.google.com
• G태그 이벤트 설정: https://developers.google.com/tag-platform/gtagjs/reference/events
• Resend SMTP: https://resend.com
• Cloudflare Cron Triggers: https://developers.cloudflare.com/workers/configuration/cron-triggers/
• Astro 프레임워크: https://astro.build
• 심리효과 101 (해봄 블로그): 강의자료 참고
• Vite Pre-rendering: https://github.com/mswjs/vite-plugin-prerender (유사 플러그인)