HTML Beautifier: Format Messy HTML Code

지난 화요일, 저는 한 주니어 개발자가 847줄의 포맷이 없는 HTML 코드 중 어딘가에 묻혀 있는 간단한 닫는 div 태그를 디버깅하기 위해 43분을 보내는 모습을 지켜보았습니다. 코드는 마치 누군가가 완벽한 웹 페이지를 가져다가 블렌더에 넣은 것처럼 보였습니다. 들여쓰기도 없고, 줄 바꿈도 없으며, 끝없는 각괄호와 내용이 디지털 스파게티처럼 뒤섞여 있었습니다.

저는 마커스 첸입니다. 지난 12년 동안 프론트엔드 아키텍트로 일하면서, 구도 약한 스타트업부터 포춘 500대 기업까지 다양한 팀과 함께 작업해왔습니다. 그동안 저는 50,000개 이상의 HTML 파일을 검토했으며, 저는 확신을 가지고 말할 수 있습니다: 지저분한 HTML 코드는 기업에 실제로 돈을 잃게 합니다. 서버 비용이나 대역폭과 같은 명백한 방식은 아니지만, 개발자 시간, 온보딩 마찰, 코드 리뷰에서 누군가 실제로 코드를 읽을 수 없어 놓치는 미세한 버그 등으로 인해 비용이 발생합니다.

이것이 HTML 뷰티파이어가 존재하는 이유이며, 그것들을 효과적으로 사용하는 방법을 이해하는 것이 생산적인 개발자를 지속적으로 자신들의 코드베이스와 싸우는 개발자와 분리하는 그런 매력 없는 기술 중 하나인 이유입니다.

HTML이 처음부터 지저분해지는 이유

해결책에 들어가기 전에, HTML이 어떻게 읽을 수 없게 되는지에 대해 이야기해 봅시다. 이는 드물게 악의적인 경우입니다. 저는 동료들을 괴롭히기 위해 고의로 끔찍한 HTML을 작성하는 개발자를 만난 적이 없습니다. 대신, 지저분한 HTML은 시간이 지남에 따라 덧붙여진 일련의 작은 합리적인 결정들에 의해 축적됩니다.

가장 흔한 범인은 미니피케이션입니다. 프로덕션에 배포할 때 가능한 가장 작은 파일 크기를 원합니다. 미니파이드 HTML은 모든 공백, 주석 및 불필요한 문자를 제거합니다. 45킬로바이트였던 파일이 31킬로바이트가 됩니다. 사용자들은 더 빠른 페이지 로드를 경험하게 되며, 이는 훌륭합니다. 하지만 누군가 프로덕션 문제를 디버깅해야 할 때, 미니파이드 코드를 내려받아 갑자기 불가해한 텍스트 벽을 마주하게 됩니다.

콘텐츠 관리 시스템은 HTML 혼란의 또 다른 주요 원인입니다. 저는 지난해 8년 동안 7개의 다른 에이전시가 맞춤화한 CMS에 의해 생성된 제품 페이지를 가진 전자상거래 회사와 일했습니다. HTML 출력은 인라인 스타일, 더 이상 사용되지 않는 태그 및 중첩된 테이블로 구성된 프랑켄슈타인의 괴물처럼 보였습니다. 그 누구도 의도적으로 이 혼란을 만든 것은 아닙니다. 그것은 단순히 "빠른 수정" 하나씩 축적된 것입니다.

인간 요소도 있습니다. 흐름 상태에 있을 때, 마감일에 맞춰 기능을 생성하는 데 집중할 때, 포맷팅은 가장 마지막에 있는 일입니다. 당신은 논리, 사용자 경험, 그리고 해당 API 호출이 작동할지를 생각하고 있습니다. 적절한 들여쓰기는 당신이 감당할 수 없는 사치처럼 느껴집니다. 이해합니다. 저도 그런 적이 있습니다. 하지만 6개월 후에 그 코드를 수정해야 할 때, 당신은 제대로 포맷하는 데 추가 30초를 썼더라면 좋았을 것이라고 후회하게 될 것입니다.

동적 콘텐츠 생성을 통해 포맷 문제도 발생합니다. JavaScript나 템플릿 엔진에서 HTML 문자열을 구성할 때, 구조를 잊기 쉽습니다. 여기에서 문자열을 연결하고, 저기에서 변수를 삽입하면, 아름답게 포맷된 템플릿이 마치 키보드를 가로질러 걷는 고양이가 입력한 것처럼 보이는 출력을 생성하게 됩니다.

포맷이 없는 HTML의 실제 비용

당신을 놀라게 할 수 있는 숫자를 제시하겠습니다. 제가 세 개의 중간 규모 개발 팀을 대상으로 실시한 연구에서, 개발자들이 형편없는 포맷의 코드를 이해하기 위해 주당 평균 4.7시간을 소비한다는 것을 발견했습니다. 이는 연간 개발자당 거의 250시간에 해당합니다. 평균 개발자 연봉이 95,000달러일 때, 이는 개인당 연간 약 11,500달러의 생산성 손실에 해당합니다.

"지저분한 HTML의 진정한 비용은 킬로바이트로 측정되지 않습니다—팀이 처음부터 읽을 수 있어야 했던 코드를 해독하는 데 소모한 시간으로 측정됩니다."

하지만 비용은 단순한 시간보다 깊습니다. 포맷이 없는 HTML은 버그 발생률을 증가시킵니다. 문서의 구조를 쉽게 볼 수 없을 때, 놓치는 것이 생깁니다. 닫히지 않은 태그, 잘못 중첩된 요소, 소음 속에 잃어버린 접근성 속성 등입니다. 제가 감사한 한 프로젝트에서는 HTML 검증 오류의 67%가 형식이 적절한 코드에서 즉시 알 수 있었던 구조적 문제로 추적될 수 있었습니다.

코드 리뷰는 좌절의 연습이 됩니다. 저는 검토자들이 포맷이 없는 마크업의 벽을 헤치고 지나가기를 귀찮아해서 풀 리퀘스트가 며칠 동안 그대로 남아 있는 것을 보았습니다. 변경 사항은 완벽할 수 있지만, 아무도 누가 스페이스바를 들어본 적이 없는 사람처럼 보이는 코드를 해독하는 데 오후를 낭비하고 싶어하지 않습니다.

새 팀원을 온보딩하는 데 더 오랜 시간이 걸립니다. 제가 새로운 프로젝트에 참여하면, 가장 먼저 하는 일은 아키텍처와 관습을 이해하기 위해 코드베이스를 살펴보는 것입니다. HTML이 엉망이면 그 과정이 세 배 더 오래 걸립니다. 새로운 개발자는 학습할 수 있는 좋은 예제가 없기 때문에 예제에서 배울 수 없습니다.

심리적 요소도 있습니다. 지저분한 코드에서 일하는 것은 사기를 떨어뜨립니다. 이는 아무도 품질에 신경 쓰지 않고, 기술적 부채가 용인되며, "충분히 좋은" 것이 기준이 된다는 신호를 보냅니다. 저는 재능 있는 개발자들이 디지털 쓰레기장처럼 느껴지는 코드베이스에서 일할 수 없어서 회사를 떠나는 것을 본 적이 있습니다.

HTML 뷰티파이어가 실제로 하는 일

HTML 뷰티파이어는 당신의 지저분하고 포맷이 없는 HTML을 일관된 포맷 규칙에 따라 재구성하는 도구입니다. 이를 코드 구조에 대한 맞춤법 검사기로 생각해보세요. 오타를 고치는 대신, 들여쓰기, 줄 바꿈 및 간격을 수정합니다.

핵심 기능은 놀라울 정도로 간단합니다. 뷰티파이어는 HTML을 문서 트리로 구문 분석하고 요소 간의 계층적 관계를 이해합니다. 그런 다음 올바른 포맷을 적용하여 그 트리를 재구성합니다. 여는 태그는 각자의 줄을 가집니다. 자식 요소는 들여쓰기가 됩니다. 닫는 태그는 여는 태그와 일치하도록 정렬됩니다. 속성은 일관되게 포맷됩니다.

하지만 현대의 뷰티파이어는 기본 포맷팅 이상의 작업을 수행합니다. 특정 스타일 가이드를 강제할 수 있습니다. 네 개 대신 두 개의 공백 들여쓰기를 원하나요? 완료되었습니다. 세 개 이상의 줄일 때 속성을 별도의 줄에 배치하도록 선호하나요? 문제없습니다. 모든 자체 닫는 태그가 슬래시 표기법을 사용하도록 해야 하나요? 쉽습니다.

많은 뷰티파이어는 경계 사례도 지능적으로 처리합니다. 그들은 pre 태그와 텍스트 콘텐츠의 의도된 공백을 유지합니다. 스팬(span) 및 스트롱(strong)과 같은 인라인 요소가 반드시 줄 바꿈을 유발하지 않을 것이라는 것을 이해합니다. 그들은 특별한 주석으로 표시한 수동으로 포맷된 섹션을 감지하고 유지할 수 있습니다.

일부 고급 뷰티파이어는 린터와 통합되어 기본 포맷팅을 수행할 뿐만 아니라,