offset-path, 왜 필요할까?
CSS 애니메이션 하면 보통 transform: translateX()나 @keyframes로 직선 이동을 떠올리기 마련입니다. 하지만 곡선, 원, 복잡한 SVG 경로를 따라 요소를 움직이고 싶을 때는 어떻게 해야 할까요?
바로 offset-path 가 그 해결책입니다. 이 속성은 요소가 따라 움직일 경로를 CSS에서 직접 정의할 수 있게 해줍니다. 원래 motion-path라는 이름으로 시작했지만, W3C 스펙이 개정되면서 offset-* 계열로 이름이 변경되었어요. 아직 두 문법 모두 동작하지만, 미래를 위해 offset-path 사용을 권장합니다.
.thing-that-moves {
/* 구형 문법 (Blink 브라우저, 2015년경) */
motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
/* 신형 문법 (Chrome 안정화, 2016년 12월경) */
offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}
이 속성은 애니메이션 가능한 속성이 아닙니다. 대신 경로를 정의하는 역할을 하고, 실제 움직임은 offset-distance와 @keyframes로 제어합니다.
실전 예제: offset-path로 원형 경로 애니메이션
가장 기본적인 사용법을 코드로 먼저 봅시다. 아래는 주황색 원이 원형 경로를 따라 계속 도는 예제입니다.
<div class="circle"></div>
.circle {
width: 40px;
height: 40px;
background: orange;
border-radius: 50%;
/* SVG 경로: 반지름 4의 원 (좌표계 단위는 픽셀) */
offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
animation: move 3s linear infinite;
}
@keyframes move {
100% {
/* 신형 문법 */
offset-distance: 100%;
/* 구형 문법 (브라우저 호환성) */
motion-offset: 100%;
}
}
⚠️ 주의:
offset-distance를 애니메이션할 때,from키프레임을 생략하면 기본값0%에서 시작합니다.to또는100%만 작성해도 됩니다.
경로 데이터는 어디서 얻나?
SVG 편집 툴(예: Illustrator, Figma)로 곡선을 그리고 d 속성 값을 복사해 path()에 그대로 넣으면 됩니다. CSS로 가져올 때는 단위 없는 값을 사용합니다.
- HTML 요소에 적용 시 좌표는 픽셀 단위로 해석됩니다.
- SVG 내부 요소에 적용 시 해당 SVG의
viewBox좌표계를 따릅니다.
자동 회전 제어: offset-rotate
요소가 경로를 따라갈 때 자동으로 방향을 바꾸는 것이 기본 동작입니다. offset-rotate로 이 동작을 세밀하게 조정할 수 있습니다.
.mover {
offset-rotate: auto; /* 기본값: 진행 방향을 향함 */
offset-rotate: reverse; /* 반대 방향 */
offset-rotate: 30deg; /* 고정 각도 */
offset-rotate: auto 30deg; /* 진행 방향 + 30도 회전 */
}
이 기능 덕분에 마치 자동차가 도로를 따라 핸들을 돌리는 듯한 자연스러운 움직임을 표현할 수 있습니다.
offset-path의 한계와 주의사항
지원 값의 제한
스펙상으로 offset-path는 path(), none, shape(), url(), circle(), ellipse() 등 여러 값을 지원해야 하지만, 현실적으로 path()와 none만 제대로 동작합니다. url()로 SVG 내 <path> ID를 참조하는 방식은 아직 브라우저 지원이 불안정합니다.
브라우저 호환성
- Chrome/Edge: 55+부터 안정적 지원
- Firefox: 72+부터 지원
- Safari: 16.0+부터 지원
- IE: 당연히 미지원
실무 팁: 구형 브라우저를 고려해야 한다면
motion-*구문도 함께 선언해 두는 것이 안전합니다. 또는 GreenSock(GSAP) 같은 라이브러리를 사용하는 것도 방법입니다.
국내 개발 환경에서의 적용 맥락
한국 웹 개발 현장에서는 아직 offset-path가 널리 쓰이지 않습니다. 대부분 requestAnimationFrame이나 라이브러리에 의존하는 경우가 많죠. 하지만 순수 CSS만으로도 구현할 수 있다는 점에서 성능 최적화 측면에서 이점이 있습니다. 특히 모바일 웹에서 GPU 가속을 활용할 수 있어 부드러운 애니메이션을 구현할 때 유용합니다.
다음 단계 학습 방향
- Web Animations API:
offset-path를 JS로 제어하는 방법을 익히면 동적 경로 변경이 가능해집니다. - SMIL 애니메이션: SVG 네이티브
animateMotion과 비교해보면 각각의 장단점을 이해할 수 있습니다. - clip-path와의 조합:
offset-path로 움직이면서 동시에clip-path로 마스킹하는 복합 효과에 도전해보세요.
마무리하며
CSS offset-path는 복잡한 경로 애니메이션을 순수 CSS로 해결할 수 있는 강력한 도구입니다. motion-path에서 offset-path로의 명칭 변경으로 혼란을 겪을 수 있지만, 핵심 개념은 동일합니다. SVG 경로 데이터만 준비되면 누구나 쉽게 적용할 수 있어요.
요약:
offset-path로 경로를 정의하고offset-distance로 진행률을 애니메이션하며offset-rotate로 방향을 조정한다.
이 글이 도움이 되셨다면, 함께 보면 좋은 글들을 확인해보세요.
함께 보면 좋은 글
근거자료: 이 글의 내용은 CSS-Tricks의 offset-path 알마낙 문서를 기반으로 작성되었습니다.