WebTools

Useful Tools & Utilities to make life easier.

HTML Minifier

HTML 코드의 공백을 제거하여 용량을 최적화합니다.

HTML 압축 도구는 무엇을 하나요?

사람이 읽기 좋게 들여쓰기와 줄바꿈으로 정리된 HTML 코드에서, 브라우저가 화면을 그리는 데 필요 없는 부분을 걷어내 파일 크기를 줄이는 도구입니다. 이런 작업을 압축(minify, 미니파이)이라고 부릅니다. 홈페이지를 서버에 올리기 전에 HTML을 한 번 압축해 두면 방문자에게 전송되는 데이터양이 줄어, 특히 모바일 환경에서 페이지가 조금 더 빨리 뜹니다.

압축 과정에서 제거·변환되는 것은 다음과 같습니다. 주석(<!-- -->로 감싼 메모), 태그 사이의 불필요한 공백과 줄바꿈, 생략해도 되는 속성값 따옴표, 그리고 HTML 안에 함께 들어 있는 <style>·<script> 내용까지 같이 줄여 줍니다. 코드의 동작이나 화면 모양을 바꾸는 것이 아니라, 표기만 간결하게 바꾸는 것입니다.

사용 방법

  1. 편집기 영역에 압축할 HTML 코드를 붙여넣습니다.
  2. 아래의 압축 버튼을 누르면 같은 편집기 안에서 코드가 압축된 결과로 바뀝니다.
  3. 편집기 오른쪽 위의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

한 가지 주의할 점이 있습니다. 결과가 새 창이 아니라 입력했던 편집기에 그대로 덮어써지기 때문에, 압축 버튼을 누른 뒤에는 원래 코드로 되돌릴 수 없습니다. 배포용 사본을 만든다는 생각으로, 원본 파일은 반드시 컴퓨터에 따로 보관한 상태에서 사용하세요.

압축 전후 비교 예시

짧은 HTML 조각을 실제로 압축하면 다음과 같이 바뀝니다.

구분코드글자 수
압축 전 <!-- 메인 배너 -->
<div class="banner">
    <p class="title">오늘의 소식</p>
</div>
74자
압축 후 <div class=banner><p class=title>오늘의 소식</p></div> 49자

이 예시에서는 주석 한 줄과 들여쓰기, 속성 따옴표가 사라지면서 74자가 49자로, 약 34% 줄었습니다. 실제 감소율은 원본에 주석과 들여쓰기가 얼마나 많은지에 따라 달라지며, 정리가 잘 된 긴 문서일수록 절감 폭이 커지는 편입니다.

자주 묻는 질문

압축하면 화면 모양이 달라질 수도 있나요?

대부분의 경우 화면은 그대로입니다. 다만 <pre><textarea>처럼 공백과 줄바꿈을 있는 그대로 표시하는 태그가 있는 문서라면, 압축 후 해당 부분의 표시가 달라질 수 있으니 결과물을 브라우저에서 한 번 열어 확인하는 것이 안전합니다.

압축한 코드를 다시 원래대로 되돌릴 수 있나요?

완전히는 안 됩니다. 포맷터 도구로 들여쓰기를 다시 펼 수는 있지만, 압축 때 삭제된 주석은 영구히 사라집니다. 그래서 압축본은 배포 전용으로만 쓰고, 수정 작업은 항상 원본 파일에서 하는 것이 원칙입니다.

붙여넣은 코드가 서버로 전송되나요?

아닙니다. 이 도구의 압축 처리는 접속한 분의 브라우저 안에서 자바스크립트로 이루어지며, 입력한 HTML이 저희 서버로 올라가지 않습니다. 외부에 보내기 민감한 코드도 안심하고 사용할 수 있습니다.

서버에서 gzip 압축을 쓰고 있는데도 필요한가요?

둘은 역할이 다릅니다. gzip은 전송 순간에만 데이터를 압축했다가 브라우저에서 다시 풀어내는 방식이고, 미니파이는 파일 자체에서 불필요한 글자를 없애는 방식입니다. 미니파이로 줄인 파일에 gzip을 함께 적용하면 효과가 겹쳐서 적용되므로, 두 가지를 같이 쓰는 것이 일반적입니다.

티스토리·워드프레스 스킨 코드에도 써도 되나요?

가능합니다. 다만 스킨이나 테마 코드에는 나중에 수정할 때 참고할 주석이 들어 있는 경우가 많습니다. 압축본을 올리면 그 설명이 모두 사라지므로, 주석이 담긴 원본을 따로 저장해 두고 압축본만 적용하는 방식을 권합니다.