Content Creator SaaS

AI 기반 멀티 플랫폼 콘텐츠 생성 서비스

사용자가 자연어로 입력하면 AI가 티스토리, 미디엄, 유튜브, 인스타그램에 최적화된 콘텐츠를 자동으로 생성합니다.

주요 기능

✨ 핵심 기능

🤖 AI 콘텐츠 생성: Claude API를 활용한 고품질 콘텐츠
🎯 4개 플랫폼 지원: 티스토리, Medium, YouTube, Instagram
📝 마크다운 프리뷰: 생성된 콘텐츠를 바로 확인
📋 원클릭 복사: 복사하여 바로 사용
💾 히스토리 관리: 생성한 콘텐츠 기록 보관

💰 가격 정책

Free Tier: 1개 플랫폼, 월 10회 생성
Pro Tier ($9.99/월): 4개 플랫폼 동시 생성, 무제한

기술 스택

Frontend: Next.js 14, TypeScript, Tailwind CSS
Backend: Next.js API Routes
Database: Supabase (PostgreSQL)
AI: Anthropic Claude API
Auth: Supabase Auth
Payment: Stripe
Hosting: Vercel

빠른 시작

1. 프로젝트 클론 및 의존성 설치

cd content-creator-saas
npm install

2. 환경 변수 설정

.env.example을 .env.local로 복사하고 값을 채웁니다:

cp .env.example .env.local

필수 환경 변수

Anthropic Claude API

Anthropic Console에 가입
API 키 생성
ANTHROPIC_API_KEY에 입력

Supabase

Supabase에 가입
새 프로젝트 생성
Settings > API에서 다음 값 복사:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
- SUPABASE_SERVICE_ROLE_KEY

3. 데이터베이스 설정

Supabase SQL Editor에서 lib/db/schema.sql 파일의 내용을 실행합니다:

-- users, content_generations, subscriptions 테이블 생성
-- Row Level Security (RLS) 설정
-- 트리거 및 함수 생성

주요 테이블:

users: 사용자 정보
content_generations: 생성된 콘텐츠 히스토리
subscriptions: 구독 정보

4. 개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000 열기

프로젝트 구조

content-creator-saas/
├── app/
│   ├── api/              # API 엔드포인트
│   │   ├── generate/     # 콘텐츠 생성 API
│   │   └── history/      # 히스토리 조회/삭제 API
│   ├── (auth)/           # 인증 페이지
│   ├── (dashboard)/      # 대시보드 페이지
│   │   ├── generate/     # 메인 생성 페이지
│   │   └── history/      # 히스토리 페이지
│   └── page.tsx          # 랜딩 페이지
├── components/
│   └── generate/         # 생성 관련 컴포넌트
│       ├── PlatformSelector.tsx  # 플랫폼 선택기
│       ├── PromptInput.tsx       # 프롬프트 입력
│       └── ContentPreview.tsx    # 콘텐츠 프리뷰
├── lib/
│   ├── ai/
│   │   ├── claude.ts     # Claude API 래퍼
│   │   └── prompts.ts    # 플랫폼별 프롬프트
│   └── db/
│       ├── supabase.ts   # Supabase 클라이언트
│       └── schema.sql    # 데이터베이스 스키마
├── types/
│   ├── content.ts        # 콘텐츠 관련 타입
│   └── user.ts           # 사용자 관련 타입
└── package.json

API 엔드포인트

콘텐츠 생성

POST /api/generate
Authorization: Bearer <token>

Body:
{
  "prompt": "AI 트렌드에 대한 콘텐츠",
  "platforms": ["tistory", "medium"],
  "targetAudience": "개발자"
}

Response:
{
  "id": "uuid",
  "status": "completed",
  "results": {
    "tistory": "<html>...</html>",
    "medium": "# Title\n\nContent..."
  },
  "tokensUsed": 1500,
  "createdAt": "2026-01-06T..."
}

히스토리 조회

GET /api/history?page=1&limit=20
Authorization: Bearer <token>

Response:
{
  "items": [
    {
      "id": "uuid",
      "prompt": "...",
      "platforms": ["tistory"],
      "results": {...},
      "createdAt": "..."
    }
  ],
  "total": 50,
  "page": 1,
  "totalPages": 3
}

플랫폼별 콘텐츠 형식

티스토리

형식: HTML
길이: 1,500-3,000자
특징: SEO 최적화, 구조화된 섹션

Medium

형식: Markdown
길이: 800-1,500단어
특징: 스토리텔링, 영어 작성

YouTube

형식: Markdown
포함: 제목, 설명, 타임스탬프, 대본
특징: 시청자 참여 유도

Instagram

형식: 텍스트
포함: 캡션, 캐러셀 슬라이드, 해시태그
특징: 이모티콘 활용, 시각적 구성

사용 예시

1. 콘텐츠 생성 플로우

1. 플랫폼 선택 (티스토리 선택)
   ↓
2. 프롬프트 입력
   "AI 코딩 도구의 미래에 대한 콘텐츠 만들어줘"
   ↓
3. 타겟 오디언스 입력 (선택)
   "개발자"
   ↓
4. 생성 버튼 클릭
   ↓
5. AI가 티스토리 최적화 HTML 생성
   ↓
6. 프리뷰 확인 및 복사/다운로드

2. 무료 vs Pro 비교

기능	Free	Pro
플랫폼 선택	1개	4개 동시
월 생성 횟수	10회	무제한
히스토리 보관	30일	영구
가격	무료	$9.99/월

배포

Vercel 배포

GitHub에 코드 푸시
Vercel에서 프로젝트 임포트
환경 변수 설정
배포!

환경 변수 설정 (Vercel)

ANTHROPIC_API_KEY=sk-ant-xxx
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx
SUPABASE_SERVICE_ROLE_KEY=eyJxxx
NEXT_PUBLIC_APP_URL=https://yourdomain.com

확장 계획

Phase 1 (MVP) ✅

기본 콘텐츠 생성
4개 플랫폼 지원
Free/Pro 구분
히스토리 기능

Phase 2 (개발 중)

Stripe 결제 통합
사용자 인증 UI
템플릿 시스템
브랜드 톤앤매너 설정

Phase 3 (계획)

문제 해결

Claude API 에러

Error: Failed to generate content

해결: ANTHROPIC_API_KEY가 올바른지 확인

Supabase 연결 실패

Error: Failed to fetch user data

해결: Supabase URL과 키가 올바른지 확인, RLS 정책 확인

플랫폼 선택 제한

Error: Free tier allows up to 1 platform(s)

해결: Pro로 업그레이드하거나 1개 플랫폼만 선택

개발 팁

로컬 테스트

# 개발 모드 실행
npm run dev

# 빌드 테스트
npm run build
npm start

타입 체크

npx tsc --noEmit

데이터베이스 마이그레이션

Supabase SQL Editor에서 스키마 변경 적용

기여

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

라이선스

MIT License

지원

📧 Email: support@example.com
💬 Discord: Join our community
📖 Docs: Documentation

감사의 말

Anthropic - Claude API
Supabase - Backend as a Service
Vercel - Hosting
shadcn/ui - UI Components

Made with ❤️ by [Your Name]

FilesExpand file tree

README.md

Latest commit

History