CSS 디자인 1 - 탈 그리드 디자인

나는 CSS 디자인이라는 용어를 자주 사용하곤 한다. 웹 디자인의 한 부류로써 표현하곤 하는데, 개념을 명확히 표현하는데 꽤 오랫동안 어려움을 겪어왔다. 생각을 정리해서 표현하지 못했던 아쉬움을 이제서야 털 수 있을 것 같다. 자 그럼 CSS 디자인의 하나하나를 파헤쳐 보자.

CSS 디자인을 협의(狹義)로 볼 때, 테이블 디자인과 반대되는 개념으로 이해할 수 있다. 웹 디자인 역사를 만들어 왔다고 할 수 있는 그리드 기반의 테이블 디자인과 반대되는 개념으로 이해할 때, CSS 디자인은 탈 그리드 디자인이라고 할 수 있다.

탈 그리드 디자인. 실제 편집 디자인에선 탈 그리드 디자인이 새로운 형식으로써 기존의 그리드 디자인을 위협해온지 오래됐다. 1900년대 산업사회의 발전과 함께 성장한 신문 형식의 다단형 그리드 디자인이 여전히 사용자 경험성에 호소하는 디자인임에 틀림없지만, 호소는 호소일 뿐 느낌을 주지 못한다. 최근 애플이 발표한 iPhone을 보라.

실제 우리가 자주 접하는 잡지(패션, 경제, 육아, 여성 주간/월간지 등)에서 탈 그리드 디자인을 마주치고 있다. 이미 편집 디자인에선 과거 플롯이나 다단형식의 그리드 디자인에서 포지셔닝과 z-index를 활용한 레이어 개념의 탈 그리드 디자인으로 전환된지 오래다. 다만 웹에서는 테이블을 넘어 CSS를 레이아웃 용도로 사용하기 시작한지 얼마 안됐고, 또 잘 사용하는 웹 디자이너의 수가 적다보니 실제 웹 사이트가 탈 그리드 디자인으로 넘어가는데 어려움을 겪고 있다.

그리드를 넘어서, Layout과 같은 책에서 그리드를 무시한 자유로운 디자인, 즉 탈 그리드 디자인에 대한 개념을 설명하고 관련된 예제들을 보여주고 있다. 작년에 오픈된 윈도우 비스타 웹 사이트나 MS의 MP3 플레이어 ZUNE과 같은 사이트가 탈 그리드 디자인을 보여주는 대표적인 예라고 할 수 있다.

CSS 디자인은 웹 디자인의 일부이다. 웹을 디자인하는데 사용하는 하나의 방법일 뿐이다. 다만 기존의 웹 디자인과 분명히 대비되는 점들이 있고, 이를 잘 이해하고 활용할 때 우리는 웹 디자인 2.0을 표현할 수 있을 것이다.

덧붙임) 우리는 단단한 그리드가 존재할 때 비로서 탈 그리드가 존재할 수 있음을 인정해야 한다. 그리드의 장점을 충분히 이해할 때, 단점이 눈에 보일 것이며, 그때서야 탈 그리드를 적절하게 사용할 수 있을 것이다. 그리드를 제대로 사용하지 못하면서 탈 그리드를 제대로 사용할 수 있을리 만무하다.