SVG 사용하기
먼저 비트맵과 벡터 그래픽의 차이를 알아야 하는데 쉽게 풀어서 비트맵은 1px 크기의 컬러가 적용된 박스가 모여서 구성되는 거라고 보시면 됩니다. 벡터는 좌표 기반으로 그래픽을 그린다고 보시면 됩니다.
예를 들어 100px 정사각형을 그린다고 하면 비트맵에서는 10,000개의 사각형으로 구성되고,
벡터는 사각형 각 모서리의 위치 값과 그 안에 채워질 컬러코드(#dd0033)만 제공하면 됩니다.
그 뜻은 크기가 커지거나 작아져도 사용자 컴퓨터에서 새로 다시 위치 값을 실시간으로 연산해서 렌더링 하기 때문에 확대 축소를 해도 깨지지 않는 것입니다.
좌표값으로 구성된 벡터 그래픽은 용량이 아주 적습니다. 그러나 벡터가 복잡해지면 질수록 계산이 많아지기 때문에 복잡한 그래픽인 경우에 사용자가 느려지는 현상이 생길 수 있습니다. (플래시 시절을 생각하면 됩니다)
그러다 이제는 하드웨어도 많이 발전되었고 부담 없이 svg를 돌릴 수 있는 시대에 다가오는 거 같습니다.
오늘 포스트에서는 기존 비트맵 대신 어떻게 svg를 효율적으로 적용 가능한지 짧게 정리해 보겠습니다.
-
스프라이트 보통 화면마다 이미지를 삽입하는 거 보단 스프라이트를 많이 사용합니다.
스프라이트는 하나의 png 이미지에 모든 아이콘을 몰아넣고 좌표값으로 각 아이콘을 호출하는 방식입니다.
브런치 스프라이트https://t1.daumcdn.net/brunch/static/img/help/pc/ico_view_cover.v4_rtn.png
이렇게 하면 프런트엔드 개발자에서 누락되는 에셋 없이 쉽게 가져 다 쓰고 업데이트까지 할 수 있습니다.
당연히 페이스북, 구글 등 많이 기업에서도 많이 사용하고 있습니다.
그런데 ppi( pixel per inch)가 높아진 시점에선 svg 활용도가 높아지고 있고 특히 모바일에서는 svg를 써도 무방한 거 같습니다. 왜냐하면 픽셀 밀도가 높아지면서 해상도도 x2에서 x3으로 넘어가는 추세라 해상도별 아이콘을 관리하기 어렵기 때문입니다.
그런데 svg 구조는 코드 기반인데 아래와 같은 구조로 되어 있습니다.
예를 들어 위와 같은 shape는 아래와 같은 코드 구조로 되어 있습니다.
위와 같이 xml 노드로 감싸여 있는데 이를 활용하여 하나의 xml에 각각의 shape를 노드에 찢어 놓으면
하나의 svg 파일에 여러 개의 아이콘이 삽입 가능합니다.
그런데 위 예시처럼 노드로 찢어 놓으면 하위 버전 모바일에선 안보입니다. 그래서 <svg> 태그로 분기시키면 됩니다.
svg를 하나의 아트보드에 몰아넣고 각 <svg>를 호출해서 적용시키면 됩니다.
26kb로 해상도 손실 없는 아이콘을 적용할 수 있고 그 구조는 아래와 같습니다.
그리고 svg 생성 시 쓸데없는 노드가 많이 생성됩니다. 그래서 최적화를 해야 하는데 svg에서 최적화는 xml 코드를 최소한으로 줄이는 것이 용량을 줄이는 법이 되겠습니다.
SVG 최적화 하기
그렇게 하면
이랬던 xml이 아래와 같이 간결하게 줄어듭니다.
svg는 xml 구조로 되어 있고 스케치에서 생성된 svg 구조랑 어도비 일러에서 생성된 구조가 다릅니다.
그래서 위와 같은 최적화된 방법을 써서 가볍게 만들어야 합니다.
svg의 최적화란 것은 코드를 최소한으로 줄이는 것입니다.
-최적화시키는 방법 중 하나는 폴더 안에 많이 감싸는 걸 지양한다.
-의미 없는 node는 과감하게 지운다.
등 여러 방법이 있는데 위의 최적화해주는 서비스에 가보면 다양한 최적화 옵션이 있으니 참조하시면 될 거 같습니다.
