온라인 HTML 코드 정렬
압축된 페이지 소스를 읽기 쉬운 마크업으로 바꾸세요. 태그는 중첩 깊이에 따라 들여쓰기되고, 속성은 보기 좋게 배치되며, 내장 스크립트와 스타일도 문서와 함께 정렬됩니다.
페이지 소스가 복잡해 보이는 이유
HTML 압축 도구는 태그 사이 공백을 줄이고 주석을 제거하며 생략 가능한 닫는 태그와 불필요한 속성값 따옴표를 없앱니다. 서버 측 템플릿도 복잡함을 더합니다. 수십 개의 부분 템플릿으로 조립한 페이지가 원본 파일 구분 없이 하나의 텍스트 흐름으로 전달되기 때문입니다. 운영 중인 사이트의 소스를 열어 보면 대개 몇 개의 거대한 줄로 된 문서를 만납니다. 구역의 닫는 태그를 찾으려면 꺾쇠괄호를 눈으로 세어야 할 정도입니다.
문서 구조를 확인하는 것이 핵심
HTML은 트리 구조이므로 평평하게 펼쳐 놓으면 읽기 어렵습니다. 중첩 깊이에 맞춰 들여쓰면 헤더가 끝나는 곳, 본문을 감싸는 컨테이너, 컴포넌트의 깊이, 예상하지 못한 중첩 관계를 확인할 위치가 바로 드러납니다. 정렬된 페이지 소스는 제목 순서를 확인하거나 프레임워크가 생성한 마크업을 살펴보고, 이해하고 싶은 다른 사이트의 구역 구조를 분석하는 데 유용합니다. 조사 목적에 맞는 소스를 선택하세요. 저장한 페이지 소스에는 서버가 전달한 마크업이 담기지만 개발자 도구의 요소 패널에서 복사한 마크업에는 클라이언트 스크립트의 변경 사항이 포함될 수 있습니다. 정렬은 두 화면의 차이를 맞추거나 실행 중인 DOM을 재현하지 않습니다. 예상치 못한 요소를 추적할 때는 원본 소스와 실제 문서를 비교하고 해당 요소를 추가한 스크립트를 확인하세요. 마찬가지로 깔끔하게 들여쓴 제목 구조는 수동 검토에 도움이 되지만 페이지 전체의 접근성 점검을 대신하지는 않습니다.
내장 스크립트와 스타일도 함께 처리합니다
실제 페이지가 마크업만으로 이루어진 경우는 거의 없습니다. 분석 스니펫, JSON-LD 구조화된 데이터, 설정 객체, 핵심 CSS가 모두 문서 안에 직접 들어 있고, 압축 도구는 이것들까지 함께 압축합니다. 포매터는 내장된 블록마다 알맞은 파서를 적용합니다. 그래서 압축된 JavaScript가 든 script 태그는 읽기 쉬운 JavaScript로, style 태그는 읽기 쉬운 CSS로 나오며, 이 모두가 올바르게 들여쓰기된 문서 안에 담깁니다.
공백에 민감한 내용 확인
공백은 HTML 렌더링에 영향을 줄 수 있으며, 특히 인라인 텍스트 주변이나 pre와 textarea 같은 요소 안에서는 중요합니다. 포매터는 일반적인 HTML 공백 동작을 고려한 규칙을 사용하지만 코드 정렬은 시각적 회귀 테스트가 아닙니다. 원본 페이지를 보관하고 변경 사항을 게시하기 전에 실제 사용 환경에서 결과를 확인하세요. 화면 배치는 여기서 평가하지 않는 스타일시트, 스크립트, 브라우저 동작에도 영향을 받습니다. 정렬된 사본은 문서를 읽고 조사하는 데 유용하지만 페이지가 완전히 똑같이 표시된다는 증거는 아닙니다.
자주 묻는 질문
페이지 소스 전체를 붙여 넣어도 되나요?
네. 브라우저의 view-source로 소스를 복사하거나 페이지를 저장한 뒤 파일을 열면 head, body, 내장 스크립트, 구조화된 데이터를 포함한 문서 전체가 정렬됩니다.
정렬하면 페이지 표시가 달라지나요?
포매터는 의미 있는 HTML 공백을 유지하는 것을 목표로 하지만 게시 전에 결과를 비교해야 합니다. 인라인 텍스트, 서식을 유지하는 콘텐츠, 스타일과의 상호 작용에서는 간격이 중요할 수 있습니다. 원본을 보관하고 해당 마크업을 실제로 사용하는 프로젝트에서 렌더링을 테스트하세요.
Twig나 Blade 같은 템플릿도 지원하나요?
이 편집기는 브라우저로 전달되는 HTML용입니다. Twig, Blade 등 템플릿 언어의 문법은 HTML 포매터에서 거부되거나 예상과 다르게 처리될 수 있습니다. 생성된 마크업을 정확히 살펴보려면 프로젝트에서 템플릿을 렌더링한 뒤 결과 HTML 문서를 정렬하세요.