이 글은 블로그 디자인을 개편하면서 얻은 경험을 공유하는 글이다. 첫 번째로, 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 같은 데가 아이콘 폰트를 쓴다.
아이콘 폰트는, 간단히 설명하면 웹폰트를 이용해서 scalable한 아이콘을 보여 주는 것이다. SVG라는 특정 포맷은 아니지만 이것도 벡터 그래픽을 이용한 방식이 되겠다.
아이콘 폰트는 사용하기도 편했다. 예컨대 아래처럼 사용하면 된다.
<span class="icon-font">t</span>
CSS에서 .icon-font에 웹폰트 글꼴을 매기면, t는 t가 아닌 트위터 아이콘이 되는 거다. 내 블로그에도 잠깐 아이콘 폰트를 적용한 적이 있었다.
원하는 아이콘으로 웹폰트를 만들어서 다운받을 수 있게 해주는 사이트도 있다. 이걸 이용하면 엄청 편하게 작업할 수 있다. (IcoMoon)
아이콘 폰트의 한계 – 글꼴을 강제 지정하면 깨진다
그런데 아이콘 폰트에는 처참한 문제가 하나 있다. 브라우저 글꼴을 강제 지정하고 보는 사람들에겐 아이콘이 보이지 않는다는 문제다.
우리집에 있는 웹서핑 전용 컴퓨터에 깔린 크롬의 사용자 스타일시트에는 아래와 같은 코드가 들어가 있다.
* {
font-family: 'Malgun Gothic'!important;
}
파이어폭스와 IE는 스타일시트를 만질 것도 없이 설정에서 글꼴을 강제 적용할 수 있다. 한 번 강제 적용한 뒤 GitHub에 들어가 봐라. 아이콘이 다 날아가는 걸 볼 수 있을 거다.
블로그 디자인을 새로 하면서 아이콘 폰트를 사용하지 않고 SVG를 사용하기로 한 건 바로 그런 이유 때문이었다.
나가며
SVG가 뭐고, 왜 사용하는지를 알아 봤다. 다음 글은 일러스트레이터를 이용해서 SVG를 만드는 방법을 간단하게 알아 본다.
