지난 편(#1)에서 MVP를 만들었다. 이번 편은 그 세계를 공개 URL 하나로 여는 이야기다.
🎮 플레이: https://voice-quest-game.vercel.app 📦 저장소: https://github.com/keneth80/voice-quest-game
로컬에만 있던 프로젝트를 git 저장소로 만들어 공개했다.
client/(Vite+TS 소스 + 3D 모델), docs/(기획·명세·설계 문서), mvp/(초기 프로토타입 v1~v5)assets/) — 게임에 필요한 파일만 골라 client/public/models/에 4.8MB로 정리.
KayKit 원본은 CC0라 itch.io에서 언제든 재다운로드 가능하니 저장소를 가볍게 유지.feat:, fix: ...)Vercel 정적 호스팅만으로 멀티플레이 게임이 완전히 동작한다. 이게 가능한 구조:
| 요건 | 해결 |
|---|---|
| 게임 클라이언트 | 순수 정적 빌드(Vite) — 서버 코드 0줄 |
| 멀티플레이 | PeerJS 무료 클라우드 시그널링 — 방 코드만 교환하면 브라우저끼리 직접 P2P 연결 |
| 음성 인식(마이크 권한) | HTTPS 필수 → Vercel 기본 제공 |
| 3D 에셋 | 정적 파일로 함께 배포 (총 4.8MB) |
저장소 루트에 vercel.json 하나만 두면 import 즉시 배포된다:
{
"buildCommand": "cd client && npm install --include=dev && npm run build",
"outputDirectory": "client/dist"
}
삽질 포인트: Vercel 빌드 환경은 NODE_ENV=production이라 그냥 npm install 하면
vite·typescript 같은 devDependencies를 건너뛰어 빌드가 깨진다. --include=dev가 핵심.
배포 URL에서 실제 브라우저 탭 2개로 검증했다.
| 항목 | 결과 |
|---|---|
| 페이지 로딩 + 3D 씬 렌더 | ✅ 로비·Knight 캐릭터 정상 |
| 에셋 로딩 | ✅ 모델 7종 모두 200 OK |
| P2P 방 생성 | ✅ 배포 도메인에서 시그널링 연결, 4자리 코드 발급 |
| 코드 참가 (별도 탭) | ✅ 양쪽 모두 "접속 2" |
| 원격 아바타 동기화 | ✅ 상대 캐릭터 + 이름표 + 말풍선 렌더 |
| 바른말 고운말 순화 + 전파 | ✅ "야 이 바보야 반갑다" → 양쪽 화면에 "야 이 소협야 반갑다" |
| 콘솔 에러 | ✅ 호스트·게스트 모두 0건 |
특히 마지막 항목이 상징적이다 — 이 게임의 정체성인 바른말 고운말이 배포 환경의 실제 P2P 채널을 타고 그대로 동작했다. 욕설은 이제 인터넷 어디서 접속해도 "소협"이 된다.
알려진 제약(P2P MVP): 호스트가 나가면 방이 사라지고, 일부 회사망/NAT에서는 연결이 안 될 수 있다. 서버 전환(Colyseus)에서 해소 예정.
#1에서 만든 세계가 이제 링크 하나로 열린다. 다음 편에서 계속.