재미있는 학습 경험 with Lottie Interactivity
김아란 - Motion & Interaction Designer
단순히 눈을 즐겁게 하는 것을 넘어서, 사용자가 정보를 이해하고 상호작용하는데 도움이 되어야 한다는 것을 중점으로 고민합니다
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은 감정적인 요소를 표현 하는데 매우 큰 도움이 되었습니다. 본 학습 과정 중 문제 풀이에 대한 채점 결과를 애니메이션으로 보여주어, 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 경험을 할 수 있도록 유도했습니다. 정답을 맞추었을때는 큐브가 활발하게 반응하며 문제를 해결한 듯한 긍정적인 반응을 나타내고 오답에 대해서는 부정적인 메세지나 실패감을 주지 않도록 가볍게 진동하는 애니메이션 효과를 사용해 오답 피드백을 부드럽게 표현 하였습니다. 이러한 애니메이션은 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 환경을 조성하기 위한 장치로 활용됩니다.
모션 디자인 시스템을 활용한 사용자 경험의 통일성
사용자 경험에서 동일한 모션 스타일을 제공하는 것은 서비스의 일관성을 강화하고 사용자에게 통합적이며 매끄러운 경험을 제공하는 데 중요한 요소입니다. Real Academy는 커리큘럼 학습, 단어 학습, 숙제함, 출석체크 등 총 6개의 주요 기능을 제공합니다. 각 기능별로 다른 디자이너가 담당하고 있으며, 서로 다른 기능을 작업하여 Interaction의 파편화가 우려되었습니다. 이러한 문제를 방지하기 위해, Interaction Designer가 주도하여 Real Academy 모든 기능이 하나의 통합된 서비스로 느껴질 수 있도록 공통적인 모션 스타일을 정의하였습니다.
- 제작된 UI를 바탕으로 아래 네 가지 주요 모션 스타일을 정의하고, 모든 학습 모듈과 Interaction 요소에 일관되게 적용하였습니다. 모션 스타일로 크게 Ease와 Spring으로 구분하였고 속도값을 Basic, Enhance, Dynamic으로 강도를 정의하였습니다.