개인 브라우저 게임
06 / 12
Tiny Volley
로컬 멀티플레이, AI, 모바일 조작, P2P 온라인 방을 지원하는 플레이 가능한 브라우저 배구 게임입니다.
- 역할
- Independent Developer · Apr — May 2026
- 문제
- 렌더링이나 네트워크 timing을 source of truth로 삼지 않고 두 브라우저가 같은 match state를 유지해야 했습니다.
- 전략
- 동기화한 input frame으로 순수 결정론적 simulation을 진행합니다. Phaser는 결과 state를 렌더링하고, 네트워크 계층은 게임 규칙을 바꾸지 않은 채 방과 peer lifecycle을 관리합니다.
- 성과
- 로컬, AI, 모바일, P2P 온라인 모드를 제공하는 Cloudflare 기반 브라우저 게임을 공개했습니다.
라이브 개인 프로젝트 · 2026
01
문제 정의
왜 이 문제를 해결해야 했는가
Tiny Volley는 작은 브라우저 배구 게임입니다. 로컬 플레이, AI, 렌더링, 온라인 대전이 하나의 TypeScript 경기 simulation을 공유합니다.
사용자와 시스템이 마주한 문제
게임 규칙, 물리, 조작, 렌더링, 네트워크가 각각 다른 match state를 소유하면 플레이 모드마다 결과가 달라질 수 있습니다.
P2P 플레이에는 DataChannel 연결뿐 아니라 방 생성, signaling, 연결 해제, timeout, 재연결 안내가 필요합니다.
데스크톱 키보드, 로컬 2인, 모바일 터치, 저장 가능한 조작 설정을 하나의 읽기 쉬운 setup 경험으로 제공해야 했습니다.
프론트엔드 오너십
개인 프로젝트로 게임 client, 결정론적 simulation, AI, 반응형 조작, WebRTC lockstep, Cloudflare Worker signaling 서비스를 설계하고 구현했습니다.
Phaser 렌더링과 분리한 순수 TypeScript match simulation
로컬 2인, 1인 AI, 모바일 터치 조작
WebRTC DataChannel lockstep과 방 lifecycle
Cloudflare Workers, Durable Objects, 다국어, 자동화 테스트
02
해결 전략
프로덕션까지 이어지는 시스템 전략
동기화한 input frame으로 순수 결정론적 simulation을 진행합니다. Phaser는 결과 state를 렌더링하고, 네트워크 계층은 게임 규칙을 바꾸지 않은 채 방과 peer lifecycle을 관리합니다.
시스템 모델
두 peer가 WebRTC로 input frame을 교환하고 동일한 결정론적 simulation을 진행한 뒤 각 브라우저에서 결과 match state를 렌더링합니다.
제품 화면
주요 제품 화면
과거 제품 인터페이스입니다. 화면의 수치는 캡처 당시 UI 상태이며 현재 TVL, APY 또는 성과를 의미하지 않습니다.
주요 구현 결정
로컬과 원격 peer가 동일한 input을 동일한 state로 진행하도록 규칙과 물리를 결정론적 simulation에 배치했습니다.
방 생성, 공유 code, signaling, heartbeat, timeout, 연결 해제, STUN-only 연결 실패 상태를 구현했습니다.
저장 가능한 키 설정, 여러 게임 모드, 사운드·이펙트 설정, 10개 언어를 추가했습니다.
Phaser renderer와 분리해 simulation, input, protocol, room 동작을 테스트했습니다.
03
성과
무엇이 달라졌고 무엇을 배웠는가
로컬, AI, 모바일, P2P 온라인 모드를 제공하는 Cloudflare 기반 브라우저 게임을 공개했습니다.
2026년 7월 포트폴리오 감사에서 18개 파일의 자동화 테스트 101개, 프로덕션 게임 빌드, Worker typecheck를 통과했습니다.
모든 네트워크에서 P2P가 동작하는 것처럼 표현하지 않고 현재 STUN-only 제약을 명시했습니다.
배운 점
실시간 프론트엔드의 신뢰성은 simulation, rendering, transport, connection lifecycle을 명확한 contract로 분리할 때 만들어집니다.
지금이라면
Setup route 이후 Phaser game runtime을 lazy load하고, direct peer 연결이 어려운 네트워크를 위해 선택적 TURN 서비스를 추가하겠습니다.
사용 기술
공개 링크
함께 일하기