HTML5 게임 프레임워크 Phaser, 제작자가 알아야 할 모든 것

웹 브라우저에서 돌아가는 2D 게임을 만들고 싶은데, 어떤 도구로 시작해야 할지 고민인 제작자가 있을 것입니다. Phaser는 이런 사람들을 위한 선택지 중 하나로, 10년 넘게 개발되어 온 무료 오픈소스 HTML5 게임 프레임워크입니다. WebGL과 Canvas 렌더링을 지원하며 데스크톱과 모바일 웹 브라우저 모두에서 동작합니다. 깃허브에서 스타를 많이 받은 게임 프레임워크 중 하나로 꼽히는 만큼, 실무에서 검증된 생태계를 가진 도구를 찾는 제작자에게 적합합니다.

어떤 제작자에게 필요한가

Phaser는 JavaScript 또는 TypeScript로 코드를 작성해 게임을 만드는 방식입니다. 노코드 에디터를 찾는 사람이라면 맞지 않지만, 코드로 직접 게임 로직을 짜고 싶은 제작자에게는 적합한 선택지입니다. React, Vue를 포함해 40개 이상의 프런트엔드 프레임워크와 함께 쓸 수 있다는 점도 기존 웹 개발 경험이 있는 사람에게는 장점입니다. 또한 Discord, Snapchat, Facebook처럼 웹 게임을 구동할 수 있는 플랫폼을 타깃으로 하거나, 서드파티 도구를 거쳐 iOS, Android, Steam 등 네이티브 환경으로 확장하고 싶은 제작자도 고려해볼 만합니다.

실제로 무엇을 할 수 있나

Phaser는 철저히 2D 게임에 초점을 맞춘 프레임워크입니다. 내부 설계와 기능 전체가 빠른 2D 게임 제작을 기준으로 만들어졌고, 3D 렌더링이나 3D 물리 연산은 기본 기능으로 포함되어 있지 않습니다. 서드파티 라이브러리를 연동해 3D 요소를 추가하는 방법은 있지만, Phaser 자체와 공식 문서·예제는 모두 2D를 전제로 합니다. 게임은 기본적으로 웹용으로 만들어지며, YouTube Playables, Discord Activities, Twitch 오버레이 같은 형태로도 제작할 수 있고, 서드파티 도구를 이용하면 iOS, Android, Steam, 네이티브 앱으로도 컴파일할 수 있습니다. 다만 Phaser의 핵심 지향점은 언제나 웹이라는 점을 분명히 밝히고 있습니다.

사용 방법

Phaser는 설치해서 실행하는 데스크톱 프로그램이 아니라, 자신의 웹 페이지나 번들에 포함시켜 쓰는 JavaScript 라이브러리입니다. 다운로드하거나, CDN에서 불러오거나, npm 같은 표준 JavaScript 패키지 매니저로 설치해 사용할 수 있습니다. 게임 코드를 JavaScript로 작성한 뒤 Phaser와 함께 웹 브라우저에서 실행하는 구조입니다.

개발을 시작하려면 로컬 웹 서버가 필요합니다. 단순히 HTML 파일을 브라우저로 드래그해서 열면 안 되는데, 이 경우 파일이 file:// 경로로 열리면서 브라우저가 보안을 이유로 접근을 크게 제한하기 때문입니다. 반면 http:// 프로토콜로 서버를 통해 파일을 제공하면 이미지, 오디오, JSON 데이터, 추가 JavaScript 파일 같은 리소스를 게임이 정상적으로 불러올 수 있습니다. 공식 문서는 운영체제별로 몇 가지 로컬 서버 설치 방법을 소개합니다.

• Windows: WAMP.Net 같은 번들 설치형 도구나, 설치 없이 실행 파일 하나로 동작하는 Mongoose 웹 서버, 또는 Microsoft IIS·Apache를 별도로 설치하는 방법
• macOS: MAMP 같은 올인원 도구, 또는 수동 설정 가이드를 참고하는 방법
• Python: 별도 설치 없이 Python에 내장된 간단한 HTTP 서버 활용
• Node.js: http-server라는 간단한 명령줄 기반 HTTP 서버 활용
• PHP: PHP 5.4.0 이상의 CLI SAPI에 내장된 웹 서버 활용

어떤 방법을 고르든 핵심은 로컬에서 파일을 http로 제공할 수 있는 환경을 갖추는 것입니다.

한계와 주의할 점

Phaser가 모든 게임 제작 상황에 맞는 것은 아닙니다. 공식 문서는 다음과 같은 경우 다른 도구를 찾는 편이 낫다고 안내합니다.

• 게임을 완전히 3D로 만들고 싶은 경우
• PS5, Xbox, Nintendo Switch 같은 최신 콘솔에 게임을 출시하려는 경우
• JavaScript를 배우고 싶지 않고 노코드 에디터가 필요한 경우

이런 조건에 해당한다면 Phaser 대신 다른 프레임워크나 도구를 검토하는 것이 맞습니다. 반대로 웹용 2D 게임을 만들려는 목적이라면 공식 문서는 Phaser를 좋은 선택지로 제시하고 있습니다.

다음에 볼 것

이번 글에서는 Phaser가 어떤 프레임워크이고 누구에게 맞는지, 그리고 개발을 시작하기 위한 로컬 웹 서버 설정의 필요성과 몇 가지 방법을 살펴봤습니다. 다음 단계로는 실제로 IDE를 고르고 최신 버전의 Phaser를 받아 개발 환경이 정상적으로 작동하는지 확인하는 과정, 그리고 Phaser 3로 첫 프로젝트를 시작하는 튜토리얼을 이어서 확인하면 좋습니다.

이 글은 공식 문서를 한국어로 정리한 것이며 세부 내용은 원문을 기준으로 해 주세요.