AI Product Builder 4주차

👋 4주차 오리엔테이션

단순한 웹사이트를 넘어, 사용자에게 지속적인 가치를 제공하고 매달 자동으로 결제되는 구독 모델을 구축합니다.

📋 이번 주 목차

• CLI(Claude Code) 도구 사용법
• 구독 매출 모델 (MRR)
• 데이터베이스 개념 (SQL vs NoSQL)
• Supabase를 통한 인증 시스템
• 스토리지 (Cloudflare R2)
• 정기 이메일 발송 자동화 (Cron)
• 외부 API 연동

💻 CLI 도구 사용법

CLI(Command Line Interface) 기반 AI 코딩 도구의 사용법을 소개합니다.

🛠️ 추천 CLI 도구들

• Claude Code: 현재 가장 인기 있는 AI 코딩 CLI
• OpenAI Codex: OpenAI의 CLI 도구
• Gemini CLI: Google의 CLI 도구

CLI가 좋은 이유: 토큰 소모를 줄이고 효율적으로 코드 생성이 가능합니다.

🔄 구독 매출 모델 (MRR)

매번 결제하게 하는 것은 고객 이탈의 원인입니다. 한 번의 카드 정보 등록으로 매달 자동으로 결제되고 서비스를 제공받는 구독(Subscription) 모델을 기획합니다.

📧 구독 서비스 예시

• 매일 아침 맞춤형 날씨+운세 리포트 이메일
• 위치 기반 기상 정보 자동 수집
• AI가 생성한 개인화 콘텐츠

💡 흑자 전환 계산

• API 비용: OpenAI GPT ~0.01원/1000토큰
• 고객당 비용이 매우 저렴 → 월 2,000원~5,000원 구독료로 수익

🗄️ 데이터베이스 개념

사용자 정보를 영구적으로 저장하기 위해 데이터베이스가 필요합니다.

📊 SQL (관계형 데이터베이스)

• 테이블 간 관계(Relation) 정의 가능
• 예: MySQL, PostgreSQL
• 복잡한 데이터 구조에 적합

📄 NoSQL (비관계형 데이터베이스)

• 문서(Document) 형태로 저장
• 예: MongoDB, Firebase Firestore
• 유연한 스키마, 빠른 개발에 적합

🛠️ DB 래퍼 서비스들

• Supabase: PostgreSQL 기반, 오픈소스
• Convex: 실시간 동기화 특화
• Neon: 서버리스 PostgreSQL

🔧 Supabase 프로젝트 생성

Supabase는 Firebase의 오픈소스 대안으로, PostgreSQL 기반의 강력한 기능을 제공합니다.

🚀 설정 단계

• Supabase 대시보드에서 새 프로젝트 생성
• API 키 확인 (anon key, service role key)
• 테이블 설계: users, subscriptions
• RLS(Row Level Security) 정책 설정

☁️ 스토리지 (Cloudflare R2)

이미지나 영상 같은 대용량 파일은 DB에 직접 저장하지 않고 스토리지(Object Storage)에 저장합니다.

💰 Cloudflare R2의 장점

• AWS S3와 완전 호환되는 API
• 송신료(Egress Fee) 완전 무료
• 트래픽이 많아져도 비용 폭탄 없음

📁 사용 예시

• 사용자 프로필 이미지 저장
• 업로드된 패션 사진 보관
• AI가 생성한 이미지 저장

🔐 인증 시스템 (Supabase Auth)

Supabase Auth를 연동하여 이메일/비밀번호 로그인과 소셜 로그인을 한번에 구현합니다.

🔑 지원 인증 방식

• 이메일/비밀번호 (기본)
• GitHub OAuth (가장 간단)
• Google, Apple, Discord 등

🛡️ 보안 설정

• RLS(Row Level Security) 정책 적용
• 비밀번호 최소 길이 설정
• 세션 관리 및 토큰 갱신

🐙 GitHub 소셜 로그인 구현

GitHub OAuth를 통한 소셜 로그인 실습입니다.

🔧 구현 단계

• GitHub Developer Settings에서 OAuth App 생성
• Client ID와 Client Secret 발급
• Supabase에 OAuth 설정 연동
• Callback URL 설정

🚀 실전 배포 (Cloudflare Pages)

로컬 개발 환경을 벗어나 실제 사용자가 접속할 수 있도록 서비스를 배포합니다.

📦 배포 옵션

• Cloudflare Pages: 정적 사이트 무료 호스팅
• Vercel: Next.js 특화, 무료 티어
• Netlify: 정적 + 서버리스 지원

🔗 배포 후 작업

• 커스텀 도메인 연결
• 환경 변수 설정 (API 키 등)
• Supabase redirect URL 업데이트

🤖 자동화 (Cloudflare Workers & Cron)

매일 정해진 시간에 자동으로 실행되는 Cron Job을 구현합니다.

⏰ Cron 설정 예시

• 0 6 * * *: 매일 아침 6시
• 0 */4 * * *: 4시간마다
• 0 9 * * 1: 매주 월요일 오전 9시

📧 자동화 로직

• DB에서 활성 구독자 목록 조회
• 각 사용자 위치 기반 날씨 API 호출
• AI로 개인화 콘텐츠 생성
• 이메일 발송

🌦️ 외부 API 연동 (날씨 정보)

OpenWeatherMap 같은 외부 API를 연동하여 서비스에 실시간 데이터를 공급합니다.

🔑 API 사용 팁

• 무료 티어 활용 (대부분 일 1,000회 이상)
• API 키는 환경 변수로 안전하게 관리
• 캐싱으로 불필요한 API 호출 절감

✨ 동적 프롬프트 생성

• 날씨 데이터 + 사용자 정보 조합
• AI에게 상황에 맞는 콘텐츠 요청
• 개인화된 추천 결과 생성

📬 이메일 발송 (Resend)

Resend를 활용하여 트랜잭션 이메일과 마케팅 이메일을 발송합니다.

✉️ 이메일 활용 시나리오

• 가입 환영 이메일
• 결제 완료 확인
• 매일 아침 맞춤형 리포트
• 구독 갱신 알림

🧪 구독 플로우 테스트 및 디버깅

구독 시스템이 완성되었다면, 실제로 모든 플로우가 정상 작동하는지 테스트합니다. AI에게 "안 돼. 원인 찾아"라고 시키면 됩니다.

🔍 테스트 체크리스트

• 회원가입 → 로그인 → 구독 결제 플로우
• Supabase DB에 유저 정보 저장 확인
• Cloudflare R2에 이미지 업로드 확인
• Polar 구독 상태와 DB 연동 확인

🛠️ 디버깅 팁

• 에러 메시지가 뜨면: 그대로 AI에게 붙여넣기
• 에러가 안 뜨면: "원인 찾아" 명령
• Supabase RLS 정책 문제 확인
• 환경 변수 누락 체크

💳 Polar 구독/결제 통합

Polar를 사용하면 복잡한 세금, 환불, 결제 처리를 대행받을 수 있습니다. 단, 자금 세탁 방지를 위해 본인 결제는 절대 금지입니다!

⚠️ 주의사항 (자금 세탁)

• 절대 금지: 내가 만든 서비스에 내가 결제하기
• 테스트는 반드시 샌드박스 모드 사용
• 또는 100% 할인 쿠폰으로 테스트
• MOR에서 이런 행위는 즉시 계정 정지 대상

🔗 Polar Customer ID 연동

• Polar 구독 정보와 Supabase 회원 정보 연결
• polar_customer_id 컬럼으로 키 연결
• 이메일이 다를 수 있으므로 ID 기반 연동 필수

🎨 GPT 이미지 생성 (Image Edit API)

매일 아침 리포트에 개인화된 스타일링 이미지를 포함시킵니다. 날씨 정보 + 사용자 정보를 기반으로 코디를 추천하고 이미지를 생성합니다.

🖼️ 이미지 생성 플로우

• 1단계: LLM으로 날씨 기반 코디 추천 텍스트 생성
• 2단계: 추천 결과를 GPT 이미지 생성 프롬프트로 변환
• 3단계: 사용자 사진 + 추천 착장으로 이미지 합성

📐 이미지 설정

• size: 1024x1792 (세로형), 1024x1024 (정사각형)
• quality: "high" (고품질)
• 입력 이미지는 정사각형이 아니어도 가능

🏗️ 전체 시스템 아키텍처

구독 서비스의 전체 구조를 정리합니다. 각 구성 요소가 어떤 역할을 하는지 이해하면 디버깅과 확장이 쉬워집니다.

🧩 아키텍처 구성

• Cloudflare Pages: 프론트엔드 호스팅 (정적 파일)
• Pages Functions: 백엔드 API 역할 (API 키 숨기기)
• Supabase: 회원 정보 DB + 인증
• Cloudflare R2: 사용자 사진 스토리지
• Polar: 구독/결제 관리
• Cron Worker: 매일 아침 자동 이메일 트리거

🔄 데이터 흐름

• 회원가입 → Supabase Auth
• 구독 결제 → Polar → DB에 polar_customer_id 저장
• 매일 6시 → Cron → 구독자 조회 → 리포트 생성 → 이메일 발송

🔔 Webhook 개념과 활용

Webhook은 외부 서비스에서 이벤트가 발생하면 자동으로 우리 서버에 알려주는 방식입니다. 폴링(계속 물어보기)보다 효율적입니다.

📡 Webhook 사용 예시

• 구독 완료: Polar → 우리 서버로 알림
• 구독 취소: Polar → DB 업데이트
• 결제 실패: 알림 받아서 사용자에게 연락

⚠️ Webhook 주의사항

• 우리 서버가 꺼져있으면 놓칠 수 있음
• Polar 대시보드에서 실패 로그 확인 가능
• 재시도 로직 구현 권장

🎛️ 구독 포탈 (Customer Portal)

Polar, Stripe 같은 결제 서비스는 Customer Portal을 제공합니다. 사용자가 직접 구독을 관리할 수 있는 페이지입니다.

🔗 포탈 기능

• 구독 상태 확인
• 결제 수단 변경
• 구독 취소/재개
• 결제 내역 조회

💡 구현 방법

• Polar Dashboard에서 Customer Portal 링크 생성
• 마이페이지에서 "구독 관리" 버튼으로 연결
• Cursor, Eleven Labs 등 대형 SaaS도 이 방식 사용

📊 Google Analytics 퍼널 분석

2주차에 배운 Google Analytics를 실제로 활용합니다. 각 구매 단계마다 이벤트를 심어서 어디서 이탈하는지 파악합니다.

📈 퍼널 단계 예시

• 1. landing_page_view: 랜딩 페이지 방문
• 2. click_get_started: 시작하기 클릭
• 3. view_input_form: 입력 폼 조회
• 4. begin_checkout: 결제 시작
• 5. purchase: 구매 완료 (금액 포함)

📊 GA 이벤트 코드

• gtag('event', 'purchase', {value: 3.99, currency: 'USD'})
• 각 버튼에 이벤트 추적 코드 삽입
• Microsoft Clarity도 함께 사용 권장

⚡ 페이지 속도 최적화

Google PageSpeed Insights를 활용하여 사이트 성능을 측정하고 개선합니다. React(Vite) SPA의 한계와 해결 방법을 알아봅니다.

🔍 성능 측정 도구

• PageSpeed Insights: 모바일/데스크탑 점수
• Lighthouse: 크롬 개발자 도구
• 목표: 성능 70점 이상, 접근성/SEO 90점 이상

🚀 최적화 방법

• 폰트 최적화 (preload, display: swap)
• 이미지 최적화 (WebP, lazy loading)
• JavaScript 번들 크기 줄이기
• 더 근본적 해결: Astro, Next.js 같은 SSG/SSR 프레임워크

🎓 전문성 강화 (딥 리서치)

ChatGPT Deep Research, Gemini 심층 리서치를 활용하여 전문가 수준의 콘텐츠를 프롬프트에 반영합니다.

📚 딥 리서치 활용

• 퍼스널 컬러 관련 학술 논문 수집
• 얼굴형/체형별 스타일링 연구 조사
• 전문 용어를 프롬프트에 반영

✨ 적용 전후 비교

• 적용 전: "밝은 색 옷이 잘 어울립니다"
• 적용 후: "쿨 윈터 / 쿨 서머 범위의 퍼스널 컬러로, V넥 라인과 네이비 계열이 시각적으로 슬림하게 보이는 효과"

🏆 4주차 마무리 및 정리

4주차에서 배운 모든 내용을 정리하고, 5주차 예고를 확인합니다.

✅ 4주차 학습 내용

• 데이터베이스 & 스토리지 개념
• 회원가입, 로그인, 소셜 로그인 구현
• Polar 구독 결제 시스템 통합
• Cloudflare Workers Cron 자동화
• GPT 이미지 생성 및 이메일 발송
• Google Analytics 퍼널 분석
• 페이지 속도 최적화

🔮 5주차 예고

• 퍼포먼스 마케팅 (Meta 광고)
• 웹 → 앱 변환
• 미국 법인 설립 & Stripe
• Exit 전략 (엑시트 사례)