HTML 미화 작동 방식
미화기는 마크업을 태그 단위로 읽으며 각 요소의 중첩 깊이를 추적한 뒤 일관된 들여쓰기로 다시 출력합니다. 페이지 렌더링은 전혀 바뀌지 않으며, 오직 소스 레이아웃만 바뀝니다.
- 태그 파싱. 라이브러리는 입력을 여는 태그, 닫는 태그, 텍스트 콘텐츠, 주석, script 블록과 style 블록의 내용 등 토큰 스트림으로 스캔합니다. 따옴표로 감싼 속성 값과 pre·textarea 요소의 본문은 단일 단위로 처리되어 내부 공백이 그대로 유지됩니다.
- 중첩 추적. 토큰 스트림을 순회하면서 미화기는 실시간 들여쓰기 수준을 유지합니다. 자기 폐쇄가 아닌 여는 태그가 나타날 때마다 수준이 깊어지고, 대응하는 닫는 태그가 나타날 때 수준이 되돌아옵니다. 이 깊이가 출력되는 각 줄 앞에 붙는 들여쓰기 단위 수를 결정합니다.
- 옵션 적용. 들여쓰기 선택(공백 2칸, 공백 4칸, 탭)이 한 수준의 너비를 결정합니다. 줄 바꿈 열 수 값은 속성이나 텍스트가 지정한 열을 초과할 때 긴 줄을 분리합니다. 최대 빈 줄 수는 연속된 빈 줄을 설정한 수 이하로 줄입니다.
- 마크업 재출력. 마지막으로 포매터가 계산된 들여쓰기와 줄 바꿈으로 태그를 출력합니다. 인라인 서식 정리를 켰다면 각 style 블록의 내용은 CSS 포매터를, 각 script 블록의 내용은 JS 포매터를 거쳐 임베드된 코드가 주변 마크업과 들여쓰기가 맞게 출력됩니다.
HTML을 미화하는 이유
- 압축 페이지 읽기. 프로덕션 HTML은 바이트를 절약하려고 줄 바꿈을 제거합니다. 미화하면 구조가 복원되어 필요한 섹션을 찾거나 누락된 닫는 태그를 발견하고 문서의 실제 중첩 방식을 파악할 수 있습니다.
- 일관성 없는 템플릿 정리. 여러 사람이 편집한 마크업은 들여쓰기와 태그 위치가 뒤섞이기 마련입니다. 미화 한 번으로 파일 전체를 단일 레이아웃으로 정규화하면, 다음 커밋에서 공백 잡음이 아닌 실제 변경 내용만 보이게 됩니다.
- 이 도구는 페이지에 부담을 주지 않습니다. 대부분의 온라인 포매터는 페이지를 열자마자 라이브러리 전체를 로드합니다. 이 도구는 미화 버튼을 클릭하거나 실시간 모드를 켤 때만 js-beautify를 지연 로드합니다. 그래서 페이지를 여는 비용이 수백 KB가 아닌 몇 KB에 불과하며 초기 렌더링이 빠르게 유지됩니다.
- 마크업이 브라우저를 떠나지 않습니다. 모든 처리가 사용자의 기기에서 완결됩니다. 마크업은 절대 서버에 업로드되지 않습니다. 검토하는 페이지가 클라이언트 소유이거나 내부 URL을 포함하거나 기밀 유지 계약의 대상일 때 특히 중요합니다.
주요 활용 사례
읽히도록 작성되지 않은 마크업을 읽어야 할 때마다 HTML 미화가 필요합니다.
- 라이브 페이지 검사: 「페이지 소스 보기」에서 압축 소스를 붙여넣어 로컬에서 재현할 수 없는 레이아웃 버그 뒤에 있는 마크업을 찾습니다.
- CMS 출력 정리: 페이지 빌더가 한 줄로 내보낸 템플릿을 저장소에 커밋하기 전에 재포맷합니다.
- 접근성 및 SEO 검토: 문서를 펼쳐서 실제 DOM을 기준으로 제목 순서, 랜드마크 구조, alt 속성을 확인합니다.
실제 예시
압축된 스니펫을 사용해보겠습니다: <div><p>hi</p><span>x</span></div>. 들여쓰기를 공백 2칸으로 설정하고 위에 붙여넣은 뒤 미화를 클릭하세요. 읽기 좋은 블록이 반환됩니다: <div>가 독립 줄에, <p>hi</p>와 <span>x</span>이 각각 한 수준 들여써져, 대응하는 </div>가 아래에 정렬됩니다. 들여쓰기를 탭으로 바꾸면 각 수준이 공백 두 칸에서 탭 문자로 바뀝니다. <style>a{color:red}</style> 블록을 추가하고 「인라인 CSS 및 JS도 서식 정리」를 켜면 규칙이 한 줄 대신 각각 들여쓰기된 줄로 펼쳐집니다.
FAQ
이것이 브라우저에서 실행되나요?
네. js-beautify 라이브러리는 처음으로 미화를 클릭하거나 실시간 모드를 활성화할 때 지연 로드된 뒤 캐시됩니다. 마크업은 절대 페이지를 벗어나지 않으며, 서버 통신도 업로드도 없습니다.
미화하면 페이지 렌더링이 바뀌나요?
아니요. 미화기는 태그 사이의 공백과 줄 바꿈만 추가하거나 제거합니다. 브라우저는 페이지를 구성할 때 그 공백을 무시하기 때문에 렌더링 결과는 동일합니다. pre·textarea·인라인 요소 내부의 공백에 민감한 콘텐츠는 포매터가 의도적으로 건드리지 않습니다.
인라인 CSS와 JS 토글은 무엇을 하나요?
꺼져 있을 때는 style 블록과 script 블록의 내용이 붙여넣은 그대로 유지됩니다. 켜면 각 style 블록 내부의 CSS가 CSS 포매터를, 각 script 블록 내부의 JavaScript가 JS 포매터를 거쳐 임베드된 코드의 들여쓰기가 주변 마크업과 맞춰집니다.
「줄 바꿈 열 수」는 무엇을 하나요?
속성이 많은 태그나 긴 텍스트가 여러 줄로 분리되는 줄 길이를 설정합니다. 0으로 설정하면 길이에 관계없이 각 요소를 한 줄로 유지합니다. 80이나 120으로 설정하면 해당 열을 초과하는 부분을 포매터가 줄 바꿈하여, 넓은 요소도 좁은 편집기에서 읽을 수 있게 됩니다.
브라우저 측 HTML 미화로 빌드 단계나 업로드 없이 읽기 쉬운 마크업을 얻을 수 있습니다. 압축되거나 지저분한 페이지를 붙여넣고 들여쓰기와 줄 바꿈 열 수를 선택하고 인라인 CSS와 JS 재포맷 여부를 결정한 다음 결과를 복사하거나 다운로드하세요. 마크업은 기기를 떠나지 않고 계정도 필요 없으며 라이브러리는 요청할 때만 로드됩니다. 이 페이지를 여는 비용은 메가바이트가 아닌 몇 킬로바이트입니다.