웹게임 개발 기초: 웹게임 엔진 종류와 장단점 비교
웹게임 엔진은 세 갈래로 나눠 보면 고르기 쉽다. 2D 브라우저 게임이면 Phaser, 3D 게임이면 Babylon.js 나 PlayCanvas 처럼 처음부터 웹을 겨냥한 엔진이 무난하다. Godot·Unity 같은 범용 엔진도 웹으로 내보낼 수 있지만, 스레드·언어·네트워크 제약을 먼저 확인해야 한다.
01 엔진은 세 갈래로 나뉜다
자바스크립트로 직접 짜는 2D 프레임워크·렌더러가 첫째, 웹 전용 3D 엔진이 둘째다. 셋째는 웹을 여러 출력 대상 가운데 하나로 두는 범용 엔진이다. 앞의 둘은 브라우저 코드를 그대로 짜는 흐름이라 웹 개발자에게 익숙하다. 범용 엔진은 한 프로젝트를 여러 플랫폼에 내보낼 수 있는 대신, 웹 빌드에만 붙는 제약이 따로 있다.
| 엔진 | 갈래 | 라이선스 | 웹 렌더러 |
|---|---|---|---|
| Phaser | 2D 게임 프레임워크 | MIT | WebGL·Canvas |
| PixiJS | 2D 렌더링 엔진 | MIT | WebGL·WebGPU |
| three.js | 3D 라이브러리 | MIT | WebGL·WebGPU |
| Babylon.js | 3D 엔진 | Apache-2.0 | WebGL·WebGPU |
| PlayCanvas | 3D 엔진·에디터 | MIT | WebGL2·WebGPU |
| Godot | 범용 엔진 | MIT | WebGL 2 |
| Unity | 범용 엔진 | Personal 무료·Pro 유료 | WebGL 2 |
02 2D 는 게임 기능이 필요한지로 갈린다
Phaser 는 스스로를 2D 게임 프레임워크라고 부른다. 렌더링 말고도 물리 시스템을 두 가지 품었는데, 사각형·원만 다루는 가벼운 Arcade Physics 와 관절·제약까지 되는 Matter.js 다. 자바스크립트와 타입스크립트를 모두 쓸 수 있다. 최신 메이저인 Phaser 4는 새로 짠 WebGL 렌더러 위에 올라갔다.
PixiJS 는 결이 다르다. 공식 소개가 "2D 렌더링 엔진" 이고, 장면 그래프·입력·에셋 로더는 갖췄지만 물리 같은 게임 시스템은 내세우지 않는다. 그래서 화려한 2D 연출이 중심이고 게임 규칙은 직접 짜겠다면 PixiJS 가 맞다. 플랫포머·퍼즐처럼 장르 틀이 분명하면 Phaser 쪽이 손이 덜 간다.
03 3D 웹 엔진은 WebGPU 까지 지원한다
WebGPU 는 브라우저의 새 그래픽 API 다. Babylon.js 는 5.0 판부터 WebGPU 를 지원했고, WebGL 과 나란히 계속 유지한다고 밝힌다. 다만 WebGPU 엔진은 비동기로 초기화해야 하고, 어느 쪽을 쓸지는 시작할 때 고른다.
PlayCanvas 는 엔진과 협업 에디터를 한 묶음으로 낸다. 플랫폼 전체가 MIT 로 공개돼 있고, 무료 플랜에서도 공개 프로젝트는 무제한이다. three.js 는 스스로를 범용 3D 라이브러리라고 부른다. 가볍게 시작할 수 있는 대신, 게임에 필요한 나머지는 직접 고르고 붙여야 한다.
04 Godot·Unity 웹 빌드는 제약부터 확인한다
Godot 4 웹 내보내기에는 WebAssembly 와 WebGL 2가 필요하고, 렌더러는 Compatibility 하나만 쓸 수 있다. C# 으로 짠 프로젝트는 Godot 4에서 웹으로 내보내지 못한다. 멀티스레드 빌드는 서버가 교차 출처 격리(cross-origin isolation) 헤더를 보내야 돈다.
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corpGodot 4.3부터는 헤더가 필요 없는 단일 스레드 빌드가 기본이다. 대신 스레드를 못 쓰니 성능은 덜 나온다. 탭이 비활성으로 바뀌면 브라우저가 게임을 멈춘다는 점도 설계에 넣어 둔다.
Unity 웹 빌드에서는 C# 관리 스레드(managed thread)를 쓸 수 없고, 엔진 내부의 네이티브 코드만 멀티스레드로 돈다. 브라우저가 소켓 직접 접근을 막아 System.Net 클래스도 빠진다. 모바일은 iOS Safari 15, 안드로이드 Chrome 58 이상이 지원 대상이다. 매출과 투자금이 20만 달러 이하라면 무료 Personal 플랜으로 쓸 수 있다.
05 처음이라면 이 순서로 고른다
- 2D 인지 3D 인지 먼저 정한다.
- 이미 쓰는 엔진이나 언어가 있으면 그 엔진의 웹 제약 문서부터 읽는다.
- 배포할 서버에서 응답 헤더를 바꿀 수 있는지 확인한다.
- 작은 장면 하나를 목표 브라우저, 특히 모바일 Safari 에서 먼저 돌려 본다.
웹 개발자가 첫 게임을 만든다면 익숙한 자바스크립트·타입스크립트로 끝까지 갈 수 있는 Phaser 가 무난한 출발점이다. 3D 로 넘어갈 때도 같은 언어를 쓰는 Babylon.js·PlayCanvas 를 먼저 본다. Godot 의 헤더 조건이나 Unity 의 스레드 제한처럼, 설계를 바꾸는 정보는 기능 소개가 아니라 웹 제약 문서에 있다. 스레드·헤더·모바일 브라우저 조건은 첫 주 안에 확인해 두는 편이 낫다.