나는 디자이너가 아니다(그렇게 굳게 믿고 있다). 그래서 혹시라도 이 포스트를 보시다 헛소리라 여겨지시는 디자이너가 계시다면 가차없이 태클을 날리셔도 할 수 없다. 하지만 일단은 문서 구조화에 대한 정리를 하다가 떠오른 점을 좀 남길까 한다.
시각적 인식의 순서
- 형태
- 배열
- 비례
- 대비
내가 아는 인간의 시각적 인식 순서는 이와 같다. 이는 사람이 문서(편의에 따라 이렇게 부르겠다) 따위를 볼 때는 형태적으로 내용이 있는 곳과 없는 곳을 먼저 구별하고, 놓인 위치에 따라, 차지하는 크기에 따라 내용의 중요도를 판단한 후 실제 내용을 읽기 시작한다는 뜻이다.
이를 그림으로 표시하면 아래와 같다.(왼쪽부터 차례대로) - 이미지 유실
실제로 사용자가 이런 과정을 겪는 시간은 정말 짧아서 순식간에 지나가버린다. 그래서 많은 디자이너들이 레이아웃을 만들 때는, 시선의 이동 경로나 내용 간의 강조 방식을 더 중요하게 여기고 여러 형태로 만들기 위해 고민하곤 한다. 하지만 원래는 이런 인식의 순서를 고려해서 큰 틀을 잘 그려낼 필요가 있는 것이다.
혹시, 글꼴이 매 페이지마다 다른 책을 보신 적 있는가? 일반적으로 그런 책은 만들지 않는다. 왜냐하면 인식을 어렵게 하기 때문이다. 통일된 글꼴과 적당한 여백은 내용에 통일성을 주거나 서로를 구별하는데 큰 도움을 준다.
분리
웹 사이트의 메뉴를 구성하기 위해 레이블링을 할 때는 메뉴를 다 늘어놓고 묶어나가는 방법을 쓰곤 한다지만, 디자인은 좀 다르다. 많은 페이지에서 같은 부분을 반복적으로 노출하는 경우가 많아서 레이아웃이라 부르는 기본틀과 그리드가 굉장히 중요하기 때문이다. 이는 중심부에서 주변부로 나가는 방식이 아닌, 주변부에서 중심부로 들어가는 형태로 작업을 할 수밖에 없는 이유이기도 하다.
달리 이야기하면 중요하지 않은 것부터 시작해서 점차 더 중요한 것을 디자인해 나가는 방식이라고도 말할 수 있다. 이는 웹 페이지가 문서라는 형태를 띠기 때문이기도 한데, 문서 묶음인 책을 기준으로 볼 때 절과 장, 혹은 제목이라는 것으로 내용을 분리해나가기 때문이다. 한가지 주제의 텍스트가 아무리 길어도, 모든 문장이 똑같지 않은 이상은 대개 분리가 가능하다. 또 내용간에도 단락이라는 구분이 존재하고, 텍스트와 텍스트가 아닌 것(그림이나 표 같은 것들)을 나란히 놓을 때도 여백 등을 이용해서 구별을 쉽게 할 수 있도록 만들어진다.
이런 방식으로 계속 문서를 분리해나가다 보면 트리구조가 만들어진다. 이는 제일 높은 곳부터 제일 낮은 곳까지 차례대로 놓이며 그 중요도를 쉽게 인식할 수 있도록 도와준다. HTML 태그를 열고 닫는데는 다 이유가 있다.
강조
그렇다면 내용 안의 경중을 가릴 때에는 어떻게 할까? 확실히 눈에 띄는 것이 더 쉽게 다가오기 마련이다. 강조란 시각적 긴장감을 조성해서 인식율을 높이는데 그 목적이 있다. 그럼에도 불구하고 눈 아플 정도로 많이 사용되는 색상이나 굵직한 글씨들은 무엇을 중요하게 여겨야하는지 헷갈리게 하기도 한다. 이는 애초에 구성을 잘해야만 전달도 적절히 이루어진다는 점을 알려준다.
중요한 내용을 표시할 때에는 크게 두가지 방법이 있는데, 인용 부호 같은 구분자를 이용하는 방법과 색상이나 크기 등을 이용해 표현하는 방법이다. 일반적으로 인쇄된 문서는 단색을 이용하는 경우가 많기 때문에, 색상보다는 글씨의 크기나 형태(글꼴), 또는 밑줄 등을 이용해서 강조하게 된다.
이를 웹에서 표시하기 위해서는 인용 태그인 blockquote나 q, 강조 태그인 strong이나 em을 사용할 수 있다.(밑줄을 긋기 위한 태그는 없다. 여러분이 알고 있는 u 태그는 표현만을 위한 것이라 강조의 뜻을 담고 있지 않다) 브라우저에 따라서 인용 태그를 사용했을 때 인용부호를 자동으로 표시해주는 경우도 있으며, 이는 HTML이 구조적이지만 디자인을 위한 요소 또한 어느 정도는 포함을 하고 있다는 의미이기도 하다.
- 웹에서는 색상만을 이용해 강조를 하는 경우가 많은데 단색만 인식되는 경우가 존재할 가능성을 염두에 둘 필요가 있다. 이는 단순히 PC 사용자만을 의미하는 것이 아니라 PDA나 프린터 등을 통해 웹사이트를 접하는 사람이 있기 때문이다. 또한 색약인 경우나 약시일 경우도 이런 경우에 해당될 수 있다.
정리하며...
HTML은 계층구조로 작성 가능한 가장 쉬운 언어 중 하나다. 복잡한 연산도 없으며, 단순히 정보를 웹이라는 곳으로 옮겨주는 역할을 하는 도구다. 이는 웹이 정보를 손쉽게 전달하고 공유하기 위한 수단으로 탄생한 것에 그 이유가 있을 것이다.
웹 저작용 언어인 HTML이 분리와 강조를 할 수 있는 방법을 이미 제공하고 있음에도 불구하고 국내 웹 사이트에서 태그를 이용한 분리와 강조를 사용한 경우는 찾아보기 어렵다. 쉬운 예로 제목과 내용은 그 둘의 크기만으로도 쉽게 구별 가능함에도 불구하고, 제목은 이미지, 내용은 텍스트를 사용하는 경우를 들 수 있겠다. 불필요한 테두리나 색상의 남용 또한 그 예가 많다.
이미지나 멀티미디어로 무장하는 것이 무조건 나쁘다는 뜻은 아니다. 하지만, 의미와 목적에 맞는 디자인과 올바른 태그가 만났을 때 구조의 미학이 제대로 발휘될 수 있다는 점을 잊어서는 안될 것이다.
파티가 아무리 화려해도 즐겁지 않다면 의미없는 시간인 것처럼 내용보다 중요한 디자인은 없는 법이다.