2-1. 웹 표준이란?

1. 웹 표준(Web Standards)이란?
 웹 표준을 어떻게 정의할 수 있을까요? Wikipedia에서 "World wide Web의 측면을 서술하고 정의하는 공식 표준이나 기술 규격을 가르키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다."라고 정의하고 있습니다. 웹 사이트를 개발할 때에는 HTML, XML, CSS, JAVASCRIPT 등 여러 가지 언어를 사용하게 되는데, 미리 정의된 규칙과 규격에 맞춰서 만든다면 그것이 웹 표준이라고 볼 수 있겠습니다. ISO에서 제정한 품질경영시스템에 관한 국제규격 ISO9001이란 것과 같이 웹 표준이란 것도 "웹 페이지 저작 도구와 기술에 대한 규격"으로 볼 수 있습니다. 웹 표준을 정의하는 단체는 대표적으로 W3C(World Wide Web Consortium)이 있으며, ISO, IETD, IANA, ECMA, OASIS 등의 단체들이 관여하고 있습니다.

 

2. 웹 표준이 왜 중요한가?
 웹이 아니더라도 표준을 지킨다는 것은 유리한 점이 많습니다. 웹 저작에 있어서 웹 표준을 지킨다면 어떤 점이 이로울까요? 일단 관리 측면에서 유리한 점이 많습니다. 여러 가지 언어로 만들어진 복잡한 웹 페이지가 페계적인 가이드 라인에따라 만들어졌다면 웹 개발자 누구라도 이해하기 쉡겠지만, 자신만 알 수 있는 기술방식이라면 전문가라도 해당 웹 페이지를 이해하는 데에 어려움이 있을 것입니다. 알기 힘든 웹 페이지는 만든 저작자만이 수정해야 하는 난처한 상황을 만들고 마는 것입니다. 최근에는 데스크탑을 제외하고도 다양한 디바이이스가 있다는 점 역시 주의 깊게 살펴볼 일입니다. 이런 디바이스들은 대부분 웹페이지를 표시하면서도 저마다 다른 인터페이스와 해상도를 가지고 있으며, 각각의 디바이스에 최적화된 화면을 만드는 데에도 웹 표준은 중요한 이슈가 됩니다.

 

 웹 표준의 또 다른 장점은 웹 접근성이 향상된다는 점입니다. 우리는 그 동안 웹 페이지를 만들 때 이미지나 동영상, 혹은 플래쉬 미디어의 삽입을 적극적으로 활용하면서도 정작 웹 표준은 중요하게 생각하지 않습니다. 때문에 시각장애인이나 저시력자들은 해당 컨텐츠에 접근할 수 가 없으며, 그 내용을 알기가 어려웠습니다. 물론 웹 표준과 웹 접근성이 같은 말은 아니지만 웹 표준을 잘 지키는 것만으로도 웹 접근성이 충분히 향상될 수 있습니다.

 

 또한 웹 광고에 관심이 있다면 SEO(Search Engine Optimization)를  들어보셨을 것입니다. 이른바 '검색엔진 최적화'라는 것인데, 검색엔진들이 사용하는 정보수집용 로봇인 크롤러(Crawler)는 HTML의 소스를 거의 있는 그대로 해석하게 됩니다. 이때 웹 표준에 맞춰 적절하게 구조화되고 깨끗하게 정리된 HTML소스라면 크롤러에 제대로 검색되지만, 그 반대의 경우에는 검색이 잘 안 될 수 있습니다. 이를 위한 가령 "웹 문서를 만들 때 <title>태그를 비우면 안되고 그 내용은 본문 중 가장 중요한 제목이 들어가야 한다: 등의 규격이 웹 표준이며 이는 당연히 SEO의 측면에서도 가장 중요한 이슈가 됩니다.

 

 웹 표준의 또 다른 장점이자 덕목은 호환성(상/하위) 및 상호운용성이 보장된다는 것입니다. 아무리 잘 만든 웹 페이지라 해도 오래되었거나 최신의 컴퓨터에서 제대로 동작하지 않으면 그만큼 피곤한 일도 없겠죠? 모든 사용자들이 항상 같은 환경에서 웹에 접근하는 것이 아니며 웹 기술은 항상 변화한다는 점 또한 중요한 부분입니다. 웹 표준은 이런 다소 복잡한 환경에서도 어느 정도의 호환성을 보장해 줍니다.

 

3. 웹 표준으로 마크업하기
 웹을 개발하는 데에는 HTML, XML, CSS, JAVSCRIPT 등 여러 가지 언어가 복합적으로 쓰이게 됩니다. 웹 표준으로 마크업하는데 있어서 중요한 원칙은 이런 언어들을 구조언어와 표현언어 그리고 동작언어로 구분하여 사용하는 것입니다.

구조언어 - HTML, XHTML, XML, SVG 등 표현언어 - CSS, XSL 등 동작언어 - JAVASCRIPT, Ecmascript 등

 

3-1. 마크업 언어와 표현언허를 섞어서 사용하지 않아야 합니다.
 요즘은 아래와 같은 코드를 사용하지 않지만 오래된 웹 페이지에서 종종 볼 수 있는 코드입니다.

<font face="verdana" size="2">앙큼한유채</font>

 

 마크업 작성 시에는 표현을 위한 요소를 사용하지 말아야 합니다.

<p>앙큼한유채</p>

 

 마크업이 다 되었다면, 표현에 관한 부분을 CSS 작성법으로 분리하여 작성합니다.

<style type="text/css">  p{font-family: verdana; font-size: 12px;} </style>

3-2. 마크업 요소와 스크립트(동작언어)를 분리해야 합니다.
 아래의 코드를 보면 마크업 요소인 <p>태그 안에 스크립트를 함께 사용했군요.

<p onclick="window.open('new.html', 'newwin', 'width=400, height=500')">앙큼한 유채</p>

 우선 요소 내에는 자바스크립트 코드가 없도록 분리합니다. "onclick'은 자바스크립트의 이벤트 핸들러입니다.

<p><a href="new.html" class="newwin">앙큼한유채</a></p>

 이후에 자바스크립트에서 해당 요소를 찾아서 적용되도록 작성합니다.

<script type="text/javascript" src="http://code.jqurey.com/jqurey-1.9.1.min.js"></script> <script type="text/javascript">  $(function() {   var addFunction = $(".newwin").attr("href");   $(".newwin").click(function(){    window.open(add,'','width=400, height=600');    return false;   });  }) </script>

 이전 코드와 비교해 보면, 따로 작성된 자바스크립트가 복잡해 보입니다. 하지만 이런 식으로 HTML 요소로부터 분리된 자바스크립트는 수정 작업이 용이할 뿐만 아니라 자바스크립트가 제대로 동작되지 않는 경우라도 분리시켜 둔 덕분에 마크업의 링크 속성은 동작이 잘됩니다.