디자인만 해도 바쁜데, 모션까지 고려해야 할까?
Motion in Figma 워크숍 후기 (1)
Motion in Figma
지난 화요일, 팀스파르타에서 Figma Seoul과 LottieFiles가 주최한 Motion in Figma 워크숍이 열렸다. 메인 스피커는 이상효님으로, 워크숍에서는 Figma to Lottie 플러그인을 활용해 피그마 내에서 다양한 모션을 제작하는 방법을 배울 수 있었다.
평소 Lottie를 자주 사용하지만, 익숙한 기능 위주로만 활용해왔던 나로서는 새로운 기능을 배울 수 있다는 것에 대한 기대가 컸다. 무엇보다 내가 좋아하는 서비스의 워크숍을, 우리회사에서, 이상효님께 들을 수 있다니 놓칠수 없는 기회였다.
세션 장소에 도착하니 감사하게도 맛있는 닭강정과 오토김밥이 준비되어 있었다. (감동)
워크샵은 7시부터 10시까지 3시간 가량 진행됐고, 크게 두가지 주제로 진행됐다.
1) 팀스파르타에서 애니메이션을 통해 성과를 낸 사례 공유 - 팀스파르타 김다혜님
2) Figma 와 Lottie를 활용한 모션 제작 실습 - lottiefiles 이상효님
나처럼 Lottie의 기본 기능만 사용하고 있던 사람들에게 도움이 될 수 있도록 워크샵에서 배운 내용을 정리해보려고 한다. 글은 2부로 나누어 작성할 예정이다. 이번 글에서는 '프로덕트에서 모션의 중요성'을 다룬다. 그리고 다음 글에서는 Lottie를 사용해 간단한 모션을 제작하는 방법과 팁을 소개할 예정이다.
팀스파르타 사례로 본 모션의 중요성
워크숍의 본격적인 실습에 앞서, 팀스파르타의 다혜님께서 모션을 활용해 고객 경험을 개선한 사례들을 공유해주셨다.
1. 랜딩페이지 주목도 및 클릭률 개선
부트캠프 랜딩페이지에서 잠재 고객이 가장 궁금해할 만한 정보를 애니메이션으로 강조한 사례다.
상품을 설명하는 랜딩페이지에는 많은 정보가 담길 수 밖에 없다. 그 중에서도 잠재 고객이 가장 궁금해야할 정보에 애니메이션을 넣어 강조한 것이다. A/B 테스트 결과 모션을 적용한 B안에서 CTA 버튼 클릭률이 23.89% 상승하여, B안으로 전수배포 했다고 한다.
2. 스파르타 코딩클럽 수강 경험 개선
완주 직전 숙제를 제출해야함을 모르고 이탈하는 수강생이 많았다고 한다. 강의 완주 경험은 수강생 만족도에 영향을 미친다. 버튼명을 변경하고 컨페티 애니메이션을 추가해, 수강생이 해야 할 액션을 강조했다. 그 결과, 완주율이 평균 58%에서 68%로 상승했다고 한다. (이때 사용한 컨페티 애니메이션은 Lottie의 무료 라이브러리를 활용해 간편하게 제작되었다고 한다.)
3. 항해 99의 학습 관리 시스템 개선
항해 99의 스터디 학습 시스템에 게이미피케이션 요소를 추가해 학습 몰입도를 높인 사례도 있었다. 레벨 달성 시 캐릭터 애니메이션을 통해 성취감을 부여하는 게이미피케이션 요소를 통해 TIL(회고록) 제출률이 상승했으며, 중도 이탈률이 감소했다. 최종적으로 완주율이 30% 상승하는 성과를 얻었다고 한다.
3가지 사례에 활용된 모든 애니메이션은 로티를 활용했다고 말씀하시며, 소개가 마무리되었다.
참고로 로티 홈페이지에서 무료로 사용/수정 가능한 애니메이션 에셋을 확인할 수 있다.
다혜님께서는 모션은 사용자에게 전달할 메시지를 강조하는 중요한 요소라고 말씀해주셨다. 구체적인 지표를 함께 공유해 주셔서 모션이 비즈니스 문제 해결에도 큰 영향을 미친다는 것을 체감할 수 있었다.
디자인만 해도 바쁜데, 모션까지 고려해야 할까?
모션 디자이너가 따로 없는 상황에서, 프로덕트 디자이너가 모션까지 신경 쓰는 일은 쉬운 일이 아니다.
과거에는 나도 “모션을 추가할 시간에 더 많은 기능을 만드는 것이 낫지 않을까?“라고 생각하기도 했다.
그러나 내가 만든 서비스를 사용하던 한 동료의 피드백이 생각을 바꿔놓았다.
“다른 건 다 좋은데, 뭔가 투박해요. 맥 쓰다가 윈도우 쓰면 느껴지는 그 특유의 딱딱함 있잖아요?”
이 말을 들으며, 나 역시 맥에서 윈도우로 넘어갈 때 느낀 설명할 수 없는 불편함이 떠올랐다.
그제야 모션과 인터랙션은 단순한 부가 요소가 아니라 사용성의 일부라는 것을 깨달았다.
맥락에 맞는 애니메이션은 서비스의 완성도와 신뢰도를 높이는 핵심 요소다. UX가 점점 상향평준화되고 있는 지금, 모션과 인터랙션은 또 다른 경쟁력이 될 수 있다.
다음글 예고
모션을 Lottie를 활용해 간편하게 제작할 수 있는 방법에 대해 다룰 예정이다. 워크샵에서 열심히 실습하며 배워온 꿀팁 가득하니 많은 관심 부탁드린다!
