HTML 압축·정렬 도구

아래에 HTML을 붙여넣으면 주석, 불필요한 속성, 여분의 공백을 제거해 압축하거나, 들여쓰기가 된 읽기 쉬운 마크업으로 정렬할 수 있습니다. 두 방향 모두 정규식 편법이 아니라 실제 HTML 파서를 사용해 브라우저에서 전부 처리되므로 <pre>와 <textarea> 안의 내용은 그대로 보존됩니다.

이 도구는 무엇인가요?

HTML 압축기는 브라우저가 페이지를 제대로 렌더링하는 데 필요 없는 모든 것을 제거합니다: 주석, 태그 사이의 여분 공백, type="text/javascript" 같은 불필요한 속성, 선택적인 닫는 슬래시. 결과물은 기능적으로 동일한 HTML이지만 다운로드와 파싱이 더 빠릅니다.

이 도구는 인기 있는 빌드 도구 안에서도 쓰이는 minifier인 html-minifier-terser를 기반으로 만들어져서, 무턱대고 공백을 지우는 게 아니라 HTML 구조를 이해합니다 — <pre>, <textarea>, 인라인 <script>/<style> 블록처럼 서식에 민감한 내용은 건드리지 않고, 마크업에 포함된 CSS와 JS도 함께 압축합니다.

왜 사용해야 할까요?

정규식이 아니라 실제 파서를 사용해서 <pre> 블록, 인라인 스크립트, 조건부 주석 같은 까다로운 경우에도 안전합니다.
주변 마크업뿐 아니라 내장된 <style>과 <script> 내용도 함께 압축합니다.
배포 전에 정확히 몇 바이트를 절약했는지 확인할 수 있습니다.
정렬 모드는 압축되어 한 줄이 된 HTML을 사람이 읽고 편집할 수 있는 형태로 되돌립니다.
100% 로컬 처리 — 여러분의 마크업과 그 안에 담긴 민감한 내용이 브라우저를 벗어나지 않습니다.

사용 방법

입력창에 HTML을 붙여넣거나, "Load Example"을 눌러 샘플을 시도해보세요.
"Minify"를 클릭해 압축하거나, "Format"을 클릭해 2칸 들여쓰기로 정렬하세요.
박스 아래 메시지를 확인하세요 — 압축 모드는 절감된 용량을 보여주고, HTML을 파싱할 수 없으면 깨진 결과 대신 정확한 오류를 보여줍니다.
"Copy"를 클릭해 결과를 가져가세요.

예시

입력

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

결과

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

주석, 들여쓰기, 줄바꿈이 제거되고 doctype이 짧아집니다. 화면에 보이는 페이지는 동일하게 렌더링됩니다.

실용 팁

개발 중이 아니라 배포 직전에 압축하세요 — 소스 관리에는 읽기 쉬운 HTML을 유지하고, 빌드 결과물만 압축하세요.
압축 후 페이지가 이상하게 동작한다면 텍스트 노드 안의 정확한 공백에 의존하는 자바스크립트가 있는지 확인하세요(드물지만 일부 오래된 위젯에서 발생합니다).
실제 사이트에서 압축된 HTML을 정렬해보면 스크래퍼를 만들거나 레이아웃 문제를 디버깅하기 전에 구조를 빠르게 파악할 수 있습니다.
빌드 과정에서 스타일과 스크립트를 별도 파일로 관리한다면 아래의 CSS·JS 압축기와 함께 사용하세요.

실제 작업 흐름에서의 활용

손으로 만든 정적 사이트, 이메일 템플릿, 랜딩 페이지는 개발 중에 쓰던 들여쓰기와 주석이 그대로 배포되는 경우가 많습니다. 배포 전에 압축하면 실질적이지만 크지는 않은 전송량을 줄일 수 있고, 이메일 HTML의 경우 문자 수가 Gmail의 자르기 기준에 영향을 주기도 하므로 마크업을 작게 만드는 것이 속도 외에도 실질적인 이점이 있습니다.

정렬 방향도 그만큼 유용합니다 — view-source에서 가져온 압축된 페이지를 붙여넣고 다시 정렬하는 것은 경쟁사 랜딩 페이지 구조를 파악하거나 서드파티 임베드를 디버깅하는 가장 빠른 방법인 경우가 많습니다.

→ CSS 압축기 · JS 압축기

흔한 활용 사례

정적 랜딩 페이지나 이메일 템플릿을 배포하기 전에 용량을 줄이기.
view-source에서 가져온 압축된 HTML 조각을 다시 정렬해 구조를 파악하기.
WYSIWYG 에디터나 CMS 내보내기에서 붙여넣은, 공백이 지나치게 많은 HTML을 정리하기.
손으로 작성한 HTML 조각이 올바른 형식인지 빠르게 확인하기 — 파싱 실패는 명확한 오류로 나타납니다.

자주 묻는 질문

제 HTML이 어딘가에 업로드되나요?

아닙니다. 압축과 정렬 모두 자바스크립트로 브라우저에서 로컬로 처리됩니다. 붙여넣은 내용은 서버로 전송되지 않으므로 내부 템플릿이나 아직 공개되지 않은 페이지에도 안전하게 사용할 수 있습니다.

압축하면 페이지가 깨지지 않나요?

그럴 가능성은 낮습니다 — 이 도구는 태그 구조를 이해하는 실제 HTML 파서(html-minifier-terser)를 사용하므로 <pre>, <textarea>처럼 공백에 민감한 요소를 보존하고 속성을 잘못 합치지 않습니다. 다만 특이한 인라인 스크립트에 의존하는 경우라면 압축 후 중요한 페이지는 항상 직접 확인해보는 게 좋습니다.

HTML 안의 CSS와 자바스크립트도 함께 압축되나요?

네. 인라인 <style>과 <script> 블록은 전용 CSS·JS 압축 도구와 같은 엔진을 사용해 제자리에서 압축되므로 따로 추출할 필요가 없습니다.

HTML은 보통 얼마나 줄어드나요?

원본에 공백, 주석, 서식이 얼마나 많이 들어있었는지에 따라 다릅니다 — 들여쓰기와 주석이 많은 손으로 작성한 HTML은 보통 20~40% 줄어듭니다. 이미 간결한 프레임워크 생성 HTML은 절감 폭이 더 작습니다.

압축된 HTML을 다시 읽기 쉬운 형태로 되돌릴 수 있나요?

네 — 압축된 HTML을 붙여넣고 "Minify" 대신 "Format"을 클릭하면 제대로 들여쓰기된 읽기 쉬운 마크업으로 돌아갑니다.