http://www.cssbeauty.com/gallery/


뭐...디자인 자체도 그렇지만 소스를 보면 구조적 부분도 신경을 많이 쓴...

오래된 이야기이지만 1997년에 타이포그래퍼 전문가 데이빗 시겔은 웹페이지 레이아웃을 만드는 새로운 기법에 대한 글을 썼고 그 이후 웹은 많이 변화합니다. 마치 영화 속에서 프랑켄슈타인을 만들어낸 것과 같이, HTML의 <table> 태그를 사용해서 페이지의 레이아웃을 만드는 방법을 사용했습니다.

당시 디자이너들은 전통적인 인쇄 매체에서 사용하던 레이아웃을 웹페이지에 표현할 수 있는 방법을 찾았다는 사실에 기뻐했습니다. 원래 표를 표현하기 위해 <table>이라는 엘리먼트를 만든 데이브 러겟의 의도는 전혀 상관하지 않고 마음대로 용도를 바꾼것이죠.

웹디자이너들이 기끔에 들떠 있는 동안, 오래 지나지 않아 시겔은 자신이 괴물을 만들어냈다는 사실을 깨닫게 딥니다. 그 후 그는 "웹은 망가졌고 그렇게 만든건 바로 나다" 라는 글을 씁니다.

" 어떤 사람들은 제가 웹을 망가뜨렸다고 말합니다. 사실 그 말은 틀리지 않았습니다. 저는 초콜릿과 땅콩버터를 마구 썩어 다시는 분리하지 못하게 한것과 같이 웹을 망가뜨렸습니다. 저는 구조를 표현과 함께 뒤섞어 버리는 죄악을 저질렀기 때문에 처형되어도 마땅하다고 생각합니다. "
    - 데이빗 시겔( http://www.xml.com/pub/a/w3j/s1.people.html )

그 후 시겔이 만든 괴물은 더욱 강력해져서 수백만의 웹페이지의 컨텐츠와 구조, 디자인이 뒤섞여버렸습니다. 덧붙여서 웹디자이너에게 보이는 모양대로 컨텐츠와 구조를 만들어야 한다는 잘못된 생각을 하게 만들었습니다. 이러한 개념은 웹디자이너들의 사고에 많은 영향을 끼쳐서 결과적으로 웹은 유연하지 못하게 되었고 의미에 따른 구조는 사라지고 접근성이 떨어지게 되었습니다.

물론 지금 우리는 컨텐츠와 구조가 디자인 모양과 독립적이어야 훨씬 좋다는 사실을 잘 이해하고 있습니다. 하지만 <table>태그를 사용해서 레이아웃을 만들던 과가에는 보이는 모양에 따라 컨텐츠를 배치해야 했기 때문에 컨텐츠와 구조 모두 독립적이지 못했습니다.

<table>을 사용한 디자인 레이아웃의 경우 디자인된 상태에서만 컨텐츠 순서를 이해할 수 있습니다. 하지만 디자인이 입혀지지 않은 상태에서 컨텐츠만을 본다면 이해하기 매우 어려운 구조가 됩니다. 그런 점때문에 테이블을 사용하는 방법이 나온지 얼마 지나지 않아서 시겔같은 사람들이 테이블로 만든 레이아웃을 쓰지 말자고 주장하기 시작했습니다 .하지만 그것을 대체할 만한 적당한 대안이 없었기 때문에 그 괴물은 계속해서 자유롭게 활보할 수 밖에 없었습니다.

다행히도 지금 우리에게는 괴물과 맞서 싸울 수 있는 CSS라는 강력한 무기가 있습니다. 이제는 CSS를 사용해서 만들고 싶은 모양을 거의 대부분 만들어 낼 수 있습니다. 문제는 보이는 대로 컨텐츠의 순서와 구조를 생각하는 것에 너무나 익숙해있기 때문에 변화하기 쉽지 않다는 점입니다.


- 웹디자인 2.0 고급 CSS 감각적인 웹디자인 예술 미학 중에서
(앤디 클락 지음 / 정유한 옮김 / 에이콘) -