Phaser와 웹 게임 개발의 큰 그림

2026-07-09Views 56약 7분생성형 AI 활용

Summary

Phaser는 무엇을 쉽게 해 주는가

Phaser는 브라우저에서 실행되는 2D 게임을 만들기 위한 자바스크립트 기반 게임 프레임워크다. 공식 사이트에서도 Phaser를 웹용 2D HTML5 게임 프레임워크로 소개하며, 데스크톱과 모바일 브라우저를 주요 실행 환경으로 본다.¹

여기서 중요한 말은 "브라우저에서 실행된다"는 점이다. Phaser 게임은 특별한 게임 콘솔이나 전용 프로그램 안에서만 움직이지 않는다. 사용자가 웹페이지에 접속하면 HTML 문서가 열리고, 자바스크립트가 실행되며, 화면에는 게임 장면이 그려진다. 즉 Phaser 게임은 기본적으로 웹 애플리케이션이다. 다만 버튼과 문서가 중심인 일반 웹사이트와 달리, 이미지가 계속 움직이고, 입력을 받고, 충돌을 계산하고, 점수와 상태를 바꾸는 웹 애플리케이션이다.

Phaser가 해 주는 일은 "게임에 자주 필요한 반복 작업을 미리 준비해 주는 것"이다. 이미지를 화면에 올리는 일, 키보드와 터치를 처리하는 일, 캐릭터를 움직이는 일, 충돌을 계산하는 일, 장면을 전환하는 일, 사운드를 재생하는 일은 대부분의 2D 게임에서 반복된다. Phaser는 이런 기능을 하나의 구조 안에 묶어 제공한다. 그래서 우리는 브라우저의 낮은 수준 API를 매번 직접 다루는 대신, 게임 규칙과 화면 구성에 더 집중할 수 있다.

Phaser와 웹 게임 개발의 큰 그림 AI 생성 이미지

브라우저 안에서 게임이 움직이는 흐름

Phaser 게임의 실행 흐름은 크게 네 단계로 볼 수 있다.

브라우저가 HTML 파일을 연다.
HTML 파일이 Phaser와 게임 코드를 불러온다.
Phaser가 게임 화면을 만들고 장면을 실행한다.
매 프레임마다 입력, 상태 변경, 화면 그리기가 반복된다.

아주 작은 Phaser 설정은 다음처럼 생겼다.

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 450,
  scene: {
    preload,
    create,
    update
  }
};

new Phaser.Game(config);

지금은 코드를 모두 이해할 필요가 없다. 핵심은 new Phaser.Game(config)가 게임 전체를 시작하는 문장이라는 점이다. config에는 게임 화면의 크기, 어떤 방식으로 그릴지, 어떤 장면을 실행할지 같은 기본 설정이 들어간다.

그 안에서 preload, create, update는 Phaser 게임을 이해할 때 가장 자주 만나게 되는 흐름이다. preload에서는 이미지와 사운드 같은 에셋을 미리 불러온다. create에서는 캐릭터, 배경, 점수판처럼 처음 필요한 객체를 만든다. update에서는 매 프레임마다 움직임과 규칙을 갱신한다.

브라우저 게임은 영화처럼 정해진 장면을 재생하는 것이 아니다. 아주 짧은 시간 간격으로 "지금 키가 눌렸는가?", "플레이어가 어디에 있는가?", "적과 닿았는가?", "화면을 어떻게 다시 그릴 것인가?"를 계속 계산한다. 이 반복 흐름을 게임 루프라고 부른다. Phaser는 이 루프를 직접 만들지 않아도 되게 해 준다.

Canvas와 WebGL 위에 올라간 Phaser

브라우저가 그림을 그리는 대표적인 방법에는 HTML5 Canvas와 WebGL이 있다. Canvas는 2D 그림판에 가깝다. 자바스크립트가 선, 사각형, 이미지 등을 그리라고 명령하면 브라우저가 화면에 그린다. WebGL은 그래픽 카드의 힘을 더 적극적으로 사용하는 방식이다. 많은 스프라이트를 빠르게 그리거나, 빛나는 효과와 색상 변형 같은 시각 효과를 처리할 때 유리하다.

Phaser는 이 두 방식 위에서 동작한다. 하지만 초반부터 Canvas와 WebGL의 세부 동작을 깊게 알 필요는 없다. 보통은 설정에서 다음처럼 둔다.

type: Phaser.AUTO

이 설정은 Phaser가 실행 환경을 확인해 렌더러를 고르게 한다. WebGL을 사용할 수 있으면 WebGL 렌더러를 사용하고, 그렇지 않으면 Canvas 렌더러로 돌아간다.² 여기서 렌더러는 "화면을 실제로 그리는 담당자"라고 생각하면 된다. 우리는 this.add.image(...)처럼 Phaser의 API로 이미지를 추가하고, Phaser는 내부에서 Canvas 또는 WebGL을 사용해 화면에 그린다.

이 추상화가 Phaser의 큰 장점이다. 게임을 만들 때마다 "이미지를 어떻게 GPU에 올릴 것인가"부터 고민하지 않아도 된다. 대신 "플레이어가 점프하면 어떤 속도로 올라가야 하는가", "코인을 먹으면 점수가 얼마나 올라야 하는가" 같은 게임다운 문제에 집중할 수 있다.

엔진, 프레임워크, 라이브러리의 차이

게임 개발 도구를 설명할 때 엔진, 프레임워크, 라이브러리라는 말을 자주 쓴다. 엄밀한 경계가 항상 분명한 것은 아니지만, 처음에는 이렇게 이해하면 충분하다.

라이브러리는 필요한 기능을 가져다 쓰는 도구 모음이다. 예를 들어 수학 계산, 날짜 처리, 이미지 로딩 같은 특정 기능을 제공한다. 프로그램의 전체 구조는 개발자가 정한다.

프레임워크는 더 큰 틀을 제공한다. "이 위치에 코드를 넣으면 이 순서로 실행된다"는 흐름이 있다. Phaser의 Scene 구조가 여기에 가깝다. 우리는 preload, create, update 같은 정해진 자리에 코드를 넣고, Phaser는 그 흐름에 맞춰 게임을 실행한다.

게임 엔진은 보통 렌더링, 입력, 물리, 사운드, 에셋 관리, 장면 관리처럼 게임 제작에 필요한 여러 시스템을 한꺼번에 제공한다. Unity나 Godot처럼 에디터 중심으로 작업하는 도구를 떠올리면 쉽다.

Phaser는 웹 개발자 입장에서는 프레임워크처럼 사용할 수 있고, 제공 기능만 보면 2D 게임 엔진에 가까운 면도 있다. 이 책에서는 용어에 지나치게 매달리지 않는다. 중요한 것은 Phaser가 다음 기능을 한곳에서 제공한다는 점이다.

이미지, 스프라이트, 텍스트 같은 게임 오브젝트 생성
장면(Scene) 단위의 화면 구성과 전환
키보드, 마우스, 터치, 게임패드 입력 처리
Arcade Physics를 이용한 간단한 물리와 충돌
스프라이트 애니메이션과 트윈 애니메이션
사운드 재생
카메라, 타일맵, 파티클 같은 2D 게임 보조 기능

이 기능들은 따로따로 보면 작아 보이지만, 게임 하나를 완성할 때는 계속 함께 움직인다.

브라우저 게임의 장점과 한계

브라우저 게임의 가장 큰 장점은 접근성이다. 사용자는 링크를 열기만 하면 게임을 시작할 수 있다. 설치 과정이 짧거나 아예 없고, 업데이트도 서버의 파일을 바꾸면 바로 반영된다. 게임을 공유하기도 쉽다. 작은 퍼즐 게임, 교육용 게임, 이벤트용 미니게임, 프로토타입을 만들 때 특히 강력하다.

또 하나의 장점은 개발 속도다. 코드를 수정하고 브라우저를 새로고침하면 결과를 바로 확인할 수 있다. 자바스크립트를 이미 조금 알고 있다면, 별도의 무거운 개발 환경 없이도 시작할 수 있다.

하지만 한계도 있다. 브라우저는 사용자의 기기, 운영체제, 브라우저 종류, 화면 크기, 네트워크 상태에 영향을 받는다. 데스크톱에서는 잘 움직이던 게임이 오래된 모바일 기기에서는 느릴 수 있다. 모바일에서는 터치 입력, 화면 회전, 해상도, 배터리 사용량도 고려해야 한다. 사운드는 사용자 조작 이후에만 재생이 허용되는 경우가 있어, 시작 화면에서 한 번 탭을 받는 구조가 필요할 때도 있다.

따라서 Phaser 게임을 만들 때는 처음부터 "내 게임이 어떤 화면에서 실행될 것인가"를 생각해야 한다. 키보드만 쓰는 게임인지, 터치로도 조작할 수 있어야 하는지, 세로 화면인지 가로 화면인지, 한 화면에 너무 많은 오브젝트를 올리고 있지는 않은지 확인해야 한다.

Phaser로 만들기 좋은 게임과 그렇지 않은 경우

Phaser는 2D 게임에 잘 맞는다. 특히 다음 장르를 만들기 좋다.

플랫포머: 캐릭터가 뛰고, 발판에 착지하고, 아이템을 먹는 게임
슈팅 게임: 플레이어와 적, 총알, 충돌 판정이 중심인 게임
퍼즐 게임: 블록, 카드, 타일, 매칭 규칙이 중심인 게임
캐주얼 게임: 짧은 플레이와 간단한 조작이 중요한 게임
교육용 게임: 퀴즈, 드래그 앤 드롭, 반복 학습을 게임화한 콘텐츠
타일맵 기반 RPG나 어드벤처의 기본 구조

반대로 Phaser가 항상 최선은 아니다. 복잡한 3D 그래픽이 중심인 게임, 대규모 오픈월드, 고성능 콘솔 수준의 그래픽을 목표로 하는 게임이라면 다른 엔진이 더 적합할 수 있다. 물론 Phaser에서도 입체처럼 보이는 효과나 고급 렌더링 기법을 일부 구현할 수는 있다. 그러나 기본 방향은 웹 기반 2D 게임 제작이다.

또한 Phaser는 기본적으로 코드를 중심으로 작업한다. Phaser Editor 같은 보조 도구가 있더라도, 게임의 규칙과 흐름은 자바스크립트나 TypeScript 코드로 작성하는 경우가 많다. 시각적 에디터만으로 대부분을 만들고 싶은 사람에게는 처음에 낯설 수 있다. 하지만 이 책의 독자에게는 오히려 장점이 된다. 자바스크립트로 직접 규칙을 작성하면서 게임이 어떻게 움직이는지 분명히 이해할 수 있기 때문이다.

이 책에서 배울 순서

이 책은 처음부터 거대한 게임을 만들지 않는다. 먼저 작은 장면을 실행하고, 이미지를 올리고, 캐릭터를 움직이는 방식부터 익힌다. 그다음 충돌, 카메라, 타일맵, UI, 사운드처럼 게임의 구성 요소를 하나씩 붙인다.

중반부에는 배운 요소를 조합해 미니 프로젝트를 만든다. 플랫폼 게임에서는 플레이어 이동, 점프, 발판, 아이템, 적을 다룬다. 슈팅 게임에서는 발사체, 적 생성, 충돌, 점수, 게임 오버 흐름을 만든다. 퍼즐과 캐주얼 게임 장에서는 물리적인 움직임보다 규칙 설계와 상태 관리가 더 중요한 게임 패턴을 살펴본다.

후반부에는 프로젝트를 오래 유지하기 위한 방법을 다룬다. 파일을 어떻게 나눌지, TypeScript를 어떻게 적용할지, 저장 데이터와 설정을 어떻게 관리할지, 모바일 화면과 성능을 어떻게 확인할지 배운다. 마지막에는 빌드와 배포, 그리고 Phaser를 더 깊게 확장하는 주제로 넘어간다.

이 순서는 "기능 목록을 외우는 순서"가 아니다. 게임을 완성하기 위해 자연스럽게 필요한 순서다. 먼저 화면에 보이는 것을 만들고, 그다음 움직임을 만들고, 그 움직임에 규칙을 붙이고, 마지막으로 완성도를 높인다.

지금 기억할 것

Phaser는 브라우저 위에서 2D 게임을 쉽게 만들도록 도와주는 도구다. 내부에서는 Canvas와 WebGL을 사용하지만, 우리는 Phaser가 제공하는 장면, 오브젝트, 입력, 물리, 사운드 API를 통해 게임을 만든다.

좋은 시작점은 거창한 엔진 지식이 아니다. "브라우저가 코드를 실행하고, Phaser가 게임 루프를 돌리며, 우리는 매 프레임 게임 상태를 바꾼다"는 큰 그림이면 충분하다. 이어지는 내용에서는 이 그림을 실제 코드와 예제로 하나씩 확인하게 된다. 먼저 Phaser 게임이 어떤 구조로 시작되는지 차근차근 살펴보자.

참고

¹Phaser 공식 사이트

²Phaser API 문서: AUTO 렌더러 설정

책 목록

Phaser로 시작하는 웹 2D 게임 개발

전체 목차 보기