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

SVG 애니메이션이란?

SVG(Scalable Vector Graphics) 는 어떤 크기에서도 픽셀이 깨지지 않는 벡터 기반 그래픽입니다. 아이콘, 로고, 다양한 비주얼 요소에 적합하며, 작은 화면과 큰 화면 어디서든 선명하게 보입니다.

• 비트맵 이미지가 픽셀 집합으로 이루어진 반면, SVG는 프로세서가 그려내는 명령 집합으로 구성됩니다.

• 점과 도형을 기반으로 하기 때문에 크기 조절이 자유롭고, 픽셀 기반이 아닌 코드 기반이라 수정과 재활용이 쉽습니다.

• 파일 크기가 작아 로딩이 빠릅니다. 따라서 현대 웹 디자인에서 널리 활용됩니다.

SVG 애니메이션의 역사

• 1990년대 후반: 최초의 SVG 애니메이션 사례 등장

• 2003년: 일부 브라우저에서 지원 시작

• 2011년: 주요 브라우저에서 공식 지원

• 2018년: SVG2 출시 → 손쉽게 사용할 수 있는 애니메이션 툴 개발 확산

과거에는 별도 프로그램이나 플러그인이 필요했으나, SVG2 이후로 본격적인 주목을 받기 시작했습니다.

JavaScript와 HTML의 SVG 애니메이션

웹사이트 속도가 구글 검색 순위를 좌우하는 중요한 요소가 되었기 때문에 최근 10년간 GIF 사용은 줄어든 반면, JavaScript와 HTML5 기반의 SVG 애니메이션은 급격히 인기를 얻었습니다.

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

SVG 애니메이터의 원리

SVG 애니메이션은 펜으로 그림을 그리는 것과 유사하게, 경로(path)를 따라 움직이라는 지시문을 실행하는 방식입니다. 예를 들어 펜으로 그림을 그리는 사람에게 지시를 내린다고 생각해 보세요. “손을 왼쪽으로 7.5cm 정도 움직인 다음, 오른쪽으로 180도, 다시 13.5cm 정도 움직이세요.”이런식으로 말이죠.

• SVG 경로는 시작점, 끝점, 길이를 가지고 있으며, 경로를 따라 0 → 전체 길이까지 그려내는 과정을 애니메이션화할 수 있습니다.

• 이를 통해 선이 하나씩 나타나거나 도형이 완성되는 듯한 시각 효과를 줄 수 있습니다.

Framer의 Animator 컴포넌트(Benjamin den Boer 제작)는 이러한 과정을 자동 처리해주며, 캔버스의 SVG와 연결해 속성만 설정하면 쉽게 애니메이션을 만들 수 있습니다.

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

Framer의 새로운 벡터 편집 기능은 SVG를 직접 그리거나 가져와 관리하고 애니메이션화하는 과정을 그 어느 때보다 쉽게 만들어 줍니다. 캔버스 위에서 바로 작업할 수 있으며, 코드를 작성할 필요도 없어요.

1단계: SVG 그리기 또는 가져오기

SVG를 Framer에 추가하는 방법은 두 가지입니다.

1. 직접 그리기: Insert Menu → Vector를 선택해 캔버스 위에서 바로 벡터 도형을 작성할 수 있습니다.

2. 가져오기: 기존 SVG 파일을 드래그 앤 드롭하면 자동으로 Vector Set으로 변환됩니다. (아이콘이나 일러스트를 하나의 세트로 그룹화)

2단계: Vector Set으로 정리하기

Vector Set은 디자인을 깔끔하고 확장성 있게 관리하는 데 도움이 됩니다.

1. 벡터 그룹을 우클릭 → Create Vector Set 선택 또는 Assets 패널에서 새 세트 생성 가능

2. Vector Set 전용 캔버스에서 정리, 편집, 검색 가능

추가 기능은 아래와 같습니다.

• 변수 지원: 스트로크 색상, 불투명도 등 속성을 개별적으로 변경 가능

• 아이콘 재사용성 향상: 동일한 아이콘을 복제할 필요 없이 인스턴스별 커스터마이징 가능

• 멀티톤 아이콘 제작: 듀오톤, 멀티톤 컬러 아이콘을 한 세트로 제작 가능

3단계: Stroke 효과로 애니메이션 적용하기

새로운 Stroke Animation 효과를 활용해 벡터 그래픽을 생동감 있게 만들 수 있습니다.

1. 벡터를 선택한 뒤, Properties 패널로 이동

2. Effects섹션에서 Stroke Animation을 선택해 추가

Stroke Animation 속성

• Length: 선이 그려지는 길이 조절 (0 ~ 100%)

• Gap: 선 사이의 간격 조절

• Offset: 시작 지점을 이동시켜 애니메이션 방향/위치 변경

루프 모드

• None: 한 번만 재생

• Loop: 계속 반복

• Ping-Pong: 앞으로/뒤로 왕복 재생

마무리

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

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

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