웹표준을 접하고 웹표준을 지켜서 개발해보려고 하는 사람들과 대화를 하다보면 항상 듣게 되는 말이 있습니다.

저역시도 처음에 가장 힘들었던 것이 바로 어떤 상황에 어떤 마크업을 하느냐였습니다.
이걸 dt로 해야하나? heading 몇으로 해야하나? fieldset을 넣는게 맞나? label은 항상 해야하나?….

늘 그런 고민으로 지우고 다시 하고, 또 생각이 바뀌니까 또 지우고 다시 하고.. 이런 상황이 계속 반복되었습니다. 마크업한다는 것이 얼마나 어려운가에 대한 절망감으로 스스로 더욱 단련되어야 한다고 결심하곤 했습니다.

시간이 지나 Markup에 자신이 생기게 되었지만, 늘 2% 부족하다는 느낌을 지울수가 없었습니다.

그러던 중 이 고민에서 해방시켜줄 실마리를 찾게 되었습니다.
사실 처음 웹표준을 접하는 사람들은 누구나 비슷한 내용을 들어봤었을 원론적인 얘기였습니다. 하지만, 처음에 들었던 것과 달리 그 글은 마크업의 실마리를 제공해주었습니다.

개인차가 있겠지만, Semantic Markup에 주된 관심사를 가진 저는 SEO를 다루는 원문의 한 문단일 뿐인 이 부분을 읽고, 지하철에서 전율을 느끼고 머리가 뻥 뚫리는 기분을 느꼈습니다.

본질적인 Markup

웹으로 연결된 수많은 사람들에게 자신(우리)의 생각을 표현하며, 그 정보를 모든(처음부터 ‘모든’은 아니었지만) 사람들과 공유하고자 하는 ‘마음’에서 시작된 웹은 나날이 발전/확장되어 이제는 정보공유 그 이상의 의미를 가지게 되었습니다.
그 이상의 의미때문에 저와 같은 웹관련 업종에 종사하는 사람들이 많이 생기게 되었으니 이전 시기에 웹을 발전시켰던 분들께 우선 감사부터 드리겠습니다.
하지만, 발전이라는 것이 늘 그렇듯 ‘초심’을 잃어가고, ‘변질(왜곡)’되어가는건 어쩔 수 없나봅니다.

초기의 웹은 아름답고 세련된 디자인으로 콘텐츠를 전달하는 것에는 미흡했습니다. 하지만, 전달하고자하는 콘텐츠에 담긴 ‘마음’만은 정확히 표현했습니다.
화면을 볼 수 있는 사람이건, 볼 수 없는 사람이건, 들을 수 있는 사람이건, 들을 수 없는 사람이건 웹은 모든이에게 동등한 ‘마음’을 전달하는 도구였습니다.

하지만, 현재의 웹전반을 보고 있노라면 ‘마음’이 없다는 생각이 듭니다. 현재의 웹은 ‘마음’보다는 ‘비쥬얼, 사업성, 사용성’ 등에만 매몰되어 있는 것 같습니다.

디자인은 웹 디자이너가 콘텐츠를 어떻게 보여줄지에 대한 오랜 숙고를 통해 만들어진 비쥬얼 언어입니다. 디자인과 마크업을 병행하는 대다수의 웹 디자이너와 웹 퍼블리셔들은 이 비쥬얼 언어를 한번더 마크업 언어 즉, HTML로 표현하게 됩니다.

그런데, 여기서 웹 디자이너(웹 퍼블리셔)들은 뿌리깊은 관성에 빠지게 됩니다.
바로 다수의 사용자(비장애인)들이 많이 사용하는 브라우저(IE)에서 제대로 보여지기만(비쥬얼) 하면 된다는 개발방식입니다. 이런 개발방식으로 인해 중첩된 table(div)을 사용하게 되고, 각 태그들이 의미보다는 표현을 위해 사용되게 됩니다. 그 결과 웹은 스스로 일부 사용자/사용환경에서의 접근을 제한하고, 이들에게 소외감을 안겨주었습니다.

이런 잘못된 생각의 근원은 바로 HTML을 ‘배치’의 개념으로 배우고 이해했기 때문입니다. 디자인이 디자이너의 ‘마음’을 담은 섬세한 언어라면 HTML도 마찬가지로 ‘마음’을 담는 언어여야 합니다. ‘배치’는 CSS를 통해 완벽하게 표현될 수 있습니다.

보여지는 디자인이 전부인 사람들도 있지만, 그 디자인보다 HTML로 소통하는 사람(환경)도 있다는 것을 깨달아야 합니다. HTML로 소통하는 사람(환경)에게 ‘마음’이 담기지 않은 HTML은 이해하고 해석하기가 쉽지 않습니다.

그렇기 때문에, HTML을 ‘배치’의 수단으로 사용할 것이 아니라 소통의 수단으로 사용해야합니다. 즉, 본질적인 Markup은 ‘마음’을 담아내는 것입니다.

마음을 담은 Markup

위에서 언급했듯 웹 디자이너는 우선 디자인을 통해 사용자들과 소통합니다.
그리고, 웹 디자이너(웹 퍼블리셔)는 HTML로도 소통해야합니다.
이때, 두 가지의 소통은 동등해야 합니다.
쉽게 말해 디자인에서 강조됐던 타이틀은 HTML에서도 강조된 타이틀이어야 합니다.

이건 비단 웹표준을 지키는 의미뿐만 아니라, 웹접근성 향상과 SEO(Search Engine Optimizing)와도 밀접한 관계가 있습니다.
‘마음’을 담아 소통하는 Markup은 이 3가지를 한번에 얻을 수 있는 최적의 방법입니다.
제작자들이 ‘마음’을 담기만 한다면, 일반 사용자와 소외 계층 사용자(장애인/노인) 뿐만 아니라 기계에게까지 ‘마음’이 전달되게 됩니다.

전 웹 디자이너/웹 퍼블리셔 분들께 제가 알고 있는 가장 쉬운 Markup 방법을 알려드리고 싶습니다.