매년 수천만 원씩 나가던 카탈로그 인쇄비, 사실 그 안에는 편집비·해외 배송비·폐기비 같은 '보이지 않는 비용'까지 숨어 있습니다. 최근 B2B 제조업 홈페이지에 경량화 3D 웹 뷰어(WebGL) 를 도입해 이 비용 구조를 근본적으로 바꾸는 기업이 늘고 있습니다. 이 글에서는 WebGL 3D 뷰어의 개념부터 실제 도입 예산, 구현 조건, 주의사항까지 실무 관점에서 정리했습니다.
A4 24페이지 기준 2,000부를 인쇄하면 인쇄비만 약 180만 원 이 나갑니다. 여기에 디자인·편집비를 더하면 한 번 제작에 300만~500만 원은 기본입니다.
문제는 이게 '1회성'이 아니라는 점입니다. 제품 사양이 바뀌거나 가격이 달라지거나 신제품이 추가되면, 처음부터 다시 인쇄해야 합니다. 해외 바이어에게 보내는 국제 배송비, 창고 보관비, 시즌이 지난 재고 폐기비까지 합산하면 연간 실제 지출은 수천만 원 을 훌쩍 넘기는 경우가 많습니다.
"카탈로그를 새로 찍었는데 한 달 만에 단종 제품이 생겨서 절반을 버렸어요." — 국내 중견 부품 제조사 마케팅 담당자 사례
이 구조적 비효율을 해결하는 대안이 바로 웹사이트에 3D 웹 뷰어를 탑재하는 방식 입니다.
WebGL(Web Graphics Library)은 앱이나 플러그인 설치 없이 웹 브라우저에서 바로 3D 그래픽을 보여주는 표준 기술 입니다. 크롬, 사파리, 엣지 등 현재 사용되는 대부분의 브라우저에서 지원합니다.
제조업에서 활용하는 방식은 이렇습니다. 설계팀이 가진 무거운 3D CAD 파일(STEP, IGES 등)을 웹에서 가볍게 열 수 있는 glTF 또는 GLB 포맷으로 변환합니다. 그러면 바이어나 영업 담당자가 별도 소프트웨어 없이 브라우저에서 제품을 360도 회전·확대·재질 변경 하며 확인할 수 있습니다.
종이 카탈로그가 '사진 한 장'이라면, 3D 웹 뷰어는 '실물을 손에 들고 돌려보는 경험'에 가깝습니다.
Luma AI, Polycam 같은 상용 플랫폼을 통해 확산 중입니다. 수작업 모델링 비용을 크게 줄일 수 있습니다.Spline 3D와 구글 Gemini AI Studio 연동으로 전문 코딩 없이도 인터랙티브 3D 랜딩페이지 제작이 가능해졌습니다.3D 웹 뷰어 도입 비용은 구현 방식에 따라 크게 세 단계로 나뉩니다.
설계 부서에 이미 STEP·IGES 형식의 CAD 파일이 있다면, 신규 모델링 없이 변환·최적화 작업 만으로 진행할 수 있습니다.
자체 개발이 부담스럽다면 iStaging 같은 기성 플랫폼을 월 구독으로 이용할 수 있습니다.
브랜딩·DB 연동·견적 시스템까지 통합하는 풀커스텀 방식입니다.
핵심은 '3D 뷰어'만 붙이는 게 아니라, 바이어가 제품을 보고 바로 견적을 요청할 수 있는 전환 흐름 을 함께 설계하는 것입니다.
설계 부서에서 원본 CAD 파일(STEP, IGES)을 받습니다. 웹에서 버벅임 없이 돌아가려면 폴리곤 수를 대폭 줄이는 경량화(Decimation) 와 드로우콜(DrawCall) 최소화 작업이 필수입니다. 드로우콜이란 GPU에게 '이 물체를 그려라'고 명령하는 횟수인데, 이 숫자가 많을수록 브라우저가 느려집니다.
경량화된 메쉬에 실제 제품 질감(금속·플라스틱·도색 등)을 반영하는 PBR(Physically Based Rendering) 텍스처 를 입힙니다. PBR은 빛의 물리적 특성을 계산해 사실적인 표면을 구현하는 기술입니다. 최종적으로 glTF 또는 GLB 파일로 저장합니다.
구글의 오픈소스 <model-viewer> 태그를 HTML에 삽입하면 비교적 간단하게 3D 뷰어를 구현할 수 있습니다. 더 복잡한 인터랙션(파트 선택, 색상 변경, 애니메이션)이 필요하다면 Three.js 또는 Babylon.js 라이브러리를 활용합니다.
Brotli 또는 Gzip 압축으로 파일 크기 최소화월 활성 사용자(MAU) 150만 명 이상의 서비스에 초경량 WebGL 엔진을 탑재했습니다. 메모리·CPU가 극도로 제한된 스마트 TV(webOS) 환경을 대상으로 드로우콜과 배치를 극한으로 줄이고, 기기별 자동 파라미터 튜닝을 통해 끊김 없는 FPS를 달성한 사례입니다.
투명·반사 표현이 중요한 화장품 용기(펌프, 에어리스 등) 라인업에 PBR과 환경 맵을 적용해 사실적인 3D 렌더링을 구현했습니다. 바이어가 웹에서 패키징을 조합하고 실시간으로 시뮬레이션한 뒤 바로 견적을 받을 수 있는 B2B 전환 최적화 시스템 을 구축해 성과를 거뒀습니다.
원본 CAD에는 정밀 치수와 독점 설계 기술이 담겨 있습니다. 브라우저가 원본 파일을 통째로 다운로드하면 도용 위험이 생깁니다. 반드시 치수 정보가 제거된 표면(Mesh) 전용 GLB 로 변환하거나, 지오메트리를 로컬로 전송하지 않는 스트리밍 뷰어 방식 을 채택해야 합니다.
해외 바이어가 구형 스마트폰으로 접속할 수 있습니다. LOD 설계와 대역폭 대응 없이 고품질 모델만 올리면 로딩 중 이탈률이 급등합니다.
검색엔진 로봇은 WebGL 캔버스 내부를 읽지 못합니다. 3D 뷰어 주변에 제품 텍스트 스펙, 상세 설명, 메타태그 를 꼼꼼히 작성해야 구글·네이버 검색 노출을 함께 확보할 수 있습니다.
Q1. CAD 파일이 없으면 3D 웹 뷰어를 만들 수 없나요? CAD 파일이 없어도 제품 사진이나 동영상을 기반으로 3DGS 기술(Luma AI 등)을 활용해 3D 모델을 새로 생성할 수 있습니다. 다만 정밀도는 CAD 기반보다 낮을 수 있습니다.
Q2. 모바일에서도 잘 작동하나요? 최적화 작업(LOD, 지연 로딩, CDN)을 제대로 하면 iOS Safari, Android Chrome 모두에서 원활하게 작동합니다. 최적화 없이 올리면 모바일에서 버벅거림이 심해집니다.
Q3. SaaS 구독형과 맞춤 제작, 어떤 걸 선택해야 하나요? 제품 라인업이 50개 이하이고 빠른 도입이 우선이라면 SaaS가 유리합니다. 브랜딩·견적 시스템·DB 연동이 필요하거나 제품이 많다면 맞춤 제작이 장기적으로 비용 효율이 높습니다.
Q4. 기존 홈페이지에 3D 뷰어만 추가할 수 있나요?
가능합니다. <model-viewer> 태그나 Three.js 기반 뷰어를 기존 홈페이지에 임베드 형태로 삽입할 수 있습니다. 단, 기존 서버 환경과 CDN 설정을 함께 검토해야 합니다.
Q5. 3D 웹 뷰어 도입 후 카탈로그 인쇄를 완전히 없애도 되나요? 전시회·오프라인 영업 등 특정 상황에서는 여전히 인쇄물이 필요할 수 있습니다. 그러나 '정기 대량 인쇄' 관행은 없애고 소량 온디맨드 인쇄로 전환하는 기업이 늘고 있습니다.
제조업 홈페이지에 3D 웹 뷰어 도입을 검토 중이신가요? 에이달(ADALL)은 CAD 데이터 경량화부터 WebGL 인터랙션 구현, SEO 최적화까지 일괄로 설계한 경험을 갖추고 있습니다. 어떤 방식이 우리 회사 상황에 맞는지 아직 판단이 서지 않으신다면, 부담 없이 무료 컨설팅 을 통해 먼저 방향을 잡아보세요.
📞 02-2664-8631 | 📧 master@adall.co.kr
서울특별시 강서구 방화대로31길 2, 5~6층 | 에이달(ADALL)
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기