지그재그에 ‘포치의 선물가게’를 선보이며

지그재그 앱 내 웹뷰에서 동작하는 포치의 선물가게를 React + TypeScript + Next.js 환경으로 구현했다. 초반에는 Matter.js로 물리 기반 MVP를 빠르게 만들고, 과일이 떨어지고 충돌해 더 큰 과일로 합쳐지는 퍼즐형 물리 게임의 핵심 흐름을 먼저 완성했다.

React는 게임 로직이 아니라 화면과 입력 전달에 집중하고, Matter.js는 낙하, 충돌, 병합, 게임 클리어 판정을 맡는 구조로 역할을 분리했다. 다음 과일 미리보기, 점수 갱신, 재시작 처리도 이 경계를 유지한 채 연결했다.

하지만 기본 렌더링만으로는 병합 효과, 게임오버 연출, 별사탕 반짝임, 사운드·진동 같은 "게임다운 느낌"을 충분히 살리기 어려웠다. 그래서 렌더링과 장면 관리가 강한 Phaser.js로 전환했고, 물리 엔진은 그대로 Matter.js를 활용하는 방향을 택해 연출과 구조를 모두 개선했다.

전환 과정에서는 몇 가지 실전 문제가 있었다.

• 과일 에셋은 충돌 성능과 안정성을 위해 전부 원형으로 제작했다.
• 무작위 생성은 Mulberry32 PRNG를 도입해 시드 기반으로 재현 가능하게 바꿨다.
• Next.js SSR 환경에서는 Phaser 초기화가 window.navigator.userAgent를 참조해 오류가 났고, dynamic(..., { ssr: false })로 브라우저 전용 로딩을 분리했다.
• DPR(Device Pixel Ratio) 문제는 window.devicePixelRatio를 반영해 고해상도 화면에서도 흐릿하지 않게 조정했다.

웹 느낌을 덜어내기 위한 작업도 병행했다. iOS 뒤로가기 제스처와 상하 스크롤 바운스를 막고, 버튼 클릭·토글·병합·게임오버에 맞춰 진동 시간을 다르게 설계해 모바일 게임에 가까운 피드백을 만들었다.

오픈 후에는 "플레이 중 갑자기 게임오버가 된다"는 VOC가 이어졌고, 원인은 타이머 기반 판정과 y 좌표만 보는 단순 판정이었다. 과일의 현재 상태를 dropping / settled로 나누고, 충돌 시 안착 상태로 전환한 뒤 settled 과일만 기준선 판정에 포함하도록 바꾸면서 오작동을 해결했다.

최종적으로는 물리 연산과 UI의 책임을 분리한 구조 위에서, Phaser.js의 장면 연출과 Matter.js의 물리 시뮬레이션을 함께 활용해 더 완성도 높은 미니게임을 만들었다.