지그재그, 웹 게임 개발 비하인드 스토리 공개!

React, TypeScript, Next.js 기반 웹 환경에서 Matter.js를 활용하여 물리 게임을 구현함

Phaser.js로 전환하여 게임 연출 및 UI/UX를 개선하고 완성도를 높임

SSR 문제 해결, DPR 처리, 진동 피드백 등 웹 환경의 한계를 극복하고 몰입도를 향상시킴

Matter.js에서 Phaser.js로의 전환

초기 Matter.js는 물리 연산에 집중하여 MVP를 빠르게 구현했다. 구체적으로 과일 병합 효과, 게임오버 연출 등 게임다운 연출 구현에 어려움이 있었다. 따라서 Phaser.js를 도입하여 렌더링 루프, 장면 관리, 이벤트 시스템을 활용, 게임 완성도를 높였다.

웹 환경에서의 게임 최적화

DPR(Device Pixel Ratio) 문제 해결을 위해 Phaser.js 초기 설정에서 window.devicePixelRatio 값을 활용했다. 따라서 고해상도 기기에서도 선명한 렌더링을 보장한다. 반면 iOS 뒤로가기 제스처 방지, 진동 피드백 설계를 통해 사용자 경험을 개선했다.