폰트는 확장자에 따라 용도와 크기가 다르다.
앱이나 웹사이트를 만들 때 용량이 큰 폰트를 포함하면 로딩 속도나 성능에 영향을 미칠 수 있다.
요즘은 시스템 폰트를 사용하거나 CDN을 이용해 별다른 고민 없이 폰트를 적용할 수 있지만, 앱이 오프라인 상태에서도 작동해야 하는 경우에는 폰트를 직접 포함해야 할 수도 있다.
그런 상황을 맞이한 누군가를 위해 폰트 확장자별 크기와 용도를 정리해본다.
Thread에 짧은 글로 썼더니 반응이 좋아 롱폼으로도 정리한다.
결론부터 말하자면 구형 기기를 지원할 필요 없을 경우 .woff2 하나면 충분하다.
| 확장자 | 용도 | 용량 |
|---|---|---|
| .ttf | 모든 OS 사용 가능 | 용량 큼 |
| .otf | 주로 출판, 인쇄 | .ttf 대비 80-90% |
| .eot | 구형 IE 9이하 | .ttf 대비 60-80% |
| .svg | 구형 브라우저 | .ttf 대비 50-80% |
| .woff | 모던 브라우저 (웹 최적화) | .ttf 대비 40-60% |
| .woff2 | woff 개선 압축 버전 | .ttf 대비 20-40% |
Woff2를 쓰는데도 크게 느껴진다면?
한글 폰트같은 경우, .woff2를 써도 용량이 크게 느껴질 수도 있다.
잠시 영문과 한글폰트의 아주 기본적인 차이에 대해 얘기해보자면 이렇다.
영문 폰트는 대소문자와 숫자, 특수문자까지 포함해도 약 100자로 구성되지만, 한글은 자주 사용되는 최소 상용자인 2,350자를 포함해야 해서 용량이 크다. 근데 한자는? 상용자만 2만개가 넘는다 😂
근데 만약 이걸 두께별로 Regular, Medium, Bold를 만든다면? 모두 다 디자이너들이 직접 눈으로 봐가며 균형을 맞춰야한다. 그래서 한글은 본문용으로 균형이 잘 잡힌 폰트를 만들려면 1-2년씩 걸린다.
중국은 너무 압도적인 개수 탓인지 기술이 엄청 발달했다. 사실 돈이 많이 되지 않을텐데 이런 곳에 돈을 투자하는 문화는 좀 배울필요가 있다.
어쨌든, 이야기가 길었다.
결국 한글 폰트는 용량이 크니까 최대한 용량 작은 것을 찾아써야한다는 말이다.
근데 만약 woff2를 쓰는데도 용량이 크게 느껴진다면?
subset을 활용하는 방법이 있다.
아래 방법으로 더 최적화해보자.
Subset으로 폰트 파일 크기 더 최적화 하기
Subset이란 기존 폰트 파일에서 필요한 문자만 포함한 좀 더 작은 셋의 폰트 파일을 말한다.
예를 들면 중국어 폰트에 너무 많은 글자들이 있어서 폰트 파일 하나만 100메가가 넘어가는 경우라면, 서비스에 사용되는 폰트들만 추려서 작은 셋의 폰트 파일을 만드는 것이다.
출시 이후부터 많은 사랑을 받고 있는 Pretendard도 일본어 폰트인 JP 버전을 보면 한자가 많다보니 subset을 지원하고 있다
이 파일들 중 원하는 글자를 포함한 폰트들을 모아서 폰트 파일 합쳐주는 서비스를 이용해 커스텀 서브셋 폰트를 만들어 이용할 수 있다.
예를 들면 transfonter 같은 곳이 있다.
사실 앱 만들 때에는 시스템 폰트를 쓰는것이 좋다고 생각한다 😂
폰트도 신경쓰기 시작하면 참 번거롭다.
사람들이 폰트 때문에 서비스를 쓰거나 쓰지 않거나 하진 않기 때문에, 정말 브랜딩이 너무 중요한 것이 아니라면 사용성과 앱 개발의 편의를 위해 시스템 폰트를 쓰는 것을 추천한다.