SVG 활용 1 – 아이콘 폰트가 아니라 SVG를 사용한 이유

2013년 9월 27일

CSS, 개념, 프론트엔드

👉 SVG 활용 시리즈 목록 보기

SVG란?

SVG는 Scalable Vector Graphics의 약자다. 늘이거나 줄여도 도트가 보이지 않는 이미지를 말한다. 비트맵(즉, 픽셀)을 저장하는 게 아니라 좌표를 저장해 연결하는 방식으로 하기 때문에 그렇다. 이런 Scalable한 것으로 대표적인 건 폰트다(폰트도 물론 비트맵 폰트가 있긴 하지만).

예컨대, 동그라미를 SVG로 그리려면 아래처럼 쓰면 된다(실전에서 아래 코드를 직접 쓸 일은 거의 없다).

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="42" cy="42" r="40" stroke="#34495E" 
    stroke-width="4" fill="#2ECC71"/>
</svg>

동그라미를 나타내는 태그는 circle이고 cx와 cy는 중점의 좌표를 의미한다. stroke는 외곽선 색깔, stroke-width는 외곽선의 굵기, fill은 동그라미의 색깔을 의미한다. 위와 같은 태그를 쓰면 아래와 같은 모양이 나온다. 외곽선이 있는 에메랄드색(#34495E) 원이다. (좌표를 확인할 수 있게 외곽선을 추가로 쳐 줬다.)

▷실제 예제 보기

따로 파일로 넣을 필요없이 HTML처럼 적어 주면 표현된다. 태그에 클래스와 아이디를 적고 CSS와 js로 제어할수 있으니 대박이다. 물론 태그로 제어해도 된다.

img, object, iframe, embed 태그로 넣을 수도 있다. 이렇게 하면 CSS, js로 제어가 안 되거나, 좀 복잡해진다. 여튼 나중에 설명한다.

SVG는 꽤 오래 전에 나왔지만, 고해상도 디스플레이가 등장하면서 드디어 필요성이 커진 것 같다. 레티나 디스플레이처럼 ppi(pixel per inch, 인치당 픽셀수)가 획기적으로 많아진 디스플레이가 나오면서, 이미지가 뿌옇게 보이는 경우가 생겼다.

물론 이미지를 대충 두 배 사이즈로 넣은 뒤 width와 height를 절반으로 줄인 채 표현하면 되기는 했다. 그런데 아이패드와 맥북 프로의 레티나는 또 인치당 픽셀수가 다르다. 안드로이드폰도 ppi가 또 다르다. 와우, 결국 가장 간단한 해법은 ppi가 가장 높은 기기에 맞춰서 이미지를 넣는 것이다. 일반 모니터의 ppi가 72니까, 해당 기기의 ppi에 72를 나누면 실제 이미지를 표현하는 것의 몇 배로 하면 되는지 나온다.

그런데 이렇게 하면 당장 용량이 걱정된다. 레티나 아이폰5에 최적화된 이미지를 아이폰3GS에서도 다운받아서 사용하는 건 대역폭 낭비다. 심지어 기기가 이미지의 사이즈를 줄여서 보여 줘야 하므로 성능에도 문제가 생긴다. 작은 양이겠지만 배터리도 낭비될 것이다.

최근에 유행한 해법 – 아이콘 폰트

이 문제에 대응하면서 최근에 유행한 해법은 아이콘 폰트다. GitHub 같은 데가 아이콘 폰트를 쓴다_{(글을 작성하던 2013년에는 GitHub가 아이콘 폰트를 사용했습니다. 그러나 지금은 svg를 사용합니다 ― 2023년, 안형우)}.

아이콘 폰트는, 간단히 설명하면 웹폰트를 이용해서 scalable한 아이콘을 보여 주는 것이다. SVG라는 특정 포맷은 아니지만 이것도 벡터 그래픽을 이용한 방식이 되겠다.

아이콘 폰트는 사용하기도 편했다. 예컨대 아래처럼 사용하면 된다.

<span class="icon-font">t</span>

CSS에서 .icon-font에 웹폰트 글꼴을 매기면, t는 t가 아닌 트위터 아이콘이 되는 거다. 내 블로그에도 잠깐 아이콘 폰트를 적용한 적이 있었다.

원하는 아이콘으로 웹폰트를 만들어서 다운받을 수 있게 해주는 사이트도 있다. 이걸 이용하면 엄청 편하게 작업할 수 있다. (IcoMoon)

아이콘 폰트의 한계 – 글꼴을 강제 지정하면 깨진다

그런데 아이콘 폰트에는 문제가 있다.

첫째, 브라우저 글꼴을 강제 지정하고 보는 사람들에겐 아이콘이 보이지 않을 수 있다는 문제다.

예컨대 커스텀 스타일을 주입하는 확장을 이용해서 모든 글꼴을 강제로 특정 글꼴_{(예컨대 Noto Sans)}로 만들 수 있는데 이러면 문제가 생긴다. 확장 없이 설정에서 글꼴을 강제 적용할 수 있는 경우도 있다.

강제 적용한 뒤 아이콘 폰트를 사용한 사이트에 들어가 보면 아이콘이 다 날아가는 걸 볼 수 있을 거다.

둘째, 시맨틱한 정보라는 측면에서도 아이콘 폰트는 정보를 교란한다.

이미지가 아닌 것이 이미지로 사용되는 것이므로 시각을 갖지 못한 웹 탐색자들_{(검색 엔진, 스크린 리더를 사용하는 시각 장애인)}에게 좋지 못하다.

물론 W3에서 시맨틱하게 사용할 방법을 만들어 놓긴 했다. role, aria-label 속성을 사용하면 된다.

하지만 번거롭다. 번거로우면 놓칠 가능성이 생긴다. 실제 이미지를 사용하면 번거로움 없이 시맨틱을 확보할 수 있다.

나가며

SVG가 뭐고, 왜 사용하는지를 알아 봤다. 다음 글은 일러스트레이터를 이용해서 SVG를 만드는 방법을 간단하게 알아 본다.

👉 SVG 활용 시리즈 목록 보기

👉 댓글 바로 가기

카테고리 글 목록 👉

CSS, 개념, 프론트엔드

15년차 풀스택 웹 개발자 안형우입니다

웹 개발에서도 중요한 것은 개념입니다.
이 블로그에는 제가 개발하며 익힌 개념들을 정리합니다.

워드프레스를 개발자 입장에서 다루는 데 오랜 시간을 써 왔습니다.
인프런 강의 “워드프레스 제대로 개발하기 어드민 편, 클라이언트 편” 지식 공유자입니다.

OOCSS에서 Utility-First CSS까지, CSS를 효과적으로 관리하는 데 관심이 많았습니다.
“프로젝트 중심 실전 CSS”라는 제목으로 관련 강의를 유튜브에 연재중입니다.

👉 소개 더 보기

대표글

댓글 남기기응답 취소