Font Glyph

뱅크샐러드에서 지연 시간 없이 웹폰트 서빙하기  글을 보다가 Glyph라는 개념이 나와서 찾아보게 되었다.

 

Glyph(글라프)란?

Glyph는 글자의 최소 표현이며, 뜻과 소리를 지니지 않은 도형 기호이다. 예를 들어, “가” 라는 글자가 있다면 이 글자를 어떻게 표현할 것인지가 Glyph이다.

 

헷갈리는 용어 정리

개발을 하면서 마주치는 글자의 모양과 관련된 용어들에는 Character, Font, Glyph (feat. Unicode)가 있다. 각각의 차이를 알 수 있게 정의해보자.

요약하자면, Character는 우리가 알고 있는 글자이고, Glyph는 하나의 Character에 대응되는 표현이다. Glyph들이 모여 Font를 만든다.

추가적으로 Unicode는 Character 하나 당 부여되는 code point를 가지고 있고 이 code point는 Glyph로 하나씩 매칭되어 Character의 스타일을 부여한다.

• Character : 주어진 미디어에 있는 하나의 논리적인 모음이다. 쓰여지는 언어에 대한 최소한의 단위이다. Character는 font에서 glyph에 의해 표현되는 어떠한 방식을 가지고 있다. Character는 하나 이상의 Glyph와 함께 하나의 Font로 표현된다.
  • 예를 들어, ㄱ / 가 / 궭 / a / .
• Font : 추상적인 Character를 Glyph에 매칭 시켜주는 역할을 한다. 특정 스타일과 디자인으로 언어를 표현하기 위해 필요하다.
  • 예를 들어, Times New Roman, Arial 같은 것
• Glyph : Font의 기본 요소이며 Character의 기본 문자 표현이다. Font에 있는 Glyph들은 Id와 index과 이름을 가지고 있다. Font에서 한 Character의 특정한 그래픽 표현이나 이미지이다.
  • 예를 들어, 현재 ㄱ 가 쓰여지는 표현

따라서, 그래픽 디자이너는 Character를 생성하는게 아니라 Glyph를 생성하고 궁극적으로는 Font를 만든다.

 

단순하게 표현하여 Character는 내가 치는 것이고, Glyph는 내가 보는 것이다. 내가 치면서 어떤 의미를 담아서 Character를 치지만 모니터에 나타나는 건 특정 표현(스타일)이 가미된 Glyph이다.

 

우리가 보통 폰트 파일의 table 형태로 보는 것은 Glyph와 Character의 Unicode code point가 대응된 표이다. 아래에서 실제 예제로 살펴보자.

 

실제 예제

아래는 icon.svg 파일의 코드 일부이다.

<glyph unicode="&#xe900;" glyph-name="datalist_12" d="M89.583 725.333c0 ..." />

unicode &#xe900 는 U+E900과 같으며 이에 해당하는 Character는  이고 실제 폰트 파일에서 아이콘은 아래와 같은 이미지를 매칭해두었다.

 

이렇게 폰트 파일은 하나의 캐릭터 당 가지고 있는 unicode code point를 glyph에 하나씩 매칭하는 역할을 하고 있다.

 

그래서 원문은 뭔데?

그래서 뱅크샐러드 기술블로그 글을 요약하자면, 웹폰트 용량을 줄이기 위해 Font 파일의 Glyph 개수를 줄이는 작업을 수행했다. 영어는 조합으로 만들어지는 글자가 없기 때문에 대소문자를 포함에 72개의 Glyph만 있으면 되지만, 한글은 자모음의 조합을 계산하면 11,172의 Glyph가 필요하다.

 

따라서 한글을 포함한 폰트파일의 용량은 커지게 되는데, 이를 줄이려면 다음과 같은 두 방식을 취할 수 있다.

1. 필요하지 않은 언어의 Glyph를 삭제
2. 사용되지 않을 한글의 Glyph를 삭제

폰트 파일의 변환은 https://github.com/fonttools/fonttools 라이브러리를 사용하여 수행할 수 있다.

성능 향상을 위해 적용해봐도 좋겠다 😊

 

Appendix

https://blog.banksalad.com/tech/font-preload-on-safari/

https://en.wikipedia.org/wiki/Glyph

https://help.fontlab.com/fontlab/7/manual/About-Glyphs/

https://glyphsapp.com/learn/unicode

http://yhyacinth.github.io/general/2015/05/19/learn-about-font.html