도티의 디자인 가이드 ep.2 - 타이포그래피 (Typography)

원래 시작한 직후에는 열의에 넘치게 마련입니다. ep.2를 준비해보았습니다.

제가 보는 웹디자인, 혹은 시각디자인에서 중요한 게 네 가지 정도 있는 것 같습니다. (아무런 이론적 배경을 토대로 하는 말이 아니므로 잘아시는 분 계시면 한수 가르침도 환영합니다)

1. 비율 (proportion, grid, spacing, layout & composition)
2. 타이포그래피 (typography)
3. 이미지 (illustration, icon, metaphors, graphic elements & backgrounds)
4. 색상 (color combination - harmony & emphasis)

여기에서 UI/UX(User Interface/User Experience)의 영역으로 가면서 전체적인 흐름(flow: eye-movement, affordance, scenario 등)이 가미되고, 물리적인 제품으로 오면 고려해야할 것이 크기, 무게(실질 무게, 체감 무게, 무게 중심 등), 재질/소재, tactile 피드백 등이 추가됩니다.

하지만, 일단 간단히 위에 4가지만 제대로 해도 웹디자인 그냥 그럭저럭 볼만하게 나온다라고 생각하시면 될 것 같구요, 쓰기 편하게 까지 하시려면 앞서 말한 흐름(flow)을 깊게 생각해보시면 될 것 같습니다.

복잡해지는 듯 하니, 이어서 바로 2탄들어갑니다. ㄱㄱㅅ.

ep.2 타이포그래피 (Typography): 글과 문자의 디자인

저번 에피소드에 비하여 갑자기 방대한 범위의 깊은 세계로 뛰어드려는게 아니냐는 지적은 미리 빠삐코로 흘리겠습니다.

사실 타이포그래피 역시도 전문적인 교육을 받아야만 함부로 떠들 수 있는 영역이지만, 그와 상관없이 함부로 떠들겠습니다. 사실 번역이 참 애매한 단어이다보니, 영어를 그대로 발음나는대로 적어서 사용하는 디자이너들의 잘곤(jargon)입니다.

간단히 말하면, 똑 같은 글자라도 좀더 멋지게 보이게 한다거나, 똑 같은 글이라도 좀더 읽기 쉽게, 혹은 스타일있게, 분위기에 맞춰 사용하는 방법입니다.

1. 잘 보이게, 잘 읽히게 - 가독성과 일독성 (Legibility and Readability)

글이나 글씨는 뭐니뭐니해도 잘보이는게 장땡입니다. 물론 이런저런 "디자이너스러운" 웹사이트들에는 인간의 눈으로 보지말라고 강요하는 듯한 (사실 속마음은 영문법이 dung판인걸 들키기 싫어서 작게 써놓았다고 받아들입니다) 자그마한 글씨들이 이미 배경이미지의 텍스쳐로 자리잡혀있는 경우도 많이 있습니다. (물론, 저도 종종 오용애용합니다만..)

사실 굉장히 사소해보이는 듯 하면서도, 살짝만 신경써주면 뭔가 제대로 된 (발만으로 만든게 아니라 손까지 사용한듯한) 느낌을 주는 사이트가 나옵니다. 예전 2000년도 닷껌버블 초창기의 수 많은 개인홈페이지 출신의 웹디자이너들(네, 접니다)이 만들던 사이트들이 대부분 이런 것에 대한 개념없이 마구 찍어내다보니, 안 좋은 관행이 많이 남아있다고 보구요.

시대유감은 이정도에서 그만두고, 실전으로 갑시다.

A. 세리프(serif), 산세리프(sans-serif), 그리고 장식체

간단하게 세리프는 바탕체, 산세리프는 돋움체, 그리고 궁서체 정도라면 세리프와 장식체 정도의 사이라고 보시면 될 것 같습니다. (사실 정확한 표현은 아닙니다만, 대충 느낌은 아시겠죠?)

보시다시피, 세리프가 적용된 서체들은 글씨 끄트머리에 꼬불랑 꼬불랑한 장식들(이게 바로 serif)이 작게 달려있습니다. MS워드에서 영문으로 작성하실 때 기본 서체로 나오는 Times New Roman 같은 것이 세리프 서체이지요. 반대로 산세리프는 Arial나 Helvetica 같이 깔끔하게, 그 장식들(serif)이 없다(sans)고 해서 sans-serif인 것입니다.

장식체는 굳이 설명안드려도 아시리라 믿구요.

그런데 굳이 왜 구별을 하는가?

약간의 속성만 아시면 됩니다.

우선 세리프(꼬불텅)이 있는 것들은 글씨가 적당히 클 때 읽기기 굉장히 좋습니다. 저 꼬불텅거리는게 알게모르게 사람의 시각 인지에 영향을 주어서 횡적 움직임(눈알이 옆으로 굴러가는 것)을 돕습니다. 옆으로 죽죽 글을 읽을 때는 세리프가 좋다는 것이지요. 우리가 읽는 대부분의 책들, 신문들 (그리고 미국의 언론사 홈페이지들)을 보면 본문은 모두 세리프가 적용된 서체로 되어있다는 것을 알 수 있습니다. 은근 몰랐죠? 신기하죠?

그 반면에 산세리프 서체는 글씨 자체가 주목성이 뛰어나서 눈에는 잘 들어오지만, 옆으로 편하게 읽기에는 알게모르게 부담스럽습니다. 그래서 주로 제목이나 강조해야하는 문구, 짧은 글에 사용되지요. 이를 잘곤(jargon)으로는 가독성(legibility)은 높지만 일독성(readability)는 떨어진다고 합니다.

아래 이미지를 보시면 세리프의 또 다른 효과를 체험하실 수 있습니다.

영문이라서 둘다 읽기 어렵다! 라고 해버리시면 뭐 대책없습니다만, 정답을 그래도 알려드리자면, 위에 것이 읽기 쉽습니다. 사람이 글씨를 읽을 때는 눈이 은근 대충 대충 읽기 때문에 (이걸 활용한 심리학 게임들도 있죠) 글씨의 아래 반을 날려버리면 횡적움직임을 돕는 단서가 더 많은 세리프가 실제로 더 잘읽힙니다.

그런데 여기서 변수가 생깁니다. 아마, 예리하신 분들은 "이봐, 지금 자네가 쓰고 있는 이 장문의 글도 산세리프가 아닌가!"라고 하실지 모르겠는데요, 바로 그겁니다.

흔히 인쇄물(200 ~ 300dpi 이상)은 우리가보는 모니터 화면(주로 72dpi)보다 훨씬 촘촘하기 때문에, 자그마한 점도 깔끔하게 잘보이게 되고, 고로 세리프 서체를 사용해도 해도 읽기에 부담이 없습니다만, 모니터 상에서 폰트크기 8pt로 바탕체를 써보신 분은 "아하!" 하실겁니다. 절대 읽으라고 나오는 글씨가 아닙니다. 하지만 산세리프 폰트들은 작은 크기에서도 읽을 수 있습니다. 그만큼 단순하기 때문이지요.

그래서, 화면의 해상도가 상대적으로 낮은 컴퓨터 모니터들에 맞게, 웹사이트들은 대부분 본문 역시도 산세리프 폰트를 사용하고 있습니다. 국내 유수 포털들도 그래서 대부분이 '돋움'을 기본 서체로 지정해서 사용하고 있습니다.

하지만 폰트에 따른 느낌이라는 것도 분명히 있기 때문에, 자신이 전달하고자 하는 느낌과 스타일에 맞는 서체를 고르는 것도 중요하겠죠.

B. 자간(letter-spacing), 줄간(line-spacing), 등등

Spacing에는 여러 종류가 있습니다만, 웹디자인에서는 크게 두 가지를 많이 사용하게 됩니다. 포토샵에서는 이 기능을 사용하려면, 글꼴 툴을 사용할 때 속성 윈도우를 따로 찾아서 켜주어야 합니다.

속성윈도우는 요렇게 생겼습니다:

먼저 자간은, 말그대로 글자간의 간격을 의미하구요.

제일 위에가 자간0, 다음이 자간 50, 다음이 자간 100, 다음이 자간 200입니다. 자간은 평소에는 별로 신경안써주셔도 되나 (웹브라우저나 포토샵 기본값이면 크게 무난합니다) 일부 서체(폰트)에 따라 자간이 약간 엉망으로 나오는 경우에는 값을 조정해주어야 합니다. 위에서 보는 것처럼 글씨 사이가 너무 넓으면 아무래도 읽기 힘들어지거든요.

다만, 읽기 편한것과 상관없이 나중에 2번째 파트에서 배울 '그럴싸하게 타이틀 문구 꾸미기'를 위하여 이런 기능이 있다는 걸 알아두시면 좋습니다.

줄간은 매우 중요한데요, 아래의 세 가지 예시를 봅시다.

물론, 처음은 너무 빡빡하고, 가운데가 읽기에 적당하고, 마지막은 마치 한 편의 시집을 보는 듯 하죠. 그런데 웹브라우저의 특성상 기본줄간격이 많이 빡빡합니다. 웹 상에서 화면에 보여지는 스타일을 정의해주는 CSS 같은데서 line-height 속성을 지정해주면 조금 더 읽기 편해집니다.

대충 경험적으로 line-height: 1.4em 에서 1.8em 정도, 혹은 140% ~ 180%정도의 값이 웹상에서 읽기에 적당한 값인 듯 합니다.

/* CSS코드로 치자면.. */
body { line-height:1.5em; }

이게 또 글씨가 세로로 긴 녀석들이나 세리프 vs 산세리프에 따라서 적정 줄간격이 달라집니다만, 웹상에서 동적으로 변하는 내용이 많은 환경에서는 어느 정도 퉁~ 쳐서 일괄적으로 적용해주시는 편히 마음 편합니다. 아시죠? Efficiency.

2. 그럴싸하게 타이틀 문구 꾸미기

2번은 1번에 비하여 기교에 가까운 내용입니다. 하지만 역시 기교를 배우는게 처음에는 재밌죠.

웹 디자인을 하다보면 섹션(인덱스) 페이지나 특정 메뉴의 타이틀을 만들어야 하는 경우가 빈번하게 생깁니다. 여기서 그냥 쓰리순(순수, 순진, 순박)하게 제목을 있는 그대로 쳐줄 수도 있지만.. 약간의 기교를 발휘하면 마치 뭔가 살짝 신경쓴듯한 효과를, 어떻게? 에피션트하게 만들 수 있습니다.

세 가지에 신경써주세요. 1) 제목과 부제(설명) 글씨간의 비율, 2) 끄트머리를 서로 맞추어 주는게 좋을 지 판단하기, 3) 글씨의 색상/명도와 무게(weight; 굵은/얇은 글씨를 의미)를 이용하여 리듬감을 더해주기.

바로 예를 보자면,

위에서 아래로 내려오면서, 2단계에서는 글씨의 크기와 좌우폭을 맞추고 (앞에서 배운 자간도 적용), 3단계에서는 명도를 조절해주면서, Hello와 World의 글자 무게를 달리하여 리듬감을 더해보았습니다.

사실 별거 아닌데, 저렇게 하기만 해도 '그럴싸함'이 한층 살아나죠. 이런걸 일본어로는 야미, 한글로는 야메라고 합니다.

저는 이걸 Papree.com의 우측 사이드바에 남발하였습니다. 후후.

사실 자세히보시면, 한거라고는 처음거에 둥그런 테두리를 넣고, 가운데에 이미지를 넣은 것 말고는 모두 타이포그래피 기교입니다. 하지만, 보는 사람은 정돈된 느낌과 리듬감, 그리고 눈의 움직임이 서브 타이틀로 차례 차례 이동되는 효과가 생기게 됩니다.

5분 ~ 10분 투자하면 자신만의 괜찮은 공식을 발견하실 수 있을 겁니다.

3. 좋은 서체 고르기

자, 피자헛을 그만두고 나온 요리사가 파파존스를 창업하면서 내건 카피가 있죠? 보다 좋은 재료가 보다 좋은 피자를 만든다고..

좋은 서체만 잘 골라도, 꽤 괜찮은 느낌의 타이포그래피를 연출하실 수 있습니다.

대충 유명한 것 중에, 크게 실패하지 않는 서체들을 몇 가지만 말씀드리자면..

산세리프 계열에서는 Myriad Pro 시리즈(애플에서 요즘 미는 폰트와 매우 매우 매우 흡사하죠. 으훗), Helvetica 시리즈, Univers 시리즈(네, e가 없습니다) 등이 있구요, 세리프 계열에서는 Georgia나 Garamond가 많이 쓰이는 편입니다.

애플에서 예전에는 Apple Garamond라는 시리즈를 밀었던 적이있죠. Facebook에서는 웹 폰트로 Lucida Grande를 밀고 있구요, 그 외에도 많은 사이트들에서 웹 폰트로 Verdana나 Tahoma를 애용하고 있습니다.

중요한건, 어디에 어떤 목적으로 사용하는가인데요.. 일례로,

위의 폰트는 Inkburrow라는 폰트로, 홍대나 명동 같은데 옷가게의 간판 등에 많이 쓰이는 서체입니다. 사람들이 "뭔가 디자인 스럽다"라고 표현하는 경우가 있는데, 이러한 폰트는 주목성과 개성이 강하며, 그만큼 주는 느낌도 상당히 구체적입니다.

반면, 그러한만큼 빨리 질리게 마련이고, 아울러 가독성과 일독성은 현저히 떨어지기 때문에, 말그대로 제목이나 타이틀에 어느 정도 유행을 타는 느낌으로만 사용하시길 권해드립니다.

결국 디자이너마다 자신의 취향에 맞는 서체가 생기게 마련인데, 그렇다고 하여서 자신이 좋아하는 것만 고집하기 보다는, 만들고자 하는 사이트의 느낌에 맞는 서체를 잘 찾아보시는게 좋습니다.

아아, 어쩌다보니 내용이 또 상당히 길어졌는데요..

사실 타이포그래피는 여기에서부터 시작입니다. 수 많은 예술과 디자인의 영역이 타이포그래피안에 포함되기도 하며, 단순한 글/글자의 꾸밈이나 정보 전달만이 아니라, 감각과 감성의 표현까지 아우르는 거대한 분야이지요.

흥미로운 자극을 원하시는 분들은 flickr.com에서 typography로 검색해보시는 것도 좋을 것 같습니다.

이번 회를 통하여 대충 타이포그래피에 대하여 맛을 보셨기를 바라오며, 시중에 서점에 가보시면 안그라픽스에서 나온 타이포그래피 교과서도 나와있으니, 조금 더 체계적인 학습을 원하시는 분은 책과 온라인 타이포그래피 사이트들을 구글링해가시면서 체험해보시길 바랍니다.

끝~

* Image courtesy of fruitcakey, Silent Noise, chardos88