SVG 준비 및 최적화
[ 출처1 : https://svgontheweb.com/ko/ ]
[ 출처2 : https://platum.kr/archives/19229 ]
들어가며…
우리는 픽셀의 시대를 살아가고 있습니다. 웹 디자이너와 웹 개발자들에게 픽셀이란 뗄레야 뗄 수 없는 친구이면서 골치덩어리입니다. 완벽한 웹 사이트를 위해서는 파일 용량을 줄여 성능을 높여야 합니다. 웹 상에 아이콘, 로고, 일러스트레이션 이미지 등을 사용한다면, SVG를 사용하는 것이 유일한 방법입니다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 모든 스크린에서 화질이 선명하며, 최소 용량이고, 편집과 수정이 쉽다는 장점을 지니고 있기 때문입니다.
SVG 란?
확장 가능한 벡터 그래픽(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든 것이 될 수 있습니다. 일반적으로 웹 상 이미지 파일형식은 JPEG를 많이 사용합니다. SVG는 코드로 수정할 수 있기 때문에 (텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능합니다) 다른 이미지 형식보다 강력한 기능을 가지고 있습니다.
- 독립적인 해상도
- 모든 종류의 최신 브라우저 지원
- 경쟁력있는 기술(W3C 표준)
- 작성 및 수정의 편리
- CSS & JS로 구현
- 높은 압축 용량
SVG 의 한계점
SVG 이미지는 래스터 이미지 비해 용량이 큰 경우도 있습니다. 이미지의 용량은 여러 가지 요인 의해서 좌우되고, 경우에 따라서는 SVG가 래스터 이미지 보다도 파일 사이즈가 더 커질 수도 있습니다. 따라서, 몇 가지 테스트를 해 볼 필요가 있고, 대개의 경우는 보정을 통해 파일 크기를 크게 줄일 수 있습니다. 그래픽 툴에서 그리는 모든 요소는 패스로 출력되므로 불필요한 패스를 생성하지 않도록 늘 염두에 두어야 합니다.
SVG 형식은 그래픽 툴을 통해 적용한 블러 또는 색상조정 같은 필터는 지원하지 않습니다. SVG 에서 원본과 동일한 결과를 얻기 위해서는 가능한 심플하게 디자인 하는 것이 좋습니다. 일부 필터는 SVGs에 지원이 되긴 하지만, 대부분의 그래픽 툴은 이런 필터들을 제대로 지원하지 않기 때문에 사용하지 않는 편이 낫습니다.
최근 한 프로젝트에서, 브랜딩 업체에 벡터기반의 로고 제작을 의뢰하였고, EPS 버전을 요청했습니다. 몇 달 후, 약속 한대로 업체에서 EPS 파일을 보내왔는데, 파일 크기가 무려 1.2MB 였습니다. 파일을 열어보니, base64로 인코딩된 래스터 이미지로 가득한 말 그대로 이름만 벡터 형식이었습니다. 모든 패스에 필터가 적용되어 있었고, EPS 파일로 변환하는 과정에서 지원되지 않는 필터들은 일러스트레이터를 통해서 PSD형식의 이미지들로 삽입된 것이었습니다.
이런 상황을 방지하기 위해서는, 디자인 작업시에 SVG 파일로 생성하기에 적합한지 여부를 확인해보아야 합니다. 최종 디자인 단계에서는 주기적으로 SVG 파일을 생성해서, 무리 없이 변환이 되는지, 파일이 너무 복잡해지지 않았는지 등을 확인해야 합니다.
준비 및 최적화
웹을 위한 SVG 제작 과정은 매우 간단합니다. JPEG 또는 PNG 파일 변환 작업보다 복잡하지 않습니다. 선호하는 벡터 그래픽 편집기 (Illustrator, Sketch, Inkscape [무료], [shape 레이어를 사용하는 경우 Photoshop에서도 가능])에서 실제 원하는 결과물과 동일한 크기로 그래픽 작업을 하세요. 제가 사용하고 있는 일러스트레이터를 중심으로 설명하겠지만, 모든 소프트웨어에도 동일하게 적용하여 작업할 수 있습니다. 페이지에서 사용 중인 웹 글꼴로 스타일을 지정하지 않으면 올바른 글꼴로 표시되지 않을 가능성이 높으므로, 텍스트를 윤곽선으로 변환해야 합니다. 모든 객체를 솔리드 모양으로 확장하는 것을 걱정하지 마십시오. 특히 스트로크가 있는 경우 페이지에서 이를 조작하고 확장하더라도 파일 크기는 작아지지 않습니다. 레이어 / 그룹에 넣은 이름은 해당 요소의 ID로 변경되어 SVG에 추가됩니다. 전체 파일 크기 용량이 조금 증가되겠지만 스타일링을 편하게 해 줍니다.
SVG로 내보내기 위해 먼저 디자인 작업 내용이 전체 픽셀 (23.3px x 86.8px이 아닌)의 영역 내에 있는지 확인하세요. 영역 밖에 있으면 실제 결과물이 선명하지 않을 수 있으므로 주변에 있는 아트보드를 자르세요. 일러스트에서는 Object > Artboards > Fit to Artwork Bounds를 사용하여 아트웍 경계에 맞춰서 자릅니다. 그 다음, save as 버튼을 누르고 SVG를 선택하고, 기본 설정 그대로 사용하세요. 물론 지금 단계에서 최적화가 가능하겠지만, 이후에 최적화 작업을 할 것이기 때문에 지금 설정 단계에서 시간을 보내는 것은 무의미합니다.
파일 용량 줄이는 방법
SVG 최적화와 관련된 훌륭한 글들이 이미 많이 있지만, 그 중 가장 효과적이고 유용한 몇 가지 팁과 방법을 공유합니다. 별도로 해야할 추가 작업이 많지 않아 쉽게 도입하여 작업할 수 있습니다.
SVG 파일 용량을 가장 효과적으로 최소화하려면 불필요한 코드를 제거하는 것이 가장 효과적입니다. SVGO는 가장 유명하고 최상의 도구로, 불필요한 코드를 모두 제거합니다. – 참고 : CSS / JS로 조작하려는 경우에는 주의하여 사용해야합니다. 파일을 과도하게 최적화하면, 추후 작업이 더 어려워질 수 있습니다. SVGO의 가장 편리한 기능은 빌드 프로세스에 추가하여 자동으로 사용할 수 있다는 것입니다. (또는 GUI를 사용할 수 있습니다)
‘불필요한 코드 삭제’에서 더 나아가 그래픽 편집기에서 추가 작업을 할 수 있습니다. 먼저 가능한 적은 수의 경로/도형을 사용해 작업을 했는지, 한 경로에 몇 개의 포인트가 있는지 확인합니다. 가능한 모든 요소를 결합하고 단순화하여, 경로 내 포인트 수를 최대한 제거합니다. VectorScribe는 일러스트레이터 플러그인으로 Smart Remove Brush Tool으로 전체 모양을 동일하게 유지하면서 포인트를 제거 할 수 있습니다.
최적화 전
Smart Remove Brush Tool로 포인트 제거
이제 화면을 확대해 보겠습니다. 일러스트레이터에서 View > Pixel Preview로 픽셀 미리보기를 활성화하고 경로 포인트 위치를 확인합니다. 파일 크기를 최소화하기 위해서는 이미지를 픽셀 격자(예 : 전체 픽셀 값) 내로 배치합니다. 모든 곳을 꼼꼼하게 작업해야 가장 선명한 화질로 렌더링을 해줍니다. (반 픽셀 이상을 넘지 않도록 주의하세요)
포인트가 픽셀과 맞지 않음
포인트를 픽셀에 맞춤
도형이 두 개 이상인 경우, 불필요하게 겹쳐져 있는 부분을 제거합니다. 패스가 정렬되어 있어도 흰색 선이 희미하게 보이기 때문에 이를 없애기 위해 서로 약간 겹쳐 놓습니다. 기억하세요 : SVG에서 z-index는 파일의 맨 마지막 부터 차례대로 순서에 따라 정의되므로, 가장 맨 앞에 올 도형의 코드는 파일 맨 끝에 넣습니다.
마지막으로, 잊지말고 .htaccess파일에서 웹 사이트에서 SVG의 gzip 압축을 사용하도록 설정해야합니다.
Author.
Trudy / Gabia UI Designer
No Comments