알게 된 지 꽤 되었는데, CSS Reboot 이벤트가 다시 시작되었다. 매년 2차례에 걸쳐 CSS 기반 디자인을 이용하여 성공적으로 리뉴얼한 사이트들의 등록 신청을 받아 전시한다. (나중에 다시 알아보니 2005년 5월이 처음이다. -_-)


이번 등록 기간은 10월 15일까지이며, GMT로 11월 1일 0시에 공개된다. 물론 신청은 무료다. 현재 등록된 사이트들을 보면 정말 CSS로 멋지게 구현한 곳이 있는가 하면 대충 table로 만들어 놓고 등록한 곳도 있었다.

2005년 봄(5월 1일부터 전시) : http://www.cssreboot.com/200505/
이번 행사 : http://www.cssreboot.com/

웹 표준화 및 CSS 기반 디자인이 어떤 것인지 알고 싶으신 분들께 꼭 추천하는 곳이다. 특히 웹디자이너나 웹개발자 분이시라면 소스 보기를 꼭 해 보시길 바란다. 아주 깔끔하고 단순한 HTML만으로도 얼마나 화려하고 멋진 디자인을 구현할 수 있는지 눈여겨 보시길.

ps. 이미 중국에서도 웹표준을 아는 사람들이 생긴 상태다. 예: http://www.icebin.net/ 중국어를 몰라서 사이트 내용은 알 수 없지만 분명 변화가 시작되고 있는 것이다.

ps2. 태터툴즈 1.0이 나오면 직접 스킨을 제작하여 XHTML 1.1 + CSS 2.0 기반으로 홈페이지를 완전 리뉴얼할 계획이다. 나도 저기 참가해야지~ =.=; (일몰님의 블로그도 보인다 ~.~)

ps3. daybreaker.info 메인 화면에 css reboot에 참여할 거라는 문구를 표시하려다가 실수로 css를 날려먹는 바람에 페이지를 재작성했다. (물론 디자인은 별로 변하지 않았다) 아무튼 css reboot에 등록!

ps4. [2005/07/20] Yahoo.com도 여기에 참가 신청했다. -_-;;

요즘 들어 CSS에 관심이 많이 생겨서 인터넷을 통해 우연히 접하는 몇몇 국내 웹에이전시(홈페이지 제작 업체)들의 홈페이지에 가 보고, 그들이 만든 포트폴리오들을 보았었다.

그러나 아직도 CSS를 디자인의 중요 방법으로 사용하기보다는 겉모양은 이미지로 꾸미고 레이아웃은 table로 하는 경향이 강했다. CSS는 그저 링크거는 a 태그에 마우스를 올려두었을 때 색깔 변하게 하는 용도, 기본 html로는 할 수 없는 9pt 글꼴 정의, 줄간격 정의 정도로나 쓴달까. (아, 물론 순수하게 디자인 자체야 나보다 훨씬 잘 한다)

가장 많은 사용자를 가진 Internet Explorer가 css 렌더링 버그가 워낙에 많아서 레이아웃을 table로 하는 것이 당장으로서는 더 나은 방법일 수도 있기에 그쪽은 딴지 걸지 않겠다. (요즘 홈페이지 작업을 하는 나로서는 하루에 한 개 꼴로 IE 버그 때문에 골머리를 앓는다. CSS 2.0 표준을 지키는 Firefox 등에서는 아무런 문제도 없는데..orz)

그러나 그렇다고 할지다라도 아예 flash 사이트로 가지 않는 이상 디자인은 css를 이용하는 것이 용량 감소(소스 코드의 단순화), 접근성 향상 등의 측면에서 유용한 점이 많다.

현재 내가 작업 중인 동아리 홈페이지를 살짝 공개하겠다.


물론 완성된 디자인이 아니지만, 2 KB도 안 되는 초경량의 gif 이미지 몇 장 및 100% CSS만 써서 저런 모양을 만들어낼 수 있었다.

하지만, HTML 코드를 보면,

이처럼 단순하다. (php가 메뉴 선택 여부 등은 알아서 클래스를 바꿔준다) 홈페이지를 수정하기도 쉽고, 메뉴를 왼쪽 대신 오른쪽에 배치한다거나 할 때 전혀 html이나 php를 건드릴 필요가 없는 것이다.

포토샵에서 웹문서를 그림 그리듯 디자인하여 드림위버 정도로나 웹디자인을 알던 일부 웹디자이너들에게 html은 프로그래머가 구조적으로 알아서 잘 짜게 놔두고, css만 잘 코딩하면 되니까 이제 디자이너보고 css로만 만들라고 하면 물론 어불성설이다.

프로그램 조금 짤 줄 아는 나도 아직 많이 부족하지만, 각 의미가 맞는 html 코드를 써서 "구조적인" html 문서를 만들고, 적절한 id와 class를 부여하여 css에서 참조하기 편하도록 만드는 것이 우리에겐 아직 익숙하지 않다. 하물며 디자이너에게 css의 selector를 무턱대고 가르쳐 줄 수도 없을 것이다.

위 시안에서, 본문에 있는 소제목들도 간단히 h2 태그만을 사용한 것으로, 글씨 색깔이나 크기, 긴 밑줄, 그 밑줄과 글자와의 간격 등을 모두 css로 정의한 것이다.

css를 쓰면 웹페이지 제작이 훨씬 간단 명료해질 수 있다. 굳이 smarty와 같은 template 엔진을 이용하지 않더라도 css 만으로도 그 역할을 충분히 해낼 수 있는 것이다. 이것은 차후 몇 년 내에 css 3.0 표준이 완성되어 그 구현이 이루어지기 시작하면 본격화될 것이다.

Google Print는 도서의 본문에서 Full Text Search가 가능하게 해 준다. 세상의 모든 정보를 검색할 수 있게 하고 싶다는 구글의 최초 목적이 하나 둘 실현되어가는 것이 아닌가 생각된다.


물론 정말로 모든 정보를 검색할 수 있다는 건 요원한 일이겠지만, 데니스 황의 인터뷰에서 보았던 다음 구절이 생각난다.


항상 새로운 것을 찾아 노력하는 구글의 모습이 본받을 만도 하지만, 한편으로는 대단하다고 느껴진다.