웹 문서 또는 자바스크립트와 같은 파일을 전송할 때 네트워크 트래픽을 줄이기 위해 압축을 해서 빌드를 하게 되는데, 이 때 사용하는 압축 방식이 gZip 또는 Brotli 입니다! 👍

Brotli

💡 Quoutation

브로틀리(Brotli)는 구글에서 개발한 무손실 데이터 압축 알고리즘이다. 이는 범용 LZ77 무손실 압축 알고리즘, 허프먼 코딩 및 2차 컨텍스트 모델링의 조합을 사용한다. Brotli는 주로 웹 서버 및 콘텐츠 전송 네트워크에서 HTTP 콘텐츠를 압축하여 인터넷 웹 사이트를 더 빠르게 로드하는 데 사용된다. - Wikipedia

개인 서버를 구축하여 배포를 한다면 트래픽 관련 고민은 크게 하지 않겠지만 클라우드 또는 CDN 서비스를 이용을 한다면 무조건 검토를 해야할 사안 중 하나입니다. 트래픽은 곧 지불해야 할 비용이니까요! 😭

유니티 압축 지원

유니티에서 WebGL 플랫폼으로 빌드할 때 압축 설정을 할 수 있습니다.

player-settings

여기서 문제는 간단한 게임이라도 브로틀리로 압축 설정을 해서 빌드를 하면 빌드 시간이 많이 늘어났고 한 대의 PC에서 개발 및 빌드를 하기 때문에 빌드할 동안에는 유니티 에디터를 사용하지 못한다는 점입니다.

그래서 컴파일과 압축을 따로할 수 있는 방법을 찾았고 다행이 정상 동작 되서 글을 쓰게 되었습니다.

🔧 유니티에서는 빌드만

유니티에서 Player - Publishing Settings 에서 Compression Format 을 Disable 로 설정해서 빌드합니다.

빌드 후 출력되는 파일은 웹 템플릿 파일을 제외하고 아래와 같은 네 개의 파일이 출력됩니다.

  1. NAME.wasm
  2. NAME.data
  3. NAME.framework.js
  4. NAME.loader.js

여기서 용량이 큰 파일은 *.wasm 과 *.data 파일 입니다. 저는 *.loader.js 파일만 빼고 나머지를 Brotli로 압축해서 진행했습니다.

🚀 압축하기

압축을 하려면 압축 프로그램이 필요하겠죠? 윈도우에서 제공하는 winget 을 통해 Brotli 를 다운받고 설치할 수 있습니다! 😄

명령 프롬프트를 관리자 모드로 열고 아래 명령어를 입력해서 설치해주세요.

winget install brotli

설치가 다 되었으면 brotli 명령어로 파일을 압축할 수 있습니다. 위 세 개의 파일을 압축하기 위해 해당 파일이 있는 곳으로 이동한 후 압축 명령어를 실행합니다.

1
2

cd [빌드된 파일이 있는 곳]
brotli --best NAME.wasm NAME.data NAME.framework.js

💡 --best 옵션을 사용하여 압축률을 최대한으로 끌어 올립니다.

옵션을 보니 기본값 인 것 같네요. -Z, –best use best compression level (11) (default)

컴파일이 다 되면 *.br 확장자로 된 파일 세 개가 출력이 됩니다. 웹에서 기존 빌드된 파일이 아닌, 압축된 파일을 로드할 수 있도록 자바스크립트에 설정 내용을 조금 수정합니다.

💡 유니티에서 빌드하면 기본으로 나오는 index.html 입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

...
<script>
  var loaderUrl = buildUrl + "/NAME.loader.js";
  var config = {
    arguments: [],
    dataUrl: buildUrl + "/NAME.data.br",
    frameworkUrl: buildUrl + "/NAME.framework.js.br",
    codeUrl: buildUrl + "/NAME.wasm.br",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "nValue",
    productName: "Choose",
    productVersion: "1.0.0",
    showBanner: unityShowBanner,
  };
</script>

3: *.loader.js 파일은 압축하지 않았으므로 그대로 사용합니다.

6-8: Brotli로 출력된 파일명으로 변경합니다.

문제

  1. Brotli 압축 방식은 HTTP 에서 지원하지 않아 SSL 사용이 필수
  2. 해당 압축 방식을 사용하려면 웹 서버가 지원해야 하며, 지원하기 위해 웹 서버 설정이 필요
  3. 빌드 시간은 Code optimization 과 더 연관이 있음 😭