CAD 파일을 웹 3D로: STP에서 디지털 카탈로그까지의 파이프라인

· --- · --- ·

· 용도 · 제조/설계 · 실시간 렌더링 ·

· 형상 표현 · NURBS (수학 곡면) · 메시 (삼각형 폴리곤) ·

· 재질 정보 · 없음 (형상만) · PBR 재질 포함 ·

· 파일 크기 · 수십 MB · 수백 KB ~ 수 MB ·

· 정밀도 · 극도로 높음 (제조용) · 시각적으로 충분한 수준 ·

STP는 NURBS 곡면으로 형상을 표현합니다. 수학적으로 완벽한 곡면이지만, GPU가 직접 렌더링할 수 없습니다. 이를 삼각형 메시로 테셀레이션(Tessellation) 하는 과정이 필요합니다.

이 과정에서 핵심 결정은 테셀레이션 품질입니다. 삼각형을 많이 쪼개면 원본에 가까운 부드러운 곡면이 되지만 파일이 커지고, 적게 쪼개면 가볍지만 각이 보입니다. 제품의 용도와 디바이스 환경에 따라 최적의 균형점을 찾아야 합니다.

변환 시 처리해야 할 것들

단순히 형상만 변환하면 끝이 아닙니다.

  • 파트 구조 보존: CAD 파일에는 어셈블리 구조(부품 간 계층 관계)가 있습니다. 뚜껑, 몸체, 펌프 같은 파트 구분이 웹에서도 유지되어야 각 파트별로 재질을 바꾸거나 분해 뷰를 보여줄 수 있습니다.
  • 노멀 최적화: 테셀레이션으로 생성된 메시의 법선(Normal) 벡터를 부드럽게 처리해야 렌더링 시 곡면이 자연스럽게 보입니다. CAD의 NURBS 정보를 활용해 스무스 노멀을 생성합니다.
  • 메시 최적화: 불필요한 내부 면 제거, 중복 정점 병합, 인덱스 버퍼 최적화. 웹 환경에서의 로딩 속도와 렌더링 성능에 직결됩니다.
  • Draco 압축: 변환된 glb를 Draco 압축하면 파일 크기를 80~90% 줄일 수 있습니다. 20MB STP → 2MB glb → 200KB 압축 glb. 모바일에서도 빠르게 로드됩니다.

수천 개를 동시에: 대량 변환 엔진

제조사의 제품 라인업이 10개라면 수동 변환도 가능합니다. 하지만 화장품 용기 제조사처럼 펌프, 에어리스, 튜브, 캡 등 수천~수만 개의 SKU를 보유한 경우는 다릅니다.

배치 변환 아키텍처

[STP 파일 저장소]
    ↓ 파일 감지 (신규/변경)
[변환 큐]
    ↓ 워커 풀 (병렬 처리)
[변환 엔진] × N대
    ├── 테셀레이션
    ├── 메시 최적화
    ├── 노멀 생성
    └── Draco 압축
    ↓
[glb 저장소 + CDN]
    ↓
[웹 3D 뷰어]

핵심 설계 포인트:

  1. 큐 기반 비동기 처리: STP 파일이 업로드되면 변환 큐에 등록되고, 워커가 순차적으로 처리합니다. 수만 개의 파일을 한 번에 넣어도 서버가 다운되지 않습니다.
  1. 워커 병렬화: 변환 엔진을 여러 대 띄워 동시 처리합니다. 워커 수를 늘리면 처리 속도가 선형으로 증가합니다.
  1. 증분 변환: 이미 변환된 파일은 건너뛰고, 신규 또는 변경된 STP 파일만 처리합니다. 해시 기반으로 변경 여부를 판단합니다.
  1. 품질 프리셋: 용도에 따라 변환 품질을 선택합니다. 썸네일용(저품질/초경량), 웹 뷰어용(중품질), 상세 뷰용(고품질) 등 하나의 STP에서 여러 품질의 glb를 생성할 수 있습니다.

변환 성능

· 규모 · 소요 시간 (워커 8대 기준) ·

· --- · --- ·

· 100개 · 수 분 ·

· 1,000개 · 수십 분 ·

· 10,000개 · 수 시간 ·

변환은 1회만 수행하면 됩니다. 이후 디자인이 변경된 파일만 증분 변환하므로, 초기 세팅 이후에는 유지 비용이 거의 없습니다.

디지털 카탈로그: 이미지 카탈로그의 종말

대량 변환 엔진의 진짜 가치는 디지털 카탈로그에서 나옵니다.

기존 카탈로그의 한계

- PDF 50페이지, 제품 사진 200장
- 색상 옵션이 5개면 사진이 5배
- 신제품 추가 시 촬영 + 편집 + 재발행
- 고객: "이 제품 다른 각도로 볼 수 없나요?"

디지털 카탈로그

- 웹 브라우저에서 전 제품 3D로 탐색
- 색상/재질 실시간 변경
- 신제품: STP 업로드 → 자동 변환 → 즉시 카탈로그 반영
- 고객: 직접 돌려보고, 확대하고, 옵션 조합

제조사 입장에서는 촬영 비용이 사라지고, 신제품 반영이 즉각적입니다. 고객 입장에서는 이미지로는 알 수 없었던 세부 형상을 직접 확인할 수 있습니다.

커스터마이징 시뮬레이터

디지털 카탈로그의 한 단계 위가 커스터마이징 시뮬레이터입니다. 고객이 제품의 옵션을 직접 조합하고, 그 결과를 실시간으로 확인합니다.

화장품 용기 시뮬레이터 사례

화장품 브랜드가 용기를 선택할 때, 캡의 형태, 몸체의 색상, 펌프의 종류, 라벨의 디자인을 조합해야 합니다.

[캡 선택]     스프레이 / 펌프 / 플립캡 / 드롭퍼
[몸체 색상]   투명 / 유백 / 커스텀 컬러
[재질]        유리 / PET / PP / 알루미늄
[용량]        30ml / 50ml / 100ml / 200ml
[라벨]        로고 업로드 → 실시간 맵핑

고객이 옵션을 바꿀 때마다 3D 모델이 실시간으로 변경됩니다. 캡을 스프레이로 바꾸면 모델의 상단 파트가 교체되고, 색상을 바꾸면 재질의 컬러가 변경되고, 라벨을 업로드하면 몸체에 텍스처로 매핑됩니다.

고객 CI/BI를 직접 입혀보는 경험

디지털 카탈로그의 진짜 힘은 여기서 나옵니다. 화장품 브랜드 고객이 용기를 선택할 때 가장 궁금한 것은 "우리 브랜드를 입히면 어떻게 보일까?"입니다.

기존 방식에서는 이를 확인하려면 샘플을 제작하거나, 디자이너에게 별도 렌더링을 요청해야 했습니다. 시간과 비용이 들고, 한두 가지 옵션만 확인할 수 있었습니다.

3D 시뮬레이터에서는 고객이 직접 자사 로고를 업로드하면 용기 위에 실시간으로 매핑됩니다. 브랜드 컬러를 적용해보고, 유광과 무광을 전환해보고, 다른 용기 라인업과 나란히 놓고 비교할 수 있습니다. 가까이 확대해서 인쇄 품질이 어떻게 나올지 가늠해볼 수도 있습니다.

샘플 제작 없이, 미팅 없이, 고객이 스스로 수십 가지 조합을 탐색하고 확신을 얻는 과정, 이것이 종이 카탈로그와 디지털 카탈로그의 근본적인 차이입니다.

기술적으로 필요한 것

  • 파트별 독립 제어: CAD의 어셈블리 구조를 보존했기 때문에 가능합니다. 각 파트를 독립적으로 교체하거나 재질을 변경할 수 있습니다.
  • PBR 재질 라이브러리: 금속, 유리, 플라스틱 등 자주 쓰이는 재질을 PBR(Physically Based Rendering) 파라미터로 미리 정의해둡니다. 고객이 "무광 알루미늄"을 선택하면 해당 PBR 파라미터 셋이 적용됩니다.
  • 실시간 텍스처 매핑: 고객이 업로드한 로고나 라벨을 3D 모델 위에 실시간으로 입힙니다. UV 매핑이 사전에 설정되어 있어야 하며, 곡면에 자연스럽게 감기도록 처리합니다.
  • 조합 유효성 검증: 모든 옵션 조합이 물리적으로 가능한 것은 아닙니다. 특정 캡은 특정 몸체에만 결합 가능하다는 규칙을 시스템에 반영하여, 고객이 불가능한 조합을 선택하지 않도록 합니다.

전체 파이프라인 정리

[설계팀]
SolidWorks/CATIA에서 제품 설계
    ↓ STP 파일 업로드

[변환 엔진]
STP → 테셀레이션 → 메시 최적화 → Draco 압축 → glb
    ↓ CDN 배포

[디지털 카탈로그]
전 제품 3D 브라우징 + 검색 + 필터

[커스터마이징 시뮬레이터]
파트 교체 + 재질/색상 변경 + 라벨 매핑 + 견적 연동
    ↓
[전환]
견적 요청 / 샘플 주문 / 장바구니

설계팀이 STP를 업로드하는 순간부터 고객이 웹에서 커스터마이징하고 견적을 요청하기까지, 사람의 수작업 없이 자동화된 파이프라인입니다.

정리

제조업의 제품 시각화는 "사진 찍어서 올리는 것"에서 "3D로 체험하는 것"으로 전환되고 있습니다.

그 전환의 핵심은 세 가지입니다:

  1. CAD → Web 3D 자동 변환: STP에서 glb로, 수천 개를 동시에
  2. 디지털 카탈로그: 촬영 없이, 전 제품을 3D로
  3. 커스터마이징 시뮬레이터: 고객이 직접 조합하고 확인

CAD 데이터는 이미 있습니다. 그 데이터를 웹으로 가져오는 파이프라인만 구축하면, 제품 시각화의 방식 자체가 바뀝니다.

프로덕트 메이커가 이 파이프라인을 프로덕션에서 실제로 구동하는 대표 사례는 두코 디지털 카탈로그빌드심플리 BIM 3D 뷰어 입니다.


WebGL, CAD, STP, glb, 디지털카탈로그, 3D변환, 제조업
다른 포스팅

CAD 파일을 웹 3D로: STP에서 디지털 카탈로그까지의 파이프라인

· --- · --- ·

· 용도 · 제조/설계 · 실시간 렌더링 ·

· 형상 표현 · NURBS (수학 곡면) · 메시 (삼각형 폴리곤) ·

· 재질 정보 · 없음 (형상만) · PBR 재질 포함 ·

· 파일 크기 · 수십 MB · 수백 KB ~ 수 MB ·

· 정밀도 · 극도로 높음 (제조용) · 시각적으로 충분한 수준 ·

STP는 NURBS 곡면으로 형상을 표현합니다. 수학적으로 완벽한 곡면이지만, GPU가 직접 렌더링할 수 없습니다. 이를 삼각형 메시로 테셀레이션(Tessellation) 하는 과정이 필요합니다.

이 과정에서 핵심 결정은 테셀레이션 품질입니다. 삼각형을 많이 쪼개면 원본에 가까운 부드러운 곡면이 되지만 파일이 커지고, 적게 쪼개면 가볍지만 각이 보입니다. 제품의 용도와 디바이스 환경에 따라 최적의 균형점을 찾아야 합니다.

변환 시 처리해야 할 것들

단순히 형상만 변환하면 끝이 아닙니다.

  • 파트 구조 보존: CAD 파일에는 어셈블리 구조(부품 간 계층 관계)가 있습니다. 뚜껑, 몸체, 펌프 같은 파트 구분이 웹에서도 유지되어야 각 파트별로 재질을 바꾸거나 분해 뷰를 보여줄 수 있습니다.
  • 노멀 최적화: 테셀레이션으로 생성된 메시의 법선(Normal) 벡터를 부드럽게 처리해야 렌더링 시 곡면이 자연스럽게 보입니다. CAD의 NURBS 정보를 활용해 스무스 노멀을 생성합니다.
  • 메시 최적화: 불필요한 내부 면 제거, 중복 정점 병합, 인덱스 버퍼 최적화. 웹 환경에서의 로딩 속도와 렌더링 성능에 직결됩니다.
  • Draco 압축: 변환된 glb를 Draco 압축하면 파일 크기를 80~90% 줄일 수 있습니다. 20MB STP → 2MB glb → 200KB 압축 glb. 모바일에서도 빠르게 로드됩니다.

수천 개를 동시에: 대량 변환 엔진

제조사의 제품 라인업이 10개라면 수동 변환도 가능합니다. 하지만 화장품 용기 제조사처럼 펌프, 에어리스, 튜브, 캡 등 수천~수만 개의 SKU를 보유한 경우는 다릅니다.

배치 변환 아키텍처

[STP 파일 저장소]
    ↓ 파일 감지 (신규/변경)
[변환 큐]
    ↓ 워커 풀 (병렬 처리)
[변환 엔진] × N대
    ├── 테셀레이션
    ├── 메시 최적화
    ├── 노멀 생성
    └── Draco 압축
    ↓
[glb 저장소 + CDN]
    ↓
[웹 3D 뷰어]

핵심 설계 포인트:

  1. 큐 기반 비동기 처리: STP 파일이 업로드되면 변환 큐에 등록되고, 워커가 순차적으로 처리합니다. 수만 개의 파일을 한 번에 넣어도 서버가 다운되지 않습니다.
  1. 워커 병렬화: 변환 엔진을 여러 대 띄워 동시 처리합니다. 워커 수를 늘리면 처리 속도가 선형으로 증가합니다.
  1. 증분 변환: 이미 변환된 파일은 건너뛰고, 신규 또는 변경된 STP 파일만 처리합니다. 해시 기반으로 변경 여부를 판단합니다.
  1. 품질 프리셋: 용도에 따라 변환 품질을 선택합니다. 썸네일용(저품질/초경량), 웹 뷰어용(중품질), 상세 뷰용(고품질) 등 하나의 STP에서 여러 품질의 glb를 생성할 수 있습니다.

변환 성능

· 규모 · 소요 시간 (워커 8대 기준) ·

· --- · --- ·

· 100개 · 수 분 ·

· 1,000개 · 수십 분 ·

· 10,000개 · 수 시간 ·

변환은 1회만 수행하면 됩니다. 이후 디자인이 변경된 파일만 증분 변환하므로, 초기 세팅 이후에는 유지 비용이 거의 없습니다.

디지털 카탈로그: 이미지 카탈로그의 종말

대량 변환 엔진의 진짜 가치는 디지털 카탈로그에서 나옵니다.

기존 카탈로그의 한계

- PDF 50페이지, 제품 사진 200장
- 색상 옵션이 5개면 사진이 5배
- 신제품 추가 시 촬영 + 편집 + 재발행
- 고객: "이 제품 다른 각도로 볼 수 없나요?"

디지털 카탈로그

- 웹 브라우저에서 전 제품 3D로 탐색
- 색상/재질 실시간 변경
- 신제품: STP 업로드 → 자동 변환 → 즉시 카탈로그 반영
- 고객: 직접 돌려보고, 확대하고, 옵션 조합

제조사 입장에서는 촬영 비용이 사라지고, 신제품 반영이 즉각적입니다. 고객 입장에서는 이미지로는 알 수 없었던 세부 형상을 직접 확인할 수 있습니다.

커스터마이징 시뮬레이터

디지털 카탈로그의 한 단계 위가 커스터마이징 시뮬레이터입니다. 고객이 제품의 옵션을 직접 조합하고, 그 결과를 실시간으로 확인합니다.

화장품 용기 시뮬레이터 사례

화장품 브랜드가 용기를 선택할 때, 캡의 형태, 몸체의 색상, 펌프의 종류, 라벨의 디자인을 조합해야 합니다.

[캡 선택]     스프레이 / 펌프 / 플립캡 / 드롭퍼
[몸체 색상]   투명 / 유백 / 커스텀 컬러
[재질]        유리 / PET / PP / 알루미늄
[용량]        30ml / 50ml / 100ml / 200ml
[라벨]        로고 업로드 → 실시간 맵핑

고객이 옵션을 바꿀 때마다 3D 모델이 실시간으로 변경됩니다. 캡을 스프레이로 바꾸면 모델의 상단 파트가 교체되고, 색상을 바꾸면 재질의 컬러가 변경되고, 라벨을 업로드하면 몸체에 텍스처로 매핑됩니다.

고객 CI/BI를 직접 입혀보는 경험

디지털 카탈로그의 진짜 힘은 여기서 나옵니다. 화장품 브랜드 고객이 용기를 선택할 때 가장 궁금한 것은 "우리 브랜드를 입히면 어떻게 보일까?"입니다.

기존 방식에서는 이를 확인하려면 샘플을 제작하거나, 디자이너에게 별도 렌더링을 요청해야 했습니다. 시간과 비용이 들고, 한두 가지 옵션만 확인할 수 있었습니다.

3D 시뮬레이터에서는 고객이 직접 자사 로고를 업로드하면 용기 위에 실시간으로 매핑됩니다. 브랜드 컬러를 적용해보고, 유광과 무광을 전환해보고, 다른 용기 라인업과 나란히 놓고 비교할 수 있습니다. 가까이 확대해서 인쇄 품질이 어떻게 나올지 가늠해볼 수도 있습니다.

샘플 제작 없이, 미팅 없이, 고객이 스스로 수십 가지 조합을 탐색하고 확신을 얻는 과정, 이것이 종이 카탈로그와 디지털 카탈로그의 근본적인 차이입니다.

기술적으로 필요한 것

  • 파트별 독립 제어: CAD의 어셈블리 구조를 보존했기 때문에 가능합니다. 각 파트를 독립적으로 교체하거나 재질을 변경할 수 있습니다.
  • PBR 재질 라이브러리: 금속, 유리, 플라스틱 등 자주 쓰이는 재질을 PBR(Physically Based Rendering) 파라미터로 미리 정의해둡니다. 고객이 "무광 알루미늄"을 선택하면 해당 PBR 파라미터 셋이 적용됩니다.
  • 실시간 텍스처 매핑: 고객이 업로드한 로고나 라벨을 3D 모델 위에 실시간으로 입힙니다. UV 매핑이 사전에 설정되어 있어야 하며, 곡면에 자연스럽게 감기도록 처리합니다.
  • 조합 유효성 검증: 모든 옵션 조합이 물리적으로 가능한 것은 아닙니다. 특정 캡은 특정 몸체에만 결합 가능하다는 규칙을 시스템에 반영하여, 고객이 불가능한 조합을 선택하지 않도록 합니다.

전체 파이프라인 정리

[설계팀]
SolidWorks/CATIA에서 제품 설계
    ↓ STP 파일 업로드

[변환 엔진]
STP → 테셀레이션 → 메시 최적화 → Draco 압축 → glb
    ↓ CDN 배포

[디지털 카탈로그]
전 제품 3D 브라우징 + 검색 + 필터

[커스터마이징 시뮬레이터]
파트 교체 + 재질/색상 변경 + 라벨 매핑 + 견적 연동
    ↓
[전환]
견적 요청 / 샘플 주문 / 장바구니

설계팀이 STP를 업로드하는 순간부터 고객이 웹에서 커스터마이징하고 견적을 요청하기까지, 사람의 수작업 없이 자동화된 파이프라인입니다.

정리

제조업의 제품 시각화는 "사진 찍어서 올리는 것"에서 "3D로 체험하는 것"으로 전환되고 있습니다.

그 전환의 핵심은 세 가지입니다:

  1. CAD → Web 3D 자동 변환: STP에서 glb로, 수천 개를 동시에
  2. 디지털 카탈로그: 촬영 없이, 전 제품을 3D로
  3. 커스터마이징 시뮬레이터: 고객이 직접 조합하고 확인

CAD 데이터는 이미 있습니다. 그 데이터를 웹으로 가져오는 파이프라인만 구축하면, 제품 시각화의 방식 자체가 바뀝니다.

프로덕트 메이커가 이 파이프라인을 프로덕션에서 실제로 구동하는 대표 사례는 두코 디지털 카탈로그빌드심플리 BIM 3D 뷰어 입니다.


WebGL, CAD, STP, glb, 디지털카탈로그, 3D변환, 제조업
다른 포스팅