눈길을 끄는 모바일 콘텐츠를 제작하려면 다운로드되는 데이터의 양과 시각적 효과 극대화의 균형을 맞추어야 합니다. 벡터 그래픽은 최소한의 대역폭을 사용하여 근사한 시각적 결과를 제공하는 좋은 방법입니다.
많은 사람들이 웹에서 벡터와 래스터를 혼합하여 그리는 유일한 방법으로 캔버스라고 생각하지만, 몇 가지 이점이 있는 대안도 있습니다. 벡터 그리기를 만드는 좋은 방법은 HTML5의 핵심 부분인 SVG (Scalable Vector Graphics)를 사용하는 것입니다.
반응형 디자인은 다양한 화면 크기를 처리하는 데 큰 역할을 하며, SVG는 다양한 크기의 화면을 쉽게 처리하는 데 이상적입니다.
SVG는 벡터 기반 라인아트를 표현하기에 좋은 방법이며 비트맵을 효과적으로 보완합니다. SVG는 연속 톤 이미지에 더 적합합니다.
SVG의 가장 유용한 점 중 하나는 해상도에 독립적이라는 것입니다. 즉, 기기에 몇 개의 픽셀이 있는지 신경 쓸 필요가 없습니다. 즉, 결과가 항상 멋지게 보이도록 브라우저에서 확장되고 최적화됩니다.
Google Drive의 그리기 애플리케이션, Inkscape, Illustrator, Corel Draw와 같은 인기 작성 도구에서 SVG를 생성하므로 다양한 방법으로 콘텐츠를 생성할 수 있습니다. SVG 애셋을 사용하는 몇 가지 방법과 이를 위한 몇 가지 최적화 도움말을 자세히 살펴보겠습니다.
확장 기본사항
간단한 시나리오부터 시작하겠습니다. 전체 페이지 그래픽을 웹페이지의 배경으로 사용하려는 경우입니다. 회사 로고 또는 그와 같은 것을 항상 배경에 표시하는 것은 매우 유용하지만, 물론 다양한 화면 크기에서 잘하기는 매우 어렵습니다. 설명을 위해 간단한 HTML5 로고부터 시작하겠습니다.
아래에 표시된 HTML5 로고는 짐작하셨겠지만 SVG 파일에서 시작된 것입니다.
로고를 클릭하고 최신 브라우저에서 로고를 보면 모든 크기의 창에 맞게 잘 조절되는 것을 확인할 수 있습니다. 자주 사용하는 브라우저에서 이미지를 열고, 창 크기를 조절한 다음, 배율을 조정해도 이미지가 선명하게 보이는지 확인하세요. 비트맵 이미지로 이 작업을 하려면 발생할 수 있는 각 화면에 다양한 크기를 제공해야 하거나 엄청나게 모자이크 처리된 이미지를 사용할 수 밖에 없습니다.
그렇다면 중요한 것은 무엇일까요? 눈치채지 못하셨다면 이 형식이 사용 중인 기기와 상관없이 확장되는 유일한 형식입니다. 따라서 사용자의 화면이나 창 크기를 몰라도 사용자에게 하나의 애셋만 제공하면 됩니다.
HTML5 로고는 1, 427바이트에 불과합니다. 이 용량이 너무 작아서 로드할 때 모바일 데이터 요금제의 영향을 거의 받지 않습니다. 따라서 로드 속도가 빨라지고 사용자에게도 비용이 저렴하고 빠릅니다.
SVG 파일의 또 다른 장점은 GZIP으로 압축하여 파일을 더 축소할 수 있다는 점입니다. 이 방식으로 SVG를 압축하면 파일 확장자를 ‘.svgz’로 변경해야 합니다. HTML5 로고의 경우 압축하면 663바이트로만 줄어들기 때문에 대부분의 최신 브라우저에서 쉽게 처리할 수 있습니다.
일부 최신 기기에서 예시 파일을 사용하면 압축된 벡터 데이터를 사용하여 60배의 이점을 얻을 수 있습니다. 또한 이러한 비교는 PNG가 아닌 JPEG와 SVG 간에 이루어집니다. 하지만 JPEG는 손실(lossy) 형식이므로 SVG 또는 PNG보다 품질이 낮습니다. PNG를 사용하면 80배 이상의 이점을 누릴 수 있습니다.
물론 PNG와 JPEG는 동일하게 생성되지 않습니다. 여러 최적화 도움말을 통해 PNG 대신 JPEG를 사용할 것을 권고하고 있지만, 이것이 항상 좋은 생각은 아닙니다. 아래 이미지를 살펴보세요. 왼쪽 이미지는 6x로 확대된 HTML5 로고의 오른쪽 상단 부분을 PNG 이미지로 만든 것입니다. 오른쪽 이미지는 동일하지만 JPEG로 인코딩되어 있습니다.
JPEG로 저장하는 파일 크기는 비용이 많이 들고, 선명한 가장자리에 색상 아티팩트가 있으므로 아마도 망막에 안경이 필요하다고 생각할 수 있습니다.:-) 공정하게 말하자면 JPEG는 사진에 최적화되어 있으며 벡터 아트에는 그다지 적합하지 않습니다. 어떤 경우든 SVG 버전은 품질 면에서 PNG와 동일하므로 파일 크기와 선명도 면에서 모든 계정에서 더 나은 결과를 얻을 수 있습니다.
벡터 배경 만들기
벡터 파일을 페이지의 배경으로 사용하는 방법을 살펴보겠습니다. 한 가지 쉬운 방법은 CSS 고정 위치를 사용하여 백그라운드 파일을 선언하는 것입니다.
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
디스플레이의 크기에 관계없이 이미지가 선명하고 깨끗한 가장자리와 함께 잘 조절된 것을 확인할 수 있습니다.
물론 배경 위에 콘텐츠를 넣을 수도 있습니다.
하지만 보시다시피 텍스트를 읽을 수 없으므로 결과가 이상적이지 않습니다. 그러면 어떻게 해야 할까요?
더 멋지게 보이도록 배경 조정
명백한 작업은 배경 이미지의 모든 색상을 더 밝게 만드는 것입니다. CSS 불투명도 속성을 사용하거나 SVG 파일 자체에서 불투명도를 사용하여 이를 쉽게 달성할 수 있습니다. CSS 콘텐츠에 다음 코드를 추가하기만 하면 됩니다.
#bg {
opacity: 0.2;
}
그러면 다음과 같은 결과가 표시됩니다.
이 솔루션은 간단하지만 휴대기기에서는 성능상의 문제가 될 수 있습니다. 대부분의 기존 모바일 브라우저에서는 불투명도 속성을 사용하면 불투명 객체에 비해 그리기 속도가 훨씬 느릴 수 있습니다.
더 나은 해결책
원본 SVG 콘텐츠의 색상을 수정하는 것이 CSS로 불투명도를 설정하는 것보다 훨씬 낫습니다. 다음은 사용된 색상을 변경하고 그 과정에서 불투명도 속성을 완전히 피하도록 HTML5 로고를 수정했습니다. 아래의 배경 이미지는 불투명도를 변경한 결과와 똑같아 보이지만, 페인트 작업이 훨씬 더 빨라지고 이 과정에서 CPU 시간이 절약되며 소중한 배터리 수명도 절약됩니다.
이제 몇 가지 기본 사항을 잘 이해했으니 다른 몇 가지 기능으로 넘어가겠습니다.
그라데이션의 효율적인 사용
버튼을 빌드한다고 가정해 보겠습니다. 먼저 모서리가 둥근 직사각형을 만들어 보겠습니다. 그런 다음 멋진 선형 그래디언트를 추가하여 버튼에 멋진 질감을 더할 수 있습니다. 이를 위한 코드는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
결과 버튼은 다음과 같이 표시됩니다.
추가한 그라데이션이 왼쪽에서 오른쪽으로 어떻게 이동하는지 살펴보세요. 이는 SVG의 기본 그라데이션 방향입니다. 하지만 이러한 개선이 가능한 데는 미적 측면과 성능이 몇 가지 다른 이유가 있습니다. 그라데이션 방향을 변경하여 좀 더 보기 좋게 만들어 보겠습니다. 선형 그래디언트에서 'x1', 'y1', 'x2' 및 'y2' 속성을 설정하면 채우기 색상의 방향을 제어합니다.
'y2' 속성만 설정하면 그라데이션을 대각선으로 변경할 수 있습니다. 이 작은 코드 변경:
<linearGradient id="blueshiny" y2="1">
그러면 아래 이미지와 같이 버튼이 바뀝니다.
이 간단한 코드 변경으로 위에서 아래로 이동하도록 그라데이션을 쉽게 변경할 수도 있습니다.
<linearGradient id="blueshiny" x2="0" y2="1">
아래 이미지와 같이 표시됩니다.
그렇다면 경사의 여러 각도에 대한 논의는 어떻게 해야 할까요?
마지막 예인 그라데이션이 위에서 아래로 이어지는 예가 대부분의 기기에서 가장 빠르게 그리는 것으로 나타났습니다. 수직 (위에서 아래로) 그라데이션이 거의 단색만큼 빠르게 칠해진다는 브라우저 코드를 작성하는 그래픽 전문가들에게는 잘 알려지지 않은 사실입니다. 객체를 그리는 것은 페이지 아래쪽의 가로선으로 이루어지기 때문입니다. 그리기 코드의 직감은 색상이 각 줄에서 바뀌지 않음을 이해하여 최적화합니다.
따라서 페이지 디자인에 그래디언트를 사용하면 세로 그래디언트가 더 빨라지고 배터리 소모량은 줄어듭니다. 이 속도 향상은 CSS 그래디언트에도 적용되므로 SVG뿐만이 아닙니다.
이 새로운 그래디언트 지식으로 모험을 해보고 싶다면 아래 코드를 추가하여 HTML5 로고 뒤에 멋진 그래디언트를 추가할 수 있습니다.
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
위 코드는 HTML5 로고 배경에 희미한 세로 선형 그래디언트를 추가하여 단색 배경만큼 빠르게 실행되는 미묘한 다색 색조를 제공합니다.
데스크톱 브라우저에서 콘텐츠를 로드하고 극단적인 가로세로 비율로 크기를 조절하면 상단/하단 또는 왼쪽/오른쪽에 흰색 막대가 표시됩니다. 어쨌든, 코드 변경 후에 결과로 반환되는 백그라운드는 다음과 같습니다.
간편한 애니메이션
이제 페이지의 배경화면으로 SVG 그라데이션을 사용하면 어떤 점이 좋은지 궁금하실 것입니다. CSS 그라데이션을 사용하면 그럴 수 있지만 SVG의 한 가지 이점은 그라데이션 자체가 DOM에 있다는 것입니다. 즉, 스크립트를 사용하여 수정할 수 있지만 더 중요한 것은 SVG의 기본 제공 애니메이션 기능을 활용하여 콘텐츠에 미묘한 변경사항을 추가할 수 있다는 것입니다.
예를 들어 선형 그래디언트 정의를 아래 코드로 변경하여 다채로운 HTML5 로고를 수정해 보겠습니다.
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
이러한 변경의 결과를 보려면 아래 이미지를 보세요.
이 코드는 실행하는 데 20초가 걸리는 연속적인 주기로 정의한 모든 색상 중단을 통해 선형 그래디언트의 색상을 변경합니다. 이렇게 하면 그라데이션이 멈추지 않고 연속적으로 페이지 위로 이동하는 것처럼 보입니다.
이 방법의 장점은 스크립트가 필요하지 않다는 것입니다. 따라서 이 페이지에서 참조 이미지로 실행되지만 스크립트의 필요성을 제거하여 모바일 CPU의 워크로드도 줄입니다.
또한 브라우저 자체에서 페인팅에 관한 지식을 활용하여 CPU 오버헤드를 최소화하여 멋진 애니메이션을 만들 수 있습니다.
한 가지 주의할 점이 있습니다. 일부 브라우저에서는 이러한 애니메이션 스타일을 전혀 처리하지 않지만 이 경우에도 좋은 색상의 배경이 표시되지만 변경되지는 않습니다. 스크립트 (및 requestAnimationFrame)를 사용하여 해결할 수 있지만 이 문서에서는 조금 더 설명합니다.
한 가지 더 주목해야 할 점은 압축되지 않은 이 SVG 파일은 2,922바이트에 불과하다는 점입니다. 엄청나게 작은 용량으로 풍부한 그래픽 효과를 제공하여 사용자와 데이터 요금제를 계속 만족시킬 수 있습니다.
다음 단계
SVG가 이상적이지 않은 경우가 많이 있으며, 사진과 동영상이 다른 형식으로 더 잘 표현됩니다. 텍스트는 기본 HTML 및 CSS가 일반적으로 훨씬 더 잘 작동하는 또 다른 유형입니다. 하지만 선이 그려진 예술작품을 위한 도구로는 이상적인 선택이 될 수 있습니다.
SVG 그래픽의 기본적인 몇 가지 기본적인 용도를 다루면서 최소한의 다운로드만으로도 전체 화면 생생한 그래픽을 제공하는 작은 콘텐츠를 생성하는 것이 얼마나 쉬운지 보여주었습니다. 콘텐츠를 조금만 개선해도 사소한 마크업으로 손쉽게 놀라운 그래픽 결과를 만들어 낼 수 있습니다. 다음 도움말에서는 SVG에 내장된 애니메이션을 더 간단하고 강력한 효과에 사용하는 방법을 자세히 살펴보고, SVG와 캔버스 사용을 비교하여 모바일 그래픽 사이트를 제작하는 데 적합한 도구를 선택하는 방법을 알아봅니다.
기타 유용한 리소스
- Inkscape는 SVG를 파일 형식으로 사용하는 오픈소스 그리기 애플리케이션입니다.
- 클립아트 열기: 수천 개의 SVG 이미지가 포함된 대규모 오픈소스 클립아트 라이브러리입니다.
- 사양, 리소스 등에 대한 링크가 포함된 W3C SVG 페이지
- Raphaäl은 이전 브라우저에서의 우수한 대체 기능을 통해 SVG 콘텐츠를 그리고 애니메이션으로 보여주는 편리한 API를 제공하는 자바스크립트 라이브러리입니다.
- Slippery Rock University의 SVG 리소스 - 유용한 SVG Primer에 대한 링크가 포함되어 있습니다.