HTML 포매터 & 미니파이어

HTML 포매터란?#

HTML 포매터는 모양을 잃어버린 마크업 — 템플릿 엔진이 모든 태그를 한 줄로 붕괴시킨 출력, 다른 사람의 들여쓰기 스타일로 붙여넣어진 조각, 또는 몇 달에 걸쳐 자라난 이메일 템플릿의 일부 — 을 받아 다시 들여쓰기하여 중첩이 한눈에 드러나게 합니다. 반대 작업인 압축은 브라우저가 필요로 하지 않는 모든 것(주석과 태그 사이의 공백)을 제거하여 같은 마크업을 쥐어짭니다.

이 페이지는 두 가지를 모두 하며, 두 방향은 HTML이 요구하므로 다르게 만들어져 있습니다. 서식 은 js-beautify의 html_beautify 를 써서 요소를 일관되게 들여쓰기하고 원하는 줄바꿈을 보존합니다. 압축 은 보수적인, 손으로 쓴 스캐너입니다. 이 스캐너가 따르는 가장 중요한 규칙은 <pre>, <code>, <textarea>, <script>, <style> 요소의 내용은 완전히 손대지 않고 그대로 둔다는 것입니다. <pre> 블록이나 <script> 안의 공백을 붕괴시키면 페이지가 망가집니다. 그 안에서 공백은 장식이 아니라 데이터이기 때문입니다. 이를 모르는 단순한 미니파이어가 바로 실제 사이트에서 코드 샘플의 들여쓰기가 갑자기 사라지는 흔한 원인입니다.

사용 방법#

1. 왼쪽의 HTML 패널에 마크업을 붙여넣거나, 예제 를 눌러 짧은 예시 문서를 불러오세요.
2. 도구 모음에서 들여쓰기 를 고르세요. 2, 4(HTML의 기본값), 또는 탭. 중첩된 태그가 빠르게 쌓이므로 마크업에는 공백 4칸이 흔한 하우스 스타일입니다.
3. 동작 버튼을 누르세요.
   • 서식 — js-beautify를 통해 다시 들여쓰기하며, 수동으로 끊은 줄이 뭉개지지 않게 기존 줄바꿈을 보존합니다.
   • 압축 — HTML 주석을 떼어 내고, 태그 사이의 공백을 없애며, 보통의 텍스트 노드에 있는 공백을 다듬습니다. 단, <pre>, <code>, <textarea>, <script>, <style> 의 안쪽은 쓰인 그대로 둡니다.
4. 출력 패널에서 결과를 읽으세요. 출력 헤더의 복사 로 가져가고, 지우기 로 양쪽 패널을 초기화합니다.

주요 기능#

• 중요한 것을 보존. <pre>, <code>, <textarea>, <script>, <style> 의 내용은 압축 중에 글자 그대로 복사됩니다. 그 안의 공백은 의미를 가지며, 제거하면 브라우저가 렌더링하는 것을 바꿉니다.
• 압축 시 주석 제거, 서식 시 유지. <!-- ... --> 블록은 압축을 명시할 때만 제거됩니다. 서식은 그것을 제자리에 둡니다.
• HTML 친화적 기본 들여쓰기. 공백 4칸. 깊게 중첩된 마크업은 더 넓은 폭에서 읽기 좋기 때문입니다. 프로젝트에 맞으면 2 또는 탭으로 바꾸세요.
• 두 패널, 복사 준비 완료. 편집 가능한 입력, 읽기 전용 출력, 한 번 클릭하는 복사.
• 브라우저에서만 동작. js-beautify는 페이지에 꾸려 넣어지고 주문형으로 로딩됩니다. 백엔드도, 업로드도 없고, 마크업은 기기에 머뭅니다.

실전 예시#

템플릿에서 뽑아낸 제품 카드 조각으로, 안에 주석과 <pre> 블록이 있습니다.

입력:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

서식 을 4 칸으로 누르면:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

이제 같은 입력에서 압축 을 누르면:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

주목할 점이 세 가지입니다. 주석이 사라졌습니다. 태그 사이의 공백이 사라졌습니다. </span> 과 <pre> 가 이제 직접 붙어 있는데, HTML에서 태그 사이의 공백은 장식이므로 안전합니다. 하지만 <pre> 안의 줄바꿈(npm install 위에 npm run build)은 쓰인 그대로 여전히 있습니다. 그것이 제 역할을 하는 규칙입니다. 장식은 붕괴시키고, 데이터는 보존합니다.

FAQ#

압축 후에도 태그 사이에 빈 공백이 남아 있는 이유는?#

블록 수준 태그 사이에 놓인 공백 전용 텍스트 노드는 완전히 제거됩니다. 하지만 텍스트 한 줄 안의 단일 공백 — Hello <em>world</em> — 은 중요합니다. 제거하면 단어가 합쳐지기 때문입니다. 스캐너는 의미 있는 텍스트 노드 공백은 유지하고, 순전히 장식인 태그 사이의 공백만 제거합니다.

압축은 속성, 따옴표, 기본값을 제거하나요?#

아닙니다. 속성 문법을 다시 쓰거나, 따옴표를 벗기거나, 불 속성을 합치거나, type="text" 를 제거하지 않습니다. 그런 변환은 스키마 지식을 가진 전체 HTML 파서가 필요하고 틀리기 쉽습니다. 이 도구는 안전한 쪽에 서서 주석과 장식 공백만 제거합니다.

<script> 태그 안의 JavaScript도 압축하나요?#

아닙니다. <script> 의 전체 내용은 손대지 않고 그대로 통과합니다. 그것을 바꾸면 ASI를 깰 수 있기 때문이기도 하고, 별도의 JS 미니파이어가 format/js 페이지에 있기 때문이기도 합니다. 스크립트를 압축하고 싶다면 꺼내서 그 도구에 돌린 뒤 다시 붙여넣으세요.

{{ var }} 나 {% if %} 같은 템플릿 문법을 이해하나요?#

서식은 템플릿 토큰 주변을 다시 들여쓰기하며 보통 읽을 수 있는 출력을 만듭니다. 압축은 템플릿 태그를 보통 텍스트로 다루어, 의미를 바꾸는 방식으로 그 안의 공백을 붕괴시키지 않습니다. 무거운 템플릿에서는 출력을 튼튼한 출발점으로 삼고 여러분의 렌더러에 대해 검증하세요.