구글의 인기, IE의 위기 등 여러가지 이유가 맞물려서인지 어느새부턴가 "웹표준"이 중요한 이슈로 떠올랐다.
사실 국내환경에서 "웹표준"이라는 용어는 디자인,보안,개발방식 등등 여러가지 의미가 내포되어 혼용되고 있는 용어이다.

예를들어 디자인업계에선 w3g규약을 지키는 모질라계열 브라우저에서 잘 돌아가는것을 "웹표준"이라 하고,
보안업계에선 embed나 object tag로 ActiveX를 설치하거나 실행하지 않는것을 "웹표준"이라 하고,
[기획->디자인->개발] Flow로 흘러가는 기존 프로젝트 진행 방식이 디자인과 개발.. 즉 태그와 데이터가 분리되는 방식도 "웹표준"이라고들 부른다.

여기서 말하고 싶은 부분은 디자인과 개발방식에 대해서인데, 최근 진행중인 프로젝트에서 디자이너에게 받은 HTML은 상당히 놀랍고도 신기했다. 그 이유는 기존 중첩테이블 방식의 웹디자인 HTML이 아니라 CSS Class를 사용하여 모든 디자인을 css에서 처리하게 했다는 것이다. 굳이 "웹표준"이 아니더라도 개발과 디자인 분야가 서로 문제되는 교집합을 끊는다는점에서 데이터와 디자인의 분리는 상당히 좋은 시도였고 그만한 수준의 디자이너가 있다는 것도 놀라웠다.

뭐 주변 웹디들에게 CSS의 중요성을 수년전부터 설파했지만 사실 소귀에 경읽기 였고 그들은 CSS자체보다 "드림위버에서 지원하느냐 마느냐"가 더욱 중요했을 뿐이었던터라 그냥 개발자들의 영역이겠거니...했는데 요즘 "웹표준"이 이슈가 되어 디자이너들도 공부를 하고있다니 참 반가운 소식이다.

하지만 약간 더 욕심을 내보자면 HTML+CSS의 분리부분에서 아직도 HTML Tag구조가 깔끔하지 않은 부분이 많이 보인다. 예를들어 요즘 유행(?)하는듯한 <ul><li><dd><dt>등 List형태에 사용되는 태그를 이용한 레이아웃 꾸미기인데, 대체 이 방식으로 짜는것을 왜들그리 선호하는지 검색해 보니 아마도 대형포털의 HTML 소스를 보고 그렇게 한것으로 보인다.

뭐 그러한 HTML코딩 방법이 나쁘진 않다. 하지만 "적재적소"에 사용해야지 무조건적으로 사용하면 "해"가 될수 밖에 없다. 예를들어

• 항목
• 항목
• 항목

같은 들여쓰기형 리스트의 경우 원래 ul,li를 사용하는것이 바람직하다. 하지만 TABLE tag를 사용하면 안된다는 고정관념에 빠져 TABLE로 구현해야할 구조마저도 ul,li로 억지로 끼워맞추는것은 오히려 더 문제이다. Grid형식의 데이터 출력이 필요하다면 TABLE tag를 사용하는것이 훨씬 깔끔하며 구조적이다.

쇼핑몰의 상품을 출력하는 부분 (Column과 Row 디자인이 유동적)은 [열 개수가 정해진 가로 리스트](일명 Horizontal List)를 주로 쓰는데, 이런 경우는

<div class="list">
    <div>
        <span>상품사진</span>
        <span>상품명</span>
        <span>가격</span>
    </div>
    <div>
        <span>상품사진2</span>
        <span>상품명2</span>
        <span>가격2</span>
    </div>
</div>

이 더 논리적이고 구조적이다. div와 span같은 "무속성"태그를 사용하는것은 css의 활용도를 더욱 높이고 div와 span을 서로 구분해서 사용하는것은 단락구분이나 inline구분을 나누는 의미도 갖고 있기 때문이다. 또 "list" class의 width값만 조절해도 horisontal list를 vertical list로 만들기도 쉽다.

만약 은행사이트의 계좌내역을 출력하는 부분(Column이 고정적)일 경우는

<table>
   <tr>
       <td>10,000원</td>        <td>10,020원</td>

   </tr>
</table>

같은 TABLE 구조가 더 논리적이고 구조적일 것이다.

뭐 사실 웹표준에 대해 공부해본사람이면 알겠지만 HTML은 점점 없어지고 현재는 XML+XSLT로 변화하는 중간단계로서 XHTML이 대세인 상황으로 (XML보다 쉽다고 만든거긴 하지만..) 실제론 HTML와 XML Rule를 둘 다 지켜줘야 하는 언어라서 개인적으론 현재 유행하는 HTML과 CSS의 분리방식은 매우 까다롭기만 하다.

현재 욕심으론 디자이너들이 한단계 더 발전해서 HTML namespace를 이용해서 논리적 구조로 바꾸는것 (XML과 비슷하다.)도 해줬으면 좋겠지만, 사실 여기까지 해줄만한 수준이면 차라리 디자이너들이 XSLT를 마스터하는게 더 나을지도 모른다. (그게 궁극적으론 가장 지향해야할 방법이긴 하지만..)

하여간 현재 디자이너와 개발자의 업무방식처럼

개발자 : HTML좀 짤라주세요.
디자이너 : 이거 스타일 왜 안먹어요? 이거 디자인 왜 안나와요?

이런 대화좀 그만 오가고

개발자 : 데이터 뭐뭐 넘겨드려요?
디자이너 : 상품정보하고 공지사항 4개행만 던져주세요~

이렇게.. 데이터와 디자인이 완죠니 분리된 시대가 빨리 왔음 좋겠다...




참고로 초보 웹디들을 위해 좋은 사이트가 있는데,

http://html.nhndesign.com/

이 사이트에선 html과 style sheet의 올바른 사용법을 알기쉽게 설명하고 있어, 디자이너라면 필수로 봐뒀으면 하는 좋은 정보들이 많이 있다.