일반적으로 Vibe Coding으로 제품을 만든다면, 아래와 같은 기술 스택을 이용한다고 합니다.
레이어
대표 선택지
설명
프론트엔드
React + Next.js + TypeScript
LLM 튜토리얼·실사용 사례에서 가장 자주 등장하는 조합으로, 파일 기반 라우팅·SSR/SPA를 한 번에 다루면서 코드 패턴이 정형화되어 AI가 다루기 쉽다.dev+1
스타일/UI
Tailwind CSS + shadcn/ui
유틸리티 클래스와 정형화된 컴포넌트 세트 덕분에 “이 느낌으로 바꿔줘” 같은 프롬프트 기반 UI 수정에 최적화되어 자주 쓰인다.dev+1YouTube
백엔드
Node.js (Next.js API Routes 또는 Express/NestJS)
프론트와 언어를 통일할 수 있고, vibe coding 사례에서 “프론트 + 간단 백엔드”를 한 번에 처리하는 기본 선택지로 가장 많이 언급된다.dev+2
데이터·인증
Supabase (Postgres 포함)
Postgres DB, Auth, 스토리지, Edge Functions를 묶어서 제공해 “백엔드 대부분을 맡기는” 용도로 vibe coding 글·가이드에서 1순위로 추천된다.vibecoder+2
배포·런타임
Vercel
Next.js와의 통합, git 기반 자동 배포로 “코드 짜고 바로 올리기” 흐름에 가장 잘 맞는 호스팅으로 반복해서 추천된다.dev+2
AI IDE/환경
Cursor (+ VS Code 계열), Antigravity
vibe coding용 도구 비교 글·커뮤니티에서 “메인 에디터 겸 AI 환경”으로 가장 많이 언급되는 도구군이다.appwrite+2
AI 모델/어시스턴트
Claude Code / Codex / Gemini CLI
코드 생성·리팩터링·설명까지 전반을 담당하는 대표 모델로, 각종 “best vibe coding stack” 논의에서 기본 전제로 깔린다.wearefounders+2
바이브코딩 미 적응자로써, 여러가지가 궁금해졌습니다.
MVP 만들 때, 한 번의 프롬프팅으로 성공하신적 있나요? 몇 번의 턴으로 성공하셨나요?
시간은 얼마나 걸리셨나요?
대부분 웹으로 시작하시죠?
모바일(iOS, Android)까지 만들어야 한다면, 또 얼마나 많은 프롬프팅과 시 간이 걸릴까요?
이렇게 만들어진, MVP 를 실제 운영 서비스화 해야 한다면,
어떤 키워드들에 신경을 써야 할까요?
외부 환경을 사용하던 건 어떻게 내재화 하나요?
외부 환경을 무료로 사용하면, 사용량이나 갯수에 제한이 있지 않나요?
===============================================
supabase, vercel에 적응이 어렵더라고요.
그래서, 전 제 노트북에 다 담아보려고 하고 있습니다.
지난 주 짝퉁(?)/유사 CTO 웨비나에서는 MSA 기반의 기업형 개발이었다면,
저는 Monolithic Architecture 형 소규모 개발에 중점을 두어 보았습니다.
Monolithic 이지만 모듈화/컴포넌트화 개념으로 개발하고 있기 때문에,
필요 시점에, MSA 기반으로 전환할 예정입니다.
제가 만들고 있는 workflow 및 코드 생성기를 itdalife로 통칭하고 있습니다.
아래 내용이 정답은 아니지만, 실제 운영하는 서비스를 만드시려면,
정말 많은 것들을 신경쓰셔야 합니다.
아래 나오는 키워드 정도는 알고 계시면 좋을 것 같아요.
=================================================
MVP 이후 프로덕션 전환을 위한 체크리스트
🎯 1순위: 핵심 인프라
순서
작업
이유
ITDALIFE
1
DB 이관 (PostgreSQL)
Supabase 무료 한도 초과하면 월 $25+, 내부 DB는 월 $5 수준. 데이터 유출 걱정도 없음
✅
2
캐시 (Redis+Caffeine)
같은 데이터 반복 조회 시 DB 안 거치고 메모리에서 바로 응답. 10배 빨라짐
✅
3
R2DBC 논블로킹
JPA
동시 사용자 1000명이어도 DB 커넥션 100개로 처리. 서버 비용 절감
✅
4
Vercel -> Cloudflare Monorepo
Vercel 월 $20/팀원 → Cloudflare 무료. 빌드도 더 빠름 Next.js 종속 탈피.
✅
5
DB 확장
PostgreSQL로 부족한 특수 케이스 (검색엔진, 시계열 등) 대응. Oracle, MySQL, NoSQL, etc
TODO
🔒 2순위: 보안 ( OWASP Top 10 + 대응 )
순서
작업
이유
ITDALIFE
1
인증/인가 (JWT+OAuth2)
"이 사람이 누구인지" 확인. 로그인 없이는 아무것도 못하게
✅
2
접근 제어 (RBAC+ABAC+RLS)
관리자만 삭제 가능, 본인 데이터만 조회 가능 등 권한 분리
✅
3
입력 검증 (XSS, SQLi, CSRF)
해커가 <script> 넣어도 무시, SQL 조작해도 차단
✅
4
SSRF 방어
해커가 서버를 프록시로 악용해서 내부망 접근하는 것 차단
✅
5
API 보호 (Rate Limiting)
1초에 100번 요청하는 봇 차단. 서버 다운 방지
✅
6
암호화 (키 로테이션)
암호화 키 90일마다 자동 교체. 키 유출돼도 피해 최소화
✅
7
설정 검증
실수로 debug=true 배포하면 시작 시 경고. 민감정보 노출 방지
✅
8
취약점 스캔 (OWASP DC)
사용 중인 라이브러리에 보안 구멍 있으면 빌드 시 알려줌
✅
9
세션 보안
누가 내 세션 토큰 훔쳐가도 IP/브라우저 다르면 차단
✅
10
로그 무결성 (HMAC)
해커가 로그 조작해서 흔적 지우는 것 방지. 법적 증거 확보
✅
11
Google OAuth
비밀번호 직접 관리 안 해도 됨. 구글이 보안 책임짐
✅
12
Kakao/Naver/Apple 로그인
한국 사용자 70%는 카카오 선호. 가입 전환율 2배 상승
TODO
✨ 3순위: 코드 품질
순서
작업
이유
ITDALIFE
1
린팅 (ESLint, ktlint)
탭 vs 스페이스 논쟁 끝. 저장하면 자동 포맷팅
✅
2
타입 안전성
user.nmae 오타 치면 빌드 시 바로 에러. 런타임 버그 80% 감소
✅
3
테스트 자동화
PR 올리면 자동으로 테스트 돌려서 버그 있으면 머지 차단
✅
4
코드 생성 (DSL)
CRUD 100줄 직접 안 짜도 됨. DSL 10줄이면 자동 생성
✅
5
Golden File
코드 생성기 수정 했는데 기존 코드 망가지면 바로 감지
✅
🔌 4순위: API & 통신
순서
작업
이유
ITDALIFE
1
REST API
GET/POST/PUT/DELETE 기본 CRUD. 대부분의 요청 처리
✅
2
GraphQL
프론트가 필요한 필드만 요청. 오버페칭 없이 네트워크 절약
✅
3
WebSocket
채팅, 알림 같은 실시간 기능. 폴링 없이 즉시 푸시
✅
4
API 문서화 (OpenAPI)
Swagger UI에서 API 바로 테스트. 프론트 개발자와 소통 비용 감소
✅
5
에러 처리
{ code: "USER_NOT_FOUND", message: "..." } 일관된 형식. 프론트에서 처리 쉬움
✅
⚡ 5순위: 성능 & 확장성
순서
작업
이유
ITDALIFE
1
2-tier 캐싱
자주 쓰는 건 서버 메모리(1ms), 덜 쓰는 건 Redis(5ms). DB는 50ms
✅
2
비동기 처리 (WebFlux)
이메일 발송 3초 걸려도 사용자 응답은 바로. 백그라운드 처리
✅
3
분산 스케줄러 (ShedLock). 배치작업
서버 3대인데 배치가 3번 도는 참사 방지. 한 번만 실행 보장. 대규모 작업 처리
✅
4
멀티테넌시
A회사 데이터와 B회사 데이터 완전 격리. SaaS 필수
✅
5
분산 락 (Redisson)
동시에 같은 쿠폰 사용 시 1명만 성공하게. 재고 음수 방지 (MSA)
TODO
💼 6순위: 비즈니스 기능
순서
작업
이유
ITDALIFE
1
파일 관리
파일 업로드/다운로드, 압축(GZIP)/암호화(AES-256), SHA-256 중복 제거
✅
2
알림 시스템
이메일+푸시+SMS 한 번에. 채널별로 따로 구현 안 해도 됨
✅
3
워크플로우
주문→결제→배송→완료 상태 흐름. 잘못된 전이 자동 차단
✅
4
감사 로깅
누가 언제 뭘 바꿨는지 기록. 고객 클레임 시 증거 확보
✅
5
결제 연동 (PG사)
토스페이먼츠, 카카오페이 연동. 수익화 시작점
TODO
6
환율 API
달러 결제 시 원화 환산 표시. 글로벌 서비스 필수
TODO
🌍 7순위: 국제화 & 현지화
순서
작업
이유
ITDALIFE
1
다국어 (i18n)
버튼 텍스트 하드코딩 X. JSON 파일만 바꾸면 영어/일본어 지원
✅
2
타임존
미국 사용자에게 한국 시간 보여주면 혼란. 자동 변환
✅
3
통화 형식
미국은 $1,234.56, 한국은 1,234원. 지역별 자동 포맷
TODO
🔗 8순위: 외부 연동
순서
작업
이유
ITDALIFE
1
Google/GitHub OAuth
개발자 타겟이면 GitHub, 일반 사용자면 Google. 가입 허들 낮춤
✅
2
메시지 큐 (Redis Pub/Sub)
이벤트 발행/구독으로 서비스 간 의존성 분리. Outbox 테이블 준비됨
✅
3
클라우드 스토리지 (S3)
AWS S3, GCP 연동. 대용량 파일, CDN 배포
TODO
4
메시지 큐 (Kafka)
대규모 트래픽 시 메시지 순서 보장, 리플레이 가능
TODO
🚀 9순위: 운영 & 배포
로깅 → 모니터링 → CI/CD → 컨테이너 → K8s
순서
작업
이유
ITDALIFE
1
로깅 (JSON, SIEM)
console.log 대신 구조화된 로그. 검색/필터링 가능
✅
2
모니터링 (Micrometer)
CPU 80% 넘으면 슬랙 알림. 장애 전에 대응
✅
3
Health Check
로드밸런서가 죽은 서버에 트래픽 안 보냄. 자동 복구
✅
4
마이그레이션 (Flyway)
DB 스키마 변경 이력 관리. 롤백도 가능
✅
5
CI/CD (GitHub Actions)
PR 머지하면 자동 배포. 수동 배포 실수 방지
✅
6
컨테이너 (Docker)
"내 컴에서는 되는데요" 문제 해결. 환경 동일하게
✅
7
K8s 배포
트래픽 늘면 자동 스케일아웃. 서버 수동 추가 X
TODO
8
APM (Sentry)
어느 API가 느린지, 어디서 에러 나는지 한눈에
TODO
📱 10순위: Mobile (iOS/Android)
상태관리 → 인증 → API → UI → 네비게이션 → 푸시
순서
작업
이유
ITDALIFE
1
상태 관리 (Riverpod)
setState 지옥 탈출. 전역 상태 깔끔하게 관리
✅
2
인증 (Google OAuth)
원탭 로그인. 이메 일/비번 입력 필요 없음
✅
3
Apple Sign-In
iOS 앱에서 소셜 로그인 있으면 Apple 필수. 없으면 심사 거절
TODO
4
API 통합 (Dio+GraphQL)
서버 통신 코드 자동 생성. 타입 안전하게
✅
5
권한 관리 (RBAC)
관리자 버튼 일반 유저에게 안 보이게
✅
6
UI 컴포넌트
버튼, 입력창 등 공통 위젯. 디자인 일관성
✅
7
폼 빌더
회원가입 폼 직접 안 짜도 됨. 유효성 검사 포함
✅
8
네비게이션 (go_router)
딥링크로 앱 특정 화면 바로 진입
✅
9
파일 처리
갤러리에서 사진 선택, 서버 업로드 한 번에
✅
10
오프라인 지원
지하철에서 끊겨도 앱 안 죽음. 복구 시 자동 동기화
TODO
11
다국어 (intl)
앱 설정에서 언어 바꾸면 즉시 반영
✅
12
테마 (Material 3)
다크모드 지원. 시스템 설정 따라감
✅
13
E2E 테스트
출시 전 자동으로 앱 전체 플로우 테스트
✅
14
딥링크
마케팅 링크 클릭하면 앱 설치 후 해당 화면으로
TODO
15
코드 생성 (13개 생성기)
화면, 모델, API 클라이언트 자동 생성
✅
16
iOS/Android 빌드
각 플랫폼용 앱 패키징
✅
17
푸시 (서버) FCM 발송
서버에서 "새 메시지 도착" 푸시 보내기
✅
18
푸시 (앱) firebase_messaging
앱에서 푸시 받아서 알림 표시
✅
19
생체 인증
지문/Face ID로 빠른 로그인. 매번 비번 입력 X
TODO
20
앱스토어 배포 CI/CD
git push하면 앱스토어 자동 업로드
TODO
이렇게 많은 항목에 대해서 아셔야 한데요?!!@@
어떤 항목들은 항목 하나만 해도 알아야할 내용이 책 한권 거뜬히 나옵니다.
특히, Database는...AI가 다 해주긴 하지만...알아두시면 뼈가되고 살이 됩니다.
⭐ 전 ITDALIFE에 위 내용을 녹이고 있습니다.
흐름도
Claude Code 워크플로우 (DSL v2)
┌─────────────────────────────────────────────────────────────────────────┐
│ Claude Code 로 처리 (기존 바이브코딩과 윻사항) │
│ │
│ ┌─────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ PRD │─▶│ SRS │─▶│ Domain │─▶│ UX │ │
│ │ (Why) │ │ (What) │ │ (Model) │ │ (View) │ │
│ └─────────┘ │ ┌─────────┐ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │
│ │ │U S E O W│ │ │ │ U S _ W │ │ │ │ _ S E O W│ │ │
│ │ └─────────┘ │ │ └─────────┘ │ │ └─────────┘ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ ↑ │
│ EARS 패턴이 전체 문서에 적용 │
└─────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────┐
│ DSL 생성 - Claude Code로 처리 │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Core DSL (무엇 - What) │ │
│ │ 프레임워크 무관한 도메인 명세 + EARS 통합 │ │
│ │ │ │
│ │ • domain {} - 제품 메타데이터 │ │
│ │ • enum {} - 열거형 정의 │ │
│ │ • aggregate {} - 루트 엔티티 + invariants + stateMachine │ │
│ │ • usecase {} - 유스케이스 (command/query) │ │
│ │ • api {} - API 계약 + errors │ │
│ │ • security {} - 역할/권한 정책 │ │
│ │ • events {} - 도메인 이벤트 │ │
│ │ • capabilities {} - 기능 플래그 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌─────────────────┼─────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐ │
│ │ spring.dsl │ │ nextjs.dsl │ │ flutter.dsl │ │
│ │ ─────────────── │ │ ─────────────── │ │ ─────────────── │ │
│ │ Backend 설정 │ │ Admin UI 설정 │ │ Mobile UI 설정 │ │
│ │ │ │ │ │ │ │
│ │ • itda-* 모듈 │ │ • 컬럼/위젯 │ │ • 화면 레이아웃 │ │
│ │ • 인덱스 │ │ • 색상 매핑 │ │ • 테마 │ │
│ │ • 포트 │ │ • 폼 필드 │ │ • 네비게이션 │ │
│ └───────────────────┘ └───────────────────┘ └───────────────────┘
│. extension dsl : 어떻게(How)에 집중
└─────────────────────────────────────────────────────────────────────────┘
│
▼ 코드 생성부터 기존 바이크코딩과 다름
┌──────────────────────┐
workflow 적용 │Template(Boiler Plate)│ Scaffolding
│ LIBs / Components │ 자동화 (
│ Code-Generator │ skills, *.sh,
│ Merge / Generation │ slash command, etc
└──────────────────────┘ )
│
┌───────────────┼───────────────┐
▼ ▼ ▼
backend/ nextjs/ flutter/
자동화 부분이 작게 표시되어 있지만, 정말 많은 일을 수행합니다.
((참고)) EARS 패턴 (전체 문서에 적용)
EARS는 SRS/Domain/UX 전체에 적용되는 요구사항 작성 방법론입니다.
EARS 패턴
템플릿
DSL 블록
예시
U (Ubiquitous)
"시스템은 ~해야 한다"
invariants { @ears() }
항상 만족해야 하는 제약
S (State)
"~상태에서, ~해야 한다"
stateMachine { @ears() }
상태 전이 규칙
E (Event)
"~할 때, ~해야 한다"
usecase { emits }, events {}
도메인 이벤트
O (Optional)
"~기능 활성화 시, ~해야 한다"
capabilities { @ears() }
기능 플래그
W (Unwanted)
"~조건이면, ~해야 한다"
api { errors { @ears() } }
예외 상황
미리 만들어 둔 컴포넌트 재활용
핵심 개념
Claude Code는 PRD → DSL 전 과정을 수행합니다. 코드 생산에는 관여하지 않습니다.
사용자가 아이디어나 요구사항을 제시하면:
Claude Code가 PRD/SRS/Domain/UX/EARS 분석을 내부적으로 수행
분석 결과를 바탕으로 Core DSL 작성
플랫폼별 Extension DSL 작성 (Spring/Next.js/Flutter)
DSL에서 코드 자동 생성
코드 생성 은 스캐폴딩 -> 코드생성기 (lib / component 이용)가 담당
SSOT (Single Source of Truth)
원칙
설명
DSL = SSOT
코드 생성의 유일한 원천. 모든 변경은 DSL에서 시작
Core = What
도메인 명세, 프레임워크 무관, EARS 패턴 통합
Extension = How
플랫폼별 설정, 변경 시 해당 타겟만 재생성
Specs = 입력
DSL 작성을 돕는 참고 자료. 없어도 DSL 직접 작성 가능
동기화
Specs 수정 시 → DSL도 수정 필수 (DSL이 진실)
파일 구조
products/<product>/
├── <product>.core.dsl # Core: What (도메인 명세 + EARS)
├── <product>.spring.dsl # Extension: How (Backend)
├── <product>.nextjs.dsl # Extension: How (Admin UI)
├── <product>.flutter.dsl # Extension: How (Mobile UI)
│
├── specs/ # 선택 - 협업/문서화용
│ ├── prd.md # Why - 비즈니스 가치
│ ├── srs.md # What - 기능 요구사항
│ ├── domain.md # Model - 도메인 모델
│ ├── ux.md # View - UX 스펙
│ └── ears-requirements.md # Test - EARS 요구사항 추적
│
├── backend/ # 생성: Spring Boot
├── nextjs/ # 생성: Next.js Admin
└── flutter/ # 생성: Flutter Mobile
단계별 설명 (Claude Code 내부 처리)
1단계: PRD 분석 (Why)
항목
Claude Code 수행 내용
분석
사용자 요구사항에서 "왜 만드는가?" 파악
확인
문제 정의, 타겟 사용자, 성공 지표
문서화
필요시 specs/prd.md 생성 (선택)
2단계: SRS 도출 (What)
항목
Claude Code 수행 내용
분석
PRD에서 기능 요구사항 도출
확인
기능 목록, 우선순위, 비기능 요구사항
문서화
필요시 specs/srs.md 생성 (선택)
3단계: Domain 모델링 (Model)
항목
Claude Code 수행 내용
설계
Aggregate, 엔티티, 관계, 비즈니스 규칙 정의
확인
필드 타입, 제약조건, 상태 전이
문서화
필요시 specs/domain.md 생성 (선택)
4단계: UX 고려 (View)
항목
Claude Code 수행 내용
설계
화면 구성, 사용자 흐름 결정
확인
목록/상세/폼 화면, 에러 처리
문서화
필요시 specs/ux.md 생성 (선택)
5단계: DSL 작성 (Output)
Core DSL 작성
항목
Claude Code 수행 내용
작성
분석 결과를 DSL v2 문법으로 정형화
포함
domain, enum, aggregate, usecase, api, security, events, capabilities
산출물
products/{product}/{product}.core.dsl
Extension DSL 작성
Extension
역할
산출물
Spring
Backend 설정 (모듈, 인덱스, 포트)
{product}.spring.dsl
Next.js
Admin UI 설정 (컬럼, 위젯, 색상)
{product}.nextjs.dsl
Flutter
Mobile UI 설정 (화면, 테마, 네비게이션)
{product}.flutter.dsl
6단계: 코드 생성 (Code-Generator 자동화)
항목
내용
실행
./scripts/itdalife-workflow.sh {product}
생성
Backend + Web + Mobile 전체 스택
산출물
backend/, nextjs/, flutter/
플랫폼별 코드 생성
플랫폼
DSL 소스
자동 생성 항목
Backend
core.dsl + spring.dsl
Entity, Service, Controller, Repository, GraphQL
Web
core.dsl + nextjs.dsl
Page, API Client, Hooks, Forms, Tables
Mobile
core.dsl + flutter.dsl
Screen, Model, Provider, Repository, Navigation, E2E
일반 Vibe Coding → ITDALIFE 적용시 예상 잇점.
│ 시간: 100% → 20-30% (70-80% ↓) │
│ 비용: 100% → 30-40% (60-70% ↓) │
│ 품질: 60-70% → 90%+ (20-30% ↑) |
동시 다발적 제품 생산 가능
DSL 까지만 만들면 LLM 없이도 코드 생산 가능
앞으로의 계획이 있다면 들려주세요.
- LLM 을 통해 생성된 소스량에 비해, 테스트를 거의 못했습니다. 작업 방향은 세워졌으니, Micro하게 미세한 검증을 많이 해야겠습니다. 특히 코드 생성기쪽의 결과물(제품소스)에 대한 검증이 시급합니다.
- 많이 만들어진것 처럼 체크되어 있지만, 이제 MVP V_0.1 수준입니다. 완성시켜보고 싶어요!!
- code-generator 만들어 보고 싶으신가요? 바이브코딩용으로는 비추입니다. 넘 복잡하고 어려워요.ㅠㅠ
