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

시작하기

먼저 버튼에 들어갈 별을 그려줍니다. 크기를 다양하게 설정한 뒤, 해당 프레임을 컴포넌트로 변환하고 여러 개의 Variant를 만들어줍니다. 각 Variant에서는 하나의 별은 커지고, 다른 별은 작아지도록 설정합니다. 이후 On Appear 인터랙션을 연결하면, 지정된 시간 간격으로 자동 순환하는 애니메이션이 완성됩니다.

자동 재생 애니메이션 만들기

별과 같은 방식으로 반짝이는 Shimmer 애니메이션도 만들 수 있습니다.

• 하나는 왼쪽에서 오른쪽으로

• 또 하나는 오른쪽에서 왼쪽으로

이렇게 두 가지 애니메이션을 만든 뒤 버튼 내부 상·하단에 각각 배치합니다. 그리고 보라색 배경을 덮어 씌워 위·아래 2px 부분만 보이도록 하면 자연스러운 반짝임이 연출됩니다.

디테일 추가하기

버튼이 한층 더 특별해지려면 디테일을 추가해보세요. 여기서는 유명한 파티클 컴포넌트(@benjaminnathan 제작)을 활용합니다. particles.page에서 가져올 수 있으며, ✦ 문자를 활용해 작은 별들이 흩날리는 듯한 효과를 만들 수 있습니다.

Hover 상태에서 opacity 1로 전환되도록 설정하면, 마우스를 올렸을 때 은은한 별빛이 나타납니다. 마지막으로 원형 그라디언트 레이어를 위에 얹어 멀리 떨어진 파티클이 보이지 않도록 처리하면 깔끔하게 마무리됩니다.

버튼 예시 보고 따라해보기→

본 글은 Framer 공식 블로그의 ‘Creating an AI button with Framer’를 번역·각색한 콘텐츠입니다.