월드컵 탈락 감독의 공항 대탈출? Phaser 3와 AI 에셋으로 만든 브라우저 러닝 게임
핵심 요약
월드컵 본선 진출에 실패한 축구감독이 되어 성난 군중과 취재진을 피해 도망치는 러닝 액션 게임이 GeekNews에 공개되었습니다. HTML5 기반 2D 게임 프레임워크 Phaser 3로 제작되었고, 게임 에셋은 AI 기반 스프라이트 생성 워크플로인 agent-sprite-forge로 만들어졌다는 점이 흥미롭습니다. 별도 설치 없이 브라우저에서 바로 플레이할 수 있습니다.
👉 플레이하기: coachrun.pages.dev
어떤 게임인가요?
설정부터 웃음을 자아냅니다. 월드컵 본선 진출에 실패한 축구감독이 되어, 분노한 팬들과 끈질긴 취재진을 피해 공항을 질주하는 러닝 액션 게임입니다. 실제 축구 팬이라면 누구나 한 번쯤 상상해봤을 법한 상황을 게임으로 풀어낸 유쾌한 아이디어죠.
기술 스택: Phaser 3
이 게임은 Phaser 3로 개발되었습니다. Phaser는 HTML5 캔버스와 WebGL을 기반으로 하는 2D 게임 프레임워크로, 브라우저 게임을 만들 때 가장 널리 쓰이는 도구 중 하나입니다.
개발자는 게임을 다음과 같이 구성했다고 밝혔습니다.
- 씬(Scene) 단위 구조: 타이틀 → 달리기 → 기자회견 → 엔딩을 각각 독립된 씬으로 분리
- 씬 별로 장면 전환, 스프라이트 애니메이션, 사용자 입력을 처리
이런 씬 기반 아키텍처는 Phaser의 대표적인 설계 패턴으로, 게임 상태 관리를 깔끔하게 유지하는 데 큰 도움이 됩니다. 브라우저 게임 개발에 입문하려는 분들에게 좋은 참고 사례가 될 것 같네요.
눈여겨볼 포인트: AI로 만든 게임 에셋
개인적으로 가장 흥미로운 부분은 에셋 제작 방식입니다. 개발자는 agent-sprite-forge라는 도구를 사용했는데요, 이는 Codex용 스킬로 다음과 같은 워크플로를 자동화합니다.
- 자연어로 원하는 스프라이트를 지시하면 Codex가 스프라이트 시트를 계획
- 내장 이미지 생성 기능으로 raw 시트를 생성
- 함께 제공되는 로컬 스크립트가 배경 제거 → 프레임 분할 → 정렬까지 자동 처리
레퍼런스 이미지를 참조해 전체 에셋의 스타일을 통일할 수 있었다는 점도 실제 게임 개발에서 중요한 포인트입니다. 게임 개발에서 아트 에셋은 늘 큰 진입 장벽이었는데, AI 에이전트 기반 워크플로가 1인 개발자의 생산성을 어떻게 바꾸고 있는지 보여주는 좋은 예시입니다.
마치며
재미있는 아이디어, 검증된 프레임워크(Phaser 3), 그리고 AI 에셋 파이프라인의 조합으로 완성된 1인 개발 프로젝트입니다. 브라우저 게임 개발이나 AI 기반 에셋 제작에 관심이 있다면 직접 플레이해보고 워크플로를 참고해보시길 추천합니다.