이 글은 기술 릴스에 등장한 기술들을 풀어 설명하는 “릴스 해설” 시리즈입니다. 릴스에는 보통 “무슨 기술을 썼는지”만 짧게 등장하지만, 여기서는 각 기술이 뭔지, 왜 쓰는지, 어떻게 연결되는지 정리합니다.

최근 “한 달 만에 SaaS를 런칭했다”는 개발자 릴스에서 아래 스택이 빠르게 지나갔습니다. 한 번에 보면 “다 최신 기술이네”로 끝나지만, 하나씩 뜯어보면 왜 이 조합인지 알 수 있습니다.

Next.js (App Router)

React 기반의 풀스택 프레임워크입니다. 이 릴스에서는 최신 방식인 App Router를 썼습니다. 페이지 단위 라우팅, 서버 컴포넌트, API 라우트까지 한 프로젝트에서 처리할 수 있어서 “빠르게 하나로 만들기”에 적합합니다.

TypeScript

자바스크립트에 타입을 더한 언어입니다. 작은 프로젝트는 물론, API와 DB 스키마가 계속 늘어나는 SaaS에서는 타입이 없으면 유지보수가 어렵습니다. 이 스택 전체에서 타입 안전성의 기반이 됩니다.

Drizzle ORM

TypeScript 우선의 가벼운 ORM입니다. SQL과 비슷한 문법으로 쿼리를 작성하고, 스키마에서 타입을 자동으로 만들어줍니다. Prisma보다 런타임이 가볍고 서버리스(Edge) 환경에서 잘 돕니다. “빠른 배포 + 타입 안전” 조합에 잘 맞습니다.

Neon (Postgres)

서버리스 Postgres 데이터베이스입니다. 사용한 만큼만 과금하고, 커넥션을 필요할 때 열기 때문에 Vercel 같은 서버리스 환경과 궁합이 좋습니다. Drizzle과 함께 쓰면 스키마 마이그레이션도 TypeScript로 관리할 수 있습니다.

Clerk (인증)

회원가입·로그인·소셜 로그인·세션 관리를 떠안아주는 인증 서비스입니다. 직접 인증을 짜는 대신 컴포넌트 몇 개와 API 키로 끝납니다. “한 달 안에 런칭”이 가능한 이유 중 하나입니다.

Stripe (결제)

구독 결제와 단건 결제를 모두 지원하는 결제 서비스입니다. SaaS의 핵심인 과금 로직을 Stripe가 거의 다 처리합니다. 웹훅으로 결제 성공·실패 이벤트를 받아 DB 상태를 동기화하는 식으로 연결합니다.

Resend (이메일)

개발자 친화적인 이메일 전송 API입니다. 가입 환영, 비밀번호 재설정, 결제 영수증 같은 트랜잭션 이메일을 코드 몇 줄로 보냅니다. 기존 SMTP 방식보다 설정이 단순합니다.

Vercel (배포)

Next.js를 만든 회사의 배포 플랫폼입니다. Git에 push하면 빌드·배포·CDN·HTTPS까지 자동으로 처리됩니다. Next.js와 가장 잘 맞고, PR마다 Preview URL로 미리보기도 됩니다.

Tailwind CSS + shadcn/ui

Tailwind는 유틸리티 클래스로 스타일을 입히는 CSS 프레임워크입니다. shadcn/ui는 Tailwind 위에 쓸 수 있는 복사·붙여넣기 컴포넌트 모음입니다. 디자인 시스템을 처음부터 짜는 대신 빠르게 그럴듯한 UI를 만들 수 있습니다.

어떻게 연결되나

프론트와 백엔드는 Next.js 하나로, 인증은 Clerk, 데이터는 Drizzle이 Neon과 연결, 결제는 Stripe, 이메일은 Resend, 배포는 Vercel이 담당합니다. 핵심 로직(인증·결제·DB)을 외부 서비스에 맡기고 본인은 제품 기능에만 집중하는 구조입니다. “한 달 런칭”이 가능했던 건 기술이 좋아서라기보다, 직접 만들 부분을 최소화한 조합 덕분입니다.