웹 표준 경진대회 참가 후기

CDK에서 주최하고 2008년 5월 1일부터 2008년 6월 1일까지 진행된 웹 표준 경진대회에 참석했습니다. 감사하게도 금상을 수상했음에도 불구하고 후기가 좀 늦었네요. 좀 게을러서 정리를 못하고 있다가 이제서야 정리해봅니다. 죄송합니다. ㅠ_ㅠ

대회에는 제가 참여하고 있는 하코사 강남스터디에서 3개의 조로 나누어 그 안에서 늘 긍정적이고 깜찍하신(ㅋㅋ) 비티님과 한 조로 참석하였습니다. 웹 표준에 많은 관심을 가진 디자이너이신 아트강님도 함께 참여하려고 했는데 개인적인 사정이 있으셔서 하차하시어 아쉬웠습니다.

각설하고…

참여 작품

디자인

……

상을 받았지만 많이 신경쓰지 못해 부끄러움과 아쉬움이 남는 부분입니다. 그냥 심플하게 만들었어요. (…)

마크업

다음의 것들에 신경을 써서 작성하였습니다.

각 페이지에 맞는 keywords, description 메타 정보를 제공
영문으로 표기하는 내용에 언어를 구분할 수 있는 마크업(xml:lang, lang 속성)을 부여
id, class 속성을 의미있는 단어로 구성.
라이센스 인식 마이크로포맷(microformat) – <a rel="license">…</a> 사용

다음은 심사결과 감점을 받은 내용들에 대한 변명(?)입니다. ㅋ

h2, h3 단계 부적절

텍스트 아닌 콘텐츠의 인식 페이지를 보면 페이지 좌측의 인식의 용이성이라는 지침명과 페이지 우측의 텍스트 아닌 콘텐츠의 인식이라는 항목명을 모두 h2 요소로 마크업 하였는데 이게 감점 요인이었던 것 같습니다.

제 의도는 이 두 가지를 지침과 항목이라는 상·하 개념이 아닌 내비게이션과 컨텐츠라는 개별적인 문서의 최상위 요소 – 사이트 이름 다음 최상위 요소 – 라고 보았던 것이고요.

저작권 표기에 address 요소 미사용

저작자와 관련된 정보라고 요약되는 address 요소, 저작권이 과연 저작자와 관련된 정보일까요? 무조건 아니라고 생각하진 않지만 그렇다라고 단정할 수는 없는 부분입니다.

저작자의 정보는 웹 페이지의 필수 구성 요소가 아니기 때문에 빠질 수 있습니다. 실제로 Web Standards Project, A List Apart 등의 웹 표준 관련 해외 대표 사이트들에는 address 요소가 사용되지 않았으며 저작권 표기에 address 요소를 사용하지 않은 모습을 보여주고 있습니다.

rel 속성은 a 요소에 사용해야 한다.

이건 확실히 제 실수입니다. 라이센스 인식 마이크로포맷을 실수로 a 요소가 아닌 그 부모 요소인 p 요소에 넣었었답니다. -_-; 덕택에 Markup Validation 오류도 있었군요. ㅋ

CSS

기본 스타일시트와 더불어 브라우저의 가로 길이가 좁은 경우를 위한 스타일시트를 포함하여 자바스크립트 등을 이용하여 스타일시트를 동적으로 포함하게끔 하려고 하였으나 시간 관계 상 대체 스타일시트(alternate stylesheet)로만 포함하는 것으로 마쳤습니다.
wrapper div, li 요소의 첫번째 자식 요소를 위한 클래스명(IE6에서 적용되지 않는 first-child의 대체)을 제외하고 표현을 위한 마크업 – id, class 속성 포함 – 이 없도록 하였습니다.
프린트용 스타일시트를 별도로 제작하였습니다.
min-width 속성을 지원하지 않는 IE6을 위해 Conditional Comments를 통해 min-width와 같은 동작을 하는 IE 전용 속성(expression)을 사용하였습니다.

이 부분에서 CSS Hack으로 인한 감점이 있었는데 기본 CSS로 구현할 수 없는 부분에 사용된 핵에 대한 감점이 타당한가 하는 의문이 들었습니다. 이 문제를 자바스크립트나 표현을 위한 마크업 등으로 우회하여 해결할 수는 있지만 CSS Hack을 사용한 경우와 크게 다르지 않다는 생각입니다.
로고 부분에 IR을 사용하였습니다. 여기에 또 표현을 위한 마크업이 들어갔네요. ^^;

사용한 방법은 Gilder/Levin Method라고 하는데 이미지가 로드 되지 않았을 경우를 고려한 방법입니다. 그런데 이미지가 로드되지 않는 상황을 고려하지 않았다는 감점 항목이 있었어요. ㅠ_ㅠ 물론 텍스트 확대·축소 시 텍스트 영역을 온전하게 확보하지 못한다는 단점이 있긴 합니다. 그래서 이 정도로… ㅋㅋ