[Three.js] Web 3D 성능 최적화: GLB 압축 | 요람일지

최근 3D 상품 전시를 주력 서비스로 하는 사내 프로젝트를 진행하며 3D 뷰어의 로딩 UX와 렌더링 품질을 개선하는 작업을 맡았습니다. 웹에서 고품질의 3D 모델(GLB)을 다룰 때 가장 큰 딜레마는 퀄리티와 퍼포먼스 사이의 줄타기입니다.

초기에는 디코딩 속도에 이점이 있는 Meshopt 방식을 도입했으나, 실제 배포 후 저사양 네트워크 환경을 고려하여 Draco 압축으로 롤백하게 된 기술적 의사결정 과정과 최적화 노하우를 공유합니다.

1. 초기 접근: 디코딩 속도를 위한 Meshopt와 WebP 도입

처음 최적화 전략을 세울 때는 사용자가 모델을 불러왔을 때 '화면에 뜨는 속도(디코딩)'를 줄이는 것에 집중했습니다. 이를 위해 gltf-transform CLI 도구를 활용하여 다음과 같은 파이프라인을 구축했습니다.

gltf-transform optimize 
before.glb after.glb 
--texture-compress webp 
--simplify false 
--join false 
--instance false

각 옵션의 의도는 다음과 같습니다.

Meshopt 압축: 기존 Draco 압축을 해제하고, 웹 환경에서 GPU 친화적이며 디코딩 속도가 훨씬 빠른 Meshopt 알고리즘을 적용했습니다.

WebP 텍스처 변환: 모델 내부의 PNG/JPG 텍스처를 WebP 포맷으로 변환하여, 이미지 품질은 유지하면서 텍스처 용량을 획기적으로 줄였습니다.

구조 최적화: 불필요한 노드와 빈 데이터를 정리하여 런타임 성능을 확보했습니다.

Meshopt는 Draco에 비해 압축률은 다소 낮지만, 클라이언트(브라우저)에서 모델을 압축 해제하는 비용이 매우 낮아 렌더링 지연을 최소화할 수 있다는 장점이 있습니다.

2. 현실의 벽과 전략 수정: Meshopt에서 Draco로의 롤백

개발 환경(고성능 PC, 기가비트 인터넷)에서는 Meshopt 방식이 쾌적했습니다. 하지만 실제 서비스 타겟인 '인터넷 저사양 환경'을 고려했을 때 문제가 발생했습니다.

Meshopt는 디코딩은 빠르지만, Draco에 비해 파일 용량 자체는 큽니다. 네트워크 대역폭이 좁은 환경에서는 디코딩 속도보다 다운로드 시간 자체가 병목이 되었습니다.

따라서 다음과 같은 결정을 내렸습니다.

변경 전: Meshopt (빠른 디코딩, 큰 용량)

변경 후: Draco (느린 디코딩, 초소형 용량)

결국 네트워크 병목을 해소하기 위해 파일 용량을 극한으로 줄일 수 있는 Draco 압축 방식으로 회귀했습니다. 왼쪽이 Meshopt, 오른쪽이 Draco 적용 결과라고 가정할 때 시각적 차이는 거의 없으면서 용량 이득을 취하는 것이 모바일 환경 대응에 유리하다는 판단이었습니다.

3. 로딩 전략의 변화: 병렬 Preload에서 On-demand 로딩으로

단순히 파일 압축만으로는 부족했습니다. 에셋을 불러오는 시점(Loading Strategy)에 대한 수정도 병행되었습니다.

기존 로직 (Before)

Product List 팝업 진입 시, 리스트에 있는 모든 상품의 GLB 파일을 한 번에 다운로드하는 '병렬 Preload' 방식을 사용했습니다. 이는 대역폭을 순식간에 점유하여 다른 API 요청까지 지연시키는 문제를 낳았습니다.

개선 로직 (After)

사용자가 실제로 선택한 상품 파일만 다운로드하도록 변경했습니다. 불필요한 네트워크 리소스 낭비를 막고, 초기 진입 속도를 보장했습니다.

4. 체감 성능 개선을 위한 UX 장치

기술적 수치(다운로드 시간)를 줄이는 것만큼 중요한 것은 사용자 경험입니다. 로딩이 진행되는 동안 사용자가 멈춰있다고 느끼지 않게 하는 것이 핵심이었습니다.

Canvas 파싱 시점 분리: 무거운 3D 모델 파싱 작업이 UI 스레드를 블로킹하지 않도록 실행 시점을 명확히 분리했습니다.

인트로 오버레이 및 프로그레스바: 검은 화면 대신 진행률을 시각적으로 보여주어 심리적 대기 시간을 단축했습니다.

CDN 전환: 히스토리 이미지 등 정적 자원은 CDN을 통해 서빙하여 로딩 속도를 전반적으로 끌어올렸습니다.

5. 모델 데이터 튜닝과 협업

개발 코드뿐만 아니라 3D 모델 데이터 자체에 대한 보정도 필요했습니다. 3D 뷰어에서 제품이 가장 매력적으로 보이도록 초기값을 조정했습니다.

Transform 보정: 바닥면에 모델이 딱 붙도록 위치(Y축)를 조정하고, 제품 뒷면이나 렌더링이 덜 된 부분이 초기 진입 시 노출되지 않도록 회전각(Rotation)을 수정했습니다.

협업 규칙: 이러한 최적화 과정이 일회성으로 끝나지 않도록 GitHub Copilot 전역 설정과 프로젝트 컨벤션 문서를 통해 팀원들과 노하우를 공유했습니다.

마치며

Web 3D 최적화에 정답은 없습니다. 고사양 디바이스가 타겟이라면 Meshopt가 훌륭한 선택이 될 수 있지만, 일반적인 웹 서비스 환경이나 모바일 대응이 중요하다면 여전히 Draco의 높은 압축률이 필수적입니다.

이번 프로젝트를 통해 기술 스택은 단순히 최신이나 빠른 것이 아니라, 사용자의 환경에 맞춰 유연하게 선택해야 한다는 것을 다시 한번 확인했습니다.