LinkSquare

개요

LinkSquare는 2D JRPG 스타일의 가상 호텔 로비입니다. 방문자들이 캐릭터로 접속해 실시간으로 걸어 다니고, 가까이 있는 사람과 자동으로 음성 채팅이 연결됩니다. 마치 실제 공간에 있는 것처럼 — 멀리 있으면 소리가 작아지고, 가까이 오면 커집니다.

주요 기능

• 실시간 멀티플레이어 — Colyseus WebSocket 서버로 모든 플레이어의 위치를 실시간 동기화
• 근접 음성 채팅 — LiveKit 기반 공간 오디오, 300px 이내에서만 들림
• 말풍선 — 채팅 입력 시 캐릭터 위에 4초간 표시
• 프라이빗 룸 — A~D 룸 입장 시 해당 룸 사용자끼리만 음성 연결
• 블로그/포트폴리오 — 같은 도메인에서 Next.js App Router로 제공

기술 스택

아키텍처

브라우저
  ├── Next.js (블로그, 포트폴리오, 어드민)
  └── Phaser 3 (게임 렌더링)
        └── Colyseus Client (WS) → Colyseus Server (:2567)
                                         └── Supabase (플레이어 상태)
LiveKit Cloud ← → 브라우저 (음성 트랙)

React와 Phaser 사이의 상태는 gameState.ts 모듈 싱글턴으로 공유합니다.

개발 과정에서 배운 것

• Phaser의 게임 루프와 React의 상태 관리를 충돌 없이 연결하는 방법
• Colyseus의 Schema 기반 상태 동기화가 일반 WebSocket보다 훨씬 효율적
• LiveKit의 공간 오디오 구현 — 거리 기반 볼륨 감쇠를 직접 계산
• Next.js 15 App Router에서 SSR, ISR, 클라이언트 컴포넌트를 적재적소에 배치