웹 애플리케이션에 CAD 파일 처리를 통합하는 방법은?

Mon, 12 Oct 2026 00:00:00 +0000

마지막 업데이트: 2026년 8월 20일

웹 기반 CAD 처리: 3D 데이터를 파싱, 변환 및 시각화하는 완전 가이드

엔지니어링, 건설 및 제조 소프트웨어는 오랫동안 무거운 데스크톱 워크스테이션에 고정되어 왔습니다. 수십 년 동안 설계 협업은 거대한 파일을 내보내고, 독점 데스크톱 소프트웨어를 실행하거나, 풍부한 기하학을 죽은 픽셀로 평탄화하는 정적 2D PDF 스냅샷에 만족하는 것을 의미했습니다.

오늘날 제품 팀은 실시간 설계 협업, 클라우드 기반 부품 견적, 자동 설계 검증, 그리고 웹 브라우저 내에서 직접 이루어지는 마찰 없는 모델 공유를 기대합니다. 컴퓨터 지원 설계(CAD) 파일을 웹으로 가져오는 일은 악명 높게 어렵습니다. 독점 파일 형식, 비균일 유리 B-스플라인(NURBS), 거대한 파일 페이로드, 그리고 브라우저 GPU 제한은 심각한 아키텍처 문제를 야기합니다.

다음은 현대 웹 애플리케이션 내에서 CAD 파일을 설계, 처리 및 렌더링하는 방법에 대한 실용적이고 전체적인 단계별 설명입니다.

1. CAD 환경 이해하기: 웹 처리의 어려움은 왜 발생하는가

인제스트 스크립트를 작성하거나 3D 캔버스 라이브러리를 선택하기 전에, 사용자가 업로드하는 형식과 브라우저가 실제로 렌더링하는 형식 사이의 차이를 이해해야 합니다.

경계 표현(B-Rep) vs. 폴리곤 메시

데스크톱 CAD 도구(SolidWorks, CATIA, Autodesk Inventor, Siemens NX)는 삼각형으로 생각하지 않습니다. 이들은 기하학을 B-Rep (Boundary Representation) 또는 NURBS (Non-Uniform Rational B-Splines) 로 알려진 수학적으로 정확한 곡선, 표면 및 솔리드로 저장합니다.

B-Rep Formats (.step, .stp, .iges, .sldprt): 높은 수학적 정밀도, 가변 에지 정의 및 복잡한 토폴로지 관계.
Drawing Formats (.dwg, .dxf): 2D/3D 벡터 제도 데이터로, 레이어가 많이 사용되며 종종 독점적입니다(특히 바이너리 DWG).
Mesh Formats (.stl, .obj, .ply): 삼각형 근사치입니다. STL은 3D 프린팅에 일반적이지만, 모든 의미론적 정보(나사, 실제 반경, 재료, 어셈블리)를 잃어버립니다.

The Web Problem: WebGL 및 WebGPU 엔진은 포인트 배열, 정점 및 삼각형 메시만 이해합니다. 브라우저는 60fps에서 파라메트릭 NURBS 방정식을 네이티브로 평가할 수 없습니다.

따라서 CAD를 웹 앱에 통합하는 것은 근본적으로 테셀레이션 및 파이프라인 문제: 수학적으로 정밀한 CAD 솔리드를 가볍고 최적화된 폴리곤 메쉬로 변환하면서 중요한 엔지니어링 정확성을 잃지 않아야 합니다.

2. 핵심 아키텍처: 수집 및 변환 파이프라인

200MB STEP 어셈블리를 클라이언트 측에서 파싱하려고 하면 사용자의 브라우저 탭이 충돌합니다. 프로덕션 수준의 CAD 처리 파이프라인은 비동기적이고 분리된 아키텍처에 의존합니다:

[Browser Client] 
       │ (Direct Upload via Presigned URL)
       ▼
[Cloud Storage: S3 / GCS] 
       │ (Event Trigger)
       ▼
[Message Queue: SQS / RabbitMQ] 
       │
       ▼
[Worker Nodes (Geometry Engine)]
       ├─ Format Parsing
       ├─ Tessellation & Meshing
       ├─ Decimation & Level-of-Detail (LOD)
       └─ Optimization
       │
       ▼
[Derived Output: glTF / GLB / Vector JSON]
       │
       ▼
[Client Web Viewer (Three.js / Babylon.js)]

1단계: 직접 클라우드 업로드를 통한 안전한 수집

대용량 CAD 바이너리를 핵심 애플리케이션 서버를 통해 라우팅하지 마세요. 엄격한 청크 기반 다중 파트 업로드가 가능한 사전 서명된 S3 또는 Google Cloud Storage 업로드 URL을 사용하십시오. CAD 어셈블리는 종종 어셈블리(.sldasm) 내부에 여러 파트 파일(.sldprt)을 포함하거나 .zip 아카이브 형태로 번들링합니다; 업로드 레이어는 다중 파일 및 폴더 수집을 지원해야 합니다.

2단계: 비동기 변환 워커

업로드가 완료되면 이벤트가 비동기 워커 풀을 트리거합니다. CAD 변환은 CPU와 메모리를 많이 사용하므로 워커를 확장 가능한 컴퓨팅 환경(e.g., AWS ECS, Kubernetes pod, 또는 전용 컴퓨트 인스턴스)에서 실행하십시오.

3단계: 테셀레이션 및 특징 추출

워커는 파일을 파싱하고 메타데이터(바운딩 박스, 파트 트리, 질량 속성, 레이어)를 추출한 뒤 수학적 표면을 삼각형으로 변환합니다.

4단계: 웹 준비 표준으로 정규화

출력은 glTF 2.0 (.glb)—종종 “JPEG of 3D"라고 불리는—또는 특수 애플리케이션을 위한 맞춤형 바이너리 포맷으로 변환해야 합니다. 2D 도면 데이터(.dwg/.dxf)의 경우 SVG와 같은 벡터 포맷이나 평면 GeoJSON 스타일의 기하 형태로 변환하십시오.

3. 올바른 변환 엔진 선택

일반적으로 백엔드에서 파싱 및 테셀레이션을 처리하기 위해 세 가지 옵션이 있습니다:

접근 방식	일반적인 도구	장점	단점
오픈 소스 기하학 커널	Open CASCADE (OCCT), FreeCAD CLI, CadQuery	거래당 라이선스 비용이 없으며; 완전한 데이터 제어.	학습 곡선이 가파름 (C++); 대규모 어셈블리에서 느림; 수동 튜닝 필요.
상업용 헤드리스 SDK	Tech Soft 3D (HOOPS), Spatial (ACIS), Datakit	고유 포맷(CATIA, Creo, SolidWorks)에 대한 네이티브 지원; 뛰어난 성능.	상당한 기업 라이선스 비용.
클라우드 번역 API	Autodesk Platform Services (Forge), Convertigo	턴키 인프라; 내장 웹 뷰어 위젯; 최소한의 유지보수.	벤더 종속; 파일당 처리 비용; 데이터가 귀하의 사설 경계를 벗어남.

WebAssembly (Wasm)를 사용해야 할 때

경량 포맷(예: 정리된 .stl 파일이나 간단한 2D .dxf 청사진)의 경우 백엔드 대기열을 완전히 우회할 수 있습니다. 경량 C++ 또는 Rust 파서를 WebAssembly로 컴파일하면 Web Workers를 사용해 브라우저에서 직접 파일을 읽을 수 있습니다. 클라이언트 메모리를 보존하려면 이 접근 방식을 25MB 이하의 단일 부품에만 제한하십시오.

4. 웹 성능을 위한 3D 기하학 최적화

원시 테셀레이션 CAD 모델은 수백만 개의 폴리곤을 쉽게 생성하여 브라우저 프레임 속도가 크게 저하됩니다. 워커 단계에서의 최적화는 필수입니다:

1. 적응형 변위 (테셀레이션 제어)

균일한 세분화를 피하십시오. 코드 편차 설정을 사용하세요: 평면 표면은 매우 적은 삼각형만 필요하지만, 촘촘한 필렛 및 방사형 곡선은 더 높은 밀도가 필요합니다.

2. 메쉬 디시메이션 및 LOD 생성

여러 레벨의 디테일(LOD)을 생성하십시오. 사용자가 전체 기계를 보기 위해 줌 아웃하면 폴리곤을 80% 줄인 LOD를 렌더링합니다. 특정 볼트나 베어링을 줌 인하면 고품질 기하학으로 교체합니다.

3. Draco 및 Meshopt을 통한 메쉬 압축

웹 출력에는 항상 기하학 압축을 적용하십시오:

Google Draco: 전송 중 파일 다운로드 크기를 크게 줄입니다. 그러나 Draco 모델을 압축 해제하면 클라이언트 CPU 사이클을 소비합니다.
Meshopt / EXT_meshopt_compression: 빠르고 네이티브 속도의 WebAssembly 압축 해제를 제공하는 균형 잡힌 압축을 제공하여 복잡한 어셈블리를 빠르게 렌더링하는 데 이상적입니다.

4. 인스턴싱

제조 모델에서는 나사, 브래킷, 핀과 같은 부품이 수십 번 반복됩니다. 변환 파이프라인이 중복된 바디를 감지하고 인스턴스 메시(EXT_mesh_gpu_instancing)를 출력하도록 하십시오. 이렇게 하면 수백 개의 드로우 콜이 하나로 축소됩니다.

5. 브라우저에서 렌더링: 프런트엔드 아키텍처

워커가 최적화된 .glb 파일을 출력하면, 브라우저가 상호작용, 검사 및 측정을 처리합니다.

렌더링 엔진 선택

Three.js: 업계 표준. 방대한 생태계, 가볍고, 제품 구성기 및 맞춤 뷰어 UI에 쉽게 커스터마이징할 수 있습니다.
Babylon.js: 풍부한 기능을 갖춘, 프로덕션 수준 엔진으로 복잡한 PBR 재질, 물리 및 엔터프라이즈 워크플로우에 대한 즉시 사용 가능한 지원을 제공합니다.
Autodesk Viewer / HOOPS Communicator: BIM/CAD 기능(단면 평면, 모델 트리 계층, 폭발 뷰)이 내장된 사전 패키지 뷰어이지만, 자체 클라우드 백엔드와 밀접하게 결합되어 있습니다.

필수 웹 CAD 뷰어 기능

맞춤 인터페이스를 구축하면, 엔지니어링 사용자는 표준 데스크톱 상호작용을 기대합니다:

CAD-Style Orbit Controls: 데스크톱 CAD 도구는 서로 다른 마우스 매핑을 사용합니다(예: SolidWorks는 중간 마우스 오빗, Revit은 Shift + 중간 마우스). 사용자가 제어 방식을 전환할 수 있도록 합니다.
Interactive Bounding Box & Sectioning: GL 클리핑 평면을 사용하여 사용자가 고체 어셈블리의 내부 구성 요소를 슬라이스할 수 있게 합니다.
Hierarchy Tree (Scene Graph): HTML/React에서 부모-자식 어셈블리 구조를 렌더링하여 사용자가 특정 구성 요소나 하위 어셈블리의 가시성을 전환할 수 있게 합니다.
정확한 측정 도구: 정점 및 엣지 루프에 레이캐스트를 수행하여 실제 거리, 표면적 및 반경을 계산합니다.

6. 보안 및 지적 재산(IP) 보호

CAD 파일에는 민감한 지적 재산이 포함되어 있습니다. 엔지니어링 데이터를 공개 브라우저로 스트리밍하려면 엄격한 보안 제어가 필요합니다:

메시 전용 전달: 네이티브 B-Rep 기하학 대신 테셀레이션된 메쉬를 전송함으로써 원시 파라메트릭 수학을 본질적으로 보호합니다. 삼각형 표면으로부터 네이티브 CAD 모델을 역공학하는 것은 어렵고 불완전합니다.
스트리밍 청크 암호화: 짧은 수명의 세션 토큰으로 인증된 암호화된 바이너리 세그먼트로 기하학을 전달합니다.
일시적 처리: 변환 파이프라인이 영구 저장소에 기록한 직후 임시 저장소와 워커 메모리를 즉시 정리합니다.
외부 뷰어를 위한 기하학 단순화: 파일을 제3자 공급업체나 공개 청중에게 표시해야 할 경우, 웹 메쉬를 생성하기 전에 내부 구성 요소(기어, 배플, 비밀 내부 메커니즘)를 제거하는 외부 쉘링 알고리즘을 실행합니다.

결론

CAD 처리를 웹 애플리케이션에 통합하는 것이 이제는 기업 CAD 공급업체만을 위한 실험적 기능이 아닙니다. 비동기 클라우드 워커를 통해 데이터 수집을 분리하고, 파라메트릭 곡선을 최적화된 폴리곤 메시로 변환하며, WebGL/WebGPU 프런트엔드를 활용함으로써 최신 브라우저 어디서든 빠르고 협업 가능한 엔지니어링 도구를 제공할 수 있습니다.

먼저 명확히 정의된 MVP부터 시작하세요: STEP과 같은 단일 중립 포맷을 선택하고, 검증된 파서로 glTF 출력을 목표로 하며, Three.js를 사용해 렌더링합니다. 사용자 기반이 확대되면 다중 포맷 변환 파이프라인, 적응형 LOD, 그리고 특화된 엔지니어링 도구를 추가하세요.

자주 묻는 질문 (FAQ)

Q1. 최신 웹 브라우저가 백엔드 변환 없이 원시 STEP 또는 DWG 파일을 직접 열 수 있나요? 아니요, 브라우저에는 독점 CAD 포맷에 대한 네이티브 파서가 없으며 서버 측 변환이나 WebAssembly 기반 처리를 통해 glTF와 같은 삼각형 메시 포맷으로 변환해야 합니다.

Q2. 3D CAD 데이터를 효율적으로 렌더링하기 위한 최적의 웹 포맷은 무엇인가요? Meshopt 또는 Draco 압축을 적용한 바이너리 glTF (.glb)가 웹 브라우저 전반에 고성능 3D 모델을 제공하기 위한 업계 표준입니다.

Q3. 모바일 기기에서 수백만 개의 폴리곤을 가진 대형 CAD 어셈블리를 어떻게 처리합니까? 레벨 오브 디테일(LOD) 계층 구조, 공격적인 메시 감소, 인스턴스 렌더링을 구현하여 GPU가 보이는 단순화된 기하학만 렌더링하도록 합니다.

Q4. 공개 웹 페이지에 CAD 지적 재산권을 표시할 때 안전한가요? 네, CAD 모델을 표면 메쉬로 테셀레이션하면 고유 파라메트릭 히스토리와 수학적 구성 데이터가 제거되어 역공학이 쉬워지지 않기 때문입니다.

Q5. Open CASCADE와 같은 오픈소스 엔진을 사용해야 할까요, 아니면 상용 클라우드 변환 API를 사용해야 할까요? 온프레미스 프라이버시와 라이선스 비용이 없을 경우 Open CASCADE가 최적이며, 빠른 시장 출시와 더 넓은 네이티브 포맷 지원이 필요하면 Autodesk Platform Services와 같은 상용 API가 이상적입니다.

웹 CAD 파일 처리 on File Format Blog