in CSS, 웹 디자인

CSS와 디자인의 통일성

나는 디자인의 이론에 대해서 체계적인 교육을 받지 못했다. 다만 책과 인터넷을 통한 독학과 웹사이트를 제작했던 경험을 통해서 나름대로의 지식을 쌓았다. 그런 나이지만 자칭 웹디자이너로써, 디자인의 최대 목표 중 하나가 통일성(일관성)이라고 생각한다. 이는 사용자 중심 디자인이라는 범위를 넘어 디자인 전체를 아우르는 심오함이 숨어있다.

그런 점에서 CSS 디자인은 통일성을 유지하는 가장 효율적인 방법을 제시한다. CSS는 Cascading Style Sheet의 약자로써, 말 그대로 종속형 스타일 시트이다. 즉 각 요소 선택자(html 요소, id, class)들의 스타일 속성이 부모/자식, 조상/후손 관계로 종속되는 특징을 갖고 있다.

클라이언트 측과 작업을 하다보면, 대부분 메인(홈)페이지 시안부터 요청한다. 그 후에 서브페이지, 서브-서브페이지 시안 순으로 요청하는데, 이는 메인페이지 시안을 통한 웹사이트의 아이덴터티(identify)를 확립하기 위함일 것이다.

하지만, CSS 디자인의 과정은 가장 마지막에 메인페이지를 디자인한다. 게시판을 예로 들면, 게시판 목록의 링크를 클릭했을 때 보게 되는 내용을 먼저 디자인하고, 그 다음에 게시판 목록들을 디자인하며, 그 후에 최근 글 목록들과 메인페이지를 디자인한다.

이는 게시판이 제공하는 각각의 웹문서들을 피라미드식 구조로 봤을때, 가장 아래에 있으며, 가장 많은 링크를 제공받음으로 인해, 가장 많은 페이지(URL)이 생성되는 개별 글 내용 페이지를 먼저 디자인함을 말한다. 기존의 디자인 과정이 시각적 현상에 초점을 두었다면, CSS 디자인은 웹문서의 구조적 현상에 초점을 두는 차이가 있다.

이는 화룡점정(畵龍點睛)이라는 고사성어처럼, 사이트의 색을 결정하는 아이덴터티 확립은 사이트 개발 과정 중에서 가장 마지막 단계(유지/보수 제외)일 것이다. 원칙적으로는 당연한 것 같지만, 현실적(현재)으로 웹디자인 과정은 용의 눈부터 그린후에 나머지를 그리는 모순을 취하고 있다. 이런 모순을 바로잡을 수 있는 것이 바로 CSS를 통한 웹디자인이며, 앞으로 간단히 CSS 디자인이라고 하자~ ㅎㅎ

디자인 과정은 무척 중요하다. CSS 디자인의 경우, 각 요소 선택자들을 디자인할 때, 종속/상속성 특징을 최대한 발휘할 수 있냐 없냐를 결정짓기 때문이다. 또한 grayscale(프로토타입) 디자인 이후에 full color set 디자인을 진행하기 위해서는 기존의 디자인 과정으론 명백한 한계가 있다.

기존의 디자인 프로세스가 통일성의 의미를 살리기 보단 아이덴터티를 구현하는데 초점을 맞췄다면, 향후 웹디자인의 정석이 될 CSS 디자인은 통일성을 통한 아이덴터티 구현에 초점을 맞추게 될 것이다. 즉 보편 타당한 디자인을 기반으로 한 개별 사이트의 아이덴터티가 구축될 것이며, 여기서 보편적 디자인이란 사용자 중심 디자인을 의미한다.

Casecading 스타일 상속은 CSS를 단순한 마크업 이상의 의미를 부여하게 한다. 어떤이는 잘짜여진 루비(Ruby) 코드를 보면, 한편의 시를 보는 것처럼 제작자와 대화할 수 있다고 한다. 비록 잘 짜여진 CSS의 기준이 모호한 측면이 없지 않지만, 나 역시 CSS 코드를 들여다보면 그 어떤 마크업보다 제작자를 잘 이해할 수 있게 된다.

향후 웹디자이너를 꿈꾸는 이라면, 포토샵을 배우기에 앞서 CSS를 배울 것을 권하고 싶다. 시각적 효과로 치장한 디자인을 하고 싶은 자라면, 웹디자인이 아닌 인쇄나 광고(TV)디자인을 권한다. 웹의 본질을 이해하고, 사용자와 자유롭게 대화할 수 있는 넓은 포용심을 갖은 자라면, 꼭 웹디자이너가 되었으면 한다.

댓글 남기기

Webmentions

  • Hooney.net ★ 후니넷 » CSS 디자인 도식화 2008년 03월 21일

    […] 어제 저녁 잠자기 전에 생각났던 내용인 CSS 디자인 과정(프로세스)을 도식해봤다. 지난 글에서는 CSS 디자인을 피라미드식으로 전계했었는데, 아무래도 전체 이치에 맞지 않아서 더 생각해보니, 더욱 근접한 도식화를 찾을 수 있었다. 역시.. 스캐너가 있으니 좋구나~ ㅎㅎ […]