DY Engineering: 배터리 재활용 시스템
Client: DY Engineering (DYENG) Services: 인터랙티브 3D, 공정 시각화, 안전 어노테이션 Duration: 12주 Tech: Three.js, Verge3D, 베이크드 라이팅 + 오버레이
문제 정의
DY Engineering(DYENG)은 폐리튬이온 배터리를 재활용하는 산업 시스템을 구축합니다. 이 공정은 EV 배터리 셀 안에 들어 있는 가치 있는 금속 혼합물, 이른바 "블랙매스"를 추출하여 재처리에 적합한 상태로 가공합니다. 배터리 재활용이 글로벌 산업의 중심으로 떠오르면서 DYENG의 시스템은 니치에서 핵심으로 옮겨갔습니다. 이제 영업 미팅의 상대는 전통적인 산업 구매자뿐 아니라 정부 규제 기관, 투자은행, EV 제조사로 확장되어 있습니다.
영업 측면의 문제는 분명합니다. 같은 시스템을 두고 청중마다 필요한 디테일의 깊이가 다릅니다. 규제 기관은 안전성과 격납을 봅니다. 투자자는 처리 용량과 규모를 봅니다. 산업 구매자는 운영 사양과 정비를 봅니다. 기존 자료(슬라이드 덱, 플랜트 사진, PDF 공정도)로는 세 청중을 동시에 상대할 수 없었습니다.
만든 것
DYENG의 블랙매스 재활용 공정을 다단계로 구현한 인터랙티브 3D 시각화입니다. 공정 단계 선택, 사양 오버레이, 안전·운영 어노테이션이 필요할 때만 노출됩니다.
- 공정 단계 시퀀싱. 사용자는 배터리 입고부터 파쇄, 선별, 블랙매스 추출, 출고 포장까지 전체 파이프라인을 단계별로 따라갑니다
- 안전 어노테이션 레이어. 어느 단계에서든 안전 오버레이를 열어 격납, 추출 시스템, 작업자 보호 디테일을 확인할 수 있습니다
- 운영 사양 패널. 처리 용량 수치, 사이클 타임, 전력 소비, 격납 사양
- 다중 청중 뷰. "규제 기관 뷰"는 안전·격납을, "투자자 뷰"는 처리 용량·규모를, "운영자 뷰"는 정비 접근 지점을 강조합니다. 같은 씬, 다른 어노테이션 레이어
- 딥 링크. 모든 단계가 공유 가능한 URL을 갖습니다. DYENG 영업 담당자는 특정 단계를 특정 청중에게 곧장 전송할 수 있습니다
작업 방식
1주차–2주차. 킥오프, 청중 매핑. DYENG 영업 담당자 세 명을 인터뷰하여 규제 기관·투자자·산업 구매자가 실제로 던지는 질문을 파악했습니다. 그 결과를 세 가지 어노테이션 레이어 범위 정의에 활용했습니다.
3주차–5주차. 공정 단계 모델링. 6개 주요 단계를 DYENG 한국 시설의 도면과 참조 사진으로부터 모델링했습니다.
6주차–7주차. 어노테이션 레이어 시스템. 모든 단계가 세 가지 어노테이션 세트(안전, 투자, 운영)를 갖고 상단 모드 토글로 전환되는 데이터 기반 오버레이 아키텍처를 구축했습니다.
8주차–9주차. UI 레이어. 단계 스텝퍼, 모드 스위처, 사양 패널 디자인, 딥링크 라우팅. 첫 통합 클라이언트 리뷰.
10주차–11주차. 카피 점검, 규제 언어 검토, 성능 튜닝.
12주차. DY Engineering의 데모 서브도메인에 런칭, DYENG 영업팀 교육, 분석 인스트루멘테이션 적용.
달라진 점
이제 DYENG 영업팀은 첫 접점으로 특정 단계 URL을 특정 잠재고객에게 보냅니다. PDF도, 슬라이드 덱도, 40분짜리 콜도 아닙니다. 잠재고객은 해당 단계를 직접 조작하고, 자기에게 필요한 부분을 흡수한 뒤, 이미 맥락을 파악한 상태로 미팅을 잡습니다.
배운 것
청중 뷰 셋이 한 개 많았습니다. 초기 버전에는 어노테이션 레이어가 네 개였습니다. "정부 컴플라이언스"를 "안전"과 합쳤습니다. 실제 사용에서 두 청중이 사실상 겹쳤기 때문입니다. 모드 수가 줄어들수록 활용도는 날카로워졌습니다.
딥 링크는 과소평가되어 있습니다. 특정 어노테이션 레이어가 적용된 특정 공정 단계로 바로 이어지는 URL이 가장 많이 쓰이는 단일 기능이 되었습니다. 영업팀은 이제 잠재고객 유형별로 저장한 URL 라이브러리를 작게 운용합니다.
안전에 대한 솔직한 표시가 숨기는 것보다 더 큰 신뢰를 만듭니다. 규제 기관 뷰는 격납 실패 시나리오와 그 완화 방식을 그대로 노출합니다. 약점을 시인하는 것처럼 보일까 우려했습니다. DYENG의 규제 기관 잠재고객들은 정반대로 받아들였습니다. 기술적 성숙도와 청중에 대한 존중으로 읽힌 것입니다. 수정 없이 출시했습니다.
스택
- 런타임: Three.js + Verge3D
- UI: 라우팅과 오버레이는 Next.js App Router, 레이아웃은 Tailwind
- 에셋: Draco 압축 GLTF. 전체 파이프라인 약 9MB
- 어노테이션 아키텍처: 단일 JSON 소스 기반 데이터 드리븐, 캔버스 위 HTML로 렌더링되는 세 개의 오버레이 레이어
- 라우팅: 쿼리 파라미터를 통한 딥링크 지원(
?stage=sorting&view=safety) - 호스팅: DYENG 서브도메인의 Vercel
비슷한 작업이 필요하신가요
같은 시스템을 세 명의 다른 구매자에게 세 가지 다른 디테일 수준으로 설명해야 할 때, 다중 청중 산업 시각화는 강력한 패턴입니다. 제품의 형태가 그러하다면, 두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오.






