피그마를 활용한 로티 애니메이션 제작 팁
Lottie Animation
UX/UI 디자인에서 애니메이션은 사용자 경험을 풍부하게 만들어주는 중요한 요소예요.
디자인 작업을 하다 보면 단순한 화면 전환만으로는 아쉬울 때가 많습니다. 작은 애니메이션 하나가 인터페이스를 훨씬 더 직관적이고 매력적으로 만들어주기 때문이죠.
최근에 프로젝트에서 주로 사용하는 피그마(Figma)를 활용해 Lottie 애니메이션을 직접 만들어보았는데요, 생각보다 쉽고 재미있어서 제작 과정과 함께 배운 팁들을 공유하려 합니다. 이번 글에서는 제가 만든 사례를 중심으로 Lottie의 장점과 주의할 점까지 정리해 드릴게요.
0. Lottie란?
Lottie는 애니메이션을 JSON 파일로 변환해, 개발자가 바로 활용할 수 있도록 돕는 툴이에요.
일반적으로 많이 쓰는 PNG나 GIF보다 훨씬 가볍고 직관적이라서,
디자인–개발 협업 환경에 최적화되어 있다는 장점이 있어요
특히 Figma와의 연동이 간단해서, 애니메이션을 빠르게 프로토타입에 반영할 수 있다는 점이 포인트랍니다!
⚠️ 애니메이션을 내보내려면 LottieFiles 계정이 꼭 필요해요.
다만! 무료 플랜을 이용할 경우에는 일부 기능이 제한될 수 있으니 참고해 주세요.
* 이미지 출처 : Lottie animation1. Lottie는 어떻게 만들어야 할까요?
Lottie를 제작하는 방법은 크게 3가지가 있어요.
� Lottie에서 만들기
� 피그마에서 인터랙션을 만들어 내보내기
� 애프터 이펙트에서 만들기
이번 글에서는 그중에서도 Figma에서 인터랙션을 적용한 뒤, Lottie JSON으로 변환하는 방법을 중점적으로 다뤄보겠습니다!
2.Lottie 설치
❶ 피그마에서 Lottie 플러그인을 설치
❷ 웹에서 계정이 연결되면 로그인해요.
이제는 실제 예시를 통해 Lottie를 어떻게 활용할 수 있는지 확인해 볼 거예요.
또, 제작 과정에서 주의해야 할 포인트는 무엇인지 함께 짚어보겠습니다.
“직접 만들어보면서 배우는 시간”이라 생각하시면 더 재미있을 거예요!
3. 제작 예시
3-1. 원형 → 불꽃 변환 모션 (Variant)
Progress ___
첫 번째 예시는 원형이 불로 변환되는 모션이에요.
여기서는 Frame을 활용한 방식이 아니라, Variant 자체에서 변화를 주어 모션을 완성했습니다.
➜ 즉, 객체의 상태(Variant)를 다르게 설정해 자연스럽게 변형되는 효과를 낸 것이 포인트랍니다!
❶ 자연스러운 모션을 만들기 위해 총 3가지 쉐입(Circle, Oval, Fire)으로 만들었어요.
먼저 Circle 쉐입으로 크기변화를 준 뒤에, 타원형 Oval 쉐입을 추가하여 중간 단계를 만들어주었고, Fire 쉐입으로 마무리했어요.
❷ 쉐입의 점(Point) 개수를 점차 늘려서 4→8→11이 되도록 설계했어요.
이렇게 단계적으로 변화를 주면서, 단순한 형태 → 불 형태로 이어지도록 만들었습니다.
❸ 빠르게 전환되는 구간에는 Instant와 Smart Animate에서 Linear 효과를 적용하여 자연스러운 속도감을 주었어요.
Lottie TIP! <️Figma에서 Lottie로 내보내기>
❶ Variant을 선택한 뒤 오른쪽 패널 Prototype 탭에서 ‘1.Flow Starting Point’를 활성화(+)하면, 2. 해당 Variant에 파란색 배지가 표시됩니다.
❷ 모션은 1.Lottie로 직접 Export 하거나, 2.Select Prototype Flow에서 선택합니다.
❸ Save Animation To Download에서 내 대시보드에 파일을 저장하면 JSON, dotLottie, GIF 등의 포멧으로 다운 받을 수 있어요.
⚠️Lottie 애니메이션은 수정 시 자동저장이 되지 않기에 모션을 매번 대시보드에 내보내기 해야 하는
번거로움이 있어요.
3-2. 장바구니 튕겨지는 모션(Frame)
두 번째 예시는 장바구니에 상품이 담기는 아이콘 모션입니다.
이번에는 Frame 단위로 나누어 모션을 구현했어요.
Progress___
❶ 원이 카트 안에 들어가고 > 검은색이 채워지면서 > 카트가 아래로 내려가고 >
카트 안에 있던 작은 사이즈의 1이> 커지는 모션을 만들어주었어요.
각 움직임이 혼합되면 오류 발생 가능성이 있어, 하나씩 순서대로 움직임을 주는 것이 중요합니다!
❷ 장바구니 몸통이 채워지는 모션을 구현하기 위해, 숨겨진 면(Fill)을 활용했습니다.
❸ 통통 튀는 효과를 위해 초기 공이 들어가는 순간에는 Bouncy 효과를, 이후 카트의 높낮이가
움직이는 부분은 Ease out 효과를 적용했어요.
Lottie TIP! <️① 네이밍 규칙>
동일한 레이어명에 따라 모션을 만듭니다.
그룹(Group)으로 묶여 있는 경우에 네이밍이 달라져 충돌이 발생하므로, 그룹을 해제해야 해요.
Lottie TIP! <️② Stroke 오류>
선물상자에서 쇼핑백 아이콘의 모양으로 순차적으로 변화하는 Stroke 애니메이션을 만드려고 합니다.
Stroke 상태에서는 Lottie에서 오류가 생길 수 있어요.
Shape로 라인을 깨주어야 오류 없이 내보내기가 가능합니다.
네이밍에 주의하고, 같은 굵기의 라인으로 움직임을 주어야 부드러운 애니메이션이 완성됩니다!
3-3. 말풍선 아이콘 모션(Variant)
마지막 아이콘은 말풍선 아이콘을 활용했어요. 컬러와 음파로 사운드를 시각적으로 표현하였습니다.
Progress___
❶ 원형과 꼬리가 나뉘어 빛이 돌아가는 그라데이션 아이콘입니다. 총 세 가지 단계로 모션을 구성했어요.
❷ 자연스러운 움직임이 될 때까지 Lottie플러그인으로 보면서 수정합니다.
전체적으로 Linear 효과를 활용해 부드러운 흐름을 구현했어요.
Lottie TIP! <️인터랙션 전환 효과 오류>
인터랙션 중 Instant, Smart Animate만 내보내기 시 모션이 적용됩니다.
Dissolve와 하단 딤처리된 효과들은 적용되지 않습니다.
마치며
세 가지 모션을 만들면서 다양한 시행착오가 있었습니다.
하지만 이런 경험이 바로 Lottie의 발전 가능성을 보여주고 있다는 생각이 듭니다.
앞으로도 Lottie가 지속적인 업데이트와 기능 확장을 통해, 디자이너와 개발자 모두에게 강력한 협업 툴이 되기를 기대합니다!
인사이트
총 3가지의 예제를 만들어보면서 Lottie에서 제작 시 주의해야 할 점은
1. 네이밍 규칙
2. Stroke 모션 시의 오류 발생 가능
3. 인터랙션 일부 전환 효과 사용 불가
로 정리하며 마무리하겠습니다!
-라이트브레인 가치디자인그룹 김유정
[참고]
