SMIL 애니메이션, 타이밍 차트로 설계하라

Smashing Magazine의 Johan Grobler가 자바스크립트 없이 SVG를 움직이는 SMIL 애니메이션을 '타이밍 차트'로 설계하는 법을 정리했습니다. SMIL은 태그 하나가 한 요소의 한 속성만 제어하기 때문에, 여러 동작이 얽히기 시작하면 순식간에 복잡해집니다. Grobler는 각 동작이 언제 시작하고 끝나는지를 선으로 그려 미리 매핑해두면, 조율도 이후 유지보수도 훨씬 수월해진다고 말합니다.

"타이밍 차트는 이후의 수정과 유지보수를 한결 견딜 만하게 만들어주는, 큰 그림을 미리 그려두는 전략이다."Johan Grobler, Smashing Magazine

왜 중요한가

SMIL의 매력은 <img> 태그 안 정적 이미지에서도 자바스크립트 없이 동작한다는 점입니다 — 의존성과 성능 부담이 낮습니다. 하지만 태그마다 속성 하나씩만 움직이다 보니, 다단계 시퀀스는 syncbase 값(다른 애니메이션의 .begin·.end에 오프셋을 더해 상대 시점을 잡는 방식)으로 서로 물려야 합니다. 명명 규칙과 타이밍 지도가 없으면 어느 태그가 언제 도는지 추적이 불가능해지고, 애니메이션 조율은 순전히 시행착오가 됩니다.

실무 적용

복잡한 로더·아이콘·인터랙션 애니메이션을 만들 때는 코드보다 차트를 먼저 그리세요. 선분으로 각 동작의 시작·지속·종료를 한눈에 배치하고, 애니메이션 ID에 일관된 명명 규칙을 부여해 다중 요소·속성을 추적합니다. 그리고 prefers-reduced-motion을 반드시 존중해, 모션 최소화를 설정한 사용자에게는 과한 움직임을 걷어내야 합니다. 차트 한 장이 결국 코드 리뷰와 인수인계 문서를 대신합니다.

교차 참고

• MDN: SVG animation with SMIL — animate·animateTransform·animateMotion 등 SMIL의 실제 문법을 확인할 수 있습니다.
• MDN: prefers-reduced-motion — 모션 최소화 사용자를 배려하는 접근성 미디어 쿼리를 보완합니다.

Wemeet의 관점

Wemeet은 좋은 애니메이션이 '멋진 이징 곡선'이 아니라 '읽을 수 있는 타임라인'에서 나온다고 봅니다. 화면 위 움직임이 복잡할수록, 그것을 종이 위에 먼저 그려 팀 전체가 같은 그림을 보게 하는 규율이 유지보수 비용을 좌우합니다 — 애니메이션도 설계 문서가 필요한 엔지니어링입니다.