LittleJS가 뭐냐면요
LittleJS는 Frank Force라는 개발자가 만든 아주 작고 빠른 자바스크립트 게임 엔진이에요. 이 분은 웹 게임과 '사이즈 코딩'(아주 작은 용량 안에 프로그램을 욱여넣는 놀이) 분야에서 꽤 알려져 있는데요, 몇 바이트짜리 코드로 효과음을 만들어내는 ZzFX를 만든 사람이기도 해요. LittleJS도 그 철학을 이어받아서 의존성 없이 가볍고, 그러면서도 빠른 것이 특징이에요.
지금까지 LittleJS는 '2D 게임 엔진'이었어요. 그런데 이번에 3D 지원이 들어가면서 2D와 3D를 모두 다루는 엔진이 됐다는 소식이 나왔어요. 작고 단순한 게 정체성이던 엔진이 3D로 영역을 넓혔다는 게 흥미로운 대목이에요.
원래 LittleJS는 어떤 엔진이었나
먼저 '게임 엔진이 하는 일'부터 짚어볼게요. 게임은 보통 1초에 60번씩 '입력 받기 → 게임 상태 업데이트 → 화면 그리기'를 반복해요. 이걸 게임 루프라고 하는데, 엔진은 이 루프를 돌려주고 화면 그리기, 소리, 입력, 충돌 처리 같은 공통 기능을 대신 해줘요. LittleJS의 대표적인 특징은 이래요.
- WebGL 기반 렌더링: 그래픽 카드(GPU)를 직접 써서 스프라이트(게임 속 2D 이미지)를 한꺼번에 빠르게 그려요. 수만 개 단위 스프라이트를 60fps로 그릴 수 있다는 걸 강점으로 내세워 왔어요.
- 올인원 구성: 사운드(ZzFX 내장), 입력(키보드, 마우스, 터치, 게임패드), 간단한 물리와 충돌, 파티클, 타일맵, 디버그 도구까지 기본으로 들어 있어요.
- 게임잼 친화적: 게임 전체를 압축 13KB 안에 만들어야 하는 js13kGames 같은 대회에서도 쓸 수 있을 만큼 가벼워요.
- MIT 라이선스, 의존성 없음: 복잡한 빌드 도구 없이 스크립트 하나만 불러와도 바로 시작할 수 있어요.
- Phaser: 웹 2D 엔진의 대표 주자예요. 기능, 문서, 커뮤니티가 방대한 대신 그만큼 무거워요.
- Three.js / Babylon.js: 웹 3D의 양대 산맥이에요. Three.js는 게임 엔진이라기보다 3D 렌더링 라이브러리라서 게임 루프, 물리, 사운드는 직접 붙여야 해요. Babylon.js는 좀 더 올인원 게임 엔진에 가까워요.
- PixiJS: 아주 빠른 2D 렌더러지만, 게임 로직은 직접 챙겨야 해요.
- KAPLAY(구 Kaboom.js): 쉬운 API 덕분에 입문자에게 인기 있는 2D 엔진이에요.
3D 지원이 의미하는 것
3D가 들어갔다고 LittleJS가 갑자기 언리얼 엔진과 겨루겠다는 건 아닐 거예요. 엔진의 정체성을 생각하면, 기존의 단순한 API 감각을 유지하면서 3D 표현을 쓸 수 있게 해주는 쪽이라고 보는 게 자연스러워요. 어떤 범위까지 지원하는지는 원문과 저장소 예제를 직접 확인해 보시길 권해요.
이게 왜 의미 있냐면, 2D 게임을 만들다 보면 '살짝만 3D'가 필요한 순간이 꽤 많거든요. 바닥과 배경은 3D로 깔고 캐릭터는 2D 스프라이트로 세우는 '2.5D' 연출이나, 카메라를 기울여 입체감을 주는 탑다운 게임 같은 거요. 이럴 때 2D 엔진에서 3D 엔진으로 갈아타는 건 부담이 커요. 가벼운 엔진 하나로 둘 다 할 수 있으면 프로토타입 속도가 훨씬 빨라지죠.
기술적으로도 자연스러운 확장이에요. WebGL 자체가 원래 3D를 위한 API거든요. GPU 입장에서 2D 스프라이트는 '삼각형 두 개로 만든 평평한 사각형'에 그림을 붙인 것뿐이에요. 여기에 깊이(z축)와 원근 투영(멀리 있는 건 작게 보이게 하는 계산)을 더하면 3D가 되는 거예요.
다른 웹 게임 엔진과 비교하면
웹 게임 엔진 생태계는 이미 꽤 풍성해요.
한국 개발자에게는
요즘 국내에도 웹 기반 미니게임이 많아요. 이벤트 페이지의 간단한 게임이나 슈퍼앱 안에서 돌아가는 미니앱 게임 같은 것들이요. 이런 데서는 번들 크기가 작고 로딩이 빠른 게 정말 중요한데, LittleJS 같은 경량 엔진이 잘 맞아요.
게임 개발을 공부하고 싶은 분들께도 추천해요. 코드베이스가 작아서 엔진 내부를 처음부터 끝까지 읽어볼 수 있거든요. 게임 루프, 스프라이트 배칭(여러 그림을 한 번에 묶어 그려서 GPU 호출을 줄이는 기법), 충돌 처리가 실제로 어떻게 구현되는지 거대한 엔진보다 훨씬 쉽게 따라갈 수 있어요. 주말에 예제 하나 띄워보고, 다음 게임잼에 도전해 보는 것도 좋겠네요.
마무리
한 줄 정리: '작고 빠른' 2D 엔진이 3D까지 품으면서 웹 미니게임과 프로토타입을 만들 때 고를 수 있는 엔진이 하나 더 늘었어요.
여러분은 웹 게임을 만들 때 어떤 엔진을 쓰시나요? 가벼운 올인원 엔진과 Three.js 같은 전문 라이브러리 조합 중 어느 쪽이 더 좋으신가요?
🔗 출처: Hacker News