productmaker.프로덕트 메이커
Case Study · BuildSimply

빌드심플리
토지에 직접 배치하는 콘크리트 모듈러 시뮬레이터

빌드심플리(케이씨MMC)는 콘크리트 모듈러 건설 기업입니다. 저희는 토지 위에 모듈을 배치하고 설계 전에 개략 정보를 확인하는 웹 시뮬레이터를 구축했습니다.

설계 전 개략 정보배치 결과 검토
주소→필지 배치클라이언트 자가 시뮬레이션
WebGLThree.js 웹 3D
모듈러공장 제작 + 현장 조립

문제

콘크리트 모듈러 건설의 영업 프로세스에는 구조적인 병목이 있었습니다.

  • 개략 정보를 확인하려면 실제 설계·모델링 선행이 필요했습니다.
  • 영업 담당자가 배치·규모를 설명하려면 매번 설계팀에 의존해야 했음.
  • 클라이언트(토지 소유주)는 자기 땅에 모듈러가 어떤 규모·배치로 들어가는지 직관적으로 감을 잡기 어려움.

구현

Three.js 기반 WebGL 웹 시뮬레이터로 토지 배치와 설계 전 개략 정보 확인을 하나의 흐름으로 묶었습니다.

주소 기반 필지 배치

클라이언트가 주소를 입력하면 해당 필지가 3D 로 불러와지고, 그 위에 콘크리트 모듈러를 직접 배치해 볼 수 있음.

모듈 구성 선택

용도·규모별 모듈 조합을 선택·변경하며 즉시 결과를 확인.

설계 전 개략 정보 확인

선택한 모듈 구성 기준으로 실제 설계 전에 개략 정보를 확인.

모듈러 공법 3D 시각화

모듈러 구성·배치를 3D 로 보여줘 공법 이해와 의사결정을 돕는다.

브랜드 사이트 통합

기업 소개·제품·문의 채널과 연결된 일관된 영업 퍼널.

구현 결과

  • 설계 전에 토지 위 모듈 배치와 개략 정보를 확인하는 흐름을 구현했습니다.
  • 영업 담당자가 배치 결과를 바탕으로 1차 상담을 진행할 수 있습니다.
  • 클라이언트가 자기 토지에 배치를 스스로 미리 검토한 후 문의할 수 있습니다.
  • 브랜드 사이트에서 설치 없이 시뮬레이터를 실행할 수 있습니다.

기술 구성

영역기술
3D 렌더링Three.js · WebGL
에셋glTF
프론트엔드Vue.js · JavaScript

모듈러 3D 에셋은 경량화 파이프라인을 거쳐 데스크톱 브라우저에서 부드럽게 구동됩니다. 영업 프로세스 자체를 웹으로 옮긴 사례로, 유사한 B2B 제조·건설 도메인에 이식이 가능합니다.

프로젝트 상담

현재 요구사항과 운영 조건을 알려주시면 확인한 뒤 회신드립니다. 상담 가능 여부와 다음 준비 항목을 함께 안내합니다.

비슷한 WebGL 시스템 상담