SVG, 이젠 제대로 안다! 웹에서 SVG 활용법부터 애니메이션까지
SVG(Scalable Vector Graphics)는 개발자와 디자이너 모두에게 매력적인 무기입니다. 이미지의 해상도에 구애받지 않고 언제나 선명하게 표현되는 이 벡터 방식의 그림은, 코드로 그릴 수 있다는 점에서 특별합니다. 하지만 막상 직접 SVG를 다루려면 막막할 때가 많죠. 오늘은 SVG의 근본적인 구조부터 손쉽게 애니메이션을 구현하는 법, 실전 팁까지 웹에서 SVG를 제대로 활용하는 방법을 안내합니다. 여러분과 함께 SVG의 세계로 빠져봅시다!
SVG란 무엇인가? 웹 이미지의 새로운 기준
SVG는 '확장 가능한 벡터 그래픽'의 약자로, 크기와 해상도에 관계없이 변형해도 깨지지 않는 이미지를 코딩으로 그릴 수 있는 포맷입니다. JPEG이나 PNG와 달리, SVG는 텍스트 기반의 XML 언어로 이미지를 정의합니다. 즉, 특정 색상의 픽셀을 나열하는 대신 "원을 그리고, 색을 붉게 채워라"와 같은 명령어로 그림을 만듭니다. 덕분에 파일 크기가 작고, 웹에서도 자유롭게 편집·애니메이션이 가능합니다.
인라인 SVG: HTML 문서 안에 그래픽을 직접 코드로 그리기
SVG는 이미지 태그에 불러올 수도 있지만, 진짜 진가는 HTML 내에 직접 삽입해 사용할 때 발휘됩니다. 이미지처럼 보여도, 사실 HTML의 한 요소로 취급되어 CSS나 JS로 완벽하게 조작이 가능하죠. 예를 들어, <svg> 태그 내부에 <circle>이나 <rect> 등 다양한 도형을 넣을 수 있고, CSS로 색상이나 위치, 크기를 실시간으로 변경할 수도 있습니다. 웹 개발자의 상상력을 한층 더 확장시켜주는 그림판이란 뜻이죠.
SVG의 핵심 도형: 라인, 사각형, 원, 다각형의 차이점
SVG에선 가장 기본이 되는 도형들을 '프리미티브'라고 부릅니다:
Line(선): 시작(x1, y1)과 끝(x2, y2) 좌표를 지정해 그립니다. HTML에선 선을 그리기가 까다롭지만, SVG는 매우 쉽습니다.
Rect(사각형): x, y 좌표와 너비, 높이를 지정. Border와 다르게, 선(Stroke)는 사각형의 중간을 기준으로 그려져 내외부에 동시에 영향을 미치며, 사각형의 모서리(RX, RY)로 둥글게 만들 수도 있습니다.
Circle(원), Ellipse(타원): 중심점과 반지름으로 위치를 지정, 반지름이 0이면 도형은 아예 보이지 않습니다.
Polygon(다각형): 점들의 좌표를 나열해 원하는 모양을 쉽게 만들 수 있습니다. 포인트 배열로 삼각형, 사각형, 혹은 더 복잡한 다각형까지 그릴 수 있죠.
SVG 코드 포맷팅: 가독성이 성능보다 중요하다
SVG는 텍스트 기반이라서 엄청난 최적화도 자유롭게 할 수 있습니다. 예전엔 컴마나 줄바꿈 없이 숫자만 적어 파일을 최소화했지만, 최근엔 gzip 등 서버 압축이 기본이라 가독성 좋은 포맷팅이 더 중요해졌습니다. 즉, SVG 코드를 팀원이 이해하기 쉽게 정리해두면 유지보수도 쉬워지고, 파일 용량엔 큰 영향이 없습니다.
뷰박스(ViewBox)의 마법: SVG를 크기 제한 없이 활용하기
SVG를 처음 그릴 땐 픽셀 좌표로 위치를 잡게 되는데, 이 방식은 크기가 달라질 때 잘려나오거나 깨질 수 있습니다. 이렇게 벽에 부딪힌 분, 많으시죠? 해결책은 viewBox 속성. 뷰박스는 SVG 내부에 별도의 좌표계를 만들어, 외부 크기가 변해도 내부 도형을 자동으로 맞춰줍니다. 줌인/줌아웃이나 위치 이동도 뷰박스 값만 바꿔주면 한 방에 해결! SVG가 "무한한 좌표 공간"을 갖고 있다는 컨셉도 바로 여기에 있습니다.
SVG와 CSS의 환상 콤비: 스타일도 애니메이션도 자유롭게
SVG가 웹 표준의 진정한 일원인 이유? 바로 CSS와 JavaScript로 자유롭게 조작할 수 있다는 점입니다. SVG의 속성들은 대부분 CSS 프로퍼티로 취급돼 별도의 선택자나 명령으로 색상, 굵기, 위치, 효과를 줄 수 있습니다. 게다가 CSS의 transition이나 animation을 활용하면 선이 부드럽게 바뀌거나 그림이 동적으로 움직이는 효과까지 완성됩니다. 이미지는 물론, 웹앱 인터페이스나 로딩 애니메이션도 SVG로 세련되게 구현이 가능합니다.
Stroke 속성의 꿀팁: 점선·원·라인캡을 자유자재로
SVG에서 선의 표현은 HTML보다 훨씬 유연하죠. stroke-dasharray 속성으로 점선의 길이와 간격을 마음껏 조정할 수 있고, 'rounded', 'square', 'butt' 등 다양한 라인 끝 모양까지 바꿀 수 있습니다. 특히 점선이 도형을 감싸는 패턴을 만들거나 애니메이션의 소스로 활용할 때, 이 속성을 제대로 아는 것이 필수입니다. 예를 들어, "원본 사이즈만큼 dasharray를 잡고, offset을 바꿔가며 애니메이션"을 주면 나만의 시그니처 효과도 손쉽게 만들 수 있죠!
SVG 애니메이션: 직접 그리는 듯한 다이나믹 효과 만들기
CSS와 연계하면 SVG에 환상적인 애니메이션을 입힐 수 있습니다. stroke-dasharray와 stroke-dashoffset을 조합해 점선이 순서대로 나타나게 만들거나, 로딩 스피너처럼 원이 회전하는 움직임도 간단하게 구현할 수 있습니다. 쓸 수 있는 방법은 두 가지: SVG 안에 직접 CSS 코드를 삽입해 XML 내에서 애니메이션을 제어하거나, 외부 CSS로 불러와 적용하는 방법도 있습니다. 단, SVG 자체의 애니메이션 지원은 점점 표준에서 제외되고 있어, CSS를 적극 활용하는 것이 안전합니다.
실제로 활용하기: SVG 직접 코딩과 소프트웨어의 차이점
Figma나 Illustrator 같은 디자인 툴로 SVG를 쉽게 만들 수 있지만, 대부분 "모든 도형을 단일 path"로 내보내는 불편함이 있습니다. 반면, 코드로 직접 작성하면 각 도형마다 움직임을 따로 줄 수 있어 애니메이션 등에서 한층 유리하죠. 복잡한 그림은 툴에서, 작은 인터랙티브 요소는 직접 SVG로 코딩! 이런 투트랙 접근이 실전에서 가장 유능합니다.
고급 테크닉: 자바스크립트로 SVG의 경로 길이 자동 계산하기
SVG 애니메이션의 고수들은, 도형의 경로 길이를 직접 계산해 dasharray를 정확히 맞추곤 합니다. 이때 자바스크립트의 getTotalLength() 메서드를 사용하면, 원이나 다각형 등 복잡한 도형의 실제 경로 길이를 자동으로 추출할 수 있습니다. 계산 결과로 "콤마" 몇 개만 바꿔도 원하는 부드러운 애니메이션이 간단하게 구현되고, 반복적인 손수 계산은 필요 없어집니다. 또, pathLength 속성을 직접 오버라이드하면 개발자 마음대로 새로운 기준을 적용할 수도 있습니다.
SVG를 더 잘 쓰려면? 교육 리소스와 추천 강좌
SVG에 제대로 입문하고 싶다면, 웹 개발 커뮤니티·교육자 Josh Comeau의 강좌나 블로그, 그리고 React/JS용 SVG 활용 코스를 적극 추천합니다. 기존 CSS·JS 지식만으로도 SVG를 자유자재로 활용할 수 있으며, 정교한 인터페이스와 예쁜 애니메이션을 손쉽게 코딩하는 실전 스킬을 얻을 수 있습니다.
마무리하며, SVG는 단순한 이미지 포맷이 아닙니다. CSS·JavaScript와 결합해 웹을 한 단계 업그레이드해주는 진정한 그래픽 도구입니다. 직접 코드로 그릴 수 있고, 원하는 대로 움직임을 입힐 수 있으니, 지금부터 하나씩 실습에 도전해 보세요. 작은 아이콘부터 인터랙티브 차트, 나만의 로딩 애니메이션까지 SVG로 멋진 경험을 만들어봅시다. 밋밋한 PNG 대신, 살아 움직이는 SVG의 세계로 뛰어드세요!
출처 및 참고 :