AI SaaS 서비스 만들기
대표 서비스: ChatGPT, 뤼튼. 스택: Next.js + Gemini API + Supabase. 스트리밍 채팅 UI부터 대화 저장, Vercel 배포까지.
// AI SaaS 시작 명령어 npx create-next-app@latest my-ai-app cd my-ai-app npm install @google/generative-ai
// app/api/chat/route.ts import { GoogleGenerativeAI } from "@google/generative-ai";
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
export async function POST(req: Request) { const { message } = await req.json(); const model = genAI.getGenerativeModel({ model: "gemini-pro" }); const result = await model.generateContent(message); return Response.json({ text: result.response.text() }); }
// Gemini 프롬프트 팁: // "Next.js 14에서 Gemini API로 // 스트리밍 채팅을 구현해줘. // Tailwind CSS 스타일링 포함."
🛠️ 이 챕터의 실습 방법
디버깅 도구 설정
브라우저 DevTools Chrome → F12 또는 Ctrl+Shift+I
- Console 탭: 에러 메시지 확인
- Network 탭: API 요청/응답 확인
- Elements 탭: HTML/CSS 디버깅
VS Code 디버거
- .vscode/launch.json 생성
- 'Next.js: debug server-side' 설정 추가
- F5로 디버깅 시작 → 브레이크포인트 설정
에러 추적 실습 (Sentry 무료)
- https://sentry.io 가입
- New Project → Next.js 선택
- npm install @sentry/nextjs
- npx @sentry/wizard@latest -i nextjs
- 의도적 에러 발생 → Sentry 대시보드에서 확인
성능 측정 실습
Lighthouse CLI
npm install -g lighthouse lighthouse http://localhost:3000 --view
또는 Chrome DevTools → Lighthouse 탭 → Analyze page load
Gemini 2.5 Flash(무료) + Claude Sonnet 4.6(무료) + Grok 4.1(무료)
'AI SaaS 서비스 만들기'를 0원으로 시작하고 싶어. Gemini(무료)로 기존 서비스 분석 + Claude(무료)로 핵심 코드 생성 + Vercel·Supabase 무료 티어로 배포까지 끝내는 플랜을 짜줘.
Claude API + Cursor $20/mo + Make.com — 월 10~30만원
'AI SaaS 서비스 만들기'에 월 20만원을 투자할 수 있어. Claude API(코드) + Make.com(자동화) + Stripe(결제) 조합으로 수익 구조까지 포함한 아키텍처를 월 비용 분배안과 함께 설계해줘.
Claude Opus + CrewAI + LangGraph — 월 100만원+
'AI SaaS 서비스 만들기'를 프로덕션으로 스케일업하려 해. CrewAI(개발+테스트+배포 에이전트 팀) + LangSmith(모니터링) + K8s(오토스케일링) 엔터프라이즈 아키텍처를 월 100만원 예산으로 설계해줘.
0원→$20/mo→$100/mo 단계별 스택 비교
'AI SaaS 서비스 만들기'를 만들 때 1인 개발자에게 최적의 스택을 알려줘. 예산 0원→20만원→100만원 단계별로 프론트+백+DB+AI+배포 전체 스택과 전환 시점을 설계해줘.