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

애니메이션을 좋아한다면, 최근 Framer에 업데이트 된 새로운 Loop 기능에 대한 소식을 듣고 분명 좋아하실 겁니다. 이 기능을 사용하면 무한하게 반복되는 애니메이션을 만들 수 있으며, 사용법도 매우 간단하죠. 이번 글에서는 새로운 루프 기능을 사용하여 간단한 애니메이션 아이콘을 만드는 방법을 알려드릴게요.

준비물

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

시작하기

1. Framer를 실행한 뒤 새로운 프로젝트를 열기

2. 아이콘을 담을 새 프레임을 만들고, 그 안에 세 가지의 도형을 배치하기 (여기선 사각형, 삼각형, 원을 사용할게요)

애니메이션 만들기

1. 첫 번째 도형을 선택하고 오른쪽 효과 패널로 이동하기

2. 새 애니메이션을 추가한 뒤 원하는 속성을 지정하기 (크기(scale = 0.7)를 선택하여 튀어오르는 효과를 만들어 줬어요)

애니메이션 옵션에서 Loop를 활성화했다는 건, 이 애니메이션이 끊임없이 반복되게 만들어 줬다는 뜻입니다. (여기선 Mirro 효과를 통해 왔다갔다 하는 느낌을 줬어요)

인터랙션 추가하기

이제 나머지 도형에도 같은 방식으로 애니메이션을 적용하면 되는데요. 애니메이션만으로도 충분히 재미있지만, 추가적인 인터랙션을 넣으면 더 매력적인 아이콘이 됩니다.

도형을 선택한 후, 오른쪽 효과 패널에서 원하는 동작 방식을 추가적으로 선택해주면 됩니다. (예시로 Hover 동작 시 사각형의 색상이 바뀌도록 설정했어요)

마무리

이제 원·사각형·삼각형이 각각 루프로 반복되는 애니메이션과 인터랙션을 가진 아이콘을 손쉽게 제작할 수 있을 겁니다. Framer의 새로운 Loop 기능 덕분에 복잡한 설정 없이도 손쉽게 매력적인 애니메이션 아이콘을 만들 수 있게 되었죠. 이 글을 기반으로, 자신만의 독창적인 Loop 애니메이션 아이콘을 제작해보세요.

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