CNN Booming Bangladesh - Pushing creative boundaries with Lottie
CNN Create
단순히 눈을 즐겁게 하는 것을 넘어서, 사용자가 정보를 이해하고 상호작용하는데 도움이 되어야 한다는 것을 중점으로 고민합니다
Create is CNN International’s in-house brand studio. Producing premium content for global brands, Create offers end-to-end creative services from campaign development to optimization.
In partnership with FBCCI, CNN Create Brand Studio produced ‘Booming Bangladesh’, a three-part thematic series hosted in an integrated hub. The content series sought to showcase how Bangladesh is embracing industry diversification and building an investment friendly landscape to fuel growth as one of the fastest-growing economies in the world. Core to the digital storytelling was the integration of LottieFiles which brought to life the dynamic animations featured throughout the site.
Real Academy에서는 Lottie 애니메이션을 활용해 학생들이 자유롭게 커스터마이징 할 수있는 아바타 디자인 Interaction를 선보였습니다. 사용자가 첫 로그인 시 학생증을 발급받아 프로필 이미지를 꾸밀 수 있도록 구성되어 있는데 이런 이미지들을 정지된 이미지가 아닌 Lottie 애니메이션을 활용하여 더욱 생동감 있는 표정과 개성 연출이 가능해 졌습니다. 본인의 개성을 나타내는 만화적인 눈빛과 독특한 아이템등에 구현된 모션 Interaction 요소는 알파세대의 아이들이 낯선 태블릿 어학원에 친밀감을 높이고 재밌게 등원 한다는것을 즐거운 경험으로 여길 수 있도록 만드는데 큰 도움이 되었습니다.
Real Academy에서는 Lottie 애니메이션을 활용해 학생들이 자유롭게 커스터마이징 할 수있는 아바타 디자인 Interaction를 선보였습니다. 사용자가 첫 로그인 시 학생증을 발급받아 프로필 이미지를 꾸밀 수 있도록 구성되어 있는데 이런 이미지들을 정지된 이미지가 아닌 Lottie 애니메이션을 활용하여 더욱 생동감 있는 표정과 개성 연출이 가능해 졌습니다. 본인의 개성을 나타내는 만화적인 눈빛과 독특한 아이템등에 구현된 모션 Interaction 요소는 알파세대의 아이들이 낯선 태블릿 어학원에 친밀감을 높이고 재밌게 등원 한다는것을 즐거운 경험으로 여길 수 있도록 만드는데 큰 도움이 되었습니다.
Real Academy에서는 Lottie 애니메이션을 활용해 학생들이 자유롭게 커스터마이징 할 수있는 아바타 디자인 Interaction를 선보였습니다. 사용자가 첫 로그인 시 학생증을 발급받아 프로필 이미지를 꾸밀 수 있도록 구성되어 있는데 이런 이미지들을 정지된 이미지가 아닌 Lottie 애니메이션을 활용하여 더욱 생동감 있는 표정과 개성 연출이 가능해 졌습니다. 본인의 개성을 나타내는 만화적인 눈빛과 독특한 아이템등에 구현된 모션 Interaction 요소는 알파세대의 아이들이 낯선 태블릿 어학원에 친밀감을 높이고 재밌게 등원 한다는것을 즐거운 경험으로 여길 수 있도록 만드는데 큰 도움이 되었습니다.
Lottie Animation 으로 게임 기능 구현
게임적인 요소로 활용된 Lottie 애니메이션은 아이들이 즐거운 학습을 하는데 큰 역할을 합니다. 슬링샷 게임은 아래 철자 ‘A’를 를 던져 단어 상자에 있는 고양이 'CAT’을 완성하는 게임으로 우리가 알고있는 산성비 게임과 유사합니다. 게임에서 문제를 맞추면 만화처럼 구름이 생동감있게 퍼지는 효과를 표현할때나 실패 하였을 경우 상자가 돌로 변해 깨는 효과를 표현할때도 Lottie를 활용해 매우 부드럽고 생동감 있는 이미지를 표현 할 수 있었습니다. 결과를 시각적으로 강조하기 위한 별 애니메이션도 역동적인 모션을 더해 성취감이 더 클 수 있도록 모션을 활용하기도 하였습니다. 이처럼 상호작용을 활용한 게임 기능들로 학습의 매 순간을 즐거운 도전으로 인식할 수 있도록 하는데 Lottie 애니메이션이 활용되었습니다.
감성적 터치와 리액션을 유도하는 Lottie Interaction
Lottie 애니메이션을 활용한 Interaction은 감정적인 요소를 표현 하는데 매우 큰 도움이 되었습니다. 본 학습 과정 중 문제 풀이에 대한 채점 결과를 애니메이션으로 보여주어, 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 경험을 할 수 있도록 유도했습니다. 정답을 맞추었을때는 큐브가 활발하게 반응하며 문제를 해결한 듯한 긍정적인 반응을 나타내고 오답에 대해서는 부정적인 메세지나 실패감을 주지 않도록 가볍게 진동하는 애니메이션 효과를 사용해 오답 피드백을 부드럽게 표현 하였습니다. 이러한 애니메이션은 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 환경을 조성하기 위한 장치로 활용됩니다.
Lottie 애니메이션을 활용한 Interaction은 감정적인 요소를 표현 하는데 매우 큰 도움이 되었습니다. 본 학습 과정 중 문제 풀이에 대한 채점 결과를 애니메이션으로 보여주어, 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 경험을 할 수 있도록 유도했습니다. 정답을 맞추었을때는 큐브가 활발하게 반응하며 문제를 해결한 듯한 긍정적인 반응을 나타내고 오답에 대해서는 부정적인 메세지나 실패감을 주지 않도록 가볍게 진동하는 애니메이션 효과를 사용해 오답 피드백을 부드럽게 표현 하였습니다. 이러한 애니메이션은 학습 과정에서 부족한 점을 자연스럽게 받아들이고 긍정적인 학습 환경을 조성하기 위한 장치로 활용됩니다.