브라우저에서 돌아가는 WipEout 스타일 아케이드 레이싱 게임을 '바이브 코딩'으로 만들었습니다 — Three.js, 엔진 없음, 빌드 단계 없음, 절차적 오디오. 사용한 스택과 결과물 공유합니다.
Vibe-coded a full WipEout-style arcade racer that runs in the browser — Three.js, no engine, no build step, procedural audio. Here's the stack + what came out of it.
핵심 요약
Claude Code를 활용해 빌드 단계 없이 Three.js만으로 완성한 웹 기반 아케이드 레이싱 게임 'Slipstream Vector' 개발기입니다.
- 기술 스택 — Three.js와 순수 ES 모듈을 사용해 빌드 과정 없이 정적 파일로 구현함
- 절차적 오디오 — WebAudio를 활용해 엔진음과 무기 효과음 등을 실시간으로 합성함
- 게임 특징 — 6개 트랙과 8개 AI 필드, 개성 있는 라이벌 캐릭터와 무기 시스템을 갖춤
- 오픈 소스 — 빌드 과정이 없어 깃허브 레포지토리의 소스 코드가 실제 구동 코드와 동일함
Slipstream Vector를 거의 전적으로 Claude Code를 이용한 '바이브 코딩'으로 만들고 있는데, 생각보다 훨씬 큰 게임으로 성장했어. 그래서 이 커뮤니티 사람들도 어떻게 만들었는지, 그리고 결과물이 어떤지 궁금해할 것 같아서 공유해.
스택 (일부러 아주 단순하게 구성함):
- CDN을 통한 Three.js, 순수 ES 모듈, 빌드 단계 없음, 게임 엔진 없음. 그냥 정적 파일이야 — 수정하고, 새로고침하면 끝. GitHub Pages에 배포함.
- 모든 효과음은 절차적 생성 (WebAudio에서 합성 — 오디오 파일 제로): 엔진음, 무기 타격음, 마비될 때 나는 윙윙거리는 소리 등.
- '스플라인 공간(spline space)'에서의 커스텀 아케이드 물리 — 우주선은 트랙을 따라가는 거리 + 측면 오프셋으로만 계산돼. 충돌체도 없고 물리 엔진도 없음.
- 적절한 곳에 AI 보조 에셋 사용: 파일럿 얼굴 아트(표정 변형) 생성, 음악은 Suno 사용, 나머지는 전부 직접 큐레이팅함.
결과물: 네온 느낌의 WipEout × Horizon Chase 레이서 — 3개 월드에 걸친 6개 트랙(루프와 코크스크류 포함), 러버밴딩(고무줄 현상) 없는 8개 AI 필드, 속도 등급, 챔피언십/타임 트라이얼 + 고스트, 게임패드 지원, 약 30개의 트로피.
그리고 내가 가장 만족하는 부분: 완벽한 무기 시스템 + 쓰레기 같은 말을 내뱉는 라이벌들. AI가 당신을 치거나 추월하면, 구석에 있는 통신 피드에 각자의 표정(좋아하거나 분노하는)과 캐릭터 음성 대사가 팝업으로 떠. 8명의 파일럿이 각각 고유한 얼굴과 말투를 가지고 있지. 그게 이 게임의 전체적인 개성인데, 이런 방식으로 아주 빠르게 구현할 수 있었어.
브라우저에서 플레이 가능 (데스크톱이나 아이패드), 첫 레이스까지 약 30초 소요: https://martingrahn-cmd.github.io/slipstream-vector/
바이브 코딩 워크플로우나 물리/절차적 오디오가 어떻게 작동하는지 궁금한 점 있으면 뭐든 물어봐. 🏁
