CSS Motion Path와 SVG 애니메이션 실전 가이드

CSS Motion Path와 SVG 애니메이션

CSS Motion Path는 요소를 직선이 아니라 정해진 경로를 따라 움직이게 하는 CSS 기능입니다. SVG의 곡선, 지도 경로, 제품 일러스트 선을 브라우저 애니메이션 경로로 활용할 수 있습니다.

핵심 요약

offset-path로 이동 경로를 정의합니다.
offset-distance로 경로 위 진행률을 제어합니다.
SVG path 데이터는 CSS path() 값으로 사용할 수 있습니다.
반응형 화면에서는 경로와 그래픽이 어긋나지 않는지 확인해야 합니다.
prefers-reduced-motion을 반드시 지원하세요.

기본 예시

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

path() 값은 SVG path 문법을 사용합니다. 그래서 기존 SVG에 있는 선이나 곡선을 UI 애니메이션 경로로 재사용하기 좋습니다.

어디에 쓰면 좋은가

제품 투어, 지도 이동 경로, 차트 위 마커, 곡선을 따라 움직이는 아이콘, 시각적 진행 표시 등에 잘 맞습니다. 먼저 SVG Path Extractor로 경로를 추출하고, SVG Viewer에서 확인한 뒤 SVG Optimizer로 정리하세요.

HTML과 CSS 패턴

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: auto는 경로 방향에 맞춰 요소를 회전합니다. 화살표에는 좋지만 텍스트 라벨에는 적합하지 않습니다.

반응형과 접근성

CSS path()는 SVG viewBox처럼 자동으로 비율에 맞춰 스케일되지 않습니다. 애니메이션 영역을 안정적으로 잡고, 원본 디자인과 같은 좌표를 사용하며, 여러 화면 너비에서 테스트하세요.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

움직임은 내용을 가리지 않고 이해를 도와야 합니다. 버튼, 본문, 입력 필드를 덮지 말고 상태를 애니메이션만으로 전달하지 마세요.

SVGView 워크플로

SVG Viewer에서 SVG를 열고 viewBox를 확인합니다.
SVG Path Extractor로 경로를 추출합니다.
외부 SVG는 SVG Sanitizer로 정리합니다.
SVG Formatter로 마크업을 읽기 쉽게 만듭니다.
SVG Optimizer로 최적화한 뒤 다시 테스트합니다.

결론

CSS Motion Path는 SVG 경로를 유지보수하기 쉬운 UI 모션으로 바꿔 줍니다. 단순한 경로에서 시작하고, 애니메이션 목적을 분명히 하며, 배포 전에 접근성을 확인하세요.

CSS Motion Path와 SVG 애니메이션 실전 가이드