Dowon APEX: 하수처리장 워크스루
Client: Dowon APEX Corporation (DWA) Services: 인터랙티브 3D, 공정 시각화, 산업 장비 카탈로그 Duration: 14주 Tech: Three.js, Verge3D, 베이크드 라이팅
문제 정의
Dowon APEX는 1996년부터 하수처리 장비(슬러지 스크래퍼, 바스크린, 침전조, 벨트 컨베이어)를 제조해 왔으며, 19개국으로 수출하고 있습니다. 카탈로그에는 수십 종의 장비가 각기 다른 사용 환경(생활하수, 산업폐수, 댐 유지보수)에 맞춰 정리되어 있습니다.
영업 과정이 더뎠던 이유는 장비가 맥락 안에서만 의미를 갖기 때문이었습니다. 카탈로그에 실린 슬러지 제거기 한 대는 왜 중요한지 설명해 주지 못합니다. 반면 처리장 안에 설치되어 상류의 바스크린, 하류의 벨트 컨베이어와 연결된 슬러지 제거기는 그 자체로 설명됩니다.
요청은 명확했습니다. 브라우저 안에 하수처리장 전체를 구현하고, Dowon의 모든 카탈로그 장비를 실제 운용 맥락에서 선택할 수 있도록 만들어 달라는 것이었습니다.
만든 것
브라우저 기반의 하수처리장 전체 워크스루입니다. 외관 구조물, 콘크리트 수로, 구조 프레임, 그리고 처리 장비의 전체 시퀀스를 담았습니다.
- 플랜트 스케일 환경. 외부 건물, 천창, 콘크리트 처리 수로, 녹색 철골 프레임, 잔디와 하늘 표현
- 장비 카탈로그 모드. 이전·다음 스텝퍼로 20여 종의 장비를 순차적으로 살펴봅니다. 각 장비마다 전용 카메라 위치, 흰색 외곽선으로 강조된 컴포넌트, 상세 정보 패널이 따라옵니다
- 스펙 시트 통합. 모든 장비 패널이 실제 사양을 노출합니다. 치수, 처리 용량, 속도, 재질, 사용 사례. 마케팅 문구가 아닙니다. 견적 단계에서 디스트리뷰터가 실제로 필요로 하는 사양입니다
- 닫을 수 있는 패널. 3D 씬은 항상 인터랙티브 상태를 유지합니다. 패널은 모달 오버레이일 뿐 상시 HUD가 아닙니다
- 일관된 브랜딩. DWA 코퍼레이트 락업은 우상단에, 사운드와 정보 컨트롤은 좌상단에. 깔끔하고 거슬리지 않는 UI
작업 방식
1주차–3주차. 킥오프, 범위 정의, 카탈로그 감사. Dowon이 24종의 장비 도면을 제공했습니다. 영업에서 가장 자주 요청되는 18종을 우선순위로 잡고, 나머지는 2단계 추가 가능성으로 분류했습니다.
4주차–6주차. 플랜트 환경 구축. Dowon이 제공한 현장 사진을 바탕으로 플랜트 외관과 내부 셸을 모델링하고, 장비 배치를 블록아웃했습니다.
7주차–9주차. 개별 장비 구축. 모든 기계가 다음 단계를 거쳤습니다. CAD 임포트 · 최적화 · 머티리얼 적용 · 플랜트 씬과의 통합 · 핫스팟 및 어노테이션 레이어.
10주차–11주차. UI 레이어. 스텝퍼, 정보 패널 디자인, 닫을 수 있는 모달 패턴, 사운드 토글. 클라이언트 리뷰.
12주차–13주차. 카피 전체 점검(영문), 성능 튜닝, 모바일 적응(와이드스크린 레이아웃을 태블릿용으로 재구성).
14주차. 런칭, 디스트리뷰터 대상 롤아웃, 분석 베이스라인 설정.
달라진 점
이제 Dowon의 디스트리뷰터는 영업 미팅의 첫 단추로 플랜트 워크스루를 시연합니다. 3D 도구가 과거 슬라이드 기반 제품 설명에서 첫 40분을 차지하던 부분을 대체했습니다.
배운 것
산업 플랜트에는 베이크드 라이팅이 실시간 라이팅보다 낫습니다. 플랜트 환경에 실시간 PBR 라이팅을 검토하다가 베이킹 방식으로 전환했습니다. 로드 용량이 약 14MB에서 7MB로 줄었고, 구형 하드웨어에서도 60fps에 도달했습니다. 그리고 누구도 하수처리장의 조명을 감상하러 들어오지 않습니다.
스펙 시트 데이터가 곧 제품입니다. 초기 정보 패널은 마케팅 카피가 위에 있고 사양이 아래쪽에 정리되어 있었습니다. 디스트리뷰터들은 곧장 마케팅 부분을 건너뛰고 사양으로 향했습니다. 우선순위를 뒤집었습니다. 사양을 위에, 맥락 한 문장을 아래에. 패널 체류 시간이 거의 두 배가 되었습니다.
카탈로그에는 자유 탐색보다 스텝퍼 내비게이션이 낫습니다. 두 방식을 모두 프로토타이핑했습니다. 디스트리뷰터들은 안내받기를 원했습니다. 자유 탐색을 권하면 한 번 둘러보고 떠나갑니다. 안내를 받으면 전체 시퀀스에 끝까지 머물고, 더 많은 카탈로그 항목을 접합니다. 자유 탐색은 엔지니어 대상 변형에서 토글 옵션으로 남겨 두었습니다.
스택
- 런타임: Three.js + Verge3D
- UI: 바닐라 TypeScript + HTML/CSS 오버레이(이 규모에는 프레임워크 오버헤드 불필요)
- 에셋: Draco 압축 GLTF. 플랜트 전체와 18종 장비 합산 약 7MB
- 라이팅: Blender에서 베이크한 앰비언트 오클루전 + 라이트맵
- 호스팅: Vercel, CDN 캐시
- 성능 기준: 2020 MacBook Air에서 60fps, 2021 iPad에서 30fps
비슷한 작업이 필요하신가요
공정 스케일 시각화는 맥락 속에서만 의미가 살아나는 산업 제품에 잘 맞습니다. 플랜트 전체, 조립 라인 전체, 시스템 전개 전체. 해당하는 제품이 있으시다면 두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오.






