STEP을 GLB로 변환하는 법 — CAD-웹 3D 파이프라인

2026년 4월 25일 How to convert STEP to GLB — MakerSuite 3D

STEP → GLB는 필수 웹 3D 파이프라인

STEP 파일은 정확한 수학 곡면 — CAD에 완벽, 브라우저엔 끔찍. GLB(바이너리 glTF 2.0)는 사실상 웹 3D 표준 — 작고 빠르고 three.js·Babylon.js·model-viewer·Sketchfab·최근 브라우저 모두 네이티브 지원. STEP을 GLB로 바꾸려면 B-rep 곡면을 삼각형으로 테셀레이션하고 머티리얼·메타데이터와 함께 단일 바이너리로 패키징. 잘 하면 50MB STEP이 2MB GLB가 되어 200ms 만에 로드. 못 하면 깨진 면(너무 거칠게) 또는 100MB 괴물(너무 촘촘하게) 둘 중 하나. 이 글은 2026년 실제 동작하는 세 가지 변환 경로 — OCCT WASM 인브라우저·FreeCAD 스크립트 export·Fusion 360 — 와 중요한 테셀레이션 파라미터를 다룹니다.

테셀레이션이 실제로 하는 일

STEP 지오메트리는 연속: 실린더는 수학 방정식 하나. GLB 지오메트리는 이산: 실린더는 그 방정식을 근사하는 N개 삼각형. 테셀레이션은 한쪽에서 다른 쪽으로의 변환, 코드 편차(삼각형 변이 진짜 곡면에서 얼마나 벗어날 수 있는지)와 각도 편차(이웃 삼각형 노멀 사이 최대 각도)로 파라미터화. 톨러런스가 빡빡할수록 삼각형 늘고 곡면 근사 정확. OpenCASCADE BRepMesh_IncrementalMesh 알고리즘이 오픈소스 표준 — FreeCAD·KiCad의 STEP 익스포터·대부분의 브라우저 STEP 로더가 사용. 머티리얼 할당은 STEP 파일에 컬러 메타데이터 있으면 전달(AP214는 PRESENTATION_LAYER_ASSIGNMENT 통해 면별 컬러 지원), AP203 STEP은 컬러 정보 잃는 일이 흔함.

각 변환 경로가 처리하는 것

OCCT WASM 인브라우저 — occt-import-js가 OpenCASCADE Technology를 WebAssembly로 컴파일, 풀 STEP 로더를 클라이언트에서 실행하고 테셀레이션, glTF/GLB 출력. ~13MB WASM 페이로드, 50MB STEP을 모던 노트북에서 ~5초.
FreeCAD 스크립트 export — .step 열고 Mesh.export(['__doc__.RootObjects'], 'out.glb') 실행. FreeCAD가 같은 OpenCASCADE 메싱을 내부적으로 사용, 부품 라이브러리 배치 변환에 스크립트화 가능.
Fusion 360 — File > Export > GLTF (glb). 단일 부품은 원클릭, 어셈블리는 각 컴포넌트가 별도 노드로 계층적 export. 보디별 어피어런스 보존해서 GLB에서 정확한 머티리얼 컬러 표현.
Linear deflection — 코드 편차 파라미터(기계 부품은 0.1mm, 주얼리/치과는 0.01mm). 작을수록 삼각형 많음. 대부분 도구 기본값은 어떤 가시 곡선에도 잘못된 거친 값.
Angular deflection — 이웃 삼각형 노멀 각도 제한(보통 0.5라디안 ≈ 28°). 둥근 피처에 핵심 — 1.0rad에선 실린더가 팔각형, 0.2rad에선 매끄러움.
Draco 압축 — GLB 추가 사이즈 감소 옵션(보통 5-10× 감소). 트레이드오프: 뷰어 쪽에 Draco 디코더 필요, three.js GLTFLoader는 DRACOLoader로 지원, model-viewer는 네이티브 지원.

다섯 단계로 STEP → GLB

Open pcbviewer.app — STEP 파일을 MakerSuite 3D 3D 뷰어에 드롭해서 깔끔하게 파싱되는지 확인. MakerSuite가 렌더하면 같은 OCCT WASM 로더가 GLB도 깨끗하게 export.
테셀레이션 톨러런스 선택. 시각 웹 프리뷰(model-viewer·Sketchfab·AR)는 0.1mm 코드 / 0.5rad 각도 OK. 기술 검사(지오메트리 확인용 줌인)는 0.01mm 코드 / 0.2rad. 작을수록 삼각형 5-10× 증가.
MakerSuite에서 Export 클릭, GLB 선택. 도구가 OCCT 테셀레이션을 기본 파라미터로 실행하고 단일 .glb 다운로드. 배치 변환이나 커스텀 파라미터는 FreeCAD Python 콘솔의 Mesh.export() 사용.
GLB 검증 — three.js나 model-viewer에서 로드. 실린더에 가시적 패시팅(각도 톨러런스 너무 느슨), 누락 면(STEP healing 임포트 시 실패), 잘못된 컬러(컬러 메타데이터 없는 AP203 STEP은 회색 기본값) 확인.
필요 시 GLB 최적화 — gltfpack(glTF-Transform)이 머티리얼 압축·포지션 양자화·meshopt 또는 Draco 적용, 보통 파일 크기 절반. 대역폭 제약 있는 뷰어 임베드에서 중요.

GLB가 원본 STEP과 시각적으로 일치하는지 검증 — MakerSuite 3D에 둘 다 드롭하고 뷰어 임베드 출하 전에 테셀레이션 아티팩트 잡아내기.

MakerSuite 3D 무료로 써보기

왜 STEP → GLB가 웹 3D의 병목인가

'3D 보기' 버튼 있는 모든 제품 페이지, iOS Safari의 모든 AR 프리뷰, 모든 포트폴리오 Sketchfab 임베드가 이 변환에 의존. 브라우저 엔진은 STEP 파싱 안 함 — WebGL/WebGPU에 네이티브 B-rep 로더 없음. 웹 3D 생태계는 2016년 glTF/GLB로 표준화했고 CAD 도구들은 지난 10년간 따라잡고 있음. 오늘날 변환은 풀린 문제(OCCT WASM 동작·FreeCAD export·Fusion 360 export)지만 테셀레이션 파라미터는 표준화 안 됨. 거친 기본값은 제품을 플라스틱·패시팅된 모습으로 만들고, 촘촘한 기본값은 파일 사이즈 폭증. 용도에 맞는 톨러런스 선택이 진짜 스킬, 시각 검증은 협상 불가.

STEP → GLB 변환이 등장하는 곳

제품 컨피규레이터 — e-커머스 사이트가 구매 전 기계 부품 3D 모델 회전 보여주기
iOS AR 프리뷰 — model-viewer가 iOS Safari엔 USDZ, Android Chrome엔 GLB, 둘 다 같은 STEP 소스에서 생성
문서 임베드 — 테크니컬 라이터가 어셈블리 뷰를 브라우저에 보여줌, GLB가 <model-viewer>로 HTML에 임베드
three.js 씬 — 엔지니어링 시뮬레이션 시각화가 CAD 지오메트리를 씬 메쉬로 필요, GLB가 로더 친화 포맷
Sketchfab 포트폴리오 — 디자이너가 클라이언트 리뷰용으로 작업 게시, Sketchfab가 glTF/GLB 업로드 요구

브라우저에서 업로드 없이 변환

STEP 파일은 CAD 소스 — 치수·톨러런스·설계 의도 포함. 서버 사이드 컨버터 업로드는 엔지니어링 IP가 머신 밖으로 나가는 일. MakerSuite 3D의 STEP-to-GLB 변환은 OCCT WASM 통해 브라우저 전체에서 실행 — FreeCAD와 같은 알고리즘, 단지 웹 컴파일. STEP 파일은 로컬 파싱·로컬 테셀레이션, GLB는 직접 다운로드. 서버 라운드트립·캐시 사본·제3자 서비스 없음.

자주 묻는 질문

What's the difference between glTF and GLB?

Same data, different packaging. glTF 2.0 (JSON + separate .bin buffers + texture files) is human-readable and good for development. GLB packs everything into a single binary blob, which is faster to load and easier to ship to a CDN. For web embeds, GLB is almost always the right choice — single HTTP request, no broken texture references. The Khronos Group standardized both in glTF 2.0 (2017), and every modern web 3D library (three.js, Babylon.js, model-viewer, react-three-fiber) supports both interchangeably.

Why does my converted GLB look faceted on cylinders?

Tessellation tolerance was too loose. Most STEP→GLB converters default to a chord deviation of 0.5mm and angular deviation of 1.0 radians (about 57°), which makes cylinders look like octagons or hexagons. Tighten to 0.1mm chord / 0.3 rad angular for visible curves. The tradeoff is triangle count — going from 0.5mm to 0.1mm typically multiplies triangle count by 5-10×. For web embeds where bandwidth matters, a balanced 0.2mm chord / 0.5 rad angular is usually the sweet spot.

Do colors and materials transfer in STEP to GLB conversion?

Sometimes. STEP AP214 supports per-face colors via PRESENTATION_LAYER_ASSIGNMENT, which OCCT can read and pass through to glTF materials. STEP AP203 doesn't support colors at all, so the GLB defaults to a single gray material. If your STEP file came from SolidWorks or Fusion 360, it's almost certainly AP214 with colors. If it came from older tools or was exported from KiCad/Eagle, it's often AP203 without colors. Check by opening the STEP in a viewer that shows materials — if you see colors there, the GLB will have them too.

How big can a STEP file be before browser conversion fails?

OCCT WASM (occt-import-js) handles STEP files up to roughly 100 MB on a modern laptop without issue. Above that, browser memory limits start mattering — Chrome/Edge cap WASM heap around 4 GB but realistic processing tops out at ~500 MB STEP. For larger CAD assemblies, batch-process locally with FreeCAD's Python API or Fusion 360 CLI. The browser path is best for single parts and small assemblies; large multi-part assemblies are better handled offline and the resulting GLB shipped to the browser as a static asset.

Should I use Draco compression on the GLB?

Usually yes for web delivery. Draco geometry compression typically shrinks GLB files 5-10× (a 2 MB GLB becomes 200-400 KB). Three.js GLTFLoader supports Draco via DRACOLoader; @google/model-viewer supports it natively. Cost: a small CPU hit on decode (typically <100 ms) and a Draco decoder library that adds ~150 KB to your bundle. Worth it for any GLB over 500 KB or any GLB shipped to mobile clients. gltf-transform compresses existing GLBs in one command: gltf-transform draco in.glb out.glb.

STEP File Viewer Online — Open .step and .stp Files How to Convert STL to STEP — Mesh-to-BRep Reality Check How to Export KiCad PCB to STEP — MCAD Handoff Guide

STEP 파일 드롭 — 브라우저에서 GLB로 변환, 업로드 없음

3D 뷰어 열기