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변환, 제조업
다른 포스팅