pile·
프론트엔드·카카오 스타일 (지그재그)카카오 스타일 (지그재그)·

지그재그에 “포치의 선물가게”를 오픈하며

문제지그재그 앱 내 캐주얼 게임 "포치의 선물가게"를 React+Next.js+Matter.js로 구현했지만 "게임 같다"는 느낌이 부족하고, 고해상도 흐릿함·시드 재현성·게임오버 오작동 같은 디테일 결함이 남았다.
접근Matter.js와 호환되는 Phaser.js로 마이그레이션해 폭발·진동 같은 연출을 얹고, 원형 에셋으로 반지름 기반 충돌 판정을 사용해 성능을 잡았다. Mulberry32 PRNG로 난이도·테스트 재현성을 확보하고, devicePixelRatio 명시·게임오버 판정을 타이머/y좌표에서 과일 상태(dropping/settled) 기반으로 바꿔 안정화했다.
결과일정 압박 속에서 기술 선택을 재조정하고 VOC 기반 버그를 잡아낸 과정을 정리한 게임 개발 실전기. 라이브 서비스에서 캐주얼 물리 게임을 React 스택으로 굴리는 패턴이 공유됐다.
카카오 스타일 (지그재그)
카카오 스타일 (지그재그) 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2
  2. 프론트엔드·vercel-blogVercel Blog·

    Vercel과 Shopify의 Hydrogen 전면 재설계

    Vercel과 Shopify가 Hydrogen을 오픈소스·런타임 무관 프레임워크로 전면 재설계했다. 기존 Hydrogen은 빠른 헤드리스 스토어프런트 배포를 지원했지만 플랫폼 종속성이 있었고, 새 버전은 Svelte, Nuxt, Next.js 등 어느 JavaScript 프레임워크에서도 동작한다. 3레이어 아키텍처(코어/클라이언트/서버)로 재구성하면서 각 레이어가 명확한 역할을 분담한다.

    #react#nextjs#i18n+2
  3. 프론트엔드·토스 SLASH토스 SLASH·

    es-toolkit: 사내 소형 라이브러리에서 글로벌 프로젝트로

    토스 프론트엔드 팀이 사내 공유 유틸리티 라이브러리를 발전시켜 만든 es-toolkit이 주간 npm 다운로드 2,000만 건을 넘기며 글로벌 오픈소스 프로젝트로 자리 잡은 과정을 다룬다. lodash의 구조적 한계를 넘어 현대 웹 개발 환경에 최적화된 유틸리티 라이브러리를 처음부터 설계한 경험을 정리한다.

    #lodash#open-source#tree-shaking+2