G마켓은 대한민국을 대표하는 온라인 쇼핑 플랫폼입니다. 2019년, 밝고 활력 넘치는 이미지로 리브랜딩을 통해 완전히 새롭게 변신했어요. 20년 넘게 고객의 사랑을 받아온 만큼, 더 친근하게 다가가고자 했어요. 점과 선, 그리고 연결의 의미를 담은 이 브랜딩을 모션에도 동일하게 적용했습니다. G마켓 디자이너는 모션을 일반적인 상호작용의 피드백을 넘어 구매와 혜택에 초점을 맞춰주는 매개체로써 활용하고 있어요. 커머스 특성상 긴 대기시간을 고려한 애니메이션과 많은 고객을 웃음 짓게 만드는 귀여운 대표 캐릭터 스마일리의 탄생도 Lottie가 있었기에 가능했죠!

생동감 넘치는 애니메이션을 활용해 어떻게 하면 고객들에게 혜택을 즐겁게 전달할 수 있을지 열심히 고민한 G마켓의 스토리를 지금부터 들려드릴게요.

Lottie를 도입하게된 계기

Lottie를 도입하기 전에는 디자이너가 많은 노력을 들여 이동 속도 및 초단위의 모션가이드를 제작하거나 svg animation, css animation, gif 등의 다양한 포맷을 사용했어요. 구현의 어려움과 파일 크기 등의 제약 사항이 많아서 원하는 모션을 표현하기에 다소 어려움이 있었어요.

2017년 Lottie 라이브러리를 처음 접했을 때, 우리에게 큰 도움이 될 거라고 생각했어요. 그 당시 디자이너와 개발자로 구성된 사내 인터랙션 스터디를 진행해 작은 테스트들을 먼저 시도했고, 프로젝트화하여 개발 환경 및 안정화 검토 후 Lottie 애니메이션을 도입하기 시작했습니다!

당시 디자이너와 개발자로 구성된 사내 인터랙션 스터디를 진행하면서 먼저 간단한 테스트를 시도한 후, 이를 프로젝트화하여 개발 환경과 안정성을 검토한 뒤 Lottie 애니메이션을 도입하기 시작했습니다.

이 옥션 가정의달 로고플레이가 Lottie를 처음 서비스에 적용한 애니메이션의 시작이었어요. Lottie의 가볍고 유연한 파일 형식 덕분에 다양한 디바이스에서 원활하게 애니메이션을 구현할 수 있었고, 이를 통해 더 재미있고 몰입감 있는 쇼핑 경험을 제공할 수 있는 환경이 만들어졌어요.

Lottie로 재정비된 브랜드 아이덴티티

G마켓 앱의 전반적인 디자인 리뉴얼이 2021년 있었습니다. 새롭게 정의된 그래픽 에셋에 맞춰 모션디자인도 통일성있게 제작되었습니다. 브랜드의 본질적인 가치인 Connection(연결)을 중심으로 Center(중심), Forward(나아가는), Variety(다양함)을 점, 선, 면으로 표현한 브랜드 아이덴티티가 정립되었어요. 모션에도 이러한 브랜드 아이덴티티를 담아서 표현했어요.

모션 디자인의 주 기능은 글과 이미지만으로는 빠르게 정보를 얻기 힘들 때 모션을 통해 고객들의 이해를 돕는거죠.저희는 여기서 한 가지를 더 고려했어요. 바로 위트를 한 스푼 더해 고객과 더 가까워지고 싶었어요. 길고 지루한 대기시간을 조금이나마 즐겁게 만들거나 표정을 통해 에러 상황에 미안함을 표현했어요.

앱을 켜면 바로 보이는 검색창부터 정보가 없는 빈 페이지, 주문/결제를 위해 대기하는 화면까지 애니메이션을 통해 일관성 있고 시각적 재미를 함께 전달하고자 했어요.

프로모션, 이젠 Lottie로 생동감 넘치게!

대한민국 대표 쇼핑 축제하면 어떤 게 떠오르시나요? 맞아요, 바로 빅스마일데이죠! 5월과 11월은 1년 중 G마켓 디자이너들이 가장 바쁘게 움직이는 달이에요. G마켓의 귀여운 캐릭터 스마일리와 화면을 가득 채우는 보랏빛 브랜딩의 조합은 빅스마일데이라는 이름과 함께 고객의 머릿속에 강하게 자리 잡고 있답니다.

그런데, 빅스마일데이에서 크게 활약하고 있는 스마일리가 사실은 다른 서비스를 위해 처음 탄생했다는 사실, 알고 계셨나요? 스마일리의 시초는 멤버십 회원들의 캐시 적립 서비스인 스마일 스탬프였어요. 기존의 스마일 심볼을 단순히 변형하는 것을 넘어 2D 캐릭터로 만들어서 다양한 표정과 행동을 추가해 더욱 친근하고 귀여운 캐릭터로 거듭났죠.

여기서 중요한 역할을 한 것이 바로 Lottie였어요. 가벼운 용량으로 서비스 적용에 부담이 적은 덕분에 풍부한 행동 모션을 가진 스마일리를 선보이며 멤버십 고객들의 재방문률과 로열티를 높일 수 있었어요.

이렇게 2D로 시작한 스마일리는 빅스마일데이를 준비하면서 한 단계 업그레이드되어 3D 캐릭터로 발전하게 되었습니다. 야심차게 준비한 만큼 모션이 정말 중요했는데, 시작도 전에 한 가지 난관에 봉착했어요. 벡터 애니메이션에 최적화되어 있는 Lottie로 3D 이미지를 렌더링 된 그대로 구현하기엔 한계가 있었거든요. 그래서 저희는 이미지 하나에서 눈, 코, 입, 팔, 다리 같은 파츠를 분리해서 각각을 움직이기로 했습니다. 마치 라이브 애니메이션처럼요. 이 작업 방식을 통해 용량을 최소화하면서도 생동감 있는 Lottie 애니메이션을 구현할 수 있게 됐습니다.

E-commerce : 작은 애니메이션, 큰 차이

온라인 쇼핑 플랫폼에서의 애니메이션은 사용자 경험을 향상시키고 브랜드 아이덴티티를 강화하는 중요한 요소입니다. 특히 Lottie와 같은 기술은 디자이너들에게 고품질 애니메이션을 자유롭게 구현할 수 있게 해주죠. 장바구니에 상품을 담거나 결제를 완료했을 때 꽃가루를 뿌리는 작은 애니메이션은 긍정적인 경험을 전달하고 유대감을 강화해줍니다.

이러한 즐거운 쇼핑 여정이 될 수 있도록 끊임없이 발전하는 LottieFiles 서비스에 감사한 마음을 표하며, 앞으로도 애니메이션으로 자연스럽게 소통하며 점점 더 친근하고 편리한 서비스로 거듭날 G마켓의 도전도 기대해 주세요!