재미있는 학습 경험 with Lottie Interactivity
김아란 - Motion & Interaction Designer
단순히 눈을 즐겁게 하는 것을 넘어서, 사용자가 정보를 이해하고 상호작용하는데 도움이 되어야 한다는 것을 중점으로 고민합니다
뤼이드(Riiid)는 데이터 기반 딥러닝 기술로 1대1 맞춤 학습 솔루션을 제공하는 글로벌 AIEd(교육 인공지능) 기업입니다. 2023년 영어 학습 콘텐츠 회사 퀄슨을 인수해 학습 콘텐츠 제작 및 제공 노하우를 확보했습니다. 뤼이드의 기술력과 퀄슨의 콘텐츠 노하우를 바탕으로 2024년 하반기 출시 예정인 'Real Academy'는 태블릿 패드형 어학원 서비스로, 초등학생의 학습 능력을 정밀하게 진단하고 개인별 맞춤 학습을 제공합니다. 뤼이드의 Real Academy팀은 학생들의 흥미를 유발하고 학습 참여를 높이기 위해 다양한 Interaction을 고민하였습니다. 프로젝트의 완성도를 높이고 효과적인 학습 환경을 창조하는데 도움을 준 Lottie 애니메이션과 모션 Interaction 사용법을 소개합니다.
Gamification 기능은 서비스 개발에서 사용자 참여를 유도하고 재미 요소를 추가함으로써 사용자들을 사로잡는 데 중요한 역할을 합니다. 특히, Real Academy 같은 태블릿 교육 플랫폼은 상대적으로 집중력이 낮은 초등학생을 대상으로 하고, 스스로 혼자 공부해야 하는 특수성을 갖고 있기 때문입니다. 이러한 환경에서 Gamification 기능은 학습 과정을 흥미롭고 동기 부여가 되는 경험으로 전환시켜 학생들이 자발적으로 참여하고, 지속적으로 학습하게 만드는 핵심 요소가 됩니다. 따라서 Real Academy는 학생들이 학습에 적극적으로 참여하고 열정을 키울 수 있도록 다양한 Gamification 기능과 Interaction을 개발하였습니다.
Real Academy에서는 Lottie 애니메이션을 활용해 학생들이 자유롭게 커스터마이징 할 수있는 아바타 디자인 Interaction를 선보였습니다. 사용자가 첫 로그인 시 학생증을 발급받아 프로필 이미지를 꾸밀 수 있도록 구성되어 있는데 이런 이미지들을 정지된 이미지가 아닌 Lottie 애니메이션을 활용하여 더욱 생동감 있는 표정과 개성 연출이 가능해 졌습니다. 본인의 개성을 나타내는 만화적인 눈빛과 독특한 아이템등에 구현된 모션 Interaction 요소는 알파세대의 아이들이 낯선 태블릿 어학원에 친밀감을 높이고 재밌게 등원 한다는것을 즐거운 경험으로 여길 수 있도록 만드는데 큰 도움이 되었습니다.
Lottie Animation 으로 게임 기능 구현
게임적인 요소로 활용된 Lottie 애니메이션은 아이들이 즐거운 학습을 하는데 큰 역할을 합니다. 슬링샷 게임은 아래 철자 ‘A’를 를 던져 단어 상자에 있는 고양이 'CAT’을 완성하는 게임으로 우리가 알고있는 산성비 게임과 유사합니다. 게임에서 문제를 맞추면 만화처럼 구름이 생동감있게 퍼지는 효과를 표현할때나 실패 하였을 경우 상자가 돌로 변해 깨는 효과를 표현할때도 Lottie를 활용해 매우 부드럽고 생동감 있는 이미지를 표현 할 수 있었습니다. 결과를 시각적으로 강조하기 위한 별 애니메이션도 역동적인 모션을 더해 성취감이 더 클 수 있도록 모션을 활용하기도 하였습니다. 이처럼 상호작용을 활용한 게임 기능들로 학습의 매 순간을 즐거운 도전으로 인식할 수 있도록 하는데 Lottie 애니메이션이 활용되었습니다.
감성적 터치와 리액션을 유도하는 Lottie Interaction
Lottie 애니메이션을 활용한 Interaction은 감정적인 요소를 표현 하는데 매우 큰 도움이 되었습니다. 본 학습 과정 중 문제 풀이에 대한 채점 결과를 애니메이션으로 보여주어, 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 경험을 할 수 있도록 유도했습니다. 정답을 맞추었을때는 큐브가 활발하게 반응하며 문제를 해결한 듯한 긍정적인 반응을 나타내고 오답에 대해서는 부정적인 메세지나 실패감을 주지 않도록 가볍게 진동하는 애니메이션 효과를 사용해 오답 피드백을 부드럽게 표현 하였습니다. 이러한 애니메이션은 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 환경을 조성하기 위한 장치로 활용됩니다.
모션을 적절하게 활용한 Lottie 애니메이션은 학생들의 학습 동기를 높이기 위한 수단으로 적극사용되기도 합니다. 학습 커리큘럼을 잘 따라가기만 해도 스탬프, 컨페티, 별 등을 틈틈히 제공하여 학생들의 집중력을 높이고 칭찬과 응원의 메세지를 자주 노출 시켜 학습을 게임처럼 즐길 수 있게 합니다. 이처럼 학생의 모든 활동에 대한 다양한 리액션 Interaction을 통해 오프라인 선생님의 감성적 터치를 느낄 수 있게 합니다.
모션 디자인 시스템을 활용한 사용자 경험의 통일성
사용자 경험에서 동일한 모션 스타일을 제공하는 것은 서비스의 일관성을 강화하고 사용자에게 통합적이며 매끄러운 경험을 제공하는 데 중요한 요소입니다. Real Academy는 커리큘럼 학습, 단어 학습, 숙제함, 출석체크 등 총 6개의 주요 기능을 제공합니다. 각 기능별로 다른 디자이너가 담당하고 있으며, 서로 다른 기능을 작업하여 Interaction의 파편화가 우려되었습니다. 이러한 문제를 방지하기 위해, Interaction Designer가 주도하여 Real Academy 모든 기능이 하나의 통합된 서비스로 느껴질 수 있도록 공통적인 모션 스타일을 정의하였습니다.
- 제작된 UI를 바탕으로 아래 네 가지 주요 모션 스타일을 정의하고, 모든 학습 모듈과 Interaction 요소에 일관되게 적용하였습니다. 모션 스타일로 크게 Ease와 Spring으로 구분하였고 속도값을 Basic, Enhance, Dynamic으로 강도를 정의하였습니다.
적용된 예시로, 페이지네이션에서 ‘Ease Basic’을 사용하여 페이지를 부드럽게 넘길 수 있도록 모션 변화값을 가장 약하게 설정하였고 사용자가 화면 전환의 자연스러움을 느끼게 하였습니다.
새로운 정보를 제시하는 모달창의 경우, 'Ease Enhance'를 사용하여 텐션감을 살려 등장하고, 정보가 사라질때는 빠르게 처리하여 사용자가 다음 내용에 집중할 수 있도록 합니다.
‘Spring Enhance'는 Ease와 명확하게 구별되는 모션 스타일로 특별한 경우에 사용되었습니다. 뱃지, 학생증, 카드를 학생들에게 마치 서프라이즈 선물처럼 보이게 하여 사용자의 관심을 끌도록 디자인하였습니다.
사용자 인터페이스의 모든 부분에서 동일한 스타일, 행동, 그리고 반응을 유지함으로써 서비스 사용 중 발생할 수 있는 혼란을 최소화하고 사용자가 보다 통합되고 매끄러운 경험을 누릴 수 있도록 하였습니다.
Interactivity를 위한 Tools - LottieFiles
dotLottie - 큰 변화를 만들어낸 최적의 선택
LottieFiles의 dotLottie 포맷은 그 안정성과 최적성으로 애니메이션 구현에 가장 적합한 도구로 평가됩니다. 과거에는 bodymovin과 WebM 포맷을 사용했지만, 이러한 방법은 과정이 길고, 용량 최적화를 위한 반복적인 테스트로 많은 시간이 소요되었습니다. Real Academy에서 모션디자이너 겸 Interaction을 혼자 담당하면서 많은 Interaction 요소와 애니메이션을 제작해야만 했습니다. LottieFiles의 dotLottie 포맷은 추가로 용량 최적화 과정을 거칠 필요가 없어 업무 프로세스를 획기적으로 줄여 주었습니다. 그리고 서비스 내에서 dotLottie 포맷 애니메이션이 가볍게 구현 되어 사용성을 높여 주었습니다.
LottieFiles를 통한 소통의 개선
Interaction Designer 로서 프로토타입 개발 과정중 개발자와 프로덕트 디자이너와의 소통에 명확한 시각적 가이드를 제공하는 것이 중요했습니다. UX 논의에는 Figma, 개발 논의에는 Framer, 모션 작업에는 After Effects를 주요 도구로 사용했습니다. 서로 다른 툴을 사용함에도 불구하고, LottieFiles를 통해 모든 작업 결과를 Gif 혹은 Embed 형식으로 일관된 애니메이션을 공유할 수 있었습니다. 이러한 일관성은 타 직군과의 Interaction 관련 논의를 원활하게 하는 데 핵심적인 역할을 했습니다. LottieFiles의 이러한 기능은 프로젝트 전반에 걸쳐 효과적인 협업을 가능하게 했습니다.
Adobe After Effects와 LottieFiles의 시너지
LottieFiles를 통해 PNG sequence를 웹과 앱에 구현하는 경험은 모션 디자인 영역을 확장하는 기회였습니다. 기존에 Lottie로 처리하기 어려웠던 효과들을 PNG sequence를 사용하여 안정적으로 구현했습니다. 로더에 3D 효과를 추가하거나, shadow, liquid 등의 특수 효과를 적용할 수 있게 되어 After Effects를 사용하여 구현 가능한 특수 효과의 범위가 확대되었습니다.
"모든 움직임에는 의미가 있다.”
Riiid Motion & Interaction Designer로서, 프로덕트 내에 보여지는 애니메이션과 움직임은 명확한 목적과 의미가 있어야 한다고 생각합니다. 단순히 눈을 즐겁게 하는 것을 넘어서, 사용자가 정보를 이해하고 상호작용하는데 도움이 되어야 한다는 것을 중점으로 고민합니다. 저의 역할은 프로덕트 디자이너가 구상한 디자인을 사용성이 높은 움직임으로 변환하는 것이며, 개발자와 긴밀히 협력하여 기술적 제약을 이해하고 최적의 솔루션을 찾습니다. 세 직군간의 긴밀한 협력을 통해 Real Academy와 같은 서비스를 구축할 수 있었습니다.
앞으로도 Riiid는 LottieFiles와 함께 더 다양하고 즐거운 학습 환경을 만들어 나가겠습니다.
