HTML 문법 검사를 대수롭지않게 생각하는 사람들이 놀라울 정도로 많다. 한때의 유행이었다느니 실제로 결과물이 깨지는 것과 무관하다느니 크로스 브라우징이 더 중요하다느니 하는 말들을 많이 듣는다. 잘못된 생각이라고 단정지을 수는 없지만 나는 이러한 생각들과는 다르게 HTML 문법 검사, CSS 문법 검사가 아주 중요하다고 생각한다. 그리고 문법 검사의 결과가 녹색이냐 빨간색이냐 보다 문법을 검사하는 과정 자체가 더 큰 의미를 가지고 있다고 생각한다. 녹색인 결과가 나오지는 않아도 지금 문법에 부합하지 않는 문제가 있다는 것 정도는 알고 있어야 한다고 생각한다. 그리고 그 숫자를 최소한으로 유지하려고 해야 문법 검사를 통해서 도움을 얻을 수 있을 것이다.

최근 진행한 프로젝트에서 마이크로 포맷을 적용하는 이슈가 있었다. 기획에서 적용해야 할 부분과 예시 구문들이 MS 워드 파일로 넘어왔다. 그 MS 워드 파일 안에 작업할 내용들의 대부분이 정의되어 있었기 때문에 별 고민없이 복사해서 사이트의 적절한 부분에 적용하고 사이트를 런칭했다. 프로젝트 도중에는 템플릿 엔진 에디터에 문제가 있어서 HTML 문법 검사를 충실히 진행하지 못하고 있었는데 뒤늦게 런칭 후에 문법 검사를 해보니 전혀 예상치 못했던 문제가 발견됐다.

<span class=” hreview-aggregate”>
	<span class=”rating”><span class="value-title" title="5"></span></span>
	<span class=”count”><span class="value-title" title="86"></span></span>
	<span class=”pricerange”><span class="value-title" title=""></span></span>
</span>
<span class=”geo”>
	<span class=”latitude”><span class="value-title" title="126.xxx"></span></span>
	<span class=”longitude”><span class="value-title" title="37.xxx"></span></span>
</span>

오류가 보이는가? 무려 14곳에 오류가 있다. 서체에 따라서 문제가 쉽게 보일 수도 있고 안 보일 수도 있다. 자세히 보면 속성 값을 감싸는 따옴표가 잘 못 들어가 있다는 것을 알 수 있다. 우리의 친절한 MS 워드께서 열고 닫는 따옴표를 이쁜 것으로 바꿔주면서 HTML 구문상에서는 인식할 수 없는 따옴표로 바꿔주신 것이다. 친절하게 공백도 넣어주셨다.

교훈 1) 코딩 서체 선택은 정말 중요하다. 교훈 2) 코딩용 에디터와 문서작성용 워드프로세서는 정말 다르다. MS 워드나 MS 파워포인트에 있는 내용을 직접 사용해야 할 때에는 확인이 필요하다. 교훈 3) HTML 문법 검사는 정말 중요하다. 귀찮아서, 이미 런칭했다고 문법 검사를 하지 않았다면 저런 따옴표때문에 발생하는 오류는 쉽게 찾을 수 없었을 것이다. 아마 왜 제대로 적용되지 않고 있는지 파악하기 위해서 엄청난 삽질을 했을 것이다.

기본에 충실하자.