웹전문가가 알아야 할 좋은 웹사이트 만들기

타이포그라피

웹사이트는 무엇을 하기 위한 것인가라는 질문에 대부분이 ''정보를 얻기 위해서''라고 답할 것이다.
정확한 답이다. 웹사이트에서 영화를 보거나 쇼핑을 하거나 커뮤니티가 형성되기도 한다. 그 모든 것을 아울러 정보를 얻기 위함이라 총칭해 말할 수 있을 것이다. 정보는 이미지, 사운드, 동영상 등을 통해서 얻기도 하겠지만, 글자를 통해 얻는 것이 가장 기본적인 방법일 것이다. 흔히 글자를 다른 말로 서체, 폰트, 텍스트, 타입, 로고, 문자, 타이포그라피 등 다양한 용어로 사용되기도 한다. 타이포그라피의 체계에 맞추어 간단히 정리를 해보면 우선 가장 기본 요소가 되는 것이 글자(타입)이고 글자의 성질을 나타내는 것이 글꼴(타입페이스)이고 이 글자를 이용해서 디자인 하는 것을 문자 디자인(타이포그라피)이라고 한다.
즉, 다른 글자와 다르게 보여져 구별할 수 있는 형태를 ''폰트''(서체)라고 하며, 글자와 글자가 위치한 여백, 레이아웃된 모양 등 글자자체를 디자인된 것을 한마디로 일컬어 의미한다.

시스템이 알아서 컨셉이나 타겟에 맞게 글자를 자동으로 디자인해주는 새로운 슈퍼컴퓨터가 나오기 전까지는 폰트를 선별해서 사용해야한다. 이미지와 조화를 이루어 사이트를 더욱 돋보이게 하며, 사용자의 가독성을 높이는 동시에 눈을 편안하게 해야 한다. 이것은 사이트 방문자들이 오래 머무를 수 있게 하는 주요 요소이기도 하다.
웹디자인을 할 때 상당 부분 신경 쓰이는 것이 또한 타이포그라피이다. 사용자 환경에 따라 의도한 바가 제대로 구현되지 않을 수 있는 변수를 감안할 때 기본에 충실한 폰트를 쓸 것이냐, 보다 크리에이티브한 것으로 만드느냐는 순전히 디자이너의 고민이기 때문이다.

타이포그라피 디자인을 할 때 무엇보다 가장 신경을 써야 할 점은 바로 웹상에서의 타이포그라피는 사용자 환경에 따라 언제든지 엉망으로 보일 수 있다는 점이다. 이는 내가 웹페이지에 사용한 폰트가 상대방 컴퓨터에 없을 경우 원했던 서체, 레이아웃으로 보이지 않는 등 서체가 보이는 방식에 많은 변수가 있고 그 변수에 대해서 웹디자이너가 조정 할 수 있는 부분이 제한되어 있기 때문이다. 기본에도 충실하면서 사이트의 컨셉과 타겟에도 부합하는 타이포그라피를 만들기 위한 방법, 그것이 바로 웹디자이너가 안고 가야 하는 과제이다.

1. 기본에 충실한 서체로 한정하여 사용한다.

웹사이트 중에는 타이포그라피 만으로 디자인된 사이트도 간혹 있다. 잘 된 타이포그라피는 어떠한 이미지보다 아름다울 수 있다. 그러나 누구나 일정하게 보이는 인쇄매체가 아닌 사용자 환경에 따라 각기 다르게 보일 수 있는 타이포그라피는 사실 좀 위험스러운 시도이다. 타이포그라피는 보는 환경에 따라 많은 변수가 존재하므로 일반적인 정보 컨텐츠일 경우에는 어느 시스템에서나 기본적으로 설치되어 있는 서체를 이용해야 하며, 반드시 보여줘야 하는데 차별성을 둬야 한다면 이미지로 제작하여 사용하는 것이 좋다. 또한 여러 폰트를 산만하게 사용하는 것 보다는 일정한 몇 가지 규칙을 사용하여 통일감을 주는 것이 좋다.

2. 사이트의 컨셉과 타겟에 맞는 타이포그라피를 사용한다.

좋은 타이포그라피는 예쁘고 예쁘지 않고가 아니라, 사이트의 컨셉과 목적, 사용자가 누군가에 따라 결정되어진다.
예를 들어 직장인을 대상으로 하는 직무능력 교육사이트와 어린이를 대상으로 하는 숙제 도우미 사이트일 경우,
타이포그라피의 선택은 많은 차이가 있을 것이다.

3. 가독성이 가장 중요하다.

서두에서도 언급했듯이, 웹사이트는 정보를 얻기 위해 가장 많이 이용한다. 그 정보는 서체를 통해서 읽을 수 있기 때문에 뭐니 뭐니 해도 가장 중요한 것은 가독성이 우수해야 한다. 가독성이란 많은 양의 텍스트가 얼마나 쉽게 읽히는가 하는 능률의 정도. 활자체, 글자 간격, 행간(行間), 띄어쓰기 따위에 따라 달라진다.

4. 여백을 적절히 활용한다.

잘 된 타이포그라피는 페이지의 여백 또한 타이포그라피를 어울리게 하는 요소로 사용할 수 있어야 한다. 헤드라인, 메인과 서브페이지 등이 여백과 대비 또는 조화를 통해 일관성과 변화를 주는 것이 좋다.

5. 스타일시트를 잘 활용한다.

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다.
스타일시트는 각기 다른 사용자 환경에서 동일한 타이포그라피를 제공한다는 이점이 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달되어 편리하다. 스타일시트를 잘 만들어놓으면 칼라, 간격, 폰트, 여백 등 스타일 전반에 걸쳐 편리함과 동시에 변화를 줄 수 있다. 물론 강력한 제어 기능을 갖는 스타일 시트지만 아직 모든 브라우저에서 지원하는 것이 아니며 Internet Explorer 3.0 이상, Netscape 4.0 이상에서만 가능하다. 즉 웹 브라우저의 버전과 종류에 따라 지원이 안될 수도 있고, 또 적용된 결과에 차이가 생길 수도 있으므로 사용자의 편의를 고려하여 어떻게 융통성 있게 적용할 것인지에 대해 좀 더 생각해 볼 필요가 있다.