예전에는 홈페이지를 제작할 때 이미지 파일은 주로 jpg.png를 사용했었는데 최근 hover 효과나 active 효과가 들어가는 작은 아이콘에는 SVG 이미지를 적용하기 시작했다. 그리고 직접 사용해 보니 알 것 같더라는 SVG 이미지의 장점과 그 특징에 대해 디자이너의 시각으로 공유해 보는 짧은 지식공유 글이 되겠다.
1. 백터와 비트맵 이미지에 대하여
SVG 이미지에 대해 보기 전에 먼저 알아야 하는 간단한 개념을 하나 짚고 넘어가 보자. 보통 이미지 작업을 하는 사람들(디자이너)이 많이 들어봤을 벡터와 비트맵이라는 단어는 이미지 표현 방식에 대한 단어이다. 하나의 이미지에 대하여 벡터(Vector)는 점과 점의 연결 방식으로 그려지는 것을 뜻하며 확대 시 깨지지 않는 게 특징이고, 비트맵(Bitmap) 이미지는 픽셀 단위 표현 방식으로 이미지 크기에 따라 픽셀 단위로 깨져 보일 수 있는 게 특징이다.
- 백터 : 점과 점의 연결 방식으로 표현되는 이미지
- 비트맵 : 픽셀 단위로 표현되는 이미지
이 두가지 이미지 방식의 차이점을 자료를 통해 좀 더 자세히 살펴보면 다음과 같다. 좌측이 백터 이미지이고 우측이 비트맵 이미지이다.
2. 그렇다면 SVG이미지가 무엇일까?
그렇다면 SVG 이미지는 무엇일까? SVG 이미지는 벡터 이미지를 코드로 뽑아내 이미지화한 것을 뜻한다. 벡터 이미지는 점과 점 사이의 수학적인 수치로 표현되기 때문에 그대로 코드로 변환이 가능하다. 그 말은 우리가 만드는 벡터 이미지를 복사하거나 붙여 넣을 때는 코드가 복사된다는 말과 같다.
컴퓨터에 일러스트 프로그램이 깔려있다면 간단히 확인해 볼 수 있는 방법이 있는데, 일러스트에서 도형을 그린 뒤 control+C를 하고 텍스트 입력창에 control+V를 해보면 알 수 있다.
SVG를 어떻게 활용할까?
그렇다면 이런 특징을 가진 SVG이미지를 웹이나 앱에 어떻게 적용할 수 있을까? 그리고 SVG를 쓴다면 비트맵 이미지 파일(jpg, png, gif…)을 적용하는 것과 어떤 차이점이 생기게될까? 그것에 대한 자세한 이야기를 계속해서 알아보자.
위에서 설명했던것과 같이 SVG는 수학적인 계산으로 만들어진 이미지로 그 안에는 각각 코드를 지니고 있기 때문에 형태에 대한 정보 뿐 아니라 색상값에 대한 정보 또한 이 코드 안에 포함되어있게된다. 그렇다면 기존에는 사용자의 동작에 따른 간단한 색상 변화가 일어나는 작업을 수행할 때, 각각의 변화에 따른 이미지를 등록해 주어야 했다면 SVG를 사용하게 됐을 때 하나의 이미지를 등록해놓고 색상값 코드만 바꿔주어도 같은 동작을 수행할 수 있게 된다는 것이다.
설명한 것과 같은 원리로 SVG image를 사용했을 때 용량이 훨씬 가벼워져서 홈페이지 제작시에는 로딩 문제를 해결하기도 좋기도하고, 한 개의 이미지만 등록해 놓아도 컬러 변경 등의 간단한 트랜지션 효과를 적용 하기도 편하기 때문에 나는백터 기반 이미지를 적용할 일이 생긴다면 SVG로 이미지를 추출해서 사용하고있다.
위에서 설명한 특징에 대한 내용을 간단히 정리해 보자면
- 백터 이미지 이기 때문에 하나의 이미지로 다양한 스케일에 대응이 가능하다
- 하나의 이미지로 간단한 트렌지션 적용이 가능하다
SVG 이미지 용량 줄이기
SVG는 형태가 단순한 경우에는 괜찮지만 형태가 복잡하고 엥커 포인트가 많은 도형일수록 용량이 커지게된다. 어떤 경우에는 그냥 PNG이미지를 적용하는게 용량이 적은 경우도 있으니 그 부분은 잘 신경쓰고 사용해야 할 것 같다. (아직 나는 로고같은 단순 도형에만 사용해 봐서 그런 일은 잘 없었지만..) 그래도 복잡한 도형을 SVG로 사용할 때 용량을 줄여서 쓸 수 있도록 해주는 사이트를 발견했는데 아주 간단한 도형으로 실험해 보니까 원래 용량의 40%까지 줄일 수 있어서 글을 마무리하며 좋은 사이트 하나 공유해 본다.
jakearchibald.github.io/svgomg/
