[바이브 코딩] 이란
"개발자를 고용하거나 외주를 주지 않고도, 클로드 코드(Claude Code)와 Supabase, Vercel 조합만 알면 혼자서 완벽한 웹서비스를 배포할 수 있습니다."
AI 시대가 도래하면서 손으로 일일이 코드를 짜지 않고 AI와 대화하며 개발하는 바이브 코딩(Vibe Coding)이 큰 주목을 받고 있습니다. 하지만 터미널, VS Code, Git 등 복잡한 초기 환경 세팅 때문에 입문 과정에서 포기하는 경우가 많습니다.
본 글에서는 복잡한 기존 방식을 벗어나, 단 한 장의 지도로 바이브 코딩의 도구 세팅부터 프론트엔드·백엔드 연결, 최종 배포까지의 전 과정을 정리합니다.
1. 바이브 코딩 필수 개념 & 도구 세팅
과거에는 터미널(Terminal) 창을 열어 복잡한 명령어 형태로 프로그램을 설치하고, VS Code 편집기와 Git을 일일이 연동해야 했습니다. 하지만 최근에는 단독 실행이 가능한 현대적인 신식 도구들이 등장하면서 세팅 과정이 대폭 단순화되었습니다.
- LLM (대형 언어 모델): Claude, ChatGPT, Gemini 등 무수한 데이터를 학습한 두뇌 역할
- 코딩 에이전트 (Coding Agent): LLM과 연결되어 실제로 코드를 작성하고 실행하는 손과 발 역할 (예: Claude Code PC 버전, Cursor AI)
🛠️ 3분만에 끝내는 기본 환경 세팅
- Claude Code PC 버전 설치
- 구글에
Claude Code를 검색하여 공식 다운로드 페이지 접속 후 설치 파일을 실행합니다. - 실행 후 로그인 및 좌측 상단의 [Code] 탭을 선택합니다. (대화 창 안에서 코드 작성, 실행 과정, 결과물 미리보기까지 한 번에 처리됨)
- 구글에
- Git (버전 관리 저장소) 설치
- 코드가 변경될 때마다 이전으로 되돌리거나 저장하는 세이브 파일 역할을 합니다.
git-scm.com에 접속하여 설치 프로그램을 받되, 모든 옵션은 기본값(Default)으로 두고 완료합니다.
- GitHub (클라우드 저장소) 연동
- 내 컴퓨터에 저장된 Git 기록을 인터넷 참고/창고에 올리는 서비스입니다.
- GitHub 가입 후 Claude Code 대화창 옆
+버튼 ➔Connect➔GitHub를 선택해 계정을 인증합니다.
Claude Code와 GitHub를 연결해 두면, "GitHub에 올려줘"라는 한 마디로 작업 시점의 코드가 웹 저장소에 자동으로 보관됩니다.
2. 프론트엔드(Front-end) 구축: 눈에 보이는 화면 만들기
웹사이트는 크게 눈에 보이는 화면인 프론트엔드(시계의 판과 바늘)와 뒤에서 데이터를 처리하는 백엔드(시계 내부 태엽)로 나뉩니다.
프론트엔드 개발 시 HTML, CSS, JavaScript나 React, Flutter 같은 밀키트형 프레임워크를 다 외울 필요가 없습니다. 만들고자 하는 프로젝트의 규모를 Claude Code에게 전달하는 것이 핵심입니다.
- 규모에 맞는 기술 스택 제안 요청:
- 소규모 서비스/단일 페이지인데 과도하게 큰 스택을 쓰거나, 반대로 트래픽이 몰릴 서비스에 너무 가벼운 스택을 쓰면 추후 사이트가 다운될 수 있습니다.
- 프롬프트 예시: "단일 페이지 소개 사이트를 만들어줘. 서비스 규모에 적합한 언어와 기술 스택을 먼저 제안해줘."
3. 백엔드(Back-end) 구축: Supabase로 매니저 고용하기
회원가입, 게시판, 데이터 저장 등 화면 뒤에서 일어나는 비즈니스 로직을 처리하려면 서버와 데이터베이스(DB)가 필수적입니다. 과거에는 AWS 등에서 서버를 빌리고 DB 프로그램을 직접 설치하는 등 진입장벽이 매우 높았으나, 이를 한 번에 해결해 주는 매니저 서비스가 있습니다.
- Supabase (서버 & 데이터 담당 매니저): 서버 구축, 데이터베이스 테이블 생성, 회원가입 인증을 알아서 처리해 주는 BaaS 서비스
🗄️ Supabase 데이터베이스 연결 흐름
supabase.com에 접속하여 GitHub 계정으로 가입 후 New Project를 생성합니다.- 프로젝트 생성 시 발급되는
Project URL과공개용 API Key(열쇠)두 가지를 복사합니다. - Claude Code에게 두 정보를 제공하며 요청합니다.
- 프롬프트 예시: "지금 만든 사이트에 이 Supabase 프로젝트(URL, API Key)를 연결해주고, 필요한 데이터 테이블을 생성하는 SQL 문을 짜줘."
- Claude Code가 제공한 SQL 문을 Supabase의 SQL Editor에 붙여넣고
Run을 누르면 데이터베이스 구축이 완료됩니다.
Supabase를 연결하면 웹사이트에서 입력한 데이터가 실제 웹 서버 데이터베이스 표에 즉시 기록되는 백엔드 시스템이 완성됩니다.
4. 최종 웹 배포: Vercel로 전 세계에 사이트 공개하기
내 컴퓨터에서만 작동하던 웹사이트를 전 세계 누구나 접속할 수 있도록 인터넷에 올리는 과정을 배포(Deployment)라고 합니다.
- Vercel (배포 담당 매니저): GitHub 저장소와 연동하여 자동으로 웹에 올리고 도메인을 생성해 주는 무료 배포 플랫폼
🚀 Vercel 자동 배포 3단계
vercel.com에 접속하여 Continue with GitHub로 가입 및 로그인합니다.- Add New ➔ Project를 누른 뒤, 아까 Claude Code로 작업해 올린 GitHub 저장소(Repository)를 선택(
Import)하고Deploy버튼을 클릭합니다. - 배포가 완료되면 전 세계 누구나 접속할 수 있는 인터넷 주소(URL)가 생성됩니다.
이후 Claude Code로 코드를 수정해 GitHub에 올릴 때마다, Vercel 배포 매니저가 이를 감지하여 최신 버전으로 자동 업데이트해 줍니다.
💡 핵심 요약 비교표
| 분류 | 역할 | 추천 도구 / 서비스 | 핵심 특징 |
|---|---|---|---|
| 개발 도구 | AI 기반 코드 작성 및 실행 | Claude Code (PC) | 단독 창에서 지시, 코드 작성, 결과 확인까지 통합 제공 |
| 코드 저장소 | 코드 변경 이력 저장 및 인터넷 보관 | Git & GitHub | 세이브 파일 저장 및 배포 플랫폼과의 실시간 연동 |
| 백엔드 매니저 | DB 관리 및 사용자 데이터 처리 | Supabase | 복잡한 서버 구축 없이 URL과 API Key로 DB 자동 구성 |
| 배포 매니저 | 인터넷상에 글로벌 사이트 공개 | Vercel | GitHub 업로드 시 실시간으로 웹사이트 자동 업데이트 |
🏁 결론
바이브 코딩의 전체 구조는 다음 3단계로 요약할 수 있습니다.
- 도구 세팅: Claude Code + Git/GitHub 연동
- 프론트엔드: 서비스 규모에 맞게 AI에게 스택 제안을 받아 개발
- 백엔드 & 배포: 데이터 관리는 Supabase, 최종 배포 및 관리는 Vercel에 위임
이 세 가지 매니저 도구 조합만 이해하면 코딩을 몰라도 혼자서 구동 가능한 완전한 웹 서비스를 빠르게 완성할 수 있습니다.
