얼핏 보면 HTML 마크업 안의 공백은 아무런 의미가 없어 보입니다 — 브라우저는 어차피 모든 것을 올바르게 렌더링하기 때문입니다. 하지만 문서 안 몇몇 지점은 예외로, 공백을 제거하면 페이지의 실제 모습이 달라집니다.
안전하게 제거할 수 있는 것
압축 도구는 HTML 주석 <!-- ... -->, 태그 사이의 불필요한 공백과 줄바꿈, 값에 공백이 없는 속성을 감싼 따옴표, 그리고 때로는 </li>처럼 생략 가능한 닫는 태그를 제거합니다.
전형적인 버그: 두 단어가 하나로 붙어버리는 경우
인라인 요소 두 개 사이에 있는 공백 하나는 소스 코드상의 서식이 아니라 실제로 렌더링된 페이지에서 눈에 보이는 간격입니다. <span>foo</span> <span>bar</span>는 간격이 있는 "foo bar"로 표시되지만, 이 공백을 무심코 제거하면 아무 경고 없이 "foobar"로 붙어버립니다. 신중한 압축 도구는 블록 요소 사이처럼 시각적으로 영향이 없는 공백만 제거하고, 인라인 요소 사이의 공백은 그대로 둡니다.
개발 중 가독성과 압축의 관계
개발 단계에서는 보통 들여쓰기가 적용된 상태로 HTML을 유지합니다 — 그래야 DevTools에서 구조를 파악하기 쉽기 때문입니다. 압축은 사람이 읽을 필요가 없어지는 시점, 즉 배포 직전 최종 빌드에만 적용됩니다.
왜 필요한가
- 프로덕션에 배포하기 전 HTML 페이지 크기를 줄인다.
- 최종 마크업에서 개발자 주석을 제거한다.
- 정말로 안전한 곳에서만 공백을 제거해 실수를 방지한다.
한글 줄바꿈과 공백 압축의 관계
한글은 일본어나 태국어와 달리 단어 사이에 공백을 사용하는 언어이기 때문에, 인라인 요소 사이 공백을 잘못 제거했을 때 두 단어가 붙어버리는 문제는 영어와 비슷한 방식으로 발생할 수 있습니다. 다만 줄바꿈 자체는 공백이 아니라 음절 단위(글자 단위)로 이루어지는 경우가 많아, 태그 사이 공백을 압축해도 텍스트 내부의 줄바꿈 위치 자체는 크게 달라지지 않는 편입니다. 그래도 인라인 요소 사이의 공백만큼은 실제 가시적인 띄어쓰기이므로, 압축 도구가 이를 건드리지 않는지는 확인해볼 가치가 있습니다.