SVG를 이용하여 Animation 만들기 1

이 글은 SVG를 활용하여 웹 애니메이션을 만드는 방법을 다룹니다. 특히 Figma를 사용하여 애니메이션을 적용할 도형을 디자인하고, 픽셀 깨짐을 방지하기 위해 프레임 크기를 최적화하는 방법을 설명합니다.

각 레이어에 명확한 이름을 지정하여 코드 추출 시 용이하게 하는 팁도 제공합니다. 글에서는 두 가지 종류의 애니메이션을 완성하는 과정을 단계별로 보여주며, 첫 번째 애니메이션 제작 과정을 시작으로 색상 선택 및 도형 디자인 단계를 상세히 안내합니다.

SVG와 Figma를 결합하여 시각적으로 매력적인 웹 애니메이션을 구현하는 데 초점을 맞추고 있습니다.