웹2.0 시대가 되면서 기존의 table 방식이 아닌, div를 이용해서 웹표준화 작업을 하는곳이 늘어나고 있습니다. 이는 물론 디자이너들에게는 CSS라는 복병의 공부거리가 생긴 중대사중에 하나이기도 합니다만, 오히려 웹표준방식에 익숙해지면 작업시간도 훨씬 단축되고 웹사이트 디자인을 관리하기가 한결 수월해짐을 확실히 체감할 수 있습니다.

그러면 도대체 디자인에 있어서 '웹표준'이란 무엇인지 제가 알고 있는 상식선에서 간단히 정보를 공유하고자 합니다.

웹표준은 다른 기기나 장치에서 웹페이지를 읽고 이용하는데 무리가 없도록 해줍니다.
기존에는 디자인을 할 때, '1024 모니터에만 맞추면 된다'는 씩으로 디자인 작업이 진행되었지만, 웹2.0 시대가 되면서 웹페이는 더 이상 컴퓨터안의 것 만 아닌것이 되었습니다. 제작한 웹페이지를 휴대폰에서도 읽을 수 있어야하고 PDA나 다른 컨버전스 기기에서도 읽을 수 있게 제작해야 할 필요성이 대두된 것 입니다. 이를 다른말로 '웹접근성'을 높인다는 말로도 이용되곤 하는데요. 그럼 도대체 이 커다란 해상도의 홈페이지를 어떻게 핸드폰에서 이용할 수 있게 하는건가? 라는 의문을 던질 수 있을 것입니다. 바로 CSS를 끊으면 핸드폰에서도 이용가능한 화면이 나온다는 것입니다.
(물론 따로 모바일 서비스를 준비한다면 이야기는 달라지지만요^^;)

국내 포털중에서는 웹표준 디자인 잘 되어 있는 곳으로 '다음'을 추천합니다.
다음 메인페이지를 CSS를 끈 상태에서 보면 완벽하게 xHTML 구조화가 되어있으며 디자인은 CSS로 분리가 깔끔하게 되어있습니다. 군더더기 이미지들은 사라지고 핸드폰에서 읽기 좋게 세로로 데이터가 나열됩니다. DIV의 기본 속성이 세로 정렬이기 때문에 가능한 것 입니다.

그리고 웹표준으로 웹페이지를 제작할 때 주의할 점은 바로 모든 것에 '의미'가 있다는 것입니다. 무엇인고하니, 과거에는 조각이미지도 쓰고, 웹디자이너들은 단지 웹페이지를 보여주는데 그치는 디자인을 했지만, 이제는 그렇게하면 안 된다는 것입니다. 모든 코딩과 디자인 요소하나하나에 의미를 부여해야 한다는 것입니다.

예를들면 과거 방식으로 홈페이지를 제작할 경우 대다수 디자이너들이 웹사이트 제목에 '통자'이미지를 사용할 것입니다. 이것은 지금 생각해보면 바보같은 짓으로, 브라우저는 음성장치에서 그 이미지를 읽어 줄 수도 없을 뿐만 아니라, 검색엔진도 그 페이지가 어떤 페이지인지 인식하지 못합니다. 검색결과에서 제외되는 것이죠.

반면 의미를 부여한 웹표준 코딩에 의한 디자인은 웹페이지 제목을 H1으로 지정하고 이를 CSS를 통하여 이미지로 치환합니다. 시각장애인을 위한 음성장치는 이를 읽어주고, 검색엔진에서도 페이지의 의미를 확실하게 이해하여 검색결과 상위로 올려줍니다.

앞으로도 웹페이지나 웹어플리케이션의 이용은 PC뿐 아니라 우리가 가지고 다닐 수 있는 컨버전스 기기나, 여러가지 전자제품에서 활용될 것입니다. 또한 모든것은 더욱더 의미가 부여되며, 시각장애인과 같은 소수자를 위한 배려도 반드시 이루어져야 할 것입니다. 이미 해외에서는 공공기관이나 유명포털에서 웹표준을 지키지 않으면 서비스 운영자는 철창까지 간다고 하니까요, 곧 우리나라도 그렇게 될지 모르겠습니다.

웹사이트를 개발하거나 디자인하는 분들이라면, 웹표준의 의미에 대해서 심도있게 공부해보고 고민할 수 있는 시간이 필요할 것 같습니다. 긴 글 읽어주셔서 감사합니다.