2년 동안 바이브코딩 해본 입장에서 매일 쓰는 스택 공유함

제품 만들기 시작하는 사람들한테 맨날 똑같은 스택만 추천하는 거 지겹다: Lovable, Supabase, Stripe, Resend, Vercel 쓰면 끝이라고들 하지.

솔직히 말할게. 그냥 제품 테스트나 해보는 단계면 괜찮아. 근데 제대로 돌아가는 앱을 만들고 싶으면 좀 더 진지한 걸로 갈아타는 게 맞다.

보통 문제는 이런 게 필요해질 때부터 시작돼:

-멀티 워크스페이스
-역할 및 권한 관리
-유료 플랜
-사용량 제한
-이메일
-파일
-테스트
-보안

이 시점부터는 간단했던 스택이 더 이상 간단하지 않게 돼. 왜냐면 이 기능들이 다 서로 얽혀 있는데, AI가 코드베이스에 계속 뭘 추가하는 동안 너 혼자서 그 모든 걸 접착제로 붙이느라 고생하게 되거든.

그래서 내가 쓰는 스택을 공유한다. 완벽하진 않아도 나한테는 잘 먹히거든. 대단한 건 아니고, 이제 막 시작하는 '바이브코더(vibecoders)'들한테 도움 좀 되라고 적어본다.

코딩: Codex + Claude Code

Lovable이나 Replit 같은 툴로 처음부터 끝까지 다 만드는 것보다, Claude Code나 Codex가 내 레포지토리 안에서 직접 돌아가게 하는 게 훨씬 낫다.

실제 코드베이스, 깃 히스토리, 터미널, 배포까지 전부 내 통제하에 두면서, Claude나 Codex가 프로젝트를 읽고 여러 파일을 수정하고, 명령어를 실행해서 변경 사항을 테스트하게 할 수 있거든.

언어: Typescript + Tailwind

TypeScript는 고민할 필요도 없는 선택지야. 제품 전체에 다 쓸 수 있고, 생태계도 엄청나게 크고, AI가 기가 막히게 잘 다루거든.
제품에서 진짜 특별한 이유를 대지 않는 이상 다른 언어는 절대 안 쓴다.

스타일링은 Tailwind를 써. AI가 UI 나머지 부분을 망가뜨리지 않고 유틸리티 클래스만 딱딱 수정하는 데 도가 텄거든.

앱: Next.js

프론트엔드는 React, 필요할 땐 서버 사이드 로직, 거대한 생태계, 넘쳐나는 자료, 그리고 AI가 아주 잘 이해하는 프레임워크지.

물론 다른 걸 써야 할 때도 있겠지만, 일반적인 SaaS라면 첫날부터 프론트엔드랑 백엔드를 굳이 따로 프로젝트로 쪼개서 얻을 이득이 별로 없어.

UI: Untitled UI React

AI가 처음부터 디자인 다 짜게 두는 거 별로야. 지금 수준으로는 깔끔하고 전문적인 느낌 내기 힘들거든.

Untitled UI는 커스텀 가능한 탄탄한 React 컴포넌트 시스템을 제공해. 오픈소스 React 컴포넌트들은 MIT 라이선스고.

Claude한테 "이 페이지 좀 고급스럽게 만들어줘!!!"라고 200번씩 말하는 대신, 제대로 된 컴포넌트 라이브러리 써라. 시간도 아끼고 머리 터질 일도 줄어든다.

데이터베이스: PostgreSQL

그냥 Postgres 써. 별거 없어.
성숙하고, 관계형이고, 어디서든 지원하고, 네가 만들 일반적인 프로젝트라면 차고 넘친다.

제품에서 아주 구체적인 이유를 대지 않는 이상 다른 DB는 안 쓴다.

백엔드: foundel.dev

이 부분은 AI가 처음부터 다 만들게 두면 안 되는 곳이야.

인증, 워크스페이스, 역할, 권한, 구독, 플랜 제한, 이메일, 보안까지 전부 다 맞물려 돌아가야 하는데, 백엔드 아키텍처 잘 모르면 로컬에선 잘 돌아가다가 실제 배포하면 개판 나기 딱 좋거든.

Claude나 Codex한테 이미 구조가 잡힌 백엔드를 던져주면, 나는 백엔드 처음부터 짤 필요 없이 실제 제품 만드는 데만 집중할 수 있어.
제품 출시까지는 무료 버전으로도 충분하다.

결제: Stripe

구독, 인보이스, 결제 수단, 웹훅 등등 결제 시스템 직접 구축할 필요 없이 돈 받는 데 필요한 모든 걸 다 처리해 줘.