웹폰트 적용기 1부쯤…
웹개발 프로젝트의 예상된 변수! 웹폰트 적용 중입니다.
다행이라면 다행인 것이, 디자인 파일을 보면서 계속 생각했습죠. 아, 저거 올려보면 다르게 보일 거다. 브라우저에서 보고 또 수정 많이 해야 할 거다. 그나마 예고편과 본편이 비슷하게 전개되면 마음이라도 편하지 않겠습니까…? 아직까지도 끝나지 않은 웹폰트 적용의 시작 부분을 써보려고 합니다.
일단 기본폰트는 최신상(아닌가 이월상품인가) Noto Sans KR. Noto Sans는 구글에서 한중일 3개국어를 위해 2014년에 공개한 오픈소스 폰트입니다. 사이트 전체적으로 산뜻함+통일된 느낌을 주기 위해 Noto Sans 한글을 쓰기로 하였습니다.
음, 예쁘고 안정적이야.
죽…여…줘…
크게 당황스럽습니다. 흠흠. 뭐 잘못해서 저렇게 나오는 거 아닙니다. 정말 저렇게 나와요.윈도우 OS 5개 브라우저(크롬, 오페라, IE, Edge, 파폭)에서 확인했는데 그와중에 크롬이 좀 더 못나보이긴 합니다만 디자인파일과의 싱크는 다섯 개 모두 찾아볼 수 없었습니다. 그래도 좀 흔하게 쓰는 폰트라고 생각했는데 결과는 참담하네요. 맥에서는 뭘 넣어도 잘 나옵니다만 ;
일단 개선방법을 생각해 봅니다.
1. Noto Sans CJK와 Noto Sans KR이 다르다? 그러니 KR 말고 CJK KR을 쓰면 좀 더 나아보이지 않을까?
Noto Sans CJK에 들어있는 한글폰트와 구글 CDN에서 내려받는 Noto Sans KR이 다른 폰트가 아닐까 하는 생각이 들었습니다.
폰트 다운은 여기 https://www.google.com/get/noto/#sans-kore
웹폰트를 import하는 경로는 여기 https://fonts.google.com/earlyaccess
결론부터 말씀드리면 다르긴 다릅니다. 하지만 저런 열화의 원인은 아니었습니다. 그리고 Noto Sans CJK KR의 굵기별 용량은 16메가, 굵기 세 종류만 쓴다고 해도 이미 용량이 무지막지하기 때문에 생각하기 힘든 옵션입니다.
2. demilight가 아니라서?
Noto Sans CJK KR에는 demilight가 있지만 Noto Sans KR에는 demilight만 딱 없습니다. 설마 그래서 이렇게 구려 보이나? light라서? demi가 아니라서?
아니고요
3. 폰트를 다른 걸로 바꿀까?
….이래저래 보니 윈도우 운영체제에서는 무조건 맑은고딕이 갑이더라구요. (괜히 시스템 폰트가 아님)
잠시 윈도우에서 맑은고딕을 쓸까 하는 생각을 해봤습니다.
아마 디자이너분이 뛰어와서 멱살 잡으실 듯…
4. 다른 옵션을 수정해보면 좀 더 나아 보이지 않을까?
심미적인 것 뿐 아니라 일단 가독성 자체가 너무 떨어져서 자간, 굵기, 컬러, 줄간격 등을 조절해 봅니다. 크고 굵게 하면 일단 잘 보이긴 하는데, 사이트 디자인도 생각해야 하고… 원래 생각했던 분위기 및 밀도와 매우 달라서 아주 다르게 가는 부분은 포기.
일단 본문만 해결되면 제목줄같이 폰트사이즈가 커지는 부분에서는 디자인 및 가독성에 문제가 없기 때문에, 분위기는 비슷하게 가져가면서 본문 가독성을 높이는 데 집중해 봅니다.
일단 졸리니 다음 화에서 계속…
Originally published at blog.minimap.net on February 8, 2017.
