LinkSquare 개발 후기 — 2D 호텔 로비 만들기

Phaser 3: 2D 게임 렌더링, 타일맵, 충돌 처리
Colyseus 0.15: 멀티플레이어 상태 동기화
LiveKit: WebRTC 근접 음성 채팅
Next.js 15: 블로그 + 포트폴리오 + 게임 통합
Supabase: 인증, DB, Realtime, Storage

왜 만들었나?

단순한 포트폴리오 사이트 대신, 방문자들이 실제로 돌아다닐 수 있는 2D 가상 공간을 만들고 싶었습니다. 게임 개발 경험도 쌓고, 재미있는 포트폴리오도 만드는 일석이조를 노렸습니다.

Phaser와 React의 렌더링 사이클이 충돌하는 문제였습니다. gameState 모듈 싱글턴 패턴으로 두 세계를 분리하면서 해결했습니다.