NEOEARLY* by 라디오키즈

Google Fonts + 한국어... 머신 러닝 기술로 무장한 구글의 한글 웹폰트를 티스토리에 적용해 보기... 본문

N* Tech/IT Service

Google Fonts + 한국어... 머신 러닝 기술로 무장한 구글의 한글 웹폰트를 티스토리에 적용해 보기...

라디오키즈 2018.04.25 14:00

설마 머신 러닝이 이런 곳에도 적용될지는 몰랐지만, 사실 그들에게 머신 러닝은 빼놓을 수 없는 필살기이기에 구글이 머신 러닝에 기반한 웹폰트를 공개했을 때 놀라기보다는 얼마나 효과적으로 또 쾌적하게 웹폰트를 제공할 수 있을지 궁금하더군요. 그래서 제 블로그에도 며칠 전에 적용해 봤는데요. 역시나 제법 쾌적하더군요.


구글이 머신 러닝 기술로 최적화했다는 한글 웹폰트를 블로그에 적용해 봤습니다...


아마 블로그에 웹폰트를 적용해 보신 분이라면 아시겠지만, 일반적인 웹폰트는 특성상 모두 로딩이 되어야 글자를 표시할 수 있어서 전체가 다 다운로드되어 캐싱되기 전에는 블로그 로딩을 지연시키는 약점이 있습니다. 종종 자기가 좋아하는 폰트를 웹폰트로 변환해서 적용하시는 분이 계신데 이 경우 이런 로딩의 문제와 함께 무단으로 사용한 폰트의 저작권 문제도 발생할 수 있는데요.



'Google Fonts + 한국어'라는 이름으로 구글이 서비스 중인 이 웹폰트 서비스는 블로그나 웹사이트의 로딩 속도를 떨어트렸던 기존의 웹폰트가 가진 한계를 머신 러닝에 기반한 최적화 기술로 극복했다고 하더군요. 주제별로 자주 사용되는 글자를 그룹화해 필요한 그룹만 다운로드하도록 해 쾌적하게 로딩되게 하고 폰트의 저작권 문제 역시 오픈 폰트 라이선스(OFL)로 누구나 자유롭게 사용할 수 있도록 했고요. ...하지만, 지원하는 폰트가 아직 적은편입니다.ㅎ





적용하는 방법도 아주 간단합니다. 일단 제공되는 폰트 중 자기 블로그나 웹사이트에 적용하고 싶은 폰트를 클릭하면 하단에 HTML, CSS, 굵기 선택 같은 옵션이 나오는데요. 이 코드를 적용하면 되죠. 제 경우엔 나눔 고딕 폰트를 제 티스토리에 적용하기 위해 HTML란에 표시된 코드를 '스킨 편집> html 편집' 속 HTML의 <Head>... </Head> 태그 사이에 넣고 CSS의 font-family: 항목에 Nanum Gothic을 추가하기만 하면 되거든요.




나눔 고딕은 이미 많이들 쓰고 계셔서 특별해 보이지는 않지만, 로딩이 쾌적한 것 같아 당분간 이렇게 써보려고 합니다. HTML이나 CSS의 벽을 아직 느끼고 계신다면 굳이 잘 쓰고 있는 스킨을 건드리실 필요는 없지만, 아주 작은 부분이니 한번 도전해 보겠다면 기존에 사용하시던 스킨을 보관해놓으신 후에 한번 시도해 보세요. 혹시 알아요? 그렇게 티스토리 스킨에 더 익숙해지실지~


[관련 링크: googlefonts.github.io/korean]


10 Comments
댓글쓰기 폼