웹을 위한 더 나은 압축 - Brotli

2021-08-28

웹사이트에서 용량은 매우 중요합니다. 많은 웹사이트에서 빠른 전송 속도를 위해 gzip으로 압축하고 있습니다.

그런데 웹 브라우저가 지원하는 압축 알고리즘 중에는 gzip 보다 더 효율적인 압축도 있습니다.

Brotli는 구글이 2013년에 공개한 압축 알고리즘입니다. 현재 IE를 제외한 대부분 브라우저에서 지원하며, gzip에 비해 최대 15-20% 더 적은 용량으로 압축할 수 있습니다.

Brotli은 어떻게 gzip 보다 더 나은 압축을 제공해주는 걸까요?

압축

압축에는 손실 압축, 무손실 압축 두가지 종류가 있습니다.

손실 압축

손실 압축의 좋은예는 mp3 입니다. 인간은 들을수 있는 주파수(가청 주파수)가 한정되어 있습니다. 들을 수 없는 주파수 데이터를 지운다면 용량은 줄어들지만 차이를 느끼지 못할겁니다.

이렇듯 원본과 조금 달라도 괜찮은 이미지, 영상, 음원에는 손실 압축이 많이 사용됩니다.

무손실 압축

하지만 자바스크립트, HTML은 압축후에도 원본을 유지해야합니다. 텍스트에서 무손실 압축은 반복되는 단어를 사전으로 만드는 것과 같습니다. 별 헤는 밤의 일부분을 압축하며 설명해보겠습니다.

별 하나에 추억과
별 하나에 사랑과
별 하나에 쓸쓸함과
별 하나에 동경과
별 하나에 시와
별 하나에 어머니, 어머니,

시에선 별 하나에 와 어머니,가 반복되는걸 볼 수 있습니다. 별 하나에를 ✩로, 어머니,를 ⺟로 바꿔보죠

✩추억과
✩사랑과
✩쓸쓸함과
✩동경과
✩시와
✩⺟ ⺟

이렇게 자주 반복되는 단어를 더 짧은 단어로 수정하면 글자수가 줄어들게 됩니다. 압축 알고리즘은 이렇게 반복되는 단어를 더 짧은 단어로 치환하고, 사전을 함께 묶어 파일로 만듭니다. 압축을 풀때는 사전을 이용해 원래 문장으로 복구하는 것이죠.

여러 압축 알고리즘은 '좋은 사전을 얼마나 빨리 만드는가?'를 달성하기 위해 노력합니다. 재미있는 사실은 사전을 만들때 자주 반복되는 단어가 가까이 있을 수록 더 효율적으로 압축할 수 있어, CSS 속성을 어떻게 정렬하는가도 압축효율에 영향을 줄 수 있습니다.

더 나은 사전 만들기

여기서 Brotli 압축의 재미있는 아이디어가 나옵니다.

웹에선 반복되는 단어가 많습니다. HTML에서는 div, a와 같은 태그들, 자바스크립트에서는 function, let과 같은 예약어와 Math fetch와 같은 Web API, CSS에서는 각종 CSS 속성들이 반복되어 사용되죠.

Brotli는 이런 웹에서 자주사용되는 단어로 미리 사전을 만들어두었습니다. 자주 사용되는 단어들인 만큼 효율적인데다가, 이 사전은 브라우저에서 미리 가지고 있도록해 사전의 용량도 추가적으로 줄일 수 있습니다. 범용적이진 않지만, 웹에서는 그야말로 딱인 압축 방법이지요. (참고로 Brotli는 동적인 사전 또한 가지고 있습니다.)

이러한 이유로 Brotli는 반복되는 태그가 많은 HTML에서 가장 좋은 효율을 보입니다.

Brotli 사용하기

Brotli를 사용할 수 있다면, 웹 브라우저에서는 Accept-Encoding 헤더값으로 br을 넣어서 전달합니다.

지금 사용하시는 웹브라우저의 개발자도구를 켜시면 대부분 Accept-Encoding: gzip, br 헤더가 전달되는 것을 보실 수 있습니다. 서버에서는 이 헤더 값을 기준으로 사용할 수 있을때 Brotli로 압축하여 전달하면 됩니다.

AWS

AWS를 사용하신다면 작년 9월 부터 CloudFront에서 지원하고 있어 간단히 사용하실 수 있습니다.

지금 다니고 있는 회사에서도 Brotli 압축을 사용하는데, 사실 여러 벤치마크에서 처럼 드라마틱한 효과를 보진 못했습니다. 대략 5% 정도 더 효율적 이었던 걸로 기억합니다. 하지만 간단히 용량을 줄일 수 있는 몇 안되는 방법이며, 대규모 트래픽이 몰리는 서비스에선 분명히 비용개선에 도움이 될 것이라 생각합니다.

더 많은 웹사이트에서 Brotli 압축을 보면 좋겠습니다 :)