작업 방식
svg-animations는 직접 작성하는 벡터 모션의 실무 참고 자료입니다. SVG 좌표계, 도형, 경로, 그룹, 마스크, 필터를 다룬 뒤 CSS 또는 SMIL 애니메이션과 연결합니다. 선 그리기, 경로를 따라 움직이는 객체, 변하는 아이콘, 움직이는 일러스트가 대표 산출물입니다.
정확성에 영향을 주는 원리를 설명합니다. 그리기 효과는 경로 길이를 사용하고, 형태 변형에는 호환되는 명령 구조가 필요하며, 그룹 변환은 전체 움직임과 국소적인 세부 변화를 분리할 수 있습니다. 접근성 라벨과 모션 감소 동작도 요구하며, 실제 임베딩 환경과 애니메이션 모드에서 검증해야 합니다.
예상 산출물
- 선택한 애니메이션 방식이 적용된 편집 가능한 SVG 마크업.
- 벡터 아이콘, 일러스트, 로고 또는 로딩 상태 애니메이션.
- 의도한 웹 환경의 임베딩 및 대체 동작 메모.
브리프에서 검토까지
- 01좌표계를 설정하세요
viewBox를 정의하고 기본 도형, 경로, 그룹으로 그림을 만드세요. 재사용하는 마스크, 그라디언트, 필터는 정의 영역에 두세요.
- 02애니메이션 방식을 선택하세요
선 그리기, 경로 추적, 형태 변형에 필요한 속성과 시간 모델을 사용하세요. 추측하지 말고 길이를 측정하고 경로 명령을 맞추세요.
- 03임베딩 맥락을 확인하세요
실제 페이지 또는 이미지 임베딩에서 변환, 최종 상태, 반복 연결부를 검사하세요. 선택한 방식의 라벨과 모션 감소를 테스트하세요.