바이브코딩 기술 스택 추천: 처음 웹 애플리케이션을 만들 때 권하는 조합

바이브코딩으로 웹 애플리케이션을 만들려고 하면 AI가 먼저 기술 스택을 제안합니다.

Next.js와 TypeScript를 사용하고,
Tailwind CSS로 화면을 만들고,
Supabase를 데이터베이스로 연결하겠습니다.

각 기술이 무엇인지도 낯선데 선택지까지 많습니다. React, Vue, Firebase, Supabase, Prisma, Drizzle, Vercel, Railway 같은 이름을 비교하다 보면 코드를 만들기도 전에 지쳐요.

처음 만드는 웹 애플리케이션이라면 모든 선택지를 공부할 필요는 없습니다. 예약, 신청, 주문, 회원, 관리자처럼 데이터를 저장하고 관리하는 웹 애플리케이션을 기준으로 추천 조합부터 살펴볼게요.

기술 스택이라는 말 자체가 낯설다면 기술 스택이 무슨 뜻인지 설명한 글을 먼저 읽어도 좋습니다.

추천 조합부터 볼게요

언어
→ TypeScript

웹 애플리케이션 프레임워크
→ Next.js

화면 스타일
→ Tailwind CSS

데이터베이스
→ PostgreSQL

데이터베이스 서비스
→ Supabase

데이터베이스를 다루는 도구
→ Drizzle ORM

배포
→ Vercel

한 줄로 적으면 다음과 같습니다.

TypeScript + Next.js + Tailwind CSS
+ Supabase PostgreSQL + Drizzle
+ Vercel

로그인, 파일 업로드, 이메일과 사용자 분석 같은 기능은 필요한 순간에 맞는 서비스를 추가해요.

처음부터 모두 설치
X

기본 조합으로 시작
+ 필요한 기능만 추가
O

이 조합은 어떤 웹 애플리케이션에 맞을까요?

다음과 같은 기능을 만들 때 사용하기 좋은 조합입니다.

• 사용자가 신청서나 예약 정보를 입력합니다.
• 회원가입과 로그인이 필요합니다.
• 상품, 주문, 결제 상태를 저장합니다.
• 사용자마다 다른 내용을 보여줍니다.
• 관리자 화면에서 데이터를 확인하고 수정합니다.
• 완성한 기능을 실제 주소에 배포합니다.

고객용 사이트와 관리자 페이지를 별도 앱으로 운영할 예정이라면 두 앱을 모노리포로 관리하는 방법도 함께 검토해보세요.

예약 서비스
수강 신청
작은 쇼핑몰
회원용 콘텐츠
업무 관리 도구
관리자 대시보드

단순한 한 페이지 소개 사이트라면 이 구성을 모두 사용할 필요가 없습니다. 반대로 스마트폰에 설치하는 네이티브 앱이나 오랫동안 실행되는 서버 작업이 중심이라면 다른 기술을 함께 검토해야 해요.

이 글에서 추천하는 조합은 화면·서버·데이터베이스가 필요한 일반적인 웹 애플리케이션의 출발점입니다.

TypeScript: AI가 다루는 데이터의 모양을 분명하게 해요

TypeScript는 JavaScript에 데이터의 종류를 표시할 수 있게 만든 언어입니다.

예를 들어 주문 정보에 어떤 값이 들어가는지 다음처럼 구분할 수 있어요.

주문번호 → 글자
결제금액 → 숫자
결제완료 → 참 또는 거짓
주문일시 → 날짜

AI가 이름에 가격을 넣거나 숫자가 필요한 곳에 글자를 보내면 TypeScript가 코드 단계에서 문제를 찾는 데 도움을 줍니다.

바이브코딩에서는 AI가 여러 파일의 코드를 빠르게 바꾸기 때문에 데이터의 모양을 분명하게 정하는 일이 중요해요. 화면, 서버와 데이터베이스가 같은 값을 서로 다르게 이해하는 실수를 줄일 수 있습니다.

TypeScript를 직접 작성하는 문법부터 공부할 필요는 없습니다. AI에게 오류를 숨기지 말고 원인을 해결하게 하는 것이 더 중요해요.

TypeScript 오류를 강제로 무시하지 말고,
어떤 데이터의 모양이 맞지 않는지 쉽게 설명한 뒤 수정해줘.

문자열, 숫자와 날짜 같은 구분이 왜 필요한지는 데이터 타입 설명에서 더 자세히 볼 수 있습니다.

Next.js: 화면과 서버 기능을 한 프로젝트에서 만들어요

Next.js는 React를 기반으로 화면과 서버 기능을 한 프로젝트에서 만들 수 있는 웹 애플리케이션 프레임워크입니다.

사용자가 보는 화면
+
입력값과 권한을 확인하는 서버 기능
+
데이터베이스와 외부 서비스를 연결하는 코드

프론트엔드와 서버를 서로 다른 프로젝트로 나누지 않고 시작할 수 있어서 처음 관리할 범위가 줄어듭니다. AI에게도 화면 수정과 서버 처리를 하나의 기능 흐름으로 요청하기 쉬워요.

예를 들어 예약 기능을 다음처럼 한 프로젝트 안에서 연결합니다.

예약 화면에서 날짜 선택
→ Next.js 서버가 입력값과 로그인 확인
→ 데이터베이스에 예약 저장
→ 화면에 예약 결과 표시

Next.js가 데이터베이스나 로그인 기능을 직접 제공하는 것은 아닙니다. 필요한 서비스를 연결하고 화면과 서버의 역할을 나눌 수 있는 구조를 제공해요.

Next.js의 역할이 더 궁금하다면 바이브코딩에서 자꾸 나오는 Next.js는 도대체 뭔가요?를 참고하세요.

Tailwind CSS: AI가 화면 스타일을 일관되게 고치기 쉬워요

Tailwind CSS는 화면의 여백, 색상, 글자 크기와 배치를 조합해서 사용하는 스타일 도구입니다.

버튼의 배경색
카드의 안쪽 여백
모바일과 컴퓨터 화면의 배치
마우스를 올렸을 때의 변화

AI가 화면 요소와 가까운 곳에서 스타일을 확인하고 수정할 수 있어서 바이브코딩에서 자주 사용합니다. 이미 만들어둔 색상과 간격 규칙을 반복해서 사용하기에도 편리해요.

Tailwind CSS를 사용한다고 화면이 자동으로 보기 좋아지는 것은 아닙니다. 디자인 기준 없이 코드를 계속 추가하면 비슷하지만 조금씩 다른 색상과 여백이 쌓일 수 있어요.

따라서 AI에게 공통 규칙을 먼저 확인시키는 편이 좋습니다.

새 스타일을 추가하기 전에 현재 프로젝트에서 사용하는
색상, 글자 크기, 여백과 버튼 규칙을 확인해줘.
기존 규칙을 재사용하고 비슷한 값을 새로 만들지 마.

HTML, CSS와 JavaScript가 각각 어떤 역할을 맡는지는 웹 화면의 세 가지 기본 기술에서 설명했습니다.

Supabase PostgreSQL: 데이터를 저장하고 눈으로 확인해요

PostgreSQL은 회원, 예약, 상품, 주문과 결제 같은 정보를 관계에 맞게 저장하는 데이터베이스입니다.

Supabase는 PostgreSQL 데이터베이스와 관리 화면, 연결 정보, 로그인과 파일 저장 같은 기능을 함께 제공하는 서비스예요.

PostgreSQL
→ 데이터를 저장하고 조회하는 데이터베이스

Supabase
→ PostgreSQL과 관리 도구를 제공하는 서비스

바이브코딩에서는 AI가 데이터를 저장했다고 말한 뒤 실제 결과를 눈으로 확인할 수 있어야 합니다. Supabase의 관리 화면에서 테이블, 열과 저장된 데이터를 볼 수 있어서 다음 질문을 확인하기 쉬워요.

신청 정보가 실제로 저장됐나요?
주문 상태가 paid로 바뀌었나요?
같은 예약이 두 번 생기지 않았나요?

관계형 데이터베이스라서 회원과 주문, 강의와 수강 신청처럼 서로 연결된 정보를 다루기에도 적합합니다.

서버에서 PostgreSQL에 직접 연결하는 구조에서도 Supabase를 사용할 수 있습니다. 서버 접근 구조에서도 Supabase를 추천하는 이유에 데이터 확인과 운영 측면의 장점을 정리했습니다.

Drizzle ORM: 서버 코드와 PostgreSQL 사이를 연결해요

Next.js 서버에서 PostgreSQL을 다루려면 데이터를 조회하고 저장할 방법이 필요합니다. Drizzle은 TypeScript 코드로 데이터베이스의 표 구조를 정의하고 데이터를 다룰 수 있게 도와주는 ORM입니다.

Next.js 서버
→ Drizzle ORM
→ Supabase PostgreSQL

Drizzle을 추천하는 이유는 기술을 하나 더 넣기 위해서가 아닙니다.

• TypeScript로 테이블과 열의 구조를 표현할 수 있습니다.
• 코드와 데이터베이스 구조의 차이를 확인하기 쉽습니다.
• 데이터베이스 변경 기록을 마이그레이션으로 남길 수 있습니다.
• PostgreSQL의 기능을 비교적 그대로 사용할 수 있습니다.

AI가 데이터베이스 구조를 바꿨다면 코드만 수정하고 끝내지 않아야 합니다. 어떤 테이블과 열이 달라졌는지, 운영 데이터베이스에 어떤 변경을 반영해야 하는지 함께 확인해야 해요.

데이터베이스 구조를 바꾸기 전에
현재 스키마와 영향을 받는 기능을 설명해줘.
변경 기록을 남길 마이그레이션 계획도 함께 알려줘.

ORM의 역할이 낯설다면 AI가 Prisma나 Drizzle을 설치한 이유를 먼저 읽어보세요.

데이터베이스는 Next.js 서버를 통해 접근해요

추천하는 기본 흐름은 브라우저가 데이터베이스의 테이블을 직접 읽고 쓰는 구조가 아닙니다.

브라우저
→ Next.js 서버
→ Drizzle
→ Supabase PostgreSQL

서버는 로그인한 사용자, 입력값과 현재 데이터 상태를 확인한 뒤 필요한 작업만 처리합니다.

예약 생성 요청
→ 로그인 확인
→ 날짜와 인원 확인
→ 남은 자리 확인
→ 예약 저장

권한과 업무 규칙을 기능 코드에 모을 수 있고, 브라우저에는 필요한 결과만 전달할 수 있어요. 결제, 이메일이나 문자처럼 비밀 키가 필요한 외부 서비스도 서버에서 안전하게 연결하기 쉽습니다.

서버를 사용한다고 자동으로 안전해지는 것은 아닙니다. 서버 코드에서 로그인과 권한을 반드시 확인해야 해요. 브라우저에서 Supabase에 직접 접근하는 방식과 차이는 Supabase 서버 접근을 추천하는 이유에서 자세히 설명했습니다.

Vercel: Next.js 프로젝트를 배포해요

Vercel은 완성한 웹 애플리케이션을 인터넷에서 실행할 수 있게 해주는 배포 플랫폼입니다.

Vercel에 Next.js 프로젝트를 연결하면 화면과 서버 기능을 함께 배포할 수 있어요.

Vercel에서 프로젝트와 환경변수 설정
→ 새 버전 배포
→ 실제 주소에서 확인

Next.js 프로젝트의 기본 구조를 자동으로 인식하고, 서버 기능과 정적 파일을 함께 배포할 수 있어서 조합이 단순합니다. 배포 결과와 오류 기록도 Vercel 화면에서 확인할 수 있어요.

다만 내 컴퓨터의 .env 값을 Vercel이 자동으로 가져가지는 않습니다. 운영 환경에서 필요한 데이터베이스 주소와 API 키는 Vercel의 환경변수에 별도로 설정해야 해요.

환경변수의 역할은 API 키와 .env를, 다른 배포 선택지와 차이는 Vercel·Netlify·Railway 비교를 참고하세요.

필요한 기능에 맞춰 기술을 추가해요

기본 기술 스택은 웹 애플리케이션의 공통 뼈대를 만듭니다. 실제 서비스에 필요한 기능이 정해지면 해당 기능을 맡을 기술을 추가해요.

회원가입·로그인
→ Supabase Auth

이미지·첨부파일
→ Supabase Storage

이메일 발송
→ Resend

문자·알림톡
→ Solapi

사용자 행동 분석
→ PostHog

회원가입과 로그인이 필요하다면 Supabase Auth

사용자마다 다른 내용을 보여주거나 본인만 자신의 정보를 수정해야 한다면 로그인이 필요합니다. 이미 데이터베이스로 Supabase를 사용한다면 Supabase Auth를 연결해 회원가입, 로그인과 세션을 관리할 수 있어요.

로그인을 붙였다고 권한 확인까지 끝나는 것은 아닙니다. Next.js 서버에서 로그인한 사용자가 해당 데이터에 접근할 수 있는지 확인해야 해요.

이미지와 첨부파일을 받는다면 Supabase Storage

프로필 사진, 상품 이미지와 신청서 첨부파일처럼 파일을 저장해야 한다면 Supabase Storage를 추가할 수 있습니다. 파일 자체는 Storage에 저장하고, 파일 주소와 관련 정보는 PostgreSQL에 기록해요.

파일 크기와 형식, 공개 범위도 함께 정해야 합니다. 사용자가 올린 파일을 누구나 볼 수 있게 만들지 AI에게 맡겨두면 안 돼요.

이메일을 보낸다면 Resend

신청 완료, 예약 확인과 비밀번호 재설정 이메일을 보낸다면 Resend를 추천합니다. Next.js 서버에서 이메일을 발송하고 결과를 확인하는 구조를 만들기 쉬워요. 디자인이 있는 이메일을 코드로 관리하고 싶다면 React Email을 함께 사용할 수 있습니다.

이메일 발송용 API 키는 브라우저에 넣지 않고 서버의 환경변수로 관리해야 합니다.

문자와 알림톡을 보낸다면 Solapi

국내 사용자에게 문자나 카카오 알림톡을 보내야 한다면 Solapi를 연결할 수 있습니다. 예약 전날 안내나 신청 결과처럼 사용자가 놓치면 안 되는 정보를 전달할 때 유용해요.

발송 요청만 하고 끝내지 말고 성공과 실패 결과를 저장해야 운영 중 누락을 확인할 수 있습니다.

사용자가 서비스를 어떻게 이용하는지 보려면 PostHog

사용자가 어느 화면을 방문하는지, 어떤 버튼을 누르는지, 어느 단계에서 이탈하는지 확인하려면 PostHog를 추가할 수 있습니다. 감으로 기능을 고치기보다 실제 사용 흐름을 보고 다음 작업의 우선순위를 정하는 데 도움이 돼요.

Vercel 로그와 PostHog 기록으로 실제 결제 문제를 찾은 과정은 로그가 무엇이고 왜 필요한지 설명한 글에서 확인할 수 있습니다.

모든 행동을 무작정 수집하지 말고 확인할 질문부터 정하세요. 이름, 이메일과 입력 내용 같은 개인정보가 분석 이벤트에 들어가지 않도록 수집 항목도 함께 확인해야 합니다.

처음부터 모든 기능을 붙이지는 마세요. 회원가입이 없는 서비스에 로그인 기술은 필요하지 않고, 이메일을 보내지 않는 서비스에 Resend도 필요하지 않습니다.

기본 기술 스택
→ 애플리케이션의 공통 뼈대

추가 기술
→ 실제로 필요한 기능만 연결

이 조합을 추천하는 이유를 모아보면

한 가지 언어로 화면과 서버를 다룰 수 있어요

TypeScript를 화면, 서버와 데이터베이스 스키마에서 함께 사용할 수 있습니다. AI가 기능 전체의 데이터 흐름을 따라가기 쉬워요.

화면과 서버가 한 프로젝트에 있어요

Next.js 안에서 화면과 서버 기능을 함께 관리하므로 처음부터 프로젝트를 여러 개 운영할 필요가 없습니다.

데이터를 직접 확인할 수 있어요

Supabase 관리 화면에서 AI가 만든 테이블과 저장 결과를 눈으로 확인할 수 있습니다.

코드와 데이터베이스 구조를 함께 기록해요

Drizzle 스키마와 마이그레이션을 함께 관리하면 언제 데이터베이스 구조를 바꿨는지 확인할 수 있습니다.

TypeScript
→ 같은 데이터 언어

Next.js
→ 화면과 서버를 한 프로젝트로

Supabase PostgreSQL + Drizzle
→ 데이터 저장과 구조 관리

Vercel
→ Next.js 프로젝트 배포

각 도구의 역할과 연결 지점이 분명하다는 점이 이 조합의 가장 큰 장점입니다.

AI에게 이렇게 시작해달라고 요청하세요

새 웹 애플리케이션을 시작할 때는 기술 이름만 나열하지 말고 역할과 원칙을 함께 알려주세요.

이 프로젝트는 다음 기술 스택으로 시작해줘.

- 언어: TypeScript
- 웹 애플리케이션 프레임워크: Next.js
- 화면 스타일: Tailwind CSS
- 데이터베이스: Supabase PostgreSQL
- 데이터베이스 접근: Next.js 서버에서 Drizzle 사용
- 배포: Vercel

브라우저에서 데이터베이스 테이블에 직접 접근하지 말고
중요한 데이터 작업은 Next.js 서버에서 처리해줘.

다음 기능이 필요하면 해당 기술을 우선 검토해줘.
- 회원가입·로그인: Supabase Auth
- 이미지·첨부파일: Supabase Storage
- 이메일 발송: Resend
- 문자·알림톡: Solapi
- 사용자 행동 분석: PostHog

필요하지 않은 기능과 기술은 추가하지 마.
코드를 만들기 전에 각 기술의 역할과 전체 데이터 흐름을 쉽게 설명해줘.

AI가 프로젝트를 만든 뒤에는 실제 구성이 요청과 같은지 다시 확인합니다.

현재 프로젝트의 기술 스택을 역할별로 정리해줘.
요청하지 않은 기술이나 같은 역할을 중복해서 맡는 기술이 있는지 확인해줘.
확인 결과만 설명하고 아직 코드는 수정하지 마.

정리

처음 웹 애플리케이션을 만든다면 다음 조합을 추천합니다.

TypeScript
+ Next.js
+ Tailwind CSS
+ Supabase PostgreSQL
+ Drizzle ORM
+ Vercel

• TypeScript는 화면과 서버가 주고받는 데이터의 모양을 분명하게 합니다.
• Next.js는 화면과 서버 기능을 한 프로젝트에서 만들 수 있는 웹 애플리케이션 프레임워크입니다.
• Tailwind CSS는 AI가 기존 화면 규칙을 확인하며 스타일을 수정하기 편리합니다.
• Supabase는 PostgreSQL과 데이터를 확인할 관리 도구를 제공합니다.
• Drizzle은 Next.js 서버와 PostgreSQL을 연결하고 데이터베이스 구조를 코드로 관리합니다.
• Vercel은 Next.js 프로젝트를 인터넷에 배포합니다.
• 로그인, 파일, 이메일, 메시지와 사용자 행동 분석은 필요할 때 알맞은 기술을 추가합니다.

추천 기술 스택은 기술 이름을 많이 모은 목록이 아닙니다. 화면, 서버, 데이터베이스와 배포가 한 흐름으로 이어지고 필요한 기능을 자연스럽게 확장할 수 있는 조합입니다.