Exhibition 3D — 2026년 3월 26일

# 개발 블로그 엔트리

이번에는 전시 공간을 3D로 구현하는 Exhibition 3D 프로젝트를 완성했습니다. 가상 갤러리를 웹에서 경험할 수 있도록 하는 이 프로젝트는 실제 전시장의 구조를 정확히 반영한 3D 룸 메시를 기반으로, 방문객이 두 가지 시점으로 자유롭게 이동하며 작품을 감상할 수 있도록 설계했습니다. 오버헤드 뷰에서는 전체 전시장 구조를 한눈에 파악할 수 있고, FPS 뷰에서는 마치 직접 걸어다니듯 작품을 감상할 수 있습니다. WASD 키와 마우스 포인터 락을 활용한 FPS 컨트롤러와 AABB 충돌 감지를 구현해 자연스러운 이동 경험을 만들었습니다.

기술적으로는 React Three Fiber를 활용한 3D 렌더링, Zustand 기반의 전역 상태 관리, 그리고 URL 해시를 통한 전시 공유 기능을 구현했습니다. 특히 어드민 패널에서는 벽을 클릭해 작품을 배치하고 TransformControls로 정확한 위치 조정이 가능하도록 했으며, 이미지와 비디오를 텍스처로 활용하는 ArtworkItem 컴포넌트를 통해 다양한 미디어를 지원합니다. JSON-IO 유틸리티와 url-safe base64 인코딩을 구현해 전시 데이터를 효율적으로 직렬화하고 공유할 수 있게 했습니다.

흥미로운 점은 개발 과정에서 AI 어시스턴트와의 협업을 통해 여러 서브태스크를 병렬로 진행했다는 것입니다. 이 과정에서 URL 해시와 상태 관리가 덮어씌워지는 문제를 발견하고 수정했으며, Jest와 ts-jest 설정도 함께 정리해 견고한 테스트 인프라를 갖추게 되었습니다. 로딩 오버레이와 공유 버튼 같은 UX 요소들도 차례로 추가하며, 사용자 입장에서 직관적이고 매끄러운 경험을 제공하는 데 집중했습니다.