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
cd content-creator-saas
npm install.env.example을 .env.local로 복사하고 값을 채웁니다:
cp .env.example .env.localAnthropic Claude API
- Anthropic Console에 가입
- API 키 생성
ANTHROPIC_API_KEY에 입력
Supabase
- Supabase에 가입
- 새 프로젝트 생성
- Settings > API에서 다음 값 복사:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEY
Supabase SQL Editor에서 lib/db/schema.sql 파일의 내용을 실행합니다:
-- users, content_generations, subscriptions 테이블 생성
-- Row Level Security (RLS) 설정
-- 트리거 및 함수 생성주요 테이블:
users: 사용자 정보content_generations: 생성된 콘텐츠 히스토리subscriptions: 구독 정보
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
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 최적화, 구조화된 섹션
- 형식: Markdown
- 길이: 800-1,500단어
- 특징: 스토리텔링, 영어 작성
- 형식: Markdown
- 포함: 제목, 설명, 타임스탬프, 대본
- 특징: 시청자 참여 유도
- 형식: 텍스트
- 포함: 캡션, 캐러셀 슬라이드, 해시태그
- 특징: 이모티콘 활용, 시각적 구성
1. 플랫폼 선택 (티스토리 선택)
↓
2. 프롬프트 입력
"AI 코딩 도구의 미래에 대한 콘텐츠 만들어줘"
↓
3. 타겟 오디언스 입력 (선택)
"개발자"
↓
4. 생성 버튼 클릭
↓
5. AI가 티스토리 최적화 HTML 생성
↓
6. 프리뷰 확인 및 복사/다운로드
| 기능 | Free | Pro |
|---|---|---|
| 플랫폼 선택 | 1개 | 4개 동시 |
| 월 생성 횟수 | 10회 | 무제한 |
| 히스토리 보관 | 30일 | 영구 |
| 가격 | 무료 | $9.99/월 |
- GitHub에 코드 푸시
- 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
- 기본 콘텐츠 생성
- 4개 플랫폼 지원
- Free/Pro 구분
- 히스토리 기능
- Stripe 결제 통합
- 사용자 인증 UI
- 템플릿 시스템
- 브랜드 톤앤매너 설정
- 더 많은 플랫폼 (LinkedIn, Twitter, TikTok)
- AI 이미지 생성 (DALL-E, Midjourney)
- 팀 협업 기능
- 예약 발행
- 분석 대시보드
Error: Failed to generate content
해결: ANTHROPIC_API_KEY가 올바른지 확인
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 startnpx tsc --noEmitSupabase 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
Made with ❤️ by [Your Name]