과일장수님의 아티클

진짜 동작하는 한글 웹폰트 최적화하기

돌아보면 한글 웹폰트 최적화는 시작해서는 안되는 작업이였습니다.

서비스에 큰 도움이 되지도 않는데, 그 깜박거림과 짧은 순간의 폰트 변경을 없애보겠다는 오기 때문에 거의 일주일을 썻네요.

이렇게라도 남겨야 덜 억울할것 같아서 기록해봅니다.

한달전쯤 운영중인 사이트의 웹폰트 최적화가 전혀 동작하지 않는다는 것을 깨달았습니다. 가끔 실패하겠지 뭐 생각했었는데, 첫번째 방문, 첫번째 로딩에서는 거의 100% 폰트가 바로 적용되지 않았습니다.

'한글 폰트 최적화' 검색해서 font-display:optional 도 적용했는데, 왜그러지? 내가 뭘 잘못했나?

그래서, 한글 웹폰트가 잘 적용된 모범사례를 찾기 시작했습니다.

한글웹폰트 모법사례찾기 에 보시면 자세한 내용을 볼 수 있습니다.

결론적으로, 꿀꿀한 충격을 받았습니다. 제가 본 큰 회사들은 font-display:optional를 쓰고 있지 않았습니다. 이 최적화는 한글에 맞지 않다는 것을 알았습니다. 영어 subset 폰트정도로 작은 크기나 나 되야 쓸수 있는거지, 한글웹폰트에는 어림도 없었던거죠. 그리고, 한글사이트에서 유독 많이 보이는 첫화면 애니메이션이 혹시 웹폰트 최적화 포기를 숨기기 위한 꼼수가 아닌가 의심이 생겼습니다. 하여간, 제가 찾아본 어떤 한글 사이트에서도 첫로딩에 웹폰트를 제대로 표시하는 곳을 찾지 못했습니다. 괜히 애니메이션이 있거나, 깜박이거나, 홈페이지와 폰트가 따로 따로 등장하는 꼬진 모습을 보여주고 있었습니다.

다른곳에서 한 것을 따라하려는 것을 포기하고, 그냥 제가 해보기로 했습니다.

검색해서 찾은 것은 subset 폰트를 극단적으로 줄일 수도 있다는 가능성이였습니다. 한페이지에 등장하는 글자들로만 이루어진 폰트를 만드는 방식인데, 희망을 가지고 했지만, 실패했습니다. 여전히 font-display:optional을 적용하기에는 더 줄여야 했습니다.

그래서, 첫화면에 보이는 부분만 뽑아서 subset폰트를 만들었고, (10kb수준) font-display:optional 이 적용될 수 있는 수준으로 빠르게 로딩되었습니다. 이렇게 되면, 최신 웹폰트 최적화 기술을 사용할 수 있습니다. preload link 와 display:optional 두개만 있으면 됩니다.

핵심만 설명드린거고, 실제 제품에 적용하려면 몇가지 고민이 더 되어야 합니다.

전체 작업과정과 고려사항은 여기서 (꼼수로 완성한 한글 웹폰트 최적화) 보실 수 있습니다.

작업 결과는 file.kiwi 에서 보실수 있습니다. 예전에는 대부분 첫로딩에서 이상했지만, 이제는 3g 모바일 이 아니라면 대부분 첫로딩에서도 웹폰트를 잘 표시합니다.

한글 폰트최적화는 국내업계에서 할 수 있는 게 별로 없는 분야입니다. 구글이 뭐해줄지 바라만 보고 있는 상황이죠. 구글은 영어중심으로 계속 서비스를 만들테니.. 한 몇년은 이런 꼼수를 쓰면서 버터야 할것입니다. 첫화면 애니메이션이 많은 국내사이트를 보면, ie시절 폰트가독성이 떨어져서 12pt만 사용했었다는 전설이 떠오르네요.