아이콘 폰트(Icon font) 자유자제로 사용하기

웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다.

그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트라고 했었는데.. 이제는 웹폰트형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 있습니다.

이 아이콘 폰트는 이미지가 백터 그래픽 형태로 되어 있어서 크기를 늘리든 줄이든 상관없이 선명한 화질을 보장받을 수 있고 색상도 일반 웹폰트처럼 CSS에서 color 속성으로 변경을 할 수가 있습니다. 다만 아이콘이 폰트형식이기 때문에 단색으로 밖에는 설정할 수 가 없습니다.

아이콘폰트를 제공하는 곳은 많으나 대표적으로 상업적인 용도로도 사용 가능한 3곳의 웹사이트를 소개할까 합니다.

폰트어썸 (Font Awesome)

폰트어썸은 현재 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 현재 깃헙에서 51,000여개의 star를 받고 있을 정도로 인기가 있습니다.
다양한 형태의 아이콘이 빠르게 업데이트되어 제공되고 있으며 현재 유료서비스도 시도하고 있긴 하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개나 되어서 일반적으로 사용하기에는 부족함이 없습니다.

전체 라이선스는 GPL을 따르고 있고 폰트는 SIL, 소스코드는 MIT를 따르고 있습니다.

자세한 사용방법은 폰트어썸 (Font Awesome) 아이콘 폰트 사용하기에 포스팅하겠습니다.

XEICON

한 시대를 풍미했던 PHP 무료게시판 서비스인 제로보드가 네이버의 서포트를 받으면서 Xpressengine으로 이름이 바뀌었습니다.
XEICON은 그 Xpressengine에서 서비스를 제공하고 있는 아이콘 폰트 서비스 입니다.

제공하는 방법과 사용 방법이 폰트어썸 (Font Awesome)과 거의 흡사하여 폰트어썸 (Font Awesome)을 사용해 본 사람이라면 매우 쉽게 사용을 할 수 있습니다.
반대로 영어에 좀 취약한 사람이라면 XEICON이 한글로 되어 있기 때문에 먼저 XEICON를 사용해 보고 폰트어썸 (Font Awesome)을 사용하면 이해가 빠를 것입니다.

전체 라이선스는 LGPL을 따르고 있고 폰트는 SIL, 소스코드는 MIT를 따르고 있습니다.

자세한 사용방법은 XEICON 아이콘 폰트 사용하기에 포스팅하겠습니다.

구글 머티리얼 아이콘 (Google Material icons)

구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 SVG와 PNG 형식으로도 아이콘을 제공을 하고 있습니다. 하지만 단점으로는 아이콘 폰트만 제공을 하고 있고 해당 아이콘 폰트를 쉽게 사용할 수 있는 CSS CLASS를 제공해 주고 있지 않아서 CLASS를 별도로 지정을 해 줘야 합니다.

라이선스는 Apache License Version 2.0를 따르고 있습니다.

자세한 사용방법은 머티리얼 아이콘(Material icons) 폰트 사용하기에 포스팅하겠습니다.

나만의 아이콘 폰트 만들기 (Fontello)

오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다.
다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다.

자세한 사용방법은 나만의 아이콘 폰트 만들기에 포스팅하겠습니다.