디자인의 기본은 '타이포그래피'
타이포그래피의 중요성에 대한 첫 번째 이야기
스티븐 잡스는 이러한 말을 하였습니다. “나의 인생의 가장 영향력을 끼친 것은 바로 타이포그래피와의 만남이다” 지금의 애플이 있게 만든 스티븐 잡스조차도 타이포그래피의 중요성을 강조하고 유명한 디자이너들은 모두 다 한결같이 타이포그래피의 중요성을 강조합니다.
타이포를 잘하기 위해선 가독성, 확장성, 위계 등 중요한 부분이 많지만 저는 이번 글에서는 타이포에 관한 첫 번째 글인 만큼 타이포의 가장 기본적인 각부 명칭과 확장자에 대해서 이야기해보려 합니다.
1) 타이포의 기본 요소
타이포에 관해서 알려면 일단 무엇으로 구성되어있는지부터 알아야겠죠? 글자꼴 각부의 명칭이 어떻게 이루어져 있는지 알면 서체들에 대해서 더 명확하게 이해할 수 있을 것입니다. 일단 영문 폰트가 어떻게 구성되어있는지 지 알려드리겠습니다.
- 영문 각부 명칭
사실 타이포그래피 디자이너가 아니라면 각부의 명칭들을 모두 알고 있을 필요는 없지만 대략적으로 X-height, Baseline과 어센더, 디센더 정도는 어느 정도 알아두고 나머지 명칭들도 대략적으로 알고 있다면 서로 간의 규칙을 정할 때 수월할 것입니다.
사진출처 - Hongvely design평소 서체에 관심이 있었다면 글꼴의 각부 명칭에 대해서 좀 더 자세히 알아보기를 추천드립니다. 각 서체마다 특징적인 부분들이 있는데 그 특징들을 명칭에 알맞게 기억한다면 누군가 이 폰트 뭐야라고 물어봤을 때 좀 더 디자이너답게 대답하실 수 있을 것입니다.
Ascender line - 소문자의 가장 상단 부분에 해당되는 가상의 선.
Meanline(Median) - a, c, e, n, v, w와 같은 소문자들의 윗부분을 따라 이어지는 가상의 선
Baseline - 글자들이 그 위에 놓여 있을 것 같은 가상의 선
Descender line - 소문자 g, p, q, y 등의 가장 하단 부분에 해당되는 선
Cap height - 대문자의 높이
X-height - 소문자 x의 높이
Apex - 대문자 A와 같은 삼각형 모양의 뾰족한 꼭짓점
Crossbar - A, H와 같이 양쪽을 이어주거나 f, t와 같이 수직선을 양분하는 가로 획.
Terminal - 획의 끝맺음 부분
Ascender - 소문자에서 엑스라인 위로 뻗은 획
Counter - 낱자에서 획으로 완전히 또는 부분적으로 둘러쌓은 부분. 즉, 빈 공간을 의미
Bowl - 소문자 a, b, d, g, p, q를 구성하는 형태 중에 둥근 폐곡선 부분
Descender - 소문자에서 베이스라인 아래로 뻗은 획
- 국문의 각부 명칭
그러면 한글은 과연 어떤 기본 요소들로 이루어져 있을까요? 일단 모든 사람이 알고 있듯이 한글은 자음과 모음 그리고 받침으로 구성되어 있으며 영문과 다르게 '모아쓰기'방식을 사용합니다. 또한 영문보다 많은 각부 명칭을 가지고 있습니다.
사진출처 - 윤디자인 M일상 어디에서나 사용하는 한글이지만 이렇게 자세한 명칭과 구조로 이루어져 있다는 사실은 많은 사람들이 잘 알지 못하는데 디자이너라면 대략적으로나마 알고 있다면 많은 도움이 될 것입니다. (저도 이 글을 작성하면서 한글이 이렇게 많은 명칭들로 이루어져 있는지 알았습니다.)
민글자 - 받침 닿자가 없는 낱글자.
받침글자 - 받침 닿자가 있는 낱글자
모임꼴 - 닿자와 홀자가 모인 모양
가로모임 글자 - 첫 닿자와 홀자가 가로로 모인 글자
세로모임 글자 - 첫 닿자와 홀자가 세로로 모인 글자
섞임모임 글자 - 첫 닿자와 홀자가 가로와 세로로 모인 글자
기본줄기 글자 - 맵시나 성격을 이루는 데 바탕이 되는 가장 적은 수의 줄기
가로줄기 - 닿자를 이루는 가로로 된 모든 줄기
세로줄기 - 닿자를 이루는 세로로 된 모든 줄기
이음줄기 - 닿자의 가로 줄기가 다음의 닿자나 기둥으로 이어지기 위해 휘어진 줄기
곁줄기 - 세로 홀자에서 밝은 소리나 어두운 소리를 구별하도록 하는 기둥 곁에 붙은 짧은 줄기
쌍곁줄기 - 기둥에 붙은 2개의 곁줄기
윗곁줄기 - 쌍곁줄기에서 위에 있는 곁줄기
아래곁줄기 - 쌍곁줄기에서 아래에 있는 곁줄기
덧줄기 - ㅋ, ㅌ에서 볼래의 ㄱ, ㄷ 모양에 덧붙은 줄기
기둥 - 홀자를 이루는 세로로 된 모든줄기
짧은기둥 - 홀자를 이루는 가로줄기에 짧게 붙은 기둥
겹기둥 - 혼자에서 2개가 모인 기둥
바깥기둥 - 겹기둥에서 바깥쪽에 있는 기둥
안기둥 - 겹기둥에서 안쪽에 있는 기둥
보 - 홀자를 이루는 가로로 된 모든 줄기
이음보 - 썪임 모임 글자에서 다음의 기둥으로 이어지기 위해 휘어진 보
걸침 - 2개의 세로줄기 사이에 걸친 가로 줄기 혹은 2개의 기둥 사이에 곁줄기
쌍걸침 - 2개의 기둥 사이에 걸친 2개의 걸침
윗걸침 - 쌍걸침에서 위에 있는 걸침
아래걸침 - 쌍걸침에서 아래에 있는 걸침
둥글이응 - 동그라미에 가까운 이응의 둥근줄기
타원이용 - 타원으로 된 이응 줄기
바깥이응 - 줄기 바깥의 이응
안이응 - 줄기 안쪽의 이응
2) 폰트 확장자
서체는 다양한 형식이 있지만 OTF, TTF, SVG, EOT, WOFF, WOFF2 형식이 가장 일반적입니다. 글꼴 유형이 너무 많기 때문에 혼동될 수 있지만 각기 다른 유형의 글꼴을 이해하는 것이 중요합니다.
그중에 가장 대중적으로 사용되는 게 TTF와 OTF인데 이 둘에 관해서 TTF는 윈도용 OTF는 맥용으로 잘 못 알고 계신 분들이 있는데 이 둘은 그러한 개념이 아닌 구성하는 개념에 차이가 있습니다.
SVG는 따로 자세하게 포스팅한 글이 있어서 하단의 링크를 걸어드릴 테니 보시는 걸 추천드립니다. 이번에는 TTF와 OTF 그리고 WOFF가 뭔지 그에 관한 차이를 설명드리려고 합니다.
https://brunch.co.kr/@ggk234/11
- TTF (True Type Font)
TTF는 고해상도 출력을 제외한 모든 디자이너 및 일반 사용자분들이 사용하며 1980년대 애플이 개발하여 MS사에 베포 하여 가장 오랫동안 대중적으로 쓰여왔으며 일반적으로 문서를 작성할 때 쓰이는 폰트입니다. 그래픽 작업보다는 주로 Word, Excel, 한글, 웹디자인 등에 사용합니다.
구성은 2차원 베지어 방식으로 곡선을 구현합니다. 2차원이라 계산량이 작아 표현의 속도가 비교적 빠르지만, 자유롭게 예리한 곡선 표현이 어려워 고해상도 출력은 한계가 있습니다. 그래서 TTF는 주로 문서작업에 많이 사용합니다.
- OTF (Open Type Post Script)
OTF는 고해상도 출력이 필요한 디자이너와 전문 사용자분들이 사용하며 1990년대 MS사와 Adobe가 함께 개발한 형식으로 윈도우, 맥, 리눅스 등 모든 환경에서 똑같은 모양을 만들어 주기 위해 제작된 글꼴 형식입니다. 주로 일러스트, 포토샵, 인디자인 등에 사용합니다.
3차원 베지어 방식으로 곡선을 구현합니다. 계산과정이 복잡해서 표현 속도가 느린 편이지만, 곡선 표현이 깔끔하게 가능하지만 곡선 구현 방식으로 출력용에 비해 모니터 화면은 DPI가 낮아 이로 인해 모니터 화면에서는 매끄럽지 않게 보일 수 있습니다. OTF는 주로 그래픽 출력용으로 많이 사용합니다.
- TTF와 OTF의 차이점은?
차이점을 말하기 전에 둘의 공통점을 말씀드리자면 TTF와 OTF는 전 세계의 모든 Writing System을 인코딩하는 시스템인 Unicode를 기반으로 합니다. (혹시나 컴활자격증을 공부하신 분이라면 매년 단골문제이기 때문에 들어보셨을텐데 그 유니코드 맞습니다.) 지금의 국제 표준화 코드는 Unicode기반인 것과 벡터 글꼴(외곽선 글꼴)의 한 종류라는 공통점이 있습니다.
TTF와 OTF 둘의 차이는 파일 크기와 화면에서 보이는 선명도와 인쇄에서 보이는 선명도의 차이가 있습니다. 이러한 차이는 TTF와 OTF 포맷 즉 외곽선을 처리하는 방법을 중심으로 구분되는데 TTF는 2차 베지어 곡선을 사용하고 OTF는 3차 베지어 곡선을 사용합니다.
- 베지어 곡선(Bezier Spline)이란?
간단히 설명드리자면 컴퓨터 그래픽에서 임의의 형태의 곡선을 표현하기 위해 수학적으로 만든 곡선으로 다양한 크기의 글꼴을 지원하기 위해 벡터 형태로 지원하는데 이때 사용하는 곡선 방식이 베지어 곡선식입니다. 예로는 일러스트에서 펜툴을 사용할 때 나오는 곡선이 바로 베지어 곡선입니다.
2차원 베지어와 3차원의 가장 큰 차이는 제어점이 다른 것인데요. 2차원 베지어는 1개의 제어점을 가지고 3차원 베지어는 2개의 제어점을 가지고 있습니다. 그렇기 때문에 3차원 베지어 곡선이 좀 더 미세한 곡선을 표현하는데 탁월합니다.
2차원 베지어 곡선과 3차원 베지어 곡선의 예시위의 예시로 보면 1개의 제어점 차이를 가지고 있지만 폰트에는 수많은 곡선이 있기 때문에 TTF보다 OTF가 속도가 느리지만 더 섬세한 그래픽을 구현 가능한 것입니다. 하지만 지금 PC의 성능은 상당히 발전하여서 둘의 속도 및 시스템 리소스 소모 차이는 사실 무의미하기도 합니다.
- OTF는 맥용? TTF 윈도우용?
폰트를 다운로드할 때 보면 'TTF 윈도우용 다운로드', 'OTF 맥용 다운로드'라는 화면을 볼 수 있습니다. 이것은 무조건 아니라고도 하기 그렇고 무조건 맞다고 하기도 그렇습니다. 일단 결론은 OTF와 TTF 모두 윈도우와 맥에서 모두 지원합니다.
모 업체의 다운로드 페이지하지만 저 말이 틀린 거라고 말하기는 조금 애매한 게 OTF는 TTF보다 최신형식이여서 TTF가 제공하지 않는 몇 가지 기능들이 있으며 TTF에는 폰트가 원하는 모양으로 나올 수 있도록 글자 모양을 보정해주는 데이터(힌트)를 넣을 수 있습니다.
윈도우와 맥을 겸하는 사용자라면 가끔 같은 폰트가 각화면에서 다르게 나오는 것을 상황을 마주할 수 있는데 이것은 macOS에서는 힌트를 대부분 무시하고 자체적으로 해석해서 출력하지만 윈도우 XP 버전까지만 해도 데이터를 받아 쓰는 방식으로 사용하였기 때문에 macOS와 WindowOS에서 같은 폰트라도 모양이 다를 수 있는 것입니다.
그렇기 때문에 TTF 중 일부는 맥 환경에서 문제를 일으키기도 하며 OTF는 윈도우 구형 프로그램에서 문제를 일으키기도 합니다. 그렇기 때문에 저렇게 작성한 것이 틀린 말은 아니라는 것입니다.
나눔고딕의 다운로드 페이지 (사진출처 - hangeul.naver)일반적으로 TTF는 윈도우에서 많이 사용하고 OTF는 맥에서 많이 사용하고 있습니다. 일부업체들에서는 편의상 저렇게 작성한걸로 예상되나 그래도 사용자가 TTF는 윈도우전용, OTF는 맥전용이라고 잘못된 정보로 받아들일 수 있으니 나눔글꼴과 같이 윈도우용과 맥용으로 표시하는게 올바른 방법이지 않을까 하는 생각입니다.
- WOFF (Web Open Font Format)
WOFF는 웹 페이지에서 사용하기 위한 글꼴 형식입니다. WOFF 파일은 형식 별 압축이 적용되고 추가 XML 메타 데이터가 추가된 OpenType 또는 TrueType 글꼴입니다.
WOFF에는 두 가지 주요 목적이 이는데 첫 번째는 로컬 설치를 통해 데스크탑 응용 프로그램에서 사용하기 위한 글꼴 파일과 웹 글꼴로 사용하기 위한 글꼴 파일을 먼저 구분하고, 두 번째로는 네트워크 연결을 통해 글꼴을 서버에서 클라이언트로 전송할 때 웹 글꼴 대기 시간을 줄이는 것입니다.
WOFF 형식을 사용하면 파일에 추가 메타 데이터를 첨부할 수도 있습니다. 이것은 글꼴 디자이너 나 공급 업체가 원본 글꼴에 있는 것 이상의 라이선스 나 기타 정보를 포함시키기 위해 사용할 수 있으며 이러한 메타 데이터는 글꼴 렌더링에 영향을 주지 않지만 요청 시 사용자에게 표시될 수 있습니다.
하지만 일반적으로는 모든서체가 WOFF 확장자가 없는 경우가 많아서 웹에서는 구글 폰트에 링크를 걸거나 TTF형식으로 폰트를 사용합니다.
3) 각자의 용도에 맞는 확장자를 사용하자
WOFF는 웹용 폰트이고 TTF와 OTF는 베지어 곡선 방식에 차이가 있으며 TTF와 OTF는 윈도우와 맥에서 모두 사용 가능하다는 점이 이번 포스팅의 핵심이며 영문과 국문은 다양한 각부 명칭으로 이루어져 있다는 점만 아셔도 기본적인 폰트의 구성을 아실 수 있을 것입니다.
저는 각 확장자를 알맞은 용도에 맞게 사용하는 것이 좀 더 프로페셔널한 디자이너로 만들어주는 길이라고 생각합니다.
이번 포스팅에서는 기본적인 확장자와 차이들에 대해서 말씀드렸는데요. 다음 포스팅에는 타이포를 잘하기 위한 기본적인 스킬 중 하나인 타이포그래피의 위계에 대해서 포스팅하도록 하겠습니다.
