지난 글에서 CSS 디자인의 과정을 산에 비유한 적이 있다. 여러 요소(html, class, id)들을 나무라고 생각하면, 전체의 CSS 디자인은 산이 되는 것이다.

흔히 어떤 기술을 익히는 기초 방법 중에는 ‘다른 이의 기술을 따라하는 방법’이 있다. CSS 디자인의 예를 들면, 다른 개발자가 제작한 CSS 파일들의 코드를 복사해서 사용하면서 CSS 디자인 기술을 익히는 것이다. 물론 여기서 복사라 함은 copy & paste가 아니고, 직접 핸드코딩을 통한 copy를 말한다.

다른 개발자가 제작한 CSS 파일의 코드를 복사하는 건 쉬운 일이지만, 각각의 코드들이 어떻게 스타일로 표현되는지 이해하는 건 쉽지 않다. 이는 예전 글에서 밝힌 것처럼, 개발자마다 고유의 CSS 디자인(코딩) 스타일이 있기 때문인데, 이는 xml이나 html처럼 정석화(가장 이치에 맞는)된 디자인 스타일이 명시되지 않았기 때문며, 각각의 방법들에 대한 논의도 활발하지 않기 때문이다.

물론, 현재 W3C에서 작업중인 웹접근성 가이드 2.0는 이러한 논의 과정들을 줄여줄 것이다. 하지만 CSS 디자인의 과정이 산과 같다는 특성을 이해하지 못한다면, CSS 코드 분석은 하염없는 블랙홀에 빠질 수 있다. 이는 신영복 교수의 더불어숲에 나오는 개념과 비슷한데, 나무만 보고 숲과 산을 보지 못하는 오류와 같은 문제가 발생하기 쉽기 때문이다.

잘 만들어진(W3C에서는 well-designed, well-structured라고 표현) 웹사이트에서 최근 글 목록과 같은 어느 한 요소의 CSS 디자인을 살펴보는 건 다분히 복잡한 과정을 수반한다. 특히, 웹사이트가 다수의 CSS들의 연결(link)하거나, 또는 다수의 CSS들을 불러들여(import) 디자인될 경우에는 더욱 복잡한 과정이 필요하다. (inline css라면.. 코드 분석을 중단하는 게 맘 편할지도.. ^^;)

사용자(또는 코드 관찰자) 입장에서는 최근 글 목록이라는 하나의 요소이겠지만, CSS 디자이너에게는 웹사이트 전체에서 하나의 목록이며, 하나의 최근글 목록이며, 그 웹문서(페이지)에서 다른 목록들과 차별화된 최근글 목록이기 때문이다. 즉, html 목록 요소(ul, ol, li 등)에 대한 CSS 디자인이 포함될 것이고, class로 묶여지고 개별화된 CSS 디자인이 포함될 것이며, ID로 특화된 CSS 디자인이 포함될 것이기 때문에 각각의 요소에 사용된 CSS 코드들을 파악하고 분석하지 않고서는 이러한 개별요소로의 접근이 수월하지 않기 때문이다.

요즘 밀고 있는 개념은 “뫼 산(山) CSS 디자인 프로세스”이다. 오늘은 이 개념에 “나무를 보고, 산은 보지 못하는 오류”라는 핵심 포인트를 추가했다. 🙂