웹 폰트를 사용한 아이콘

웹 페이지를 만들다보면 각종 아이콘을 사용할 일이 많습니다. 아이콘을 직접 그릴 줄 아는 디자이너가 아닌 이상은 여기저기서 가져다 쓰는 경우가 대부분일텐데 아이콘을 하나하나 이미지 파일로 두자니 네트워크 부하가 걱정되고, 그래서 CSS 스프라이트를 만들어놓자니 배경으로 지정해야 하고, 배경 위치도 정해줘야하고 이래저래 사용하기가 영 불편합니다. 게다가 크기 조절도 안됩니다. 특히 모바일 페이지의 경우 2배 크기의 아이콘을 따로 만들어야 하는 경우도 있는데 그렇다고 원래 크기의 아이콘을 2배로 늘렸다가는 아이콘이 흐릿하거나 깨졌다는 얘기를 듣게 될 것입니다.

같은 고민을 먼저 한 사람들이 내놓은 해결책은 아이콘을 웹 폰트로 만들자는 것이었습니다.

딩뱃 폰트

아시는 분은 아시겠지만 글꼴 중에 딩뱃(Dingbat)이라고 불리는 종류가 있습니다. 딩뱃 폰트는 장식 문자나 동물 모양 등 각종 그림이나 기호를 글꼴로 만들어 둔 것을 일컫는 용어입니다. 윈도우에도 Wingdings라는 딩뱃 폰트가 내장되어 있습니다.

현재 사용되는 대부분의 글꼴은 벡터 정보가 포함되어 있어 크기를 자유롭게 조절할 수 있으므로, 도형 등이 글꼴로 만들어져있다면 다양한 용도로 사용하기 좋습니다.

아이콘 웹 폰트

아이콘을 웹 폰트로 제공하는 프로젝트는 다음과 같습니다.

Brandico

소스 : https://github.com/fontello/brandico.font
데모 페이지 : http://fontello.github.com/brandico.font/demo.html
라이선스 : OFL(글꼴), CC BY-SA(아이콘)
제공형식 : WOFF, TTF, EOT, SVG

Entypo

소스 : https://github.com/fontello/brandico.font
라이선스 : CC BY-SA
제공형식 : WOFF, OTF, TTF, EOT, SVG, EPS, PSD

Socialico

홈페이지 : http://fontfabric.com/social-media-icons-pack/
라이선스 : Free (압축 파일 내 EULA 문서 참고)
제공형식 : OTF

Web Symbols

홈페이지 : http://www.justbenicestudio.com/studio/websymbols/
라이선스 : OFL
제공형식 : WOFF, TTF, EOT, SVG

[adsense]

필요한 것만 뽑아쓰기

앞서 살펴본 아이콘 폰트들은 서로 비슷한 듯 하면서 다른 매력이 있어 취향에 따라 한 개 또는 그 이상의 글꼴을 한꺼번에 사용할 수도 있습니다. 그러나, 여러 개의 글꼴을 사용하면 사용자가 다운로드 받아야 하는 용량이 증가하기 때문에 가급적이면 사용할 아이콘만 뽑아서 글꼴로 만드는 것이 좋습니다. Fontello는 바로 그런 기능을 제공하는 프로젝트입니다.

Fonttello를 사용하면 Entypo, Font Awesome, Iconic, Typicons, Modern Pictograms, Web Symbols, Brandico에서 필요한 아이콘만 선택해서 하나의 글꼴로 뽑아낼 수 있습니다. 뿐만 아니라, 쉽게 바로 사용할 수 있도록 HTML 파일과 CSS까지 제공합니다. 사용법 또한 매우 간단해서 원하는 글꼴을 선택한 후에 오른쪽 상단에 있는 다운로드 버튼을 클릭하기만 하면 됩니다.

Fontello의 소스는 https://github.com/fontello/fontello에서 구할 수 있습니다.

주의

웹 폰트를 사용해 아이콘을 표현하는 방식은 여러 모로 효율적이고 굉장히 좋은 아이디어이지만, 이 방법에도 단점은 존재합니다. 아이콘이 일정 수준 이상으로 커지면 아이콘의 외곽선 부분이 거칠게 보이기도 한다는 것입니다. 윈도우즈 운영체제에서 도드라지는 것으로 보아 운영체제가 글꼴을 처리하는 방식에서 오는 문제인 듯 합니다.

개인적으로 100픽셀까지는 문제없이 사용할만한 수준이라 판단하지만, 자신이 사용하려는 글꼴 또는 환경에 따라 다를 수 있으므로 사용 전에 확인해두는 것이 좋으리라 생각합니다.

코드쓰는사람

웹 폰트를 사용한 아이콘

딩뱃 폰트