권장 브라우저 안내

이 웹사이트는 Internet Explorer 9 버전 이상에서만 이용 가능합니다.
편리한 사이트 이용을 위하여 최신 브라우저로 업그레이드해주시기 바랍니다.

저희와 함께 하시겠습니까?

프로젝트 의뢰는 아래로 문의 주시기 바랍니다.
websre@naver.com
Tel: 1800-9356

  • Portfolio

    Our work 에서 자세한 정보를 확인하세요.

  • General

    48, Dunjiro, Seo-gu, Daejeon
    대전광역시 서구 둔지로 48 (둔산동, 두림빌딩)

본문 바로가기
News
April 7, 2021
Article

폰트 페어링 시작하기: 기본부터 응용까지

본문

hlx_126fa4040d732f399c045124ff9f11216eb6bb14b.png?auto=webp&format=pjpg&optimize=medium&width=1000



어도비 폰트(Adobe Fonts)에 한글 폰트가 94종 업데이트되었습니다. 이를 기념해 기존 라틴 폰트와 새롭게 추가된 한글 폰트의 섞어짜기 팁을 공개합니다. 아티클 속 이미지에서 사용된 폰트는 모두 어도비 폰트에서 설치 가능합니다.


기본 단계: 차이와 공통점 알아보기
폰트 페어링을 시작하기에 앞서, 한글과 라틴 알파벳의 글자꼴과 문장구조의 차이 그리고 공통점을 이해해야 합니다. 서로 다른 역사와 모양을 가진 문자를 섞어서 사용할 때 차이점과 공통점을 고려하지 않고 무턱대고 써버리는 경우 위화감은 물론 기괴함마저 자아낼 수 있습니다.


한글 폰트는 기본적으로 고정폭* 입니다. 이는 모든 글자가 같은 폭의 상자 안에 디자인된다는 뜻입니다. 처음 활판 인쇄술이 한국에 들어와 발전되었을 때는 전각* 즉, 정사각형의 상자 안에 글자를 디자인하는 것이 원칙이었습니다. 요즘은 산돌 고딕 Neo1처럼 정사각형보다 조금 더 날씬한 직사각형 형태 (장체)로 폰트가 디자인되는 것이 유행입니다. 이처럼 모든 글자가 같은 글자폭으로 디자인되는 것은 한글 폰트의 기본적 특징입니다. 최근 어도비 폰트에 추가된 AG 타이포그라피연구소의 AG 안상수체 2012처럼 간혹 예외적으로 가변폭*인 한글 폰트도 있습니다.


* 고정폭 (monospaced): 모든 글자가 같은 글자폭으로 디자인되는 것


* 전각 (full-width): 폰트 혹은 활자를 만들 때의 정사각형 상자(바디), Em이라고도 하며, 그 이유는 대문자 M이 대체로 전각으로 디자인되었기 때문. 라틴 알파벳 구두점인 Em dash (—)는 전각 사이즈 길이의 대쉬이기 때문에 Em dash라고 불린다. En은 반각을 뜻한다.


* 가변폭 (proportional): 고정폭과 반대로 모든 글자가 다른 글자폭으로 디자인되는 것



hlx_1e534a9f50fa1d3e5129ebad9316924273fc2fc7d.png?auto=webp&format=pjpg&optimize=medium&width=800

한글 폰트의 특징



한글 폰트와 달리 라틴 폰트는 일반적으로 가변폭으로 디자인됩니다. 대문자 M과 소문자 i는 서로 글자폭이 다르고, V와 A, T 와 e 등의 짝들은 글자가 입력될 때 커닝*이 필요합니다. 고정폭 한글 폰트의 경우 글자꼴의 특징상 한글 글리프*사이에 커닝 값을 따로 설정할 필요가 없습니다. 예외적으로 코딩용 폰트 등은 정확한 행과 열을 구분하기 위하여 고정폭으로 디자인됩니다. 그리고 폰트 자체는 가변폭으로 디자인되었으나 숫자만 고정폭으로 변경할 수 있는 오픈타입 기능*을 추가시키는 경우도 많습니다.


라틴 알파벳은 대문자와 소문자가 있으며, 소문자의 경우 글자 구조가 한글과 매우 다릅니다. 엑스하이트 (아래 그림 참조)를 기준으로 위로 뻗는 부분은 어센더, 아래로 뻗는 부분은 디센더라고 하는데, 이렇게 라틴 알파벳 소문자에는 위아래로 쭉쭉 다양한 모양이 있습니다.


*커닝 (Kerning): 특정 글자와 글자 사이를 좁히는 것. 대부분은 폰트를 디자인할 때 기본적인 커닝 값이 설정되어 있으나, 유저가 직접 커닝 값을 조절할 수도 있다. 문장 전체적으로 글자 사이를 좁히는 것은 트래킹이라고 하며, 보통 폰트 정보에는 없고 타입 세팅 시에 유저가 따로 설정한다.


*글리프 (Glyph): 폰트를 이루는 글자를 뜻함. 예컨대 “가”, “ㄱ”, “.”, “%”, “ (공백)” 등 모두 글리프의 하나이다.


*오픈타입 기능 (OpenType Feature): 오픈타입 폰트에서 탑재가 가능한 기능들. 위에 기재된 숫자나 글자의 형태를 변경시키는 것은 Stylistic Set에서 가능하다. 이 외에도 합자 (ligature)나 앞뒤 문맥에 따라 다른 모양의 글자를 가져오는 기능 (contextual alternates) 등이 있다.



hlx_1770ff6af21a48248fa0b42a40d591a306b8866bb.png?auto=webp&format=pjpg&optimize=medium&width=800

한글 폰트와 라틴 폰트의 차이점



hlx_150012f93379a9a693d01e5b7124ade2f057e99f8.png?auto=webp&format=pjpg&optimize=medium&width=800

라틴 폰트의 특징



hlx_1470d509841eaf27322cb7ed11225b1645b3dc3d0.png?auto=webp&format=pjpg&optimize=medium&width=800



hlx_18dd74804ac41dabd29459affe69eb648f8542faa.png?auto=webp&format=pjpg&optimize=medium&width=800



한글은 고정폭이기 때문에 모든 글자가 깔끔하게 나열되는 반면, 라틴 알파벳은 가변폭, 어센더, 디센더의 특징이 있기 때문에 상하좌우로 다양한 움직임이 존재합니다. 이렇게만 보면 너무나도 다른 두 문자를 어떻게 조화롭게 폰트 페어링을 할 수 있을까 싶겠지만, 다행히 한글과 라틴 알파벳에는 강력한 공통점이 있습니다. 바로 구두점과 띄어쓰기라는 같은 시스템을 사용한다는 점입니다. 한글 폰트에서 구두점은 라틴 알파벳과 같이 가변폭으로 디자인되며, 커닝 값도 설정되어 있습니다.


다만 한글 폰트에는 라틴 알파벳과 공통적인 구두점 외에, 동아시아권에서 사용하는 전각 구두점이 탑재되어 흔하게 사용되기 때문에 타입 세팅 시 다양한 문자와 구두점을 모두 유념해야 합니다.



hlx_15b617f4b35d7edf3b1892eeceef04d0198577dde.png?auto=webp&format=pjpg&optimize=medium&width=800



응용 단계: 미세조정을 해보자

구조 이해에서 나아가 더 좋은 폰트 페어링을 위해서는 베이스라인, 사이즈 등의 미세조정이 필요합니다. 앞서 말했듯이 한글과 라틴 알파벳은 이러한 구조의 차이 때문에 같은 글자 사이즈라도 시각적으로 크기가 달라 보일 때가 있습니다.


필자는 대체로 라틴 알파벳을 한글의 105% 정도 크게 지정하지만, 이 또한 폰트에 따라 그리고 세팅하는 사이즈에 따라 다르기 때문에 그때그때 시각적으로 맞춰야 합니다. 폰트 사이즈에서 조정하거나 가로세로 비율을 조정해 주는 것으로도 가능합니다.


또, 라틴 알파벳은 베이스라인을 기준으로 글자가 나열되지만 한글은 전각 상자를 기준으로 가운데에 글자의 무게중심이 실려있습니다. 그대로 타입 세팅을 하면 라틴 알파벳이 한글보다 아래로 내려앉은 것 같은 느낌을 주고, 인용부호나 하이픈 등 구두점의 위치가 달라지기 때문에 이 또한 조절을 해줘야 합니다.



hlx_17fcaf7886cab3b6c24d9a40f684613da0e5e3b52.png?auto=webp&format=pjpg&optimize=medium&width=800



글자 사이 조정 또한 미세조정의 포인트입니다. 근래 출시되는 한글 폰트는 글자폭이 전각보다 좁은 장체형 폰트가 많다는 언급을 앞서 하였는데, 그로 인해 글자 사이 또한 매우 좁게 보이는 경우도 있습니다. 라틴 폰트는 폰트에 따라 알맞은 글자 사이가 천차만별로 다른데 만약 페어링한 한글 폰트와 라틴 폰트의 글자 사이 느낌이 다르다면 따로 조정해 주는 것이 필요합니다.


심화 과정: 합성 글꼴을 사용해보자
미세 조정의 과정이 복잡해 패닉이 올 법도 한데, 그럴 때 사용할 수 있는 요긴한 솔루션이 있습니다. 바로 어도비 인디자인(Adobe Indesign)의 ‘합성 글꼴 (Composite Font)’이라는 기능입니다. 합성 글꼴은 말 그대로 원하는 폰트를 합쳐서 나만의 폰트 세트를 만들 수 있는 기능입니다. 한글, 라틴 (로마자), 구두점, 숫자 (번호) 등 카테고리별로 원하는 폰트와 (글자 사이를 제외한) 미세조정이 가능하고, ‘사용자 정의’로 들어가면 원하는 글리프 하나씩 지정이 가능합니다.



hlx_1a83e1d78515ec73b4234dc0985aabf47ae058249.png?auto=webp&format=pjpg&optimize=medium&width=800



하지만 합성 글꼴 기능은 한글 타이포그래피 환경에 부족하거나 적합하지 않은 부분도 있습니다. 현재 어도비에서는 합성 글꼴 및 한글 타이포그래피 환경 기능 향상을 위해 다양한 리서치 및 개발을 준비 중입니다.


글자체와 서풍의 변천
마지막으로 한글과 라틴 글자체와 서풍의 변천에 대해서 소개하겠습니다. 알다시피 라틴 알파벳이 현재의 모양으로 처음 자리 잡게 된 것은 트라야누스 원주*에 새겨진 대문자 라틴 알파벳이 시초였습니다. 라틴 알파벳도 그렇지만 한자 등 많은 문자가 붓글씨 형태의 문자 모양으로부터 발전했는데 이는 스타일러스*의 형태가 주로 펜이나 붓이었으며, 새겨지는 매체 또한 종이나 지점토 등 필적이 강하게 남는 재질이었기 때문입니다. 라틴 알파벳의 글자체는 이렇게 붓글씨로 시작하여 더욱 정돈된 세리프체, 그리고 산세리프체로 발전을 해왔습니다.



hlx_1673fcd33e0a7271a674dd26531411701bace88a9.jpeg?auto=webp&format=pjpg&optimize=medium&width=800

출처: 위키피디아



그러나 한글의 시초인 훈민정음을 보면, 현재의 돋움체 혹은 둥근 돋움체에 가까운 글자체를 가진 것을 확인할 수 있습니다. 이에 관해서는 여러 가지 설이 있습니다. 가장 강력한 설은, 1443년에 창제되어 1446년에 처음 국민에게 반포된 새로운 문자인 한글은 남녀노소 구분 없이 모든 백성이 쉽고 간편하게 배우고 쓸 수 있도록 하기 위해 땅바닥에 나뭇가지로 그려도 소통이 될 수 있도록 디자인되었다는 설이다. 붓글씨 혹은 바탕체와 같이 일부 획의 끝에 특징적인 모양이 있으면 새로운 문자를 국민들이 잘못된 형태로 이해해버릴 수 있는 위험이 있기 때문입니다. 또 하나 필자가 덧붙이고 싶은 설은, 사실 조선은 구텐베르크 활판 인쇄술이 발명되기 약 70년 전에 이미 활판인쇄의 기술을 갖고 있었습니다*9. 납활자 대신 동활자였고, 구텐베르크 방식보다 효율성이 떨어져 정착하지 못하고 도태되었지만, 활판인쇄의 기본적인 구조와 방식에 이해가 있었기 때문에, 나중에 활자로 만들기 편한 글자꼴로 자연스럽게 한글 개발이 된 게 아닐까?라고 필자는 로망을 가져봅니다.



hlx_104ebe08472c57b208a5989fa3706d4c1723be7fa.png?auto=webp&format=pjpg&optimize=medium&width=800

출처: 국립 한글 박물관



*트라야누스 원주 (Trajan’s Column): 로마 황제 트라야누스를 기념하기 위해 건설된 기둥. Eric Gill 등 많은 타입 디자이너들이 타입 디자인의 영감을 얻기 위해 직접 이 원주를 보러 가곤 했었다고 한다.


*스타일러스 (Stylus): 필기구를 뜻함.


*최초의 금속활자 인쇄본: 1372년에 청주 흥덕사에서 금속활자로 찍어낸 불교서적 “직지심체요절”이 증거로 남아있다. 현재 한국학중앙연구원 장서각과 국립 중앙도서관에 상하권 1책이 각각 소장되어 있다.


폰트 페어링의 즐거움
전혀 다른 역사의 길을 걸어온 문자들을, 서로 어울리게 글자체를 고르고 미세조정을 하며 섞어 쓰는 행위에 아름다움과 경이로움을 느끼지 않을 수가 없습니다. 아마 많은 타이포그래퍼와 편집 디자이너들이 이렇게 글자의 매력에 사로잡혀 이 세계에서 빠져나올 수 없게 된 게 아닐까 싶습니다.


폰트를 고르고 쓰는 즐거움을 더 많은 사람들에게 널리 알리기 위하여 이 시리즈 아티클이 도움이 되기를 진심으로 바라며, 다음 아티클에서는 합성 글꼴 사용에 관한 비디오 튜토리얼과 함께 실전적인 폰트 페어링 예시를 소개드릴 예정입니다.





출처 : 어도비블로그(https://blog.adobe.com/ko/publish/2021/03/31/how-to-font-pair-basics-what-to-do-and-not-to-do.html#gs.y5itpn)

디자인 샘플보기

궁금한게 있으신가요? 무엇이든 물어보세요.