"CAD 파일은 있는데, 이걸 웹에서 보여줄 수 있나요?" 제조업체로부터 자주 받는 질문입니다. 답은 "가능합니다"이고, 그 사이에는 몇 가지 과정이 있습니다. 실제로 두코 디지털 카탈로그와 빌드심플리 BIM 3D 뷰어에서 이 파이프라인을 프로덕션으로 돌리고 있습니다. 비개발자도 이해할 수 있도록 3D 파이프라인을 정리합니다.

전체 흐름

`

CAD 파일 (STEP/IGES)

↓ 변환

웹용 3D 파일 (glTF/glb)

↓ 최적화

경량화된 3D 파일

↓ 탑재

웹 3D 뷰어에서 표시

`

크게 네 단계입니다. 각 단계에서 무슨 일이 일어나는지, 무엇을 주의해야 하는지를 설명합니다.

1단계: CAD 파일 확보

STEP(.stp), IGES(.igs) 파일은 제조업에서 사용하는 3D 설계 데이터입니다. SolidWorks, CATIA, Fusion 360 같은 소프트웨어에서 만들어지고, 제품의 정확한 형상 정보가 담겨 있습니다.

이 파일이 있으면 3D 모델을 처음부터 만들 필요가 없습니다. 여기가 출발점입니다.

CAD 데이터가 없다면? 제품 사진, 도면, 실측 데이터를 기반으로 3D 모델러가 직접 만들어야 합니다. 이 과정은 시간과 비용이 추가됩니다. 그래서 CAD 데이터가 있으면 절반은 끝난 것이라고 말합니다.

2단계: 웹용 포맷으로 변환

CAD 파일(STEP)은 웹 브라우저가 직접 읽을 수 없습니다. STEP은 수학적 곡면(NURBS)으로 형상을 표현하는데, 웹에서 3D를 그리는 WebGL은 삼각형 폴리곤만 이해합니다.

그래서 변환이 필요합니다. 수학적 곡면을 삼각형 조각으로 쪼개는 과정(테셀레이션)을 거쳐, 웹 표준 포맷인 glTF/glb로 만듭니다.

여기서 주의할 점: 삼각형을 많이 쪼개면 원래 곡면에 가깝지만 파일이 커지고, 적게 쪼개면 가볍지만 각이 보입니다. 제품의 용도에 따라 적절한 균형점을 찾아야 합니다.

3단계: 최적화

변환만 하면 끝이 아닙니다. 변환된 파일 그대로는 웹에서 쓰기에 너무 무거운 경우가 많습니다.

폴리곤 수 조정

제조용 CAD는 극도로 정밀합니다. 나사산 하나하나, 미세한 곡면까지 전부 표현합니다. 하지만 웹에서 보여줄 때 이 정밀도가 전부 필요한 것은 아닙니다. 보이지 않는 내부 면을 제거하고, 불필요한 디테일을 줄이는 작업이 필요합니다.

텍스처 관리

CAD 파일에는 재질 정보가 없는 경우가 많습니다. 형상만 있고, 색상이나 질감은 별도로 입혀야 합니다. 금속, 플라스틱, 유리 같은 재질을 PBR(물리 기반 렌더링) 방식으로 설정합니다.

텍스처 해상도도 관리해야 합니다. 4096x4096 텍스처가 멋있어 보이지만, 모바일에서는 1024x1024로도 충분합니다. 필요 이상의 해상도는 로딩 시간만 늘립니다.

파일 압축

Draco 압축을 적용하면 파일 크기를 80~90% 줄일 수 있습니다. 20MB짜리 파일이 200KB로 줄어드는 것입니다. 모바일 환경에서 빠른 로딩의 핵심입니다.

4단계: 웹 뷰어 탑재

최적화된 3D 파일을 웹 뷰어에 올립니다. 사용자가 마우스나 터치로 회전, 확대, 축소할 수 있고, 필요에 따라 재질 변경, 부품 분해, 옵션 선택 같은 인터랙션을 추가합니다.

이 단계에서 중요한 것:

• 로딩 경험: 3D가 로드되는 동안 프로그레스 바나 스켈레톤을 보여줘야 합니다. 빈 화면을 3초 이상 보면 사용자는 이탈합니다
• 모바일 대응: 터치 제스처, 화면 크기 대응, 저사양 기기 폴백
• CDN 배포: 3D 파일을 전 세계 어디서든 빠르게 로드할 수 있도록 CDN에 배포

CAD 데이터가 있다면 절반은 끝난 것

파이프라인에서 가장 비용이 큰 부분은 3D 모델을 확보하는 것입니다. CAD 데이터가 있으면 이 단계를 건너뛸 수 있습니다. 변환, 최적화, 뷰어 개발만 하면 됩니다.

제조업체 중 상당수가 수년간 축적한 STEP 파일을 서랍 속에 두고 있습니다. 그 파일이 웹 3D의 출발점이라는 것을 모르는 경우가 많습니다. 가지고 있는 데이터를 활용하는 것이 가장 효율적인 도입 방법입니다.

*CAD 데이터를 웹 3D로 전환하는 것에 대해 상담이 필요하시다면, 프로젝트 상담을 통해 문의해 주세요.*