in 웹 디자인

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

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

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

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

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

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

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

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

댓글 남기기

  1. 안녕하세요. IT계열 디자이너가 css에 대해 얼마나 알아야 할지에 대해 무척이나 관심이 많은 사람입니다.
    후니님 메일주소를 찾다찾다 못찾아 여기에 남기게 되었습니다. 이해부탁드립니다.
    질문답변 게시판이 혹시 어디있는지 알수있을까요?

  2. 조제희 : 이곳은 개인 블로그이기 때문에 별도의 QnA 게시판을 갖고 있지 않습니다. 또한 개인취향상 방명록도 없습니다.

    제희님께 이메일을 보냈습니다.