브라우저에서 걸어 다니는 3D 전시장 FRAME

전시·컨퍼런스 공간을 웹 3D 로 만든 포너즈의 전시 공간입니다. 관람객은 설치 없이 부스와 제품 사이를 직접 걸어 다니며 봅니다.

고객사
포너즈
분야
전시
기술
React · TypeScript · Three.js · React Three Fiber · Rapier · Blender · GLB

소개

온라인으로 옮긴 전시장

포너즈는 건축 예정 공간과 실제 공간을 웹 3D 로 만드는 서비스를 만들었습니다. 브라우저에서 직접 이동하며 봅니다. 그 엔진으로 전시·컨퍼런스 공간 FRAME 을 만들었습니다. 같은 엔진의 첫 적용 분야는 재건축 단지입니다. 서비스는 2026년 9월 18일 머니투데이 보도로 공개했습니다.

문제

행사 기간에만 열리고, 사진으로는 남지 않는 전시

박람회와 기업 전시관은 장소와 기간에 묶여 있습니다. 현장에 오지 못한 고객은 사진과 영상으로 봅니다. 사진은 부스의 분위기와 제품의 배치 맥락을 담지 못합니다. 행사가 끝나면 전시 콘텐츠는 홍보 자료 몇 장으로 줄어듭니다.

온라인 전시관을 만드는 선택지도 둘로 갈립니다. 360도 사진을 이어 붙인 가상 전시관은 정해진 지점 사이만 오갑니다. 제품을 가까이서 돌려 볼 수 없습니다. 게임 엔진으로 만든 3D 전시관은 자유롭지만 설치와 고사양 기기가 필요해 링크로 나눠 보기 어렵습니다.

포너즈는 이 사이를 겨냥해 전시장 데모를 만들었습니다. 브라우저에서 열리고, 관람객이 스스로 동선을 정하고, 제품 앞에서 상세 정보를 엽니다.

해결

부스 하나의 품질을 먼저 확정하고 전시장 전체로 넓힌 순서

포너즈는 이동 가능한 최소 공간을 먼저 만들고, 기준 부스 하나의 품질을 확인한 뒤 전체로 넓혔습니다. 처음에는 30×30m 홀에 부스 4개, 관람석 24석이었습니다. 지금은 90×90m 메인 홀에 부스 26개, 관람석 144석이고, 두 홀은 복도로 이어집니다.

  • 자유 보행: WASD 와 마우스로 걷고 시선을 돌립니다. 부스·진열장·의자는 통과하지 못하고, 경사로도 걷습니다.
  • 제품 패널: 제품 앞에서 E 키를 누르면 설명 패널이 열리고, 3D 모델을 전체·정면·뒷면·자동 회전으로 봅니다. 가상 콘셉트 제품에는 그렇게 표시합니다.
  • 부스 구조 네 가지: LINE·CORNER·ISLAND·DEMO 구조에 상담대·광고·화분을 달리 두어 부스마다 성격을 나눕니다.
  • 무대와 객석: 전시장 한가운데 무대 화면과 객석을 두어 발표 공간으로도 씁니다.
  • 배치도: 우하단 CAMPUS DIRECTORY 배치도에 현재 위치가 표시됩니다.
  • 관람 시점 전환: ?view=overview 로 사진 감상 시점, ?hall=legacy 로 기존 갤러리만 봅니다.
90×90m 메인 전시장을 걸으며 우하단 배치도로 현재 위치를 확인한다
전시물을 누르면 제품 패널에서 3D 모델을 돌려 보고 소개를 읽는다
가상 콘셉트 제품도 앞·뒤·자동 회전으로 형태를 살펴본다

사진을 먼저 나누고, 그다음 Blender 로 만든다

전체 분위기 사진 한 장으로는 부스 치수와 조립을 정할 수 없습니다. 배경·구조·가구·화면·제품·식물로 나눈 구성요소 참고 이미지 37종을 먼저 만들었습니다. 여기에 원형 규격 37, 도면 24, 조립 JSON 8, 재질 8종을 붙여 제작 패킷을 꾸렸습니다. Blender 제작은 이 패킷으로 들어갑니다. 사진 ID·제목·출처·치수는 이미지와 함께 저장해 다음 공간에서 다시 씁니다.

편집 원본·웹 자산·실제 화면을 서로 다른 산출물로 본다

Blender 원본, 웹용 GLB, 실제 브라우저 화면은 각각 다시 열어 확인합니다. 스크립트를 짰다고 모델이 생긴 것이 아니고, Blender 렌더가 곧 웹 화면도 아닙니다. 배포에는 실제 실행에 필요한 웹 자산 166개(약 227MB)만 추립니다. 원본과 참고 이미지는 저장소 밖에 보관합니다.

완료 조건을 셋으로 나눈다

자동 시험 통과, 눈으로 본 승인, 목표 기기에서의 성능은 서로 다른 완료 조건입니다. 의자가 무대를 등진 일, 안내판 화면이 본체와 어긋난 일, 지운 간판의 바닥 흔적이 그랬습니다. 자동 시험은 통과했지만 눈으로 보고 잡았습니다. 원인 형상과 재생성 경로까지 고쳐 회귀 시험에 넣었습니다.

결과

링크 하나로 열리는 전시장

지금은 FRAME 데모를 공개했습니다. 관람객은 브라우저에서 부스 26개와 제품 사이를 걷고 제품 패널을 열어 봅니다. 데모의 모델은 제작 중인 콘셉트이며 최종 실사 품질 승인을 뜻하지는 않습니다.

전시 관람
이전현장 방문(사람) 또는 사진·영상 열람(사람)
이후브라우저에서 부스 사이를 걷는다(시스템) → 관심 제품 앞에 선다(사람)
제품 확인
이전도록·제품 페이지의 사진(사람)
이후제품 패널에서 3D 모델을 돌려 보고 설명을 읽는다(시스템)
행사 뒤 활용
이전사진 몇 장으로 정리(사람)
이후같은 전시장 링크를 계속 열어 둔다(시스템)

같은 엔진을 쓰는 적용 분야는 전시·컨퍼런스와 재개발·재건축 단지입니다. 모델하우스·기업 쇼룸·관광시설·대학 캠퍼스로 넓힐 계획입니다.

아직 안 되는 것도 있습니다. 모바일은 화면과 제품 선택까지 되고 보행 조작은 다음 단계입니다. 여러 관람객이 같은 공간에 동시에 들어오는 기능, 음성 안내, 예약·결제는 범위 밖입니다.

부스마다 선반·조명·스크린을 달리해 전시 주제를 나눈다
전시장 한가운데에 무대와 객석을 두어 발표 공간으로도 쓴다

관련 보도 머니투데이 2026-09-18

이 사례 공유

비슷한 프로젝트를 준비하고 있다면

무엇을 만들지 아직 정리되지 않아도 괜찮습니다. 지금 상황을 알려 주시면 진행 방식과 범위를 함께 잡습니다.

상담 신청하기