SVG와 캔버스 기초
웹에서 그래픽을 구현하는 두 가지 주요 기술인 SVG(Scalable Vector Graphics)와 캔버스(Canvas)는 각각 고유한 특징과 장단점을 가지고 있습니다.
이 절에서는 두 기술의 기본 개념, 사용법, 그리고 적절한 활용 방안에 대해 알아보겠습니다.
SVG (Scalable Vector Graphics)
SVG는 2차원 벡터 그래픽을 XML 기반으로 표현하는 포맷입니다.
특징
- 확장 가능 : 품질 손실 없이 크기 조절 가능
- XML 기반 : 텍스트 에디터로 직접 편집 가능
- 검색 엔진 최적화(SEO) 친화적
- 개별 요소에 대한 이벤트 처리 가능
기본 도형 요소와 속성
- 사각형
<rect x="10" y="10" width="100" height="50" fill="red" />- 원
<circle cx="50" cy="50" r="40" fill="blue" />- 선
<line x1="0" y1="0" x2="100" y2="100" stroke="green" />- 다각형
<polygon points="50,0 100,100 0,100" fill="yellow" />HTML에 SVG 포함하기
- 인라인 SVG
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="purple" />
</svg><img>태그 사용
<img src="image.svg" alt="SVG 이미지">- CSS 배경 이미지로 사용
.logo {
background-image: url('logo.svg');
}캔버스 (Canvas)
캔버스는 자바스크립트를 사용하여 그래픽을 그릴 수 있는 HTML 요소입니다.
특징
- 픽셀 기반 렌더링
- 고성능 애니메이션에 적합
- 전체 캔버스를 하나의 이미지로 처리
- 개별 도형에 대한 직접적인 조작 불가
기본 사용법
- HTML에 캔버스 요소 추가
<canvas id="myCanvas" width="200" height="100"></canvas>- 자바스크립트로 그리기
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 80);2D 컨텍스트 주요 메서드
fillRect(x, y, width, height): 채워진 사각형 그리기strokeRect(x, y, width, height): 윤곽선 사각형 그리기beginPath(): 새 경로 시작moveTo(x, y): 펜 이동lineTo(x, y): 선 그리기arc(x, y, radius, startAngle, endAngle): 원호 그리기fill(): 경로 채우기stroke(): 경로 윤곽선 그리기
간단한 애니메이션 구현
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 10, 50, 50);
x = (x + 1) % canvas.width;
requestAnimationFrame(animate);
}
animate();SVG와 캔버스 비교
1. 성능
- SVG : 복잡한 그래픽이나 많은 수의 객체를 다룰 때 성능 저하 가능
- 캔버스 : 대량의 픽셀 조작이나 고속 애니메이션에 유리
2. 해상도 독립성
- SVG : 모든 해상도에서 선명
- 캔버스 : 고해상도 디스플레이에서 흐릿해질 수 있음
3. 이벤트 처리
- SVG : 개별 요소에 대한 이벤트 처리 가능
- 캔버스 : 전체 캔버스에 대해서만 이벤트 처리 가능
4. 접근성
- SVG : 텍스트 기반이므로 스크린 리더 접근 가능
- 캔버스 : 접근성 구현이 어려움, 대체 콘텐츠 필요
활용 예시
- SVG 인터랙티브 차트
<svg width="200" height="100">
<rect x="10" y="10" width="30" height="80" fill="blue">
<animate attributeName="height" from="0" to="80" dur="2s" />
</rect>
<rect x="50" y="10" width="30" height="50" fill="green">
<animate attributeName="height" from="0" to="50" dur="2s" />
</rect>
<rect x="90" y="10" width="30" height="70" fill="red">
<animate attributeName="height" from="0" to="70" dur="2s" />
</rect>
</svg>- 캔버스 파티클 시스템
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
function Particle(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 5 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
}
Particle.prototype.update = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.1) this.size -= 0.1;
}
Particle.prototype.draw = function() {
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
var particles = [];
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
if (particles.length < 100) {
particles.push(new Particle(canvas.width / 2, canvas.height / 2));
}
requestAnimationFrame(animate);
}
animate();적합한 사용 상황
1. SVG 사용이 적합한 경우
- 로고, 아이콘 등 해상도 독립적인 이미지
- 데이터 시각화, 차트, 그래프
- 인터랙티브한 지도
- 확대/축소가 필요한 다이어그램
2. 캔버스 사용이 적합한 경우
- 복잡한 애니메이션이나 게임
- 실시간 비디오 처리
- 대량의 객체를 다루는 데이터 시각화
- 픽셀 단위의 이미지 조작
성능과 접근성 고려사항
1. 성능
- SVG는 DOM의 일부이므로, 요소가 많아지면 렌더링 성능이 저하될 수 있습니다.
- 캔버스는 대량의 객체를 다룰 때 더 효율적이지만, 개별 객체 관리는 수동으로 해야 합니다.
2. 접근성
- SVG는 텍스트 기반이므로 스크린 리더가 읽을 수 있습니다. 중요한 요소에는
<title>과<desc>태그를 사용하여 설명을 추가하세요. - 캔버스 내용은 스크린 리더가 읽을 수 없으므로, 대체 텍스트나 ARIA 속성을 사용하여 접근성을 보장해야 합니다.
SVG와 캔버스는 각각 고유한 장점을 가지고 있으며, 적절한 상황에 맞게 선택하여 사용해야 합니다. SVG는 벡터 기반의 확장 가능한 그래픽에 적합하며, 개별 요소에 대한 조작과 애니메이션이 가능합니다. 반면 캔버스는 픽셀 기반의 고성능 그래픽 렌더링에 적합하며, 복잡한 애니메이션이나 게임 개발에 주로 사용됩니다.
두 기술 모두 웹 그래픽의 중요한 부분을 차지하고 있으며, 개발자는 프로젝트의 요구사항과 목표에 따라 적절한 기술을 선택해야 합니다. 또한 성능과 접근성을 항상 고려하여, 모든 사용자에게 최적의 경험을 제공할 수 있도록 해야 합니다.