1. 데이터를 압축해서 보내면 더 빠르다
파일을 이메일로 보낼 때 ZIP으로 압축하면 용량이 줄어들어 더 빨리 전송됩니다. 웹 서버도 마찬가지입니다. 브라우저에 파일을 보낼 때 압축해서 전송하면 전송량이 줄어 로딩이 빨라집니다.
브라우저는 압축된 파일을 받으면 자동으로 압축을 해제하고 표시합니다. 이 과정이 너무 빠르기 때문에 사용자는 압축 여부를 전혀 알 수 없습니다.
2. Gzip이란 무엇인가?
Gzip은 웹 전송에서 가장 널리 사용되는 압축 방식입니다. 1990년대부터 사용된 검증된 기술로, 모든 주요 브라우저와 서버가 지원합니다.
Gzip은 텍스트 기반 파일에서 특히 효과적입니다. HTML, CSS, JavaScript 파일은 반복되는 패턴이 많아 Gzip 압축으로 파일 크기를 70~90%까지 줄일 수 있습니다.
Gzip의 동작 방식입니다. 브라우저가 요청 헤더에 Accept-Encoding: gzip을 포함해 보냅니다. 서버가 Gzip으로 파일을 압축해서 응답합니다. 응답 헤더에 Content-Encoding: gzip이 포함됩니다. 브라우저가 압축을 해제하고 파일을 표시합니다.
3. Gzip이 효과적인 파일 유형
Gzip은 텍스트 기반 파일에 효과적이고, 이미 압축된 파일에는 효과가 거의 없습니다.
압축 효과가 큰 파일: HTML, CSS, JavaScript, XML, JSON, SVG, 텍스트 파일
압축 효과가 없거나 오히려 커지는 파일: JPEG, PNG, WebP, GIF, ZIP, 동영상 파일
이미 압축된 파일은 Gzip을 적용해도 크기가 줄지 않고 오히려 CPU만 낭비합니다. 따라서 이미지와 동영상 같은 바이너리 파일은 Gzip 대상에서 제외해야 합니다.
4. Nginx에서 Gzip 설정하기
Nginx 메인 설정 파일을 엽니다.
sudo nano /etc/nginx/nginx.conf
http 블록 안에 아래 Gzip 설정을 추가합니다.
gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 256; gzip_types text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml font/woff font/woff2;
각 설정의 의미입니다.
gzip on은 Gzip 압축을 활성화합니다.
gzip_vary on은 Vary: Accept-Encoding 헤더를 추가합니다. CDN과 프록시가 압축 버전과 비압축 버전을 구분해 캐시할 수 있게 합니다.
gzip_comp_level은 압축 수준으로 1에서 9까지 설정할 수 있습니다. 숫자가 높을수록 압축률이 높지만 CPU를 더 사용합니다. 6이 속도와 압축률의 균형이 좋습니다.
gzip_min_length는 이 크기 이하의 파일은 압축하지 않습니다. 너무 작은 파일은 압축 오버헤드가 이득보다 클 수 있습니다.
gzip_types는 Gzip을 적용할 MIME 타입 목록입니다.
설정 후 문법 검사와 재시작을 합니다.
sudo nginx -t sudo systemctl reload nginx
5. Brotli – Gzip보다 더 나은 압축 방식
Brotli는 구글이 2015년에 공개한 압축 알고리즘입니다. 같은 압축 수준에서 Gzip보다 텍스트 파일을 약 20~26% 더 작게 압축합니다.
현재 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저가 Brotli를 지원합니다. HTTPS 연결에서만 동작합니다.
Nginx에서 Brotli를 사용하려면 별도 모듈 설치가 필요합니다. Ubuntu에서 설치하는 방법입니다.
sudo apt install nginx-module-brotli -y
설치 후 nginx.conf 최상단에 모듈을 로드합니다.
load_module modules/ngx_http_brotli_filter_module.so; load_module modules/ngx_http_brotli_static_module.so;
http 블록에 Brotli 설정을 추가합니다.
brotli on; brotli_comp_level 6; brotli_types text/plain text/css application/javascript application/json image/svg+xml;
브라우저가 Brotli를 지원하면 Brotli로, 지원하지 않으면 Gzip으로 자동 선택합니다.
6. Gzip 압축이 적용됐는지 확인하는 방법
브라우저 개발자 도구 사용 F12를 눌러 개발자 도구를 열고 Network 탭으로 이동합니다. 페이지를 새로고침한 뒤 특정 파일을 클릭합니다. Response Headers에서 Content-Encoding: gzip 또는 Content-Encoding: br이 보이면 압축이 적용된 것입니다.
온라인 도구 사용 gzip check 또는 check gzip compression 같은 키워드로 검색하면 URL을 입력하면 압축 여부와 압축 전후 크기를 알려주는 온라인 도구들을 찾을 수 있습니다.
curl 명령어 사용 터미널에서 아래처럼 확인합니다.
curl -H “Accept-Encoding: gzip” -I https://yourdomain.com
응답 헤더에 Content-Encoding: gzip이 보이면 정상 작동 중입니다.
7. 정리 및 다음 단계
오늘 배운 핵심을 정리합니다.
- Gzip 압축은 HTML, CSS, JS 같은 텍스트 파일을 전송 전에 압축해 로딩 속도를 높입니다.
- 이미지, 동영상처럼 이미 압축된 파일은 Gzip 대상에서 제외합니다.
- Nginx에서 gzip on 설정으로 간단하게 활성화할 수 있습니다.
- Brotli는 Gzip보다 압축률이 높은 최신 대안으로, HTTPS 환경에서 사용할 수 있습니다.
다음 글에서는 브라우저 렌더링 원리, HTML이 화면이 되기까지의 과정을 알아보겠습니다.