본문 바로가기
Coding Life

폰트 힌팅

by 고니-gonnie 2016. 4. 26.
반응형

원래 웹 서비스에서 글꼴이라 하면 시스템에 내장된 글꼴을 사용하는 것이 당연했고 그 방법 밖에 없던 시절이 있었다. 물론 영어 폰트는 예쁜 게 많아서 따로 걱정할 것이 없었는데 한글 폰트의 경우는 조합형이니 완성형이니 부터 시작해서 굴림체라는 극악의 폰트까지... 참 말이 많다. 굴림체라는 것에 대해서는 검색해보면 알겠지만 일본어 폰트를 기반으로 만든 것이라 한글을 예쁘게 표현하지 못한다. 무엇보다 아이폰에서는 한글 bold 처리가 되지 않았다. (...)

이런 사태가 계속 벌어지고 있다가 마이크로소프트가 윈도우7을 내놓으며 맑은 고딕이라는 것을 탑재했다. 애플의 경우 iOS 5.x대에 "애플 산돌고딕네오" 라는 것을 내놓았고 이후에 맥 OS에도 탑재 되었다. 덕분에 애플 계열 사용자들은 예쁜 한글 폰트를 보게 되었으나 윈도우의 경우는 오래전부터 남아있는 돋음, 굴림의 저주에서 빠져나오지 못했다.

그러다 웹폰트라는 기술이 등장했는데 사실 이미 우리나라에선 미니홈피에서 구현되던 기술이다. 도토리를 내면 폰트를 예쁘게 바꿔주는 그런 것.. 하지만 웹폰트에도 문제가 있었던 것이

1. 브라우저별 지원폰트가 다 다름 (지금은 다행히 많이 통일되었음)
2. 라이센스 문제 --> 간혹 무서운 우편을 받게 되는 경우도 있다.
3. 용량압박 (한글폰트는 용량이 크다.) --> 나눔고딕 기준 700kb가 넘는다. 영어만 있는 폰트들이 70kb 내외인 것 보면 정말 큰 용량이다.

이런 문제들이 있었고 이 중에 또 문제가 될 수 있는 것은 바로 폰트 힌팅이다. 나도 오늘 처음 들은 내용인데 이게 폰트를 만드는 작업보다 더 어렵고 (수작업..) 돈도 많이 든다고 한다. 윤디자인 관련자에게 들은 얘기로는 나눔글꼴이 이게 되어 있는데 돈을 수억 썼다고 한다.

폰트 힌팅이 되지 않으면 폰트가 브라우저에 잘 안그려진다. 나눔고딕도 초기에 막 뿌옇게 나오고 그런 시절이 있다. 특히 폰트가 작아지면 글씨가 찌글대고 깨진 것처럼 보이고 난리도 아니다.

우리 팀에서 처한 문제는 심미적인 부분도 있지만 용량의 압박이 상당했다. 이전 작업자가 세팅해놓은 로컬에 있는 출처 불명의 노토산스CJK의 경우 힌팅이 안되어 있는지 심미적인 부분에서 일단 탈락이었다. 그를 대체하고자 한글 사용자에겐 나눔고딕을 제공하고 있었는데 그 용량이 만만치 않다. (나눔고딕 두종류 로드하는데 1.3mb) 결국 디자이너의 의지와 개발자에겐 퍼포먼스를 선물해야하는 상황에서 이래저래 짱구를 굴린 결과 노토산스를 쓰되 구글 cdn에서 제공하는 것을 쓰자. 라고 정하고 테스트를 진행했다.

결과는 대성공. 구글cdn에서 내려주는 노토산스의 경우 로컬에 있는 것보다 훨씬 빠르게 (실제 서비스 기준) 로드되고 힌팅이 되어 있는지 글씨도 예쁘게 잘 나온다. 덕분에 주말부터 내 머리속을 괴롭히던 과제 하나가 해결되었다. 물론 노토산스도 한글을 포함하고 있어서 용량이 크다. 하지만 cdn으로 리소스를 옮기게 되어서 실제서비스 기준 로컬에서 로드하는 것보다 훨씬 빠르다.

결론 : 노토산스는 구글cdn을 사용합시다.

반응형

'Coding Life' 카테고리의 다른 글

크롬 har 파일 생성  (0) 2017.02.01
즉시실행 익명함수를 쓰게되는 경우  (0) 2016.10.11
입사  (0) 2016.03.14
퇴사  (0) 2016.03.11
웹접근성의 오지랖  (0) 2016.03.10