OK Cashbag - LottieFiles와
함께하는 즐거운 포인트 생활
이희진 - OK Cashbag UX 디자이너, 정성은 - OK Cashbag Motion 디자이너
개편 이후 일 방문율이 62% 증가하였고 이는 서비스 기능과 맥락을 고려한 UX, 적절한 애니메이션의 활용 덕분이었습니다.
OK캐쉬백은 대한민국 최초의 오픈 마일리지로서 생활 속 다양한 제휴처에서 적립/사용이 가능한 포인트 서비스입니다. SK그룹의 통합 마일리지로 널리 위상을 떨치던 OK캐쉬백은 마일리지 시장이 점차 파편화되고 커머스의 중심이 오프라인에서 온라인으로 이동됨에 따라 새로운 변화가 필요해졌습니다. 이러한 변화에 대응하기 위해 OK캐쉬백은 마일리지 서비스를 온라인으로 확장하고, 다양한 방식으로 포인트를 적립하고 사용할 수 있는 통합 리워드 플랫폼으로 진화해 가기 시작했습니다. 새로운 변화의 시작을 함께한 Ok 캐쉬의 Lottie 애니메이션 스토리를 소개합니다.
변화를 위한 첫걸음, 새로운 캐릭터의 탄생
OK캐쉬백 UX 팀은 새로운 서비스 방향성에 부합하는 브랜드 전략을 수립하였고, 그중 하나가 캐릭터를 활용한 Brand Revitalization이었습니다. 서비스 아이덴티티에 부합하는 신규 캐릭터 ‘래키’를 개발한 후 캐릭터에 생명력을 불어넣기 위한 애니메이션 작업을 진행했습니다. 사용자와 서비스 간의 인터랙션과 몰입감을 강화하기 위해서는 무엇보다도 정교하고 효율적인 애니메이션 작업이 중요한 상황이었습니다.
기존에는 모션 작업을 진행할 때 gif 파일을 사용했었는데, gif 파일은 상대적으로 큰 용량임에도 이미지가 깨지는 이슈가 종종 발생하여 무한한 확장성을 가지고 있는 Vector 기반의 Lottie 포맷은 완벽한 대안으로 활용될 수 있었습니다. Lottie는 작업 과정과 Hand-off의 편리함뿐만 아니라, 적은 용량으로도 높은 퀄리티의 산출물을 뽑아낼 수 있어 캐릭터 애니메이션과 Gamification에 최적화된 파일 포맷으로 활용되었습니다.
Gamification이 가미된 즐거운 포인트 생활
Lottie 애니메이션으로 새롭게 탄생한 래키는 OK캐쉬백에서 야심 차게 전개한 NFT 프로젝트 ‘Road to Rich’의 주인공으로 더욱 스포트라이트를 받으며 고객에게 한 발짝 더 다가섰습니다. Lottie 애니메이션을 활용해 스토리라인을 구축하고 다양한 모션을 통해 래키가 신비의 숲에서 탐험하며 TEM을 모으는 역활과, 여행가이드로 다양한 활동을 척척해내는 모습을 표현해 냄으로서 사용자가 미션을 수행하고 보상을 받는 과정을 더욱 즐겁고 다채롭게 만들 수 있었습니다.
모션과 함께 창조된 캐릭터의 세계관과 Gamification이 가미된 다양한 이벤트들과 미션들은 고객에게 새로운 재미 요소를 제공하고 참여율과 몰입도를 더욱 높였고, 그 결과 약 22만 명의 고객이 OK캐쉬백의 NFT를 발급받았습니다.
LottieFiles와 함께한 만족스러운 협업
여름 시즌을 맞이하여 바캉스 컨셉의 래키를 표현하기 위해 물 위에 자연스럽게 떠다니는 래키를 제작했습니다. 래키를 제작할 당시 모션 소스와 CSS 애니메이션을 동시에 구현해야 하는 상황에서 개발자에게 정확한 모션 가이드를 전달해야 하는 어려움이 있었습니다. LottieFiles의 미리보기 Frame Rate를 기준으로 개발자에게 가이드를 전달할 수 있어 더 정확한 모션 가이드 전달이 가능했고 결과적으로 만족스러운 결과물을 얻을 수 있었습니다. 더불어 Lottie 파일포맷이 가진 장점인 매우 섬세한 디테일까지 표현 가능한 높은 퀄리티의 애니메이션은 래키의 모션 플로우가 매우 부드러운 움직임을 표현하는 데 큰 도움이 되었습니다.
정보를 함축적으로 담아 보여주기
애니메이션은 제한된 공간의 모바일 환경에서 사용자의 시선을 사로잡는 데 효과적입니다. OK캐쉬백의 메인 화면을 개편하며 하단 탭 바로 내비게이션 구조를 개편했습니다. 내 포인트 정보와 다양한 기능을 담은 MY 탭을 새롭게 만들었는데, 이 기능을 어떻게 하면 사용자에게 직관적이면서도 효과적으로 알릴 수 있을지 고민하였습니다. MY 페이지 내의 다양한 기능을 시각화하여 아이콘으로 제작한 후 애니메이션을 활용하여 순차적으로 노출함으로써 사용자의 시선을 끌고 동시에 서비스 아이덴티티를 강조하였습니다.
개편의 결과는 매우 성공적이었습니다. 개편 이후 일 방문율이 62% 증가하였고, 이는 서비스 기능과 맥락을 고려한 UX와 적절한 애니메이션의 활용 덕분이었습니다. Lottie는 다른 동영상 파일과 비교하여 빠르고 가볍게 작업이 가능하며, 개발자들도 선호하는 파일 포맷으로 늘 만족스러운 산출물을 만들어 낼 수 있습니다.
마무리글
리워드를 받는 순간 작은 성취감이 들지 않았나요? 상황과 맥락에 맞는 적절한 애니메이션은 우리 서비스를 한층 더 풍부하게 만들어주며 사용자의 집중력과 몰입감을 향상 시켜줍니다. Lottie를 통해 OK캐쉬백은 서비스에 새로운 활력을 불어넣어 주었으며, 고객에게 우리의 브랜드 가치를 효과적으로 전달할 수 있었습니다. 앞으로도 OK캐쉬백은 LottieFiles와 새로운 도전을 끊임없이 이어 나가도록 하겠습니다.
