프론트엔드·
토스 SLASH·
토스 SLASH·토스는 어떻게 광고 속에 게임을 넣었을까
토스가 광고 시스템을 자체 구축하면서 서드파티 SDK 대신 국제 광고 표준 MRAID를 직접 구현해 플레이어블 광고(앱 설치 전 게임 체험)를 지원한 과정이다. mraid.js 브릿지, 5중 렌더링 완료 신호, 보안 중심 설계, 앱 심사 없는 즉시 배포를 동시에 달성했다.
요약 이어보기#javascript#webview#sdk+2
프론트엔드·
카카오 스타일 (지그재그)·
카카오 스타일 (지그재그)·지그재그에 “포치의 선물가게”를 오픈하며
문제지그재그 앱 내 캐주얼 게임 "포치의 선물가게"를 React+Next.js+Matter.js로 구현했지만 "게임 같다"는 느낌이 부족하고, 고해상도 흐릿함·시드 재현성·게임오버 오작동 같은 디테일 결함이 남았다.
접근Matter.js와 호환되는 Phaser.js로 마이그레이션해 폭발·진동 같은 연출을 얹고, 원형 에셋으로 반지름 기반 충돌 판정을 사용해 성능을 잡았다. Mulberry32 PRNG로 난이도·테스트 재현성을 확보하고, devicePixelRatio 명시·게임오버 판정을 타이머/y좌표에서 과일 상태(dropping/settled) 기반으로 바꿔 안정화했다.
결과일정 압박 속에서 기술 선택을 재조정하고 VOC 기반 버그를 잡아낸 과정을 정리한 게임 개발 실전기. 라이브 서비스에서 캐주얼 물리 게임을 React 스택으로 굴리는 패턴이 공유됐다.
읽음 (0)
이 글과 비슷한
- 프론트엔드·
채널톡·RxJS로 우아하게 사이드 이펙트 통제하기
채널톡 고객용 SDK에서 boot→shutdown→boot 연속 호출 시 사이드 이펙트가 중첩되는 타이밍 버그를 RxJS 기반 구조 개편으로 해결한 사례다. 비동기 흐름 직렬화에 RxJS, 동기적 상태 관리에 Zustand를 도입해 타이밍 비결정성을 구조 수준에서 제거했다.
요약 이어보기#sdk#redux#rxjs+2 - 프론트엔드·
여기어때 (GC컴퍼니)·항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다
여기어때 항공 서비스 프론트엔드가 웹과 앱 웹뷰 두 환경에서 동일한 함수 호출로 동작하는 앱 브릿지 추상화 레이어를 설계한 과정을 다룬다. iOS·안드로이드 규약 차이와 "웹에 존재하지 않는 브릿지를 어떻게 호출하나"라는 문제를 단일 추상화 층으로 해결한 구현 사례다.
요약 이어보기#react#typescript#webview+2