HTML 포맷터는 무엇을 하나요?

한 줄로 죽 이어 붙었거나 들여쓰기가 뒤죽박죽인 HTML 코드를, 태그의 계층에 맞춰 줄바꿈과 들여쓰기를 다시 정돈해 주는 도구입니다. 이런 정리 작업을 흔히 포맷팅(formatting) 또는 뷰티파이(beautify)라고 부릅니다. 코드의 동작이나 화면 모양은 그대로 두고, 사람이 읽고 수정하기 좋은 모양으로 표기만 가지런히 바꿉니다.

웹에서 복사해 온 압축된 코드, 자동 생성되어 한 줄로 뭉친 코드, 여러 사람이 손대 들여쓰기가 엉킨 코드를 깔끔하게 펼쳐 볼 때 유용합니다. 태그가 어디서 열리고 닫히는지 한눈에 들어오기 때문에, 오류를 찾거나 구조를 파악하는 시간이 크게 줄어듭니다.

사용 방법

1. 편집기에 정리할 HTML 코드를 붙여넣습니다.
2. 아래의 정렬 버튼을 누르면 같은 편집기 안에서 코드가 들여쓰기된 결과로 바뀝니다.
3. 편집기 오른쪽 위의 복사 버튼으로 정리된 코드를 클립보드에 담아 사용합니다.

한 가지 알아 둘 점이 있습니다. 결과가 새 창이 아니라 입력했던 편집기에 그대로 덮어써집니다. 정렬 자체는 화면에 보이는 텍스트를 다듬는 작업이라 코드 내용이 사라지지는 않지만, 원본을 그대로 보관해야 한다면 실행 전에 따로 복사해 두는 편이 안전합니다. 입력한 코드는 접속한 분의 브라우저 안에서만 처리되고 서버로 전송되지 않습니다.

정렬 전후 비교 예시

한 줄로 이어진 HTML을 정렬하면 태그 계층에 맞춰 다음과 같이 펼쳐집니다.

정렬 후에는 <div> 안에 <h1>과 <p>가 들어 있다는 계층 관계가 들여쓰기로 분명하게 드러납니다. 태그가 많고 중첩이 깊은 문서일수록 이런 정리의 효과가 커집니다.

자주 묻는 질문

포맷터와 압축(minify)은 어떻게 다른가요?

정반대 작업입니다. 포맷터는 사람이 보기 좋게 줄바꿈과 들여쓰기를 넣어 펼치고, 압축은 그 공백을 걷어내 파일 크기를 줄입니다. 편집·검토할 때는 포맷터로 펼쳐 보고, 배포할 때는 HTML 압축 도구로 줄이는 식으로 함께 쓰면 좋습니다.

정렬해도 화면 표시가 그대로인가요?

대부분 그대로입니다. 다만 <pre>나 <textarea>처럼 공백과 줄바꿈을 있는 그대로 보여 주는 태그가 있다면 들여쓰기가 화면에 드러날 수 있으니, 정렬 후 브라우저에서 한 번 확인하는 것이 안전합니다.

마크다운이나 다른 형식도 정리할 수 있나요?

이 도구는 HTML 전용입니다. 마크다운으로 쓴 글을 HTML로 바꾸려면 마크다운 → HTML 변환 도구를, 반대로 HTML을 마크다운으로 정리하려면 HTML → 마크다운 도구를 사용하세요.

근거: js-beautify의 html_beautify 정렬 동작. 단일 편집기 덮어쓰기 방식은 html-formatter 뷰와 formatters.js 실측. 마지막 검토: 2026년 7월 11일.