[유니티/에셋] WebGL 개발 최적화를 도와주는 에셋! (Unity WebGL Optimizer)

| 사용하게 된 이유

이전 프리랜서를 진행하면서 WebGL를 타깃으로 하는 프로젝트를 2개 진행을 했었습니다.

처음 WebGL 프로젝트를 진행을 하고, 처음으로 Itch.io에 업로드까지 작업했었습니다.

 

처음 어느 정도 개발이 진행이 된 후 itch.io에 업로드 후 테스트를 진행을 해보니 프레임이 전혀 나오지 않는 문제를 확인할 수 있었습니다. (대략 0 ~ 30 프레임, 사실상 플레이 불가능..)

 

뭔가 최적화 부분에서 문제가 있다고 판단을 하여 WebGL 타깃에서의 최적화를 진행하는 법을 찾다가 해당 에셋을 찾게 되었고, 약간의 프레임 개선이 되었습니다. (추후 알게 되었지만, 진행했던 최적화 작업보단 하드웨어 가속 문제였습니다 추후 포스팅하겠습니다)

 

CrazyGames에서 자체 제작한 유틸리티 패키지인데, 이름에서도 나와있지만 목적 자체가 WebGL 최적화를 위한 에셋에다가 실제로 조금만 건드려 보면 금방 작업을 할 수 있을 만큼 사용방법이 간단한 에셋입니다.

 

대부분 유니티 세팅을 변경하여 최적화를 하는 것이기 때문에 직접 최적화를 하면서 세부 최적화 세팅도 가능합니다.
이 부분은 추후에 별도로 정리하겠습니다.

---

| 설치

1) 깃허브 레포

해당 에셋은 아래의 깃헙 레포 링크를 통해서 파일을 다운로드할 수 있지만, 현재까지는 따로 파이어 베이스 SDK처럼 패키지의 형태로 배포하고 있지 않습니다.

GitHub - CrazyGamesCom/unity-optimizations-package

ReadMe를 확인해 보니 해당 개발사에서 제공하는 Crazy SDK와 함께 제공한다고 적혀있고, 설치 방법도 적혀있지 않은 걸 확인할 수 있지만, 해당 레포를 zip 압축파일을 통해서 설치를 할 수 있습니다.

 

CrazyGames ,UnityWebGLOptimizer 깃허브 레포

---

2) 프로젝트 임포트

압축파일의 Assets - CrazyOptimizer 폴더를 프로젝트로 옮기면 상단 툴바에 Tools - WebGL Optimizer 항목이 생긴 걸 확인한다면 에셋 설치는 끝이 나게 됩니다.

ZIP로 다운로드 후, 임포트를 위해 필요한 파일 표시

유니티 프로젝트 임포트 시 화면

---

| 사용방법

상단 메뉴를 통해 WebGL Optimizer를 실행시키게 되면 아래와 같이 탭 별로 최적화 세션이 나누어져 있는 에디터 창이 화면에 활성화 되게 됩니다.

각 섹션별 항목의 Fix 버튼과 Analyze 버튼을 통해 설정값 변경 및 분석을 할 수 있습니다.
Export를 제외한 나머지 탭의 경우는 Include files from Packages라는 토글이 존재하고, 문서에서는 설치된 패키지의 파일들도 함께 분석하는 옵션이라고 설명이 되어 있습니다.

1) Export (내보내기 / 빌드 시)

빌드 시의 최적화를 하고, 빌드 크기를 줄일 수 있는 탭입니다.
4가지의 항목들이 있으며, Unity 2022.03.1f1의 경우 기본적으로 2가지가 세팅이 되어있는 상태입니다.

WebGL Optimizer의 Export (내보내기/빌드) 탭

[ Brotli Compression ]

- 해당 항목은 압축 방식을 설정하는 항목입니다.

- 기본적으로 Gzip 형식의 압축 방식으로 설정이 되어있는데, Brotli 압축 방식이 Gzip보다 압축률이 더 높기 때문에, 빌드 시 파일의 사이즈를 효과적으로 줄일 수 있지만, 빌드 시간이 길어지고 일부 브라우저에서는 지원하지 않기 때문에 가능한 제한 사항이 있지만, 많은 사람들이 사용하는 Chrome과 Firefox의 경우 Https를 통한 Brotli 압축을 지원하기 때문에 가능한 경우 해당 Brotli 방식을 사용하는 것이 더 효과적입니다.

[ Name Files As Hashes ]

- 해당 옵션을 활성화하는 경우 기본 파일 이름이 아닌 파일 이름을 해싱하게 됩니다.

- 빌드 파일의 각각 적용되어 추후 빌드 시 변경(업데이트) 된 파일만 작업되게 합니다.

[ Exeption Support ]

- 예외에 처리에 관한 옵션이며, 해당 에셋의 추천 설정을 Explicitly Thrown Exceptions Only입니다.

- None으로 설정은 하게 되면 좀 더 좋은 성능 내고, 빌드를 최소화시킵니다.

- 대신, try/catch 블록이 존재하고 예외가 발생한다고 하면 게임이 중단되기 때문에 주의를 해야 합니다.

[ Strip Engine Code ]

- 빌드 시 사용하지 않는 코드를 제거하여 최종 빌드 크기를 줄일 수 있는 옵션입니다.

- Player - OtherSettings에 기본적으로 활성화되어 있으며, Managed Stripping Level을 조절할 수 있습니다.

- High로 둘 수록 빌드 크기를 최적화할 수 있지만, 유용한 코드도 제거될 수 있습니다.

---

2) Textures (텍스처 리소스)

프로젝트 내에 존재하는 모든 텍스처를 분석하여 각 파일들의 상태를 확인할 수 있고, 각 설정 옵션들이 성능에 어떤 도움이 되는지 나와 있습니다.

WebGL Optimizer의 Textures (텍스처 리소스) 탭

[ Max Size ]

- 유니티의 경우, 기본적으로 Max Size는 2048 x 2048로 되어 있습니다.
- 텍스처 파일 자체가 예를 들어 64 x 64라면 해당 사이즈의 맞게 설정하는 게 사이즈 크기를 더 줄일 수 있습니다.
- 저의 경우는, 항상 텍스처 리소스의 Max Size를 파일 크기의 맞게 조정해 놓습니다.

[ Compression ]

- 텍스처의 압축 항목이며, 압축 품질이 높을수록 성능의 유리하지만, 품질이 낮아지기 때문에 플레이어가 자세히 보지 않는 리소스의 경우는 압축을 높게 하는 식으로 많이 작업합니다.

[ Crunch Compression ]

- 텍스처가 소비하는 디스크 공간의 양을 줄이고, 메모리에 더 빨리 로드되도록 합니다.

- 대신, DXT 또는 ETC를 통해 이미 압축이 되어있는 텍스처를 지원하며, 오래 걸릴 수 있습니다.

[ Crunch Compression Quality ]

- 슬라이더를 통해서 크런치 압축의 퀄리티를 조절할 수 있으며, 높은 압축 품질일수록 압축 시간이 길어집니다.

---

3) Models (모델 리소스)

텍스처 탭과 마찬가지로 프로젝트 내 모델 리소스들을 분석하여, 각 파일의 상태를 확인할 수 있습니다.

WebGL Optimizer의 Models (모델 리소스) 탭

[ R/W enabled ] 

- 해당 옵션이 활성화되어 있으면, 메시 사본이 생성 메모리와 GPU 메모리에 유지되기 때문에 필요한 경우가 아니라면 비활성화하는 것이 좋습니다.

[ Polygons/Vertices Optimized ]

- 폴리곤과 정점들을 재정렬 하여 GPU의 성능을 향상해 주는 옵션입니다.

[ Mesh Compression ]

- 메시를 압축하여 성능을 최적화시키는 옵션입니다.

- 텍스처와 마찬가지로 High로 갈수록 성능은 개선되지만, 그만큼 품질이 낮아지기 때문에 상황에 맞춰서 적절히 조정하는 게 효율적입니다.

[ Animation Compression ]

- 애니메이션의 키 프레임을 압축시키는 옵션입니다.

- 아래는 유니티 문서에서 제공되는 선택 가능한 옵션 설명입니다.

• Anim. Compression
  • Off :
    
    • 애니메이션 압축을 사용하지 않습니다. 
    • Unity가 임포트 할 때 키 프레임 수를 줄이지 않습니다.
    • 애니메이션 압축을 비활성화하면 고정밀도 애니메이션이 되지만, 성능이 떨어지고 파일과 런타임 메모리 크기가 커집니다. 
    • 일반적으로 이 옵션을 사용하는 것은 좋지 않습니다. 고정밀 애니메이션이 필요한 경우 키 프레임 축소를 사용하고 대신 Animation Compression Error 값을 허용하는 것이 좋습니다.
  • Keyframe Reduction:
    
    • (번역기 사용) 가져올 때 중복 키 프레임을 줄입니다.
    • 활성화된 경우, Inspector는 애니메이션 압축 오류 옵션을 표시합니다.
    • 파일 크기(런타임 메모리)와 곡선을 평가하는 방법에 모두 영향을 미칩니다. 레거시, 제네릭 및 휴머노이드 애니메이션 유형 리그에 적용됩니다.
  • Keyframe Reduction and Compression:
    
    • 임포트 할 때 키 프레임을 줄이고 애니메이션을 파일에 저장할 때 키 프레임을 압축합니다.
    • 파일 크기에만 영향을 미치며 런타임 메모리 크기는 Keyframe Reduction과 동일합니다.
    • 이 옵션을 활성화하면 인스펙터에 Animation Compression Error 옵션이 표시됩니다.
    • Legacy 애니메이션 타입만 사용할 수 있습니다.
  • Optimal: 
    
    • Unity가 키 프레임 감소 또는 고밀도 포맷 사용 중에서 압축 방식을 결정합니다.
    • 이 옵션을 활성화하면 인스펙터에 Animation Compression Error 옵션이 표시됩니다.
    • Generic 및 Humanoid 애니메이션 타입에만 사용할 수 있습니다.
• Animation Compression Errors
  • Rotation Error: 
    
    • 회전 커브 압축에 대한 오류 허용치(각도)를 설정합니다.
    • Unity는 이 값을 사용하여 회전 커브의 키를 제거할지 결정합니다.
    • 이 값은 원래 회전 값과 감소된 값 사이의 최소 각도를 나타냅니다 (Angle(value, reduced) < RotationError)
  • Position Error:
    • 포지션 커브 압축에 대한 오류 허용치(백분율)를 설정합니다.
    • Unity는 이 값을 사용하여 포지션 커브의 키를 제거할지 결정합니다.
    • 자세한 내용은 포지션 및 스케일 커브의 키 감소에 대한 오류 허용치 설정을 참조하십시오. 
      
  • Scale Error:
    
    • 스케일 커브 압축에 대한 오류 허용치(백분율)를 설정합니다.
    • Unity는 이 값을 사용하여 스케일 커브의 키를 제거할지 결정합니다.
    • 자세한 내용은 포지션 및 스케일 커브의 키 감소에 대한 오류 허용치 설정을 참조하십시오.
      

---

4) Audio Clips (오디오 리소스)

이전 탭들과 비슷합니다. 대신, 오디오 리소스에 대한 파일을 분석합니다.
다른 탭들보단 옵션이 적어서, 세부적인 설정은 직접 해야 할 듯합니다.

WebGL Optimizer의 Audio Clips (오디오 리소스) 탭

[ Load Type ] 

Unity가 런타임 시 오디오 에셋을 어떤 식으로 로딩할 것인지 정하는 옵션입니다.

아래는 유니티 문서에서 제공하는 설명입니다.

• Load Type
  • Decompress On Load (번역):
    
    • 오디오 파일은 로드되는 즉시 압축이 해제됩니다.
    • 압축 해제 시 발생하는 성능 오버헤드를 방지하기 위해 압축된 소리가 작을 경우 이 옵션을 사용합니다.
    • 로드 시 Vorbis 인코딩 사운드를 압축 해제하면 압축을 유지하는 것보다 약 10배 더 많은 메모리가 사용되므로(ADPCM 인코딩의 경우 약 3.5배) 대용량 파일에는 이 옵션을 사용하지 마십시오.
  • Compressed In Memory (번역):
    
    • 재생하는 동안 오디오를 메모리에 압축한 상태로 유지하고 압축을 해제합니다. 
    • 이 옵션은 특히 Ogg/Vorbis 압축 파일의 경우 약간의 성능 오버헤드가 있습니다.
    • 로드 시 압축 해제를 위해 초과 메모리를 사용하는 파일에만 사용하십시오.
    • 압축 해제는 믹서 스레드에서 발생하며, 프로파일러 창의 오디오 창에 있는 DSP CPU 섹션에서 모니터링할 수 있습니다.
  • Streaming (번역):
    • 연속 오디오를 디코딩합니다.
    • 이 방법은 최소한의 메모리를 사용하여 디스크에서 점진적으로 읽히고 자동으로 디코딩되는 압축 데이터를 버퍼링 합니다.
    • 압축 해제는 프로파일러 창의 오디오 창에 있는 스트리밍 CPU 섹션에서 CPU 사용량을 모니터링할 수 있는 별도의 스트리밍 스레드에서 수행됩니다.
    • 참고: 스트리밍 클립은 오디오 데이터가 로드되지 않더라도 약 200KB의 오버헤드를 가집니다.

[ Quality ]

텍스처나 모델 파일의 압축 수준을 정하는 것과 유사합니다.

슬라이더를 이동시키며 압축 수준을 세팅하고, 실제 테스트를 통하면서 적절한 값을 찾는 것을 추천합니다.

---

5) Build Logs (빌드 로그)

해당 탭의 경우는 제가 아주 유용하게 쓰는 기능 중 하나입니다.

최소 한 번은 빌드를 진행한 후, Analyze build logs 버튼을 눌러 분석을 할 수 있습니다.

기존의 빌드 로그를 보려면, 메모장을 열어 불편하게 로그 분석을 해야 하는 문제를 훨씬 보기 편하게 해 줍니다.

해당 기능의 경우는 빌드 시 각 리소스 파일의 크기와 용량 점유율을 확인할 수 있습니다.

WebGL Optimizer의 Build Logs (빌드 로그) 탭

| 마무리

WebGL을 환경을 대상으로 최적화를 진행해 주는 에셋을 소개드리게 되었습니다.

설명을 보시면 알겠지만, 일반적으로 직접 유니티 설정을 건드려서 에셋을 사용하지 않아도 동일한 최적화 작업을 진행할 수 있지만, 그래도 간단한 최적화 작업 진행의 경우는 매우 편리했던 거 같습니다.

- 에셋 텍스트 한글화 작업..?

해당 에셋을 사용할 때 모든 것이 영어라 모르는 단어가 있는 경우 애매한 부분이 존재합니다.

이 부분 때문에 해당 에셋의 문구는 충분히 한글화가 가능할 것이라고 판단하여 해당 CrazyGames 이메일 문의를 통해 혹시나 발생할 수 있는 문제를 확인하고, 피드백을 받았습니다.

아마 조만간 문구들을 한글화 하는 작업을 한 UnityWebGLOptimizer 에셋을 공유해 드릴 수 있을 것 같습니다.

- 자체 최적화 에셋 개발 계획

7개 이상의 프로젝트를 진행을 하면서, 성능 문제와 빌드 크기 문제처럼 최적화는 항상 고민하게 되는 거 같습니다.

그러면서 최적화를 진행해 주는 에셋이 있으면 좋다고 생각하던 중 찾게 된 해당 포스팅 에셋을 찾았지만, 좀 더 세부적인 세팅이나 기능들이 아쉬운 점이 있기에 한번 직접 최적화를 돕는 에셋을 만들어 보자는 생각이 들게 되었습니다.

언제가 될지는 모르겠지만, 많은 개발자들이 사용 가능한 최적화 에셋을 한번 꼭 만들어 보고 싶네요

 

궁금하거나 추천할 만한 에셋이 있는 경우 댓글 남겨주세요

직접 사용 후 후기를 남겨 보겠습니다.

 

[참고했던 블로그 / 글]

 

Unity WebGL Optimizer - CrazyGames Documentation

 

오디오 클립 - Unity 매뉴얼

 

모바일 게임 성능 최적화: 그래픽과 에셋에 관한 전문가 팁 | Unity Blog

 

메시 데이터 압축 - Unity 매뉴얼

 

애니메이션 탭 - Unity 매뉴얼

 

텍스처 - Unity 매뉴얼

 

Unity - Manual: Texture formats

 

텍스처 압축 포맷 - 나무위키

 

Unity) Texture Format (플랫폼 별 효율적인 텍스처 압축 포맷)

 

Why use crunch compression?

 

What is Crunch Compression? – techarthub

 

[WP] Gzip 압축 vs Brotli 압축: 2개 압축 알고리즘 차이점 • Economics | IT

 

Unity - Manual: Managed code stripping

 

관리되는 코드 스트리핑 - Unity 매뉴얼

 

WebGL 애플리케이션 빌드 - Unity 매뉴얼

 

Unity - Scripting API: PlayerSettings.WebGL.exceptionSupport

 

Brotli 압축방식(Compression)을 통한 웹 성능 최적화