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

애니메이션을 좋아하신다면, Framer가 최근 출시한 루프 기능 업데이트 소식을 반가워하실 겁니다. 이 기능을 활용하면 끊임없이 반복되는 애니메이션을 아주 쉽게 만들 수 있습니다. 이번 튜토리얼에서는 Framer의 새로운 루프 기능을 사용해 3개의 애니메이션 아이콘을 제작하는 방법을 소개해드릴게요.

준비물

애니메이션 아이콘을 만들려면 컴퓨터에 Framer가 설치되어 있어야 합니다. 공식 웹사이트에서 다운로드할 수 있고, Framer의 기본적인 디자인 및 애니메이션 도구 사용법에 대한 이해가 필요합니다.

시작하기

1. Framer 설치가 완료되었으면 새 프로젝트를 시작하세요.

2. 그다음, 아이콘을 배치할 수 있도록 새 프레임을 생성합니다.

3. 프레임 안에 세 가지 도형을 추가하고 원하는 위치에 배치합니다. (이 튜토리얼에서는 원, 사각형, 삼각형을 예제로 사용할게요.)

애니메이션 만들기

도형 배치가 완료되었다면, 이제 애니메이션을 만들어봅시다.

1. 첫 번째 도형의 프레임을 선택하고, 우측 애니메이션 패널로 이동합니다.

2. 'Effects'를 클릭 후 반복 재생(Loop)을 선택하세요. (이렇게 하면 애니메이션이 끊임없이 반복됩니다)

3. 패널 내에서 원하는 애니메이션 속성을 설정하세요. 예를 들어, 크기 조절(Scale) 속성에 애니메이션을 적용하면 도형이 튀는 듯한 효과를 만들 수 있습니다.

인터랙션 추가하기

애니메이션 아이콘을 더 생동감 있게 만들기 위해, 인터랙션 기능을 추가해보겠습니다. 도형 중 하나를 선택하고, 원하는 인터랙션 트리거를 설정합니다. Framer에서는 클릭(Press), 호버(Hover), 드래그(Drag) 등 다양한 옵션을 제공합니다.
이 예시에서는 클릭 인터랙션을 사용하여 애니메이션을 재생하고 일시 정지해 보겠습니다.

마무리

Framer의 새로운 Loop 기능 덕분에 복잡한 설정 없이도 손쉽게 매력적인 애니메이션 아이콘을 만들 수 있게 되었죠. 이 글을 기반으로, 직접 아이콘을 만들고, 인터렉션까지 추가해서 여러분만의 독창적인 Loop 애니메이션 아이콘을 제작해보세요.
효과 및 리믹스 프로젝트 보기

본 글은 Framer 공식 블로그의 ‘Creating animated icons with Framer’s loop functionality’를 번역·각색한 콘텐츠입니다.