지그재그 앱 내 포치의 선물가게 게임 구현기

이 게시물은 지그재그 앱에서 구현한 퍼즐형 물리 게임 '포치의 선물가게' 개발 과정을 공유합니다.

기술 스택과 구현 방향

• React, TypeScript, Next.js 기반의 웹뷰 내 게임 구현
• 물리엔진 Matter.js를 활용한 게임 로직 처리
• 게임 렌더링과 상태 관리를 React가 담당하며 구조 분리

Phaser.js 도입과 문제 해결

• 게임 완성도 향상을 위해 Phaser.js로 전환, Matter.js 물리엔진 유지
• SSR 문제 대응과 캔버스 DPR 처리 방식 차이 해결
• 게임오버 판정 로직을 상태 기반으로 재설계하여 안정성 강화

개발 중 고민 및 최적화

• 원형 과일 이미지 선택 이유와 충돌 판정 최적화
• 재현 가능한 시드 기반 PRNG Mulberry32 적용
• 웹 특유의 불필요한 UI 동작 방지 및 진동 피드백 설계