지도 한 장 — 전체 흐름
바이브코딩은 결국 네 걸음입니다. 도구를 세팅하고 → 눈에 보이는 프론트엔드를 만들고 → 뒤에서 돌아가는 백엔드를 붙이고 → 인터넷에 배포합니다. 이 순서만 머릿속에 있으면 나머지는 자리를 찾습니다.
도구
AI에게 코딩을 시키는 작업 도구를 설치한다.
클로드 코드프론트엔드
눈에 보이는 화면. '규모'를 전달하면 스택은 AI가 정한다.
화면 = 시계판백엔드
화면 뒤에서 데이터를 저장·처리하는 서버.
Supabase배포
내 컴퓨터를 벗어나 전 세계에 공개한다.
Vercel도구 편 — 두뇌와 손발
코딩을 처음 하면 환경 세팅부터 막막합니다. 그런데 개념은 단순합니다. 두뇌가 있고, 그 두뇌를 달고 실제로 일하는 손발이 있습니다.
두뇌 — LLM
챗GPT·제미나이·클로드처럼 엄청난 데이터로 학습한 '거대 언어 모델(Large Language Model)'. 생각하고 판단하는 두뇌 역할.
손발 — 코딩 에이전트
그 두뇌를 달고 실제로 파일을 만들고 코드를 짜 주는 도구. 바이브코딩에 쓸 실제 도구가 바로 이것이다.
옛날 도구 vs 지금 도구
예전에는 검은 화면(터미널)에 영어 명령어를 잔뜩 쳐서 이것저것 설치해야 했습니다. 클로드 코드가 원래 그 터미널 안에서 돌아가는 도구였기 때문입니다. 지금은 클릭만으로 쓰는 '신식' 버전이 나왔습니다.
| 구분 | 무엇 | 역할 |
|---|---|---|
| 터미널 | 검은 명령어 창 | 마우스 클릭 대신 글자 명령으로 컴퓨터에 일을 시키는 창. 원래 모든 컴퓨터가 이렇게 돌아갔다. |
| VS Code | 코드 편집기 | 짠 코드가 화면에 어떻게 보이는지 미리보기하며 작업하게 해 주는 편집 도구. |
| 커서(Cursor) AI | 편집기 + LLM | 편집기에 LLM을 합쳐 보기 편하게 만든 '신식' 도구. 여러 LLM을 골라 쓰기 좋다. |
| 클로드 코드 PC판 | 단독 실행 도구 | 터미널·편집기 없이 단독으로 쓰도록 업그레이드. 최근 결과물이 특히 좋아 이 지도의 기본 도구로 삼는다. |
설치 — 도구 + 세이브 파일 + 인터넷 창고
세팅할 것은 딱 세 가지입니다. 클로드 코드(작업 도구), Git(코드의 세이브 파일), GitHub(코드가 모이는 인터넷 창고).
코드 탭을 클릭한다. (채팅 탭이 아니라 코드 탭이 우리가 쓸 곳.)
git-scm.com에서 받아 기본값 그대로 '다음'만 눌러 설치. 끝나면 클로드 코드를 껐다 켠다.
+ → 커넥트 → GitHub 선택 → 계정 인증.
사이트의 두 얼굴 — 프론트엔드와 백엔드
사이트를 시계에 빗대면 이해가 쉽습니다. 눈에 보이는 시계판(초침·분침·숫자)과, 그 뒤에서 돌아가는 태엽. 시계가 작동하려면 둘 다 있어야 합니다.
프론트엔드
우리가 눈으로 보는 화면. HTML·CSS·자바스크립트가 기본이고, 리액트·플러터 같은 '밀키트(프레임워크)'도 있다.
백엔드
화면 뒤에서 데이터를 저장·처리하는 서버. 회원가입·게시판처럼 정보를 다루는 기능은 여기가 있어야 가능하다.
프론트엔드 — '규모'만 전달하면 스택은 AI가 정한다
언어와 프레임워크가 많아 고르기 막막하지만, 바이브코딩에서는 하나만 하면 됩니다. 내가 만들 서비스의 규모를 전달하는 것.
간단한 한 페이지짜리 [우리 단체] 소개 사이트를 만들어 줘. 어떤 스택과 어떤 언어로 제작할지도 미리 알려 줘.
이렇게 규모를 말해 주면 클로드 코드가 그 규모에 맞는 스택과 언어를 제안하고 바로 코딩을 시작합니다. 제안이 마음에 안 들면 "다른 걸로 바꿔 줘"라고 하면 그만입니다.
왜 '규모'가 중요한가
- 언어·구성마다 장단점이 다르다.
- 큰 서비스를 소규모용 스택으로 짜면, 나중에 트래픽이 몰릴 때 사이트가 터진다.
- 그래서 처음부터 규모에 맞는 스택으로 짜는 것이 매우 중요하다.
화면이 떠도 아직 '내 컴퓨터 안'에서만 작동한다 — 아직 인터넷에 올라간 게 아니다.
백엔드 — 복잡한 과정을 대신하는 두 매니저
회원가입 하나 되게 하려면 예전엔 서버를 빌리고, 코드를 올리고, 웹 서버를 설치하고, 도메인을 연결하는 복잡한 과정이 필요했습니다. 이걸 대신해 주는 매니저 두 명이 있습니다.
Supabase — 데이터 매니저
서버 빌리기·데이터 올리기·프로그램 설치를 한 번에 해결. 우리 사이트의 데이터가 실제로 저장되는 곳.
역할: 서버 · 데이터 담당Vercel — 배포 매니저
내 컴퓨터 안 사이트를 인터넷에 올리는 '배포' 과정을 자동으로 처리. 유튜브의 '업로드 버튼'과 같다.
역할: 배포 담당Supabase 연동 — 서버를 만들고 사이트에 잇기
New Project →
이름 지정, 비밀번호는 Generate로 만들어 따로 보관, 지역은 서울 선택 → 생성.
이 버튼을 누르는 순간 내 백엔드(서버)가 진짜로 만들어진다 — 다만 아직 텅 비어 있다.
Connect 버튼(또는 설정 → API 키)에서 프로젝트 URL과 공개(anon) 키를 복사.
쉽게 말해 '내 백엔드 주소'와 '열쇠'.
SQL Editor에 붙이고 Run을 누르면 표가 생긴다.
사이트에서 값을 하나 저장해 보고, Supabase 표에 그 값이 뜨면 백엔드 연결 성공.
[프로젝트 URL 붙여넣기] [공개(anon) 키 붙여넣기] 지금 만든 사이트를 이 Supabase랑 연결해 줘. 필요한 테이블을 만드는 SQL도 같이 만들어 주고, 열쇠(키)는 공개되면 안 되니까 안전하게 환경변수 파일에 넣어 줘.
Vercel 배포 — 전 세계에 공개 (우리 워크숍은 Cloudflare Pages, 절차는 거의 같음)
Continue with GitHub(가장 편함). Vercel이 내 GitHub 창고와 바로 이어진다.
Add New → Project → 내 GitHub 저장소 목록에서 방금 만든 사이트를 Import → Deploy.
프로젝트이름.vercel.app 형태의 주소가 생긴다.
이제 내 컴퓨터가 꺼져 있어도 전 세계 누구나 사이트에 접속할 수 있다.
배포의 진짜 이점
- 내 컴퓨터를 벗어나 24시간 살아 있는 사이트가 된다.
- 앞으로 클로드 코드로 수정해 GitHub에 올릴 때마다, Vercel이 알아서 최신 버전으로 자동 업데이트한다.
- 그래서 '배포 매니저'라는 이름이 붙었다.