좋아하는 일

TrueType 폰트를 웹폰트로 변환해보자

사람™ 2007. 3. 14. 02:55

웹폰트를 많이 들어봤을 것이다.
주로 싸이월드나 네이버 블로그 등에서 가독성이 매우 떨어지며(적어도 내가 보기엔...) 받침 있는 글자는 읽기조차 힘들고 마치 상형문자처럼 생긴 이상한 폰트들...
이쁘다고 생각하는 이들은 좋아하겠지만 본인처럼 정서적으로 불안한 사람은 머리가 매우 아프다.

폰트에 대해 많은 고민을 했었다. 정말 가독성이 뛰어난 한글폰트는 없는것일까?
가독성이 뛰어나지도 않은것 같지만 눈에 익어서 일까... 주로 사용하는 9pt 짜리 굴림이 사실 지겹다.

이런 부분에 대해 어떤 글을 읽은 적이 있는데(어디였는지 기억이 안난다) 모니터 화면에서 보는 글자와 책으로 보는 글자는 똑같은 폰트일지라도 차이가 난다고 한다. 그 이유는 모니터 화면은 발광체이고 일반 책은 발광이 아니기 때문이라고 한다.
더 자세한 내용은 광고 엔진 네이버에서 '맑은 고딕' 이라고 검색하면 많은 내용이 나온다.

암튼간에 이런 저런것들을 찾아보다가 요즘 '맑은 고딕' 체가 좋다고 해서 나도 설치해 보았다.


왼쪽이 '맑은 고딕', 오른쪽이 '굴림' 체이다.
'맑은 고딕'이 약간 흐리긴 하지만 폰트 크기가 커질수록 가독성은 좋아 보였다.

저작권의 위험(?)을 무릎쓰고 웹폰트로 변환을 시도했지만 변환이 되질 않았다.

어찌 됐든 이제부터 으뜸9.ttf 라는 TrueType 폰트 하나를 웹 폰트로 변환해 보도록 하자.






1. 먼저 아래의 으뜸9.ttf 폰트를 다운로드 받아서 설치하도록 하자.

invalid-file

   폰트 설치 방법은 C:\Windows\Fonts 디렉토리에 폰트를 복사하면 자동으로 설치된다.




2. 아래의 프로그램을 받아서 설치하자.

invalid-file

   위 프로그램은 마이크로소프트에서 임베디드 폰트를 제작하기 위한 툴이다.
   자세한 내용은 http://www.microsoft.com/typography/default.mspx 를 참조하기 바란다.




3. 폰트 변환을 위해 몇가지의 작업이 필요하다. 우선 변환 작업을 할 디렉토리를 하나 생성해야 한다.
      본인은 Z:\fontA 디렉토리에 만들었다. 주의할 점은 경로에 2byte 문자가 포함되면 안된다.
      그리고 index.html 파일을 하나 만들고, 아래의 파일을 Z:\fontA 에 다운로드 받아 놓는다.

invalid-file




4. 바탕화면에 있는 'Microsoft WEFT' 를 실행한다. 처음 실행시에는 다음과 같은 화면이 나오는데 컴퓨터에
      어떤 폰트가 존재하는지 프로그램 스스로 DB를 생성하는 작업이다.
      실행 시 컴퓨터에 새로운 폰트가 있으면 프로그램이 자동으로 DB를 업데이트한다.


   만약 새로운 폰트를 설치후에 'Microsoft WEFT' 프로그램에서 폰트가 보이지 않는다면 아래와 같이 'Update Font DB...' 를 실행해 주면 된다.


   'Update Font DB' 작업이 끝나면 아래와 같이 자동으로 마법사 창이 나온다.

  
   처음 실행시에 위와 같이 마법사 창이 뜨며, 간단한 순서가 표시된다.  을 클릭해서 넘어가자.

  
   유저 정보를 입력 후  으로 넘어가자. 지금까지는 처음 실행시에만 나타난다.

  
   위 화면에서와 같이 Z:\fontA\index.html 파일을 선택하고 다음으로 넘어간다.

  
   Analyze Web Pages 가 나오는데 선택했던 index.html 파일을 분석하는 부분이다.
  
   index.html 파일은 비어있으므로 분석이 소용없다 Skip analysis 를 선택 후  으로 넘어간다.

  
   위 화면에서 를 클릭한다.

  
   변환하고 싶은 폰트를 선택한다. 프로그램이 2byte 문자를 그냥 짤라버리는 문제가 있는데,
   'Update Font DB...' 를 수행할 때 2byte 문자가 짤리는것 같다.
   '으뜸9' 폰트 이름이 '으' 자만 보이는데 본인 컴퓨터엔 '으' 자로 시작하는 폰트는 '으뜸9' 폰트밖에
   없어서 선택이 가능했으니 참고하여 잘(?) 선택해보자.
    를 눌러서 다음으로 넘어가자.

  
   폰트가 추가된 것을 볼 수 있다. 폰트 옆에  표시가 나오면 정상적으로 변환이 가능하며,
     표시가 나오면 변환이 불가능한 폰트이니 확인하고 진행하자.
   이제  버튼을 클릭하자. 리스트에서 폰트를 선택하면  버튼이 활성화 된다.

  
   폰트에서 사용하는 문자들이 표시되는데 여기 나오는 문자에는 한글이 나와 있지 않다.
    버튼을 클릭해서 아까 저장해 놨던  를 선택해서 불러오자.
   파일형식을 All files 로 해야 txt 파일이 보이니 주의하자.
    클릭한 다음에  으로 넘어가자.

  
   여기에서 웹폰트가 생성될 위치와 웹폰트를 사용할 위치를 지정할 수 있다.
   웹폰트가 생성될 위치와 사용할 위치는 자동으로 Z:\fontA\ 로 지정되는데 웹폰트는 어떤 위치에서건
   사용이 가능해야 하기 때문에 위치를 변환해 주어야 한다.
    버튼을 클릭한다.

  
   웹폰트가 사용될 URL을 입력하면 된다. saram.pe.kr 에서만 사용하고 싶으면 saram.pe.kr 만 넣으면 되지만
   어떤 사이트에서건 사용하고 싶을 땐 아래 파일의 내용을 복사해서 붙여넣기 한다.

invalid-file
  
    를 클릭해서 추가하고  를 클릭해서 빠져나오자.
   추가된 내용이 확인 되었으면  버튼을 클릭해서 다음으로 넘어가자.

  
   웹폰트를 생성하는 화면이 나온다. 약간 시간이 걸릴 수 있으니 조금만 기다려 보자.

   
   프로젝트가 생성된 위치를 알려준다. 생성된 프로젝트는 필요없으니 삭제해도 무방하다.
    버튼을 클릭해서 넘어가자.

  
   웹폰트를 생성하는 작업이 완료되었다.  을 클릭해서 마법사를 종료하고 프로그램을 닫는다.



5. 이제 Z:\fontA 디렉토리를 보면 확장자가 eot 인 파일이 하나 생성되었을 것이다. 이 웹폰트가 잘 작동하는지 알아보자.

   - 웹폰트가 잘 작동하는지 정확히 알아보기 위해서 기존에 설치했던 으뜸9.ttf 파일을 삭제한다.
   - 폰트 이름을 으뜸9.eot 로 변경한다.
   - test.html 파일을 하나 생성해서 아래와 같이 입력한다.

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
  4. <style>
  5. @font-face {font-family:으뜸9;src:url(으뜸9.eot);}
  6.  
  7. body{
  8.         font-family:으뜸9;
  9.         font-size:10pt;
  10. }
  11. </style>
  12. <title>test web font</title>
  13. </head>
  14.  
  15. <body>
  16.  
  17. 지난 주 CEO 스티브 잡스가 맥월드에서<br />
  18. 아이폰을 처음으로 선보인 이후 애플<br />
  19. 임원들은 아이폰 에 대한 언급을 극구<br />
  20. 자제하는 듯한 분위기다.<br />
  21. 대신 애플은 세간의 관심에 초연하다는<br />
  22. 듯 17일 오후 전화 기자회견에서 기대치<br />
  23. 를 크게 웃돈 1분기 실적 에 관해 이야기<br />
  24. 할 뿐이었다. 아이폰은 사실 전화와 웹<br />
  25. 브라우징 기능을 추가한 와이드스크린이<br />
  26. 장착된「비디오 아이팟」일 뿐이다.<br />
  27. 애플은 이를 오는 6월 싱귤러 이동통신<br />
  28. 네트워크용으로 출시할 예정이다.<br /><br />
  29.  
  30. I did a quick search out on Amazon<br />
  31. to get the list of current and upcoming<br />
  32. titles for Access 2007.<br />
  33. There are really a ton of great titles<br />
  34. out there from lots of different publishers.<br />
  35. Content ranges from a complete Access<br />
  36. reference like Microsoft® Office Access<br />
  37. 2007 Inside Out to more targeted<br />
  38. scenarios such as The Rational Guide<br />
  39. to Microsoft® Office Access 2007 Templates.<br />
  40.  
  41.  
  42. </body>
  43. </html>

   - 예제가 필요하면 아래에서 다운로드 받는다.

invalid-file invalid-file


   - 자신이 사용하는 웹서버에 올려서 테스트 해본다.


변환 방법에 대한 매뉴얼이 여기저거 많았는데도 이것을 쓴 이유는 내가 기억하고 싶어서이기도 하고 매뉴얼을 보고 따라해본 결과 잘 안되었던 부분이 있기도 해서이다.
이것으로 웹폰트로 변환하는 방법을 마칠까 한다.

폰트를 개발하는 노력과 비용을 생각해서 상용폰트는 절대로 이렇게 변환해서 배포하면 말도록 하자.




참조 :
소야 폰트 홈페이지 http://soyafont.com