브라우저에서 실행되는 3D 매치 3 로그라이크 게임을 '바이브 코딩'으로 제작함
vibe coded a 3d mesh up of match 3 gem game and roguelike that runs in the browser
핵심 요약
AI를 활용한 '바이브 코딩'으로 브라우저 기반의 3D 매치 3 로그라이크 게임을 개발한 사례.
- 바이브 코딩 활용 — AI와 협업하여 게임 기획부터 에셋 생성, 사운드 합성까지 전 과정을 구현함
- 기술 스택 — React Three Fiber를 사용해 브라우저에서 3D 효과와 애니메이션을 구현함
- 절차적 사운드 — Web Audio API를 통해 게임 진행 상황에 맞춘 배경음악과 효과음을 실시간으로 생성함
- 개발 경험 — AI와의 반복적인 상호작용을 통해 게임 밸런스를 조정하고 최적화하는 과정을 거침
저는 바이브 코딩으로 매치-3 로그라이크 게임을 만들었습니다. 층을 올라가고, 매치-3 보석으로 적과 싸우고, 주문 카드와 유물을 수집하며 죽지 않으려고 노력하는 게임입니다. 3D 효과, 애니메이션, 풍부한 에셋을 포함해 브라우저에서 완전히 실행됩니다.
제가 효과적이라고 느낀 점:
기획을 통한 게임 디자인. 저는 '매치-3이지만 로그라이크'라는 아이디어로 시작했고 AI 기획을 통해 반복적으로 발전시켰습니다. 협업하는 느낌이었어요 - AI가 꽤 흥미로운 아이디어를 내놓기도 했지만, 가끔은 정말 끔찍하고 균형 잡히지 않은 결정을 내리기도 했습니다. 그래서 메커니즘을 구현하기 전에 문서로 대화하는 것이 항상 유용합니다. 또한 몇 번 플레이해보고 너무 쉽거나 어려워지는 부분에 대해 피드백을 주면 AI가 게임 플레이를 개선할 방법을 생각하도록 도왔습니다.
모델은 적절한 맥락이 주어지면 정말 훌륭한 에셋을 생성할 수 있습니다. 모든 적 초상화, 보석 아이콘, 유물 이미지, 클래스 아바타, 배경 텍스처는 AI로 생성되었습니다. 하지만 처음부터 분위기와 설정을 명확히 하는 것이 일관성을 유지하는 데 유용했습니다.
모델은 이제 3D 효과에 정말 능숙합니다 - 3D 효과(보석 광채, 파편 폭발, 충격파, 피해 투사체)는 모두 브라우저에서 실행되는 React Three Fiber입니다. 마지막에 최적화를 좀 해야 했는데, 폰이 뜨거워졌거든요.
또한 AI가 코딩만으로 음악을 만들 수 있다는 것도 알게 되었습니다! 배경 음악과 모든 효과음은 Web Audio API를 사용하여 런타임에 합성됩니다. 게임 진행 상황에 따라 다른 테마를 연주하기도 합니다. Suno에서 얻을 수 있는 것처럼 아주 세련된 음악은 아니지만, 약간 레트로한 느낌의 게임에는 아주 좋습니다.
여기서 플레이할 수 있습니다: https://gems.floot.app/



