Phaser 3: 초보자 친화형 웹게임 엔진의 진화
Phaser 3는 2018년 출시 이후 웹게임 개발자들 사이에서 가장 인기 있는 HTML5 게임 엔진 중 하나입니다. JavaScript 기반의 가볍고 빠른 게임 개발 환경을 제공하면서도, 강력한 물리 엔진(Arcade Physics)과 애니메이션 시스템을 갖추고 있습니다. 2026년 현재 Phaser 3.80+ 버전에서는 WebGL 성능 최적화, 모바일 터치 입력 개선, 그리고 타입스크립트 지원이 더욱 강화되었습니다.
이 가이드에서는 Phaser 3로 처음부터 완성도 있는 웹게임을 만드는 실전 방법을 다룹니다. 기존 완벽 가이드와 달리, 실제 프로젝트 구조 설계, 디버깅 팁, 그리고 배포 최적화에 중점을 두었습니다.
Phaser 3 개발 환경 설정: 정확한 단계별 방법
1단계: Node.js와 npm 설치 확인
Phaser 3 프로젝트는 모던 JavaScript 빌드 도구를 필수로 사용합니다. Node.js 18.0 이상이 필요합니다.
node --version # v18.0.0 이상 확인
npm --version2단계: 프로젝트 생성 및 필수 패키지 설치
mkdir my-phaser-game
cd my-phaser-game
npm init -y
npm install --save phaser
npm install --save-dev webpack webpack-cli webpack-dev-server3단계: Webpack 설정 파일 작성
Phaser 3는 모듈 번들러와 함께 사용될 때 최적의 성능을 발휘합니다.
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'game.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 8080,
hot: true
}
};첫 번째 게임: 클릭하는 원형 피하기
핵심 개념: Scene, Sprite, Physics
Phaser 3의 모든 게임은 Scene을 중심으로 구성됩니다. Scene은 게임의 독립적인 상태(메인 화면, 게임플레이, 게임오버 등)를 관리합니다.
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 },
debug: false
}
},
scene: GameScene
};
const game = new Phaser.Game(config);
class GameScene extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
// 게임 자산 로드
}
create() {
// 게임 객체 생성
this.player = this.add.circle(400, 300, 20, 0x00ff00);
this.physics.add.existing(this.player);
this.player.body.setCollideWorldBounds(true);
this.player.body.setBounce(1, 1);
}
update() {
// 매 프레임마다 실행되는 로직
const cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown) {
this.player.body.setVelocityX(-200);
}
}
}Phaser 3 성능 최적화 5가지 필수 기법
1. 객체 풀(Object Pooling) 활용
게임에서 반복적으로 생성/제거되는 객체(총알, 몬스터)는 객체 풀로 관리하면 메모리 할당 비용을 줄일 수 있습니다.
class GameScene extends Phaser.Scene {
create() {
this.bulletPool = this.physics.add.group();
// 미리 20개의 총알 생성
for (let i = 0; i < 20; i++) {
this.bulletPool.create(0, 0, 'bullet').setActive(false).setVisible(false);
}
}
fireBullet() {
const bullet = this.bulletPool.get(this.player.x, this.player.y);
if (bullet) {
bullet.setActive(true);
bullet.setVisible(true);
bullet.body.setVelocityY(-300);
}
}
}2. 화면 밖 객체 정리
this.physics.add.overlap(this.bulletPool, this.enemies, (bullet, enemy) => {
bullet.setActive(false).setVisible(false);
enemy.destroy();
});3. 텍스처 아틀라스 활용
여러 개의 개별 이미지 대신 텍스처 아틀라스(스프라이트 시트)를 사용하면 HTTP 요청과 메모리 사용을 크게 줄입니다.
4. 캐시 관리
this.textures.remove('unused-image');
this.cache.audio.remove('unused-sound');5. 물리 엔진 동적 활성화
// 필요할 때만 물리 시뮬레이션 활성화
this.physics.world.enabled = false; // 메뉴 화면
this.physics.world.enabled = true; // 게임플레이실전: 슈팅 게임 만들기 (완성도 높은 예제)
게임 설계 구조
class MainScene extends Phaser.Scene {
constructor() {
super('MainScene');
this.score = 0;
this.enemyCount = 0;
}
create() {
// 배경
this.add.rectangle(400, 300, 800, 600, 0x1a1a2e);
// 플레이어
this.player = this.add.sprite(400, 550, 'player');
this.physics.add.existing(this.player);
this.player.body.setCollideWorldBounds(true);
// 적 그룹
this.enemies = this.physics.add.group();
// 총알 풀
this.bullets = this.physics.add.group();
// 입력 처리
this.input.on('pointermove', (pointer) => {
this.player.x = Phaser.Math.Clamp(pointer.x, 30, 770);
});
this.input.on('pointerdown', () => this.shootBullet());
// 적 스폰
this.time.addEvent({
delay: 1000,
callback: this.spawnEnemy,
callbackScope: this,
loop: true
});
// 충돌 감지
this.physics.add.overlap(this.bullets, this.enemies, (bullet, enemy) => {
bullet.destroy();
enemy.destroy();
this.score += 10;
this.scoreText.setText('Score: ' + this.score);
});
this.physics.add.overlap(this.player, this.enemies, () => {
this.gameOver();
});
// UI
this.scoreText = this.add.text(16, 16, 'Score: 0', {
fontSize: '20px',
fill: '#fff'
});
}
shootBullet() {
const bullet = this.bullets.create(this.player.x, 500, 'bullet');
bullet.body.setVelocityY(-400);
}
spawnEnemy() {
const x = Phaser.Math.Between(50, 750);
const enemy = this.enemies.create(x, 0, 'enemy');
enemy.body.setVelocityY(200);
}
gameOver() {
this.physics.pause();
this.add.text(400, 300, 'GAME OVER', {
fontSize: '48px',
fill: '#ff0000',
align: 'center'
}).setOrigin(0.5);
}
update() {
// 화면 밖의 객체 정리
this.enemies.children.entries.forEach(enemy => {
if (enemy.y > 600) enemy.destroy();
});
this.bullets.children.entries.forEach(bullet => {
if (bullet.y < 0) bullet.destroy();
});
}
}Phaser 3 vs 다른 웹게임 엔진 비교
더 자세한 비교는 PixiJS 2D 게임 개발 완벽 가이드 2026을 참고하세요.
2026년 Phaser 3 주요 업데이트 사항
| 버전 | 출시일 | 주요 변경사항 | 호환성 |
|---|---|---|---|
| 3.70 | 2024.Q3 | WebGL 최적화, 모바일 성능 개선 | 완벽 호환 |
| 3.75 | 2025.Q1 | TypeScript 타입 강화, 신규 애니메이션 API | 이전 버전과 호환 |
| 3.80+ | 2025.Q3 | 메모리 관리 개선, 멀티터치 지원 강화 | 권장 업그레이드 |
배포 및 수익화 전략
Phaser 3로 만든 게임을 배포하려면 빌드 파일을 최소화해야 합니다. 프로덕션 모드 빌드는 파일 크기를 50% 이상 줄입니다.
wpk build --mode production결과적으로 생성되는 게임 파일은 보통 1~3MB 수준으로 대부분의 웹호스팅에서 즉시 배포 가능합니다. 더 자세한 수익화 방법은 2026년 웹 게임 수익화 전략 완벽 가이드를 참고하세요.
Phaser 3 커뮤니티와 학습 자료
Phaser 3는 공식 예제가 200개 이상 제공되며, 커뮤니티 포럼에서 24시간 내 답변 받을 확률이 90% 이상입니다. 이는 다른 인디 엔진에 비해 학습 곡선이 매우 완만함을 의미합니다.
공식 에디터인 Phaser Editor 2D는 Phaser 3 프로젝트의 시각적 개발을 지원하며, 최신 버전에서 장면 설계와 애니메이션 편집이 훨씬 직관적으로 개선되었습니다.
자주 하는 실수 5가지와 해결책
1. Scene 간 데이터 전달 실패
- 해결책: Scene 옵션에서 data 객체 활용
this.scene.start('NextScene', { score: 100 });
// NextScene에서
this.events.once('start', (data) => { console.log(data.score); });2. 메모리 누수 (destroy 미실행)
- 해결책: Scene 종료 시 명시적 정리
shutdown() {
this.enemies.clear(true); // 그룹의 모든 객체 정리
this.input.off('pointerdown'); // 이벤트 리스너 제거
}3. 모바일 터치 입력 미지원
- 해결책: 포인터 입력으로 통일
this.input.on('pointerdown', callback); // 마우스+터치 모두 지원4. 물리 엔진 충돌 안 감지
- 해결책: 충돌 그룹 설정 확인
this.physics.add.collider(group1, group2); // 반드시 명시적 등록5. 웹팩 번들 크기 과다
- 해결책: 불필요한 물리 엔진 제거, Tree shaking 활용
const config = {
physics: {
default: 'arcade' // 가벼운 Arcade Physics 사용
}
};결론: 2026년 웹게임 개발자라면 Phaser 3을 선택해야 하는 이유
Phaser 3는 JavaScript 기반의 가장 성숙한 2D 게임 엔진입니다. 완전 무료, 강력한 커뮤니티, 풍부한 예제와 문서는 초보자의 진입 장벽을 낮춥니다. 동시에 객체 풀, 물리 엔진, 애니메이션 시스템 등 프로페셔널 기능을 갖춰 중급 프로젝트까지 충분히 대응합니다.
특히 웹게임으로 수익을 창출하려면, 빠른 개발 시간과 우수한 성능이 경쟁력입니다. Phaser 3은 이 두 가지를 모두 충족시키는 선택지입니다.
참고 자료
자주 묻는 질문
Phaser 3은 정말 완전 무료인가요?
네, Phaser 3는 MIT 라이선스 오픈소스입니다. 상업적 게임 개발에도 제한이 없으며, 저작권 표시만 해주면 됩니다.
Phaser 3으로 만든 게임이 모바일에서 잘 동작하나요?
Phaser 3는 모바일 최적화가 기본으로 포함되어 있습니다. 터치 입력, 가속도계, 풀스크린 API 등을 모두 지원합니다. 다만 고사양 3D 게임은 성능이 제한될 수 있습니다.
TypeScript를 사용해서 Phaser 3 프로젝트를 시작할 수 있나요?
완벽히 가능합니다. Phaser 3 3.75 이상에서는 타입 정의가 매우 완벽하며, npm에서 @types/phaser 패키지를 설치하면 전체 타입 지원을 받을 수 있습니다.
댓글