웹폰트 아이콘, 무료 아이콘 폰트 사이트 3개

웹폰트 아이콘(아이콘 폰트)

스마트폰 때문이라고 봐야하겠죠. SNS의 대표격인 트위터가 서비스 시작될 때 트위터 자체도 큰 이슈가 되었는데요. 트위터 사이트를 구축할 때 사용한 웹 프레임워크도 큰 이슈가 되었습니다. 사실 사용자들은 트위트 사이트의 보여지는 외형(트위터 사이트 스킨)과 제공되는 기능만 알면 되죠. 그래서 사용자들은 별 관심이 없었을 수 있습니다. 하지만 웹관련 종사자나 사이트, 블로그 등을 운영하는 운영자 사이에선 나름 큰 이슈가 되었고, 지금까지도 큰 인기를 끌고 있습니다.

그래서 뭐가 이슈고 뭐가 인기냐굽쇼? 트위터의 레이아웃 구성이나, 버튼, 입력 창 등의 디자인이요. 그것들을 모두 담고 있는 것이 Bootstrap이라는 jQuery 기반의 프레임워크인데요. 요즘 많은 사이트, 블로그 등이 Bootstrap 기반의 스킨을 사용합니다.

Bootstrap은 사이트의 외형을 담당하는 디자인 요소를 거의 모두 포함하고 있습니다. 레이아웃부터 폰트, 메뉴, 아이콘, 썸네일 등 모든 것이 담겨 있습니다. Bootstrap로 구축하지 않은 사이트도 필요하다면 그 디자인 요소들을 가져다 사용할 수 있습니다. Bootstrap의 CSS와 JavaScript만 끌어다 사용해도 많은 부분을 똑같이 만들 수 있죠.

날 잡아 사용 중인 마크쿼리 스킨을 뜯어 고칠 생각이었는데요. 고레벨 귀차니스트이기에 아직까지 작업을 미루고 있습니다. 몇 가지 적용한 것이 있긴한데요. SNS 공유 버튼, 리스트 아이콘 정도이기에 Bootstrap이라고 하긴 뭐시기 하죠. 웹폰트 정도 적용했다고 볼 수 있는 것들이니 말입니다.


웹폰트 아이콘(아이콘 폰트)

티스토리 블로그에 CSS와 JavaScript 몇 줄 추가해 주면 웹폰트 아이콘(아이콘 폰트)을 사용할 수 있습니다. 물론 일반적인 나눔 고딕 웹폰트 같은 경우는 한 줄 정도 추가해주면 사용할 수 있습니다. 폰트 어썸(Font Awesome), XE 아이콘(XEIcon), IcoMoon 등의 웹폰트 아이콘 서비스를 이용하면 스킨 곳곳의 SNS 공유 버튼이나 유튜브 채널 이미지 등을 웹폰트 아이콘으로 대체할 수 있습니다.

웹폰트 아이콘을 이용하면 사이트를 깔끔하고 가볍게 꾸밀 수 있습니다. 폰트이기에 크기 및 색상 변경이 용이합니다. CSS가 지원하는 한도내에서는 자유롭게 꾸밀 수 있다는 것이 웹폰트 아이콘의 최대 장점이죠. 물론 단점도 있습니다. 우선 웹폰트 아이콘은 크로스 브라우징(모든 브라우저에서 동일하게 보이게 하는 것)이 조금 까다롭습니다. 단색만 표현할 수 있는 단점도 있습니다.

약간의 차이는 있으나 웹폰트 아이콘 적용 및 사용 방법은 거의 동일합니다. 웹폰트 아이콘 파일및 JavaScript 파일을 스킨 HTML에 추가한 후 CSS에서 디자인을 설정하면 됩니다. 참고로 웹폰트 아이콘을 서비스하는 웹서비스에서 대부분 CDN을 제공합니다.

기본적으로 html과 css를 어느 정도는 이해하고 있어야 웹폰트 아이콘을 블로그에 적용할 수 있습니다. 프로급은 아니더라도 html 어디에 소스를 삽입하고, css로 무엇을 할 수 있는지 정도는 알아야 소스를 적용하고 수정할 수 있으니 말입니다.

폰트 어썸(Font Awesome)


폰트 어썸(Font Awesome)

폰트 어썸(Font Awesome : https://fontawesome.com)은 가장 유명한 웹폰트 아이콘 서비스입니다. 유료 및 무료로 사용할 수 있는 다양한 웹폰트 아이콘을 제공합니다. 미리 설정 되어 있는 클래스명을 이용하면 쉽고 간단하게 스킨에 특정 아이콘이 표시 되게 할 수 있습니다.


폰트 어썸 무료 아이콘 폰트 목록

현재 폰트 어썸에서 무료로 사용할 수 있는 웹폰트 아이콘은 1,500개 정도입니다. 목록에 표시되는 아이콘 이름이 클래스명인데요. 이 클래스명으로 간단하게 해당 웹폰트 아이콘을 스킨에 표시할 수 있습니다.

폰트 어썸(Font Awesome)는 제공되는 치트 시트(Cheat Sheet)를 통해 웹폰트 아이콘의 클래스명과 유니코드를 확인할 수 있습니다.

XE 아이콘(XEIcon)


XE 아이콘(XEIcon) 무료 폰트 아이콘 목록

XE 아이콘(XEIcon : http://xpressengine.github.io/XEIcon/index.html)은 국내 업체가 서비스하는 웹폰트 아이콘입니다. 다양하진 않지만 제법 많은 웹폰트 아이콘이 제공 됩니다.

XE 아이콘은 치트 시트(Cheat Sheet)를 제공하지 않는 것 같습니다. 개별 웹폰트 아이콘에도 유니 코드 정보가 없는 것으로 보아 유니 코드 또한 지원하지 않는 것 같습니다. 향후 지원할 수 있겠지만 라이브러리 2.3.3 버전에서는 치트 시트와 유니 코드가 제공 되지 않습니다.

참고로 익스프레스엔진의 전신은 제로보드입니다. 오래전에 네이버가 제로보드를 인수하였기에 네이버가 서비스하는 곳이라고 보시면 됩니다.

IcoMoon


IcoMoon

IcoMoon(https://icomoon.io)은 요상한 이름 덕분인지 쉬운 단어 조합임에도 한글로 발음하기 어려운 서비스인데요. 폰트 어썸과 비슷합니다. 유료 및 무료로 사용할 수 있는 웹폰트 아이콘이 제공됩니다.


IcoMoon 아이콘 폰트 생성

폰트 어썸과의 차이라면 라이브러리를 통채로 사용할 수도 있고, 필요한 웹폰트 아이콘만 추려서 사용할 수도 있습니다. 상단 우측의 IcoMoon App으로 진입하면 원하는 웹폰트 아이콘만 세트로 만들어 사용할 수 있으니 사이트 속도를 다만 얼마라도 빠르게 하고 싶다면 IcoMoon을 이용하시면 되겠습니다.

부트스트랩 그래피콘(BootStrap Glyphicons)이라고 부트스트랩의 웹폰트 아이콘도 있는데요. 요건 부트스트랩과 떼어 놓긴 그렇죠. 함께 소개해야 제맛이기에 이 글에선 제외하도록 하겠습니다. 시간나면 언제 부트스트랩과 함게 소개하는 것으로~

웹폰트 아이콘 적용 시 주의 사항


웹폰트 아이콘으로 만든 SNS 공유 버튼

웹폰트 아이콘 사용 시 주의해야 할 것이 몇 가지 있습니다. 우선 먼저 여러 종류의 웹폰트 아이콘을 사용할 경우 웹폰트 아이콘의 크기 및 간격 맞추는 것이 조금 까다롭습니다. 서비스마다 웹폰트 아이콘의 크기가 달라 발생되는 문제인데요. 여러 종류의 웹폰트 아이콘을 적용할 경우 사이트 로딩 속도에도 영향이 있으니 가능하다면 한가지 웹폰트 아이콘만 적용하는 것이 좋습니다.

웹폰트 아이콘 서비스에서 국내 브랜드 혹은 웹서비스의 웹폰트 아이콘은 제공되지 않는 경우가 있습니다. 국내 웹폰트 아이콘 서비스 조차도 국내 브랜드 혹은 웹서비스 웹폰트 아이콘이 없는 것이 많습니다. 제공되지 않는 웹폰트 아이콘은 직접 만들어 사용하던가 사용을 포기해야하네요.

웹폰트 아이콘이고 웹폰트이고 웹소스는 무조건 가벼울 수록 좋습니다. 블로그든 사이트든 웹사이트는 무조건 가벼울 수록 좋습니다. 이에 웹폰트 아이콘 또한 크기가 큰 것은 지양하고, 사용하지 않는 불필요한 것들은 모조리 제거하는 것이 좋습니다. 예로 일어, 스페인어 등을 글꼴도 담고 있는 폰트라면 사용하지 않는 일어, 스페인어 등의 사용 빈도가 낮은 문자들을 말끔히 제거해 주는 것이 좋습니다. 웹폰트 아이콘도 마찬가지입니다. 귀찮아서 일단은 기본 상태의 소스를 끌어다 사용하고 있는데요. IcoMoon을 이용하여 사용하지 않는 문자들은 모두 제거하거나 반대로 필요한 문자들만 세트로 만들어 다만 얼마라도 로딩 시간을 단축 시키는 것이 좋습니다.

마지막으로 웹폰트 아이콘 사용 시 라이센스 명확하게 확인하고, 라이센스에서 허용한 용도로만 사용해야 합니다. 상업용으로 사용할 경우에는 라이센스 확인 또 확인한 후 사용하시기 바랍니다. 그럼 끝~

Leave a Comment