본문 바로가기

design

월간'웹디자인' 웹사이트의 한글타이포그래피




---------------------------------------------------------------------
웹사이트의 한글타이포그래피. 기본에 대한 다짐에서부터.


우리들의 삶이 유난히 특별한 것들에 관심과 자극이 집중되어서인지 '일상적인' 것에 대한 고마움과 중요함은 매번 놓칠 때가 많은 듯 하다. 물과 공기가 그런 것이어서 우리는 스스로의 환기가 있을 때에만 비로서 물과 공기에 소중함을 부여하게 되는데, 디자인 환경에 있어서도 그런 물과 공기와 같은 것들은 많이 있다.  예를 들면 컴퓨터 환경에서 디자인하는 이들에게는 데스크탑 화면의 배치와 커서의 크기,  윈도우의 스크롤바와 같은 것들이 있는데 이들은 눈에 잘 안띄는 듯 하면서도 디자인환경의 근본적인 환경을 좌우하는 중요한 요소임에 틀림없다.
화려한 움직임과 정신을 쏙 빼놓는 환상적인 이펙트의 웹사이트들이 온라인에 가득한 요즘, 우리들의 관심사는 주로 '더 Cool하게, 더 역동적으로, 더 화려하게' 일수도 있지만 한발자국 물러나 좀 더 근본적인 눈으로 웹사이트를 보다보면 물과 공기와 같은 근본적인 요소들이 더 중요하며, 그런 요소들이 디자인의 어려운 문제들을 푸는 중요한 실마리로 자리잡게 되는 경우를 발견할 것이다.

--------------------------------------------------------------------------------
글자. 그리고 한글.

우리나라에서 디자인을 하려면 한글타이포그래피의 문제는 디자이너들에게 물과 공기와 같은 가장 일상적이며 기초적인 일로서, 이것이 극복되지 않은 환경에서 디자인 performance를 수행하기란 매번 힘겨운 일이다.  우리는 스펙타클한 화면의 움직임과 신기한 인터랙션, 기발한 상상력이 있음에도 어떤 시각적 매력도 느낄 수 없는 디자인을 마주할 때가 있는데  대부분이 이런 베이직한 문제를 극복하지 못할 때 생긴다. 맥주나 차가 맛있으려면 물이 맛있어야 하는 법.  웹디자인의 기본질서와 방법에도 늘 타이포그래피가 따라다니는 것은 모든 디자인이 물과 같은 공통된 기본요소로서 커뮤니케이션의 도구, 글자를 사용하기 때문이다.   특히, 영문과는 확실히 다른 한글의 특징을 이해하지 못한 상태에서 소위 '세련된(?)' 디자인을 하기위한 여러가지 디자인 방법들- 모션그래픽과 서체의 남용 등-은 좋은 커뮤니케이션을 위한 디자인의 본질로부터 점점 거리를 두게하는 실수들이다.  그렇다면 물좋은(?) 디자인을 위한 한글타이포그래피의 노력은 어디서부터 어떻게 해야 할까?

정답을 굳이 말한다면, 오랜 시간동안의 꾸준한 경험과 훈련,  그리고 타이포그래피에 대한 애정이 전부일 것이다. (대부분 이런 정답에  실망을 하게 되지만 어쩔 수 없다.) 초보 웹디자이너들의 어떻게 하면 웹디자인을 잘 할 수 있을까의 고민에  <얀치홀트의 타이포그라픽 디자인> 과 <훈민정음 해례본>을 권한다면 어떤 표정을 지을까.   기본이 없으면 아무것도 제대로 할 수가 없다는 것을 우리는 알고있지만  늘 생각과 행동이  일치하는 건 아닌 것 같다.  

그렇다고 한글타이포그래피가 늘 높고 부담스런 산처럼 느껴진다면 디자이너로서 매우 우울할 뿐더러 재미도 없을테니,  자신감과  극복의 용기를 위해서라도 필자가 그동안 느껴왔던  좋은 타이포그래피에 대한 쉬운 접근방법들을  몇가지 소개할까 한다.  좋은 타이포그래픽 디자인을 위한 방법적인 여러 질문들에  명쾌하면서도 쉬운 길을 떠올린다면 제일 먼저 '나쁜 타이포그래피' 를 하지  않는 것이 가깝고도 이해하기 쉬운 방법이 아닐까.  나쁜 것을 구별할 줄 안다면 좋은 것을 볼 수도 있으며 어느정도 실패의 정도를 예방(?)할 수 있기 때문이다.



--------------------------------------------------------------------------------
나쁜 한글타이포그래피란?

1) 가독성이 없다. (제대로 읽히는가?)
2) 소리, 음색, 메세지, 기분, 감정, 성격, 리듬이 담겨있지 않다.  (우리는 신문에서 '서해 교전 총격전발생' 이란 타이틀을 가는 명조체로 작게 쓰지 않는다.)
3) 타잎페이스 고유의 완성도가 없다. (이름과 역사가 분명한 타잎페이스는 그 자체로 가독성과 심미성을 갖추고 있다. helvetica, univers, 고딕, 명조 등)
4) 내용의 전달순서가 헷갈린다. (사람이 말을 하는 것과 같다. 우리는 늘 '용건만 간단히' 라고 하지 않던가.)
5) 지루하다. (같은 말이라도 재밌게 전달하는 사람이 있고 그렇지 못한 사람이 있다. 유머감각도 그 중의 하나이다.)
6) 영문과 한글을 같은 방식으로 다룬다. (한식에는 포크, 양식에는 젓가락을 사용하면 맛도 모양새도 영 어색하다)

이정도의 체크리스트만으로도 타이포그래피에 대한 자기검열(?)이 가능할 듯 싶다.  때로는 예외의 경우가 있긴 하지만 이정도면 상식적일 것이다. 그래도 어렵다면 처음부터 다시 체크해보자.




--------------------------------------------------------------------------------
웹상에서의 한글 타이포그래피 한계를 정확히 알자.

타이포그래피는 커뮤니케이션의 최소단위인 활자(type)로 메세지를 전하는 기술이며 그래픽디자인 이상의 정확성과 질서를 필요로 한다. 일상생활에서 형태와 기능성을 충족시키는 역할 이외에도 한글자 한글자에 감정과 기분, 역사와 문화를 담고있는 것이 타이포그래피의 속성이라면, 웹사이트에서 기본이 되는 정보의 최소단위로 현재까지는 html로 보여지는 윈도우 기본서체가  웹디자인의 질적인 문제와 가장 직결된다.  편집디자인에서 가능한 본문서체의 활자선택과 세밀한 조정이 html상에서는 자유롭지 못하기 때문에 대부분의 텍스트 정보들은 무책임하게(?) 화면에 뿌려지게 되는 경우가 많은데 사실은 본문html텍스트의 정렬과 배치가 웹사이트에서 물과 공기와 같은 페이지의 환경을 만든다는 것을 염두해야 한다.  이미 굴림체, 9Pt의 활자스펙이 정해진 상태에서 단구성, 문단의 글줄길이, 머릿글의 형태, 들여쓰기의 유무,  본문칼라의 선택,  중요문구의 강조스타일 등이 디테일하게 다음어지지 않는다면 아무리 훌륭한 플래쉬컨텐츠와 네비게이션스타일이 있다 하더라도 좋은 페이지 디자인이 되기는 힘들다.  아무리 디자인을 공들여도 돋보이진 않지만, 못하면 낭패를 보는 것이 본문 컨텐츠의 타이포그래피임을 명시하자.



포토그래퍼 김욱씨의 2001년 사이트.  html폰트 설정을 궁서체로 하였으며 화면 안에서 자연스러운 공간활용과 솔직한 타이포그래피가 무척 인상깊었다.  다른 여타의 매끈한 플래쉬사이트와 비교할 때  '맛'이 다른 기분을 내서 좋았다.



--------------------------------------------------------------------------------
좋은 활자(typeface)를 구별하자. 그리고 쓰자.

종종 디자인 작업자의 컴퓨터를 체크할 때가 있는데 이름도 생소한 수백가지의 폰트를 보유하며 어떻게 사용해야 할지 스스로 통제불능인 경우를 볼 때가 많다. 그 많은 폰트를 하나하나 제대로 알고 사용을 하는 것일까? 많은 폰트의 보유가 디자이너의 무기가 될 수 있지만 때로는 자폭용 폭탄도 있음을 알아야 한다.  필자는 태생이 불명확한 low quality의 활자들을 적극적으로 디자인환경에서 제거할 것을 당부하고 싶다.  요리사가 각 요리에 맞는 양념과 재료를 정확히 알고 있을 때 훌륭한 요리를 만들수 있듯이 타이포그래피의 재료인 활자(typeface)에 대한 분명한 이해와 선택의 안목은 디자이너에게  필수적이다.  누구나가 컴퓨터에서 쉽게 활자를 골라쓰고 아무렇지도 않게 디자인을 쉽게(?) 할 수 있는 시대일수록 좋은 재료(활자)에 대한 선택은 타이포그래피의 시작이며 좋은 시각문화를 위한 디자이너의 책임임을 명심하자.




그렇다면 무엇이 좋은 활자이고 무엇이 나쁜 활자인가.  여러가지 기준이 있겠지만 쉽게 3가지를 말할 수 있다.

1) 역사가 있는가? (활자는 오래될수록 그 시대의 다듬는 과정을 거치면서 고도의 완성도를 갖추게 되어있다. Helvetica, Bodoni, Caslon, 고딕, 명조 등)
2) 타잎페이스의 패밀리를 갖추고 있는가? ( thin - light - medium - bold - heavy 와 같은 풍부하고 다양한 패밀리의 구성은 이미 그 안에 완성도 높은 스타일의 변화와 성격을 담고 있어 쳬계적이며 자유로운 타이포그래피의 재료가 될 수 있다.)
3) 감성과 스타일을 제대로 담고 있는가?  (활자가 말을 할 때 나와 교감하길 원한다. 느껴지는가.)

이는 타잎페이스의 가독성과, 조형성, 심미성을 얘기하는 것인데 폰트 제작회사(또는 디자이너)의 역량과 비례하여 이런 것들이 나타난다.  서체회사들의 웹사이트와 타이포그래피 관련 잡지를 통해 늘 정보에 접촉하는 것이 좋다.






--------------------------------------------------------------------------------
영문과 한글의 다른점을 알자.

늘 '서양식 세련됨'이 강조되는 우리의 디자인풍토에서 한글디자인이 갖는 어려움과 한계에 대해서는 많은 디자이너들이 저마다의 대응방식으로 그것을 극복하고 있지만,  안타깝게도 아직도 영문 알파벳을 타이포그래피의 '최선의 선택' 으로 생각하는 디자이너가 많은 것 같다. 그것은 영문활자가 갖는 특성 - 구조적 단순함과 제작의 용이성,  다른 언어에 비해 크기 비례 높은 가독성 등 -  을 한글의 특성보다 더 낫다 (better)의 개념으로 생각하기 때문이 아닐까 한다.  필자는 영문이 한글보다 '낫다(better)'  '못하다(worse)'  가 아닌 '다르다(different)' 의 개념에서 접근한다면 보다 많은 디자이너들이 자신감을 갖고 한글타이포그래피를 하지 않을까 생각한다.

"Think different"  Apple의 슬로건이기도 하지만 한글을 보는 디자이너의 시각에 견주어도 괜찮을 듯 싶다. 우선, 영문활자와 한글활자의 가장 큰 '다름' 은 그 태생(胎生)의 차이에 있음을 알아야 한다.  우리는 늘 영문과 한글을 동시에 다뤄야만 하는 상황에서 때로는 쉽게, 너무도 쉽게 타이포그라피를 슬-쩍 해버리곤 하는 경우가 있다. 예를 들면 일반적인 텍스트를 다루는 데 있어서 크기, 자간, 글자너비(폭),베이스라인의 기준을 한글과 영문에 같은 방식을 적용하는 식이다.



영문과 한글을 조율하여 서로간의 균형을 맞추는 것은 그만큼 정성과 디테일을 요구하는 힘든 작업이다. 이런 식으로 디자이너들은 함부로(?) 타이포그라피를 슬쩍 해버릴 수 있는데 그 다루는 기법과 테크닉도 중요하지만 사실 그 글자가 갖고 있는 태생(胎生)과 근본(根本)을 먼저 알아야 그 조절의 필요성과 원리를 발견할 수 있다.

첫째, 영문은 펜으로 쓰여진 역사를 갖고있고 우리 한글은 붓으로 쓰여진 역사를 갖고 있다. 이는 현재 컴퓨터에서 쓰는 글자의 타잎페이스모양까지 그 역사의 흔적을 담고 있는데 비슷한 형태의 영문 'A' 와 한글 'ㅅ'은 그 에너지가 다를 수 밖에 없다. (영문은 수평라인으로 끝의 형태를 인위적으로 자르지만 한글은 붓이 끝나는 방향으로 형태를 정직하게 마무리한다.)

둘째, 영문의 활자는 형태(shape)의 글자이고 우리나라의 글은 밀도의 글자이다. 중국의 한문도 우리와 비슷한 성질을 갖고 있으며 이는 글자 한자한자를 인지하는 방식이 정해진 사각면적안에 얼만큼의 획이 많이 들어있는지에 대한 차이로 인식한다는 뜻이다.('를'은 밀도가 높고 '그'는 밀도가 낮다) 영문은 글자의 밀도가 균일하여 형태차이로 인식될 뿐만 아니라 여백이 균등하여 전체 글 문단의 모양이 매끄럽다. 그래서 세련되었다는 서구식 느낌이 들게 되는 이유가 된다. (균일한 베이스라인)

반면 한글과 한문은 '울뚝불뚝'한 밀도감이 독특하여 그 나름대로의 맛이 훌륭하며, 단점이라면 좌우 수평의 유려함이 부족하기 때문에(균일한 베이스라인이 없음)자간을 좁혀주어 시각적인 흐름을 연결시켜주는 배려가 있어야 가독성이 높아진다. 물론 영문과 달리 세로로 글줄을 써도 가독성이 유지된다는 큰 장점이 있다.



이렇게 한글과 영문은 그 근본적인 속성이 다르기 때문에, 타이포그래피를 할 때도 각각에 맞는 조절을 반드시 해야하며, 활자의 선택에 있어서도 영문과 한글의 조합이 무리없는 궁합(?) 이 잘 맞는 활자를 선별해 사용해야 한다. 명조체와 세리프서체, 고딕체와 산세리프서체 가 대표적인 궁합의 예이다.
작은 차이가 명품을 만드는 것과 같다.


--------------------------------------------------------------------------------
우리나라의 일천한 디자인역사중에서 1990년대를 디자인혁명의 시기로 본다면 그 이면에는 사회,문화의 부흥과 미디어의 발전, 디자인도구(컴퓨터)의 보급 등을 이유로 들 수 있지만, 사실 좀 더 디자인에 친밀한 안목으로 본다면  '한글타이포그라피'의 각성과 재발견의 시기가  가장 강열한 시기였음이 큰 이유가 아닐까 한다.  젊은 디자이너들의 한글에 대한 자신감과 옛 한글에 대한 애정과 관심은 분명히 우리나라의  디자인을 경쟁력있는 디자인으로 발전하는데 일조하였으며,  21세기의 디지탈환경에서 모션그래픽, 인터랙티브 디자인같은 뉴 미디어 디자인이 크게 부각될 때일수록  커뮤니케이션의 본질에 대한 디자인의 시각과 한글타이포그래피와 같은 활자의 목소리에 대한 애정이 우리의 디자인을 보다 풍요롭고 탄탄하게 함을 웹디자이너들 또한 잊지않았으면 한다.



--------------------------------------------------------------------------------
새로운 기술보다 중요한 것은 개념상의 깊이나 창의성, 그리고 유머 감각이다.  첨단기술과 장비가 부족하다는 것은 작품의 질을 더 높일 수 있는 기회가 되며, 새로운 기술에 대한 나의 생각을 말하자면 그것을 두려워 할필요도 그리고 피해서도 안되지만 너무 맹신해서도 곤란하다는 것이다.  나는 기본이 안 된 디자이너가 신기술 만으로 성공하는 것을 본 기억이 없다.
(Saul Bass 1920 - 1996)