55,000줄짜리 브라우저 던전 크롤러를 '바이브 코딩'으로 만들었습니다 — 제작기 공유
I vibe-coded a 55K line browser-based dungeon crawler — here's how I built it
핵심 요약
AI 도구들을 활용해 55,000줄 규모의 브라우저 게임을 성공적으로 개발한 제작기.
- 기술 스택 — Cursor, Claude, Lovable Pro를 조합해 프론트엔드부터 결제 시스템까지 구축함.
- 개발 프로세스 — 55,000줄의 바닐라 자바스크립트 엔진을 AI 프롬프팅으로 직접 구현함.
- AI의 한계 — 복잡한 아키텍처 설계는 여전히 인간의 이해와 관리가 필수적임을 확인함.
- 운영 노하우 — AI 컨텍스트 유지를 위해 상세한 개발 노트를 별도로 관리하며 작업함.
여러분, 1990년대 Amiga/Atari 고전 게임에서 영감을 받은 1인칭 SF 던전 크롤러 'Captive 3000'을 출시했습니다. 브라우저에서 바로 플레이 가능합니다(Captive3000.com).
바이브 코딩 도구를 사용해 만든 방법은 다음과 같습니다.
기술 스택:
- Lovable Pro — 프롬프팅만으로 구축한 프론트엔드 사이트(captive3000.com)와 Supabase 백엔드 연결
- Cursor AI with Claude Opus — 게임 엔진(game.js)은 55,000줄의 바닐라 자바스크립트로 구성. 기능 개발, 디버깅, 아키텍처 결정 전반에 Cursor 활용
- Claude — 스토리 작성, 레벨 디자인 전략, 마케팅 문구, 아키텍처 검토
- Supabase — PostgreSQL 데이터베이스, 엣지 함수, JWT 인증
- Vercel — 서버리스 API 백엔드 및 게임 호스팅
- Stripe — AI 프롬프팅으로만 구축한 레벨 잠금 해제 결제 시스템
개발 과정:
게임 엔진(의존성 제로, 게임 프레임워크 없음)이 가장 어려웠습니다. Opus를 탑재한 Cursor가 대부분의 핵심 작업을 처리했습니다. 레이어드 DOM 요소를 사용한 1인칭 렌더링, Safari/Firefox/Chrome용 브라우저 최적화, iOS Safari용 4계층 인증 지속성 시스템 등을 구현했습니다.
마케팅 사이트, 결제 흐름, DNS 설정, Stripe 웹훅 통합, Supabase 스키마 변경은 모두 Lovable 프롬프트와 Claude 대화를 통해 완료했습니다. Stripe 경험이 전혀 없었지만, AI 도움으로 결제 시스템 전체를 구축했습니다.
놀라웠던 점:
AI는 분야에 따라 성능 차이가 있었습니다. 복잡한 아키텍처 결정과 디버깅은 세심한 상호작용이 필요했습니다. 하지만 CORS 설정, JWT 인증, 웹훅 핸들러, 데이터베이스 마이그레이션 같은 상용구 인프라는 거의 전적으로 AI가 생성했고 한두 번 만에 작동했습니다.
가장 큰 교훈: 대규모 프로젝트를 바이브 코딩할 때는 모든 줄을 직접 쓰지 않더라도 아키텍처를 이해하고 있어야 합니다. 55,000줄짜리 파일의 38,000번째 줄에서 문제가 생기면, 어디를 봐야 할지 알아야 하니까요.
게임 정보: 13개 레벨, 22종의 적, 벽 속에 숨겨진 스토리 챕터. 1~4레벨은 에서 무료로 플레이 가능합니다.
