Nuxt 3 + Supabase를 활용한 AI 기반 SaaS 구축: 전체 아키텍처 분석

지난주 저는 MultiPost라는 AI 기반 콘텐츠 재가공(repurposing) 도구를 만들었습니다. 기사 하나를 작성하면 Twitter, LinkedIn, Dev.to, Reddit, Indie Hackers 등 각 플랫폼에 최적화된 버전들을 생성해 줍니다.

제품은 잘 작동합니다. AI 엔진 비용은 변환당 약 ¥0.01 정도였습니다. 전체 과정은 0에서 배포까지 약 48시간이 걸렸습니다.

하지만 이 포스트는 제품에 관한 것이 아닙니다. 내부적으로 어떻게 작동하는지 — 즉, 아키텍처 결정, AI 프롬프트 설계(prompt design), 그리고 그 과정에서 배운 배포 기술에 관한 것입니다.

아키텍처 개요

전체 스택은 다음과 같습니다:

Frontend (Nuxt 3 SSR)
  ├── / → 랜딩 페이지 (Landing Page)
  ├── /convert → AI 변환 UI (AI Conversion UI)
...

핵심 결정: 저는 모든 API 엔드포인트에 Nuxt 3 서버 라우트(H3)를 사용했습니다 — 별도의 백엔드는 없습니다. 이는 프론트엔드와 API가 하나의 아티팩트(artifact)로 배포됨을 의미합니다. Micro-SaaS를 구축하는 1인 개발자에게 이는 엄청난 생산성 이점입니다.

AI 엔진: 실제로 작동하는 프롬프트 설계

앱의 핵심은 변환 엔진입니다. 흐름은 다음과 같습니다:

입력 기사 (markdown text)
  → DeepSeek Chat API (단일 프롬프트, 체인 없음)
  → 5개 플랫폼 변형이 포함된 JSON 응답
...

왜 DeepSeek인가 (Claude나 GPT-4가 아닌 이유)

세 가지 이유가 있습니다:

1. 비용: 1K 토큰당 ¥0.001 ≈ $0.00014입니다. 전체 변환 비용은 약 ¥0.01입니다.
2. 중국 개발자 친화적: API 등록 및 결제가 중국 결제 수단으로 가능합니다. Stripe가 필요 없습니다.
3. 품질: 콘텐츠 재작성(창의적 생성 아님)의 경우, DeepSeek는 GPT-4와 대등한 성능을 보여주면서 비용은 1/30 수준입니다.

변환당 $0.0014일 때, 한 달에 1,000번 변환하더라도 AI 비용은 $1.40입니다. 이는 월 $19의 가격 책정을 90% 이상의 마진으로 실행 가능하게 만듭니다.

프롬프트 아키텍처

생각의 사슬(chain-of-thought) 방식이 아닌 단일 프롬프트(Single-prompt) 설계입니다:

{
  "system": "당신은 콘텐츠 재가공 전문가입니다...",
  "messages": [
...

주요 학습 교훈:

주요 학습 교훈:

1. JSON 모드 (JSON mode)는 타협할 수 없는 필수 사항입니다. response_format: json_object 설정이 없으면

npm run build
npx netlify deploy --prod --dir=.output/public

Netlify는 Nuxt 3의 SSR (Server-Side Rendering)을 기본적으로 지원합니다. 서버 라우트 (Server routes)는 별도의 어댑터 설정 없이도 작동합니다.

그 다음, CNAME 레코드를 통해 multipost.clb520.ccwu.cc를 Netlify로 연결했습니다. SSL 설정의 핵심 요령은 다음과 같습니다: Cloudflare 프록시 (proxy)를 끄고 → Netlify가 Let's Encrypt를 자동으로 프로비저닝(provision)하게 한 뒤 → 다시 프록시를 켜는 것입니다.

내가 다르게 했을 일들

1. 전체 제품이 아닌 랜딩 페이지 (landing page)부터 시작하기. 저는 이 방식을 택했고 ✓ 결과가 좋았습니다. 랜딩 페이지를 통해 제품 코드를 한 줄도 작성하기 전에 아이디어를 검증할 수 있었습니다.

2. GitHub 푸시(push) 전 토큰 로테이션 (Token rotation). 이것 때문에 Cloudflare Pages를 잃었습니다. 첫 커밋(commit)을 하기 전이 아니라, 첫 커밋 이후에 토큰을 돌렸기 때문입니다. 모든 토큰은 첫 커밋 전에 로테이션해야 합니다.

3. 첫날부터 Supabase RLS (Row Level Security) 적용하기. 마이그레이션 스크립트 (migration script)에 즉시 GRANT 권한을 추가하세요. 500 에러가 발생할 때까지 기다리지 마세요.

4. 별도 레포지토리보다 모노레포 (Monorepo). 프론트엔드, API, 데이터베이스를 모두 하나의 Nuxt 3 프로젝트로 관리하면 배포 명령어가 하나로 줄어듭니다. 1인 개발자에게는 이 방식이 더 빠릅니다.

5. 더 높은 가격 책정. 저는 월 19달러로 시작했습니다. 하지만 사람들이 Content Snare ($29)나 Senja ($39) 같은 도구에 실제로 지불하는 금액을 보고 나니, 19달러는 낮게 느껴집니다.

수치 (The Numbers)

지표 (Metric)	값 (Value)
첫 배포까지 걸린 시간	~48시간
...

만약 Nuxt 3 SaaS를 구축 중이며 아키텍처, AI 통합, 또는 배포에 대해 궁금한 점이 있다면 댓글을 남겨주세요. 제가 공유할 수 있는 모든 것을 공유하겠습니다.

그리고 여러분의 콘텐츠 배포를 위해 MultiPost를 사용해보고 싶다면: multipost.clb520.ccwu.cc — 무료 티어(free tier)를 이용할 수 있으며, 신용카드는 필요하지 않습니다.

Nuxt 3, Supabase, DeepSeek로 구축되었습니다. Netlify에 배포되었습니다. 복사해서 붙여넣기(copy-pasting)를 싫어하는 1인 개발자가 작성했습니다.