환영합니다!

웹에서 구조적 디자인이 중요한 이유

나는 디자이너가 아니다(그렇게 굳게 믿고 있다). 그래서 혹시라도 이 포스트를 보시다 헛소리라 여겨지시는 디자이너가 계시다면 가차없이 태클을 날리셔도 할 수 없다. 하지만 일단은 문서 구조화에 대한 정리를 하다가 떠오른 점을 좀 남길까 한다.

시각적 인식의 순서

형태
배열
비례
대비

내가 아는 인간의 시각적 인식 순서는 이와 같다. 이는 사람이 문서(편의에 따라 이렇게 부르겠다) 따위를 볼 때는 형태적으로 내용이 있는 곳과 없는 곳을 먼저 구별하고, 놓인 위치에 따라, 차지하는 크기에 따라 내용의 중요도를 판단한 후 실제 내용을 읽기 시작한다는 뜻이다.

이를 그림으로 표시하면 아래와 같다.(왼쪽부터 차례대로)

실제로 사용자가 이런 과정을 겪는 시간은 정말 짧아서 순식간에 지나가버린다. 그래서 많은 디자이너들이 레이아웃을 만들 때는, 시선의 이동 경로나 내용 간의 강조 방식을 더 중요하게 여기고 여러 형태로 만들기 위해 고민하곤 한다. 하지만 원래는 이런 인식의 순서를 고려해서 큰 틀을 잘 그려낼 필요가 있는 것이다.

혹시, 글꼴이 매 페이지마다 다른 책을 보신 적 있는가? 일반적으로 그런 책은 만들지 않는다. 왜냐하면 인식을 어렵게 하기 때문이다. 통일된 글꼴과 적당한 여백은 내용에 통일성을 주거나 서로를 구별하는데 큰 도움을 준다.

분리

웹 사이트의 메뉴를 구성하기 위해 레이블링을 할 때는 메뉴를 다 늘어놓고 묶어나가는 방법을 쓰곤 한다지만, 디자인은 좀 다르다. 많은 페이지에서 같은 부분을 반복적으로 노출하는 경우가 많아서 레이아웃이라 부르는 기본틀과 그리드가 굉장히 중요하기 때문이다. 이는 중심부에서 주변부로 나가는 방식이 아닌, 주변부에서 중심부로 들어가는 형태로 작업을 할 수밖에 없는 이유이기도 하다.

달리 이야기하면 중요하지 않은 것부터 시작해서 점차 더 중요한 것을 디자인해 나가는 방식이라고도 말할 수 있다. 이는 웹 페이지가 문서라는 형태를 띠기 때문이기도 한데, 문서 묶음인 책을 기준으로 볼 때 절과 장, 혹은 제목이라는 것으로 내용을 분리해나가기 때문이다. 한가지 주제의 텍스트가 아무리 길어도, 모든 문장이 똑같지 않은 이상은 대개 분리가 가능하다. 또 내용간에도 단락이라는 구분이 존재하고, 텍스트와 텍스트가 아닌 것(그림이나 표 같은 것들)을 나란히 놓을 때도 여백 등을 이용해서 구별을 쉽게 할 수 있도록 만들어진다.

이런 방식으로 계속 문서를 분리해나가다 보면 트리구조가 만들어진다. 이는 제일 높은 곳부터 제일 낮은 곳까지 차례대로 놓이며 그 중요도를 쉽게 인식할 수 있도록 도와준다. HTML 태그를 열고 닫는데는 다 이유가 있다.

강조

그렇다면 내용 안의 경중을 가릴 때에는 어떻게 할까? 확실히 눈에 띄는 것이 더 쉽게 다가오기 마련이다. 강조란 시각적 긴장감을 조성해서 인식율을 높이는데 그 목적이 있다. 그럼에도 불구하고 눈 아플 정도로 많이 사용되는 색상이나 굵직한 글씨들은 무엇을 중요하게 여겨야하는지 헷갈리게 하기도 한다. 이는 애초에 구성을 잘해야만 전달도 적절히 이루어진다는 점을 알려준다.

중요한 내용을 표시할 때에는 크게 두가지 방법이 있는데, 인용 부호 같은 구분자를 이용하는 방법과 색상이나 크기 등을 이용해 표현하는 방법이다. 일반적으로 인쇄된 문서는 단색을 이용하는 경우가 많기 때문에, 색상보다는 글씨의 크기나 형태(글꼴), 또는 밑줄 등을 이용해서 강조하게 된다.

이를 웹에서 표시하기 위해서는 인용 태그인 blockquote나 q, 강조 태그인 strong이나 em을 사용할 수 있다.(밑줄을 긋기 위한 태그는 없다. 여러분이 알고 있는 u 태그는 표현만을 위한 것이라 강조의 뜻을 담고 있지 않다) 브라우저에 따라서 인용 태그를 사용했을 때 인용부호를 자동으로 표시해주는 경우도 있으며, 이는 HTML이 구조적이지만 디자인을 위한 요소 또한 어느 정도는 포함을 하고 있다는 의미이기도 하다.

* 웹에서는 색상만을 이용해 강조를 하는 경우가 많은데 단색만 인식되는 경우가 존재할 가능성을 염두에 둘 필요가 있다. 이는 단순히 PC 사용자만을 의미하는 것이 아니라 PDA나 프린터 등을 통해 웹사이트를 접하는 사람이 있기 때문이다. 또한 색약인 경우나 약시일 경우도 이런 경우에 해당될 수 있다.

정리하며…

HTML은 계층구조로 작성 가능한 가장 쉬운 언어 중 하나다. 복잡한 연산도 없으며, 단순히 정보를 웹이라는 곳으로 옮겨주는 역할을 하는 도구다. 이는 웹이 정보를 손쉽게 전달하고 공유하기 위한 수단으로 탄생한 것에 그 이유가 있을 것이다.

웹 저작용 언어인 HTML이 분리와 강조를 할 수 있는 방법을 이미 제공하고 있음에도 불구하고 국내 웹 사이트에서 태그를 이용한 분리와 강조를 사용한 경우는 찾아보기 어렵다. 쉬운 예로 제목과 내용은 그 둘의 크기만으로도 쉽게 구별 가능함에도 불구하고, 제목은 이미지, 내용은 텍스트를 사용하는 경우를 들 수 있겠다. 불필요한 테두리나 색상의 남용 또한 그 예가 많다.

이미지나 멀티미디어로 무장하는 것이 무조건 나쁘다는 뜻은 아니다. 하지만, 의미와 목적에 맞는 디자인과 올바른 태그가 만났을 때 구조의 미학이 제대로 발휘될 수 있다는 점을 잊어서는 안될 것이다.

파티가 아무리 화려해도 즐겁지 않다면 의미없는 시간인 것처럼 내용보다 중요한 디자인은 없는 법이다.

구조를 살리는 웹사이트 디자인

일반적으로 웹사이트를 디자인하기 위해서 사용하는 화면 분할 방식은 Grid system이다. 이는 HTML이 SGML에서 출발했던 것처럼, 출판 디자인에서 사용되던 방식이 웹사이트 디자인에 그대로 넘어온 경우다. 그러나, 인쇄물과 하이퍼텍스트의 개념이 있는 웹사이트는 분명히 그 개념과 목적에 차이가 있다. 그렇다면 웹사이트를 시각적인 면에서 더 효율적으로, 의미적으로 구성할 수 있는 방법은 무엇일까? 이 포스트는 이런 고민에서 출발하였고, Component system이라는 이름의 방법을 제시한다. 여전히 고민과 논란의 여지가 있을지 모르지만 Grid system과 비교하여 작성해본다.

Grid system

그리드 시스템은 출판물의 지면을 효율적으로 구성하기 몇개의 시각적 구역(grid)으로 갈라놓는 것이다. 이러한 그리드 시스템은 단 권으로 끝나지 않고 연속적으로 발행되는 잡지 등에서 많이 이용되고 있으며, 같은 형태의 페이지를 갖게되는 웹 사이트에서도 이용되고 있다.

Grid system

웹사이트에서 그리드 시스템을 도입하는 목적은, 도입대상 전체에 걸쳐 통일된 규칙에 근거한 구성을 실현하기 위해서이다. 이 그리드 시스템을 이용하여 각 페이지의 정보를 정리하고 적절한 배치를 함으로써 정보제공자와 사용자 양쪽에 다양한 이점을 제공할 수 있다. 그리드 시스템을 도입하면 전체적인 통일감을 주어 사용자의 편의를 향상시킬 뿐 아니라, 정보제공자에게도 효율적인 제작과 정보 및 구조를 쉽게 나타낼 수 있게 한다.
Grid system은 다양한 정보요소를 일정한 간격·여백을 설정하고 배치하여, 페이지상의 구조를 명시한다. 시각적으로 구조를 인지함으로써 배치된 요소의 관계성을 쉽게 파악할 수 있으며, 같은 그리드 시스템을 사용한 페이지라면, 다른 작성자가 제작한 것이라도 그리드를 통하여 공통점을 발견할 수 있게 만든다. 통일된 그리드를 이용하면 시각적인 유도 효과를 발휘하여 이미지와 정보에 대해 분류를 용이하게 하고 주목성, 가독성을 높일 수 있다.

이렇듯 Grid system은 반복해서 나오는 요소에 대해 정해진 위치를 제공함으로써 사용자의 학습 효율 향상을 기대할 수 있고, 다방면에 걸친 정보 속에서 사용자가 정보를 구별/선별하는 행위를 보조하여 보다 빠르고 정확히 목적의 정보에 도달할 수 있게 만든다.
사용자의 주의를 끌어, 정보제공자가 의도한대로 정보를 전달하기 위해 그리드 시스템을 이용할 수 있다. 반복성을 이용하여, 배치된 요소와 전체의 구조를 명확히 할 수 있기 때문에 요소의 위치와 주위와의 관계성을 통해 내용 추측을 보조하고, 시각적인 시점을 설정하여 정보구조를 이해하기 위한 흐름을 창출한다.

Component system

컴포넌트 시스템은 문서의 구조를 각 구성 요소마다 몇 가지 단계로 분해 정의하고 그 조합에 의해 구조 전체를 표현하는 구성 시스템을 말한다. 이는 문서의 구조를 명확히 정의하여 컴포넌트와 영역이라는 각각의 구성을 갱신·변경 가능하게 하고 페이지 구성을 유연하게 만드는 시스템이다. 이 시스템에서는 최소한의 기준단위가 되는 요소(모듈), 요소의 조합(컴포넌트), 조합의 집합체(영역)를 정의해야 한다.

영역: 화면을 분할한 영역. 이 시스템에서는 시각적 분할 영역이 아니라, 기능에 따른 의미적 분할 영역이다.
컴포넌트: 각 영역를 구성하는 요소. 컴포넌트는 복수의 모듈로 구성된다. 각 컴포넌트의 구성은 공통된 범용적인 요소(컴포넌트, 모듈)로 분해할 수 있다.; (예:이미지, 링크, 텍스트 등 한가지의 블록과 그 집합)
모듈: 컴포넌트를 구성하는 분할 불가능한 최소의 단위.; (예:제목과 배너)

Component system

Component system은 기본 설계에 근거하여 최소한의 구성요소를 추가하고 확충하는 방식이기 때문에 확장에 탄력적으로 대응할 수 있다. 또한 범용적으로 설계된 컴포넌트를 조합시켜 다양하고 풍부하게 표현할 수 있다. 각 컴포넌트는 기본 설계에 근거하여 작성되기 때문에 이해가 쉽고 활용이 쉽다. 또 컴포넌트는 재이용 가능성이 높고 이로 인해 작업 효율을 높일 수 있다.

단, 이런 일련의 작업은 구조화된 컴포넌트를 배열하기 위한 기초 설계가 튼튼할 때 가능하다. 컴포넌트를 사용하기 위한 영역의 구분은 Grid system과 함께 사용해도 좋지만, 구조적인 Markup을 통해 영역에 대한 정의를 분명히 하고, 이 영역이 디자인을 위한 Grid와 함께 사용되어야 한다. 이는 한가지 방식의 영역 정의만을 의미하지는 않으며, 내용에 따라 영역이 사용되는 형태가 바뀔 수 있다. 이런 조건에 부합될 때 좀 더 다양한 컴포넌트 조합을 통해 다양한 페이지 디자인이 가능해진다.

이 내용은 BarCampSeoul에서 발표했던 내용이며, 본인의 아이디어가 아니라 일본항공 한국 사이트 작업을 하면서 알게 된 방식임을 밝혀둔다.
실무에 적용하기 위해서는 여전히 많은 고민이 필요한 점이 있다. 그래서… 토론 거리가 되었으면 하는 개인적인 바램도 있다.
BarCamp 발표자료 다운로드 : component system

국내 웹디자인

내가 사용하는 CSS 기본 파일은 이렇다.

global.css : 공통적으로 사용되는 셀렉터에 관한 정의
layout.css : 전체 틀에 관한 정의
datatable.css : 표의 유형에 관한 정의
board.css : 게시판에 관한 정의

그런데, 최근의 작업물은 위의 파일을 제외하고도 적게는 6개에서 많게는 10개 이상의 CSS를 작성해야할 때가 많다. 더 좋은 방법을 사용하는 분도 계시겠지만, 이 파일들은 사이트의 메뉴별 CSS인 경우가 많다. 나름대로 코드량을 줄이기 위해서 이래저래 애를 써보지만, 어쩔 수 없이 써야하는 코드도 제법 된다.

내가 에이전시에 근무하면서 프로젝트 때마다 웹 스타일가이드를 요청하곤 하지만, 역시 느끼게 되는 점은 IA보다는 Creative에 치중한 디자인이 대부분이라는 점이다. 특히 웹표준 준수(혹은 접근성 지침 준수)를 요구하는 프로젝트에서는 디자이너에게 이러쿵 저러쿵 하게될 때가 많은데, 그때마다 디자이너는 나의 간섭을 힘들어한다.

게다가 프로토타입 같은 것들이 기획 단계에서 알게 모르게 정해진다거나, 디자이너가 거기에 대해 이의를 제기하지 못하는(대부분 촉박한 일정 때문이지만) 경우가 많고, 기획서에 나와있는 형태가 디자인으로 탈바꿈해버리는, 그래서 HTML 마크업도 결국은 내용을 구조적으로 정리한다기 보다는 기획서상의 내용을 거의 그대로 웹페이지에 얹어내는 경우가 많다. 게다가 Cascading하게 CSS를 작성하는 것도 꽤나 까다로와진다. 왜냐하면, 사이트의 메뉴별로 색상이 바뀐다던지, 스타일이 바뀌는 경우가 비일비재하기 때문이다.

뭐 지금은 디자인을 하지 않지만(예전에 했다고도 말하긴 어렵지만 -_-;), 내가 아는 디자인의 원칙은 하나 뿐이다.

형태는 기능을 따른다.

예전에 접근성에 관해 정리하면서 Universal Design에 관한 내용도 함께 써뒀지만, 웹에 관한한 국내 웹디자이너들의 생각은 꽤나 모호해보인다. 클라이언트의 입장이 대부분 그렇지만 우리나라 웹사이트는 사용자와 그 사용성을 위해 어떤 원칙을 만족시키는지의 여부보다는 일단 보기좋고 봐야 한다는 생각이 뿌리깊어 보인다. 어떤 사람이던 웹에 대해 아무것도 몰라도 보는 눈은 있다는 점이 가장 큰 문제가 아닐까 싶다.

어제 Hooney님과 간단히(?) 술한잔하면서 여러가지 이야기를 했는데, 그 중에 웹디자인과 접근성에 관한 이야기 중 인상깊었던 대목이