ORS Korea: CNC 머신 인터랙티브 프레젠테이션

Client: ORS Korea Services: 인터랙티브 3D, 오퍼레이터 트레이닝, 산업 장비 프레젠테이션 Duration: 12주 Tech: Three.js, Verge3D, 반응형 HTML/CSS 오버레이

문제 정의

ORS Korea는 한국 중공업 고객을 대상으로 정밀 CNC 머신 툴을 만듭니다. 항공우주 가공, 자동차 부품, 산업용 공구 공급업체가 주된 고객층입니다. 장비는 고가의 자본 투자(대당 $200K–$2M)이고, 영업 사이클은 청중이 다른 두 단계가 결합된 구조입니다. 조달팀과의 1차 상업 대화, 그리고 실제 운용자가 합류하는 2차 기술 대화.

기존 영업 자료는 상업 대화에는 그럭저럭 맞았습니다. 광택지 브로슈어, 스펙 시트, 제품 사진. 기술 대화에는 맞지 않았습니다. 오퍼레이터는 기계의 메커니즘을 알고 싶어 합니다. 툴 홀더 터렛, 축 어셈블리, 절삭 헤드, 서비스 접근 패턴, 정비 주기. 브로슈어에는 어느 것도 담기지 않습니다.

요청은 이러했습니다. 영업 피치와 오퍼레이터 트레이닝, 두 청중을 단일 산출물로 동시에 대응할 수 있는 브라우저 기반 인터랙티브 3D 프레젠테이션.

만든 것

ORS Korea의 플래그십 CNC 머신을 단일 URL에서 두 청중 모두에게 통하도록 설계한 브라우저 기반 인터랙티브 워크스루.

• 풀 머신 3D 씬. ORS Korea의 CAD에서 모델링한 CNC 인클로저 전체, 브라우저 딜리버리에 맞춰 최적화
• 분해도와 컴포넌트 뷰. 하위 시스템 어느 것이든 분리해 분해할 수 있어 부품 결합이 보입니다. 절삭 헤드, 툴 홀더 터렛, 축 어셈블리, 컨트롤 캐비닛, 쿨런트 시스템. 각각 컴포넌트 단위 탐색
• 가이드 챕터 내비게이션. 영업 프레젠테이션을 위한 스크립트 워크스루. 8개 챕터, 각 챕터마다 카메라 위치와 나레이션 오버레이
• 자유 탐색 모드. 운용자가 정해진 경로 없이 기계를 둘러볼 수 있는 토글, 오빗 카메라와 하위 시스템으로의 가속 줌 포함
• 어노테이션 레이어. 모든 주요 컴포넌트에 핫스팟이 있어 사양, 운용 디테일, 서비스 접근 노트가 노출됩니다
• 영업 프레젠테이션 모드. 회의실 데모용 풀스크린 프레젠테이션 뷰, 키보드로 진행
• 오퍼레이터 트레이닝 모드. 사이드 패널 UI에 상세 스펙 시트와 기술 참고용 PDF 링크

작업 방식

1주차–2주차. 킥오프, 청중 매핑(영업 vs 오퍼레이터 트레이닝), CAD 검토.

3주차–5주차. CAD 변환과 최적화. 제공된 CAD는 엔지니어링급이라 브라우저 딜리버리에는 과하게 밀도가 높았습니다. 디시메이션보다 리토폴로지가 깔끔한 부위는 처음부터 다시 만들었습니다.

6주차–7주차. 기본 3D 씬, 라이팅, 머티리얼 작업. 7주차 말 스테이징 첫 빌드.

8주차–9주차. 스크립트 워크스루. 카메라 안무, 어노테이션 레이어, 나레이션 오버레이. 자유 탐색 토글과 오퍼레이터 트레이닝 모드 UI.

10주차–11주차. 카피 패스(영어 우선, 한국어는 예산 사유로 이후 버전으로 이월), 클라이언트 리뷰, 수정.

12주차. ORS Korea 영업 인력의 일반 하드웨어(중급 노트북)에서 성능 튜닝, 런칭, 영업팀 트레이닝.

달라진 점

ORS Korea 영업팀은 대부분의 기술 피치에서 첫 15분을 인터랙티브 프레젠테이션으로 대체했습니다. 2차 미팅 전에 이 도구를 본 프로스펙트는 더 잘 준비된 상태로, 더 날카로운 기술 질문을 들고, 더 짧은 결정 사이클로 들어왔습니다.

배운 것

이중 청중용 3D 도구에는 명시적인 모드 전환이 필요합니다. 초기 버전은 단일 UI로 두 청중을 동시에 대응하려 했습니다. 영업 인력은 너무 복잡하다고 했고, 오퍼레이터는 너무 얕다고 했습니다. 모드 전환 토글(영업 프레젠테이션 vs 오퍼레이터 트레이닝)이 양쪽 문제를 각자에게 필요한 UI를 주는 방식으로 풀었습니다.

엔지니어링팀의 CAD는 웹용으로는 거의 항상 잘못된 자료입니다. CAD 파일에는 브라우저 프레젠테이션에는 누구도 필요로 하지 않는 디테일이 수십 겹 쌓여 있습니다. 내부 나사산, 볼트 패턴, 공차 표시. 디시메이션만으로는 못생긴 결과가 나옵니다. 처음부터 다시 만드는 게 초기에는 시간이 더 들지만 더 작은 파일 크기로 더 나은 품질을 줍니다. 이후의 모든 CNC·정밀 기계 프로젝트에서 그 트레이드오프가 유효했습니다.

어노테이션 핫스팟이 가장 많이 쓰이는 기능입니다. 영업 인력은 처음에 스크립트 워크스루를 시연하고 싶어 했습니다. 오퍼레이터는 곧장 핫스팟으로 갔습니다. 한 달 안에 영업팀도 스크립트 워크스루 대신 핫스팟을 클릭하기 시작했습니다. 핫스팟을 1차 내비게이션으로 두는 패턴이 이후 산업 장비 프레젠테이션 설계 방식에 반영됐습니다.

스택

• 런타임: Three.js + Verge3D
• UI: Next.js App Router + Tailwind, 모드 전환 상태는 URL 쿼리 파라미터에 두어 딥 링크 가능
• 에셋: Draco 압축 GLTF, 모든 하위 시스템 분해 포함 풀 CNC 모델 약 8MB
• 성능 기준: 2019 MacBook Air에서 60fps, 2020 iPad에서 30fps
• 호스팅: Vercel, 재배포 없이 스펙 콘텐츠를 갱신할 수 있는 클라이언트 접근 가능 어드민 엔드포인트 포함

비슷한 작업이 필요하신가요

산업 장비, 머신 툴, 영업과 운용 트레이닝 두 청중을 모두 대응해야 하는 복합 자본재. 듀얼 모드 패턴이 잘 맞습니다. 대당 $100K가 넘고 판매 후 기술 교육이 필요한 기계를 파신다면 같은 아키텍처가 적용됩니다.

두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오.

전체 작업 보기 →