확장 가능한 SVG, 유용함과 한계점 그리고 활용법

Design News/Design Trend

by 김현욱 a.k.a. 마루 2014. 1. 7. 15:57

스케일러블 벡터 그래픽, 또는 SVG(Scalable Vector Graphic)는 이미지의 왜곡이나 손상 없이 다양한 해상도와 픽셀 밀도에 대응이 가능할 뿐만 아니라, 애니메이션과 미디어쿼리 지원 등의 유용한 정보를 포함하고 있는 이미지 포맷입니다. 이 글에서는 SVG를 언제, 어떻게 생성하고 이용할 지와 제작의 워크플로우에 대해서 알아보도록 하겠습니다.

본론에 들어가기에 앞서, 두 가지 질문 드리도록 하겠습니다.

디자인하는 방법을 알고 계신가요?
HTML과 CSS를 작성하는 방법을 알고 계신가요?

두 질문에 대답이 모두 ‘NO’라면, ‘YES’라는 대답을 할 수 있는 누군가를 찾아서 함께 읽으시면 서로에게 큰 도움이 될 것입니다.

SVG는 무엇일까요?(What is SVG?)

위키피디아에서 스케일러블 벡터 그래픽을 검색하면, 다음과 같이 설명하고 있습니다.

스케일러블 벡터 그래픽 (SVG)은 2차원 그래픽을 위한 XML 기반의 벡터 이미지 형식으로 상호 작용과 애니메이션에 대한 지원이 가능하다. SVG 규격은 월드 와이드 웹 컨소시엄 (W3C)에 의해 1999년 개발된 개방형 표준이다.

위키디피아의 설명은 다소 함축적이라서 좀더 쉽게 풀어보도록 하겠습니다. 먼저, "XML 기반의" 이라는 부분은 SVGs는 HTML과 다른 것이라기 보다는 바이너리 유형의 대부분의 이미지들과 같은 형식으로 작성된다 것을 의미합니다. 사실 SVG는 HTML과 닮은 구석이 많기 때문에, HTML을 작성하는 방법을 알고 있다면, 이미 SVG작성법도 어느 정도 알고 있다고 말할 수 있습니다.

다음으로, 위키디피아는 SVG 형식은 W3C에서 개발한 것을 언급하고 있습니다. 따라서 SVG 형식을 작성하고 해석하는 방법을 정확하게 숙지하고 싶다면, W3C 문서를 살펴보시는 것도 좋습니다. 그런데, 이 문서가 아주 유용하지만, 처음 접하시는 분들에게는 조금 어려울 수 있습니다.

SVG를 왜 사용해야 할까요?(Why use one?)

1999년부터 SVG 형식은 기술적으로 사용이 가능했음에도 불구하고, 왜 웹에서는 적극적으로 활용되지 않았을까요? 여러 주요 브라우저들이 SVG를 수년째 지원하고 있었지만, 익스플로러는 9.0 버전에서야 크로스 브라우저를 지원하기 시작했다는 것이 이유 중에 하나 입니다. SVG 그래픽을 지원하지 않는 브라우저의 사용자를 위해서는 대체 이미지를 마련해야 하는 번거로움이 있습니다. 대체 이미지를 제공하는 방법은 이번 포스팅의 범위를 벗어나기 때문에 다루지 않도록 하겠습니다. 이 방법에 대해서는 해당 포스팅을 참고하시기 바랍니다.

최근에 다양한 스크린 사이즈와 해상도의 디스플레이를 탑재한 디바이스들의 증가로 SVGs의 장점은 더욱 부각되고 있습니다. 디바이스의 물리적 치수는 물론, 픽셀 밀도의 무제한 조합에 유연하게 대응할 수 있는 SVG형식은 반응형에 아주 적합한 궁극의 이미지 포맷인 이라고 할 수도 있겠습니다. 아쉬운 건, SVG도 장점만 있는 것은 아니긴 합니다.

SVG 형식의 한계(Limitations of the format)

SVG 이미지는 래스터 이미지 비해 용량이 큰 경우도 있습니다. 이미지의 용량은 여러 가지 요인 의해서 좌우되고, 경우에 따라서는 SVG가 래스터 이미지 보다도 파일 사이즈가 더 커질 수도 있습니다. 따라서, 몇 가지 테스트를 해 볼 필요가 있고, 대개의 경우는 보정을 통해 파일 크기를 크게 줄일 수 있습니다. 그래픽 툴에서 그리는 모든 요소는 패스로 출력되므로 불필요한 패스를 생성하지 않도록 늘 염두에 두어야 합니다.

SVG 형식은 그래픽 툴을 통해 적용한 블러 또는 색상조정 같은 필터는 지원하지 않습니다. SVG 에서 원본과 동일한 결과를 얻기 위해서는 가능한 심플하게 디자인 하는 것이 좋습니다. 일부 필터는 SVGs에 지원이 되긴 하지만, 대부분의 그래픽 툴은 이런 필터들을 제대로 지원하지 않기 때문에 사용하지 않는 편이 낫습니다.

최근 한 프로젝트에서, 브랜딩 업체에 벡터기반의 로고 제작을 의뢰하였고, EPS 버전을 요청했습니다. 몇 달 후, 약속 한대로 업체에서 EPS 파일을 보내왔는데, 파일 크기가 무려 1.2MB 였습니다. 파일을 열어보니, base64로 인코딩된 래스터 이미지로 가득한 말 그대로 이름만 벡터 형식이었습니다. 모든 패스에 필터가 적용되어 있었고, EPS 파일로 변환하는 과정에서 지원되지 않는 필터들은 일러스트레이터를 통해서 PSD형식의 이미지들로 삽입된 것이었습니다.

이런 상황을 방지하기 위해서는, 디자인 작업시에 SVG 파일로 생성하기에 적합한지 여부를 확인해보아야 합니다. 최종 디자인 단계에서는 주기적으로 SVG 파일을 생성해서, 무리 없이 변환이 되는지, 파일이 너무 복잡해지지 않았는지 등을 확인해야 합니다.

SVG 작성방법 배우기(Learning how to write SVG)

SVG 포맷은 HTML과 유사해 보이지만, 차이점이 많이 있습니다. 예를 들자면. HTML에서 빨간색 테두리와 파란색 사각형을 만들려면 div를 작성하고 다음의 CSS를 입히면 됩니다.

width: 300px ;

height: 200px;

border: 1px solid red;

background: blue;

SVG의 경우는 다음과 같습니다.

분명, 이 두 가지 형식의 공통점은 거의 없습니다. 저도 HTML에서만 유효한 것들이 SVG 에서도 가능할 것이라고 가정하는 바람에 여러 번 난처한 적이 있었습니다.

W3C 문서의 모든 내용을 따라서, 요소와 속성을 이해하려고 노력하는 대신에, 기존의 벡터 이미지의 일부를 SVG로 변환해 보는 것이 훨씬 효율적인 방법입니다.

포토샵을 사용하는 경우라면, SVG 파일로 저장하기 위해 일러스트레이터로 해당 파일을 불러와야 합니다. 파이어웍스를 사용하는 경우에는 SVG를 위한 웹 플러그인을 사용하는 것이 간단합니다. 스케치 같은 다른 응용 프로그램은 기본적으로 SVG 형식을 지원합니다.

일러스트레이터는 SVG 파일을 생성하면서 복잡한 코드와 불필요하게 용량을 증가 시키는 많은 데이터들을 추가합니다. 추후에 이러한 파일의 크기를 줄이는 방법에 대해 설명하도록 하겠습니다.

SVG 파일을 생성했다면, 이제 마음의 준비를 하고 텍스트 편집기에서 열어보도록 합니다. 눈앞에 보이는 것들이 조금 당황스러우실 텐데요. 텍스트 편집기에서 보이는 SVG 파일내의 각 요소들을 이미지 편집기에서 상응하는 것과 대응시켜 보도록 합니다. 엘레먼트를 보게 될 텐데요. 그것은 하나의 그룹입니다. 아마 몇 가지 엘레먼트들이 있을 텐데, 이것들은 이미지 내에서 패스를 설명하는 것입니다.

브라우저에서도 SVG 파일을 열어 보아야 합니다. 이때, 엘레먼트들을 검사하고 파일을 구성하는 방법을 확인하기 위해 개발 도구를 활용하는 것도 좋습니다. 값들을 변경해 보면서 화면이 어떻게 변경되는지 확인해 보는것도 좋은 방법입니다.

파일 용량 줄이기(Reducing file size)

SVG 파일의 용량은 기본적으로 경로가 얼마나 복잡한지에 의해 결정됩니다. 복잡한 패스를 표현하는 것은 단순한 패스에 비해 더 많은 코드가 필요합니다. 디자인을 단순화하는 것 외에도, 파일 사이즈가 최소화되어 있는지 확인할 수 있는 몇 가지 방법이 있습니다.

svgo은 SVG 파일에서 불필요한 코드를 제거하는데 유용한 노드 플러그인입니다. 만일, 노드를 설치하는 게 번거롭다면, 드래그앤드랍(drag and drop) 응용 프로그램 svgo-gui를 사용하시면 됩니다. 자동화하고 싶다면, svgo를 이용하는 grunt-svgmin이라는 그런트(grunt) 플러그인을 선택할 수도 있습니다.

파일 크기를 더 줄이고 싶다면, 압축을 하면 됩니다. 맥(Mac) 사용자라면 터미널을 열고 GZIP (뒤에 공백을 추가)를 입력하고 SVG 파일을 터미널 창에 드래그하여 Enter를 누르면 파일은 gzip으로 압축 된 버전으로 대체됩니다. .svg.gz를 .svgz로 이름 변경을 해주면 됩니다.

협력 과정(A collaborative process)

이 글은 줄곧 디자인과 개발업무 영역을 넘나들어서, 디자이너들과 개발자들 모두를 혼란에 빠뜨렸을 것 같습니다. 저는 개발자입니다만, 디자이너와 긴밀하게 협력해서 작업하는 것을 즐기고, 또 디자인에 상당한 안목도 있다고 자부합니다. 최적의 SVG 파일을 제작하려면, 디자인과 개발이라는 두 분야 사이에서 긴밀한 협력이 필요합니다.

이번 글에서는 SVG 파일을 어떻게 애니메이션 시키고, 인터랙션에 반응하게 만들는지, 미디어 쿼리를 SVG 파일에 어떻게 포함시키는 지에 대해서는 설명하지 않았습니다. 이런 추가적인 모든 작업은 개발자와 디자이너 사이에 아주 긴밀한 업무 협조가 필요합니다. 디자이너가 개발도 하고 개발자가 디자인도 한다면, 전체 프로세스가 간단할테니, 운이 아주 좋다고 할 수 있겠지만, 운이 나쁘다고 걱정하실 필요는 없습니다. 지금부터 개발자와 디자이너가 우정을 쌓아나가도록 하면 됩니다.

원문 링크) 확장 가능한 SVG(Scalable Vector Graphic) 시작하기

<번역>

Staff Editor : Eunice Chung | http://www.facebook.com/unee.chung

※ 본 기사는 웹진 '디자인로그(designlog.org)' 독자와 페이스북 'Design' 페이지 팬들이 디자인 인사이트를 넓히는데 도움을 드리기 위해 해외 디자인 트렌드 매거진과 블로그 기사를 바탕으로 세 분의 Staff Editor가 한국어로 번역하여 제공되고 있습니다.