02. 기술 스택 선정 - 왜 이 조합인가

02편. 기술 스택 선정 - 왜 이 조합인가

Next.js, Supabase, Vercel.
이 조합을 선택하기까지의 고민과 비교 과정을 공유합니다.

---

🤔 선택지가 너무 많았다

프로젝트를 시작하려면 먼저 기술 스택을 정해야 합니다.

그런데 요즘 세상엔 선택지가 너무 많습니다.

React, Vue, Svelte. Firebase, Supabase, PlanetScale. Vercel, Netlify, Railway.

조합의 수가 끝이 없었습니다.

Claude에게 물어봤습니다.

"B2B 견적 플랫폼 만들건데, 기술 스택 추천해줘"

AI는 몇 가지 조합을 제안했습니다. 하지만 최종 결정은 제 몫이었습니다.

그래서 나름의 기준을 세웠습니다.

---

🎯 기술 선택의 기준

세 가지를 정했습니다.

첫째, AI가 잘 알아야 한다.

이 실험의 핵심은 AI와 함께 만드는 것입니다. AI가 잘 모르는 기술을 쓰면 의미가 없습니다.

둘째, 무료 플랜이 넉넉해야 한다.

개인 실험인데 매달 돈이 나가면 부담됩니다.

셋째, 올인원이면 좋겠다.

DB 따로, 인증 따로, 스토리지 따로... 이러면 복잡해집니다.

이 기준으로 하나씩 골라나갔습니다.

---

⚔️ 프론트엔드: 왜 Next.js인가

후보는 세 가지였습니다.

프레임워크	장점	단점
Next.js	생태계 최대, Vercel 무료 호스팅, AI가 잘 앎	러닝커브
Nuxt (Vue)	문법 직관적, 한국 커뮤니티	AI 학습 데이터 적음
SvelteKit	성능 최고, 코드 간결	생태계 작음, AI가 잘 모름

Claude에게 각각으로 간단한 코드를 짜달라고 해봤습니다.

Next.js 코드가 가장 정확했습니다. Svelte는 종종 틀린 문법이 나왔습니다.

결정적으로, Vercel에서 Next.js를 무료로 호스팅해줍니다. Vercel이 Next.js를 만든 회사니까요.

선택: Next.js

---

🗄️ 백엔드/DB: 왜 Supabase인가

여기도 후보가 셋이었습니다.

서비스	장점	단점
Supabase	PostgreSQL, 인증/스토리지 내장, 무료 넉넉	한국 리전 없음
Firebase	구글 생태계, 실시간 DB	NoSQL, 요금 복잡
PlanetScale	MySQL, 브랜치 기능	무료 플랜 폐지됨

Firebase를 잠깐 써봤는데, NoSQL이 익숙하지 않았습니다.

그리고 Firebase 요금 폭탄 썰이 무서웠습니다. 갑자기 수십만 원 나왔다는 이야기를 들은 적이 있거든요.

Supabase는 PostgreSQL 기반이라 SQL을 쓸 수 있었습니다. 저는 SQL이 익숙한 편이라 편했습니다.

게다가 인증, 스토리지가 전부 내장되어 있습니다. 올인원.

선택: Supabase

---

📧 이메일: 왜 Resend인가

견적서를 이메일로 보내야 하니까, 이메일 서비스가 필요했습니다.

서비스	장점	단점
Resend	React Email 지원, API 심플, 무료 100통/일	신생 서비스
SendGrid	안정적	설정 복잡, UI 올드
AWS SES	대량 발송 저렴	무료 없음, 러닝커브 높음

Resend가 눈에 들어왔습니다.

React Email이라는 게 있는데, React 컴포넌트로 이메일 템플릿을 만들 수 있습니다. HTML 테이블 지옥에서 벗어날 수 있다는 뜻입니다.

API도 심플했습니다. 몇 줄이면 이메일이 날아갑니다.

선택: Resend

---

🛡️ 스팸 방지: 왜 Cloudflare Turnstile인가

문의 폼을 만들면 스팸 봇이 공격합니다. CAPTCHA가 필요했습니다.

서비스	장점	단점
Cloudflare Turnstile	완전 무료, 사용자 경험 좋음	-
Google reCAPTCHA	무료	"로봇이 아닙니다" 클릭
hCaptcha	무료	이미지 선택 필요

reCAPTCHA의 "로봇이 아닙니다" 클릭이 싫었습니다. 사용자 입장에서 짜증나거든요.

Turnstile은 대부분 자동으로 통과됩니다. 사용자가 아무것도 안 해도 됩니다.

선택: Cloudflare Turnstile

---

🏁 최종 조합

이렇게 해서 기술 스택이 정해졌습니다.

카테고리	서비스	선택 이유
프레임워크	Next.js	AI가 잘 앎, Vercel 무료
DB/인증/스토리지	Supabase	올인원, SQL
이메일	Resend	React Email, 심플
스팸 방지	Turnstile	무료, UX 좋음
호스팅	Vercel	Next.js 최적화
소스 관리	GitHub	무료

결과적으로 월 운영비는 0원이 됐습니다. 도메인 비용(연 2만 원)만 별도.

---

⚠️ 무료 플랜의 한계

물론 무료에는 한계가 있습니다.

Vercel

- 빌드 시간: 월 100시간
- 서버리스 함수: 월 100GB-시간
- 대역폭: 월 100GB

Supabase

- DB: 500MB
- Storage: 1GB
- 7일 비활성 시 일시정지

Resend

- 일 100통
- 월 3000통

개인 실험 프로젝트엔 충분합니다. 트래픽이 폭증하면 그때 유료로 전환하면 됩니다.

---

💡 배운 것

기술 스택을 고르면서 깨달은 게 있습니다.

AI와 함께 개발할 거라면, AI가 잘 아는 기술을 써야 합니다.

아무리 좋은 기술이라도 AI가 모르면 소용없습니다. 제가 직접 다 짜야 하니까요.

Next.js, Supabase, Tailwind CSS. 이 조합은 AI 학습 데이터가 풍부합니다.

덕분에 Claude가 거의 모든 코드를 정확하게 생성해줬습니다.

---

📋 이번 편 요약

항목	선택	이유
프레임워크	Next.js	AI 친화적, Vercel 무료
DB/인증	Supabase	올인원, SQL 지원
이메일	Resend	React Email, API 심플
CAPTCHA	Turnstile	무료, UX 좋음

---

다음 편에서는 개발 환경을 세팅합니다. Node.js, VS Code, 그리고 Claude Code 설치까지.

💬 다른 기술 스택 추천이 있으시면 댓글로 공유해주세요!