HTML 압축 작동 방식
압축기는 작은 상태 머신으로 입력을 순회하며, 있는 그대로 보존해야 할 영역(<pre>, <textarea>, <script>, <style>)과 공백·주석을 안전하게 축소할 수 있는 편집 가능한 영역을 구별합니다.
- 보존 블록 토큰화. 스캐너는 입력을 한 문자씩 읽으며
<pre>,<textarea>,<script>, 또는<style>여는 태그를 만나면 보존 상태로 전환합니다. 해당 태그 안의 모든 내용은 대응하는 닫는 태그까지 바이트 그대로 유지됩니다. - 편집 가능한 공백 축소. 편집 가능한 영역에서 스캐너는 스페이스, 탭, 줄바꿈의 모든 연속을 하나의 스페이스로 줄인 뒤, 태그 경계 주변의 앞뒤 공백을 다듬습니다. 보이는 텍스트는 브라우저가 렌더링하는 것과 동일하게 재배치됩니다.
- 주석 제거. 토글이 켜져 있으면
<!-- ... -->블록이 제거됩니다. 레거시 이메일 클라이언트가 여전히 IE 조건부 주석(<!--[if IE]> ... <![endif]-->)에 의존하므로, 조건부 주석 보존 토글이 켜져 있으면 해당 주석은 유지됩니다. - 불리언 속성 축소.
checked="checked",disabled="disabled",required="required"같은 장황한 형식이 속성 이름만 남긴 형태로 줄어듭니다. HTML5 명세는 축약 형식을 의미적으로 동일하게 취급하므로 렌더링된 DOM은 변하지 않습니다. - 바이트 차이 보고. 원본과 압축된 텍스트 모두
new TextEncoder().encode(...).byteLength로 측정됩니다 — CDN이나 HTTP 서버가 실제 회선에서 보는 UTF-8 바이트 수와 동일합니다. 메트릭 표시줄은 원본 크기, 압축 후 크기, 절약된 바이트, 절약 비율을 보여줍니다.
HTML을 압축하는 이유
- 빠른 페이지 로드. 더 작은 HTML이 브라우저에 더 빨리 도달하고 파서가 더 일찍 완료됩니다. 모바일 네트워크에서 바이트 절감은 더 빠른 First Contentful Paint와 더 좋은 Lighthouse 성능 점수로 직결됩니다.
- CDN 출구 비용 절감. CloudFront, Cloudflare, Fastly는 기가바이트당 출구 비용을 청구합니다. 월수백만 뷰에서 HTML 20% 감소는 이미지나 스크립트 최적화 없이도 실제 청구서 절감으로 이어집니다.
- 깔끔한 pull-request diff. 저장소에 커밋된 사전 빌드 정적 HTML은 템플릿을 조금 바꿀 때마다 들여쓰기가 바뀌어 노이즈가 많습니다. dist 폴더의 압축 HTML은 더 간결한 PR diff를 만들어 공백 변동 대신 실제 콘텐츠 변경에 집중하게 합니다.
- 더 작은 임베드와 스니펫. 이메일 템플릿, 서드파티 위젯 스니펫, JSON이나 YAML 설정에 저장된 HTML 모두 같은 바이트 절감 혜택을 받습니다. 압축된 임베드는 트랜잭션 이메일을 ESP 크기 제한 이하로 유지하고 위젯 번들을 줄입니다.
주요 활용 사례
HTML 압축은 거의 모든 정적 사이트나 JAMstack 빌드 파이프라인의 마지막 단계에 등장하며, 소스 가독성보다 바이트가 더 중요한 일부 런타임 컨텍스트에서도 사용됩니다.
- 정적 사이트 빌드 단계: Eleventy, Hugo, Astro, Next.js 프로덕션 빌드는 dist 폴더에 쓰기 전에 HTML을 압축기에 통과시켜 배포 번들을 소스보다 작게 만듭니다.
- 트랜잭션 이메일: ESP(SendGrid, Postmark, Mailgun)는 HTML 본문 크기를 제한하며 인라인 CSS 확장이 그 한도를 빠르게 소진합니다. 발송 전 본문을 압축하면 메시지가 제한 내에 유지됩니다.
- 임베디드 위젯: 인라인 HTML로 제공되는 서드파티 위젯과 채팅 스니펫은 방문마다 호스트 페이지가 다운로드해야 하므로 모든 바이트 절감이 의미 있습니다.
실제 예시
두 칸 들여쓰기, 행 사이에 세 줄바꿈, 맨 위 HTML 주석 블록, 그리고 <input type="checkbox" checked="checked" />가 포함된 장황한 500바이트 폼 스니펫을 붙여넣으세요. 모든 옵션을 켜면 출력이 약 300바이트로 줄어듭니다 — 약 40% 절감 — 렌더링된 DOM 트리는 소스와 바이트 동일하게 유지됩니다.
압축하면 HTML이 깨지나요?
기본 토글 사용 시에는 그렇지 않습니다. 압축기는 <pre>, <textarea>, <script>, <style> 태그의 내용을 그대로 보존하고, 해당 토글이 켜져 있으면 IE 조건부 주석을 유지하며, HTML5 파서가 이미 무의미하다고 분류한 공백만 축소합니다. 렌더링된 DOM 트리는 소스와 바이트 동일합니다. 공격적인 토글(빈 속성 제거)은 value=""나 alt=""를 의도적으로 사용하는 스니펫의 동작을 바꿀 수 있으므로, 켠 후에는 출력을 검토하세요.
인라인 CSS와 JS도 압축하나요?
이 도구에서는 하지 않습니다. 인라인 <style>과 <script> 본문은 그대로 보존되어 압축기가 문자열 리터럴이나 정규 표현식 내부의 공백을 축소해 CSS 규칙이나 JS 구문을 깨는 일이 없습니다. CSS 압축에는 CSS Minifier를, JS에는 JS Minifier를 사용하세요. HTML 압축기는 마크업 자체에만 집중합니다.
얼마나 절감할 수 있나요?
직접 작성한 HTML의 일반적인 절감은 10~30%로, 소스에서 들여쓰기·빈 줄·장황한 속성 형식을 얼마나 쓰느냐에 따라 다릅니다. Next.js 같은 프레임워크의 사전 빌드 정적 HTML은 보통 15~25%를 절감합니다. 프레임워크가 이미 일부 최적화를 했지만 사람이 읽기 쉬운 공백은 남겨두기 때문입니다. 주석이 많은 템플릿과 깊게 중첩된 이메일 스타일 HTML은 40% 이상 절감할 수 있습니다.
pre 내용은 보존되나요?
네. 압축기는 <pre>, <textarea>, <script>, <style> 블록을 있는 그대로 보존할 영역으로 명시적으로 토큰화하여 그 내용을 바이트 그대로 출력에 복사합니다. 해당 태그 안의 공백, 줄바꿈, 들여쓰기는 압축 후에도 그대로 유지되므로 코드 샘플과 ASCII 아트는 압축 후에도 완전히 동일하게 렌더링됩니다.
브라우저 측 HTML 압축은 빌드 파이프라인을 단순하고 마크업을 작게 유지합니다. 위에 HTML을 붙여넣고, 옵션 토글을 조정한 뒤, 압축된 출력을 복사하거나 다운로드하세요 — 업로드 없음, 계정 없음, 벤더 라이브러리 없음.