빌드심플리
내 땅에 모듈러를 놓아 보는 배치 시뮬레이터
빌드심플리(케이씨MMC)는 콘크리트 모듈러 건설 회사입니다. 전에는 설계와 모델링이 끝나야 견적이 나와 첫 상담에서 보여줄 것이 적었습니다. 건축주가 주소만 넣으면 그 필지 위에 모듈러를 직접 놓아 보고 설계 전에 개략 정보를 확인하는 웹 시뮬레이터를 만들었습니다.
초기 배치 검토개략 정보 확인
주소만 넣으면 필지 위에 배치건축주가 직접 검토
WebGLThree.js 웹 3D
모듈러공장에서 만들어 현장에서 조립
문제
초기 상담에서는 토지 위 배치 가능성과 개략 정보를 바로 확인하기 어려웠습니다.
- 견적을 받으려면 설계와 모델링이 먼저 끝나야 해서 첫 상담부터 견적까지 오래 걸렸습니다.
- 영업 담당자가 비용 범위를 답하려면 매번 설계팀에 의존해야 했습니다.
- 건축주는 자기 땅에 모듈러가 어떤 규모로 어떻게 들어가는지 감을 잡기 어려웠습니다.
- 첫 상담에서 배치 조건을 직접 살펴볼 도구가 필요했습니다.
해결 방식
Three.js 기반 WebGL 웹 시뮬레이터로 토지 배치와 개략 정보 확인을 하나의 흐름으로 묶었습니다.
주소 기반 필지 배치
건축주가 주소를 넣으면 해당 필지가 3D로 불러와지고, 그 위에 콘크리트 모듈러를 직접 놓아 볼 수 있습니다.
모듈 구성 선택
용도와 규모별 모듈 조합을 바꿔 가며 결과를 바로 확인합니다.
모델링 전 개략 정보
선택한 모듈 구성을 기준으로 설계 전에 개략 정보를 확인합니다.
모듈러 공법 3D 시각화
모듈러 구성과 배치를 3D로 보여줘 초기 검토에 참고할 수 있게 했습니다.
브랜드 사이트 통합
기업 소개, 제품 정보와 문의 채널을 같은 사이트 안에서 연결했습니다.
결과
- 본 설계 전에 초기 배치를 검토하고 개략 정보를 확인할 수 있게 했습니다.
- 영업 담당자가 설계팀을 기다리지 않고 첫 상담에서 배치안을 보여줄 수 있게 됐습니다.
- 건축주가 자기 토지의 배치를 스스로 먼저 검토한 뒤 문의합니다.
- 브랜드 사이트에서 설치 없이 바로 쓰는 시뮬레이터입니다.
기술 구성
| 영역 | 기술 |
|---|---|
| 3D 렌더링 | Three.js · WebGL |
| 에셋 | glTF |
| 프론트엔드 | Vue.js · JavaScript |
브라우저에서 3D를 보여줘야 하나요?
어떤 기기에서 누가 보는지 알려주세요. 어디까지 가능한지 답하겠습니다.
프로젝트 문의
