HTML 공백 제거 원리: 태그 사이만 지워지는 이유

복사해온 HTML 소스에 들여쓰기와 줄바꿈이 잔뜩 섞여 있어 용량을 줄이고 싶은데, 안에 있는 스크립트나 스타일 코드가 깨질까 봐 손대지 못하는 경우가 많습니다.

HTML 압축(minify)은 태그 사이의 공백과 줄바꿈, 주석만 골라 지우고 script·style·pre·textarea 내부 코드는 원본 그대로 보존하는 처리입니다. 이 글은 압축이 실제로 무엇을 지우고 무엇을 남기는지, 절감률(%)이 어떻게 계산되는지를 동작 원리 중심으로 설명합니다.

요약 ① HTML 압축은 태그 사이·태그 안의 공백과 줄바꿈만 지우고, 순수 공백으로만 이루어진 텍스트는 통째로 삭제합니다. ② script·style·pre·textarea 내부 코드는 별도 토큰으로 분류되어 어떤 경우에도 변형 없이 그대로 통과합니다. ③ 절감률은 원본과 결과를 각각 바이트 크기로 재서 (1 - 결과바이트/원본바이트) × 100으로 계산한 값입니다.

개발자도구에서 긁어온 HTML, 왜 이렇게 무거울까

브라우저 개발자도구에서 특정 요소를 '외부 HTML 복사(Copy outerHTML)'로 가져오면, 원본 화면에 적용됐던 들여쓰기와 줄바꿈이 태그마다 그대로 따라옵니다.

각종 에디터나 템플릿 엔진이 뱉어내는 HTML도 사정은 비슷해서, 실제 내용보다 공백 문자가 더 많이 차지하는 경우가 흔합니다.

이런 소스를 이메일 템플릿이나 API 응답, 정적 페이지에 그대로 붙여 넣으면 눈에 보이지 않는 공백만으로 파일 용량이 눈에 띄게 늘어납니다. 문제는 이걸 손으로 정리하려 할 때 생깁니다.

무심코 <script> 안의 줄바꿈까지 지워버리면 주석 처리된 JS 구문이 다음 줄과 붙어 깨지고, <pre> 안의 공백을 지우면 화면에 표시되던 서식이 통째로 무너집니다.

도구 없이 직접 공백을 지우는 방법

HTML 압축의 원리를 알면 손으로도 같은 작업을 할 수 있습니다. 지워도 되는 공백과 지우면 안 되는 공백을 가르는 기준은 하나입니다.

태그와 태그 사이, 태그 속성 사이의 공백은 지워도 문서 구조가 바뀌지 않고, script·style·pre·textarea 내부의 공백은 코드나 서식 그 자체이므로 지우면 안 됩니다.

이 기준을 텍스트 에디터의 찾아바꾸기(정규식)에 그대로 적용하면 수동으로도 정리할 수 있습니다.

1. <script>, <style>, <pre>, <textarea> 구간을 먼저 눈으로 표시해 두고, 이후 작업에서 제외합니다.
2. 나머지 구간에서 > 뒤에 공백이 하나 이상 오고 다시 <가 오는 패턴(>\s+<)을 ><로 바꿔 태그 사이 공백을 지웁니다.
3. 태그 속성 사이에 여러 칸 띄어쓰기나 줄바꿈이 있다면 한 칸으로 줄입니다.
4. 주석(<!-- ... -->)을 지울지는 선택입니다. 디버깅용으로 남겨둔 것이 아니라면 지워도 무방합니다.

얼마나 줄었는지는 파일 크기로 확인합니다. 터미널이 있다면 정리 전후로 각각 wc -c 파일명.html을 실행해 바이트 수를 비교합니다(UTF-8 기준으로 wc -c는 문자 수가 아니라 바이트 수를 셉니다).

두 값을 (1 - 정리후바이트 ÷ 정리전바이트) × 100으로 계산하면 절감률이 나옵니다.

참고로 브라우저는 원래 태그 사이의 공백·줄바꿈을 렌더링할 때 하나의 공백으로 뭉치거나 무시합니다(<pre>·<textarea> 내부는 예외입니다). 그래서 태그 사이 공백을 지워도 블록 레벨 요소의 화면 배치 자체는 바뀌지 않습니다.

저희 도구로 확인하기.

직접 해보기 →

압축할 때 자주 헷갈리는 것들

가장 많이 하는 오해는 "압축하면 script나 CSS 코드도 같이 줄어드나"입니다. 아닙니다.

이 도구는 안전을 위해 script·style·pre·textarea 내부 내용을 토큰 단계에서 따로 분류해 원본 그대로 통과시킵니다. JS·CSS 자체의 변수명 축약이나 구문 압축이 필요하다면 전용 도구를 따로 써야 합니다.

두 번째 오해는 "압축하면 항상 몇 % 줄어드는지"입니다. 정해진 숫자는 없습니다. 원본에 들여쓰기와 줄바꿈이 얼마나 많았는지에 따라 달라지며, 들여쓰기가 많은 템플릿 출력물은 보통 10~40% 정도 줄어들고, 이미 압축돼 있던 소스는 절감률이 거의 0%에 가깝게 나올 수 있습니다.

세 번째는 "압축했더니 화면이 미묘하게 달라 보인다"는 경우입니다. 원인은 인라인 요소 사이의 공백입니다.

<span>이나 <a>처럼 줄 안에서 흐르는 요소 사이에 공백이 하나라도 있으면 브라우저는 그 공백을 화면에 한 칸으로 렌더링합니다. 이 공백을 압축 과정에서 완전히 제거하면 실제로 렌더링되던 한 칸까지 함께 사라져, 원래 떨어져 있던 단어나 아이콘이 붙어 보일 수 있습니다.

정리

• HTML 압축은 태그 사이·태그 안의 공백, 줄바꿈, 그리고 순수 공백 텍스트 노드만 대상으로 합니다.
• script·style·pre·textarea 내부는 코드가 깨지지 않도록 원본 그대로 보존됩니다.
• 절감률(%)은 원본과 결과의 바이트 크기 차이를 (1 - 결과바이트/원본바이트) × 100으로 계산한 값입니다.
• 절감률은 원본의 공백 양에 따라 달라지므로, 특정 숫자를 기준으로 정상·비정상을 판단할 수는 없습니다.
• 인라인 요소 사이의 공백이 사라지면 렌더링에서 미세한 간격 차이가 생길 수 있습니다.

자주 묻는 질문

압축하면 어느 정도 줄어드나요?

태그 사이의 공백·줄바꿈과 주석을 지우기 때문에, 들여쓰기가 많던 원본은 보통 10~40% 정도 줄어듭니다. 정확한 절감률은 결과 화면 위 통계에 원본·결과 바이트 크기와 함께 표시됩니다.

script나 CSS 코드도 압축되나요?

아닙니다. <script>·<style>·<pre>·<textarea> 내부 내용은 별도 토큰으로 분류되어 어떤 경우에도 변형 없이 그대로 통과합니다. 이 내부의 코드 자체를 줄이려면(변수명 축약 등) 전용 JS·CSS 압축 도구를 사용해야 합니다.

압축 후 결과가 원본과 다르게 보일 수 있나요?

표준 HTML 처리 기준으로 태그 구조와 텍스트 내용은 그대로 유지됩니다. 다만 인라인 요소 사이에 있던 공백이 완전히 제거되면서 화면 표시가 미세하게 달라질 수 있으니, 적용 전에 결과를 한 번 눈으로 확인하는 것이 안전합니다.

정렬(Beautify)에서 들여쓰기 크기는 뭘 선택해야 하나요?

2칸, 4칸, 탭 중 무엇을 골라도 태그 구조나 동작에는 차이가 없습니다. 화면에 보이는 들여쓰기 폭만 달라지는 표시상의 선택이며, 팀에서 쓰는 코드 스타일 규칙이 있다면 그에 맞추면 됩니다.