실전 서비스란 무엇인가
배운 스택을 조합해서 실제 작동하는 서비스를 만든다. 분야별 대표 서비스를 해부하고 무료 툴로 당장 시작한다.
// 분야별 스택 조합 가이드
const SERVICE_STACKS = { "AI SaaS": "Next.js + Gemini API + Supabase", "커뮤니티": "Next.js + Supabase Realtime", "커머스": "Next.js + Supabase + Stripe", "블로그": "Next.js + MDX + Vercel", "포트폴리오": "Next.js + Vercel (무료 배포)" };
// 실전 서비스 개발 순서 // 1. 아이디어 → 스택 선택 // 2. 무료 툴로 환경 구성 // 3. MVP 핵심 기능 구현 // 4. Vercel 배포 // 5. 사용자 피드백 → 반복
🛠️ 이 챕터의 실습 방법
이 트랙은 브라우저 실습이 아닌 로컬 개발 환경에서 직접 프로젝트를 구축합니다.
필수 도구 설치
1단계: VS Code (코드 에디터) https://code.visualstudio.com 에서 다운로드 → 설치 추천 확장: ESLint, Prettier, Auto Rename Tag, Korean Language Pack
2단계: Node.js (런타임) https://nodejs.org 에서 LTS 버전 다운로드 → 설치 터미널에서 확인: node -v, npm -v
3단계: Git (버전 관리) https://git-scm.com 에서 다운로드 → 설치 터미널에서 확인: git --version GitHub 계정 생성: https://github.com
프로젝트 시작 명령어
Next.js 프로젝트 생성
npx create-next-app@latest my-project --typescript --tailwind --app cd my-project npm run dev
브라우저에서 http://localhost:3000 확인
설치 없이 실습하는 방법 (대안)
로컬 설치가 어려우면 아래 클라우드 환경을 사용하세요:
GitHub Codespaces (추천)
- GitHub 로그인
- 아무 저장소에서 '.' 키를 누르면 VS Code가 브라우저에서 열립니다
- 또는 github.com/codespaces 에서 빈 Codespace 생성
- 터미널에서 위의 프로젝트 생성 명령어 실행
CodeSandbox https://codesandbox.io → New Sandbox → Next.js 템플릿 선택 브라우저에서 바로 코딩 + 미리보기 가능
StackBlitz https://stackblitz.com → New Project → Next.js Node.js가 브라우저에서 실행되는 WebContainer 기반
Gemini 2.5 Flash(무료) + Claude Sonnet 4.6(무료) + Grok 4.1(무료)
'란 무엇인가'를 0원으로 시작하고 싶어. Gemini(무료)로 기존 서비스 분석 + Claude(무료)로 핵심 코드 생성 + Vercel·Supabase 무료 티어로 배포까지 끝내는 플랜을 짜줘.
Claude API + Cursor $20/mo + Make.com — 월 10~30만원
'란 무엇인가'에 월 20만원을 투자할 수 있어. Claude API(코드) + Make.com(자동화) + Stripe(결제) 조합으로 수익 구조까지 포함한 아키텍처를 월 비용 분배안과 함께 설계해줘.
Claude Opus + CrewAI + LangGraph — 월 100만원+
'란 무엇인가'를 프로덕션으로 스케일업하려 해. CrewAI(개발+테스트+배포 에이전트 팀) + LangSmith(모니터링) + K8s(오토스케일링) 엔터프라이즈 아키텍처를 월 100만원 예산으로 설계해줘.
0원→$20/mo→$100/mo 단계별 스택 비교
'란 무엇인가'를 만들 때 1인 개발자에게 최적의 스택을 알려줘. 예산 0원→20만원→100만원 단계별로 프론트+백+DB+AI+배포 전체 스택과 전환 시점을 설계해줘.