티스토리 뷰

아이콘 폰트 사전 바로가기 : http://icon.uznam8x.com 

디자인, 마크업, 프론트 개발, 앱 개발시 대부분의 프로젝트에서 아이콘을 사용 합니다.


디바이스별로 맞게 잘라내서 사용 하는 png 보다 더 심플하고, 편리하게 사용 되어 여러 디바이스에서 사용 합니다.

요즘은 아이콘 폰트의 대한 관심도가 높아져 구글에서도 구글 디자인 이름 하에 Material icons 를 내놓았고, 이 밖에 폰트 어썸, CSS  프레임워크로 유명한 부트스트랩에 글리피콘 이 밖에도 많은 웹사이트에서 각자 색깔에 맞는 아이콘 폰트를 개발/서비스 하고 있습니다.


폰트 용량은 무거워서 두개 혹은 세개 이상 쓸 경우 사이트 로딩이 매우 느려 질 수 있기 때문에 디자인 컨셉에 맞게 하나의 아이콘 폰트를 사용 하여 적절히 쓰는 것이 중요 합니다.

저도 지금까지 많은 프로젝트를 진행 하면서 아이콘이 없는 경우는 그 아이콘만 svg 나 png 로 잘라 사용 하여 최근까지도 많이 불편했습니다.


이런 불편함을 없애고, 선택의 폭을 넓히기 위해 아이콘 폰트 사전이라는 서비스가 생겼습니다.


간단히 어떤 서비스 인지 살펴 보겠습니다.


먼저 http://icon.uznam8x.com 으로 접속 하면,



처음 접속 하면 이 서비스를 간단히 소개 하는 페이지가 보입니다.




좌측에 ALL ICONS 을 클릭 하면 Google material icons, font awesome, foundation icons, weather icons, typicons, entypo, 국내에서 개발한 xeicons 현재 이 서비스에서 제공 하는 모든 폰트가 보입니다.

대략 세어보니 3000여개 되더군요 (WOW)

 




1) 페이스북 계정이 있는 경우 좌측에 LOGIN 버튼을 누르면 페이스북 로그인을 할 수 있습니다.


2) 하단에 검색기능이 있어 cloud 라고 검색을 하니 각 아이콘 폰트에서 제공 하는 구름과 관련 있는 아이콘 폰트가 필터링 됩니다.

이렇게 하나씩 ADD 하면 다운로드 받을 목록에 아이콘이 추가 됩니다.

다 찾았으면 오른쪽에 다운로드 아이콘을 클릭 하여 다운 받을 수 있습니다.


3) 그 밑에 How to use 는 폰트를 다운로드 받은 아이콘 폰트를 해당 웹페이지에서 로드 하고, 사용 해야 하는 HTML 코드를 안내해 주고 있습니다.

각 폰트들 마다 사용 방법이 다르니 꼭 확인 후 사용 해야 합니다.




로그인 된 상태에서 아이콘을 다운로드 받으면 그동안 다운로드 받았던 아이콘 폰트 목록을 확인 할 수 있습니다.


실제로 폰트 용량을 확인해 보니 원본 eof 기준 143kb 바이트에서 2kb 로 줄었습니다. 무려 50배가 넘게 차이가 납니다.

이 서비스를 이용 한다면 이제 우리는 폰트의 대한 트래픽이 부담이 없이, 자유롭게 여러 폰트를 조합 해서 사용 할 수 있습니다.


아이콘 폰트 사전 바로가기 >



저작자 표시 비영리 변경 금지
신고
댓글
댓글쓰기 폼