눈길을 사로잡는 모바일 콘텐츠를 만들려면 다운로드되는 데이터의 양과 최대의 시각적 효과 간에 균형을 맞춰야 합니다. 벡터 그래픽은 최소한의 대역폭으로 멋진 시각적 결과를 제공할 수 있는 좋은 방법입니다.
많은 사람들이 캔버스를 웹에서 벡터와 래스터를 혼합하여 그리는 유일한 방법이라고 생각하지만, 몇 가지 장점이 있는 대안이 있습니다. 벡터 그리기를 실행하는 좋은 방법은 HTML5의 핵심 부분인 Scalable Vector Graphics(SVG)를 사용하는 것입니다.
반응형 디자인이 다양한 화면 크기를 처리하는 데 큰 역할을 한다는 사실을 모두 알고 있으며, SVG는 다양한 크기의 화면을 쉽게 처리하는 데 이상적입니다.
SVG는 벡터 기반 선 그림을 표시하는 데 매우 유용하며 비트맵을 보완하는 데도 좋습니다. 비트맵은 연속 색조 이미지에 더 적합합니다.
SVG의 가장 유용한 점 중 하나는 해상도에 독립적이라는 것입니다. 즉, 기기에 있는 픽셀 수를 신경 쓸 필요가 없으며, 결과가 항상 브라우저에 의해 조정되고 최적화되어 보기 좋습니다.
Google Drive의 Drawing 애플리케이션, Inkscape, Illustrator, Corel Draw와 같은 인기 있는 제작 도구는 SVG를 생성하므로 콘텐츠를 생성하는 방법은 다양합니다. SVG 애셋을 사용하는 몇 가지 방법과 시작하는 데 도움이 되는 최적화 도움말을 살펴보겠습니다.
확장 기본사항
전체 페이지 그래픽을 웹페이지의 배경으로 사용하려는 간단한 시나리오를 예로 들어 보겠습니다. 회사 로고나 그와 유사한 항목을 항상 백그라운드에서 전체 화면으로 표시하는 것이 매우 유용하지만, 다양한 화면 크기에서 이를 제대로 표시하는 것은 매우 어렵습니다. 예를 들어 간단한 HTML5 로고를 살펴보겠습니다.
아래에 HTML5 로고가 표시되어 있습니다. 짐작하셨겠지만 SVG 파일로 시작합니다.
로고를 클릭하고 최신 브라우저에서 살펴보면 모든 크기의 창에 맞게 아름답게 크기가 조절되는 것을 확인할 수 있습니다. 좋아하는 브라우저에서 이미지를 열고 창 크기를 조절한 후 어떤 크기로 확대해도 이미지가 선명한지 확인합니다. 비트맵 이미지로 시도하면 발생할 수 있는 각 화면에 대해 여러 가지 크기를 제공하거나 끔찍하게 픽셀이 늘어난 크기 조정된 이미지를 감수해야 합니다.
뭐가 그렇게 큰 문제인가요? 혹시 눈치채지 못하셨다면, 이 형식은 보기 위해 사용하는 기기와 관계없이 크기가 조정되는 유일한 형식입니다. 따라서 사용자의 화면이나 창 크기를 모르더라도 사용자에게 하나의 애셋만 제공하면 됩니다. 깔끔하니까요.
하지만 그뿐만이 아닙니다. HTML5 로고는 1,427바이트밖에 되지 않습니다. 이런, 아주 작아서 로드할 때 모바일 데이터 요금제가 손상될 일이 거의 없기 때문에 로드 속도가 빠르며, 사용자 입장에서도 저렴하고 빠릅니다.
SVG 파일의 또 다른 장점은 GZIP 압축을 적용하여 크기를 더 줄일 수 있다는 점입니다. 이 방법으로 SVG를 압축하면 파일 확장자가 '.svgz'로 변경되어야 합니다. HTML5 로고의 경우 압축하면 663바이트로 줄어들며 대부분의 최신 브라우저에서 쉽게 처리할 수 있습니다.
일부 최신 기기에서 예시 파일을 사용해 보면 압축된 벡터 데이터를 사용하면 60배 정도의 이점이 있습니다. 또한 이 비교는 PNG가 아닌 JPEG와 SVG 간에 이루어집니다. 하지만 JPEG는 손실이 있는 형식이므로 SVG나 PNG보다 화질이 낮습니다. PNG를 사용하면 80배가 넘는 이점이 있습니다. 놀라운 수치입니다.
하지만 PNG와 JPEG는 동일하게 생성되지는 않습니다. 많은 최적화 도움말에서 PNG 대신 JPEG를 사용하라고 안내하지만, 항상 좋은 방법은 아닙니다. 아래 이미지를 살펴보세요. 왼쪽 이미지는 6배로 확장된 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;
}
그러면 다음과 같은 결과가 표시됩니다.
이 솔루션은 간단하지만 휴대기기에서 성능 문제가 발생할 수 있습니다. 대부분의 기존 모바일 브라우저에서 불투명도 속성을 사용하면 불투명한 객체에 비해 그리는 속도가 훨씬 느릴 수 있습니다.
더 나은 솔루션
CSS로 불투명도를 설정하는 것보다 원본 SVG 콘텐츠에서 색상을 수정하는 것이 훨씬 좋습니다. 다음은 사용된 색상을 변경하여 페이드아웃되도록 수정된 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의 사용을 비교하여 모바일 그래픽 사이트 작성에 적합한 도구를 선택하는 방법을 알아봅니다.
기타 유용한 리소스
- SVG를 파일 형식으로 사용하는 오픈소스 그리기 애플리케이션인 Inkscape
- 수천 개의 SVG 이미지가 포함된 거대한 오픈소스 클립 아트 라이브러리인 Open Clip Art
- 사양, 리소스 등에 대한 링크가 포함된 W3C SVG 페이지
- Raphaël: 이전 브라우저를 위한 우수한 대체 옵션과 함께 SVG 콘텐츠를 그리고 애니메이션 처리하는 편리한 API를 제공하는 JavaScript 라이브러리입니다.
- Slippery Rock University의 SVG 리소스 - 유용한 SVG Primer 링크가 포함되어 있습니다.