이미지 폰트? 이제는 Canvas와 VML로 처리하자

* Clearboth Blog에 올렸던 글(2009/03/19)을 이전했습니다.

WebAppers에 자바스크립트와 Canvas, VML을 이용한 텍스트 렌더링 기법(Rendering Text with Javascript, Canvas and VML)이 소개가 되었습니다. 그리고 이를 OUTSIDER'S DEV STORY에서 사용법을 자세하게 설명해 주고 있어 소개해 드립니다.

웹 페이지의 주된 정보는 텍스트로 이루어져 있습니다. 하지만 비주얼 요소가 점차로 강해지면서 다양한 폰트가 개발되고, 시스템 폰트가 아닌 디자인 폰트의 적용이 일반화 되어 가고 있습니다. 특히 한국은 정도가 심하다고 느껴질 정도로 많은 폰트가 이미지로 처리되고 있습니다. 플래쉬를 이용한 방법(sIFR) 등 그동안 몇가지 신선한(?) 방법들이 제안되어 왔는데 이번에는 Canvas와 VML을 자바스크립트로 다루는 기술이 소개되었습니다.

영문과 한글 모두 제대로 처리해 주고 있다.

자바스크립트가 지원되는 환경에서는 Canvas와 VML을 이용해서 텍스트를 지정된 폰트로 변경해 주며, 지원되지 않는 환경에서는 HTML에 마크업된 텍스트를 그대로 출력해 줍니다. 때문에 별다른 조치 없이도 접근성을 보장해 주고 있다고 볼 수 있을 것 같습니다.

가장 중요한 사실은 일부 공개 폰트에 제한 된 경우이긴 하지만 한글 폰트도 제대로 지원되고 있다는 사실입니다. 솔깃하시죠?

하지만 모든 기술은 항상 장단점을 가지고 있기 마련입니다. 한번씩 테스트 해 보시고 판단해 보세요. 더 자세한 설명과 사용법은 OUTSIDER'S DEV STORY에서 확인해 보세요.