프론트엔드
지그재그에 “포치의 선물가게”를 오픈하며
두줄요약
지그재그 앱 웹뷰에서 미니게임을 구현하며 Matter.js와 Phaser.js를 조합한 과정을 공유했습니다. 또한 SSR, DPR, 모바일 제스처와 게임오버 판정 문제를 해결한 사례를 정리했습니다.
핵심 내용
- 지그재그 앱 내 웹뷰 기반 미니게임 ‘포치의 선물가게’ 구현 과정 공유
- React + TypeScript + Next.js 환경에서 Matter.js로 물리 연산을 처리하고, Phaser.js로 연출과 장면 관리를 보강
- 시드 기반 랜덤, SSR 분리, DPR 대응, iOS 제스처·스크롤 제어 등 웹 게임 구현 이슈와 해결 과정 정리
- 게임오버 판정을 타이머·좌표 기반에서 과일 상태 기반으로 바꿔 오판정을 줄인 사례 포함
적용해볼 점
- 웹뷰 게임이나 인터랙티브 콘텐츠에서 물리 엔진과 렌더링 책임 분리
- 랜덤성은 재현 가능한 시드 기반 PRNG로 관리
- 모바일 웹에서는 DPR, 제스처, overscroll 같은 환경 차이 대응이 중요