HTML 압축기

HTML 코드를 압축하여 파일 크기를 줄입니다.

0
원본 크기 (bytes)
0
압축 크기 (bytes)
0%
감소율

HTML 압축(Minify) 도구 안내

HTML 압축이란?

HTML 압축(Minification)은 코드의 동작을 그대로 유지하면서 파일 크기를 줄이는 최적화 기법입니다. 사람이 읽기 쉽도록 넣은 들여쓰기, 줄바꿈, 공백, 주석 등은 브라우저 렌더링에 영향을 주지 않지만 전송되는 데이터 양을 늘립니다. 이런 불필요한 문자를 제거하면 파일 크기가 줄어들고, 결과적으로 페이지 로딩 속도가 빨라집니다. 보통 HTML 파일은 압축 후 10~30% 정도 크기가 줄어드는데, 주석이 많거나 들여쓰기가 깊은 파일일수록 효과가 큽니다.

주요 기능

  • 불필요한 공백과 줄바꿈 제거로 파일 크기 최소화
  • HTML 주석 자동 제거
  • 연속 공백을 하나로 병합
  • pre, code, textarea 태그 내부 공백 자동 보존
  • 압축 전후 크기 비교 및 절감률 실시간 표시
  • 결과 복사 및 파일 다운로드 지원

사용 방법

  1. 왼쪽 입력 영역에 HTML 코드를 붙여넣거나 직접 입력합니다.
  2. '압축' 버튼을 클릭하면 오른쪽에 결과가 표시됩니다.
  3. 결과 영역 위의 크기 정보에서 원본과 압축 후 크기, 절감률을 확인합니다.
  4. '복사' 버튼으로 클립보드에 복사하거나 '다운로드'로 파일을 저장합니다.
  5. 필요하면 '초기화' 버튼으로 입력과 결과를 모두 지울 수 있습니다.

활용 사례

  • 프로덕션 배포 전 HTML 파일 경량화로 페이지 속도 개선
  • 이메일 템플릿 용량 줄이기 (이메일 클라이언트 크기 제한 대응)
  • CDN에 올리기 전 정적 HTML 최적화
  • 웹 성능 점수(PageSpeed, Lighthouse) 향상을 위한 리소스 최적화
  • 임베디드 HTML 위젯이나 광고 코드 경량화

팁과 주의사항

  • 개발용 원본 코드는 반드시 별도로 보관하세요. 압축된 코드는 가독성이 떨어져 수정이 어렵습니다.
  • pre, code, textarea 태그 내 공백은 의미가 있으므로 이 도구는 해당 영역을 자동으로 보존합니다.
  • CSS나 JavaScript가 인라인으로 포함된 경우, HTML 압축만으로는 최적화가 부족할 수 있습니다. 별도 CSS/JS 압축 도구를 함께 사용하세요.
  • 압축 후 반드시 브라우저에서 렌더링 결과를 확인하세요. 드물지만 특수한 레이아웃에서 공백 제거가 표시에 영향을 줄 수 있습니다.
  • Gzip이나 Brotli 같은 서버 압축과 HTML 압축은 별개입니다. 둘 다 적용하면 효과가 더 좋습니다.

자주 묻는 질문

Q: HTML 압축을 하면 실제로 얼마나 크기가 줄어드나요?

코드 스타일에 따라 다르지만, 일반적으로 10~30% 정도 줄어듭니다. 들여쓰기 수준이 깊고 주석이 많은 코드일수록 절감 효과가 큽니다.

Q: 압축하면 웹 페이지가 깨질 수 있나요?

대부분의 경우 문제없습니다. 다만 CSS에서 inline-block 요소 사이의 공백에 의존하는 레이아웃이 있으면 표시가 달라질 수 있습니다. 압축 후 항상 결과를 확인하는 것이 좋습니다.

Q: pre 태그 안의 내용도 압축되나요?

아닙니다. pre, code, textarea 태그 내부의 공백은 콘텐츠의 일부이므로 이 도구는 해당 영역을 자동으로 감지하고 보존합니다.

Q: HTML 주석은 왜 제거하나요?

HTML 주석은 브라우저가 렌더링에 사용하지 않지만 전송되는 데이터에 포함됩니다. 제거하면 파일 크기가 줄어들고, 소스 코드에 남긴 개발 메모가 외부에 노출되는 것도 방지할 수 있습니다.

Q: CSS나 JavaScript 압축도 같이 되나요?

이 도구는 HTML 구조만 압축합니다. style 태그나 script 태그 내부의 CSS/JS 코드는 별도의 CSS 압축기, JS 압축기를 사용하는 것이 효과적입니다.

Q: 서버에서 Gzip 압축을 하면 HTML 압축은 불필요한가요?

아닙니다. 둘은 보완 관계입니다. HTML 압축으로 불필요한 문자를 먼저 제거하면 Gzip 압축률도 더 좋아지므로, 최적의 결과를 위해 둘 다 적용하는 것이 권장됩니다.

Q: 압축된 코드를 다시 보기 좋게 만들 수 있나요?

HTML 포맷터(Beautifier) 도구를 사용하면 압축된 코드에 들여쓰기와 줄바꿈을 다시 추가할 수 있습니다. 다만 원본의 주석이나 특정 공백 스타일은 복원되지 않으므로 원본을 보관하는 것이 가장 좋습니다.

Q: 입력한 HTML 데이터는 서버로 전송되나요?

아닙니다. 모든 압축 작업은 브라우저에서 JavaScript로 처리됩니다. 입력한 코드는 서버로 전송되지 않으며, 민감한 코드도 안심하고 사용할 수 있습니다.

Q: 압축 결과가 원본과 동일하게 동작하는지 어떻게 검증하나요?

압축 전후의 HTML을 각각 브라우저에서 열어 시각적으로 비교하거나, 자동화 테스트 도구로 DOM 구조를 비교하는 방법이 있습니다. 중요한 프로젝트라면 스테이징 환경에서 먼저 테스트하세요.

Q: 대용량 HTML 파일도 처리할 수 있나요?

브라우저에서 처리하므로 수 MB 수준의 파일도 문제없이 압축됩니다. 다만 매우 큰 파일의 경우 처리에 시간이 걸릴 수 있으며, 빌드 도구(Webpack, Gulp 등)의 HTML 압축 플러그인을 사용하는 것도 좋은 방법입니다.

`; function showError(msg) { errorMsg.textContent = msg; errorMsg.classList.remove('hidden'); } function hideError() { errorMsg.classList.add('hidden'); } function minifyHTML(html, removeComments, removeWhitespace, removeQuotes, optimizeBoolean) { let result = html; // Remove HTML comments (but keep conditional comments) if (removeComments) { result = result.replace(//g, ''); } if (removeWhitespace) { // Preserve content in pre, code, textarea, script, style tags const preserved = []; const preserveTags = ['pre', 'code', 'textarea', 'script', 'style']; preserveTags.forEach((tag, idx) => { const regex = new RegExp(`(<${tag}[^>]*>)([\\s\\S]*?)()`, 'gi'); result = result.replace(regex, (match, open, content, close) => { preserved.push({ tag: `__PRESERVE_${idx}_${preserved.length}__`, content: match }); return `__PRESERVE_${idx}_${preserved.length - 1}__`; }); }); // Remove whitespace between tags result = result.replace(/>\s+<'); // Remove leading/trailing whitespace result = result.replace(/^\s+/gm, ''); result = result.replace(/\s+$/gm, ''); // Collapse multiple spaces result = result.replace(/\s{2,}/g, ' '); // Remove newlines result = result.replace(/\n/g, ''); // Restore preserved content preserved.forEach(p => { result = result.replace(p.tag, p.content); }); } // Remove unnecessary quotes from attributes if (removeQuotes) { // Only remove quotes from simple attribute values (alphanumeric, hyphen, underscore) result = result.replace(/(\s+\w+)="([a-zA-Z0-9_-]+)"/g, '$1=$2'); result = result.replace(/(\s+\w+)='([a-zA-Z0-9_-]+)'/g, '$1=$2'); } // Optimize boolean attributes if (optimizeBoolean) { const booleanAttrs = ['disabled', 'readonly', 'checked', 'selected', 'required', 'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'hidden', 'multiple', 'novalidate']; booleanAttrs.forEach(attr => { const regex = new RegExp(`(\\s+${attr})=["']?${attr}["']?`, 'gi'); result = result.replace(regex, ' ' + attr); const regex2 = new RegExp(`(\\s+${attr})=["']?(true|"")["']?`, 'gi'); result = result.replace(regex2, ' ' + attr); }); } return result; } function updateStats(original, minified) { const origBytes = new Blob([original]).size; const minBytes = new Blob([minified]).size; const reductionPercent = origBytes > 0 ? Math.round((1 - minBytes / origBytes) * 100) : 0; originalSize.textContent = origBytes.toLocaleString(); minifiedSize.textContent = minBytes.toLocaleString(); reduction.textContent = reductionPercent + '%'; } function minify() { hideError(); const input = inputArea.value; if (!input.trim()) { showError('입력 코드가 없습니다.'); return; } try { const result = minifyHTML( input, optComments.checked, optWhitespace.checked, optQuotes.checked, optBoolean.checked ); outputArea.value = result; updateStats(input, result); } catch (e) { showError('압축 오류: ' + e.message); } } minifyBtn.addEventListener('click', minify); sampleBtn.addEventListener('click', () => { inputArea.value = sampleCode; hideError(); }); clearBtn.addEventListener('click', () => { inputArea.value = ''; outputArea.value = ''; originalSize.textContent = '0'; minifiedSize.textContent = '0'; reduction.textContent = '0%'; hideError(); }); copyBtn.addEventListener('click', () => { if (outputArea.value) { navigator.clipboard.writeText(outputArea.value); copyBtn.textContent = '복사됨!'; setTimeout(() => copyBtn.textContent = '복사', 1500); } }); downloadBtn.addEventListener('click', () => { if (!outputArea.value) return; const blob = new Blob([outputArea.value], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'index.min.html'; a.click(); URL.revokeObjectURL(url); }); // Auto minify on input change (debounced) let debounceTimer; inputArea.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { if (inputArea.value.trim()) { minify(); } }, 500); }); })();