서론
웹 퍼블리셔를 하다가 웹 개발을 배우며 느끼는 점은 화면 구현 보다는 최적화가 더 중요해졌다고 생각이 든다. 렌더링이 더 빨라지게, 이미지의 용량이 더 적어지게, 폰트의 용량이 더 적어지게 등 다양한 웹 최적화 방법이 있다.
이번 프로젝트에서 초기 셋팅을 하던 중 서브셋 폰트라는 말을 처음 듣게 되었고, 서브셋 폰트 검색을 시작으로, 최적화에 더 적합한 폰트의 형식 또한 알아가보았다.
폰트 형식
-
TTF(True Type Font)
- 애플 + 마이크로소프트에서 개발
- 비트맵 형식의 폰트 파일을 대체하기 위해 제어점이 3개인 2차 베지어 곡선의 형태로 개발되었다.
- 운영 체제가 광범위하게 지원이 된다.
-
OTF(Open Type Font)
- 어도비 + 마이크로소프트에서 개발
- 제어점이 3개인 TTF 보다 4개로 발전되었으며, 더욱 섬세한 작업이 가능하다.
- TTF의 모든 기능을 사용 가능하며, 고해상도의 출력 작업이 필요할 때 사용한다.
-
WOFF
- 모질라 + 오페라 + 타입키트 + 마이크로소프트에서 개발
- TTF, OTF와 동일하게 동작하지만, 더 작은 크기를 갖고 있다.
- 2012년에 W3C에 권장 사항으로 등록되었다
-
WOFF2
- WOFF의 후속 버전이다. WOFF보다 파일을 압축해서 더 작은 크기를 갖고 있다.
결론은 WOFF2가 가장 파일 크기가 작고, 거의 모든 브라우저에서 호환이 가능하기 때문에 WOFF2 형식을 사용하는 것이 렌더링과 최적화 부분에서 가장 좋은 선택이다.
서브셋 폰트📕
서브셋 폰트란 웹 폰트에서 원하는 문자만 남기고 나머지 문자는 삭제한 폰트를 말한다.
갢, 갏, 갪, 갫 같은 글자는 사용하지 않기 때문에 삭제시켜도 문제가 없다.
하지만 페이지에서 삭제된 글자를 출력하려 하면 제대로 출력 할 수 없다는 문제가 있다.
파일 크기 비교
- ttf: 1130KB
- 서브셋 ttf: 932KB
- 서브셋 woff2: 173KB
서브셋 폰트 메이커🔨
필요 없는 글자를 삭제시킨 서브셋 폰트가 있다.
하지만 만약 삭제시킨 글자가 필요하다면 어떻게 해야할까??
답은 서브셋 폰트 메이커로 삭제시킨 글자를 추가한 서브셋 폰트를 만들면 된다.
웹에서 사용할 수 있는 폰트는 매우매우 많지만 서브셋 폰트를 만들어서 지원하는 폰트는 많지 않기 때문에 서브셋 폰트 메이커를 사용하여 직접 서브셋 폰트를 만들어야한다.
결론
원래 폰트를 적용할 때는 폰트의 형식과 상관없이 그냥 cdn으로 가져와서 사용했었다.
이번 포스트를 작성하면서 웹에서 적합한 폰트 형식이 어떤 건지 알게 되었다.
그리고 서브셋 폰트를 활용하면 기존 폰트보다 용량이 작아지기 때문에 서버의 부담도 덜 수 있다.
다음에는 폰트가 어떤 방법으로 웹에 렌더링 되는지 알아보는 시간을 가져야겠다😀
참조
