대표적인 아이콘 폰트 서비스와 활용방법
직접 디자인하는 프로젝트의 경우에는 아이콘의 사용을 가능한 제한하지만, 외부에서 디자이너와의 협업 프로젝트를 진행하게 될 경우 많고 또 다양한 아이콘을 웹사이트에 적용해야 될 때가 있다. 또한 Dashboard등 텍스트의 양이 많은 화면을 제작할 경우에도 텍스트를 줄이거나 모바일 기기등의 디자인을 고려한다면 의미에 맞는 아이콘의 사용이 효과적이기도 하다.
예전에는 이런 아이콘들을 일일이 이미지로 제작하는 경우가 많았지만 요즘은 데이터의 경제적인 측면과 CSS를 이용한 디자인의 유연함을 고려하여 SVG나 폰트로 활용하는 것이 보편화되었다.
조금 더 역동적이고 다양한 애니메이션을 활용할 것이라면 SVG 이미지를 쓰는 것이 좋겠지만 SVG 는 여전히 까다로운 크로스브라우징 문제를 안고 있고 여러 개가 사용될 경우 DOM에서 그다지 보기가 좋지 않다. 아이콘을 폰트를 이용해 사용하면 간단하게 클래스로 적용해서 DOM이 깔끔하게 정리되고, Transform이나 Flip 등의 애니메이션도 간단히 구현가능하다.
아이콘폰트를 제공하는 두 개의 대표적인 서비스를 소개한다.
Font Awesome
현재 439개의 활용도 높은 아이콘들을 라이브러리로 제공하는 서비스이다.
CSS를 웹사이트에 링크함으로 간단히 적용할 수 있고, 단순한 적용을 넘어서서 다양한 형태의 모듈을 제공해서 클래스를 추가해서 다양한 크기조절은 물론 여러 아이콘을 겹치거나 Flip할 수 있다. CSS3 Transition Property 등과 함께 이용하면 약간의 애니메이션 효과도 쉽게 노려볼 수 있다.
Fontastic.me
수천개의 무료 아이콘들을 라이브러리로 제공하며, 더불어 직접 제작한 Vector 형태의 아이콘을 폰트로 제작해 주는 서비스이다.
큰 커스텀이 필요없는 프로젝트에는 대체로 Font Awesome을 이용하면 되지만, 필요에 의해 따로 제작된 아이콘을 적용해야하는 경우 함께 사용하면 좋다. Font Awesome 라이브러리와 함께 사용하면 Font Awesome 의 다양한 스타일 모듈을 함께 이용할 수 있어 좋다.