플랫폼마다 답이 다르다: 압축 방식 선택 가이드
지난 4편에서는 각각 버텍스 압축과 텍스처 압축 도구들을 다뤘다. 하지만 도구를 '사용할 줄 아는 것'과 '어떤 도구를, 어떤 상황에서 써야 하는지 아는 것' 은 별개의 문제다. 이번 편이 바로 그 질문에 답한다. 그리고 되도록 이 글을 다 읽고 나면 바로 결정을 내릴 수 있게 해줄 것이다.
이 글을 다 읽고 나면 다음을 판단할 수 있어야 한다: 내 프로젝트가 실행되는 플랫폼은 무엇인지, 첫 화면의 병목은 다운로드 속도인지 VRAM(그래픽 메모리)인지, 텍스처와 버텍스 각각 어떤 솔루션을 적용해야 하는지.
먼저 방향을 정하자: 도구 중심이 아닌, 시나리오 중심
이 글 전체를 관통하는 핵심 원칙은 단 하나다. 이 시리즈에서 계속 강조해온 바로 그것:
'가장 좋은' 압축 방식은 없다. '시나리오에 가장 잘 맞는' 방식만 있을 뿐이다.
선택에 영향을 주는 세 가지 변수:
- 플랫폼/디바이스: 데스크톱 PC, 모바일 브라우저, VR 헤드셋, 미니 프로그램(카카오톡 등) — 성능 격차가 하늘과 땅 차이다
- 사용 방식: 일회성 전시(이커머스 상품 페이지)인가, 장시간 몰입(VR 게임)인가
- 최우선 병목: 다운로드 속도가 느린가, VRAM이 부족한가, 아니면 디코딩이 첫 화면을 막는가
병목 지점을 먼저 명확히 한 다음, 도구를 선택하러 돌아오자. 아래 매트릭스가 바로 이 사고방식을 표로 고정시킨 것이다.
핵심 의사결정 매트릭스: 플랫폼 × 권장 솔루션
이 글 전체에서 가장 중요한 표다. 플랫폼별로 텍스처와 버텍스 각각의 권장 방안과 그 이유를 제시한다.
| 플랫폼 / 시나리오 | 텍스처 방안 | 버텍스 방안 | 주요 병목 | 핵심 이유 |
|---|---|---|---|---|
| 데스크톱 웹 (PC 브라우저) | KTX2 또는 WebP | MeshOpt / 양자화 | 다운로드 속도 | VRAM 여유 있음, 핵심은 파일 크기와 로딩 속도 |
| 모바일 웹 (스마트폰 브라우저) | KTX2 (필수) | MeshOpt | VRAM | 스마트폰 VRAM 타이트, 텍스처는 블록 압축 필수 |
| WebXR / VR 헤드셋 | KTX2 (필수) | MeshOpt + LOD | VRAM + 프레임레이트 | VRAM 부족은 크래시, 프레임 드랍은 멀미 유발 |
| 카카오톡 미니 프로그램 | KTX2 / WebP | MeshOpt / 순수 양자화 | 패키지 용량 + 호환성 | 패키지 크기 제한, 무거운 디코더 회피 |
| 이커머스 상품 전시 | WebP (가벼움) / KTX2 (정밀) | MeshOpt | 첫 화면 속도 | 즉시 로딩 요구, 용량 희생해서 속도 확보 |
| 대규모 씬 / 디지털 트윈 | KTX2 (필수) | MeshOpt + Draco + LOD | VRAM + draw call | 텍스처 많고 모델 크다, 전방위 압축 필요 |
기억해둘 만한 판단 기준 몇 가지:
- VRAM이 병목이라면 KTX2는 필수다 (모바일, VR, 대규모 씬 모두 해당)
- 다운로드 속도가 병목이고 VRAM에 여유가 있다면 WebP로 충분하다 (데스크톱, 이커머스)
- 미니 프로그램처럼 패키지 용량에 민감한 환경에서는 Draco보다 MeshOpt를 우선하라 — 디코더가 가볍고 호환성이 좋다
- 초대형 모델에서만 Draco를 고려하라, 대부분의 중소형 모델은 MeshOpt가 더 균형 잡혀 있다
텍스처 포맷 전면 비교
'KTX2를 쓰면 된다'는 것만으로는 부족하다. 구체적인 텍스처 포맷으로 들어가 모든 차원을 펼쳐 보자:
| 포맷 | 파일 크기 | VRAM 사용량 | 업로드 속도 | 호환성 | 화질 | 적합한 시나리오 |
|---|---|---|---|---|---|---|
| PNG | 큼 | 큼 (압축 해제 후) | 느림 | 매우 넓음 | 무손실 | 정확한 수치/투명도 필요, 또는 구형 플랫폼 대비용 |
| JPG | 매우 작음 | 큼 (압축 해제 후) | 느림 | 매우 넓음 | 손실 | 컬러 텍스처, 네트워크 전송 우선 |
| WebP | 매우 작음 | 큼 (압축 해제 후) | 느림 | 비교적 넓음 | 높음 | 데스크톱 웹, 다운로드 속도 중시 |
| AVIF | 더 작음 | 큼 (압축 해제 후) | 느림 | 점진적 | 높음 | 신규 플랫폼, 극한 압축 |
| KTX2 (ETC1S) | 작음 | 매우 작음 | 빠름 | 트랜스코딩 필요 | 중간 (컬러용으로 충분) | 컬러 텍스처, 모바일/VR |
| KTX2 (UASTC) | 중간 | 작음 | 빠름 | 트랜스코딩 필요 | 높음 | 노말/데이터 텍스처 |
앞의 세 줄(PNG/JPG/WebP/AVIF)의 VRAM 사용량이 모두 '큼'이라는 점에 주목하라 — 디스크에서 아무리 작아도 VRAM에 들어가는 순간 원본 픽셀로 압축 해제된다. 이것이 전통적인 포맷의 근본적인 한계다.
혼합 전략이 흔하다: 핵심 컬러 텍스처는 KTX2로 VRAM을 확보하고, 보조 텍스처(예: 작은 emissive)는 WebP로 간편하게 처리한다. 전부 KTX2로 통일할 필요 없이, 병목 지점에 따라 배분하면 된다.
의사결정 플로우차트: 단계별 선택
매트릭스가 결과라면, 플로우차트는 그 결과에 도달하는 과정을 보여준다.
내 프로젝트는 어디서 실행되나?
│
├─ 데스크톱 웹 (VRAM 여유 있음)
│ └─ 첫 화면 로딩이 느린가?
│ ├─ 느림 → WebP (또는 AVIF) + MeshOpt [다운로드 속도 중시]
│ └─ 안 느리지만, 모델이 많음 → KTX2 + MeshOpt [미래 대비]
│
├─ 모바일 웹 / VR / 대규모 씬 (VRAM 타이트)
│ └─ 텍스처는 무조건 KTX2 (컬러 ETC1S, 데이터 UASTC)
│ └─ 모델 버텍스가 과밀한가?
│ ├─ 예 → + Draco [극한 압축, 느린 디코딩 감수]
│ └─ 아니오 → + MeshOpt [균형]
│
└─ 미니 프로그램 / 제한된 런타임
└─ 패키지 용량에 민감한가?
├─ 민감함 → 순수 양자화 또는 MeshOpt + WebP [디코더 없음/경량]
└─ 괜찮음 → MeshOpt + KTX2 [일반적인 조합]
버텍스 압축 vs 텍스처 압축: 어디에 투자할까
자주 받는 질문이다: 예산이 한정됐다면, 어느 쪽을 먼저 최적화해야 하나? 모델 구성에 따라 답이 갈린다:
| 모델 특성 | 투자 우선순위 | 이유 |
|---|---|---|
| PBR 캐릭터/상품 (텍스처 많음) | 텍스처 압축 | 텍스처가 80%+ 차지, 버텍스 투자 대비 효과 낮음 |
| CAD/스캔 모델 (버텍스 과밀, 텍스처 적음) | 버텍스 압축 | 버텍스가 주요 용량 차지 |
| 애니메이션 캐릭터 (본+스킨) | 양쪽 모두, 단 버텍스는 Draco 외 옵션 우선 | 애니메이션 데이터도 용량 차지, Draco는 애니메이션 지원 약함 |
| 건축/씬 (대규모, 중간 텍스처) | 텍스처 + LOD | 텍스처는 VRAM 절약, LOD는 draw call 절약 |
대략적인 효율 순위: 텍스처 KTX2 > 버텍스 MeshOpt/양자화 > 지오메트리 단순화(LOD) > 버텍스 Draco. 효율이 높은 것부터 진행하자.
혼합 전략: 핵심 텍스처는 KTX2, 보조 텍스처는 WebP
모든 텍스처를 KTX2로 압축할 가치가 있는 것은 아니다. 일반적인 PBR 머티리얼에는 5~6장의 텍스처가 있는데, 전부 KTX2로 압축하는 것은 작업량이 크고 때로는 불필요하다.
실용적인 분류 기준:
- KTX2 필수: albedo (크고, 컬러), normal (정밀도 민감), roughness/metallic (조명에 영향)
- WebP/JPG 가능: emissive (보통 작음), AO (중저주파), 디테일 노말 (있는 경우)
판단 기준: 텍스처가 큰가, 고주파 디테일인가, 빈번하게 샘플링되는가. 세 가지 모두 해당 → KTX2; 하나도 해당 없음 → 전통적인 포맷으로 간편하게 처리.
자동화된 선택: gltf-transform 한 방에 해결
gltf-transform의 optimize 명령은 대부분의 시나리오에서 은탄환이다 — 텍스처 타입을 자동으로 판별하고, 권장 전략에 따라 텍스처를 압축하며, 선택적으로 버텍스도 처리한다.
# 설치
npm install -g @gltf-transform/cli
# 표준 최적화: 텍스처 KTX2 + 버텍스 MeshOpt + 중복 제거
gltf-transform optimize model.glb model-optimized.glb \
--texture-compress basisu \
--meshopt
파라미터 설명:
| 파라미터 | 기능 | 기본값 |
|---|---|---|
--texture-compress basisu | 텍스처를 KTX2로 압축 (ETC1S/UASTC 자동 선택) | 꺼짐 |
--meshopt | 버텍스에 MeshOpt 압축 적용 | 꺼짐 |
--simplify | 지오메트리 단순화 (버텍스 감소, 손실) | 꺼짐 |
--weld | 중복 버텍스 병합 | 켜짐 |
--prune | 미사용 노드/머티리얼 제거 | 켜짐 |
모바일용 '고강도 압축' 조합:
gltf-transform optimize model.glb model-mobile.glb \
--texture-compress basisu \
--meshopt \
--simplify --simplify-ratio 0.5 \
--prune --weld
데스크톱용 '온건한' 조합 (디테일 유지, 텍스처와 버텍스만 압축):
gltf-transform optimize model.glb model-desktop.glb \
--texture-compress webp \
--meshopt
스크립트 작성하기 싫다면? Any3D 온라인 압축
Node를 로컬에 설치하고 툴체인을 구성하기 싫은가? Any3D 온라인 압축은 브라우저에서 바로 처리한다 — GLB를 선택하고, 플랫폼(모바일/데스크톱/VR)별로 시각적으로 파라미터를 조정하며, 모델은 서버에 업로드되지 않고(전 과정 로컬 처리), 원클릭으로 압축 버전을 내보낸다. 내부적으로는 위의 gltf-transform과 동일한 엔진을 사용하지만 진입 장벽이 제로다. 다음 편의 엔드투엔드 실전 편에서 전체 프로세스를 연결해줄 것이다.
한 줄 요약
- VRAM이 병목 → KTX2, 선택의 여지 없음
- 다운로드가 병목이고 VRAM에 여유 있음 → WebP/AVIF도 충분
- 디코더 용량에 민감 → MeshOpt > 순수 양자화 > Draco
- 초대형 모델 → 그때서야 Draco 고려
- 잘 모르겠다 →
gltf-transform optimize한 방에 실행, 틀리면 다시 조정
다음 단계
선택 프레임워크는 완성됐다. 마지막 편에서 마무리한다: 실제 모델 하나를 가지고 Blender 내보내기, 텍스처 압축, 버텍스 압축, 엔진 로딩까지 전체 프로세스를 완주하고, 완전한 자동화 스크립트와 시리즈 전체 요약표를 함께 제공한다.