HTML Academy · 강의

CSS와 SMIL로 SVG 애니메이션 만들기

CSS 전환과 SMIL로 SVG 요소에 움직임 추가하기

CSS와 SMIL로 SVG 애니메이션 만들기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

SVG의 CSS 전환

SVG의 표현 특성(fill, stroke, opacity, transform)은 CSS 전환으로 애니메이션할 수 있습니다. 클래스를 추가하고 전환을 정의합니다: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS 전환은 SVG 요소에서도 동일하게 작동합니다.

SVG의 CSS 키프레임 애니메이션

SVG 요소에 @keyframes를 적용할 수 있습니다. 경로를 그리는 효과에는 stroke-dashoffset을, 페이드 인에는 opacity를, 이동과 회전에는 transform을 애니메이션합니다. HTML 요소에 사용하는 것과 같은 애니메이션 구문을 수정 없이 SVG 요소에도 적용할 수 있습니다.

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }

경로 그리기 효과

stroke-dasharray와 stroke-dashoffset 기법은 경로를 그리는 동작을 흉내 냅니다. dasharray를 경로 길이와 같게 설정하고, dashoffset을 경로 길이로 설정해 보이지 않게 만든 다음 dashoffset을 0으로 애니메이션합니다. 그러면 획이 시작점에서 끝점까지 스스로 그려지는 것처럼 보입니다.

경로 길이 가져오기

path.getTotalLength()는 SVG 사용자 단위로 경로의 길이를 반환합니다. 이 값을 stroke-dasharray와 시작 stroke-dashoffset에 모두 사용합니다. 이렇게 하면 경로가 얼마나 복잡하거나 길든 애니메이션이 올바르게 작동합니다.

SVG의 CSS transform

최신 브라우저는 SVG 요소에서 CSS transform을 지원합니다. SVG 요소에서 transform-origin의 기본값은 SVG의 왼쪽 위 모서리이며, HTML처럼 요소의 중앙이 아닙니다. transform-origin을 요소의 경계 상자를 기준으로 지정하려면 transform-box: fill-box를 설정합니다.

.spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotate 1s linear infinite;
}

SMIL 애니메이션

SMIL(동기화 멀티미디어 통합 언어)은 SVG에 내장된 애니메이션 시스템입니다. animate 요소는 시간에 따라 특성값을 변경합니다. SMIL에는 JavaScript나 CSS가 필요하지 않으며, 애니메이션이 SVG 마크업 안에서 완전히 선언적으로 정의됩니다.

<circle r="20">
  <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>

animateTransform

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite">은 SMIL 구문을 사용해 지정된 중심점을 기준으로 요소를 회전합니다.

animateMotion

<animateMotion>은 SVG 경로를 따라 요소를 이동합니다. mpath로 경로를 참조하거나 경로 데이터를 인라인으로 지정할 수 있습니다. 요소가 경로 곡선을 자동으로 따라가므로 좌표를 직접 계산하지 않고도 복잡한 이동 경로를 구현할 때 유용합니다.

CSS와 SMIL의 장단점

CSS 애니메이션은 모든 최신 브라우저에서 지원되고 CSS의 계단식 적용과 통합되며 JavaScript로 제어하기 쉽습니다(일시 중지, 반전). SMIL은 SVG 마크업 안에 자체적으로 포함되고 CSS에 접근할 수 없는 정적 SVG 파일에서도 작동하며, 경로를 따라가는 애니메이션을 선언적으로 표현하기 좋습니다.

SVG 경로 변형

두 경로 도형 사이를 애니메이션하려면 두 경로의 명령 수가 같고 구조가 호환되어야 합니다. CSS 애니메이션은 d 속성을 애니메이션할 수 있습니다(Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } }를 사용하면 CSS만으로 경로를 변형할 수 있습니다.

SVG 애니메이션 접근성

움직임을 불편해하는 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 추가하여 SVG 애니메이션을 비활성화하거나 단순화합니다. 장식용 애니메이션은 완전히 비활성화해야 하고, 의미 있는 애니메이션(예: 로딩 상태)은 중지하기보다 단순화해야 합니다.

지식 확인

stroke-dasharray와 stroke-dashoffset 기법은 어떻게 경로 그리기 애니메이션을 만드나요?

요약

SVG 애니메이션은 속성 기반 효과에 CSS 전환과 키프레임을 사용하고, 경로 그리기에는 stroke-dasharray/dashoffset 기법을 사용하며, SVG 안에서 선언적인 애니메이션을 구현할 때는 SMIL의 animate/animateTransform/animateMotion을 사용합니다. 또한 접근성을 위해 prefers-reduced-motion을 활용합니다. CSS와 SMIL은 서로 보완적이므로 SVG에 CSS 계단식 적용 통합이 필요한지, 독립 파일로 이식할 수 있어야 하는지에 따라 선택합니다.

자주 묻는 질문

“CSS와 SMIL로 SVG 애니메이션 만들기” 강의는 무료인가요?

네 — “CSS와 SMIL로 SVG 애니메이션 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“CSS와 SMIL로 SVG 애니메이션 만들기”에서 뭘 배우나요?

CSS 전환과 SMIL로 SVG 요소에 움직임 추가하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“CSS와 SMIL로 SVG 애니메이션 만들기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기