혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch8 - (3)

AI와 함께 10분 만에 웹앱 배포까지! Claude Code + Supabase + Vercel 완전 정복

안녕하세요! 앵그리비버입니다. 🦫✨

이번에는 클로드 코드(Claude Code)를 활용해서 직접 기획한 '쇼핑 리스트 웹앱'을 실시간 데이터베이스 연동부터 실제 웹 배포까지 전 과정을 손수 진행해 봤습니다.

개발 지식이 많지 않아도 터미널에서 AI와 대화하듯 명령어를 입력하면 착착 진행되니 정말... 놀랍더라고요! 초보자분들도 따라 하기 쉽게 단계별로 정리해봤으니 따라해보십셔!

---

 

1단계: Claude Code에 Supabase MCP 연결하기

가장 먼저 클로드 코드가 제 데이터베이스를 직접 조작할 수 있도록 **Supabase MCP(Model Context Protocol)**를 설정해 줬습니다.

claude mcp add supabase -s local -e SUPABASE_ACCESS_TOKEN=...

터미널에서 MCP 서버가 연결된 걸 확인하고(Checking MCP server health... Connected), 자연어로 **"쇼핑 리스트 앱을 데이터베이스와 연동해 줘. shopping_items 테이블 만들고 RLS 설정까지!"**라고 요청했습니다.

 

2단계: AI가 알아서 테이블 만들고 코딩까지!

클로드 코드가 기특하게도 Supabase 프로젝트를 찾아내더니 shopping_items (id, text, done, created_at) 테이블 생성 쿼리를 자동으로 실행해 줬어요. 로컬 스토리지에 저장되던 기존 JavaScript 코드를 비동기 Supabase API(async/await) 로직으로 깔끔하게 리팩토링까지 마쳤답니다.

 

3단계: GitHub 커밋 & Vercel 자동 배포

🌐 Vercel을 통한 단 1분 배포
코드가 GitHub에 올라간 후에는 **Vercel**이라는 무료 호스팅 서비스를 활용했습니다.
1. Vercel 로그인 후 GitHub 계정 연동
2. 배포할 리포지토리(`shopping-list-app`) 선택
3. `Deploy` 클릭!

단 세 번의 클릭만으로 나만의 정식 웹사이트 주소(`https://shopping-list-app-peach.vercel.app`)가 만들어졌습니다. 모바일 스마트폰 브라우저로 접속해도 똑같이 잘 작동하더라고요!

### 🎯 바이브 코딩을 시작하려는 분들께
* **어려운 점:** 코드를 직접 안 짜더라도, 전체적인 서비스 흐름(DB -> Git -> 배포)은 알고 있어야 AI에게 올바른 지시를 내릴 수 있습니다.
* **좋은 점:** 프로그래밍 언어의 구문 에러 스트레스에서 완전히 해방됩니다!

 

직접 사용해보니...

🧪 최종 동작 검증 실제 배포된 Vercel URL에 접속해 '사과'라는 쇼핑 아이템을 입력해 보았습니다. 입력 즉시 화면 목록에 반영됨과 동시에, Supabase 대시보드의 Table Editor에서도 1 record가 실시간으로 추가되는 것을 최종 확인하였습니다!

아이디어 구상부터 실서비스 배포까지 15분이 채 걸리지 않았다니, 생각보다... 너무 쉽습니다. 여러분도 주말을 이용해 나만의 소소한 웹앱 만들기 한번 도전해보세요!