HTML 압축기
프로덕션용 HTML을 즉시 축소
원본 HTML
옵션
압축된 HTML
개요
HTML 압축기는 주석을 제거하고, 태그 사이의 공백을 축소하고, 선택적 구조 래퍼 태그를 제거하며, 인라인 CSS/JS를 압축하여 프로덕션용 마크업을 줄입니다 — 더 작은 다운로드, 더 빠른 파싱. 읽기 쉬운 HTML을 붙여넣으면 즉시 압축된 결과를 얻을 수 있으며, 실시간 전후 크기 비교도 제공됩니다.
이 압축기가 제어하는 항목
- •공백 축소: 여러 공백과 줄바꿈을 하나의 공백으로 줄이고, 태그 사이의 공백을 완전히 제거
- •주석 제거: 마크업에서 HTML 주석(<!-- -->) 제거
- •구조적 래퍼 태그 제거: 브라우저가 자동으로 암시하는 <html>, <head>, <body> 태그 제거
- •인라인 CSS 압축: <style> 블록 내부의 주석을 제거하고 공백을 축소
- •인라인 JS 압축: <script> 블록 내부의 // 및 /* */ 주석을 제거하고 공백을 축소
- •크기 비교: 원본 크기, 압축 크기, 감소율을 나란히 확인
HTML을 압축해야 할 때
- •페이로드 크기를 줄이고 로드 시간을 개선하기 위해 프로덕션에 배포하기 전에 정적 페이지 축소
- •HTML의 모든 바이트가 중요한 이메일 템플릿이나 랜딩 페이지 압축
- •제공하기 전에 정적 사이트 생성기나 서버 렌더링 프레임워크의 프로덕션 출력 정리
- •JS 템플릿 리터럴이나 CMS 콘텐츠 필드에 인라인으로 삽입할 압축된 HTML 생성
- •성능 감사를 위해 페이지의 페이로드 절감을 확인하고자 전후 바이트 수 비교
HTML을 압축하는 방법
- 1.HTML을 입력 편집기에 붙여넣거나 .html/.htm 파일을 업로드하세요
- 2.적용할 압축 옵션을 선택하세요: 주석, 공백 축소, 래퍼 태그, 인라인 CSS/JS
- 3.압축된 출력과 크기 감소율이 자동으로 나타납니다
- 4.결과를 복사하거나 .html 파일로 다운로드하세요
- 5.배포 전에 전후 바이트 수를 확인하여 크기 절감을 확인하세요
알아두어야 할 예외 상황
- •<html>, <head>, <body> 태그 제거는 브라우저가 자동으로 암시하기 때문에 대부분의 브라우저에서 안전하지만, 전체 전달 파이프라인을 제어하는 경우에만 제거하세요 — 일부 엄격한 파서나 서버 측 처리 단계에서는 이 태그들이 존재하기를 기대할 수 있습니다
- •인라인 요소 사이의 공백(예: 인접한 두 개의 <span> 태그)을 축소하면 렌더링된 간격이 변경될 수 있습니다. 인라인 요소 사이의 공백은 시각적으로 중요하기 때문입니다 — 레이아웃이 해당 공백에 의존한다면 렌더링된 결과를 확인하세요
- •인라인 CSS/JS 압축은 정규식 기반의 텍스트 압축이며 완전한 파서가 아닙니다 — CSS/JS 구문 오류를 잡아내지 못하며 변수 이름을 변경하거나 선택자를 단축하지도 않습니다
제한 사항
- •이것은 공백/주석/래퍼 태그 압축이지 완전한 HTML 압축이 아닙니다 — 속성 값 단축, 중복 속성 제거, 이미지/자산 최적화는 없습니다
- •인라인 CSS/JS 압축은 의도적으로 보수적입니다 — 최대 압축(선택자 단축, 죽은 코드 제거, 변수 이름 압축)을 위해서는 CSS/JS 소스 파일에 cssnano나 Terser 같은 전용 도구를 직접 사용하세요
- •매우 큰 HTML 파일은 브라우저에서 완전히 압축하는 데 시간이 걸릴 수 있습니다 — 프로덕션 빌드 파이프라인에서는 일회성 브라우저 도구 대신 빌드 도구(예: html-minifier-terser)에 HTML 압축을 통합하세요
반대 방향 작업이 필요하신가요?
압축되거나 들여쓰기가 엉망인 HTML이 있고 디버깅이나 검토를 위해 읽기 쉽게 만들어야 한다면, 대신 HTML 뷰티파이어를 사용하세요. 태그 중첩에 따른 올바른 들여쓰기로 마크업을 다시 포맷하고 입력하는 동안 태그 구조를 검증합니다.