폰트를 선택할 때 고려해야 할 것 6가지
듀오톤 BX 인터널 세미나
듀오톤은 매년 살몬(멤버)들의 성장을 위해 인터널 세미나를 제공합니다. 각 팀의 리더가 그 팀만의 관점으로 세미나를 준비하죠. 살몬들은 세미나를 통해 실무에 도움되는 지식은 물론, 실무를 하다보면 간과할 수 있는 본질에 대해서도 고민해보는 시간을 갖습니다. 디렉터분들의 경험을 간접적으로 접하며 실무에서 더 잘해나갈 수 있는 노하우, 자극과 영감을 받으며 성장을 위한 발판을 마련합니다.
오늘은 BX팀 김의진 책임님께서 진행하신 인터널 세미나 현장을 전해드립니다. BX 세미나이지만 팀과 관계없이 모든 살몬들이 참석합니다. 2020년 7월 21일 화요일 오후, 듀오톤 사옥 2층에서 세미나가 진행되었어요.
김의진 BX 책임 디자이너(아트 디렉터)
현) 듀오톤 책임 디자이너
전) Bebecook 선임 디자이너
전) Studio[mim] 디자이너
BX 인터널 세미나는 '디자인의 디테일을 높이는 타이포그래피'라는 주제로 진행되었습니다. 김의진 책임님은 듀오톤 내에서 '타박'이라는 별명을 갖고 계세요. '타이포그래피 박사'의 줄임말이죠. (정작 본인은 손사래 치지만...) 세미나는 총 세 가지 3부로 나뉘어 진행되었습니다.
모바일, 웹, 인쇄 등 매체와 관계 없이 모든 콘텐츠에는 글자가 들어갑니다. 이번 세미나 내용을 전해드리며, 이 글을 읽으시는 분들도 타이포그래피를 더 이해하여 확신을 갖고 사용하며, 퀄리티 높은 작업을 하게 되시면 좋겠습니다.
1부: 타이포그래피 용어
여러분은 활자/글자/글씨의 차이를 아시나요? '타이포'와 '타이포그래피'의 차이는요? 듀오톤 BX 인터널 세미나 1부에서는 우리가 잘못 알고 혼용하고 있는 타이포그래피 용어들을 정리하는 시간을 가졌습니다.
1.Type: 활자
반복적으로 사용할 수 있도록 인위적으로 디자인 된 글자를 뜻합니다. 활자와 글씨는 글자에 포함되는 개념으로, 글자는 말을 적는 일정한 시각 기호 체계, 글씨는 손으로 쓴 글자를 의미하죠.
2.Typeface: 활자체
활자가 있다면 활자'체'도 있는데요. 활자체는 일정한 양식을 가진 활자를 의미하며, 활자 세트의 기준이 되는 인상 또는 스타일을 뜻하죠. 타입페이스는 활자의 형태보다는 인상을, 활자체/활자꼴은 형태를 말하는 것에 가깝습니다.
정리하자면 다음과 같죠.
활자체 : 활자의 형태(체 : 한 대상의 모양에서 나타나는 일정한 양식)
활자꼴 : 활자의 형태(꼴 : 사물의 생김새나 됨됨이, 형태)
글자꼴 : 손글씨까지 포함하여 활자보다 넓은 개념
서체 : 틀린 말은 아니지만 한자어로서 ‘서書’는 글과 글자를 모두 아우르는 말
글꼴 : 글꼴의 ‘글’ 역시 글과 글자 모두를 아우름
3.Font: 폰트
폰트는 생김새가 같은 한 벌의 활자를 의미합니다.
폰트를 활자의 세트로 본다면, 활자체는 그 세트의 인상 혹은 스타일이라고 할 수 있습니다.
4.Font family: 폰트 패밀리
폰트 패밀리는 한 가지 활자체에서 파생된 스타일이 모인 집단을 의미합니다. 같은 폰트의 Italic, Condenced, Extended 등과 같이 형태가 응용된 세트를 의미하죠.
5.Typography: 타이포그래피
타이포그래피는 글자 형태를 다루거나, 글자를 사용하여 디자인하는 기술과 표현입니다. 흔히 '타이포'라고 줄여서들 많이 이야기하시는데요. 엄밀하게는 '타이포'와 '타이포그래피'는 완전히 다른 용어예요. 타이포는 영미권에서 '오탈자'라는 뜻으로 사용되기 때문에 잘 구분하는 게 좋죠.
이렇게 용어가 세분화되어 정의되어있지만, 이 용어를 모든 사람이 꼭 알아야 할 필요는 없습니다. 클라이언트나 비디자이너 동료에게 "타이포는 틀린 용어야. 타이포그래피라고 해야 해."라거나, "그건 서체가 아니라 타입페이스라는 거야."라고 강요할 필요는 없다는 거죠.
우리가 이를 익혀야 하는 이유는, 그들이 말하는 바의 맥락을 파악하여 정확하게 이해하기 위해서입니다. 저 사람이 말하는 '서체'가 '글자꼴'인지, '글자체'인지 정확하게 파악하기 위해서요.
2부: 타입 페이스
(2부를 열며 타입페이스의 구성요소를 하나하나 훑어주셨는데요. 이미 좋은 자료들이 많기도 하고, 본 글에서는 좀 더 이 세미나를 통해서만 얻을 수 있는 정보에 지면을 할애하기 위해, 해당 내용은 장표 이미지로 대체하겠습니다.)
타입 페이스는 독일 구텐베르그에서 인쇄 혁명이 일어나면서 시작되었습니다. 그때부터 지금과 같은 디지털 환경에 이르기까지, 여러 역사들과 스타일들이 있었는데요. 이 글에서는 그 자료들을 설명드리는 것보다는 디자인하면서 타입페이스를 선택할 때, 고려해야 할 몇 가지 사항들을 알려드리겠습니다.
첫 번째는 정보 위계(Hierarchy)입니다.
타입페이스가 '어디에' 사용되는지를 고려해야 한다는 것이죠. 타이틀, 본문, 디바이스, 인쇄 등 콘텐츠 내에서의 위치나 결과물의 매체에 따라 타입페이스를 선택해야 합니다.
두 번째는 경험입니다.
디자인 전반에서 전달하고 싶은 경험이 어떤 것인가요? 그 경험 안에서 타입페이스가 하는 역할은 무엇인가요? 나머지 시각적 요소들과 함께, 서체가 보는 사람에게 어떤 느낌으로 전달될지 생각해보아야 합니다.
세 번째는 형태입니다.
타입페이스를 키비주얼과 유사하게 매칭할 것인지? 반전을 줄 것인지? 이를테면 이런 거죠. 전반적인 디자인에 라운 요소가 들어간다면, 라운딩이 들어간 타입페이스를 고려해본다든가. 키비주얼과 매칭이 안 될 것 같은 조합을 섞어서 사용하여 충격을 주는 방법도 있는데요. 이걸 사전에 의도해서 만드는 것과 그렇지 않은 것에는 차이가 있으니 알아두는 것이 필요합니다.
네 번째는 사이즈입니다.
텍스트의 사이즈 역시 타입페이스를 고를 때 중요한 기준이 됩니다. 텍스트를 매우 작은 사이즈로 사용해야 하는데, x-height가 너무 작거나 속공간이 좁아 판독이 힘들다면, 적절한 다른 서체로 변경해야겠죠.
다섯 번째는 회색도입니다.
디자인 영역에 배치된 타입페이스의 농도가 적절한 지를 살펴보는 것인데요. 지면/화면을 볼 때 거리를 두고 눈을 가늘게 떠서, 흐릿하게 보았을 때 타입페이스의 농도를 파악할 수 있습니다. 회색도는 타입페이스의 굵기(light, regular, bold)는 물론이고, 타입페이스의 생김새나 자간, 행간 등의 여러 요소에 영향을 받습니다.
마지막은 타입페이스의 배경입니다.
타입페이스가 갖고 있는 히스토리가 적용하려는 대상에 어울리는지도 고려해보시면 좋습니다. 보통 이까지는 고려하지 않는 경우가 많은데요, 타입페이스가 만들어진 배경을 공부하면 더 적절한 곳에서 사용할 수 있죠. 단적인 예를 들어, 모던한 디자인에 르네상스 시대의 폰트를 사용한다든가, 산세리프가 들어가야 할 지면에 보도니를 사용하는 등의 실수를 하지 않도록요.
마지막으로, 타입 페이스와 관련해서 보시면 좋을 책과 영화를 추천 드리면서 2부 내용 마무리하겠습니다.
「좋은 디자인을 만드는 33가지 서체 이야기」
앞에서 타입페이스의 히스토리를 아는 것이 중요하다고 말씀 드렸는데요. 이 책 한 권을 보시면 대략적인 역사를 파악하실 수 있을 거예요.
「Helvetica」
폰트 '헬베티카'는 디자이너 분들이라면 한 번 쯤은 들어보셨을 거예요. 이 다큐는 헬베티카가 성공할 수 있었던 이유를 깊이 탐색합니다. 전 세계 70여 명의 디자이너들과 함께 타입페이스를 이용하는 방식에 숨어있는 전략과 미학을 다루기도 하고, 그래픽 디자인 전반에 대한 이야기도 녹아있어요.
헬베티카가 왜 그렇게 선호되는 폰트인지에 대한 이야기도 나오는데, 이는 바로 헬베티카가 매우 중립적인 폰트이기 때문입니다. 그 자체로는 어떤 뉘앙스도 가지고 있지 않기 때문에, 디자인의 본질을 해치지 않는다 하여 많이 사용되었죠.
아이러니하게도 그렇게 많이들 쓰는 바람에, 지금은 헬베티카 그 자체에 의미가 부여되어 더이상 중립적이라고 할 수 없다는 의견도 있고요. 흥미롭게 보실 수 있을 거예요.
3부: 디지털 환경의 타이포그래피
3부는 디지털 환경의 타이포그래피입니다.
먼저 디지털 환경에서 폰트가 구현되는 원리부터 살펴보겠습니다. 디지털 환경에서 폰트는 em-square를 캔버스 삼아 생성됩니다. em-square란 비트맵처럼 절대적인 단위가 아니라, 벡터같은 상대적인 단위입니다. em-square는 1000x1000, 2000x2000 등 쪼개진 그리드로 이루어져있죠. 한글은 보통 한 글자당 1000x1000 em-square를 사용합니다.
em-size는 em-square 크기의 단위명입니다. 이 em-size를 기준으로 베이스라인, x-height 등 문자를 구성하는 요소들의 좌표 값이 정해지죠. 이 좌표 값들의 구성을 폰트 매트릭스라 부릅니다. 모든 폰트는 고유의 폰트 매트릭스를 갖고 있습니다. 그래서 폰트 표절 의혹을 검증할 때도, 폰트 매트릭스를 뜯어보면 이 폰트를 복제한 것인지 아닌지 판단할 수 있는 기준이 될 수 있죠.
위에서 보신 것처럼, 폰트 요소의 영역은 종종 em-square보다 크게 지정되곤 합니다. 이렇게 em-square 밖으로 벗어난 영역까지 포함한 폰트 영역을 '바운딩 박스'라고 말하는데요. 이는 후에 행간 값(Line height)을 설정할 때 고려해야 하는 중요한 요소입니다.
폰트는 각각의 고유한 바운딩 박스 값을 갖고 있습니다. 그래서 같은 값을 입력하더라도, 폰트별로 행간이 다르게 보이는 경우가 많죠. 일반적으로, 행간은 폰트 사이즈의 120-130%로 적용합니다. 이때, 폰트의 종류에 따라 해당 행간 값을 적용했을 때 바운딩 박스가 겹치는 경우가 발생하죠.
바운딩 박스가 적절하게 잡혀있는 경우에는, 박스가 겹쳐도 행간이 시각적으로 큰 문제가 없습니다. 하지만 바운딩 박스가 너무 좁게 잡혀있는 경우, 윗줄과 아랫줄의 글자가 서로 겹치거나 잘리는 문제가 발생하기도 합니다. 그러니 행간 값을 설정할 때는 바운딩 박스가 아닌, 실제 글자가 그려지는 영역을 기준으로 잡는 것이 좋습니다.
로마자의 경우엔 소문자를 가장 많이 쓰기 때문에 소문자 x를 기준으로 행간을 설정합니다. 한글은 어센더와 디센더가 없기 때문에 네모틀에 맞추어 행간을 설정해야 하므로, 네모틀에 딱 맞는 '믐'을 기준으로 사용합니다.
3부가 끝난 후에는 현재 듀오톤에서 진행하고 있는 프로젝트의 타이포그래피 분석 히스토리를 나누어주셨습니다. 세미나에서 나눠주신 개념과 이론들이 실전에서는 어떻게 적용되는지를 상세하게 들여다볼 수 있었죠. 이 역시 아쉽게도 현장에 있던 살몬들에게만 공유되지만, 3부까지의 내용으로도 여러분들께 충분히 도움되었으리라 생각합니다.
참여했던 살몬들의 후기로 오늘 글을 마무리하며, 다음은 인터널 세미나 시리즈의 마지막인 IX 인터널 세미나로 뵙겠습니다.
참여한 살몬들의 후기
타이포그래피는 팀을 막론하고 디자이너라면 모두 기본적으로 알아야 하는 영역이라고 생각하는데, 학교나 이전에 일했던 회사에서도 제대로 공부하지 못했던 부분을 알게 되어서 유익한 시간이었습니다.
UI 디자인 시 바운딩 박스 높이를 고려하여 행간을 설정하는 방법을 이렇게 디테일하게 접한 적은 처음이었습니다. 세미나 전반적으로는 다소 난이도가 높았지만 한 번 더 듣고 완벽히 이해하고 싶네요.
프로젝트를 진행하면서 막연하게, 감으로 했던 타이포그래피 디자인에 대해 심도있게 개념 파악을 할 수 있어서 너무 좋았습니다. 지금 진행하는 프로젝트에서도 타이포그래피가 큰 범위를 차지하는데, 앞으로의 방향성을 잡는 데에도 큰 도움이 되었어요.
작성자: 김강령, 이선화, 이양희
CX 인터널 세미나 보러가기 https://brunch.co.kr/@duotoneofficial/24
UX 인터널 세미나 1부 보러가기 https://brunch.co.kr/@duotoneofficial/26
UX 인터널 세미나 2부 보러가기 https://brunch.co.kr/@duotoneofficial/28
듀오톤 공식 웹사이트: https://duotone.io/
비핸스: https://www.behance.net/duotoneio
페이스북: https://www.facebook.com/duotone.io/
