HTML 압축

HTML 압축 사용법

입력창에 원본 HTML 코드를 붙여넣고 "압축" 버튼을 누르면 줄바꿈과 들여쓰기 공백, 주석이 제거된 한 덩어리 코드가 나옵니다. 처리는 브라우저 안에서 즉시 이뤄지고 코드가 서버로 전송되지 않으므로, 내부 경로나 API 주소가 담긴 마크업도 그대로 넣어 볼 수 있습니다. 결과는 복사 버튼으로 바로 클립보드에 담아 실제 파일에 붙여넣으면 됩니다. 원본은 따로 보관해 두고, 배포용으로 압축본을 쓰는 방식을 권장합니다.

무엇을 지우고 무엇을 남기나

HTML 압축은 브라우저가 해석할 때 의미가 없는 문자, 즉 태그 사이의 들여쓰기 공백과 줄바꿈, 그리고 <!-- --> 주석을 걷어내 용량을 줄입니다. 태그 이름과 속성값, 실제 텍스트는 그대로 두므로 대부분의 경우 화면에 보이는 결과는 바뀌지 않습니다. 다만 이 도구는 태그와 태그 사이(>와 < 사이)의 공백은 완전히 제거하고, 그 밖의 텍스트 영역에서 연속된 공백은 한 칸으로 줄입니다. 그래서 <span> 같은 인라인 요소를 줄바꿈으로 띄워 두었다면 압축 후 단어가 붙어 보일 수 있으니 배포 전 화면을 한 번 확인하세요. 반대로 <pre>·<textarea>·<script>·<style> 태그 안의 내용은 통째로 보존하므로 코드나 서식이 깨지지 않으며, 태그를 재배열하거나 속성 순서를 바꾸는 일도 없습니다.

얼마나 줄어드나

줄어드는 비율은 원본이 얼마나 들여쓰기가 깊고 주석이 많은지에 따라 달라집니다. 들여쓰기가 여러 단계인 문서일수록 공백 비중이 커서 감소폭이 크고, 이미 한 줄로 붙어 있는 코드는 거의 줄지 않습니다. 아래는 대략적인 경향입니다.

여기에 서버 gzip/brotli 압축까지 켜 두면 반복되는 공백은 어차피 잘 압축되므로, 순수 용량 감소 효과보다는 파일을 깔끔하게 정리하는 의미가 더 큽니다.

이럴 때 씁니다

정적 페이지나 이메일 템플릿을 배포하기 직전에 개발용 주석과 여백을 걷어낼 때, 인라인 HTML을 자바스크립트 문자열에 넣기 위해 한 줄로 만들 때, 또는 소스에 남겨 둔 TODO 같은 개발 메모 주석이 배포본에 노출되지 않도록 정리할 때 유용합니다. 빌드 도구를 쓰지 않는 손수 만든 페이지에서 특히 편리합니다.