Claude AI를 사용해 Vibe 코딩한 풍선 터뜨리기 게임 🎈

Source: Dev.to

내가 만든 것 🎮

브라우저에서 완전히 플레이할 수 있는 풍선 터뜨리기 아케이드 게임 — Claude AI(바이브 코딩)로 전부 제작했습니다. React도, 라이브러리도, 빌드 도구도 없습니다. index.html 파일 하나만 있으면 됩니다.

• 실제 플레이 →
• 코드 보기 →

바이브 코딩이란?

바이브 코딩 = 원하는 것을 AI에게 설명하고, AI가 만들고, 반복하고, 배포한다.

1. 아이디어를 설명한다
2. AI가 구현한다
3. 테스트·수정·배포

전체 과정을 Claude AI로 진행했으며, 솔직히 아주 좋은 경험이었습니다.

게임에 들어있는 내용

• 🎯 포인트가 다른 3가지 풍선 크기
• 💥 콤보 배수 시스템
• ⚡ 8가지 파워‑업 — 연속 사격, 방패, 삼중 사격, 동결, 추가 생명, 폭탄, 듀플 스코어, 레이저
• 🎆 풍선이 터질 때마다 파티클 폭발 효과
• 🌠 유성 꼬리가 있는 애니메이션 별 배경
• 📱 모바일 터치 지원
• 💾 로컬에 저장되는 최고 점수
• 🔊 사운드 효과 — 모두 브라우저 내에서 합성, 오디오 파일 전혀 없음
• 3가지 난이도 — Easy, Medium, Hard

제작 과정

솔직히? Claude AI에게 내가 원하는 것을 설명하고 반복했을 뿐입니다.

“단일 HTML 파일, 세로 캔버스, 하단에 총을 두고, 위에서 풍선이 떨어지는, 콤보 시스템과 파워‑업이 있는 풍선 사격 게임을 만들어 주세요.”

그 뒤엔 다음만 했습니다:

• 작동하는 부분 테스트
• 수정·추가 사항 설명
• 드래그‑앤‑드롭으로 Netlify에 배포

아이디어부터 실시간 URL까지 걸린 시간 — 몇 시간 정도.

로컬에서 실행하기

git clone https://github.com/S-SUJAN-S/balloon-blaster.git
cd balloon-blaster
# 브라우저에서 index.html을 열면 됩니다

npm install 필요 없음. 설정도 필요 없습니다. 열고 바로 플레이하세요.

30초 만에 배포하기

1. netlify.com 로 이동
2. index.html 파일을 드롭 영역에 끌어다 놓기
3. 완료 — 즉시 실시간 URL 생성

배운 점

바이브 코딩은 실제 워크플로우입니다. 재미있고 작동하는 무언가를 만들기 위해 모든 코드를 이해할 필요는 없습니다. 중요한 것은 무엇을 만들고 싶은지를 충분히 명확히 설명하는 것이며, AI가 어떻게 구현할지는 맡기면 됩니다.

바이브 코딩 과정에 대한 자세한 walkthrough가 보고 싶다면 댓글을 남겨 주세요 — BlinkNBuild 채널에 전체 영상을 만들겠습니다!

• 🎮 플레이 →
• 💻 코드 보기 →
• 📺 시청 →

Claude AI ⚡ 로 제작 | BlinkNBuild