FrontendSVG를 이용하여 Animation 만들기 2
이 글은 SVG를 활용하여 애니메이션을 만드는 후속편으로, SVG의 preserveAspectRatio 속성에 대해 자세히 다룹니다. preserveAspectRatio 속성을 이해하기 위해 먼저 viewBox와 viewport의 개념을 명확히 설명합니다. viewBox는 SVG 내부 도형의 원본 크기(Figma 프레임 크기 등)를, viewport는 이 viewBox를 둘러싸는 창문과 같은 영역을 의미합니다. preserveAspectRatio 속성은 viewport 크기에 따라 viewBox를 어떻게 맞출지 결정하며, 특히 'meet'과 'slice' 옵션에 따른 정렬(Alignment value) 차이를 예시와 함께 설명합니다. viewport와 viewBox 크기가 다를 때, 도형의 비율을 유지하면서 화면에 맞추는 방법을 구체적인 CSS 코드와 함께 보여주어 웹 애니메이션 구현에 대한 이해를 돕습니다.
SVGAnimationCSS
