한빛출판네트워크

By 에릭 메이어 웹이 등장하면서 구조와 컨텐츠가 생긴 대신, 표현(presentation)이 더 이상 발전하지 않게 되었다. 그렇다고 해서 표현이 나빠졌다는 뜻은 아니다. 문서를 장식하는 것 자체에는 잘못된 것이 전혀 없다. 문제는 하나의 GIF 파일로 구조를 망가뜨리거나, 테이블 구조 내 또 다른 테이블을 삽입하고, FONT 태그처럼 아무 의미가 없는 구조로 표현하고 있다는 것이다. 이것이 우리가 바래왔던 것인지 다시 한번 생각해 봐야 할 것이다. 과거에는 문서를 읽을 독자를 생각하며 표현했기 때문에 보기에도 좋았다. 일에 자부심을 느끼며, 우리가 보기에 좋았던 것만큼 독자도 우리의 작업물을 좋아하길 바랐다. HTML로는 재미있는 표현을 할 수가 없었기 때문에, 다른 방법을 모색해야 했다. 처음부터 HTML의 스타일이 좋았다면, 지금처럼 웹이 부패하는 일도 생기지 않았을 것이다. 이 때문에 CSS가 중요하게 된다. CSS로는 복잡한 표현을 할 수 있을 뿐 아니라, 구조적이면서 일목요연한 문서를 만들 수 있다. 더 이상 마크업 언어로 고통 받지 말자. CSS를 익히면 되는 것이다. 이것이 CSS를 알아야 하는 가장 기본적이면서도 가장 순수한 이유이다. 현실적으로는 구현이라는 작은 문제가 있다. CSS를 지원했던 초기 브라우저는 정말이지 성능이 떨어졌다. 자타가 인정하는 것처럼 CSS를 어느 정도 지원하긴 했지만, 성능이 너무 불안정해서 아무도 브라우저를 믿고 작업할 수 없었다. 다음에 나타난 브라우저는 좀 더 낫긴 했지만, 광범위한 지원은 여전히 무리였다. 최근에 와서야 디자이너들이 CSS를 사용하기 시작했다. 오페라(Opera) 3.6과 인터넷 익스플로러(IE) 5가 CSS1을 거의 완벽하게 지원했기 때문이다. 매킨토시용 IE5가 특히 완벽하면서도 정확하게 CSS1의 모든 것을 지원한다. 하지만 텍스트가 깜박거리거나(큰 문제는 아니다) 부동 코드(float code)에서 버그가 나타나는 등의 문제가 있긴 하다. 오페라 4는 CSS2에 이전 버전의 특성을 그대로 구현하고 있으며, 모질라는 최근 CSS2를 아주 잘 지원하도록 업그레이드했다. 그러니 지금껏 CSS 사용을 미뤄왔다면, 지금이 적기이다. 3대 브라우저 벤더가 해 준 노고에 감사하면서 CSS를 배우자. 사용자 측면의 장점 위에서 CSS를 사용하면 문서 정보에서 표현 정보를 분리할 수 있다는 것을 언급했다. 아주 좋고 멋진 사실이긴 한데, 그 이유에 대해서도 살펴보자. 문서가 단순한 구조일수록, 스크립팅만 약간 해 주면, 다른 문서 형식으로 변환할 수 있다. 구조만 말할 것 같으면, WML이나 다른 개인화한 문서 형식으로 변환하는 것은 식은 죽 먹기다. 사실 문서 접근 방법이 좀더 앞서 있기만 하면, 스크립트도 필요 없다. 다른 스타일을 사용하여 다른 미디어에서 같은 구조를 불러오기만 하면 된다. 디자인에 대해서는 타스만(Tasman)과 퍼스널 TV 기술의 개발 리더인 탄택(Tantek)의 말을 들어 보자. “내가 CSS를 사용하는 이유는 문서의 표현을 적절히 통제하고 싶어서입니다. 그래서 다이나믹하게 변하지만, 사람들이 읽을 수 있도록 말입니다.” CSS에서는 테이블 헤더의 색깔이나, 헤딩의 크기를 변경하는 일은 폰트 기반의 HTML과 비교하면 정말이지 쉽다. HTML을 사용한 문서는 대부분 표현 정보가 전체 문서에 흩어져 있으며, 그 방식도 되는대로이다. CSS 문서에서 표현 정보는 한 곳에 모여 있고, 읽고 편집하기도 쉽다. 게다가 전체 웹사이트의 스타일 정보를 하나의 파일에 모아 놓을 수도 있다. 이 파일을 편집하면 전체 웹사이트가 바뀐다. CSS가 웹 저자에게 끼치는 영향은 지금까지와 비교할 수 없을 만큼 위력적이다. 기존에는 다이나믹한 사이트에서 템플릿과 스크립트를 편집해서 페이지를 바꾸는 것은 두통거리였다. CSS는 이 과정을 아주 단순화했다. 웹 디자이너 제프리 젤드만(Jeffrey Zeldman)은 “기존의 사이트를 업데이트하고, 잘못되 구문을 수정는 작업은 몇 시간, 혹은 며칠이 걸리기도 합니다. 하지만 CSS를 사용하면 몇 분 안에 끝납니다.” CSS를 사용하면 삶이 더 편해지고, 더 많은 독자가 사용자의 문서를 읽을 것이며, 이전보다 더 큰 힘을 가지게 된다고 모든 사람이 말한다. 그런데도 싫어할 이유는 없을 것이다. 모두를 위한 더 나은 웹 미래를 내다보자. 무엇이 보이는가? 웹 측면에서는 XML이 계속 성장해 정보를 전달하게 되기를 바란다. 그렇게 되지 않을 이유도 없다. XML 문서에서는 자신만의 마크업 언어를 생성해서 다른 사람이 읽을 수 있는 문서를 만들 수 있으므로, 유연한 방식으로 견고한 구조를 만들 수 있다. 하지만 XML은 문서의 구조만을 알려 줄 뿐, 표현은 신경 쓰지 않는다. 그래서 CSS가 필요하다. CSS를 사용해서 XML 문서의 표현을 나타내 주면 두 언어의 장점, 즉 단순한 구조와 세련된 표현을 모두 취할 수 있다. 이의 가능성은 문자 그대로 끝이 없다. 한 예로, 모질라 사용자 인터페이스(UI)가 완벽한 이유(여기에서 완벽하다는 것은 브라우저 크롬과 문서 창 외부의 부분에 대한 것이다)는 XML과 CSS를 함께 사용했기 때문이다. XML과 CSS의 결합에 따른 위력을 더 잘 나타낼 수 있는 표현이 없어서 애석할 뿐이다. 앞으로 웹 저자의 능력이 향상된다면, 이는 모두 XML+CSS로 애플리케이션의 UI를 나타내는 것에서부터 시작하는 것이다. 레이아웃을 다양하게 할 수 있다는 사실보다 더 결정적인 것이 있다. CSS로 모질라 인터페이스를 스타일링했기 때문에 CSS로 이 브라우저의 외관을 바꿀 수 있다는 것이다. 모질라 인터페이스의 색깔이 마음에 들지 않으면, 사용자가 직접 스타일 시트로 바꿔 버리면 된다. 폰트 크기도 변경할 수 있다. 위력은 바로 여기에서 나오는 것이다. 물론 사용자가 보고 있는 문서에도 이러한 위력을 발휘할 수 있다. 사용자 스타일 시트로 웹에 있는 모든 것을 바꿔 버릴 수 있다. 웹 페이지의 폰트 크기가 작으면, 사용자 스타일 시트를 셋업해서 사용자가 보기 편하게 텍스트를 크게 하면 된다. 색맹인 사용자라면, 보통 사람들을 위해선는 푸른색 텍스트로 하이퍼링크를 표시하듯이, 하이퍼링크를 강조하는 스타일을 셋업하면 된다. 하지만 가장 큰 장점은 어떤 일이 있더라도 웹 디자이너가 만든 스타일이 아닌, 사용자가 바꾼 스타일로 유지된다는 점이다. 물론 이러한 특성은 디자이너측에도 유용하다. 진단 도구인 사용자 스타일시트를 생성해서 테이블 구조가 어떤지, 어떤 폰트 에러 마크업이 프로젝트의 마크업을 망치고 있는지 등을 쉽게 알 수 있다. 즉 CSS를 사용하면 사이트 유지 뿐 아니라, 이를 진단 도구로 이용할 수 있기 때문에, 사용자의 삶이 간편해 진다는 것이다. 위에서는 상당히 긍정적 효과를 언급했는데, 이러한 장점 외에도 다소 부정적인 장점도 있다. 다른 사이트에서 의도한 표현을 완전히 뭉개버리는 것이다. 폰트 텍스트를 지워 버린다거나, 광고 배너를 걸러 낼 수도 있다. 이러한 웹을 전복하는 행위에는 거의 한계가 없지만, 경험이 필요한 부분이기도 하다. 이 중에서 최고의 뉴스를 꼽으라면 오페라, IE, 모질라에서 사용자 스타일시트를 지원한다는 것이다. 사실 지금은 사용자 스타일시트를 지원하지 않는 브라우저를 찾기도 힘들다. CSS를 배우자 그동안 CSS는 버그가 많다는 불명예를 얻기도 했지만, 더 이상은 아니다. 최근 몇 년간 맥(Mac)을 사용해 보지도 않고, 매킨토시(Macintosh)를 “파손토시(Crashintosh)"라고 조롱하는 사람들과 마찬가지로, CSS에 버그가 많다고 하는 사람은 최근에 CSS를 사용해 보지 않은 사람이다. 브라우저의 지원을 받는다는 말은 버그가 없다는 뜻일 뿐 아니라, 안정성 향상과 영역의 확대 또한 의미하는 것이다. CSS와 이를 잘 활용하는 방법을 잘 정리해 놓은 책이 있다(내가 쓴 책이다). CSS는 심오하고 강력하며, 웹 저작자가 내일을 위해 익혀야 할 툴이다.

---

에릭 메이어(Eric Meyer)는 CSS&F WG의 일원으로, 캐스케이딩 스타일 시트 핵심 가이드의 저자이다.