웹 브라우저에서 구현하는 3D 보드게임 테이블
React Three Fiber를 활용해 몰입감 넘치는 게임 환경을 구축한 과정을 소개합니다.
왜 3D를 선택했는가
보드게임의 매력은 물리적인 컴포넌트에서 상당 부분 옵니다. 주사위를 굴리는 손맛, 카드를 뒤집는 긴장감, 말을 옮기는 촉감. 이런 요소를 단순한 2D 인터페이스로는 전달하기 어렵다고 판단했습니다.
부리부리랜드의 초기 프로토타입은 2D HTML/CSS로 만들어졌습니다. 기능적으로는 문제가 없었지만, 테스트 플레이어들의 피드백은 일관되게 "실제 보드게임을 하는 느낌이 나지 않는다"였습니다. 그래서 다이스 테이블부터 3D 전환을 시작했습니다.
React Three Fiber(R3F)를 선택한 이유는 React 생태계와의 자연스러운 통합 때문입니다. 게임 상태를 React state로 관리하면서, 3D 렌더링도 같은 컴포넌트 트리에서 처리할 수 있다는 점이 개발 속도를 크게 높여주었습니다.
모바일 성능 최적화 과정
3D 웹 게임의 가장 큰 과제는 모바일 성능입니다. 초기 버전에서는 중저가 스마트폰에서 10fps 미만으로 떨어지는 문제가 있었습니다. 이를 해결하기 위해 여러 최적화를 적용했습니다.
첫째, DPR(Device Pixel Ratio)을 1.5로 고정해 불필요한 고해상도 렌더링을 방지했습니다. 둘째, 그림자 맵 해상도를 기기 성능에 따라 동적으로 조절합니다. 셋째, 카메라에서 먼 오브젝트의 디테일을 자동으로 줄이는 LOD(Level of Detail) 시스템을 도입했습니다.
이런 최적화 결과, 현재는 대부분의 모바일 기기에서 30fps 이상을 안정적으로 유지하고 있습니다. "화면 잠금" 기능도 추가해서, 3D 카메라 조작이 불편한 사용자는 고정 시점으로 플레이할 수 있습니다.
실시간 멀티플레이와 3D 동기화
가장 까다로웠던 부분은 STOMP WebSocket으로 전달되는 게임 상태를 3D 애니메이션과 동기화하는 것이었습니다. 예를 들어 주사위를 굴리는 액션은 서버에서 결과값만 전달하지만, 클라이언트에서는 물리 시뮬레이션을 거쳐 자연스러운 굴림 애니메이션을 보여줘야 합니다.
이를 위해 "결과 기반 애니메이션" 패턴을 사용합니다. 서버가 "주사위 결과: 4"를 보내면, 클라이언트는 최종 면이 4가 되도록 역계산한 초기 회전값과 물리 힘을 적용해 주사위를 굴립니다. 결과는 이미 정해져 있지만, 플레이어 눈에는 자연스러운 물리 시뮬레이션으로 보이는 것이죠.
이 접근법 덕분에 네트워크 지연이 있어도 모든 플레이어가 같은 결과를 보게 되며, 애니메이션의 자연스러움도 유지됩니다. 부리부리랜드의 모든 3D 게임이 이 패턴을 공유하고 있습니다.
지금 바로 플레이해 보세요
전략을 직접 시험하고 싶다면, 방을 만들어 친구와 함께 플레이하세요.