Google Font API로 아름다운 웹 만들기

어제 Google I/O에서 오픈소스 비디오 포맷인 웹M을 발표한 것에 세간의 시선이 집중됐는데, 한편으로 조용히 Font API도 공개됐습니다.

 Google Font API

사용 방법은 Font API > 시작하기에서 확인할 수 있습니다. 저도 테스트 해봤는데, 정말 쉽습니다. 폰트 디렉토리도 확인해 보세요.

웹폰트를 지원하는 최근 브라우저에서 사용할 수 있는데, 테스트 결과 IE6을 포함한 Chrome, Firefox, Opera, Safari 최신 버전에도 정상적으로 동작합니다. 제가 만든 예제를 확인해 보세요.

지난 테스트에 오류가 있었습니다. 현재 IE 계열은 Font linking이나 WOFF fonts를 지원하지 않으며, EOT fonts만 지원합니다. 자세한 테스트 결과는 W3C 국제화 그룹의 Test results: Webfonts라는 글을 확인해주세요. WOFF fonts에 대한 설명과 대응 방법은 Bulletproof @font-face syntax에서 확인할 수 있습니다. (최종 수정일: 2010-05-25)

이는 오픈 소스가 코드콘텐츠를 넘어서 디자인 영역까지 확대되고 있음을 보여주는 상징적인 의미가 큽니다. 기존에도 공개형 디자인 테마/스킨이나 아이콘 세트 및 레이아웃 가이드처럼 오픈 디자인, 오픈 웹 디자인과 관련된 여러 활동들이 있어왔지만, 관련 정보가 분산되어 있어서 이를 수집하고 정리하는데 어려움이 많았습니다. 그런 측면에서 Google의 Font API는 오픈 소스 디자인의 배포와 활용이라는 점에서 획기적인 변화를 주었다고 볼 수 있습니다.

현재 표준안으로 작업중인 CSS3는 웹폰트를 정식으로 지원할 예정이지만, 폰트 라이센스 문제에 대해선 딱히 방안을 내놓지 못하고 있습니다. 현재 웹페이지에 사용된 사진이나 이미지에 대한 저작권 사냥(?!)이 횡횡하는 것처럼,  아마 5년 뒤엔 웹폰트에 대한 저작권 사냥이 횡횡할 수 있습니다. 이런 측면에서 구글의 Font API는 웹 디자이너들이 맘 편히 디자인할 수 있는 여건을 만드는 데 일조했다고 볼 수 있습니다.

불필요한 이미지를 제거하고 텍스트를 효과적으로 사용하는 것은 “하나의 웹을 보다 소중히 다루고 아름답게 가꾸는 일“에 동참하는 가장 쉽고도 큰 일입니다. 부수적으로 접근성도 향상됩니다.  아직 한글 글꼴이 제공되지 않아서 사용하기 어렵지만, 국내 웹 디자이너들이 한 목소리로 요구한다면 한글 글꼴도 제공되지 않을까요? MS가 웹 개발자들의 요구로 IE를 업그레이드했던 것처럼요. 구글 코리아에 한석봉 동화책이라도 보내야 겠군요.



10개의 의견이 있습니다. | 당신의 의견을 바랍니다.

  1. 1. Gravatar 신현석 | 2010.05.20 , 오후 04:29 · permallink

    그럼 한석봉의 서체를 웹에서 쓸 수 있게 되는 건가요? ㅋㅋ

  2. 2. Gravatar 빛알 | 2010.05.20 , 오후 04:38 · permallink

    OFL인 한국어 폰트를 찾아 주세요 :-) 그리고, 글꼴 크기 문제도 해결해야지요. 2048 EM 대신 256 EM으로 만들면 크기가 훨씬 작아지기는 합니다. (안드로이드의 드로이드 글꼴이 256 EM입니다) 한자를 빼고, 한글 음절 수도 줄이는 수도 있기는 합니다. 동적인 서브세팅을 할 수도 있겠지요. 어쨌든, 좀 생각해야 될 게 많습니다.

  3. 3. Gravatar Hooney / Daum font로 Google Font API 따라잡기 | 2010.05.20 , 오후 04:46 · permallink

    [...] 이전에 작성한 글처럼, Google Font API의 구조는 무척 사용하기 쉽습니다. 기존에 Google API(예: AJAX API)를 사용해보신 분이라면 부연 설명이 전혀 필요없겠지만, 그렇지 않은 분들이라면 CSSHTML에 사용하는 4가지 방법에 대한 간단한 기초 지식이 필요합니다. [...]

  4. 4. Gravatar Hooney | 2010.05.20 , 오후 05:26 · permallink

    @신현석: ‘미드한석봉체’가 이미 존재하는데, 예쁜 한자를 작성할 수 있어서, 도장이나 명패 또는 간판에 많이 사용된다고 하네요. ㅎㅎ

    @빛알: 저는 겨우 네이버 나눔고딕 코딩글꼴만 발견했습니다. OpenFontLicense를 적용한 글꼴 찾기가 쉽지 않네요. -_-;;

  5. 5. Gravatar 빛알 | 2010.05.20 , 오후 05:58 · permallink

    알려 주셔서 감사합니다. 하나의 글꼴이 2.2M로군요. 좀 크네요. 좀더 줄일 수도 있겠지요. composite 글꼴이 아닐지도 모르겠군요.

  6. 6. Gravatar 빛알 | 2010.05.20 , 오후 06:16 · permallink

  7. 7. Gravatar 찌니찐 | 2010.06.21 , 오후 06:06 · permallink

    후니훈님ㅋㅋㅋ
    좋은 정보 얻고 가네요~
    사진이 너무 귀여워요ㅋㅋ

  8. 8. Gravatar Hooney | 2010.06.21 , 오후 06:32 · permallink

    @찌니찐: 감사합니다. ^^;

  9. 9. Gravatar Wai. | 2010.09.27 , 오후 05:15 · permallink

    …부득이하게 회사에서 IE6을 사용하여 후니훈님의 테스트결과 정상동작한다길래 확인해 봤더니…. 모두 통일되어 돋움체로 보이네요. 이런 안타까울수가…OTL

  10. 10. Gravatar 진희 | 2011.09.10 , 오전 03:24 · permallink

    좋은정보~~~감사해용

당신의 의견을 바랍니다..

사용할 수 있는 HTML 태그 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Aboout Author

조훈 Hooney라는 ID로 온라인에서 활동하는 조훈입니다.
자세히 보기 »

CSS Reference

Hooney와 함께 만드는 CSS Reference!


Be Friend~! Be Friend~!