daily.log
cd ../
Network·2026-01-15·5 min read·# entry/006

3D 웹 게임에서 발견한 .br 파일, 렌더링 효율의 비법

믿기지 않을 정도로 부드러운 3D 웹 게임의 비밀, .br 파일에 숨겨진 렌더링 효율의 비법을 파헤쳐보자

웹 개발을 하다 보면 빌드 결과물 폴더에서 .br이라는 낯선 확장자를 마주치게 됩니다.

.br 파일은 Google에서 개발한 오픈소스 무손실 압축 알고리즘인 Brotli(브로틀리)를 사용하여 압축된 데이터 파일입니다. 기존의 Gzip을 대체하거나 보완하여 웹 페이지 로딩 속도를 획기적으로 줄이기 위해 등장했습니다.

1. 이름의 유래: 빵과 압축의 관계

2015년 등장한 Brotli는 Gzip보다 약 17~25% 더 높은 압축률을 자랑합니다. 그런데 왜 이름이 'Brotli'일까요?

Brötli: 작은 빵

Brotli는 스위스 독일어로 '작은 빵(Small Bread)' 을 의미합니다.

재미있는 점은 Google이 이전에 개발한 압축 알고리즘의 이름이 Zopfli(스위스 빵의 일종) 였다는 것입니다. 즉, "이전 빵(Zopfli)보다 더 작게 만든다"는 개발자들의 위트가 담긴 후속작임을 암시합니다.

2. Brotli를 지탱하는 3가지 기둥

Brotli는 일반적인 ZIP 프로그램으로는 열리지 않습니다. 내부적으로 세 가지 핵심 기술이 결합되어 있기 때문입니다.

데이터 내에서 반복되는 문자열을 찾아 "위치와 길이" 로 치환합니다.

  • 원리: "앞으로 5글자 뒤에 있는, 3글자짜리 단어와 같다"는 식의 좌표값(Distance, Length)으로 변경하여 중복을 제거합니다.

3. 압축 파이프라인 (The Pipeline)

서버와 클라이언트(브라우저) 사이에서 .br 파일은 어떻게 처리될까요? 보이지 않는 곳에서 일어나는 협상 과정을 살펴봅시다.

1

1단계: 협상 (Negotiation)

Client → Server

브라우저는 요청을 보낼 때 헤더에 "나 브로틀리 해제할 줄 알아!"라고 신호를 보냅니다.

Accept-Encoding: br, gzip, deflate
2

2단계: 압축 수행 (Server)

서버는 요청을 확인하고 .br 파일을 제공하기로 결정합니다. 두 가지 방식이 있습니다.

  • 정적 압축 (Static): 빌드 타임(Webpack/Vite)에 미리 만들어둔 .br 파일을 단순히 읽어서 전송합니다. (CPU 부하 0)
  • 동적 압축 (Dynamic): 요청이 들어온 순간 실시간으로 압축합니다. (CPU 부하 발생)
3

3단계: 전송 및 응답

Server → Client

서버는 응답 헤더에 "이거 브로틀리로 압축된 거야"라고 꼬리표를 붙여 보냅니다.

Content-Encoding: br
Content-Type: text/html
4

4단계: 압축 해제 (Decompression)

브라우저는 수신한 바이너리 데이터를 메모리에서 즉시 해제하여 원본 HTML/JS/CSS로 복구합니다.

Brotli는 압축할 때는 느리지만(CPU 많이 씀), 해제할 때는 Gzip만큼 빠르도록 설계되어 사용자 경험(UX)을 해치지 않습니다.

4. 실전 적용: 빌드 결과물 확인

실제 프론트엔드 프로젝트를 빌드하면 다음과 같은 구조를 볼 수 있습니다.

dist (Build Output)
assets
index.js (원본: 500KB)
index.js.gz (Gzip: 180KB)
index.js.br (Brotli: 140KB) ★
index.html

5. 결론: Gzip vs Brotli

Brotli의 장점
  • 압도적인 압축률: Gzip 대비 텍스트 기반 자산(HTML, CSS, JS)에서 약 15~20% 더 작습니다.
  • 모바일 친화적: 데이터 전송량이 적어 모바일 네트워크 환경에서 로딩 속도가 빠릅니다.
  • 사전 기반 효율: 작은 파일에서도 높은 효율을 보입니다.
주의할 점
  • HTTPS 필수: 대부분의 브라우저는 보안상의 이유로 HTTPS 환경에서만 Brotli(br)를 지원합니다.
  • 압축 속도: 압축하는 데 걸리는 시간이 Gzip보다 깁니다. 따라서 동적 압축보다는 빌드 타임에 미리 압축(Static Compression) 해두는 것이 좋습니다.