Mingg's Diary

SVG 애니메이션

SVG는 벡터 그래픽에 애니메이션 을 적용할 수 있는 다양한 방법을 제공한다. 이를 통해 정적인 이미지에 움직임과 상호작용을 추가하여 더 역동적인 웹 경험을 만들 수 있다.

SVG 애니메이션 방법

SVG 요소를 애니메이션화하는 주요 방법은 세 가지가 있다.

SVG SMIL 애니메이션
CSS 애니메이션
JavaScript 애니메이션

각 방법은 고유한 장점과 단점이 있으며, 구현하고자 하는 효과와 호환성 요구사항에 따라 선택할 수 있다.

SVG SMIL 애니메이션

SMIL(Synchronized Multimedia Integration Language)은 SVG에 내장된 애니메이션 기능이다. 복잡한 애니메이션을 구현할 수 있지만, 모든 브라우저에서 지원되지 않는다는 점에 유의해야 한다. 특히 Internet Explorer와 일부 Chrome 버전에서는 지원되지 않는다.

기본 SMIL 애니메이션 요소

SVG SMIL은 다음과 같은 주요 애니메이션 요소를 제공한다.

요소	설명
<animate>	요소의 단일 속성을 시간에 따라 변경한다.
<animateMotion>	요소를 경로를 따라 이동시킨다.
<animateTransform>	요소의 변환(회전, 크기 조절 등)을 애니메이션화한다.
<set>	특정 시간에 속성 값을 설정한다(애니메이션 없이).

animate 요소 예제

다음은 원의 반경(r)을 애니메이션화하는 기본 예제이다.

<svg width="300" height="200">

  <circle cx="150" cy="100" r="20" stroke="black" stroke-width="2" fill="red">

    <animate

      attributeName="r"

      values="20;40;20"

      dur="4s"

      repeatCount="indefinite" />

  </circle>

</svg>

attributeName: 애니메이션을 적용할 속성(반지름 r)을 지정한다.
values: 애니메이션 중 값의 변화를 정의한다(20에서 40으로, 다시 20으로).
dur: 애니메이션 지속 시간을 초 단위로 설정한다.
repeatCount: 애니메이션 반복 횟수를 설정한다(“indefinite”는 무한 반복).

animateMotion 예제

요소를 경로를 따라 이동시키는 예제이다.

<svg width="300" height="200">

  <path d="M50,125 C100,25 150,225 200,125" stroke="lightgrey" fill="none" />

  <circle cx="0" cy="0" r="10" fill="blue">

    <animateMotion

      path="M50,125 C100,25 150,225 200,125"

      dur="4s"

      repeatCount="indefinite" />

  </circle>

</svg>

이 예제에서는 원이 정의된 곡선 경로를 따라 계속 이동한다.

animateTransform 예제

사각형을 회전시키는 예제이다.

<svg width="300" height="200">

  <rect x="125" y="75" width="50" height="50" fill="green">

    <animateTransform

      attributeName="transform"

      type="rotate"

      from="0 150 100"

      to="360 150 100"

      dur="4s"

      repeatCount="indefinite" />

  </rect>

</svg>

이 예제에서는 사각형이 중심점(150,100)을 기준으로 360도 회전한다.

💡 SMIL 호환성 참고사항:
• SMIL 애니메이션은 모든 브라우저에서 지원되지 않는다.
• Internet Explorer는 SMIL을 지원하지 않는다.
• Chrome은 한때 SMIL 지원 중단을 발표했으나, 현재는 계속 지원 중이다.
• 최대한의 호환성을 위해 CSS나 JavaScript 대안을 고려하는 것이 좋다.

CSS로 SVG 애니메이션 적용하기

CSS 애니메이션은 SVG 요소에도 적용할 수 있으며, 더 넓은 브라우저 호환성을 제공한다.

기본 CSS 애니메이션 예제

CSS를 사용하여 원을 확대/축소하는 애니메이션을 만들어 보자.

<style>

  .pulse {

    animation: pulse-animation 2s infinite;

  }

  @keyframes pulse-animation {

    0% { r: 20; }

    50% { r: 40; }

    100% { r: 20; }

  }

</style>

<svg width="300" height="200">

  <circle cx="150" cy="100" r="20" stroke="black" stroke-width="2" fill="orange" class="pulse" />

</svg>

이 예제에서는 CSS @keyframes를 사용하여 원의 반지름을 주기적으로 변경한다.

CSS 변환(Transform) 예제

CSS 변환을 사용하여 SVG 요소를 회전시키는 예제이다.

<style>

  .rotate {

    transform-origin: center;

    animation: rotation 4s linear infinite;

  }

  @keyframes rotation {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

  }

</style>

<svg width="300" height="200">

  <rect x="125" y="75" width="50" height="50" fill="purple" class="rotate" />

</svg>

JavaScript로 SVG 애니메이션 구현하기

JavaScript를 사용하면 가장 유연하고 강력한 SVG 애니메이션을 만들 수 있다. 직접 DOM 조작이나 라이브러리를 활용할 수 있다.

기본 JavaScript 애니메이션

다음은 JavaScript를 사용하여 원의 위치를 애니메이션화하는 예제이다.

<svg id="svgContainer" width="300" height="200">

  <circle id="movingCircle" cx="50" cy="100" r="20" fill="red" />

</svg>

<script>

  const circle = document.getElementById('movingCircle');

  let position = 50;

  let direction = 1;

  function animate() {

    if (position >= 250) direction = -1;

    if (position <= 50) direction = 1;

    position += direction;

    circle.setAttribute('cx', position);

    requestAnimationFrame(animate);

  }

  animate();

</script>

이 예제에서는 원이 SVG 컨테이너 내에서 좌우로 움직인다.

GSAP 라이브러리 활용하기

GSAP(GreenSock Animation Platform)와 같은 애니메이션 라이브러리를 사용하면 더 복잡한 애니메이션을 쉽게 만들 수 있다.

<svg width="300" height="200">

  <rect id="animatedRect" x="50" y="50" width="100" height="100" fill="blue" />

</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script>

  gsap.to("#animatedRect", {

    duration: 2,

    x: 150,

    rotation: 360,

    fill: "green",

    repeat: -1,

    yoyo: true,

    ease: "power1.inOut"

  });

</script>

GSAP를 사용하면 시간, 이징(easing), 속성 변화 등을 세밀하게 제어할 수 있다.

애니메이션 방법 비교

방법	장점	단점	활용 사례
SMIL	- SVG에 내장됨 - 경로 애니메이션 용이 - HTML 마크업 안에서 완결됨	- 브라우저 호환성 문제 - 복잡한 구문 - 미래 지원 불확실	단순한 SVG 애니메이션, 경로 따라 이동
CSS	- 뛰어난 브라우저 호환성 - 간결한 구문 - 하드웨어 가속 가능	- 일부 SVG 속성 애니메이션 제한 - 복잡한 경로 애니메이션 어려움	간단한 변환, 색상 변화, 크기 조절
JavaScript	- 최대한의 유연성 - 상호작용 용이 - 동적 데이터 기반 애니메이션 가능	- 구현 복잡도 증가 - 성능 고려 필요 - 라이브러리 의존성 발생 가능	복잡한 인터랙티브 애니메이션, 데이터 시각화

성능 최적화 팁

SVG 애니메이션을 최적화하여 더 나은 사용자 경험을 제공할 수 있다.

transform 속성 활용: 가능하면 위치, 회전, 크기 조절에 transform 속성을 사용한다.
복잡도 관리: 애니메이션 요소의 복잡도를 낮게 유지한다.
will-change 속성 사용: 애니메이션될 속성에 will-change를 적용하여 브라우저가 최적화할 수 있게 한다.
requestAnimationFrame 활용: JavaScript 애니메이션에는 setTimeout 대신 requestAnimationFrame을 사용한다.
오프스크린 요소 관리: 화면에 보이지 않는 애니메이션은 일시 중지한다.

💡 성능 팁:
• SVG 요소의 수를 최소화하고 불필요한 복잡도를 피한다.
• CSS will-change 속성을 사용하여 브라우저에 애니메이션 의도를 알린다.
• 모바일 기기를 위해 애니메이션 복잡도를 조절하는 것을 고려한다.

사용 사례 및 응용

SVG 애니메이션은 다양한 웹 애플리케이션과 사이트에서 활용할 수 있다:

로고 애니메이션: 브랜드 아이덴티티 강화를 위한 동적 로고.
인터랙티브 아이콘: 사용자 동작에 반응하는 아이콘.
데이터 시각화: 차트와 그래프의 동적 표현.
로딩 인디케이터: 사용자 친화적인 로딩 애니메이션.
인포그래픽: 정보를 단계별로 표시하는 애니메이션 인포그래픽.
UI 요소: 애니메이션된 버튼, 토글 스위치 등.

SVG 애니메이션은 웹 사이트에 시각적 흥미를 더하고 사용자 경험을 향상시키는 강력한 도구이다. 다양한 방법 중에서 프로젝트 요구사항과 목표에 맞는 적절한 접근법을 선택하면 효과적인 애니메이션을 구현할 수 있다.

참고

W3C School - SVG Animation

HTML 그래픽 – Animation