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