[회고] 피그마 로티(Lottie) 워크샵
2024년 12월, 팀스파르타 오피스에서 Figma Seoul과 LottieFiles가 주최한 Motion in Figma 워크샵에 다녀왔습니다.
로티에서 프로덕트 디자이너로 근무하시는 이상효님을 중심으로 세션이 진행되었고, 'Figma to Lottie' 플러그인을 활용해 피그마에서 다양한 모션을 제작하는 방법을 배웠습니다.
평소 Lottie에 대해 들어보긴 했지만, 저는 사실 '모션'의 진입장벽을 느끼고 있었던 주니어 디자이너 였습니다. 😅
퇴사 이후로 새로운 플러그인, 툴이 생겨나면 들어보자! 라는 마음이 있었기에, 기대되는 마음으로 워크샵에 참여했답니다.
우선, Lottie가 무엇인가!
워크샵은 Lottie에 대한 소개로 시작되었습니다.
간단하게 말하자면, code로 이루어진 JSON 파일 포맷 기반의 애니메이션 툴입니다.
디자이너로서, 베타로 제작되어 깨짐이 없다는게 가장 큰 장점이였습니다. dotLottie로 추출 시, 로티 파일을 한번 더 압축시켜 앱이나 웹 구현 시 빠른 로딩 스피드로 적용도 가능하다는 점이 인상적이었습니다. 또한 테마, 인터랙션 다 dotLottie에서 구현이 가능하답니다.
Lottie에 관심 있는 분들은 아래 무료 강의 링크로 들어보시는 것을 추천드립니다!
Education: Learn all things Lottie animation & motion - LottieFiles
Up your Lottie animation game and hone your motion design skills with our informative yet fun courses and tutorials with our Education section on LottieFiles.
lottiefiles.com
워크샵은 2가지 주제로 진행되었습니다.
1. '팀스파르타'에서 애니메이션을 통해 성과를 낸 사례
2. Figma에서 Lottie를 활용한 모션 실습
1. '팀스파르타'에서 애니메이션을 통해 성과를 낸 사례
총 2가지 성과 경험을 들어볼 수 있었는데요,
1-1. React 트랙 랜딩 개선 (A/B test)
팀스파르타의 핵심 목적은 타겟 고객이 제품 결제 전 유효한 리드로 전환될 수 있도록 랜딩페이지 개선하는 것이었습니다.
랜딩 페이지의 전환율을 높이기 위해 커리큘럼, 관리 시스템의 메시지를 강조하는 디자인을 설계했습니다. 하지만, 랜딩페이지에 소구하고 싶은 메시지 외에도 상세정보, 필수 정보들이 들어가야 했고, 이 과정에서 스크롤 길이가 좀 길어지는 문제가 있었습니다. 이를 해결하기 위해 팀스파르타는 고객 니즈를 충족하는 메시지의 주목도를 높일 수 있도록 애니메이션으로 강조하는 방안을 택하게 되었습니다. Lottie를 활용한 애니메이션의 효과는 컸고, CTA 버튼 클릭율 28% 상승이라는 성과를 만들어냈습니다.
1-2. 수강 환경 개선
두 번째 경험은, 제품을 결제한 수강생들에게 만족스러운 수강 경험을 제공하기 위한 수강 환경 개선 프로젝트였습니다.
수강 경험이 중요한 이유는 완주율 때문이었습니다. 수강 만족도가 높을수록 재구매율이 높기 때문이죠. 이러한 비즈니스 목표를 중심으로 2가지 페이지를 개선한 경험을 들어볼 수 있었습니다.
'숙제 제출 페이지'
강의 완주 직전, 숙제를 제출하지 않고 이탈하는 수강생들 완주시키는 것이 목적이었습니다. 이를 위해, 숙제를 제출해야 완주할 수 있다는 사실을 명확하게 전달하는 것이 디자인 방향이었다고 합니다. 팀스파르타는 “숙제 제출하기” 명칭을 “완주하기” 버튼으로 명칭을 바꾸었고, 이를 Lottie를 활용한 애니메이션으로 강조했습니다. 개선 결과, 평균 완주율은 58%에서 68%로 증가했스빈다.
'99클럽 학습 관리 시스템 개선'
두 번째 경험은 낮은 완주율과 TIL(Today I Learned!) 제출률을 높이는 태스크였습니다. 앞선 경험과 유사하지만 다른 접근이 인상적이었는데요, 습관 형성을 강조할 수 있는 재미 요소를 더힌 레벨링 시스템을 설계했습니다. 자세히 설명하자면, 레벨을 달성 할 때마다 캐릭터 애니메이션으로 재미 요소를 주는 게이미피케이션을 추가한 것이었습니다. 결과적으로, 매 주차별로 진행될수록 문제 풀이, TIL 제출률이 28% 상승한 성과도 달성했습니다.
요약하자면,
팀스파르타에서 로티를 활용한 경험은 '전달하고 싶은 메시지를 애니메이션으로 강조한다면, 확실한 효과가 있다'라는 것이었습니다. 그리고 그 도구인 로티는 정말 가볍고, 쉽고, 디자이너 친화적임을 확실히 이해할 수 있었습니다.
2. Figma에서 Lottie를 활용한 모션 실습
두번째 세션은 실습이었습니다. 실습 전, 이상효님의 설명을 듣고 실습을 준비했습니다. 알아두면 좋을 내용들을 참고 차 적어두겠습니다.
- figma에서는 insert svg, gif로 넣을 수 있음 (Lottie 네이티브 지원은 아직 불가)
- 반투명 작업을 gif로 추출하면 깔끔하게 추출되지 않을 수 있음 -> svg 권장
- 'Discover'에 있는 Lottie 작업물을 svg로 임포트한 뒤에도 수정 작업이 가능함
로티에 대한 충분한 설명을 들은 뒤, 본격적인 실습에 들어갔습니다.
저도 재미있는 애니메이션을 만들어보았는데요. 가장 흥미로웠던 점은, 프로토타입을 생성하면 로티로 반영이 가능하다는 것이었습니다. 단, 같은 프레임, 레이어 이름이 있으면 오류 발생이 높아질 수 있으니 유의가 필요합니다! 레이어가 새롭게 다른 캔버스에 생겨나는 경우도 지양해야 해요.
Tip! 안정적인 모션을 만들기 위해서 a → b → c로 연결한다면, b에 보여지는 프레임도 a, c에 숨겨서 넣어두는게 좋습니다.
회고
저도 우당탕 애니메이션을 만들어보았는데요! 서툴었지만, 툴 익히는 데에 시간이 필요한 저에게도 로티는 쉽고 간단했습니다. 프로토타입을 만드는 방법과 개념만 알고 계신다면, 누구나 만들 수 있을 것 같아서 만족스러웠습니다.
이전에는 모션이 단순 디자인을 꾸며주고 심미성을 높여주는 요소일 거라 생각했지만, 이제는 모션이 사용자를 이끄는 훅을 넘어 새로운 경험을 만드는 중요한 요소라고 생각합니다. 프로덕트 디자이너가 모션까지 생각한다면 또 다른 과업이라 느껴질 수 있습니다. 저도 역시 모션 디자인에 대한 부담이 있었습니다.
하지만 모션과 인터랙션, UX는 뗄 수 없는 관계가 되었고, 맥락에 맞는 애니메이션은 더 풍부한 서비스의 완성도와 신뢰도를 높이는 효과가 있음을 배우게 되었습니다. 점점 상향평준화되는 UX에 따라가기 위해, 모션은 새로운 경쟁력이자 가치 경험이 될 수 있다고 생각합니다.
앞으로 제가 프로덕트 디자이너로서 일을 하게 된다면, Lottie로 모션에 대한 부담을 내려놓지 않을까 기대가 됩니다.
제 글을 보신 여러분들도 가볍고 재미있는 애니메이션을 시작으로 Lottie를 이용해보시면 어떨까요?