스택 선택의 기본 원칙
사이드 프로젝트에서 스택 선택의 기준은 "가장 멋있는 기술"이 아니라 **"빠르게 만들고 오래 유지할 수 있는 기술"**입니다. 사용자는 코드가 어떤 언어로 작성됐는지 관심 없습니다. 서비스가 제대로 동작하는지에만 관심 있습니다.
2026년 기준, 가장 많이 검증된 조합부터 시작하는 것이 현명합니다.
처음 시작하는 사람을 위한 최소 스택
기술을 처음 배우는 단계라면 다음 조합으로 시작합니다.
Next.js + Supabase + Vercel
- 프론트엔드: Next.js (React 기반)
- 백엔드/DB/인증: Supabase (PostgreSQL + Auth + Storage)
- 배포: Vercel
이 세 가지만으로 로그인, 데이터 저장, 배포까지 모두 가능합니다. 별도 서버가 필요 없고, 세 서비스 모두 무료로 시작할 수 있습니다. 레퍼런스와 튜토리얼이 풍부해 막히면 검색으로 해결할 수 있습니다.
추천 스택 조합 비교
조합 A: TypeScript 풀스택 (가장 추천)
| 레이어 | 기술 | 역할 |
|---|---|---|
| 프론트엔드 | Next.js 14+ | 페이지 렌더링, SSR/SSG |
| 스타일 | Tailwind CSS | 빠른 UI 구성 |
| 백엔드 | Next.js API Routes / Supabase | 서버 로직 |
| 데이터베이스 | PostgreSQL (Supabase) | 데이터 저장 |
| ORM | Prisma or Drizzle | 타입 안전한 DB 접근 |
| 인증 | Supabase Auth or NextAuth.js | 소셜 로그인 |
| 배포 | Vercel | 자동 CI/CD |
| 스토리지 | Supabase Storage | 파일 업로드 |
장점: TypeScript 하나의 언어로 풀스택 개발, 타입 공유로 버그 감소, 생태계가 가장 큼
단점: AI/ML이 필요한 경우 Python 백엔드를 별도로 추가해야 할 수 있음
조합 B: 정적 사이트 + API
| 레이어 | 기술 |
|---|---|
| 프론트엔드 | Astro or Next.js |
| 백엔드 | Hono (Edge Runtime) |
| 데이터베이스 | Cloudflare D1 (SQLite) or Turso |
| 배포 | Cloudflare Pages + Workers |
장점: 월 $0 운영 가능, 글로벌 엣지 배포로 낮은 레이턴시
단점: Cloudflare Workers의 제약(런타임 한계, Node.js 호환성), 복잡한 쿼리 처리 어려움
조합 C: Python AI 서비스
| 레이어 | 기술 |
|---|---|
| 프론트엔드 | Next.js |
| 백엔드 | FastAPI (Python) |
| AI/ML | OpenAI API, Hugging Face |
| 데이터베이스 | PostgreSQL (Neon) |
| 배포 | Vercel (FE) + Railway (BE) |
장점: AI 기능 구현에 유리, Python 생태계 활용
단점: 언어가 두 개(TypeScript + Python), 배포 비용 증가
실제 월 운영 비용 계산 예시
사용자 100명 수준의 소규모 서비스 기준:
| 서비스 | 무료 플랜 한도 | 예상 비용 |
|---|---|---|
| Vercel (호스팅) | 취미 프로젝트 무제한 | $0 |
| Supabase (DB+Auth) | 500MB DB, 50,000 MAU | $0 |
| 도메인 | - | 연 15,000원 |
| 합계 | 연 15,000원 |
사용자 1,000명 수준 서비스 기준:
| 서비스 | 플랜 | 예상 비용 |
|---|---|---|
| Vercel Pro | 팀 기능, 성능 향상 | $20/월 |
| Supabase Pro | 8GB DB, 100,000 MAU | $25/월 |
| 도메인 | - | $15/년 |
| 합계 | 약 $45/월 |
AI 기능 추가하는 방법
서비스에 AI 기능을 추가하고 싶다면 두 가지 방법이 있습니다.
Vercel AI SDK
Next.js 환경에서 가장 쉽게 AI를 연동할 수 있는 공식 SDK입니다.
npm install ai @ai-sdk/openai
import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'
// Next.js API Route
export async function POST(req: Request) {
const { prompt } = await req.json()
const result = streamText({
model: openai('gpt-4o-mini'),
prompt
})
return result.toDataStreamResponse()
}
스트리밍, 채팅, 이미지 생성 등 다양한 AI 기능을 쉽게 구현할 수 있습니다.
OpenAI API 직접 사용
더 세밀한 제어가 필요하다면 OpenAI SDK를 직접 사용합니다. GPT-4o-mini는 가격이 저렴하여 사이드 프로젝트에 적합합니다.
모바일 앱이 필요할 때의 선택지
웹 서비스를 만들다가 모바일 앱이 필요해지는 경우가 있습니다.
React Native + Expo
JavaScript/TypeScript로 iOS와 Android 앱을 동시에 만들 수 있습니다. 웹 개발 경험이 있다면 상대적으로 진입 장벽이 낮습니다. Expo는 빌드, 배포, OTA 업데이트를 간소화하여 사이드 프로젝트에 적합합니다.
Next.js를 사용하고 있다면 비즈니스 로직이나 타입을 웹과 공유할 수 있습니다.
PWA (Progressive Web App)
별도 앱 개발 없이 웹 서비스를 앱처럼 동작하게 만드는 방법입니다. 홈 화면 추가, 오프라인 동작, 푸시 알림을 지원합니다. 네이티브 앱처럼 완전하지는 않지만 추가 개발 비용 없이 모바일 경험을 개선할 수 있습니다.
스케일업 시 마이그레이션 전략
처음에 단순하게 시작한 스택은 서비스가 성장하면 부족함을 느낄 수 있습니다.
Supabase에서 자체 PostgreSQL로: Supabase는 표준 PostgreSQL을 사용하므로 pg_dump로 데이터를 그대로 내보낼 수 있습니다. Railway나 RDS로 이전이 비교적 수월합니다.
Vercel에서 직접 인프라로: 트래픽이 크게 늘어나 Vercel 비용이 부담될 때 AWS ECS나 Fly.io로 이전을 고려합니다. Docker 이미지로 배포하는 방식으로 전환하면 어떤 플랫폼에도 배포 가능합니다.
모놀리스에서 서비스 분리: 특정 기능이 병목이 될 때 해당 기능만 별도 서비스로 분리합니다. 처음부터 마이크로서비스로 설계하는 것은 초기에 불필요합니다.
최종 권장 사항
기술 스택으로 고민하는 시간을 최소화하고 실제 서비스 개발에 집중하는 것이 중요합니다.
2026년 기준, 대부분의 사이드 프로젝트에서 Next.js + Supabase + Vercel 조합이 가장 좋은 선택입니다. 이 조합은 빠른 개발, 낮은 비용, 충분한 레퍼런스라는 세 가지 조건을 모두 충족합니다.
스택보다 중요한 것은 실제로 사용자가 있는 서비스를 만드는 것입니다. 완벽한 스택을 찾다가 개발을 시작하지 못하는 것이 최악의 선택입니다.