본문으로 바로가기

아이콘 폰트(IconFont)의 모든 것

category 웹코딩/CSS 2015.10.05 11:00

웹폰트의 또 다른 진화형태인 아이콘 폰트에 대한 설명과 이를 제공하는 사이트에 대하여 알아보고 궁극적으로 원하는 아이콘만을 삽입하는 방법을 거론합니다.

아이콘 폰트의 등장

기존에는 특수한 글꼴이나 아이콘을 사용하기 위해서 이미지 형식으로 제작하여 웹문서에 삽입하곤 했다. 이는 HTTP 요청을 많이 발생시켜 서버에 부하를 주고 로딩 속도에 영향을 미쳤다. 이를 극복하기 위해 CSS 기법 중에 하나인 Image Sprite 방식을 사용하여 여러 이미지를 하나의 큰 이미지에 포함시킨 배경 이미지로 제작하여 단 한번의 HTTP 요청을 통해 문서에 삽입하는 방법이 추천되었다.

image spriteimage sprite 예

필자의 기억으론 야후에서 처음 Image Sprite 방식을 사용했고, 이후 구글 및 대형 사이트들, 국내의 포럼등에서 사용되면서 널리 퍼지게 된 걸로 기억한다. HTTP 요청이 많은 사이트들은 대부분 이 방식을 채용했다.

이는 스마트폰의 사용이 범람하는 시기와 맞물려 다양한 DPI[각주:1]를 제공하는 기기들이 늘어나면서 과거의 데스크탑에 고정된 해상도(화소)로 계산되어 보여진 화면과는 다른 결과를 보여주게 되었다(강제로 DPI에 맞게 이미지가 늘어나 뿌옇게 보이거나 깨지는 현상). 또한, 배경 이미지로 삽입되다 보니 크기 변경이나 이미지 수정에 매우 불편한 단점이 부각되기 시작했다.

글꼴은 이미 웹폰트를 통해 널리 전파되고 있었고, 구글 웹폰트가 이에 크게 공헌하였다. 다만 국내의 열악한 인터넷 환경 - IE에 종속적인 환경, 구형IE 사용률이 높고 이를 업데이트해야 한다는 사용자인식 미비, 제작자들의 근시안적인 태도, 웹폰트로 사용될 만한 무료 한글 글꼴 미비등의 문제로 국내 웹폰트의 사용은 저조하였다.

해외에서는 스마트폰에서도 미려한 이미지를 제공하기 위한 연구가 활발히 진행되던 시기였다. 다양한 기기의 화면 크기에 대응하지 못하고 깨지는 이미지를 대체하기 위해 SVG를 사용하기도 했지만, 구형 브라우저 및 대중화된 브라우저들이 당시에는 기본적으로 SVG를 지원하지 못하던 시기였다. 이를 극복하기위해 벡터 형식의 아이콘을 웹폰트로 만들어 사용하는 방식이 애용되면서 FontAwesom이란 아이콘 모음 웹폰트가 무료로 제공됨으로써 아이콘 폰트 연구에 박차를 가했다. 현재는 다양한 웹폰트(아이콘폰트) 제공 업체가 생겨났고 최근에는 국내의 XEICON도 제작되어 그 인기를 실감할 수 있다.

아이콘 폰트 특징

아이콘 폰트도 웹폰트이기에 장점과 단점을 그대로 물려받는다.

  • 하나의 글꼴에 다양한 문자(아이콘)을 넣어 두고 이를 호출해 사용할 수 있다.
  • 확장 가능한 벡터 그래픽을 이용하기에 모든 아이콘이 어떠한 크기로도 변경 가능하다.
  • CSS로 가능한 어떠한 작업도 가능하다.
  • 아이콘 폰트 제공업체에서 해당 폰트에 대한 유니코드를 지원한다면 모든 요소에 유니코드 형태로 삽입가능 하며, 로컬에서도 이를 사용할 수 있다.
  • 웹폰트의 구형브라우저 지원사항이 통일되지 않아 여러가지 폰트 형식을 준비해야 한다.
어떠한 크기로도 아이콘의 크기를 변경할 수 있지만 그것이 모든 기기에서 정상적인 결과를 얻을 수 있다는 것은 아니다. 데스크탑에서는 아이콘이 복잡하거나 두께가 너무 얇다면 글꼴 크기에 따라 뭉개지거나 깨어져 보일 수 있는 것은 여전하다. 특히나 XP와 같은 구형 OS와 IE의 조합에서는 글꼴을 부드럽게 표현하지 못하니 아이콘의 모양이 제대로 표현되는 글꼴 크기를 테스트해야 한다.

아이콘 폰트 사용법

대부분의 아이콘 폰트 서비스들은 CDN을 제공한다. 해당 CDN을 스타일시트 형태로 <head> 에 삽입하게 됨으로써 아이콘 폰트를 특정 클래스명으로 호출해 사용할 수 있게 된다. 아래는 폰트어썸(FontAwesome)의 사용 예이다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

CDN 사용을 하지 않을 경우, 다운로드 받은 아이콘 폰트 파일의 경로를 원하는 경로에 맞게 수정해야 한다.

출력 태그

불러온 아이콘 폰트를 화면에 출력하기 위해서는 특정 태그에 원하는 아이콘에 맞는 클래스명을 붙여주어야 한다. 대부분 HTML5에서 특별한 의미를 지니지 않고 시각적인 면에서 특이점을 더하는 <i> 태그를 사용한다.

<i class="fa fa-camera-retro"></i> 
꼭 <i> 태그만 사용해야하는 것은 아니고, 원하는 모든 것이 될 수도 있다. 아이콘 폰트 서비스에 따라 해당 태그가 다를수도 있고, 폰트어썸처럼 .fa 에 아이콘 공통의 스타일을 정의하고 .fa-camera-retro 에 아이콘의 content 속성 값을 표기하는 방식이라면 대부분 어떠한 태그에도 사용 가능하다.

아이콘 폰트 CSS 파일 이해

아이콘 폰트의 CSS 파일을 들여다보면 대부분 비슷한 구조를 하고 있다. 아래는 폰트의 글꼴이름과 경로를 선언하는 부분이다. 일반적인 웹폰트 선언 방식과 유사하다.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

아이콘 폰트를 다운로드 받아보면 fonts 와 같은 폴더명에 여러 파일을 포함하고 있고 이에 대한 경로를 위에서 설정한 것이다.

  • otf 와 ttf 파일 형식에 대한 설명은 TTF는 뭐고, OTF는 뭐야? 글을 참조하도록 하자.
  • eot 파일 형식은 구형 IE를 위한 파일이다.
  • woff와 woff2는 모던 브라우저들을 위한 파일이다.
  • svg 파일 형식은 woff를 지원하지 않던 구형 모바일을 위한 파일이다.

아이콘 폰트에 사용되는 공통적인 클래스에 해당하는 스타일 선언이다. 폰트어썸의 경우는 아래와 같이 .fa 를 이용해 이를 선언하고, 아이콘의 모양은 .fa-모양클래스명 으로 결정한다.

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-glass:before {
  content: "\f000";
}

아이콘 폰트의 브라우저 지원

위에서 살펴봤듯이, 아이콘 폰트에 대한 CSS 선언에서 :before 선택자를 사용해 content 속성을 표현한다. 이는 IE8 이상의 브라우저부터 지원하는 선택자이기에 IE7 이하의 구형 브라우저는 이를 표현하지 못한다. 즉, IE8 이상의 IE 브라우저와 그외의 모던 브라우저들 모두를 지원하며, 모바일에서도 구형 안드로이드 2.x 대에서도 작동하니 거의 모든 브라우저에서 작동한다고 봐도 무방하다.

IE7 지원 방법

아이콘 폰트를 IE7에서 사용하기 위해서는 :before 선택자 대신 [class^="icon-"] 과 같은 속성 선택자를 이용하고, content 속성을 지원하지 않는 IE7 만을 위한 표현식을 추가해야 한다.

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '유니코드');
}

유니코드와 같은 아이콘 코드를 태그안에 삽입하게 되는 방법이므로 해당 아이콘 폰트 서비스가 이를 지원해야 한다. 실제로 많은 웹폰트 서비스들이 치트시트를 통해 이를 표기해 주고 있다.

대부분 그러하듯, 해외에선 IE7의 사용은 고려하지 않고 있는 실정이며, IE8도 지원사항에서 하나 둘 제거되고 있기에 고민할 여지가 없다. 폰트어썸의 경우도 구형버전인 3.x 대에서만 IE7을 지원하고 있고 많은 아이콘이 추가된 현재의 버전들은 이를 공식적으로 지원하지 않는다. 다만 유니코드를 알수 있는 Cheatsheet 만은 제공되니 이를 이용해 개개인이 IE7도 지원할 수 있을뿐이다.

폰트어썸 유니코드폰트어썸 유니코드

아이콘 폰트 제공업체들의 한가지 실수는 IE8을 과대평가 했다는 것이다. 실제로 IE8은 웹폰트를 표현하는데 문제가 없어 보이지만, XP에서 사용하는 IE8이라면 문제가 다르다. 대부분 힌팅이 처리되지 않은 상태로 미려하지 않은 아이콘을 보여주며, :before 선택자와 함께 사용되는 경우 이마저도 100% 화면에 출력되리라는 보장을 할 수 없다.

경우에 따라서는 해당 아이콘이 공란으로 표기되다가 새로고침 혹은 마우스가 올라오는 등의 행동이 취해지면 그제서야 모습을 드러내는 일이 종종 일어난다. 폰트어썸을 비롯해 부트스트랩에서 제공하는 Glyphicons 등의 커뮤니티에 이 문제에 대한 보고가 있었지만, 오랫동안 이들은 이 것을 인정하려 하지 않았다. 자신들의 테스팅 환경에서는 발생하지 않는 문제라고 하였으나, 이후에도 실제 가상머신상의 XP IE8상에서 같은 문제로 꾸준한 문제보고가 이루어지자 그제서야 IE8에 대한 특정 상황을 인정했다.

필자도 IE8에서 위와 같은 아이콘 깜박임 및 공란 문제로 인해 제시되고 있는 해결책들을 사용해보며 몇일을 고민에 빠졌던 경험이 있다. 결국엔 유니코드화로 전향했지만...

이 문제는 :before 선택자에서 야기되는 문제이기에 이를 유심히 살펴보아야 한다. 대부분의 아이콘 폰트가 이 선택자를 사용하는 이유는 아이콘이 의미 전달성을 가지지 않고 단순히 시각적인 면만을 강조하기 위해 사용되기 때문이다. 실제로 스크린리더와 같은 기기들이 이에 접근했을때 아무것도 없는 태그를 만나게 될뿐이기에 혼란을 줄일 수 있다. 이 방법을 사용하지 않고 태그안에 유니코드를 표기하는 IE7 지원 방식과 유사한 방법을 사용한다면 스크린리더는 해당 문자에 대한 오해를 불러 일으키게 된다. 즉, 접근성에 문제를 유발하게 된다.

문제 해결 방법은 구형 IE(7,8)와의 호환성을 유지하기 위해서 유니코드를 삽입하는 형태로 아이콘 폰트를 사용할 것이냐 - 비록 접근성에 안좋은 영향을 끼칠지라도, 혹은 구형 IE에서는 아이콘 폰트를 호출하는 대신 이미지형 아이콘으로 대체하도록 하는 것 정도를 생각해 볼 수 있다.

추천 아이콘 폰트

아이콘 폰트를 제공하는 사이트 목록이다.

Font Awesome

투박하지만 다양하고 많은 수의 아이콘을 제공하며, 꾸준히 업데이트 되는 아이콘 폰트이다. 옵션으로 제공되는 클래스들을 사용해 아이콘의 크기를 확대하거나 고정된 너비로 아이콘들을 나열하거나 테두리를 설정하거나 회전시키는 등의 다양한 효과를 쉽게 줄 수 있다.

BootStrap Glyphicons

Glyphicon Halflings 세트로 250개 정도의 아이콘을 포함한다. 투박한건 마찬가지며, 원래 제작사에서는 이를 무료로 제공하지 않으나 부트스트랩을 위해 비용없이 제공되었다. 부트스트랩으로 제작된 사이트들은 대부분 폰트어썸과 Glyphicons를 사용하곤 한다.

XEICON

국내에서 제공하는 아이콘 폰트 서비스로 꽤나 미려한 디자인을 제공한다. 다만 아직 초창기의 서비스이기에 <i> 태그 자체에 아이콘에 대한 기본 설정이 되어 있어 이 태그 자체를 다른 용도로 사용할 수 없게 구성된 점, 유니코드를 확인할 수 있는 치트시트가 제공되지 않는 다는 점등의 애로사항이 남아있다. 물론 태그에 설정된 스타일을 수정하여 사용할 순 있다.

Ionicons

두께가 얇은 깔끔한 아이콘 폰트를 제공하여, 필자가 상업용으로 자주 사용하는 아이콘 폰트이다. 많은 수를 제공하지 않지만 종류가 다양하고 다른 아이콘 폰트와는 분위기가 다른 아이콘이 많다.

Google Material icons

구글에서 제공하는 간단하고 최소한의 형태로 제작된 아이콘이다. 약 750여개의 아이콘을 제공하고 있으며 투박하지만 심플하다.

IcoMoon

유료 및 무료로 제공되는 폰트 라이브러리를 이용하여 자신만의 아이콘 폰트 셋트를 만들 수 있는 IcoMoon 애플리케이션을 포함하고 있다는 것이 가장 큰 특징이다. 구형 브라우저 지원을 위한 옵션 설정과 사용할 클래스명, 유니코드 지정등과 같은 작업을 할 수 있다.

IcoMoon App를 실행하면 기본적인 폰트 라이브러리가 몇가지 설정되어 있고 Icon Library 메뉴를 통해 원하는 아이콘들을 자신의 폰트 라이브러리에 추가할 수 있다.

원하는 폰트 라이브러리들을 추가했으면, 그것들 중에 사용할 것을 선택하여 아이콘 폰트로 만들 수 있으며 설정에서 세세한 변화를 꾀할수 있다.

무엇보다도 Import Icons 메뉴를 통해 SVG 파일을 업로드 할 수 있기에, 활용도가 매우 높다. IcoMoon은 크롬 확장기능을 제공하기에 웹상에서 제공하는 애플리케이션을 좀 더 안정적으로 사용할 수도 있으며, 프로젝트를 저장하여 json 파일로 보관가능하기에 언제든지 불러다가 사용할 수 있는 이점도 있다.

티스토리 같이 CDN으로 스타일시트를 서비스하는 곳에서는 크로스도메인과 관련되어 브라우저에 따라 웹폰트 지원이 원활하지 못할 수 있다. 현재의 티스토리 서비스는 웹폰트를 안정적으로 지원하는 것으로 보인다(최근 테스트 결과). 만약 관련하여 크로스도메인 경고를 접하게 된다면 인코딩방식을 embed 방식으로 변경해서 CSS 파일안에 폰트를 담는 방식을 추천한다. 현재 IcoMoon에서는 이를 프리미엄 계정에 한하여 제공하지만 아래에서 제공하는 Fontello에서는 이를 무료로 사용가능하다.

Fontello

Fontello 또한 위의 IcoMoon과 유사한 서비스를 제공한다. 기본적으로 애플리케이션이 통합된 페이지를 홈페이지로 보여주며 원하는 SVG 아이콘을 추가해 자신만의 아이콘 폰트를 만들어 다운로드할 수 있다. 모든게 무료로 제공되며, 구형브라우저 지원 및 embed 형식의 아이콘 폰트를 제공한다.

설정 아이콘을 눌러 Advanced font settings 메뉴를 선택하면 추가적인 설정이 가능하며 다운로드한 파일을 들여다보면 embed.css 파일과 ie7.css 파일도 발견할 수 있어 크로스브라우징에 도움을 준다.

아이콘 폰트 만들기

위에서 언급한 IcoMoon 이나 Fontello 에서는 SVG 파일을 업로드하여 자신만의 아이콘 폰트 셋트를 만들 수 있다고 했다. 즉, 기본적으로 제공되지 않지만 다른 아이콘 폰트에서 쓸만한 것이 있다던가 웹상에 존재하는 수많은 무료 SVG 파일들을 업로드할 수 있다는 것이다. SVG 파일이 없다면 PNG 파일을 SVG로 변환시켜주는 다양한 도구를 통해 SVG 파일을 얻을 수 있으며, 위에서 소개한 아이콘 폰트 제공 서비스들 또한 다운로드시에 SVG 파일을 제공하기에 섞어서 원하는 것만을 추출해 사용할 기회를 갖는다. Pixeden - Free Icons Sets 와 같이 양질의 아이콘을 무료로 제공하는 곳을 웹상에서 얼마든지 찾을 수 있다.


  1. 도트 퍼 인치(Dots per inch, DPI)는 인쇄와 디스플레이 해상도의 측정 단위이며, 특히 1 제곱인치(2.54 제곱센티미터) 공간 안에 만들어진 점이나 화소의 수를 말한다. [본문으로]

댓글을 달아 주세요

  1. BlogIcon wallel 2015.10.09 17:49 신고

    완전 꿀팁입니다.

    나중에 시간내서 좀 더 제대로 정독해야겠어요.

    감사합니다.

  2. 최우수 2015.10.30 04:45 신고

    좋은 글 감사합니다.

  3. eub 2016.04.22 12:11 신고

    감사합니다.
    그런데 여기있는것들 다 무료로 상업용으로 쓰일 수 있는건가요?
    그리고..폰트어썸같은경우는 웹에선 잘 나오는데 모바일(폰)에서는 아예 안나와서요ㅠㅠ
    따로 설정해줘야하는게 있는건가요?

    • BlogIcon 흉내쟁이 2016.04.22 14:17 신고

      위에서 설명한 아이콘폰트들은 웹에서 사용하는데는 제약이없습니다. 라이브러리를 선택해서 수정하는 ICOMOON과 같은 서비스들은 유료폰트들이 라이센스가 다르게 표기되어 있으니 살펴보심됩니다.

      모바일에서 따로 설정할건 없습니다. 아이콘폰트는 웹폰트의 한 종류이고 이를 지원하는 브라우저를 사용하시면 됩니다.

  4. ubb 2016.05.10 13:58 신고

    ionicons 에서도 폰트어썸과 마찬가지로 css파일에 ionicons만의 css파일 넣은 후
    "<i>ion-social-apple</i>"라고 html에 적용시키면 아이콘이 뜨는게 정상아닌가요? 제가 잘못알고 있는지?ㅜ ionicons는 아이콘이 웹뷰에 안나와서요ㅜ

    • BlogIcon 흉내쟁이 2016.05.11 13:53 신고

      폰트어썸의 경우 구형 IE를 지원하는 방식으로 말씀하신 형태로도 적용이 되는 것으로 알고 있습니다. 다른 서비스에서도 이를 동일하게 지원할지는 모두 테스트해보셔야 합니다.

      기본적으로 ionicons에서 제공하는 형태인 <i class="아이콘 명"></i> 과 같은 방식으로 사용하셔야 될 겁니다.

  5. 친절한앙마 2016.08.07 18:34 신고

    해외 사이트에는 용량은 줄여 주지 않는데, 국내 서비스중 아이콘 폰트 여러개 사용 해도 용량까지 줄여 주는 서비스가 있습니다.
    참고 하세요.
    http://icon.uznam8x.com

티스토리 툴바