서버 렌더링된 두 템플릿 출력 비교
CMS 템플릿 변경이 나가고 다운스트림 사용자가 hero 마크업이 깨졌다고 보고합니다. 배포 전후의 렌더링된 HTML을 curl 해서 둘 다 diff에 붙여넣으면, 문제의 wrapper <div>나 클래스 교체가 명백해집니다. WordPress 테마 업그레이드, Hugo와 Jekyll 레이아웃 편집, 그리고 소스 템플릿을 직접 읽을 수 없는 모든 서버 렌더링 출력에 유용합니다.
원본 HTML
변경된 HTML
HTML Diff: 두 HTML 파일을 온라인으로 비교
두 HTML 문서를 붙여넣고 포맷팅하여 나란히 비교하세요. 태그 인식 구문 강조와 실시간 well-formedness 검사가 내장되어 있습니다.
HTML diff 도구란?
두 HTML 문서를 비교하기 위한 브라우저 내 무료 도구입니다. 랜딩 페이지의 이전 버전을 왼쪽에, 새 버전을 오른쪽에 붙여넣으면 변경 사항이 태그별, 속성별로 켜집니다. 어떤 것도 업로드되지 않습니다.
diff 자체는 문자 수준입니다. 각 패널의 Format 버튼은 Prettier나 HTML Tidy처럼 일관된 들여쓰기로 HTML을 다시 흘려줍니다. 구문 강조는 WHATWG HTML Living Standard를 따르므로 void 요소, boolean 속성, 엔티티 참조가 diff를 읽는 동안 모두 올바르게 렌더링됩니다.
마케팅 페이지의 카피 수정을 배포하고 hero 섹션의 클래스 이름이 왜 같이 바뀌었는지 알아내느라 한 시간을 잃은 적이 있다면, 이것이 그것을 몇 초 만에 드러내주는 도구입니다. 일반 산문에는 우리의 텍스트 diff가 적합합니다. HTML의 엄격한 사촌인 XML에는 전용 XML diff가 있습니다. 그리고 Markdown은 정적 사이트 빌드에서 자주 HTML로 컴파일되므로 Markdown diff도 유용한 이웃입니다.
diff가 실제로 작동하는 방식
이것은 HTML 인식 구문 강조가 있는 텍스트 수준 diff이지 DOM diff가 아닙니다. 비교는 문자 수준으로 실행되고, 그 후 의미적 후처리 패스가 강조 표시를 옮겨 임의의 구두점이 아니라 태그 이름, 속성 값, 보이는 텍스트에 안착하도록 합니다. 삽입은 오른쪽 패널에 녹색으로, 삭제는 왼쪽에 빨간색으로 표시됩니다.
HTML에는 사람들이 기억하는 것보다 더 많은 파싱 특이점이 있고, 대부분은 두 파일을 텍스트로 비교할 때만 문제가 됩니다. 파싱 알고리즘에 따르면 속성 순서는 의미가 없고, 속성 따옴표는 일부 값에 대해 작은따옴표·큰따옴표·없음일 수 있으며, 태그와 속성 이름은 대소문자를 구분하지 않습니다. 텍스트 diff는 그래도 모든 재정렬과 대소문자 교체를 표시합니다. 실용적인 우회법은 두 쪽을 같은 도구로 포맷팅하는 것입니다(parser: "html"인 Prettier가 잘 작동합니다). 그러면 diff를 읽기 전에 패널이 정규화됩니다.
이 도구는 문서를 DOM 트리로 파싱하여 노드를 비교하지 않습니다. 즉, 브라우저에서 동일하게 렌더링되는 두 파일, 예를 들어 <img src="a.png">와 <img src='a.png' />는 여기서도 다르게 보입니다. 진정한 구조적 비교가 필요하면 두 쪽을 DOMParser로 파싱해서 직접 트리를 순회하거나, 먼저 둘 다 Tidy로 처리하세요. 코드 리뷰 사례의 95%(카피 수정, 속성 교체, aria-label 추가)에서는 텍스트 diff가 더 빠르고 명확합니다.
세 단계로 HTML 비교하기
텍스트 패널 둘, diff 하나. 가입도 업로드도 서버 왕복도 없습니다.
- 1
HTML을 붙여넣거나 업로드
이전 HTML을 왼쪽에, 새 HTML을 오른쪽에 붙여넣으세요. 또는 어느 쪽이든 업로드를 클릭해
.html,.htm,.eml파일을 직접 로드하세요. 샘플 버튼은 작은 랜딩 페이지 스니펫으로 두 패널을 채우므로 도구가 동작하는 모습을 먼저 보고 싶을 때 유용합니다. - 2
공정한 비교를 위해 양쪽 포맷팅
각 패널의 Format을 눌러 일관된 들여쓰기로 pretty-print 하세요. 이로써 공백과 줄바꿈이 정규화되어 diff가 Windows CRLF 파일 대 Unix LF 파일 같은 포맷팅 잡음이 아닌 실제 콘텐츠 변경에 집중합니다. 문서가 깔끔하게 파싱되면 검증 배지가 녹색이 됩니다.
- 3
diff 읽기
삭제는 왼쪽에 빨간 강조 표시로, 삽입은 오른쪽에 녹색 강조 표시로 나타납니다. 각 헤더의 변경 카운트는 diff가 태그 이름, 속성 값, 보이는 텍스트에 걸쳐 찾아낸 별개 편집의 수를 알려줍니다. 한쪽 패널을 스크롤하면 다른 쪽이 같은 보조로 따라옵니다.
HTML diff가 적합한 도구일 때
A/B 테스트 전에 이메일 템플릿 HTML diff
이메일 HTML은 용서가 없습니다. Outlook은 여전히 Word 렌더링 엔진을 사용하므로, <table> 중첩이 바뀌거나 인라인 style 속성이 이름이 바뀌면 레이아웃이 산산조각 날 수 있습니다. 캠페인을 발송하기 전에 변형 A를 변형 B와 diff 하고, 그 후 둘 다 Litmus나 Email on Acid로 보내세요. diff에서 빠진 cellpadding="0"를 잡는 것이 천 개의 받은 편지함에서 잡는 것보다 저렴합니다.
PR의 접근성 속성 변경 검토
PR이 컴포넌트의 절반에 aria-label, role, aria-describedby 속성을 추가합니다. 텍스트 diff는 모든 인터랙티브 요소가 올바른 속성을 받았는지, 어떤 실제 버튼에도 role="presentation"이 적용되지 않았는지, 어떤 포커스 가능 요소도 접근 가능한 이름을 잃지 않았는지 사소하게 확인할 수 있게 합니다. 실제 감사를 위해서는 axe DevTools나 Lighthouse와 함께 사용하세요.
카피 수정 후 마케팅 랜딩 페이지 비교
카피라이터가 헤드라인을 수정하고 새 CTA를 더한 홈페이지를 돌려보냅니다. 라이브 HTML과 제안된 HTML을 붙여넣으면 diff가 어떤 <h1>, <p>, 버튼 텍스트가 바뀌었는지, 그리고 함께 따라온 클래스나 href 편집을 정확히 알려줍니다. 변경 추적된 Word 문서보다 빠르고 코드베이스로의 왕복을 온전히 견뎌냅니다.
HTML 새니타이저 출력의 XSS 회귀 감사
DOMPurify나 sanitize-html 버전 업그레이드 후, 알려진 악성 페이로드로 새니타이저를 회귀 테스트하고 출력을 이전의 양호한 베이스라인과 diff 하세요. 갑자기 <svg onload="...">나 href 속성의 javascript: URL을 보존하는 새니타이저는 정확히 프로덕션에 나가기 전 CI에서 잡고 싶은 종류의 회귀입니다. diff는 한 글자 변경(빠진 이스케이프)도 눈에 띄게 만듭니다.
HTML 빠른 참조
이 도구가 가장 자주 드러내는 파싱 세부 사항에 대한 짧은 치트시트입니다. 모두 WHATWG HTML Living Standard에 근거합니다.
| Topic | What this tool does |
|---|---|
| Void 요소 | <img>, <br>, <input>, <meta>, <link>, <hr> 및 친구들에는 닫는 태그가 없습니다. XHTML 스타일의 끝 슬래시 <br />는 HTML5에서 허용되지만 no-op으로 렌더링되며 파서가 무시합니다. |
| 속성 순서 | HTML 스펙에 따라 의미가 없습니다. <a href="/x" class="btn">와 <a class="btn" href="/x">는 파서에 동일합니다. 텍스트 diff는 교체를 표시하므로, 순서를 안정적으로 유지하려면 양쪽을 포맷팅하세요. |
| 속성 따옴표 | 공백이나 특수 문자가 없는 값에는 큰따옴표, 작은따옴표 또는 따옴표 없음 모두 가능합니다. id=hero, id='hero', id="hero"는 동등합니다. 대부분의 스타일 가이드는 일관성을 위해 큰따옴표를 요구합니다. |
| Boolean 속성 | 존재 여부가 중요합니다. <input disabled>, <input disabled="">, <input disabled="disabled">는 모두 input을 비활성화합니다. 스펙은 맨 형태를 권장하고, XHTML은 자세한 형태를 요구했습니다. |
| 대소문자 구분 | HTML에서 태그 이름과 속성 이름은 대소문자를 구분하지 않습니다(<DIV>는 <div>와 같습니다). 속성 값은 대소문자를 구분합니다(id="Hero"는 id="hero"와 다릅니다). HTML5 이후의 관습은 소문자 태그와 속성입니다. |
| 문자 엔티티 | 내장 다섯 개: & < > " '. 더하여 같은 명명된 엔티티와 강세 글자에 대한 é 같은 숫자 참조가 있습니다. CDATA 섹션은 외부 콘텐츠(SVG, MathML)에서만 유효하고 일반 HTML에서는 안 됩니다. |
| DOCTYPE | HTML5는 짧은 형태 <!DOCTYPE html>를 사용합니다. 더 오래된 XHTML 1.0 doctype도 여전히 파싱되지만 같은 식으로 no-quirks 모드를 트리거합니다. 누락되거나 잘못된 DOCTYPE은 페이지를 quirks 모드로 떨어뜨려 box-model 동작을 바꿉니다. |
| 공백 | 공백, 탭, 줄바꿈의 시퀀스는 렌더링될 때 단일 공백으로 축소됩니다. 단, <pre>, <textarea>, CSS white-space: pre가 있는 요소 안은 예외입니다. 소스 텍스트는 보존되므로 텍스트 diff는 모든 바이트를 봅니다. |
HTML diff: 자주 묻는 질문
markup에는 일반 텍스트 대신 HTML diff 뷰를 사용해야 하는 이유는?
내부적으로는 같은 문자 수준 알고리즘이지만, 에디터는 HTML 모드 강조 표시를 사용해 diff를 읽는 동안 태그·속성·엔티티가 익숙한 구문 색상으로 렌더링됩니다. Format 버튼은 일반 텍스트 재포맷이 아닌 HTML 인식 pretty-printer를 사용하므로 요소 중첩이 그대로 유지됩니다. 마크업이 없는 산문에는 텍스트 diff면 충분합니다. 태그 경계가 중요한 모든 파일에는 이 뷰가 훑어보기 더 쉽습니다.
요소의 속성 순서가 중요한가요?
브라우저에는 중요하지 않습니다. HTML Living Standard는 시작 태그의 속성 순서가 의미가 없다고 말하므로 <a href="/x" class="btn">와 <a class="btn" href="/x">는 동일하게 렌더링됩니다. 텍스트 diff는 원시 문자를 보기 때문에 그래도 교체를 표시합니다. 해결책은 비교 전에 같은 도구로 양쪽을 포맷팅하는 것입니다(Prettier와 html-validate는 합리적으로 정렬합니다). 그러면 속성 순서가 안정적입니다.
요소 사이의 공백이 왜 diff에 나타나나요?
HTML은 렌더링할 때 대부분의 공백 시퀀스를 단일 공백으로 축소하므로, 브라우저에서 동일하게 보이는 두 파일도 소스 텍스트는 매우 다를 수 있습니다. <pre>와 <textarea> 안에서는 공백이 보존됩니다. diff는 텍스트 수준이므로 모든 공백, 탭, 줄바꿈이 카운트됩니다. 들여쓰기를 정규화하기 위해 먼저 양쪽을 포맷팅하세요. 의미 있는 변경만 강조 표시된 채로 남습니다.
포맷을 무시하고 DOM 구조를 비교할 수 있나요?
이 도구는 텍스트 diff를 하지 DOM diff를 하지 않으므로, 포맷팅 잡음을 무시하는 가장 신뢰할 수 있는 방법은 붙여넣기 전에 같은 pretty-printer(Prettier, HTML Tidy 또는 htmlhint --format)로 양쪽을 포맷팅하는 것입니다. 그것이 들여쓰기, 속성 따옴표, 후행 공백을 정규화합니다. 진정한 트리 수준 비교가 필요하면 각 쪽을 DOMParser로 파싱하여 노드를 순회하세요. 코드 리뷰와 카피 편집 작업에는 포맷-후-diff 워크플로우가 더 빠르고 같은 버그를 잡습니다.
인라인 JavaScript와 CSS는 어떻게 처리되나요?
<script>와 <style>의 내용은 일반 텍스트로, 한 글자씩 diff됩니다. 즉, <style> 블록 안의 한 줄 CSS 변경이나 인라인 <script> 안의 이름 바뀐 함수가 정확히 예상하는 위치에 나타납니다. 더 큰 스크립트 블록은 .js 파일로 추출해서 별도로 diff하는 것을 고려하세요. 에디터의 HTML 모드는 그래도 script와 style 경계를 강조하므로 주변 마크업이 읽기 쉽게 유지됩니다.
문자 인코딩과 엔티티는요?
파일은 UTF-8로 읽히며, 이는 HTML5의 기본값이고 <meta charset="UTF-8"> 태그가 선언하는 것입니다. &, <, >, 같은 명명된 엔티티는 디코딩된 형태가 아니라 리터럴 소스 텍스트로 diff되므로 에서 실제 공백 문자로의 교체는 변경으로 표시됩니다. 두 파일이 브라우저에서 동일하게 렌더링되지만 diff가 시작 부분에서 켜지면, 둘 중 하나의 UTF-8 byte order mark를 의심하세요.
개인 정보와 동작 방식
당신의 HTML은 절대 브라우저를 떠나지 않습니다. 포맷터, 검증기, diff는 모두 당신의 머신에서 로컬로 실행됩니다. 입력에 대한 분석도, 로그도, "도움이 되는" 클라우드 왕복도 없습니다. 구문 강조는 WHATWG HTML Living Standard를 따르고, 더 오래된 W3C HTML 5.2 권장 사항도 유용한 교차 참조입니다. 요소 수준 참조 문서는 MDN에 있고, 접근성 패턴은 ARIA Authoring Practices Guide에서 옵니다. 포맷 자체에 대한 배경 자료는 Wikipedia에 있습니다.