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

영상: https://www.youtube.com/watch?v=X9cna-h9mC4 강의명이 "AI 프로덕트 빌더"에서 "바이브 코딩 1인창업가 부트캠프"로 변경됨 — "AI 프로덕트 빌더"가 너무 어려워 보여서 진입장벽이 될 수 있다는 판단

📋 목차

1. 오프닝 & 근황
2. 돈 될 만한 아이디어 찾기
3. 리액트를 왜 쓰는가
4. 서버리스 개념과 적용
5. AI API 연결 (OpenAI)
6. 바이브 디자인
7. 글로벌 결제 (Polar)
8. 이메일 전송 (Resend)
9. 다국어(i18n) 지원
10. 서비스 고도화 & 배포
11. 액션 아이템 & 다음 주 예고

1. 오프닝 & 근황

라이브 시청의 가치

• "지금 라이브 보시는 분들이 가장 승리자" — 가장 최신 기술을 가장 최근에 배울 수 있음
• 한 달 뒤만 돼도 기술이 변해서 "구식"이 될 수 있음. 지금이 최첨단의 끝자락

강의명 변경

• "AI 프로덕트 빌더" → "바이브 코딩 1인창업가 부트캠프"로 변경
• 이유: "AI 프로덕트 빌더"가 너무 어려워 보여서 "난 어려워서 안 할래" 하는 사람이 생길까 봐
• 실제로는 쉬운데 임팩트가 큰 강의 — 오늘 실제 글로벌 결제 붙인 프로덕트를 만들 것

해커톤 공지

• 날짜: 3월 7~8일 무박 2일
• 장소: 서울 (확정 예정)
• 규모: 대규모로 준비 중
• 후원: OpenAI 협업 승낙 — API 크레딧 등 지원 예상
• "AI 시대라서 진짜 해커톤을 제대로 할 수 있다" — 예전에는 미리 만들어오고 발표만 했는데, 이제는 현장에서 진짜 만들 수 있음

2주차 과제 결과

• 37명 응모 (50명 중) → 전원 카카오 선물하기 발송
• 다양한 프로젝트: 얼굴값 테스트, 한국 소개 웹사이트, 오늘 저녁 뭐먹지, 한국형 공포·탐욕 지수, 안무 수업 홈페이지, 타로 리딩 서비스 등
• 레딧에 올린 사례: 글로벌 트래픽 확보, 좋아요 3개 — "이런 게 진짜 개꿀. 돈 드는 게 아니잖아요. 무료 바이럴"
• 용찬현 님: 쓰레드+FM코리아 홍보로 누적 사용자 1,700명 달성
• CAC(고객 획득 단가) 2만 원으로 치면 3,400만 원어치 마케팅을 공짜로 한 것
• "구글에 '롤 가이차' 검색하면 상위 노출" → SEO까지 달성

이번 주 이벤트

• 첫 판매 인증 이벤트: 실제 결제가 일어난 것을 인증하면 전원 상품 지급
• 샌드박스 테스트 결제는 안 됨, 실 매출이어야 함

2. 돈 될 만한 아이디어 찾기

핵심 원칙: 이미 증명된 시장을 공략하라

• 돈 안 되는 걸 만들면 돈이 안 된다 — 당연하지만 중요한 대원칙
• AI 학습과 비슷: 파라미터를 조금씩 조정하면서 글로벌 미니마(최적점)를 찾아가는 과정
• 2주차에 배운 "가설 → 실험 → 데이터 확인" 반복이 기본
• 꿀팁: 완전히 새로운 시장을 개척하는 것보다, 이미 증명된 부분을 늘리는 것이 돈 벌 확률을 높임
• 이미 사람들이 돈을 내고 있는 시장 = 지불 의향이 증명됨
• 여기에 차별점을 만들어 진입하면 PMF(Product Market Fit) 달성이 쉬움

조코딩의 실제 경험: 패션 컨설팅

• 조코딩은 패션을 "진짜 뒤지게 못 입는" 사람
• 순다 피차이(구글 CEO) 단독 인터뷰 + 토스 예능 촬영 일정이 잡히면서 "추레하게 입고 가면 안 되겠다"고 판단
• 크몽에서 패션 컨설팅 실제로 결제하고 받음 — 컨설터가 놀랍게도 조코딩 구독자, 컴공 출신
• 온라인 컨설팅 가격: 13만2천원~88만원까지 — 꽤 비싼 시장, 이미 돈이 돌고 있음

"Your margin is my opportunity" (Jeff Bezos)

• 사람이 들어가서 비용이 올라간 시장 → AI로 단가를 극단적으로 낮출 수 있음
• 레어리(유튜버/컨설턴트) 사례:
• 스탠더드 온라인 코칭: 13만2천원
• 베이직 온라인 코스: 16만5천원
• 프리미엄 컨설팅: 50만원~88만원
• 웨딩 컨설팅: 더 비쌈
• AI로 하면 원가 수십 원 수준 → 마진이 극단적으로 높아짐
• AX(AI Transformation): "이 세상에 지금 AI가 안 들어온 게 너무 많다. 기회가 너무 널렸다"
• "눈은 어디서 볼 수 있냐?" → 일상에서 "이거 좀 비싼데?" 할 때 왜 비싼지 생각해보기. 사람이 들어가서 비싸면 다 파괴 가능

핑크텍스 전략

• 유명한 트윗: "Paint it pink for women" — 핑크색으로 칠하고 for women이라고 쓰면 성공
• 바이블 앱: 수두룩하게 많지만, "for women" 붙이니까 레비뉴가 급등
• 남성 버전 운동앱 $5,000/월 vs 여성 버전 유사 앱 $400K/월 — 수익 규모가 80배 차이
• 여자 아이돌 vs 남자 아이돌: 수익으로 보면 남자 아이돌이 압도적 (여성 팬의 결제 성향)
• "상남자는 핑크다. 상남자처럼 돈을 벌려면 핑크로 다 칠해야 된다"

이번 주 프로젝트: AI 퍼스널 스타일리스트

• 사진 + 키/몸무게 입력 → AI가 스타일 컨설팅 보고서 + 헤어스타일 이미지 생성
• ChatGPT API 래퍼(Wrapper)로 구현
• "래퍼"란? 포장해 놓은 것. 겉을 벗기면 결국 API가 들어있음
• 도메인도 미리 구매: personalstyli.st (스튜디오)

3. 리액트를 왜 쓰는가

라이브러리/프레임워크 = 갖다 쓰는 도구 모음

• 관련 도구가 모여 있는 것 (기계 수리용 프레임워크 = 렌치, 몽키스패너 등)
• 라이브러리: 내가 주도권을 가짐. import로 한 줄 가져와서 씀
• 프레임워크: 이미 짜여진 규칙대로 써야 함. 완전한 설계도가 있음
• "둘 다 그냥 갖다 쓴다로 이해하시면 됩니다"

순위가 높은 것을 써야 하는 이유

• 예전: 사람들이 많이 쓰는 거 → 자료가 많고, 커뮤니티에 물어봐도 답변을 잘 받음
• AI 시대: 순위가 높아야 학습 데이터가 많으니까 AI도 더 잘 도와줌
• "뭐 뭐 개인이 만든 무슨 엄랭 프레임워크 이거 뭐야 하면 AI가 잘 모름"
• 철학이 맞는 걸 쓸 수도 있지만, 일반적으로 순위 높은 것이 유리

언어 & 프레임워크 순위

• 타입스크립트: 2025년 프로그래밍 언어 순위 1위 (파이썬을 제침)
• "개인적으로 막 마음에 든다기보다는 1등이니까 쓰는 겁니다"
• 리액트: Stack Overflow 조사 기준 웹 프레임워크 1위 (Node.js 다음)
• 프론트엔드 프레임워크 중 압도적 1위
• "나머지가 안 좋다는 게 아니라, 리액트가 1등이니까 쓴다"

컴포넌트 개념 (지적 허영심용)

• HTML/CSS/JS만으로도 모든 웹을 만들 수 있지만 코드가 지저분하고 중복이 많음
• 리액트의 컴포넌트: 중복되는 UI를 하나의 모듈로 압축 → 재사용 가능
• Props: 부모→자식 컴포넌트로 데이터 전달
• State: 컴포넌트 자체의 상태 관리
• "이거 몰라도 됩니다. AI가 다 해 주기 때문에. 지적 허영심을 위한 것"

Vite(비트) = 빌드 도구

• 리액트는 페이스북이 만든 자체 언어 → 브라우저가 직접 이해 못함
• Vite가 리액트 코드를 HTML/CSS/JS로 변환(빌드)해줌
• "번역기"라고 이해하면 됨
• 리액트+Vite로 만들면 자바스크립트 비중이 큼 (동적 변화가 많은 앱에 유리)

React+Vite vs Next.js 차이

• 핵심 차이: 비용

• Cloudflare Pages: 캐시된 것을 그냥 주기만 하면 됨 → 컴퓨팅 파워 불필요 → 60억 인구가 동시에 써도 공짜
• Next.js/Vercel: 서버에서 코드 실행이 필요 → CPU 소비 → 돈이 든다
• Vercel 무료 플랜이 월 5달러 발생하는 것과 비교하면 압도적 차이

CDN 개념 (TMI)

• Cloudflare가 전 세계 곳곳에 서버를 두고, 내 HTML을 올려놓으면 전 세계로 배포
• 사용자 근처 서버에서 캐시된 파일을 전달 → 빠르고 저렴

4. 서버리스 개념과 적용

서버리스 = 종량제 백엔드

• 기존: 서버 한 대를 통째로 빌림 → 24시간 켜놓아야 함 → 월 몇만 원 이상
• 프론트엔드 위주로 돌아가다가 가끔 API 한 번 호출하는데, 백엔드를 계속 켜놓기 아까움
• 서버리스: 요청할 때만 켰다가, 안 쓰면 꺼지는 종량제
• "서버는 없다(serverless)" — 사실 있는데, 종량제로만 쓰겠다는 뜻
• 대표 서비스: AWS Lambda, Cloudflare Workers, Supabase Edge Functions

콜드 스타트

• 서버가 꺼져 있다가 켜질 때 약간의 지연이 있을 수 있음
• 하나만 계속 켜놓는 옵션도 있음 → 빠른 응답 가능

Cloudflare Pages Functions

• Pages(프론트) + Functions(백엔드) 조합 = "페이지 펑션"
• API 키를 백엔드에 숨길 수 있음 — 프론트에 노출하면 해킹 위험
• "프론트엔드에 넘어가면 안 되는 것이 있다. 보안 정보, 열쇠(API 키)는 절대 공개 금지"
• 외부 서비스 연결 시 열쇠가 털리면 남들이 마음껏 사용 가능
• 무료 티어: 일 10만 건 요청 (Vercel 대비 압도적)
• Vercel: 한 달에 제한적, Cloudflare Workers: 하루 10만 건 → 월 300만 건

JAMstack 아키텍처

• JavaScript + API + Markup
• 정적 페이지 + 여러 API를 꽂아 쓰는 구조
• "어디 가서 자랑하기 좋은 트렌디한 용어. 두종쿠 같은 느낌"
• 보안 강화: 직접 만들지 않고 전문 서비스에 맡기면 공격 표면이 줄어듦
• "실리콘 밸리 초천재들이 만든 거에 싹 다 맡기시면 됩니다"
• DB 관리 안 하고, 서버 접근도 안 하면 → 공격할 곳이 없음

5. AI API 연결 (OpenAI)

API = 갖다 쓰는 것

• "핫한 AI 스타트업 싹까 보면 그냥 ChatGPT 래퍼가 들어가 있다"
• API 정의: Application Programming Interface — 앱과 프로그래밍 언어로 상호작용하는 규칙
• UI가 유저↔앱 상호작용이라면, API는 앱↔프로그램 상호작용
• 주소(어디에 요청), 방식(어떻게), 보낼 것(무엇을), 응답(무엇을 받는지) 정의
• JSON 형식: 키-밸류 쌍으로 된 데이터 형태 ({"name": "홍길동", "age": 25})
• "API는 그냥 갖다 쓴다. 이것만 기억하세요"

OpenAI의 AI를 갖다 쓰는 구조

• 모델은 OpenAI가 보유, API로 뚫어놓은 것만 사용 가능
• "일리아 스츠케버, 샘 알트만이 수천억 들여 만든 AI를 우리는 딸깍해서 갖다 쓸 수 있다"
• 무제한은 아님 — 사용량 제한 있고, 돈을 내야 함

옛날 개발자 vs 지금

• 옛날: 공식 문서를 사람이 직접 읽고, 설치 방법 따라하고...
• 지금: AI한테 시키면 알아서 문서 찾아서 해줌
• "문서를 사람이 읽는다 — 역사에 남을 고전적인 일이 될 것. 과거 개발자들은 개발 문서를 읽는 사회였다"

세팅 절차

1. OpenAI Platform 가입
2. Organization 생성 → 프로젝트 생성
3. API 키 발급 — 절대 공개 금지! "노출되면 카드 등록해 놓은 돈이 싹 빠져나감"
4. 크레딧 충전 (~$5 권장)
5. Playground(대시보드 > Chat)에서 테스트 후 코드 복사

Playground에서 실험

• 디벨로퍼 메시지: AI에게 역할 부여 ("당신은 퍼스널 전문 스타일리스트입니다")
• 유저 메시지: 키, 몸무게, 사진 등 입력
• 이것이 API를 쓴다는 개념 — 이 UI에서 하는 짓을 프로그램으로 자동화하는 것

비용 계산 (GPT-5.2 기준)

• 토큰 계산: OpenAI 토크나이저에 프롬프트 붙여넣어서 확인
• 한글이 토큰을 더 많이 먹음
• 미니 모델 추천: 실험할 때는 5원짜리 미니로 하면 가성비 좋음

이미지 생성 API

• GPT Image 1.5가 1.0보다 더 저렴 (경량화 성공) — "오, 몰랐네요. 개꿀인데?"
• 3×3 그리드 꿀팁: 한 장 가격으로 9장 생성 가능 (원뿔8 = 원가 대비 8개 보너스)
• 프롬프트: "3×3 그리드로 헤어스타일 9개, 어떤 스타일인지 설명과 함께, 첨부한 사람의 얼굴은 절대 바꾸지 말고 헤어스타일만 바꿔"
• Playground에서 이미지 탭으로 실험 → 코드 내보내기로 최신 코드 확보

최신 API 방식 주의

• AI(클로드 등)가 짜주는 코드가 옛날 방식(chat/completions)일 수 있음
• Playground에서 "..." → "코드" 클릭 → 최신 responses API 코드 확보
• 복사해서 "이 코드 참고해서 최신 코드로 업데이트해" 하면 됨

구현 구조

프론트엔드(React) → Cloudflare Functions → OpenAI API
                     (API 키 보관)         (텍스트+이미지)

기타 AI 모델 옵션

• Replicate: 다양한 오픈소스 모델 API 제공, 최근 Cloudflare에 조인
• Google AI Studio (Gemini): 무료 입출력 토큰 일부 제공, 데이터 공유 동의하면 무료 쿠폰
• Naver NanoVana: HTTP API로 이미지 생성 가능

6. 바이브 디자인

디자인도 딸깍으로 가능한 시대

• "디자인에 전혀 조예가 없고 아는 게 없기 때문에 무조건 바이브 디자인"
• 초천재 디자이너들이 다 만들어 놓은 것을 가져다 씀

주요 도구

Stitch (stitch.withgoogle.com)

• 구글 제품, AI로 디자인 생성
• "AI 퍼스널 스타일리스트 웹사이트" 입력 → 여러 페이지 디자인 자동 생성
• 코드 내보내기 가능: HTML/CSS 코드 + 스크린샷 PNG 다운로드
• 압축 풀면 코드.html + 스크린.png → 클로드에게 "이 코드와 이미지 참고해서 메인 페이지 만들어줘"
• "1트만에 된 거. 열 번 하면 기가 막힌 디자인 나옴"

Tailwind CSS

• CSS 유틸리티 라이브러리 — 초천재 디자이너들이 "가장 이쁜" 간격/폰트/둥근 정도를 미리 정해놓음
• 패딩 6이면 이 정도가 이쁘다, 보더 레디어스 몇이면 이 정도 둥글기가 이쁘다
• "이걸 어떻게 해야 이쁠까 고민할 필요 없다. 다 정해져 있음"
• 부트스트랩: 비슷하지만 요즘은 좀 올드한 느낌, 재정난 심각

shadcn/ui

• 리액트 전용 깔끔한 UI 컴포넌트 모음
• 버튼, 카드, 입력창 등 표준적이고 깔끔한 디자인
• 필요한 컴포넌트 복사해서 갖다 쓰면 됨
• "바이브 디자인으로 처음부터 만들면 되니까 굳이 안 써도 됨"

Motion (motion.dev)

• 오픈소스(MIT 라이선스) — 상업적으로 자유롭게 사용 가능
• 리액트 전용 애니메이션 라이브러리
• 보잉, 크기변환, 드래그 등 복잡한 애니메이션이 다 구현되어 있음
• "초천재 애니메이터 디자이너들이 다 만들어 놓은 것을 갖다 붙이면 됨"

Mobbin (mobbin.com)

• 실리콘밸리 앱들의 실제 디자인 스크린샷 모음
• 에어비앤비, 블루보틀, 듀오링고 등 억대 연봉 디자이너들의 작업물 참고 가능
• 스크린샷 캡처 → AI에게 "이 스타일로 만들어줘"
• 주의: 완전 똑같이 하면 저작권 문제. "이런 스타일로" 정도로 변형 필요

V0 (Vercel)

• Vercel/Next.js와 종속성이 큼
• 좋긴 하지만 Vercel 비용 문제

워크플로우

1. Stitch에서 프롬프트 입력 → 디자인 생성
2. 코드 + 스크린샷 다운로드
3. 클로드에게 파일 첨부 + "이 코드와 이미지 참고하여 메인 페이지 만들어줘"
4. Tailwind CSS 자동 적용됨

7. 글로벌 결제 (Polar)

한국에서 Stripe를 쓸 수 없는 이유

• Stripe = 글로벌 SaaS/스타트업 결제 인프라 표준 (OpenAI 등 다 사용)
• 한국에 진입 시도했으나 실패:
• 결제 규제가 빡셈
• ActiveX, 공인인증서 유산의 후폭풍
• 카드사 중심 구조, 수수료 문제
• 인구수 대비 우선순위 낮음
• 2026년 1월 24일 기준 사용 불가 (미국 법인 없이는)

MOR (Merchant of Record) 서비스

• MOR이란: 고객에게 실제로 물건을 판 판매자로 법적으로 기록되는 주체
• Polar가 우리 대신 판매 주체가 됨 → Stripe로 결제 받음 → 수수료 떼고 우리에게 전달
• "폴라가 대신 장사의 주체가 되어서, 법적 책임도 폴라가 짐"

수수료 비교

• Polar가 다른 MOR(Lemon Squeezy, Paddle)보다 수수료가 저렴 — 신생 업체라서
• 추가 수수료: 해외 카드 수수료, 구독 추가 수수료, 전송(출금) 수수료 등

Polar 규정 준수 (가장 중요!)

• 거부 사유가 아주 많음: 폴라가 법적 책임을 지기 때문에 깐깐하게 심사
• 금지 항목들:
• 운세/점술 (fortune telling) — 조코딩도 처음에 운세 서비스 하려다 포기
• 성인 서비스
• 도박/배팅
• NFT
• 품질 낮은 서비스
• 벼락 부자 관련
• 가짜 통계/후기
• 실제 거절 사례: 조코딩의 나노바나 스튜디오가 Polar에서 정지당함 (이미지 생성 서비스 때문인 듯)
• 반드시 해야 할 것: Acceptable Use Policy 전체를 복사해서 AI에게 "이 규정을 참고해서 절대 규정 위반이 되지 않도록 사이트 만들어줘"

구현 절차

1. Polar 가입 → Organization 생성
2. 샌드박스 환경에서 개발/테스트 (실제 돈 X)
3. 샌드박스 = "모래놀이터. 개발자들이 다치지 말고 안전하게 놀라는 곳"
4. Product 등록 (이름, 설명 마크다운, 가격, 미디어 이미지 16:9)
5. llms-full.txt 문서 복사 → AI에게 결제 기능 구현 지시
6. "어차피 사람은 문서를 안 본다. AI가 보기 좋게 만든 거"
7. API 토큰 발급 (권한: checkout read/write, order read, refund write)
8. 만료일 설정 주의: 실 운영 시 "만료 없음"으로 설정해야 중간에 안 끊김
9. 테스트 카드: 4242 4242 4242 4242 (아무 만료일/CVC)
10. 프로덕션 전환 시 API 키/Product ID 교체
11. 샌드박스 → 프로덕션 전환 시 AI에게 명확히 알려줘야 함 (안 하면 인간 할루시네이션)

가격 전략

• $3.99 — Apple/Amazon 등 초천재 가격 결정자들의 전략 참고 (99센트 끝자리)
• 심리학적으로 $3.99가 $4.00보다 훨씬 싸게 느껴짐
• "커피 한 잔 가격, 충동 구매 유도하기 좋은 가격대"
• 베블런 효과: 너무 싸면 장난감 같고, 적당히 비싸면 "엄청난 AI 쓰는 것 같다"는 전문가 이미지
• 저가 진입 → 이벤트가로 시작 → 나중에 올리는 전략도 좋음
• 마진율 60~85% — "거의 엔비디아급"

출금 과정 (실제 경험)

1. 동물상 테스트 서비스에서 $47.66 결제 받음
2. 수수료 떼고 $44.85 남음
3. Polar에서 $10 이상 적립 → Withdraw 신청
4. Stripe 통해 입금 (12월 8일 신청 → 12월 11일 은행 입금, 약 3~4일)
5. 한국 일반 은행 계좌로 원화 입금 (외화통장 불필요)
6. 세금: 종합소득세 때 신고 — 세무사에게 넘기면 처리해줌

100% 할인 쿠폰으로 자체 테스트

• 본인이 결제하면 자금 세탁 → 절대 하면 안 됨
• Polar > Discounts에서 100% 할인 쿠폰 생성 → 무료로 결제 흐름 테스트

심사 제출

• Settings > Account Setup 에서 개인 정보, 이메일, 웹사이트, 소셜 미디어 필수
• "소셜 미디어 없으면 통과 안 됨. 이 사람이 안전한 사람인가 확인하려고"
• 사업자 불필요 — 개인으로 가능
• 실 결제가 들어와야 (심사 통과 전이라도 결제는 가능, 출금만 심사 후)

실시간 매출 발생

• 강의 중 시청자들의 후원 겸 결제로 $31.92 달성
• "이대로 반복하면 MRR(월간 반복 매출) 416만 원" (물론 강의 효과)

Stripe Atlas (향후 5주차)

• 미국 Delaware C-Corp 법인 설립 서비스
• 딸깍하면 만들어짐 — 별도 회계사보다 훨씬 저렴
• Stripe 직접 사용 가능 → 수수료 절감, 간편결제 가능
• Mercury 은행 연동 → 미국 법인 카드/은행 계좌 발급
• 세금: 미국 Delaware 21% (5주차에서 상세 다룰 예정)
• 한국으로 돈 빼려면 해외 송금

8. 이메일 전송 (Resend)

Resend 선택 이유

• 무료 플랜: 월 3,000건, 도메인 1개
• 문서가 최고 수준 — 진짜 감동받음:
• llms-full.txt 제공 (AI 최적화)
• MCP, Cursor Code 연결 기능 제공
• 다양한 프로그래밍 언어 코드 예시
• Mintlify API 가이드 도구로 만든 깔끔한 문서
• 개발자 친화적:
• Cloudflare DNS 자동 감지 → 도메인 등록 시 자동 연결
• "이거 진짜 잘 돼 있어요. 딴 서비스 쓸까 하다가 이거 보고 결정"

세팅 절차

1. Resend 가입 (Google 또는 GitHub 연동)
2. 도메인 등록 (Domains > Add Domain)
3. Region: 도쿄 (한국 없음, 가장 가까운 곳)
4. Cloudflare DNS 자동 감지 → 승인만 해주면 연결 완료
5. API 키 발급 (API Keys > Create API Key)
6. 권한: Full Access 또는 Sending만
7. .dev.vars에 RESEND_API_KEY 등록
8. AI에게 llms-full.txt 제공 + "이메일로 결과 리포트 전달하는 기능 구현해줘"

이메일 정책

• 결제 시 입력한 이메일로 리포트 자동 발송 (별도 이메일 입력 불필요 — Polar 결제에서 가져옴)
• 이메일 잘못 입력 → 사용자 책임 (환불 불가 규정 명시)
• AI 분석 실패 시 → 무조건 자동 환불 (텍스트든 이미지든 하나라도 실패하면)
• 환불 API마저 실패하면 → "help@jocoding.net으로 문의하세요" 페이지 표시

이메일 발송 시 주의사항

• resend.dev로 보내면 테스트 메일만 됨 (개정 주인에게만)
• 반드시 자기 도메인을 등록해야 외부 메일로 발송 가능
• 이미지는 첨부 파일(attachment)로 보내야 함 (base64 인라인은 안 보일 수 있음)

배포 시 환경 변수 등록 필수

• Cloudflare 대시보드 > Settings > Variables and Secrets에 RESEND_API_KEY 추가
• "새로운 서비스 API를 추가했다면 키를 넣어주셔야 합니다. 키가 없으면 동작하지 않습니다"

9. 다국어(i18n) 지원

글로벌 서비스의 필수

• "한국 5천만 팔아봤자 얼마 안 된다. 60억+한테 팔자"
• 심사 담당자도 외국인 → 영어 지원 안 하면 심사도 통과 못할 수 있음

i18n = Internationalization

• "I"와 "N" 사이에 18글자 → i18n
• react-i18next 라이브러리 사용 (AI가 알아서 선택)

구현 방법

• 클로드에게: "글로벌 유저들이 쓸 수 있는 다국어 페이지로 만들어줘. 영어, 한국어. 프롬프트도 각 국가에 맞는 언어로 동작하게 해줘"
• 브라우저 언어 설정 감지 → 자동으로 해당 언어 표시
• 프론트엔드 UI + AI 프롬프트 모두 다국어 대응

단위 변환 문제 (글로벌 마인드)

• 시청자 지적: "미국은 cm/kg이 아니라 feet/pounds 쓴다!"
• 해결: 국가별 단위 드롭다운 선택 (Metric / Imperial)
• AI가 로케일 감지해서 자동 변환 로직까지 구현

10. 서비스 고도화 & 배포

배포 흐름

Firebase Studio(개발) → GitHub(코드 저장) → Cloudflare Pages(배포)

• GitHub: 프라이빗 레포지토리 추천 (시크릿 키 이슈)
• Cloudflare Pages: Framework preset → React + Vite 선택
• 배포 명령어도 AI에게 시키면 됨: "배포해" → git push 자동
• "옛날 개발자 습성이 나와서 git push라는 용어를 썼다. 자연어 시대에 '배포해'라고 하면 됨"

환경 변수 관리

• .dev.vars 파일: 로컬 개발용 (.gitignore에 포함, GitHub에 안 올라감)
• Cloudflare 대시보드: Settings → Variables and Secrets에 시크릿으로 등록
• OPENAI_API_KEY
• POLAR_ACCESS_TOKEN
• RESEND_API_KEY
• "새 API 추가할 때마다 여기에 키 등록하는 것이 핵심. 안 하면 절대 동작 안 함"

서비스 약관 필수 페이지

• Terms of Service (이용약관)
• Privacy Policy (개인정보처리방침)
• 제3자 제공(OpenAI) 고지 필요
• "저희는 DB 없으니까 제3자 제공이 핵심"
• Refund Policy (환불규정)
• 이메일 잘못 입력 → 환불 불가
• AI 생성 실패 → 무조건 자동 환불
• 글로벌 규정 준수: GDPR 쿠키 동의 등 (유럽 타겟 시 필수)
• "완벽한 글로벌 표준 양식은 없다. AI한테 '글로벌 표준으로 짜줘' 하면 적당히 해줌"

프리미엄(Freemium) vs 유료 전용

• 프리미엄은 손해 날 수 있음 (전환율 낮으면 무료 사용자 비용만 나감)
• 더 나은 방법: 예시 리포트/동영상을 먼저 보여주고 "너도 해보려면 결제하세요"
• "돈 쓰는 걸 최소화하고, 본질(이거 쓰고 싶어 할까)을 보여주면 됨"

남은 보완 사항

• 이미지 업로드 압축 처리 (1MB 이상 자동 압축)
• 다국어(영어/한국어) 지원
• 파비콘/타이틀 변경
• 프롬프트 전문성 강화 (Deep Research 활용)
• 인간 심리 편향을 이용한 결제 유도 (다음 주)
• 이벤트 퍼널 추적/분석
• 페이지 속도 최적화
• 이탈 방지 피드백
• 로그인 버튼 제거 (아직 구현 안 함)

11. 액션 아이템 & 다음 주 예고

이번 주 미션: 첫 판매 달성하기

• Firebase Studio에서 React+Vite+TypeScript 프로젝트 생성
• OpenAI API 키 발급 및 크레딧 충전 ($5)
• AI 퍼스널 스타일리스트 (또는 본인 아이디어) 구현
• Polar 가입 → Product 등록 → 결제 연동
• Resend 가입 → 이메일 전송 기능 추가
• 서비스 약관/개인정보처리방침/환불규정 페이지 추가
• 다국어(영어/한국어) 적용
• Cloudflare Pages 배포 + 환경 변수 등록
• Polar 심사 제출 (소셜 미디어 필수)
• SNS/커뮤니티에 홍보하여 실제 첫 판매 달성
• Product Hunt에 제품 등록

다음 주 (4주차) 예정

• 데이터베이스 (Supabase — PostgreSQL 관계형 DB)
• 회원 가입 / 로그인
• 구독 결제 구현
• 이번 주 미완성 부분 보완 (결제 유도, 퍼널 분석 등)
• 퍼포먼스 마케팅

5주차 예정

• 미국 법인 설립 (Stripe Atlas)
• Stripe 직접 연동 (간편결제 포함)
• 앱 개발 (웹앱 → 네이티브 앱 래핑)
• 실무 운영 / 고도화
• 이번 주 못 한 내용들 추가

🔧 사용 도구 & 링크 정리

💡 핵심 인사이트

1. "사람이 들어가서 비싼 시장"을 AI로 파괴하라 — AX의 시대, 기회가 넘친다
2. 핑크텍스: 여성 타겟 서비스가 수익 80배 차이. "상남자는 핑크다"
3. 순위 높은 기술을 쓰라 — AI가 더 잘 도와준다 (React, TypeScript)
4. 문서를 사람이 읽지 마라 — llms-full.txt를 AI에게 주면 된다
5. 무조건 글로벌 — 한국 5천만 vs 세계 60억+
6. 결제 규정 준수가 핵심 — Polar의 Acceptable Use Policy 반드시 확인. 운세도 안 됨!
7. 손해 볼 수 없는 구조 — 결제 후에만 API 호출 → 원가 이하 손실 불가
8. 초천재들이 만든 것을 딸깍 — 디자인, 애니메이션, 보안, 가격 전략 모두 가져다 쓰기
9. 인간이 문제 — AI 할루시네이션보다 인간 실수(환경 변수 누락, 샌드박스/프로덕션 혼동)가 더 많음
10. $3.99의 마법 — Apple/Amazon 초천재들이 연구한 심리적 가격. 그냥 따라하면 됨

🎯 비용 구조 요약

완전 무료

• Cloudflare Pages (호스팅, 무제한)
• Cloudflare Workers (일 10만 건)
• Resend (월 3,000건 이메일)
• Polar (결제 수단, 수수료만)

유료 (필수)

• OpenAI API: ~$5 충전으로 시작 (1회 분석 5~29원)
• 도메인: ~$10/년

유료 (선택)

• AI 코딩 도구: Claude Code Max $200/월 또는 무료 대안(Gemini CLI, OpenAI Codex)
• Resend Pro: 월 3,000건 초과 시

수익 구조

고객 결제 $3.99
  - Polar 수수료 (~4% + 40¢) = ~$0.56
  - OpenAI API 비용 (~$0.02~0.10)
  = 순이익 ~$3.33 (마진율 ~83%)