[리치클라이언트기술] 웹표준과 XHTML+CSS

Written by 김영일(Youngil Kim), C#.NET Developer

이전에 Ajax에 대해서 정의를 할 때, XHTML과 CSS를 사용하는 표준규격의 프리젠테이션이라고 말한 것을 기억하실 겁니다. 그때는 이부분에 대해서 크게 설명하지 않아 이번에 집중적으로 알려드리겠습니다. 그러나, 이번 칼럼에서는 Ajax설명당시 미진한 부분을 보충하기 위한 목적은 아닙니다. HTML/XHTML과 CSS를 사용하는 웹 표준에 대해서 이야기해볼까 합니다.

일반적으로 웹표준이라는 말을 자주 듣지만, 구체적으로 어떤 것이고 HTML/XHTML과 CSS는 어떤 연관이 있는지를 알려드리겠습니다.

- 웹 표준이라는 것은 웹을 표준화하는 것인가?

Ajax, XML, Javascript등 지금까지 앞서 알려드렸던 기술용어는 모르는 사람은 이름만 봐서는 이해하기 힘들었지만 웹표준이라는 말은 한번들으면 바로 이해가 될 정도로 대부분 압니다.

그러나, 웹표준은 웹을 표준화하는 것이 무엇인데 웹은 원래 HTML등으로 표준화되고 있는 것같고 어쨰 이제되어서 웹 표준이 나온 것인지를 궁금해 하실 수 있습니다. 확실히 그런 의문을 가지는 것은 당연합니다.

우선 웹을 표준화한다라는 것이 무슨일을 하는 것인지를 알아보도록 합시다.

* 과거에는 표준화되어 있지 않았다.

2000년대초까지 웹에 관련된 기술은 꽤 적당하게 사용되었습니다. HTML기술은 같아도 웹브라우저에 따라 차이가 나거나 CSS를 지원하지 않는등 웹페이지를 만드는 사람들에게 대단한 일이 되어버렸습니다. 이런 상황에서 1990년후반 Netspace사의 Netscape Navigator와 Microsoft사의 Internet Explorer가 어느쪽에서 많은 사용자를 확보하려고 치열하게 경쟁을 하였고 이를 "1차 브라우저 전쟁"이라고 말합니다.

웹에 관련된 기술은 W3C라는 표준화단체가 있지만, 두 브라우저모두 서로의 점유율을 높이기 위해 W3C를 무시하고 HTML을 확장해 나갔습니다. 그 결과 HTML스펙이 그대로 표준화되지 못하고 씹혀버리게되었습니다.

* 웹 표준의 움직임

1차 브라우저 전쟁은 Internet Explorer의 승리로 끝났습니다. 그러나, IE의 보안문제가 발견되고 최근 보안적으로도 IE보다 안전하고 RSS리더나 탭브라우저기능을 지원하고 웹 표준을 기반으로 하는 브라우저인 Firefox가 나오면서 다시 브라우저간의 전쟁은 시작되었습니다. 이를 "2차 브라우저 전쟁"이라고 말합니다.

이 전쟁에서는 W3C가 권고하는 웹표준에 얼마나 준하여 있냐는 것입니다. IE 6은 그다지 웹 표준에 맞추어져 있지 않아 Firefox가 IE6에 비해 많은 점수를 받았습니다.

현재 80%정도는 IE가 점유하고 있지만 유럽등지에서는 Firefox 사용자가 급격히 늘어나고 있는 실정입니다.

* 모두가 사용할 수 있는 Barrier free환경을 목표로

웹 표준이 목표로 하는 것은 사용자가 평등하게 정보를 얻을 수 있는 환경을 만드는것입니다. 이는 IE6에서는 볼수 있지만 Firefox에서 볼 수 없는 문제를 없애고 시각장애인, 청각장애자, 노인등 정상인과 같은 정보를 얻을 수 있도록 하는 것이 목표로 하고 있습니다.

예로 웹을 읽어주는 음성브라우저(시각장애자용)을 이용하고 있는 사람에 대해서도 제대로 된 정보가 전달되도록 음성이나 이미지에는 그것이 무엇을지를 나타내는 것처럼 시력이 나쁜 사람들에게도 읽기 편한 폰트나 색상으로 변경할 수 있는 이런 상태를 말합니다.

이러한 쉬운 접근성을 Web Accessibility라고 말합니다. GOM은 이를 좀더 쉽게 풀이하기 위해 Barrier Free라고 표현해보았습니다. 장벽이 없는 자유라고 할까요?
사실 지금까지의 HTML에는 상당히 이런 배려가 된 사이트구축이 어려웠습니다.  그래서 HTML/XHTML과 CSS를 사용하는 웹표준이 나오게 되었습니다.

* HTML만 사용하는 웹페이지

HTML만 사용하는 웹페이지는 문장구조와 디자인을 한개의 HTML문자으로 나타냅니다. 1개의 HTML로 2개의 기능을 표현할 수 있기 때문에 단순하게 보면 편리히지만 조심해야할 것도 있습니다.

예로, 열람용 웹페이지와 인쇄용 웹페이지가 필요할때, 같은 문장에서도 2개의 페이지가 필요하게 됩니다. 일반사용자와 다른 사용자들을 위해 보기 쉬운 색상으로 디자인하거나 시력이 약한 사람들을 위한 문자가 크게 보여지는 페이지를 만들려고 한다면 전용웹페이지를 만들지 않으면 안됩니다.

거기에 500페이지분량의 웹사이트를 구축한다면 일반페이지와 인쇄용, 보기 쉬운 색상, 큰문자용 페이지를 20000페이지를 준비해야됩니다. 페이지를 만드는 시간등 서버에 저장할 공간도 고려하지 않으면 안됩니다.

또한, HTML만 웹페이지를 만들게 되면 화면에 보여주는 디자인적인 요소가 중시되어 문장 구조를 신경쓰지 못하는 경우도 있습니다.

예로 문장안에 주제를 굵은글꼴에 파란색으로 보여주고자 할때,

<b><font size="5" color="blue">웹 표준이란?</font></b>

이런 기술은 다양한 예도 많이 있었습니다. 굵은글꼴에 파란색으로 보여지지만 이것은 디자인적인 요소를 나타내고 있는 것만으로 문장의 구조를 전혀 보여지고 있지 않습니다. 겉모양은 이상이 없지만 문제가 발생합니다.

리뉴얼등을 할경우 주제의 디자인을 빨강색으로 바꾸고 본문과 같은 글꼴크기로 수정한다면 모든 태그를 수정하지 않으면 안됩니다. 그리고 문장구조가 불분명하기 때문에 웹리더를 사용하는 사용자들에게는 이게 주제인지 본문인지를 알수가 없습니다.

* HTML/XHTML+CSS를 사용한 웹페이지

문장구조와 디자인을 분리하자는 움직임이 나오면서 문장구조는 HTML/XHTML에 디자인은 CSS에 할당하게 됩니다. 앞서 이야기한 주제를 예로 든다면,

<h1> 웹 표준이란? </h1>

HTML/XHTML은 문장구조만 나타내기 때문에 디자인을 담당하는 CSS에 글꼴을 굵게 표현하고 크기는 5사이즈에 파랑색으로 나타내도록 설정해주면 됩니다. 또한 인쇄용 및 장애자용 CSS를 준비해두면 어떤 상황에도 맞는 디자인으로 변경할 수 있습니다.

또한, 리뉴얼등에 의해 디자인을 변경하고 싶은 경우에는 CSS설정만 변경하면 모든 문장이 자동적으로 적용됩니다. 문자의 구조와 디자인이 분리되어 상당히 여러가지가 편리해졌습니다.

- HTML과 XHTML은 무엇이 다를까요?

HTML과 XHTML은 이름만 보면 X자가 붙었고 안붙었다는 차이만 보입니다. XHTML의 약자를 풀어보면 eXtensible HyperText Markup Language로 확장성을 가졌다는 의미입니다. 이는 XML과도 비슷한 느낌이죠?

* XML과 XHTML?

XML과 XHTML은 깊은 관계입니다. XHTML을 한마디로 표현하면 XML로 재정으된 HTML이라고 말합니다. HTML에는 몇가지 문제점이 있었는데 언어 스펙이 복잡하고 무척 커서 XML데이터와의 연동이 어렵고 확장성이 부족하다는 것이 문제점으로 대두되었습니다. 그래서 확장성을 가진 XHTML이 나오게 된 것입니다.

* 구체적인 차이점

HTML을 기반으로 만들어졌기 때문에 HTML과 XHTML은 매우 비슷하고 다른 점도 많습니다. XHTML은 XML을 기반으로 정의되어서 문법기반이 HTML에 비해 좀 어렵게 되어 있습니다. 또한, XHTML 1.1에서는 디자인을 지정하는 태그가 없어져서 문장구조를 나타내는 언어로 발전되고 있습니다.

그외 종료태그를 생략할 수 없는 것, 요소명과 속성은 소문자로 표기, 식별자에는 id속성 사용, <br>이나 <img>라는 종료태그가 없는 것도 종료태그 및 특수 조작을 선언하는 차이점이 있습니다.

XHTML에 대한 규격은 W3C에서 관리하고 발표하기 떄문에 관심이 있는 분들은 W3C사이트를 방문해보시기 바랍니다.

- 디자인 담당 CSS는?

디자인을 담당하는 CSS는 Cascading Style Sheets라는 약어로 cascade처리하는 스타일시트라는 의미를 가졌습니다. cascade처리라는 것은 웹브라우저 및 사용자가 지정한 스타일시트의 어떤것을 우선적으로 사용할지를 결정하는 것을 말하며, 스타일시트라는 것은 글꼴크기, 색등을 정이라는 디자인 모형을 말합니다.

CSS는 디자인을 표현하는 것으로 텍스트문장으로 기술합니다.

실렉터 {속성:값}

실렉터라는 것은 본문 및 인용이라는 스타일을 적용시킬 대상을 말합니다. 주제를 표현하는 <h1>을 파란색으로 지정하고 싶은 경우에는

h1 {color:blue;}

라고 작성합니다. HTML만의 디자인이면 문자크기, 색상등을 일일이 수정하지 않으면 안되는데 CSS를 사용하면 디자인의 리뉴얼시 CSS의 데이터만 고치면 되기 때문에 상당히 사용하기 편리합니다.

- 앞으로 XHTML과 CSS에 집중하자!

Web Accessibility가 기반으로 하는 기술은 XHTML과 CSS입니다. 옛날에는 웹사이트를 제작하면 HTML태그를 편집기 도구에서 작성해서 FTP로 웹서버에 올리는 방법이 대부분이었지만 지금은 블로그와 같은 좋은 기능등을 가진 도구들이 많아 HTML을 몰라도 웹사이트를 구성하기 편리합니다. 또한 HTML지식없이도 간단하게 웹사이트를 하나 소유할 수 있는 시대가 되었습니다. 그러나, 블로그도 기본이 되는 기술은 HTML,CSS이고 앞서 말한것처럼 Ajax와도 깊은 연관성을 가지고 있습니다.

XHTML과 CSS는 나날이 확장해가고 있지만 표면적으로 보이고 있지 않지만 XHTML과 CSS에 대해서 더많은 관심을 가져야할 시기인것같습니다.

[출처] [리치클라이언트기술]웹표준과 XHTML+CSS|작성자 곰보더