HTML 압축/정리
HTML 코드 압축, 정리, 크기 비교
개요
HTML 코드를 압축(minify)하거나 보기 좋게 정리(beautify)한다. 압축 전후의 파일 크기 비교도 보여줘서 얼마나 줄었는지 한눈에 확인할 수 있다. 프로덕션 배포 전 HTML 최적화나, 압축된 HTML을 디버깅용으로 펼쳐볼 때 유용하다.
주요 기능
- HTML 압축 (공백, 주석, 불필요한 속성 제거)
- HTML 정리 (들여쓰기, 줄바꿈 추가)
- 압축 전후 파일 크기 비교 (바이트, %)
- 인라인 CSS/JS 압축 옵션
- 결과 복사 및 다운로드
사용 방법
- HTML 코드를 입력란에 붙여넣는다.
- Minify 버튼으로 압축하거나 Beautify 버튼으로 정리한다.
- 압축 전후 크기 비교를 확인하고 결과를 복사한다.
팁
- 주석 제거만으로도 파일 크기가 꽤 줄어든다. 특히 CMS에서 자동 생성되는 주석이 많을 때 효과적이다.
- 인라인 CSS/JS도 함께 압축하면 전체 HTML 파일 크기를 더 줄일 수 있다.
- Beautify는 들여쓰기 2스페이스가 기본이다. 가독성 좋은 코드 리뷰에 활용하자.
자주 묻는 질문
- 압축하면 HTML이 깨질 수 있나요?
- 표준 HTML 문법을 따르는 코드라면 압축으로 인한 기능 차이는 없습니다. 다만 pre, code 태그 내부의 공백이 의도적인 경우 압축 후 표시가 달라질 수 있습니다.
- 서버 사이드 템플릿 코드도 처리되나요?
- PHP, Jinja, EJS 등의 템플릿 태그가 포함되면 예상치 못한 결과가 나올 수 있습니다. 순수 HTML에만 사용하는 것을 권장합니다.
- 어느 정도 크기를 줄일 수 있나요?
- HTML 구조와 주석/공백 양에 따라 다르지만, 보통 10~30% 정도 줄어듭니다. 주석이 많거나 들여쓰기가 깊은 HTML일수록 효과가 큽니다.