훈님이 서브노트북 MSI 윈드(wind)가 너무 좋다고 그래서 좀 알아보려고 옥션에 들어갔다. 물론 파이어 폭스로...

아, 진짜 이렇게 만들기도 쉬운일이 아니다. CSS 깨지는 거야 그렇다 치고, 왜 스크립트가 줄줄 나오는지 궁금해서 코드를 열어봤다.

원인은 잘못된 주석구문 때문이었다. HTML의 주석 문법은 아래와 같이 표현된다.

<!-- HTML 주석 -->

여기서 주의할 점은 1) 앞쪽과 뒤쪽의 대쉬가 두개만 있다는 것과 2) 대쉬와 주석문 사이에 공백이 한칸씩 있다는 것, 그리고 3) 주석문 안에는 연속된 대쉬가 없어야 한다는 것이다.

옥션의 HTML 코드에는 아래과 같이 뒤쪽 구문의 대쉬를 길게 늘여쓴 것을 볼 수 있다. 아마도 눈에 잘 보이게 하려고 넣은 것 같은데 이것 때문에 주석 닫는 구문이 오류가 나서 뒷부분이 다 주석으로 처리된 것이다.

		<!-- 확대보기 레이어 END ---------------------------------------------------->

		<!-- 각종 레이어 모음 END --------------------------------------------------->
<script src="http://script.auction.co.kr/common/rvi_main.js" type="text/javascript"></script>
</div><!-- body //-->
<hr>
		<!-- Auction Footer START --------------------------------------------------->
		<script language="JavaScript" src="http://script.auction.co.kr/common/footer.js"></script>
		<!-- Auction Footer END ----------------------------------------------------->

비단 옥션 뿐만 아니라 보통 HTML 주석 가지고 그림을 그리는 사람들을 많이 볼 수 있다. 서버쪽에서는 주석이 큰 부담이 안될지 몰라도 클라이언트 쪽에서는 이것들이 다 트래픽 잡아먹는 낭비이다.

"HTML 문법 별거 있냐", "문법보다는 크로스 브라우징이나 접근성이 더 중요하다." 라고 하는 사람들도 있는데 현실적으로 그렇게 생각 할 수도 있지만 그렇다고 문법을 무시하면 안된다. 문법은 습관이고, 이런 사소한 것도 주의깊게 잘 알아두고 지켜야 나중에 원인을 알 수 없는 복잡한 문제를 해결할 수 있다.

옥션, 코드는 깔끔한듯 하면서도 지저분하고, HTML은 잘된 듯 하면서도 다 깨지고, CSS는 잘된 듯 하면서도 엄청나게 핵을 남발했고...관리의 중요성을 느낄 수 있게 해주는 사이트다. 첫술에 배부를 수 없듯이, 계속 노하우를 쌓아가서 기어가는 지마켓보다 더 좋은 사이트가 됐으면 좋겠다.