본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

SVG 애니메이션이란?

SVG(Scalable Vector Graphics)는 어떤 크기에서도 깨끗하게 보이는 벡터 기반 이미지입니다. 픽셀로 이루어진 비트맵 이미지와 달리, 점과 선으로 구성된 명령어 집합으로 그려지기 때문에 확대해도 흐려지지 않습니다. 아이콘, 로고, 반응형 일러스트 등에 특히 적합하지요. 코드 기반이라 수정이나 재활용도 쉽고, 용량이 작아 로딩 속도도 빠릅니다. 이러한 장점 덕분에 SVG 애니메이션은 현대 웹디자인에서 널리 활용되고 있습니다.

SVG 애니메이션의 역사

SVG 애니메이션은 1990년대 후반부터 등장했습니다. 일부 브라우저는 2003년부터 이를 지원하기 시작했지만, 당시에는 이를 제공하려면 별도의 프로그램이나 플러그인이 필요했기에 보급이 더뎠죠. 2011년부터 주요 브라우저가 본격적으로 이를 제공하기 시작했고, 2018년 SVG2가 발표되면서 사용하기 쉽고 강력한 SVG 애니메이션 툴들이 본격적으로 주목받게 되었습니다.

JavaScript와 HTML의 SVG 애니메이션

이후 10년 동안 GIF의 인기가 줄어든 반면, JavaScript와 HTML5 기반의 SVG 애니메이션은 크게 늘었습니다. 그 배경에는 웹사이트 속도가 구글 검색 순위를 좌우하는 중요한 요소가 되었기 때문입니다.

무거운 GIF를 사용하여 사이트가 느려지면 순위가 떨어지는 반면, SVG는 가볍고 빠르며 수정도 간편하기 때문에 GIF의 대안으로 자리잡을 수 있었죠.

SVG 애니메이터의 원리

SVG 애니메이션의 원리는 SVG를 그리는 애니메이터에게 명확한 지침을 제공하는 것입니다. 예를 들어 펜으로 그림을 그리는 사람에게 지시를 내린다고 생각해 보세요. “손을 왼쪽으로 7.5cm 정도 움직인 다음, 오른쪽으로 180도, 다시 13.5cm 정도 움직이세요.”이런식으로 말이죠.

이 지시문은 선이나 원 같은 기본 도형을 넘어, 하나의 경로(path)로 압축되며 시작점과 끝, 그리고 길이를 가집니다. 이 길이를 0에서 전체 길이까지 늘려가며 그렸을 때, 생성된 경로가 SVG 애니메이션으로 완성되는 것을 볼 수 있습니다.

Framer의 Animator 컴포넌트는 이 복잡한 과정을 자동으로 처리해줍니다. 캔버스에서 SVG를 선택하고 속성 패널에서 애니메이션 옵션을 설정하기만 하면 멋진 애니메이션이 완성됩니다.

이미지 삽입 요청: Framer 에디터에서 SVG에 Animator 컴포넌트를 연결하는 화면

Framer의 새로운 벡터 도구로 SVG 애니메이션 만들기

1. SVG 직접 그리기 또는 가져오기

• 직접 그리기: Insert 메뉴 → Vector 선택 후 캔버스에서 바로 그리기

• 기존 SVG 파일 가져오기: SVG 파일을 캔버스로 드래그하면 자동으로 Vector Set으로 변환

2. Vector Sets로 정리하기

Vector Set은 획의 색상, 불투명도 같은 변수를 지원하므로 각 디자인을 복제하지 않고도 아이콘의 각 인스턴스를 개별적으로 커스터마이징할 수 있습니다. 듀오톤, 멀티컬러 아이콘도 하나의 세트로 만들 수 있답니다.

Vector Sets를 사용하면 디자인을 깔끔하고 확장 가능한 상태로 유지할 수 있습니다.

• 벡터 그룹 마우스 우클릭 → “Create Vector Set” 선택

• Assets 패널에서 새 Vector Set 생성

3. Stroke Animation으로 애니메이션 적용

Framer의 새로운 스트로크 애니메이션 효과를 사용하여 벡터에 생동감을 더해보세요.

• 길이(Length)

• 갭(Gap)

• 오프셋(Offset)

이 세 가지 속성을 조절하여 무한 반복, 마이크로 인터랙션 등 다양한 루프 애니메이션까지 단 몇 번의 클릭만으로 모든 것을 구현할 수 있습니다.

마무리

SVG 애니메이션은 작고 빠르면서도 시각적으로 매력적입니다. Framer의 벡터 도구와 Animator 컴포넌트를 활용하면 코딩 없이도 손쉽게 SVG 애니메이션을 만들 수 있습니다.

앞으로 여러분이라면 어떤 아이콘이나 로고에 애니메이션을 입혀보고 싶으신가요? 위의 글만으로는 감이 잘 안 잡히신다면, 아래 튜토리얼 영상을 함께 보면서 따라 해보세요. 과정을 눈으로 확인하면서 작업하면 더 멋진 SVG 애니메이션을 빠르게 완성할 수 있을 거예요.

본 글은 Framer 공식 블로그의 ‘SVG animation mastery for designers’를 번역·각색한 콘텐츠입니다.