여러분 안녕하세요 이번 주는 문자디자인 에서 고려해야할 몇 가지 측면에 대해서 얘기하고자 합니다. 언어가 인간이 의사를 전달 하기 위해 사용하는 음운체계라고 한다면 문자는 그것을 시각적으로 표현한 기호체계이며 그로써 언어의 기록이 가능해졌습니다. 문자가 인간의 메시지전달의 효율성을 위한 커뮤니케이션 디자인에 사용되어온 과정에 대해서는 첫째 주 강의에서 다루었습니다. 이제 글자 형태의 성격과 그 응용법에 대하여 알아봅니다.
웹페이지 스크립 랭귀지인 HTML은 컴퓨터 네트웍 상에서 플랫폼에 관계없이 Text 데이터를 전송하기 위한 방법으로 개발되었으며 이를 보기 위한 브로우져의 개발과 함께 인터넷의 대중화가 앞당겨 졌습니다. 컴퓨터 스크린 상에 나타나는 문자의 형태는 그 특성상 한정된 픽셀의 조합으로 보여지기 때문에 문자의 세밀한 형태가 무시되어 인쇄 프로세스에서만큼 문자형태의 미묘한 차이를 느낄 수 는 없습니다. 그러나 인터넷의 속도가 빨라지고 그래픽데이터를 수용하기 시작하면서 웹페이지도 기존의 인쇄물과 같이 성격을 정하고 강조하기 위한 로고가 사용되고 있으며 이는 웹 디자인에 있어서 빼놓을 수 없는 요소가 되고 있습니다. 얼마 전 새롭게 인터넷 사업을 시작하는 친구에게서 전화를 받았습니다. 그 친구는 새로 구축할 웹페이지가 방문자들에게 인상적으로 보여지고 쉽게 기억될 수 있도록 웹서비스에 시각적 성격이 필요하다며 일괄적으로 사용할 로고의 디자인과 제목서체의 결정문제에 대해 상의한 적이 있습니다. 웹 페이지에서 사용될 문자의 성격을 결정하는 일은 그 페이지를 만들기 위해 디자인적 접근을 하기 위한 기초단계라고 볼 수 있으며 이번 시간은 이러한 문제에 대해 논의하고자 합니다.


웹 페이지에 사용되는 서체와 로고의 예

문자형태의 종류

문자를 새롭게 디자인한다는 것은 여간 까다로운 일이 아닙니다. 왜냐하면 문자는 전통적으로 써오던 형태의 습관적 인식 위에 시지각 특성에 입각한 조형원리들이 효과적이며 기능적으로 잘 어우러져야 하며 특히 한글의 경우 조합될 수 있는 가짓수를 모두 디자인해야하기 때문입니다. 그래픽 디자인에서는 이러한 영역을 레터링 디자인이라든가 타입페이스 디자인이라고 하는 전문영역으로 구분하고 있으며 이 분야의 사업을 하는 많은 폰트회사들을 볼 수 있습니다. 서체의 성격을 크게 구분 지어 본다면 우선 영자체인 로만(Roman)체 개열의 세리프(Serif)체 와 산세리프체가 있으며 이는 획의 시작과 끝부분에 장식적 돌기의 있고 없고를 기준으로 나누는 것입니다.

산세리프체와 세리프체의 비교

세리프란 전통적으로 글자를 써오던 습관에서 비롯된 것으로서 영문의 경우는 로마시대 기념비의 글자체에서 유래한 획의 끝형태 성격을 사용하는 것으로 현재 알파벳의 대표적 성격이 되었으며 이는 글자들의 정열상태가 좌우로 가지런히 보이게 하는 역할을 하여 현재까지 고전적인 아름다움을 표현할 때 많이 사용됩니다. 한글의 돌기는 영문의 세리프와 같이 이해할 수 있는데 이는 한자의 붓놀림에서 오는 성격을 표현한 것으로 붓의 운동감을 표현하는 동시에 역시 가독성이 좋아 본문서체로 많이 사용되고 있습니다. 반면에 획이 없는 글자는 영문에서는 산세리프(Sans serif)체 라고 하며 우리나라와 일본에서는 이를 고딕체라고 부릅니다. 고딕체는 영국 산업 혁명 이후 합리주의 시대풍조를 타고 널리 퍼져 1차 대전 후 독일에서 일어난 바우하우스(Bauhous)운동을 배경으로 하여 글자의 기능주의적 표현의 시도로 시작되었으며 현대적이고 이지적인 아름다움을 가지고 있습니다. 한글 고딕체의 가독성은 명조체보다는 떨어지지만 눈에 쉽게 띄는 특성이 있어 표제용으로 많이 쓰이고 있습니다.

이밖에도 손글씨에서 오는 아름다움을 중심으로 디자인한 스크립트체(Script)가 있으며 이는 우리의 초서체에 해당합니다. 또한, 팬글씨에서 오는 성격을 강조한 캘리그라피(Caligraphy)나 그림과 문자를 하나의 형태로 표현한 장식체 등이 있습니다. 문자의 형태적 성격을 정확히 정의할 수는 없으며 위의 몇 가지 성격과 그 장점들은 문자가 사용될 내용의 목적에 맞게 적절히 혼합되어 디자인하게 됩니다.

캘리그라피 (Calligraphy)

한글 고딕과 명조의 장점을 두루 살린 그라픽 체


올드로만(Old Roman)체
로마사람들의 손에 의해 트라야누스 황제의 기념비 <서기 124년)에 새겨진 글자체로서 위엄과 장엄한 인상을 주고 있는 영자에서 가장 기본적인 글자체이다.

가독성 (Readability)

문자를 디자인하는데 있어서 가장 중요한 것은 가독성(Readability)으로서 이는 문자가 연이어 쓰였을 때 얼마나 빠르고, 정확하고, 쉽게 읽히는가에 관한 것입니다. 가독성이란 본문 속의 자간과 행간의 차이에서 영향을 받기도 하며 서체디자인 자체에서도 이에 대한 고려가 필요합니다. 대게 문자의 디자인은 가독성을 높이기 위해 그 기준선을 정하여 문자의 시각적 중심을 이에 맞추어 많은 글자가 가로 혹은 세로로 놓여있을 때의 정렬상태를 미리 예측하여 디자인합니다. 영문체는 가로쓰기를 전제로 하여 디자인된 것으로서 획간(문자 속의 세로획의 간격)의 간격이 일정하고 상하에 엄격한 기준선을 가지고 있으므로 본문서체로 쓰였을 때 무척 가지런하게 보입니다. 반면 한글이나 한문은 획의 갯수에 관계없이 네모틀에 맞추어 만들어져 한글자 한글자의 색이 달리 보이며 본문서체로 사용되었을 때 들쑥날쑥해 보이는 경향이 있습니다. 한글의 기준선은 이러한 어려움을 해결하기 위해 윗줄이나 아랫줄 정렬방식을 취하기도 하며 그 예로서 안상수체가 대표적입니다.


안상수 체




VariexLight체로 타입한 글자의 조합을 가독성을 높이기 위해 재조정한 예
좌:스크린 상에 타입된 상태, 우: 자간, 행간, 획의 길이를 조정하여 가독성을 높혔다.

로고타입 디자인

로고타입(Logotype)은 단체의 이름이나 회사의 상품명 등을 지속적이고 일관적으로 소비자에게 인지될 수 있도록 디자인한 문자 이미지를 말합니다. 길거리의 은행간판에서 손목시계 위의 조그마한 브랜드 문자에 이르기까지 기억에 남기 위한 개성있는 글자체를 우리는 많이 접할 수 있으며 슈퍼마켓의 상품 포장제에 인쇄되어 있는 브랜드 로고타입 또한 소비자의 선택을 유도하기 위해 신중히 고려되어야 하는 디자인 대상입니다. 웹 디자인도 그 내용에 대한 사용자의 호감이나 선택도를 고려할 때 이러한 접근 방법은 필요합니다. 웹 디자인에서 사용하는 로고 타입의 조건이 몇 가지 있다면 다음과 같습니다. 첫째로 우선 잘 읽혀야 합니다. 로고는 심볼과는 달리 구체적 의미를 오도됨이 없이 정확하게 전달되어야 하므로 전통적 문자디자인의 원리로 해석하여 디자인하여야 합니다. 두번째로는 그 내용의 성격을 함축적으로 나타낼 수 있어야 합니다. 화장품 과 전자제품에 적용되는 브랜드 로고의 성격이 다르듯이 포장제 위의 상품이름은 그 안의 제품의 성격을 대표합니다 . 웹페이지에 사용되는 표제 로고는 그 뒤에 준비되어 있는 여러 페이지의 성격을 대변하는 것이며 이는 웹 정보를 필요로 하는 잠재적인 사용자들의 취향을 반영하여 (이를 광고에서는 소구력의 증대라고 합니다.) 신속하고 효과적인 커뮤니케이션을 기대할 수 있습니다. 세 번째로는 전체적인 형태가 보기 좋아야 합니다. 즉 문자의 기능적인 면과 함께 심미적인 면도 함께 고려되어야 하며 이를 위해서는 문자 디자인에 있어서도 지난주에 다루었던 조형의 기본원리들이 똑같이 적용되어야 합니다. 네 번째로는 독창적이어야 한다는 것입니다. 독창적이라는 것은 남과 다르다는 것입니다. 개성 있는 글자체의 사용은 다른 웹페이지와의 차별화를 유도하여 사용자의 호기심을 유발하고 기억하게 되는 동기가 됩니다.



스크립체가 웹페이지에 사용된 경우






뉴욕타임즈의 웹 페이지, 신문명을 포함한 대부분의 헤드라인은
로마체의 그래픽 화일로 되어 있다.



기존에 있는 글자체의 조합방법을 바꾸어 새로운 감각으로
다시 디자인한 경우




버튼의 경우 링크된 페이지의 로고를 버튼 이미지로 적용해 놓으면
사용경험이 있는 방문자는 다음번엔 훨씬 빠르게 인지할 수 있다.

디지털 타입페이스

전자출판산업에서는 화면에서 작업할 때 필요한 스크린폰트와 프린터에서 인식해야 하는 프린터 폰트 (혹은 아웃라인 데이터)로 나뉘어 있습니다. 대표적 그래픽 프로그램인 어도브 포토샵 (Adobe Photoshop)과 일러스트레이터(Illustrator)는 자사의 프로그램을 위한 디지털 폰트관리 언어체계로서 포스트스크립 (PostScript) 랭귀지를 사용하고 있으며 이는 전자출판계의 새로운 시대를 열어준 주목할 만한 기술입니다. 웹에서는 컴퓨터 스크린상의 보여지는 상태에서의 문자모양을 중시하게 되므로 아웃라인 데이터를 가지고 그래픽 프로그램 상에서 그래픽 화일로 변환시켜 사용하며 대부분의 디지털 폰트들은 그 자체내에 커닝값 (Kerning data:앞뒤의 문자형태에서 오는 빈공간의 영역에 따라 자동으로 자간을 조절해 주는 장치) 을 가지고 있으므로 자간이 자동으로 가리런히 보이게 됩니다. 만약 그렇지 않은 경우에는 자간을 세밀히 조정하는 것이 필요할 수 도 있으며 웹페이지의 심볼로고로 사용하는 경우라면 로고의 성격에 맞추어서 자간을 창조적으로 재조정 할 수 도 있는데 이러한 과정을 리가쳐(Ligature)라고 하며 글자에 시각적인 활력을 주는 방법입니다.


좌:커닝(kerning)이 적용되지 않은 경우, 우:커닝이 적용된 경우


서체에 따라 리가쳐(Ligature)는 .fi 와 fl사이에서는 자동으로 적용된다.



좌:리가쳐가 적용되지 않은 경우, 우:리가쳐가 적용된 경우




이번주는 웹 페이지 정보의 대부분을 차지하는 문자의 형태와 조합방법에 대해 간단히 살펴보았습니다. 문자를 잘 읽히도록, 그러면서 보기에도 좋고 또한 개성 있게 보이도록 하는 일은 참 어렵습니다. 또한 DTP기술이 발전하면서 디자이너들에게 예전에 전통적인 타입세터 (Type setter : 활자판을 조합하는 전문가들)나 문자 원도 제작자의 역할이 요구 되면서 더욱 해야 할 것이 많아지고 있습니다만 역시 무시할 수 없는 디자인의 중요한 부분입니다. 이번 강의가 여러분의 문자 디자인에 대한 이해의 폭이 넓어진 계기가 되었으면 좋겠습니다. 감사합니다.