Tech Stack - Next.js / React / PostgreSQL
이 조합은 Vibe Coding으로 SaaS, 웹서비스, MVP를 만들 때 상당히 이해하기 좋은 “한 세트”입니다. front, backend 를 통합하고 SaaS 등의 복잡한 프로젝트부터 간단한 회사 업무 솔루션까지 기능성에 집중하는 사이트를 만들때 추천
네. 이 조합은 Vibe Coding으로 SaaS, 웹서비스, MVP를 만들 때 상당히 이해하기 좋은 “한 세트”입니다.
핵심은 각각이 경쟁 관계가 아니라 서로 다른 역할을 맡는다는 것입니다.
내가 만드는 웹서비스
│
┌───────────────┴───────────────┐
│ │
화면/UI 데이터/서버
│ │
React Supabase
│ │
Next.js ────────────────────────┘
│
Tailwind
│
↓
Vercel
배포
1. 먼저 한 문장씩 설명하면
기술역할쉽게 말하면ReactUI화면을 만드는 방법Next.js웹앱 프레임워크React를 가지고 실제 서비스를 만드는 뼈대Tailwind CSS디자인화면을 꾸미는 도구SupabaseBackend/DB데이터베이스 + 로그인 + 파일 저장소 등Vercel배포/호스팅만든 서비스를 인터넷에 올려주는 곳
즉,
React로 화면을 만들고 → Next.js로 웹앱을 구성하고 → Tailwind로 디자인하고 → Supabase에 데이터를 저장하고 → Vercel에 배포한다.
라고 생각하면 됩니다.
2. React — 화면을 만드는 핵심
React는 사용자에게 보이는 화면을 만드는 기술입니다.
예를 들어 이런 화면이 있다고 해봅시다.
┌──────────────────────────────┐
│ My App Login │
├──────────────────────────────┤
│ │
│ Welcome, John! │
│ │
│ ┌────────┐ ┌────────┐ │
│ │ Project│ │ Project│ │
│ │ 12 │ │ 24 │ │
│ └────────┘ └────────┘ │
│ │
│ [+ New Project] │
└──────────────────────────────┘
React에서는
Navbar
Dashboard
ProjectCard
Button
LoginForm
같은 컴포넌트로 화면을 나눠서 만들 수 있습니다.
Vibe coding에서 중요한 것은 AI에게
"Dashboard 컴포넌트를 만들어줘."
"ProjectCard를 만들어줘."
"이 화면을 모바일에서도 잘 보이게 해줘."
같이 구체적으로 요청할 수 있다는 점입니다.
3. Next.js — React를 "서비스"로 만들어주는 것
Next.js는 React 위에 올라가는 프레임워크입니다.
React가 주로 UI를 만드는 도구라면 Next.js는 웹서비스 전체를 구성하는 데 필요한 구조를 제공합니다.
예를 들어:
my-app/
│
├── app/
│ ├── page.tsx
│ ├── login/
│ │ └── page.tsx
│ ├── dashboard/
│ │ └── page.tsx
│ └── settings/
│ └── page.tsx
│
├── components/
├── lib/
└── ...
이런 식으로 페이지와 기능을 구조화할 수 있습니다.
따라서
/login
/dashboard
/settings
/projects
같은 실제 웹서비스를 만들기 좋습니다.
그리고 Next.js는 서버에서 실행되는 코드도 함께 다룰 수 있기 때문에 단순한 React 웹페이지보다 훨씬 다양한 서비스를 만들 수 있습니다.
4. Tailwind CSS — 디자인 담당
Tailwind CSS는 CSS를 작성하는 방법 중 하나입니다.
예를 들어 버튼을 만들 때:
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">
Save
</button>
처럼 HTML/JSX에 스타일을 바로 적용할 수 있습니다.
Vibe coding에서 이것이 상당히 편합니다.
AI에게:
"버튼을 좀 더 세련된 SaaS 스타일로 바꿔줘."
"모바일에서는 한 줄로 보이게 해줘."
"다크 모드를 추가해줘."
라고 하면 AI가 Tailwind 클래스를 수정하면서 결과를 만들어내기 쉽습니다.
특히 AI가 생성하는 코드와 궁합이 좋다는 것이 큰 장점입니다.
5. Supabase — 데이터와 사용자 관리
여기서부터가 굉장히 중요합니다.
Supabase는 쉽게 말하면 웹서비스의 Backend를 상당 부분 대신 만들어주는 서비스입니다.
대표적으로:
Supabase
├── PostgreSQL Database
├── Authentication
├── Storage
├── API
└── Realtime
등을 제공합니다.
예를 들어 내가 할 일 관리 앱을 만든다고 해봅시다.
사용자가:
John
↓
Todo 추가
↓
"Buy milk"
를 입력하면 데이터가 DB에 저장되어야 합니다.
Supabase를 사용하면 PostgreSQL 데이터베이스에:
todos
id | user_id | title | completed
---|---------|------------|----------
1 | john | Buy milk | false
2 | john | Exercise | true
같은 데이터를 저장할 수 있습니다.
6. Supabase의 또 하나의 큰 장점: 로그인
직접 로그인 시스템을 만들려면 생각보다 할 일이 많습니다.
회원가입
비밀번호
암호화
세션
로그인
로그아웃
OAuth
Google 로그인
권한 관리
등을 처리해야 합니다.
Supabase Auth를 사용하면 이런 부분을 상당히 줄일 수 있습니다.
예를 들어:
사용자
↓
Google Login
↓
Supabase Auth
↓
사용자 인증
↓
Next.js
↓
Dashboard
같은 구조를 만들 수 있습니다.
Vibe coding에서는 이것이 엄청난 장점입니다.
7. Vercel — 인터넷에 올리는 역할
Vercel은 배포 플랫폼입니다.
로컬 컴퓨터에서:
localhost:3000
으로 잘 작동하는 것과 실제 인터넷에서:
https://myapp.com
으로 서비스하는 것은 다른 문제입니다.
Vercel은 특히 Next.js 프로젝트를 배포하기 쉽게 만들어 놓았습니다.
일반적인 흐름은:
GitHub
↓
Vercel
↓
Build
↓
Deploy
↓
인터넷에서 접속
입니다.
코드를 GitHub에 push하면 Vercel이 자동으로 새 버전을 배포하도록 구성할 수도 있습니다.
8. 그래서 전체를 연결하면
이게 이 조합의 핵심입니다.
예를 들어 AI 기반 할 일 관리 SaaS를 만든다고 해봅시다.
사용자가 브라우저에서:
사용자
│
↓
┌──────────────────┐
│ Next.js │
│ │
│ React UI │
│ Tailwind CSS │
└────────┬─────────┘
│
↓
Supabase
│
┌────┴────┐
↓ ↓
Database Auth
그리고 인터넷에서 서비스되도록:
Internet
│
↓
Vercel
│
↓
Next.js
│
↓
Supabase
가 됩니다.
9. 이 조합의 가장 큰 장점 ① — 역할이 명확하다
초보자에게 특히 좋습니다.
React → 화면
Next.js → 웹앱
Tailwind → 디자인
Supabase → 데이터/로그인
Vercel → 배포
각각의 역할이 비교적 명확합니다.
따라서 AI에게도:
"Supabase에 저장된 사용자의 Todo를 Next.js Dashboard에서 보여줘."
같은 식으로 요청하기 쉽습니다.
10. 장점 ② — MVP를 굉장히 빠르게 만들 수 있다
Vibe coding의 핵심은 처음부터 완벽한 시스템을 직접 구축하지 않는 것입니다.
예를 들어 전통적으로 웹서비스를 만들면:
Frontend
Backend
Database
Authentication
Server
Deployment
Domain
SSL
File Storage
...
를 각각 고민해야 합니다.
하지만 이 조합에서는 상당 부분을 기존 플랫폼에 맡길 수 있습니다.
Frontend → Next.js + React
CSS → Tailwind
Backend/DB/Auth → Supabase
Deployment → Vercel
그래서 AI에게:
"로그인 가능한 프로젝트 관리 SaaS의 MVP를 만들어줘."
라고 요청하고 빠르게 프로토타입을 만들 수 있습니다.
11. 장점 ③ — AI가 이해하기 좋은 조합이다
이 부분이 Vibe Coding에서는 특히 중요합니다.
Next.js + React + Tailwind는 현재 AI 코딩에서 매우 흔하게 등장하는 기술 조합입니다.
따라서 AI에게:
"Next.js App Router를 사용해줘."
"Tailwind CSS로 만들어줘."
"Supabase를 사용해서 인증을 구현해줘."
처럼 구체적으로 요구할 수 있습니다.
AI가 참고할 수 있는 코드 패턴도 매우 많습니다.
즉,
많이 사용됨
↓
많은 예제/문서
↓
AI가 생성하기 쉬움
↓
Vibe coding하기 쉬움
이라는 선순환이 있습니다.
12. 장점 ④ — 혼자서 꽤 큰 서비스를 만들 수 있다
이 조합을 사용하면 개인 개발자도 상당히 많은 것을 만들 수 있습니다.
예를 들어:
SaaS
회원가입
로그인
결제
Dashboard
사용자별 데이터
관리자 페이지
생산성 앱
Todo
Calendar
Notes
Projects
Tags
Search
AI 서비스
사용자
↓
Next.js
↓
AI API
↓
결과
↓
Supabase에 저장
내부 업무 시스템
직원 로그인
↓
Dashboard
↓
고객관리
↓
보고서
↓
Database
등입니다.
13. 장점 ⑤ — 비용 구조도 초기에는 상당히 유리하다
정확한 가격은 서비스마다 달라지고 변경될 수 있지만, 이 조합의 중요한 장점은 작은 프로젝트를 시작할 때 서버를 직접 구축하지 않아도 된다는 것입니다.
예를 들어 초기에는:
GitHub
↓
Vercel
↓
Next.js
Supabase
↓
Database
↓
Auth
↓
Storage
처럼 시작할 수 있습니다.
서비스가 커지면서 필요할 때만 인프라를 확장하면 됩니다.
14. 장점 ⑥ — 나중에 다른 기술로 확장하기도 쉽다
처음에는:
Next.js
Supabase
Vercel
로 시작했다가 사용자가 많아지면:
Next.js
↓
별도의 Backend
↓
PostgreSQL
↓
Redis
↓
AWS/GCP/etc.
같은 구조로 발전시킬 수도 있습니다.
즉 처음부터 AWS의 복잡한 인프라를 직접 구축하지 않아도 된다는 장점이 있습니다.
15. 그렇다고 단점이 없는 것은 아닙니다
이 조합을 무조건 "최고의 조합"이라고 생각하면 오히려 문제가 생깁니다.
가장 큰 문제는 너무 많은 것을 AI에게 맡기게 된다는 것입니다.
예를 들어 AI가:
Next.js Server Component
Server Action
Supabase RLS
JWT
Middleware
React State
Client Component
Caching
등을 한꺼번에 사용하면 초보자는:
"왜 이 코드가 이렇게 복잡하지?"
하게 됩니다.
특히 Supabase의 RLS(Row Level Security) 같은 것은 매우 중요합니다.
예를 들어:
User A → 자기 데이터만 볼 수 있음
User B → 자기 데이터만 볼 수 있음
이라는 보안을 데이터베이스 레벨에서 제대로 설정해야 합니다.
AI에게 그냥
"로그인 기능 만들어줘."
라고 하는 것보다,
"Supabase RLS를 사용해서 각 사용자가 자신의 데이터만 SELECT/INSERT/UPDATE할 수 있도록 구현하고, 보안 정책도 설명해줘."
라고 요구하는 것이 훨씬 안전합니다.
16. 제가 이 조합을 하나의 그림으로 표현한다면
👤 사용자
│
↓
┌──────────────┐
│ Vercel │
│ 배포/호스팅 │
└──────┬───────┘
│
↓
┌──────────────────┐
│ Next.js │
│ │
│ React │
│ 페이지/라우팅 │
│ Server │
│ API │
└────────┬─────────┘
│
┌─────────┴─────────┐
↓ ↓
┌──────────────┐ ┌──────────────┐
│ Tailwind │ │ Supabase │
│ │ │ │
│ UI / Design │ │ Database │
└──────────────┘ │ Auth │
│ Storage │
└──────────────┘
그리고 Vibe Coding 관점에서 가장 중요한 부분은 이겁니다.
"내가 인프라를 하나하나 구축하는 것"이 아니라, AI에게 자연어로 기능을 설명하고 이 다섯 가지가 서로 연결된 상태에서 코드를 만들어 가는 것.
그래서 이 스택이 인기를 얻은 것입니다.
17. 한 가지 더 중요한 관점
사실 Next.js + React + Tailwind + Vercel + Supabase를 하나의 기술이라고 생각하면 안 됩니다.
이것은 일종의 현대적인 웹서비스 제작 조립식 세트입니다.
웹서비스
│
┌──────────┼──────────┐
↓ ↓ ↓
UI Logic Data
│ │ │
React Next.js Supabase
│
Tailwind
│
↓
Vercel
배포
그래서 Vibe Coding을 하려는 사람이라면 이 다섯 개를 전부 깊게 공부할 필요는 없습니다.
오히려 처음에는:
React가 무엇인지
Next.js가 React와 어떤 관계인지
Tailwind가 CSS를 어떻게 바꾸는지
Supabase가 DB/Auth를 어떻게 제공하는지
Vercel이 코드를 어떻게 배포하는지
이 5개의 역할과 연결 관계를 이해하는 것이 훨씬 중요합니다.
그 정도를 이해한 다음 AI와 함께 작은 프로젝트 하나를 끝까지 만들어 보면, Vibe Coding의 전체 그림이 상당히 빨리 잡힙니다.
