01핵심 개요
| 항목 | 내용 |
|---|
| 채널 | 메이커 에반 |
| 주제 | 클로드 코드 + 안티그래비티 IDE로 풀스택 셋업 실습 |
| 대상 | 비개발자·바이브 코딩 입문자 |
| 결과물 | 바이브 코딩 스타터 키트 기반 Next.js 풀스택 앱 배포 |
| 핵심 도구 | Node.js · 안티그래비티 · Git · Claude Code · Supabase · Vercel |
02핵심 내용 구조
- 개발 환경 셋업 — Node.js → 안티그래비티 IDE → Git → Claude Code 익스텐션
- 스타터 키트 활용 —
/바이브코딩스타터킷 슬래시 명령으로 스킬 호출
- 풀스택 구성 — Next.js + React + TypeScript + Tailwind + shadcn/ui + Supabase + Vercel
- DB·인증 — Supabase 프로젝트 생성 → ENV 채우기 → DB 마이그레이션
- 로컬 실행 → 배포 —
pnpm dev → GitHub 푸시 → Vercel 자동 배포
- AI 페어 프로그래밍 — CLAUDE.md·AGENTS.md·design.md로 에이전트 행동 규정
03기술적 맥락
- 안티그래비티 IDE — Claude Code 통합 개발환경, VS Code 호환 확장
- CLAUDE.md/AGENTS.md — 에이전트가 자동 로드하는 컨텍스트 파일
- Supabase — Postgres DB + Auth + Storage 통합 백엔드 서비스
- Vercel — GitHub 연동 자동 배포 플랫폼
- pnpm — 빠른 패키지 매니저 (npm 대체)
- Boilerplate 구조 —
app/, src/, public/, .gitignore, 설정 파일 등
04전략적 의미
- 비개발자 진입 장벽 제거 — IDE·터미널·DB·배포 전 단계를 AI가 가이드
- 표준화된 스타터 — 환경 셋업 시간 90% 절감 → 본 게임에 집중
- 에이전트 행동 명세 — MD 파일로 규칙 주입 → 일관된 결과 보장
- 풀스택 1인 개발 — 백엔드·프론트엔드·DB·인증·배포까지 단일 워크플로우
- 유료 SaaS 대체 — Cafe24·Wix 같은 유료 도구 없이도 자체 사이트 구축
05핵심 워크플로우
| 단계 | 작업 | 도구 |
|---|
| 1. 설치 | Node.js + 안티그래비티 + Git | 공식 다운로드 |
| 2. Claude Code 활성화 | 익스텐션 검색 → Auto 모드 | 안티그래비티 |
| 3. 스타터 키트 적재 | 압축 해제 → Open Folder | 안티그래비티 |
| 4. 스킬 호출 | /바이브코딩스타터킷 입력 | Claude Code |
| 5. 의존성 설치 | pnpm install | 터미널 |
| 6. Supabase 셋업 | 프로젝트 생성 → ENV 입력 → DB 마이그레이션 | Supabase 대시보드 |
| 7. 로컬 실행 | pnpm dev | 터미널 |
| 8. GitHub 푸시 | git add/commit/push | Git |
| 9. Vercel 배포 | GitHub 연결 → 자동 배포 | Vercel |
06활용 시나리오
- MVP 구축 — 아이디어 → 1~2일 내 라이브 사이트 구현
- 개인 포트폴리오 — 풀스택 페이지를 도메인 연결까지 1인 진행
- 사이드 프로젝트 — 인디 해커가 결제·로그인 포함한 SaaS 실험
- 학습용 풀스택 — 비개발자가 실제 동작 앱을 따라 만들며 학습
- 고객 시연 — 빠르게 프로토타입 만들어 사용자 반응 확인
07현황 및 전망
- 스킬 생태계 확산 — 슬래시 명령형 스킬이 IDE 표준 인터페이스로 자리
- 안티그래비티 채택 — Cursor·VS Code와 더불어 AI 코딩 IDE 옵션 다양화
- Supabase 우위 — Firebase 대안으로 인디 시장 점유
- 벤더 락인 우려 — Supabase·Vercel 의존도가 높아질수록 마이그레이션 비용 증가
- 다음 단계 — 결제·실시간 알림·이메일 발송 모듈도 표준화 예상
08용어 사전
| 용어 | 한줄 설명 | 비유/예시 |
|---|
| Node.js | JavaScript 실행 엔진 | 웹앱이 컴퓨터에서 돌아가게 하는 발전기 |
| IDE | Integrated Development Environment | 개발용 통합 작업대 |
| 안티그래비티 | AI 코딩 통합 IDE | VS Code 사촌 + Claude 기본 탑재 |
| 익스텐션 | IDE 확장 플러그인 | 기본 도구에 끼우는 추가 기능 |
| Git | 코드 버전 관리 도구 | 글의 모든 수정 이력을 저장하는 노트 |
| GitHub | Git 원격 저장 서비스 | Git 일기장을 클라우드에 보관 |
| pnpm | 빠른 Node 패키지 매니저 | 더 가볍고 빠른 npm 대체품 |
| Supabase | DB + Auth 통합 백엔드 | Firebase의 오픈소스 사촌 |
| Vercel | 프론트엔드 자동 배포 플랫폼 | GitHub와 연결하면 알아서 배포 |
| Next.js | React 기반 풀스택 프레임워크 | React + 서버 기능 한 세트 |
| Tailwind | 유틸리티 CSS 프레임워크 | 미리 만들어진 스타일 블록 |
| shadcn/ui | 복사·붙여넣기형 UI 컴포넌트 | 즉시 쓸 수 있는 UI 부품 모음 |
| CLAUDE.md | 에이전트가 자동 읽는 규칙 파일 | 새 직원에게 주는 업무 매뉴얼 |
| ENV | 환경 변수 파일 | API 키·비밀번호를 보관하는 금고 |