'SVG'를 사용하는 이유!
SVG에 대한 이해와 활용법에 대한 설명
왜 요즘 수많은 디자이너들은 SVG 아이콘을 쓰는 것일까? 그 이유는 명확합니다. '안 깨지고' '용량이 적고' '출력이 빠름' '수정과 애니메이션이 가능' 이 정도의 5가지의 이유가 있습니다. SVG는 무엇이며 왜 사용하고 어떻게 활용하는지에 대해서 간단하게 설명드리려고 합니다.
SVG 란?
SVG란 'Scalable Vector Graphics'의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식입니다. 어떤 디바이스 크기에서도 깨지지 않고, 마크업 언어로 이루어져 css와 javaScript로 수정이 가능하며 우리가 웹상에서 보는 움직이는 텍스트와 아이콘은 모두 SVG아이콘입니다.
48x48 px의 PNG와 SVG아이콘 선명도 차이이론으로 들으려니 이해가 잘 안 될 것입니다. 위에 이미지는 제가 PNG의 SVG아이콘을 각각 추출한 화면입니다. 오른쪽은 선명한 SVG이미지가 있으며 왼쪽은 테두리가 흐릿한 PNG 이미지가 보일 것입니다.
자 일단 왜 PNG는 깨지고 SVG는 안 깨지는 것일까요? PNG나 JPG는 비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현입니다.
반면 SVG는 벡터 기반으로 각 좌표에 점을 이어서 만들어지는 개념입니다. 벡터 기반의 아이콘은 확대나 축소를 해도 깨지지 않는 것과 같은 원리입니다.
벡터를 기반으로 하는 대표적인 프로그램은 어도비사에서 만든 일러스트입니다. 그래서 우리는 일반적으로 아이콘을 만들 때 일러스트로 만드는 것입니다.
PNG 출력을 높이면 되지 않나?
음.... 네 맞습니다. PNG가 깨지는 문제를 해결하기 위해서 PNG에 더 많은 데이터를 추가하여서 선명하게 만들 수 있지만 그러면 당신은 웹의 성능을 전혀 고려하지 않는 디자이너라는 이야기를 듣게 될 것입니다. 한국인은 웹페이지가 로딩되는 게 3초 이상 걸리면 사이트를 이탈한다는 이야기가 있습니다.
고해상도의 PNG는 일반적으로 HDPI 디스플레이에 렌더링이 될 때 크기가 매우 큽니다. 우리는 배경이 없는 이미지를 사용하기 위해서 PNG를 사용해왔고 그렇기 때문에 용량이 상대적으로 큰 PNG를 로드하는데 시간이 오래 걸리기 때문에 브라우저의 로딩 속도가 느려지는 것입니다.
SVG는 코드로 이루어져 있기 때문에 바이트도 안 되는 크기로 이루어져 있어 PNG나 JPG의 이미지보다 용량적인 측면에서 훨씬 적어 웹사이트의 로딩 속도를 훨씬 빠르게 만들어줍니다.
한국인의 종특 빨리빨리 문화 (사진출처-무한도전)사이트 로딩의 출력 차이
브라우저가 로딩하려고 할 때마다 서버에 HTTP 요청을 해야 합니다. 웹페이지에 이미지가 많을수록 더 많은 HTTP 요청이 이루어져 사이트 속도가 느려지는 것입니다.
SVG는 크기가 작을 뿐만 아니라 SVG코드를 HTML의 인라인에 포함하여 HTTP 요청을 제거할 수 있어 유연성이 빨라지는 것입니다. (HTTP 요청에 대해서 자세히 알고 싶은 분은 하단의 링크를 통해 확인하시기 바랍니다.)
이전에 PNG를 활용할 때 아이콘들을 하나의 파일에 합쳐서 위치 값만으로 나머지를 숨기고 표시해서 아이콘을 보이게 했던 이유도 로딩 속도와 용량 때문입니다.
아이콘들을 합쳐서 어떻게 보이는지를 잘 모르시는 분들이 있어서 간단한 CSS의 background-position에 대해서 설명드리겠습니다.
HTML
<div class="icons-home"></div>
<div class="icons-shop"></div>
<div class="icons-cart"></div>
CSS
.icons-home,. icons-shop,. icons-cart {
background-image: url('@link');
background-repeat: no-repeat;
height: 64px;
}
.icons-home {
width: 60px;
background-position: 0 0;
}
.icons-shop {
width: 60px;
background-position: -60px 0;
}
.icons-cart {
width: 60px;
background-position: -120px 0;
}
위의 코드는 이해를 돕기 위해서 만든 코드입니다. 우리는 이전의 PNG 방식이 어떻게 진행되었고 문제가 무엇이었는지 알면 조금 더 SVG를 사용하는 이유를 명확하게 알 수 있습니다.
위의 코드에는 3개의 아이콘이 존재합니다. 하지만 우리는 사이트를 만들 때 일반적으로 아이콘 3개만 들어가지 않고 그 이상의 아이콘들이 들어갑니다.
만약 100개의 아이콘이 들어간다고 가정하였을 때 우리는 최대한의 용량을 줄이며 HTTP 요청을 줄여야 했습니다. 그렇기 때문에 모든 아이콘들을 모아서 하나의 png파일로 만들어서 위의 코드처럼 위치 값으로 아이콘을 보이게 만들었습니다.
이렇게 항상 UI 디자이너들은 용량은 줄이고 로딩 속도는 빠르게 하기 위해서 노력해왔습니다. 그렇기 때문에 요즘 더욱 용량이 적고 출력 속도가 빠른 SVG아이콘을 사용하는 것입니다.
PNG를 하나의 파일로 합쳐서 사용하는 시점과 SVG아이콘을 사용하는 시점 중간인 2012년도에 '아이콘 글꼴' Font Awsome Library 같은 방법을 사용하기도 했지만 이 방법은 부분적으로 문제가 있으며 그 부분까지 설명드리자면 너무 글이 길어질 거 같아서 나중에 '아이콘 글꼴'에 대해서 따로 포스팅하도록 하겠습니다.
- HTTP 요청에 대한 자세한 참조
이제는 움직여야지? '애니메이션'
이제는 좀 움직이지 않는 아이콘 지루하지 않나요? 인터렉션 화면들을 많이 볼 수 있는 'Dribble'을 보면 움직이는 텍스트 움직이는 아이콘들을 많이 볼 수 있습니다. 왜냐고요? 요즘 그것이 트렌드이기 때문입니다.
이러한 동적인 애니메이션을 사용하려면 SVG를 활용하여 쉽게 적용할 수 있습니다. 위에서 설명드렸던 것처럼 SVG는 XML언어로 이루어져 있어서 CSS와 Javascript로 쉽게 수정할 수 있기 때문입니다.
그런데 동적인 게 트렌드인 거는 알겠는데 당신이 프로토타이핑 툴인 'Figma'나 'Protopie'같은 툴을 사용할 수 없다면 어떻게 그것을 퍼블리셔에게 전달할 건가요? 말로 할 것인가요?
프로토타이핑 툴을 사용할 수 있으면 좋겠지만 그것이 어떻게 코드에서 이루어지는지 안다면 퍼블리셔에게 당신의 머릿속에 있는 애니메이션 효과를 어느 정도 정확하게 설명할 수 있을 것입니다.
자 그러면 간단하게라도 알려드리겠습니다. SVG를 활용한 애니메이션은 Jake Archibald가 2013년에 이 기술을 개척하였습니다. 원리를 간략하게 설명드리면 SVG에는 탐색이 가능한 DOM이 있어서 기존의 웹 기반의 DOM과 동일한 개념이 적용됩니다.(DOM까지 설명드리면 너무 힘드므로 다음에....) 그다음 SVG의 다른 부분에 요소를 첨부해서 애니메이션을 적용하는 그런 방식입니다.
음... 이 부분은 이해하기 어렵기 때문에 말로 하면 어려울 것 같으니 제가 옛날에 처음 포트폴리오 사이트를 만들 때 사용하였던 SVG를 활용한 텍스트 소스로 SVG애니메이션 효과를 설명을 드리겠습니다.
1) 일단 원하는 텍스트를 일러스트에서 작성해줍니다.
배경은 없어도되며 선의 두께는 코드에서 수정가능합니다.2) 그다음 해당 텍스트를 SVG소스로 Save as 합니다. 그러면 아래와 같은 텍스트의 SVG 코드를 얻을 수 있습니다.
그냥 좌표값일뿐입니다...저도 몰라요... 클래스의 이름만 알면됩니다!3) 이제 필요 없는 소스들은 날리고 HTML로 가져와줍니다.
필요 없는 부분 자르는 것과 Save as 방법은 웬만하면 구글링으로....4) 그다음 해당 클래스 값에 keyframes animate CSS효과를 적용해줍니다.
각 path라는 클래스에 애니메이션 효과를 적용5) 그러면 하단의 화면과 같은 SVG효과를 얻을 수 있습니다.
자 이제 간단한 SVG를 활용해서 코딩을 활용한 애니메이션 효과를 활용하는 것을 알 수 있습니다. 애니메이션 효과를 활용할 줄 안다는 것은 웹사이트를 디자인하는데 매우 큰 무기로 적용될 것입니다.
아이콘을 SVG로 활용해보자
글을 간략하게 요약하자면 SVG는 아이콘, 로고, 일러스트레이션, 차트, 애니메이션에 적합하고 PNG나 JPEG 같은 레스터는 사진에 적합합니다.
물론 SVG가 모든 것이 완벽한 것은 아닙니다. 크로스 브라우저 호환성과 관련하여 SVG는 IE8 이하 버전을 제외한 모든 브라우저 간 호환성을 제공하지만 일부 옛날 브라우저 버전은 호환되지 않습니다. HTML에서 SVG효과를 활용하려는 경우 철저한 크로스 브라우저 테스트를 수행해야 합니다.
또한 SVG아이콘을 활용하기 위해서는 어느 정도 지식이 있어야 합니다. 호환성과 일반적으로 사용하는 Sketch와 Figma의 SVG Export 값이 달라서 좀 섞어서 사용하는 게 좋은데 그것도 나중에 따로 포스팅하겠습니다...!!
그리고 Sketch에서 아이콘을 만들 때 'evenodd'와 'nonzero'의 규칙을 알아야 합니다. 이 말은 스케치의 채우기 규칙이 짝수로 시작하는 것과 0으로 시작하는 것 차이인데 이것도.... 나중에 따로...!!
PNG와 JPG를 사용한다고 해서 결코 잘못된 것이 아닙니다. 하지만 SVG에 대해 공부하고 활용한다면 당신은 다른 디자이너들과 다른 결과물을 낼 수 있을 것입니다.
추후에 Sketch와 Figma에서 아이콘을 제대로 만드는 법과 추출된 값의 다른데 어떻게 활용하면 좋은지를 포스팅하도록 하겠습니다.
