바이브 코딩으로 풀스택 개발하기

5일 만에 17개 테이블을 가진 풀스택 앱을 완성했다고 하면 믿을 사람이 얼마나 될까? 백엔드를 한 번도 제대로 다뤄본 적 없는 프론트엔드 개발자가 Supabase로 완전한 CRUD 시스템을 구축하고, Redux Toolkit으로 상태 관리를 구현하며, 요양보호사를 위한 업무 관리 앱을 배포까지 마쳤다.

이것이 가능했던 이유는 단순히 AI 도구를 사용했기 때문이 아니다. 오히려 AI를 어떻게 활용하느냐가 모든 차이를 만들었다. 이번 글에서는 Claude Code, V0.dev, Cursor, Supabase MCP 등 다양한 AI 도구를 조합해 진행한 '바이브 코딩' 경험을 공유하려 한다.

Web 실행 화면

모바일 실행화면

 

프로젝트 개요 및 기술 선택

프로젝트의 목적은 명확했다. 요양보호사를 위한 업무 관리 애플리케이션(케어노트)을 AI 도구만으로 최대한 빠르게 구축해보는 것이다. 

기술 스택 선택에서는 실험보다 안정성을 우선했다. 회사에서 주로 사용하는 React/TypeScript/Vite를 그대로 유지하고, 상태 관리는 Zustand보다 더 익숙한 Redux Toolkit을 선택했다. 새로운 기술을 배우느라 시간을 소모하기보다는 AI 활용에 집중하고 싶었기 때문이다.

백엔드는 완전히 다른 이야기였다. 실제 백엔드 구축 경험이 없었기 때문에 AI의 도움을 최대한 활용할 수 있는 Supabase를 선택했다. 특히 MCP(Model Context Protocol)가 지원되어 Cursor와 Claude Code에서 자연어로 데이터베이스를 조작할 수 있다는 점이 결정적이었다.

 

사전 준비 : 가이드 문서 작성

간단하게 정의된 요구사항을 바탕으로 케어노트앱에 대한 이해를 하고, 본격적인 AI 사용을 위한 사전 작업을 시작했다.
우선 모든 AI에게 공통으로 사용할 개발 가이드 문서가 필요했다. 가이드 문서 역시 AI에게 작성을 요청했다.

1) 프론트엔드 구현 가이드
https://claude.ai/share/1e29ad20-56a5-4f21-a862-b9f3b7c75702

2) API 규격서
https://claude.ai/share/d7db6a64-7ea7-476c-a4bb-e07d4303960e

3) Redux Store 구조 설계
https://claude.ai/share/858dcd86-9694-4e24-9b43-31e23b4c0a22

 

도구별 역할 분담과 워크플로우

AI 툴은 도구별로 역할을 분담하여 4가지를 골고루 사용해보기로 했다.

V0.dev	UI 디자인 및 초기 컴포넌트 생성
Claude.ai	아키텍처 설계, 문서 작성, 코드 변환
Claude Code	CLI 환경 개발, 패키지 관리, 전체 코드 베이스 분석, 백엔드 개발(Supabase MCP)
Cursor	실시간 코딩, 백엔드 개발(Supabase MCP)

개발 워크플로우는 다음 7단계로 설계했다

요구사항 분석 → 구현 가이드 생성 → UI 구현 → 상태 관리 구조 설계 → 데이터베이스 설계 → API 연결 → 테스트 및 기능 점검

여기서 중요한 것은 각 단계를 명확히 구분한 것이다. AI에게 한 번에 모든 정보를 주거나 체계 없이 개발을 요청하면 맥락을 잃고 일관성 없는 결과를 얻게 된다. 대신 단계별로 나누어 진행하면서 각 AI 도구가 이전 단계의 결과물을 참고할 수 있도록 했다.

 

UI 디자인 및 제작

UI 제작 도구 선택에서는 여러 옵션을 검토했다. Google의 Stitch, Figma MCP, Claude의 아티팩트 등을 고려했지만, Vercel의 V0가 가장 우수한 품질을 보여줬다.

다만 한 가지 제약이 있었다. V0에서 실시간 미리보기를 보려면 Next.js로 프로젝트를 생성해야 했다. 처음부터 순수 React/TypeScript로 작업하고 싶었지만, UI 확인을 위해 어쩔 수 없이 Next.js로 먼저 제작한 후 나중에 변환하는 방식을 택했다.

https://v0.dev/chat/image-analysis-ui7mAK2CnXa

Image Analysis – v0 by Vercel

 

제작한 소스코드를 Claude와 Cursor를 통해서 다시 Vite로 빌드하는 과정을 진행했다. 
케어노트 프론트엔드 구현 가이드에서 프로젝트의 기본적인 디렉토리 구조와 컴포넌트 아키텍처가 명시되어있었기 때문에 V0에서 다운받은 소스코드를 모두 첨부하고 변환을 요청하니 금방 변환할 수 있었다.

Vite로 빌드하기 위한 변환 작업 : https://claude.ai/share/41fbdf0d-2b15-44df-acee-c83d9394dc50
디렉토리 구조에 맞게 소스코드 분리 : https://claude.ai/share/3bcb98fc-ba62-42fd-8a3b-695eafca682c

 

AI 활용 팁

1. 역할 기반 AI 전략

이번 바이브 코딩에서 가장 중요한 발견은 AI에게 명확한 역할을 부여했을 때의 효과였다. 

단순히 "코드를 만들어줘"라고 요청하는 것과 "프론트엔드 개발자로서 React 컴포넌트를 작성해줘"라고 요청하는 것 사이에는 결과물 품질에서 현저한 차이가 있었다. 특히 PM과 개발자의 관계로 설정하여 소통할 때, AI는 더욱 전문적이고 체계적인 접근을 보여주었다.

결국 내가 PM 역할을 맡아 AI 개발자의 작업을 관리하는 구조가 가장 효과적이었다. 이때 중요한 것은 문제를 작은 단위로 쪼개고, 반복적인 대화를 통해 방향을 조정해나가는 능력이다.

사용 프롬프트 :

[백엔드개발자/프론트엔드개발자/QA엔지니어 중 하나]로서 위 프로젝트에 참여하여, 사용자가 프롬프트를 통해 당신의 역할을 부여합니다. PM(사용자)이 제공하는 문서를 바탕으로 담당 영역의 구현을 책임집니다. 항상 코드를 작성하기 전에는 자신의 역할에 알맞은 개발 표준 가이드를 반드시 확인해야 합니다. 제공하는 코드는 모두 개발 표준 가이드를 근거로 작성되어져야 하며 각 역할에 맞게 문서를 검토하고 이해해야합니다. 개발 표준 가이드에 나와있지 않은 내용은 임의로 작성해서는 안되며 필요하거나 모순적인 내용이 있을 경우에는 해당 내용에 대한 검토를 PM(인간)에게 요청하십시오. 소스 코드 작성 시 파일 위치와 파일명을 정확하게 명시해야 하며 소스 코드 작업 후 진행 상황을 사용자와 공유하십시오

 

- 프론트 엔드 개발자의 시선으로 답변을 제공하는 모습

 

- 사용자(PM)와 상호작용을 통해서 작업 방향을 결정하는 모습

 

2. 가이드 문서 제공의 중요성

구조적인 가이드 문서의 중요성도 다시 한번 확인할 수 있었다. 

API 규격서, 프론트엔드 구현 가이드, Redux Store 구조 설계 문서 등 표준화된 가이드라인을 제공했을 때 AI의 코드 생성 정확도가 현저히 향상되었다. 반대로 이런 문서 없이 동일한 질문을 반복하면 매번 다른 형식의 코드가 생성되어 프로젝트 일관성이 깨지는 문제가 발생했다.

마치 신입 개발자에게 코딩 컨벤션을 알려주는 것처럼, AI에게도 명확한 가이드라인을 제시하는 것이 필수였다.

- 아래와 같이 Claude 웹 브라우저에서는 프로젝트 지식을 통해 대화에 필요한 문서를 제공할 수 있음

 

- 소스 코드 작성 시 스스로 개발 표준 가이드를 참고 하는 것을 확인할 수 있음

 

3. 아키텍처 설계 우선 접근법

AI와 협업할 때는 낮은 결합도의 아키텍처 설계가 특히 중요하다는 것을 깨달았다. AI는 전체 시스템을 한 번에 이해하기보다는 독립적인 모듈 단위로 작업할 때 훨씬 높은 정확도를 보여준다. 거대하고 모호한 기능을 통째로 요청하는 것보다, 세분화된 독립적인 작업으로 나누어 요청했을 때 각 모듈의 품질이 현저히 향상되었다. 예를 들어 상태 관리가 필요할 때는 먼저 Redux Store의 전체 구조를 설계하도록 요청한 후, 각 슬라이스를 개별적으로 구현하는 방식을 택했다. 이렇게 하면 프롬프트 체이닝을 통해 AI가 일관된 구조를 유지하면서 작업할 수 있다.

 

4. UI-First 개발

UI-First 개발 접근법도 효과적이었다. AI는 기존 소스코드를 먼저 분석한 후 답변을 생성하기 때문에, 추상적인 기능 명세보다는 실제 렌더링되는 UI 컴포넌트를 먼저 제공하는 것이 좋다. 더미 데이터라도 화면에 표시되고 있으면, AI가 UI를 보고 추가적인 기능 아이디어를 제안하기도 한다. 기능 명세가 모호할 때도 구체적인 UI가 있으면 AI가 맥락을 더 잘 이해하고 적절한 구현 방향을 제시할 수 있었다.

 

5. MCP(Model Context Protocol) 활용 극대화

MCP를 활용한 Supabase 연동은 이번 프로젝트의 가장 인상적인 성과였다.

Supabase를 처음 사용함에도 불구하고, 자연어 프롬프트만으로 17개의 복잡한 테이블을 생성하고 완전한 CRUD 기능을 구현할 수 있었다. MCP의 가장 큰 장점은 특정 플랫폼의 세부 문법을 몰라도 비즈니스 로직에만 집중할 수 있다는 점이다.

다만 주의할 점도 있었다. 데이터베이스 설계 시에는 정확하고 상세한 구조 가이드를 제공해야 한다. 모호하게 테이블 생성을 요청했을 때 AI가 임의로 스키마를 설정하거나 데이터 무결성을 해치는 관계를 만드는 경우가 있었기 때문이다.

 

개발 결과와 성과 분석

정량적 성과

앞서 정리한 5가지 바이브 코딩 전략을 적용한 결과, 예상보다 훨씬 빠른 속도로 개발이 진행되었다.

개발 기간: 총 5일 (약 25시간) 구현 범위: 17개 테이블 기반 CRUD 시스템, Redux Toolkit 상태 관리, 완전한 UI/UX

특히 인상적이었던 점은 백엔드 코드를 거의 직접 작성하지 않고도 모든 기본 기능을 구현할 수 있었다는 것이다. Cursor의 경우 약 100회의 AI 지원을 받았는데, 실제 코드를 작성한지 하루만에 전체 기능의 60% 이상을 완성할 수 있었다.

 

Claude Code와 Cursor를 직접 비교해볼 기회가 있었는데, 개인적으로는 Claude Code의 코딩 경험이 더 우수하다고 느꼈다. Claude Code가 Pro 모델 무료 지원 이전이라 개인적으로 API 비용을 지불하며 사용했지만, 그만한 가치가 있었다고 생각한다.

Claude Code의 장점은 전체 프로젝트 맥락을 더 잘 이해하고, 코드베이스 전반에 걸친 일관성을 유지하면서 작업한다는 점이었다. 특히 RTK Slice 구조 생성이나 Supabase API 연결 같은 복잡한 작업도 자연스럽게 위임할 수 있었다.

RTK 도입 및 Slice 구조 생성 작업 모두 위임 결과

Supabase API 연결 구현 및 일부 데이터 삽입 작업 위임 결과

 

현실적인 한계와 가능성

솔직히 말하면, 현재 상태로는 프로덕션 환경에 바로 적용하기 어렵다. AI가 생성한 코드에는 여전히 보안 검토, 성능 최적화, 엣지 케이스 처리 등이 필요하기 때문이다.

하지만 이번 경험을 통해 확신한 것이 있다. 문제를 충분히 작은 단위로 분해하고, 각 모듈을 독립적으로 설계한다면 AI의 코드 생성 능력만으로도 상당한 수준의 애플리케이션을 구축할 수 있다는 점이다.

개발자 역할의 변화

결국 중요한 것은 코드를 직접 타이핑하는 능력이 아니라, AI와 효과적으로 소통하며 문제 해결 방향을 제시하는 능력인 것 같다. 마치 시니어 개발자가 주니어 개발자에게 업무를 할당하고 코드 리뷰를 하는 것처럼, AI와의 협업도 비슷한 패턴을 보인다.

어떤 기능을 어떤 구조로 구현할지, 어떤 기술적 트레이드오프를 선택할지에 대한 의사결정이 더욱 중요해졌다. AI는 실행을 담당하고, 개발자는 설계와 방향성을 담당하는 역할 분담이 자연스럽게 형성되고 있다.

최종 성과

이번 바이브 코딩을 통해 구조화된 접근법의 위력을 확인할 수 있었다. 특히 MCP를 활용한 백엔드 개발은 진입 장벽을 대폭 낮춰주었고, 전체적으로 기존 개발 방식 대비 3-4배의 생산성 향상을 체감할 수 있었다.

물론 이 글에서 소개한 5가지 전략이 완벽한 정답은 아닐 것이다. AI 도구들이 빠르게 발전하고 있는 만큼, 더 효과적인 협업 방법들이 계속 등장할 것으로 예상한다.

혹시 더 좋은 바이브 코딩 노하우가 있다면 댓글로 공유해주시면 감사하겠습니다.