웹 개발에는 크게 두 가지 방식이 있습니다. 바로 텍스트 편집기 방식과 GUI 편집기 방식입니다. 첫 번째 방식은 주로 숙련된 개발자를 위한 것으로, 코드를 충분히 이해하고 시각적 보조 없이도 웹 페이지를 만들 수 있는 사람들에게 적합합니다. 이들은 vim, emacs, Notepad++, Kate 같은 텍스트 편집기로 작업하며, 결과물이 궁금할 때 웹페이지를 브라우저에 불러와 확인합니다. 이 접근 방식은 미니멀하고 효율적이지만, 그만큼 진입 장벽이 높습니다.
위지위그(WYSIWYG) 편집기와 그 한계
두 번째 방식은 대부분의 사람들이 선택하는 방법입니다. 코드를 사용자에게서 숨기고 콘텐츠 작성에 집중할 수 있게 해주는 프로그램, 이른바 웹 에디터를 사용하는 것이죠. 이런 도구들은 대부분 위지위그(WYSIWYG, What You See Is What You Get) 방식으로, 편집기 화면에 보이는 그대로가 최종 결과물과 일치합니다. KompoZer, Dreamweaver, Quanta, Bluefish 같은 인기 웹 개발 소프트웨어는 레고 블록을 조립하듯 직관적으로 페이지를 만들 수 있게 해줍니다.
위지위그 편집기는 텍스트 편집기보다 훨씬 다루기 쉽지만, 대체로 효율성은 떨어집니다. 그리고 결정적인 단점이 하나 더 있습니다. 바로 지저분한 코드 잔여물을 상당히 남긴다는 점입니다.
텍스트 편집기로 작업하면 웹 파일의 모든 코드는 전부 본인이 직접 작성한 것입니다. 반면 웹 에디터는 자동 생성된 메타 필드, 자체 홍보용 주석, 불필요한 줄바꿈과 공백을 코드 곳곳에 넣어두곤 합니다. 그 결과 코드는 의도했던 것보다 훨씬 비대해집니다.
대부분의 사람들은 이런 잉여 코드를 눈치채지 못하거나 크게 신경 쓰지 않습니다. 하지만 깔끔하고 질서 있는 방식으로 웹 개발을 하고 싶으면서도 GUI 편집기의 편리함은 포기하고 싶지 않은 분들이 있다면, 간결하고 정돈된 코드를 유지하도록 도와주는 여러 도구가 있습니다.
이런 도구들을 린트/티디(lint/tidy) 유틸리티라고 부르며, HTML 및 관련 파일의 출력물을 더 작고 깨끗하며 체계적으로 만드는 데 사용됩니다. 이번 글에서는 필자가 실제로 사용하는 도구들을 중심으로 이런 유틸리티들을 소개합니다. 여러분도 좀 더 우아하고 '콜레스테롤 없는' 웹 개발을 즐기실 수 있기를 바랍니다. 시작해 보겠습니다.
HTML Tidy — 가장 대표적인 HTML 정리 도구
HTML Tidy는 아마도 가장 널리 알려진 HTML 정리 유틸리티일 것입니다. 이 작은 프로그램은 코드에 놀라운 마법을 부립니다. 잘못된 HTML을 수정하고, 불필요한 공백 문자를 제거하며, 최종 마크업의 레이아웃과 들여쓰기를 개선해 줍니다.
모든 주요 운영체제에서 사용할 수 있다는 점도 큰 장점입니다. 게다가 대부분의 웹 에디터는 자체 GUI 안에서 Tidy를 실행할 수 있어, 작업과 코드 관리가 한결 수월해집니다.
다음은 Linux Mint 6 Felicia의 Bluefish에서 Tidy를 실행한 예시입니다.
이번에는 Windows XP의 KompoZer에서 설정한 Tidy 구성 예시입니다.
인기 있는 Windows용 텍스트 편집기 Notepad++에는 Tidy 플러그인이 기본 탑재되어 있어, 편집기를 떠나지 않고도 바로 코드를 정리할 수 있습니다.
Tidy의 실제 작동 예시
Tidy가 어떻게 작동하는지 살펴보겠습니다. 빈 텍스트 문서에 몇 단어를 입력한 뒤 Tidy를 실행하면, 단순히 출력을 예쁘게 다듬을 뿐만 아니라 누락된 필수 HTML(XHTML) 태그를 추가하고 올바른 들여쓰기까지 자동으로 만들어 줍니다.
정리 전:
정리 후:
또한 HTML을 XHTML로 변환하거나, XML 변환 및 재들여쓰기, 자동 줄바꿈(wrap), 심지어 Microsoft Word 문서 정리까지 가능합니다!
기본적으로 Tidy는 명령줄 유틸리티입니다. tidy filename.html처럼 원하는 HTML 파일을 대상으로 호출하기만 하면 됩니다. 단, 파일 이름에는 확장자 외에 마침표나 공백이 없어야 합니다. 그렇지 않으면 유틸리티가 오작동할 수 있습니다. 어찌 보면 당연한 일반적인 코딩 규칙이기도 합니다.
마찬가지로 웹 에디터 내에서 Tidy를 실행하면, 설정에 따라 발견된 모든 문제점·오류·경고에 대한 상세한 보고서를 받을 수 있습니다. Bluefish에서는 다음과 같이 표시됩니다.
Tidy 구하기
Tidy는 다양한 형태로 제공됩니다. 가장 정확한 정보는 공식 페이지에서 확인할 수 있습니다. 원 개발자인 Dave Raggett의 페이지도 참고할 만하지만, 현재 프로젝트의 개발·수정·개선 작업은 모두 SourceForge 사이트에서 통합 진행되고 있습니다.
리눅스(Linux)
Tidy는 대부분의 인기 리눅스 배포판 저장소에 포함되어 있으므로 구하는 데 어려움이 없습니다.
윈도우(Windows)
Windows 사용자에게는 몇 가지 선택지가 있습니다. Notepad++를 사용하거나, Windows용 실행 파일을 받아 명령줄에서 HTML 파일에 직접 실행하거나, KompoZer 같은 웹 에디터에서 플러그인을 통해 호출할 수 있습니다.
명령줄 사용이 부담스럽다면 Dirk Paehl이 개발한 GUI 버전도 있습니다. 다른 운영체제용 버전 역시 함께 제공됩니다.
온라인 서비스
Tidy는 설치 없이 온라인에서 바로 사용할 수도 있습니다. 국제 WWW 표준화 기구인 W3C를 비롯한 여러 웹사이트가 이 서비스를 제공합니다. HTML 파일의 URL을 연결해서 Tidy로 처리하기만 하면 됩니다.
파이어폭스(Firefox) 확장
Firefox 확장 기능도 존재합니다(Windows 전용). 다운로드 용량이 2.6MB로 다소 크지만, 브라우저 안에서 강력한 검증 기능을 제공합니다. 자세한 내용은 공식 사이트를 참고하세요.
그 밖에도 Java, Python, PHP, Ruby 버전의 Tidy가 존재합니다. 지원 목록은 거의 끝이 없다고 보면 됩니다.
CSSTidy — CSS 최적화 전문 도구
CSSTidy는 오픈소스 CSS 파서이자 옵티마이저입니다. HTML Tidy처럼 CSS 파일의 코드를 정리하는 데 사용되며, 가능한 경우 속성 문자열을 16진수(hex) 코드로 변환하고, 공백 문자를 제거하고, 중복 속성을 제거·병합하는 등의 작업을 수행합니다. 덕분에 CSSTidy는 CSS 파일의 전체 용량을 수십 퍼센트까지 줄일 수 있습니다.
CSSTidy는 크로스플랫폼 솔루션으로 Linux, Windows, Mac에서 모두 사용할 수 있으며, C++ 및 PHP 버전도 제공됩니다. 5개 언어를 지원하는 온라인 포매터·옵티마이저도 있어, HTML Tidy의 온라인 서비스와 매우 유사한 방식으로 활용할 수 있습니다.
HTML Tidy와 마찬가지로 CSSTidy도 명령줄 유틸리티이며 사용법이 매우 간단합니다.
다음은 CSSTidy로 CSS 파일을 최적화한 예시입니다.
Weblint — 가볍게 쓰는 HTML 검사기
Weblint는 고려해볼 만한 또 다른 HTML 최적화 유틸리티입니다. 다만 HTML 4.0 문서만 지원하기 때문에 HTML Tidy보다 기능이 약하고 호환성도 떨어집니다. Bluefish에 기본 포함되어 있으며, 일반적으로 Linux(배포판 저장소)에서만 이용할 수 있습니다.
맺음말
HTML과 CSS 정리 유틸리티는 아마추어든 프로 개발자든 모두에게 매우 유용한 도구입니다. 엄격한 국제 표준을 준수하는 고품질 콘텐츠를 만들고자 한다면 반드시 사용을 고려해 보세요.
이런 도구들은 더 잘 정돈된 출력물과 압축된 파일을 만들어 줄 뿐만 아니라, 웹 표준을 준수하도록 여러분의 사고방식과 작업 방식 자체를 바꿔 놓습니다. 웹 문서의 전반적인 품질과 일관성이 향상될 것이고, 독자들은 특정 브라우저나 해상도를 걱정할 필요 없이 어디서나 최상의 콘텐츠를 즐길 수 있게 됩니다.
웹 개발의 세계에 입문하려 하거나 막 첫걸음을 내딛고 있다면, 지금이야말로 HTML Tidy와 CSSTidy를 활용하기에 가장 좋은 시기입니다. 여러분의 작업이 더 즐거워질 뿐만 아니라, 거대한 코드 세계를 조금씩 더 나은 곳으로 만드는 데도 기여하게 됩니다. 작은 기여 하나하나가 분명 의미 있는 법이니까요.
그럼, 즐거운 코딩 되시길 바랍니다.