웹표준 그리고 HTML5 & CSS3

최근에 HTML5의 열풍이 심상치 않다.

모든 언론 매체에서 HTML5가 마치 새롭게 나온 웹 기술 처럼 소개하기도 한다.

하지만 HTML5는 기존 HTML 버전의 가장 진화된 버전일 뿐 그 이상도 그 이하도 아니다.

특히 HTML5는 기존 HTML 문법구조와 틀린 점이 새로운 태그가 도입되었다는 것이다.

물론 여러 기술적인 요소들을 대거 포함하였기 때문에 개발자들은 그쪽으로 더 많은 포커스를 둘 수 도 있다.

하지만 기술적인 관점에서 HTML5의 기능들은 현재로서도 충분히 구현 가능한 기술들이다.

다만, HTML5을 사용하게되면, 표준 기술이지만, 현재 구현 가능한 기술들은 표준 기술이 아니라, 어도비 플래시를 이용하거나, IE에서 Active-X 와 같은 기술을 사용해야만 구현가능하다는 차이점이 있다.

특히 Active-X로 도배된 한국의 웹 상황에서 HTML5의 등장은 개발자들이 비표준 기술에서 탈출 할 수 있는 돌파구가 될 수 있는 것이다. 하지만 마냥 HTML5을 기뻐할 수 없는것이 현재 한국에서 가장 많이 사용하는 브라우저들은 HTML5을 완벽하게 지원하지 못한다는 것이다. IE9 만 유일하게 HTML5의 일부 기능을 사용할 수 있는 것이기 때문이다. 

하지만 HTML5을 바로 적용할 수 있는 부분이 디자인적인 요소 즉 레이아웃 설계에서는 바로 사용가능하다는 것이다. 특히 HTML5에서 사용되는 <header> <nav> <article> <footer> <figure> 등 새롭게 도입된 구조적인 태그는 웹 문서를 보다 구조적으로 설계 가능하다는 것이다.

이전 버전의 HTML문서의 구조가 개발자 임의대로 구조를 잡았다면, HTML5에서는 태그로 각각의 요소를 구분할 수 있어, 보다 구조화된 문서를 개발 할 수 있다는데 의의를 찾을 수 있다는 것이다.

특히 CSS3는 현재 HTML5에만 사용하는 것이 아니라 XHTML 문서에서도 적용 가능하다.

CSS2의 주 기능이 레이아웃을 잡는데 중점을 두었다면, CSS3는 기존에 이미지를 이용한 기법을 대부분 대치 할 수 있는 엄청난 기능들이 포함되어 있다는 것이다. 예를 들어 box-shddow 라던가, text-shadow 기능, border-radius 같은 속성은 아주 간단하지만, 이전에는 jpg 이미지 등을 이용해서 백그라운드 이미지를 이용해서 조금은 편법적으로 만들었던 것을 한줄로 모든 것을 구현할 수 있다는 것에 있다.

특히 IE4에서 부터 사용되어 왔던, @font-face가 CSS3에 정식으로 포함됨으로 인해 이제 그래픽으로 font를 사용하는 수고를 덜 수 있게 된 점은 대단히 고무적인 현상이다.

특히 외국의 웹 사이트들은 거의 대부분 @font-face를 이용해 텍스트를 구현함으로써, 그래픽적인 요소를 사용하지 않더라도 사이트가 화려하게 보인다.

그렇기 때문에 한국에서도 HTML5의 기술적인 요소들은 현재까지도 학습을 할 만한 요소지만, HTML5을 웹 디자인으로 사용하는 것은 바로 적용 가능하기 때문에, 웹 디자이너들은 바로 HTML5와 CSS3을 적용해 웹 사이트를 만드는것을 고려해 봐야 할 것이다.