HTML 압축

HTML 압축 사용법

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

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

HTML 압축은 브라우저가 해석할 때 의미가 없는 문자, 즉 태그 사이의 들여쓰기 공백과 줄바꿈, 그리고 <!-- --> 주석을 걷어내 용량을 줄입니다. 태그 이름과 속성값, 실제 텍스트는 그대로 두므로 화면에 보이는 결과는 바뀌지 않습니다. 다만 태그 사이의 공백이 항상 무의미한 것은 아닙니다. <span> 처럼 인라인 요소 사이의 한 칸 공백은 화면에서 실제 띄어쓰기로 렌더링되기 때문에, 이런 공백까지 통째로 지우면 단어가 붙어 보일 수 있습니다. 그래서 이 도구는 안전을 위해 연속된 공백을 한 칸으로 줄이는 수준으로 다루고, 태그 자체를 재배열하거나 속성 순서를 바꾸지는 않습니다.

얼마나 줄어드나

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

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

이럴 때 씁니다

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

자주 묻는 질문