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

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

아이콘 폰트의 등장

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

image 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에서는 아이콘 폰트를 호출하는 대신 이미지형 아이콘으로 대체하도록 하는 것 정도를 생각해 볼 수 있다.

아이콘 폰트 만들기

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

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

'웹코딩 > CSS' 카테고리의 다른 글

CSS로 글자 자르기 - 한 줄, 여러 줄 (15)	2015.10.30
Column(열)의 높이를 맞추는 방법 (0)	2015.10.06
트위터의 fave 애니메이션 - 즐겨찾기 버튼 (3)	2015.09.03
Normalize.css - CSS 초기화 (6)	2015.08.24
Noto Sans(본고딕) 웹폰트 (10)	2015.08.14

WEBDIR