[2004.07] 웹사이트에서의 타이포그래피 디자인

우리는 흔히 글자를 지칭하는 말로 글자, 문자,서체, 텍스트, 로고, 폰트, 타입등 다양한 용어를 사용하고 있다.

모두가 사용할 수 있는 말이기는 하지만 타이포그라피의 체계에 맞추어 간단하게 정리를 해보면 우선 가장 기본 요소가 되는 것이 글자(타입)이고 글자의 성질을 나타내는 것이 글꼴(타입페이스)고 이 글자를 이용해서 디자인 하는 것을 문자디자인(타이포그라피)라고 한다.

즉 다른 글자와 구별되는 그 글자의 형태를 ‘폰트’(서체) 라고 하며 글자와 글자가 위치한 공간, 레이아웃된 모양 등 글자로 디자인된 상태를 모두 폭 넓게 타이포그라피라고 정의한다.

우리는 웹디자인을 하는 내내 폰트를 선별 해야 하는 과제를 안고 있다. 이미지와 조화를 이루는 폰트가 이미지를 더욱 돋보이게 만들고 눈을 편안하게 만들어주는 폰트는 방문객들이 그 사이트에 오래 머물도록 만들어 준다.

폰트의 적절한 선택은 웹디자인에서 상당히 중요한 부분이며 웹디자인의 질을 좌우한다고 해도 과언은 아닐 것이다. 그러나 폰트 역시 컬러와 마찬가지로 웹디자이너의 센스에 따라 선택되어지는 일이 많았으며 사용자에게 어떻게 받아들여 질까라는 고민없이 선택하는 경우가 많았었다. 그러나 폰트 역시 객관적인 근거에 기준해 선택되어져야 한다.

타이포그라피 역시 실용성을 중요시 할 것인가 실험성을 중요시 할 것인가에 따라 그 비중이 달라지겠지만 실용적인 타이포그라피든 실험적인 타이포그라피든 간에 목적에 맞는 타이포그라피여야 한다는 것은 타이포그라피를 사용할 때 염두에 두어야 할 중요한 부분이다.

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

 

 

Photo by Hannes Wolf on Unsplash

 

 

1) 웹사이트의 내용과 컨셉에 어울리는 서체를 사용한다.

서체를 결정 하는데 있어 판단 기준이 되는 것은 단지 그 서체의 보기 좋고 나쁨이 아니라 타겟이 되는 사용자와 컨셉이다. 사용자의 타겟층이 누구냐에 따라, 웹사이트의 내용에 따라 서체를 결정 하여야 한다. 예를 들어 사용자의 타겟층이 어린이 라면 지나치게 딱딱하거나 작은 글씨는 피하는 것이 좋을 것이며 차갑고 미래지향적인 컨셉이라면 사이버틱한 서체를 사용하는 것이 웹사이트의 분위기를 잘 전달해 줄 것이다.

 

 

2) 서체는 한정해서 사용한다. (가급적이면 기본서체를 사용하도록 한다)

대부분의 웹디자이너 들은 독특한 서체를 사용하고 싶어하지만 웹페이지는 인쇄된 매체로 보여지는 것이 아니라 상대방의 컴퓨터 시스템에 맞게 보여 지는 것이다. 즉 상대방 컴퓨터 시스템에도 사용서체가 있어야 의도한 서체와 레이아웃으로 보여지게 된다.

이처럼 서체가 보여지는 방식에 많은 변수가 있기 때문에 일반적으로 보여져야 할 서체는 어느 시스템에서나 기본적으로 설치되어 있는 서체를 이용해야 하며 꼭 보여줄 필요가 있는 타이포그라피의 경우에는 이미지로 만들어 사용하는 것이 좋다.

여러 종류의 폰트를 사용하고 싶다면 같은 스타일의글자라 하더라도 다양한 굵기, 기울기를 가지고 있는 패밀리 폰트를 사용해 통일감을 주는 것이 좋다.

* 패밀리 폰트 : 기본이 되는 표준 폰트가 시각적 모습을 달리하여 여러개의 폰트로 파생된 한 벌의 폰트

 

 

3) 가독성 , 판독성에 대한 고려를 한다.

가독성이란 많은양의 텍스트의 읽기 쉬운 정도를 말한다. 대량의 텍스트가 인쇄된 인쇄물을 읽을 때는 세리프체(한글은 명조계열)가 가독성이 높고 모니터 화면 상에서는 산세리프체(한글은 고딕계열)가 가독성이 높다.

이렇게 인쇄물과 모니터 화면상에서 가독성의 차이가 생기는 이유는, 모니터 화면에서 보여지는 텍스트의 경우 인쇄물보다 낮은 해상도로 출력되기 때문에 인쇄물처럼 정교하게 보이지도 않고 안티 알리아스 현상 때문에 세리프(돌기)가 제대로 보이지도 않게 된다. 이러한 이유로 본문용 서체로는 주로 고딕계열인 굴림, 돋움체가 많이 사용된다.

판독성이란 텍스트의 큰제목이나 버튼등 짧은 돌출 텍스트를 얼마나 쉽게 알아볼수 있는가를 말하는 것이다. 일반적으로 인쇄, 화면상에서는 산세리프체가 더 판독성이 높다. 판독성을 높이기 위해서는 어센더나 디센더가 너무 짧은 글자체는 피하는 것이 좋으며, 영어의 경우 모든 글자를 대문자로 사용하는 것도 피하는 것이 좋다.

만약 제목을 모두 대문자로 하면 사각형 형태의 단조로운 모양이 되기 때문에 눈에 잘 들어오지 않게 되어 판독성을 떨어 뜨린다.

 

 

4) 용도에 맞는 서체의 선택한다.

웹사이트의 제목, 헤드라인, 본문 등 내용에 따라, 또는 링크가 되어 있는 단어나 그림의 설명등 정보의 종류에 따라 서체의 종류, 크기, 색상 등을 일관되게 적용함으로써 웹사이트가 가지는 통일성과 일관성을 유지시켜주는 것이 좋다. 한 페이지 내에서 사용되는 서체의 종류와 크기는 3-4가지 정도가 적당하다.

한 페이지에서 너무 많은 서체가 사용되거나, 각 페이지마다 다른 서체가 사용되는 것은 시각적인 혼란과 함께 콘텐츠의 가독성, 접근성에 부정적인 영향을 미칠 수 있음을 고려해야 한다.

 

 

5) 텍스트의 길이와 텍스트의 양을 조절한다.

지나치게 긴 문장의 텍스트는 읽기도 어렵거니와, 내용에 대한 이해도 어렵게 만든다.

따라서 가급적 긴 문장은 짧게 나누고 읽기 쉽도록 구성하는 것이 좋다. 텍스트는 한줄에 한글 30자 내외, 영문 40-60자 내외가 읽기에 적당하다. 텍스트의 양은 화면 전체의 25% 이하가 좋다.

 

 

6) 웹페이지의 여백을 잘 이용한다.

좋은 타이포그라피의 조건은 사용한 서체와 본문, 헤드라인 그리고 여백이 대비와 조화를 이루는 것이다. 여백은 웹페이지의 다른 요소들에서 본문의 모양과 영역을 표시해 준다.

일관성 있게 사용된 여백은 웹페이지에 일관된 구조와 모양을 만들어 내기 때문에 전체 사이트에 걸쳐 통일감을 준다.

 

 

7) 문장 정렬은 왼쪽 정렬을 해주도록 한다.

본문과 여백을 일정하게 조화시켜 주기 위해 정렬이 필요한 것이고 정렬 방법은 레이아웃의 형태에 따라 왼쪽정렬, 오른쪽 정렬, 양끝 정렬, 가운데 정렬, 비대칭 정렬방법 등이 있다.

웹디자이너들이 텍스트를 보여주기 위해서 양끝정렬을 사용하는 경우가 종종 있다. 그렇게 해서 좌우의 여백을 동일하게 보여주면 본문의 모양이 더 깔끔하게 보이기 때문이다.

그렇지만 양끝 정렬은 글자나 단어 사이에 여벌의 공간이 들어가기 더 때문에 본문의 내용을 읽는데 방해되는 경우가 더 많다. 그러므로 본문의 오른쪽 여백부분이 약간 울퉁불퉁 해지더라도 왼쪽정렬을 사용하는 것이 좋다.

 

 

8) 중요한 단어는 좌측상단에 배치해 둔다.

인간의 시각은 좌측 상단에서 우측 하단으로 이동하는 것이 보편적 이므로 눈에 띄어야 하는 중요한 내용 (제목, 내용의 핵심요약, 가장 중요하다고 생각되는 메뉴 등)은 가능한 좌측 상단에 배치하는 것이 좋다.

 

 

9) 스타일 시트를 주의해서 사용한다.

웹타이포그라피의 가장 두드러진 특징은 가변적인 요소들이 많다는 점이다. 웹페이지는 각각 다른 운영체계를 사용하는 사용자의 컴퓨터 시스템에 의해 레이아웃, 서체 등이 항상 다르게 보일 가능성이 있다. 웹에서 타이포그라피를 기본적으로 제어해 주는 HTML은 HTML이란 언어체계를 만든 사람들이 대부분 개발자였던 관계로 처음부터 그래픽 디자인에 대해서는 크게 고려하지 않고 만들어졌다.

따라서 HTML만 가지고는 폰트의 크기와 자간, 행간, 정렬 등을 자유롭게 조절하기 힘들기 때문에 가독성에도 문제가 생기고 미적 측면에서도 여러 가지 문제점이 발생 하는등 효율적인 타이포그라피가 사실상 불가능하다. 그래서 등장한 것이 바로 스타일 시트다. 요즘 대부분의 대형 웹사이트들이 스타일시트를 사용한다고 해도 과언이 아닌데 스타일 시트의 가장 강력한 기능은 바로 짜임새 있는 타이포그라피를 가능하게 해준다는데 있다.

이렇게 강력한 제어 기능을 갖는 스타일 시트지만 아직 모든 브라우저에서 지원하는 것이 아니며 Explorer 3.0 이상, Netscape 4.0 이상에서만 가능하다. 즉 웹브라우저의 버전과 종류에 따라 지원이 안될 수도 있고, 또 적용된 결과에 차이가 생길 수도 있으므로 사용자의 편의를 고려하여 어떻게 융통성 있게 적용할 것인지에 대해 좀 더 생각해 볼 필요가 있다.

 

 

10) 문화적인 환경을 고려한다.

각 지역, 나라마다 역사와 문화가 다르듯이 사용하는 글자나 숫자중에 행운의 숫자로 여기거나 터부시하는 글자가 있을 수 있다. 예를들어 우리나라에서는 빨간색으로 사람의 이름을 쓰지않는다. 그리고 4자는 불길하다고 해서 좋아하지 않고 나이가 많은 사람들에게는 탈네모꼴의 자유분방한 글자가 낯설게 느껴질수도 있다.

타이포그라피 자체가 커뮤니케이션의 수단이다보니 이처럼 사람들의 오래된습관이나 전통 집단의 취향이나 특성을 무시할 수가 없는 것이다. 따라서 해당 집단이나 사회의 문화적인 환경을 배려한 타이포그라피 디자인을 하도록 한다.