본문으로 건너뛰기
Works레서판다 빌리지
Side Project

레서판다 빌리지

3D 캐릭터 기반 실시간 멀티플레이어 레서판다 마을

담당 역할
UX/UI·개발·성능 및 버그 개선
WebInteractive3DFrontend
사이트 바로가기
마을 전경과 주요 공간
마을과 캐릭터
마을 방명록

마을 전경과 주요 공간 · 1 / 3

레서판다 캐릭터로 마을을 산책하고 다른 방문자와 실시간으로 상호작용하는 3D 웹 공간입니다.

주요 기능

  • 키보드와 마우스로 캐릭터를 움직이고 걷기·달리기·점프하기
  • 벤치에 앉기, 인사와 춤, 죽순 수확, 미니맵으로 위치 확인하기
  • 같은 마을에 접속한 방문자를 보고 채팅하기
  • 방명록에 쪽지를 남기고 확인하기
  • 낮과 밤에 따라 달라지는 조명과 벚꽃·반딧불이 효과

사용 기술

언어·프레임워크

Next.js 16React 19TypeScript

상태·데이터

Zustand 5

화면·인터랙션

Three.js r183React Three Fiber 9@react-three/drei 10@react-three/postprocessingTailwind CSS 4Framer Motion

배포·도구

Supabase 2 (Auth · Postgres · Realtime)

트러블슈팅

다중 접속 시 캐릭터 위치가 튀는 현상 개선

문제

여러 사용자가 동시에 마을에 접속해 이동할 때 다른 방문자의 캐릭터 위치가 순간이동하듯 튀거나 끊겨 보이는 현상이 발생했습니다.

로컬 이동 계산 주기와 실시간 네트워크 브로드캐스트 주기가 맞물리지 않고, 원격 좌표를 수신 즉시 그대로 반영한 것이 원인이었습니다.

구현

매 프레임 처리하는 로컬 이동·충돌 계산과 네트워크 상태 전송을 분리해, 위치·회전·동작에 의미 있는 변화가 있을 때만 최대 초당 10회(10Hz) 주기로 좌표를 전송하도록 스로틀링했습니다.

다른 방문자의 좌표를 받을 때마다 바로 옮기면 움직임이 끊겨 보였습니다. 화면에서는 현재 위치와 전달받은 위치 사이를 보간해 이어서 이동하도록 바꿨습니다.

이동 시 렌더링 부하 줄이기

문제

숲·강·벤치 등 지형 오브젝트와 파티클, 여러 캐릭터 애니메이션이 한꺼번에 렌더링되면서 프레임이 저하되어 캐릭터 움직임이 무겁고 느리게 느껴졌습니다.

구현

모든 지형과 장식물을 계속 표시하지 않고, 카메라 거리와 안개 범위에 따라 숨기도록 했습니다.

원격 방문자 캐릭터는 카메라 거리에 따라 애니메이션 업데이트 주기를 낮추고(원거리 6~10fps) 가짜 그림자와 LOD를 적용했으며, 기기 환경에 맞춰 전환할 수 있는 그래픽 품질 프리셋(auto·low·medium·high)을 구성했습니다.

비동기 조회 순서 역전으로 삭제한 방명록이 다시 보이는 문제 수정

문제

방명록 쪽지를 삭제한 직후, 삭제 요청 이전에 출발했던 목록 조회 응답이 뒤늦게 도착하면서 방금 지운 쪽지가 목록과 3D 게시판에 다시 나타나는 레이스 컨디션이 있었습니다.

구현

삭제가 확정되는 시점에 진행 중이던 이전 조회 결과를 무효화하고, UI 목록과 3D 공간의 게시판 표시 상태, 로컬 캐시가 즉시 같은 상태를 바라보도록 동기화 순서를 정리했습니다.