Kaboom.js로 웹 플래시 게임 만들기 & Netlify 배포 후기

Kaboom.js로 웹 플래시 게임 만들기 & Netlify 배포 후기

2025년, 추억의 플래시 게임 감성으로 Kaboom.js를 활용해 웹게임을 개발하고, 무료 호스팅 서비스 Netlify를 통해 실제로 배포하는 과정까지 직접 도전해봤어요!
정말 많은 시행착오 끝에, 완성된 내 게임을 블로그에서도 바로 플레이할 수 있도록 iframe으로 삽입했습니다.

⬆️ 직접 만든 플래시 게임을 바로 플레이 해보세요! Space bar : 총 발사

개발 환경 & 사용 스택

• 프레임워크: Kaboom.js (HTML5 Canvas 기반 게임 엔진)
• 빌드툴: Vite
• 호스팅: Netlify
• 언어: JavaScript
• 이미지 리소스: public/sprites/ 폴더 내 png 파일

프로젝트 시작부터 배포까지 (실전 과정)

1. 프로젝트 생성
   • Vite로 기본 프로젝트 셋업 (npm create vite@latest)
   • 필수 라이브러리 설치: npm install kaboom
2. Kaboom.js로 게임 개발
   • 모듈 기반 import kaboom from "kaboom"
   • 게임 씬, 스프라이트(이미지), 충돌, 점수 등 코어 기능 구현
   • 이미지는 public/sprites/ 경로 사용 (플레이어, 적, 총알 등)
   • 예시 코드

     
     import kaboom from "kaboom";
     kaboom({ width: 400, height: 600, background: [0,0,0] });
     loadSprite("player", "./sprites/player.png");
     scene("main", () => {
       add([
         sprite("player"),
         pos(200, 500),
         area(),
       ]);
       // ...추가 게임 로직
     });
     go("main");
             

3. Vite 빌드 & 배포용 파일 준비
   • vite.config.mjs에서 base: "./"로 설정
   • npm run build로 dist/ 폴더 생성
   • 배포용 폴더 구조 점검: index.html, assets/, sprites/ 등 포함
4. Netlify 무료 호스팅으로 배포
   • Netlify Deploys 메뉴에서 dist 폴더 안의 파일들만 드래그&드롭
   • SPA(Single Page App) 404 방지: _redirects 파일 추가 (/* /index.html 200)
   • 배포된 주소 확인 & 테스트

트러블슈팅: 빌드와 dev에서 동작이 달랐던 이유!

• dev에서는 잘 되지만, build(배포)에서는 "Co is not defined" 에러 발생!
• 이는 kaboom.js의 전역 변수(Co, co 등) 의존성과 Vite 번들 구조가 충돌해서 생기는 문제
• 해결 방법:
  • 2025년 8월 기준, kaboom 최신 버전 사용 시에도 (void 0||(Co={})) 부분을 빌드된 JS에서 완전히 제거하면 더 이상 Co 전역 변수 오류가 발생하지 않는다!
  • 과거에는 window.Co = Co;, window.co = co; 등 강제 전역 등록이 필요했으나, 최신 빌드에서는 아예 해당 패턴 자체를 JS 번들에서 삭제하는 것이 완벽한 해결책!
• 이미지 경로도 dev와 build에서 경로가 달라질 수 있으니, 항상 ./sprites/파일명.png처럼 상대경로로 사용!

개발 후기 & 팁

• Kaboom.js는 빠르게 게임 프로토타입을 만들기에 정말 훌륭하지만, 최신 번들러(Vite 등)와의 궁합에서는 글로벌 변수 이슈를 주의!
• Netlify는 무료, 빠른 배포, SPA 지원 등 엄청난 장점! 단, _redirects 파일 추가 꼭 필요!
• dev에서 잘 되는데 배포에서 에러가 나면, 콘솔 에러 메시지부터 확인해서 글로벌 변수, 경로, 빌드 설정 등을 꼼꼼히 점검!

마치며

정말 삽질과 디버깅의 연속이었지만, 마지막엔 프론트엔드 개발자의 실전 실력이 레벨업된 걸 확실히 느꼈어요.
아래 iframe으로 내 게임을 직접 플레이해보고, 관심 있으신 분들은 Kaboom.js & Netlify로 나만의 웹게임에 도전해보세요!