반응형 사이트에 고해상도 그래픽을 사용하면 페이지 로딩 속도가 느려질 수 있습니다. 하지만 벡터 그래픽(Vector Graphics)을 활용하면 대역폭 사용량을 최소화하면서도 뛰어난 시각 효과를 유지할 수 있습니다. 덕분에 모바일 환경에서도 선명한 그래픽을 문제없이 표현할 수 있으며, 일반적으로 canvas와 SVG가 이러한 목적으로 사용됩니다.
SVG(Scalable Vector Graphics)란?
HTML5의 SVG(Scalable Vector Graphics)는 다양한 화면 크기에 완벽하게 대응하는 디자인을 만들기에 최적입니다. 픽셀 기반이 아닌 수학적 좌표로 도형을 그리기 때문에, 디바이스의 해상도나 픽셀 밀도를 전혀 걱정할 필요가 없습니다. 즉, SVG로 만든 그래픽은 해상도 독립적(resolution independent)이며, 브라우저 크기를 자유롭게 조절해도 결과물이 자동으로 확대·축소되면서 항상 선명하게 유지됩니다.
이번 글에서는 반응형 사이트에서 벡터 배경(Vector Background)을 구현하는 방법을 살펴보겠습니다. 먼저 데모용 SVG 파일을 준비하고, CSS 고정 위치(fixed positioning)와 너비 100% 설정을 적용해 보겠습니다.
예제 1: CSS 고정 위치로 SVG 배경 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
</style>
</head>
<body>
<img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
</body>
</html>실행 결과
위 코드를 실행하면 SVG 파일이 화면 전체 폭에 맞춰 배경처럼 표시됩니다. 브라우저 창의 크기를 조절하거나 위치를 변경해도 이미지가 깨지거나 왜곡되지 않고, 흐릿해지지도 않습니다. 이것이 바로 벡터 그래픽의 강점입니다.
예제 2: 투명도(opacity)를 추가해 진짜 배경 이미지처럼 만들기
위 예제는 단순히 이미지를 뒤에 배치한 것에 가깝습니다. 실제 웹사이트의 배경 이미지는 대개 반투명하게 처리되어 콘텐츠가 잘 보이도록 합니다. 따라서 opacity 속성을 함께 추가해 주는 것이 좋습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.1;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
</body>
</html>실행 결과
opacity: 0.1을 적용하면 SVG 이미지가 아주 연하게 표시되어, 본문 콘텐츠를 방해하지 않는 자연스러운 배경 이미지 역할을 하게 됩니다. 필요에 따라 투명도 값을 조절하여 원하는 분위기를 연출할 수 있습니다.
마무리
이처럼 SVG 벡터 그래픽을 활용하면 용량 부담 없이 어떤 화면 크기에서도 선명한 스플래시 화면이나 배경 이미지를 구현할 수 있습니다. PNG나 JPG 같은 래스터 이미지와 달리 확대해도 화질이 떨어지지 않으므로, 반응형 웹 디자인에서 성능과 품질을 동시에 잡고 싶다면 SVG 사용을 적극적으로 고려해 보시기 바랍니다.