tyle.io에서 제공중인 폰트
< tyle.io에서 제공중인 폰트 >

이글은 머리속에 있는 것들을 정리할 겸 쓰는것이라 매우 비전문적일 수도 있으며 무작정 삽질하며 터득한 생활지식을 통해 만들어졌습니다. 또한 글은 편의상 음슴체로 쓰겠습니다.

빠르게 대충 익히는 폰트의 종류 그리고, 경량화 방법

웹에서 폰트타입은 크기 세가지가 있다(ttf, otf, woff). 이외에도 (eot, woff2, svg, svgz) 등등 세상엔 내가 모르는 것도 폰트들도 많겠지만 일반적으로 많이 사용하는 폰트타입은 저 세가지 정도가 있다. 일단 각각의 특징은 자세히 파면 머리아프고 네xx에서 검색하면 너무 잘 나와있기 때문에 얕게 중요한것만 요약하면 이렇다.

특징

  • TTF : TrueTypeFont 그냥 잘 모르겠고 귀찮을때 ttf쓰면 안돌아가는 곳이 없을정도로 호환성이 좋다(가장 오래됬다고 함) 웹뿐만아니라 시스템폰트이기 때문에 photoshop이나 기타 시스템 애플리케이션에서도 당연히 작동함.
    장점 : 폰트의 끝판왕 (다용도, 호환성)
    단점 : 용량이 크고 불법복제가 심각하다.(네xx 뒤지면 다 있음) 그리고 출력시 퀄리티가 안좋을 수있음.

  • OTF : Open Type Font 프린트 출력용으로 주로 사용. photoshop이나 디자이너, 전문가들을 위해 퀄리티를 끌어올린 버전 (3차원 곡선 vector를 이용하여 어쩌구라는데 뭔말인지는 잘 모르겠음) 웹에선 곡선이 살짝 각져보이는 현상이 있을수 있음
    장점 : 출력용으로만 보면 가장 좋다.
    단점 : ttf와 동일, 웹에서 볼때 퀄리티가 안좋을수 있음.

  • WOFF : 완전히 웹용으로 만든 타입. 그래서 용량이 대폭줄어들었고(ttf,otf에 비해) 로드가 빠르다. 당연히 웹용이기 때문에 시스템폰트로의 사용은 불가능함. 요즘 웹에선 대부분 woff로 많이들 쓴다. 클라이언트의 1메가를 아끼는것 부터가 쾌적한 환경의 시작
    장점 : 웹용 끝판왕
    단점 : 웹만됨, 구하기가 힘듬 (요즘엔 많이 있더라)

otf가 웹에선 퀄리티가 안좋다고는 하지만 나같은 막눈이 보기엔 웹에서 볼땐 otf나 ttf나 웹에서뭐가 다른지 모르겠다. -bk생각


호환성

브라우저별 호환성 표
< 브라우저별 호환성 표 >
솔직히 요즘 크롬 버전이 54이니 3.5부터 가능 이런건 그냥 크롬에서 된다고 보면 될꺼라 생각된다. 고로 웹에서 font를 사용하고 싶다? woff를 구하거나 구하기쉬운 ttf나 otf중 아무거나 구한 뒤 변환하면 된다. (물론 깜빵가기 싫다면 저작권을 필히 확인 후 사용)


경량화

폰트의 용량은 포함되어있는 서브셋에 따라 천차만별이지만 2300자 기준으로 보면 평균 2~5메가 되는 듯하다. 경량화를 왜 하는지에 대해서는 아래 스크린샷을 보자

원본 notoSans를 여러가지 버전으로 변환해보았다.
< 원본 notoSans를 여러가지 버전으로 변환해보았다. >

원본 파일은 notoSans otf 이며 CJK(한중일) 통합폰트이기 때문에 용량이 어마어마어마하다. 요즘같은 기가인터넷시대에 빵빵한 인터넷 환경과 좋은 사양에서는 느리다고 생각 못할지도 모르겠지만 모바일이나(접속한번에 소중한 데이타가..) 인터넷이 구린상황 에서는 치명적으로 다가 올 수 있다. 솔직히 폰트파일 하나만 모든 페이지에서 쓸꺼면 그냥 살짝 경량화된 4메가 이하 ttf로 써도 될것 같다.

그렇다면 경량화의 단점이 무엇인가?

한자, 한어병음, 일본어, 특수단위 등등 일반적으로 잘 사용하지 않는 문자들은 제외시킴으로서 용량을 확보하는 것이니 ('쫋꽲낎' 등 이상한 외계어도 포함이 안되있다) 해당되는 문자들은 front-end상에서(브라우저) system기본 폰트로 표현이 된다. 뭐 많이 쓰이는 문자도 아니고 크리티컬한 문제는 아니라고 생각된다.


생각보다 좀 길어졌으니 경량화 방법 그리고 woff변환에 대한 방법은 다음 포스팅에... 다음에 봐요~