고현선님의 아티클 더 보기
토스가 금융을 즐겁고 쉬운 경험으로 만드는 법
Lottie를 활용해 효과적인 애니메이션 만들기
토스는 한국의 모바일 금융 플랫폼입니다. 은행, 증권, 보험 등 다양한 금융 생활을 하나의 앱에서 쉽고 편리하게 경험하도록 돕고 있어요. 금융은 게임이나 영화처럼 즐거움과 감동을 주는 분야는 아닙니다. 오히려 복잡한 숫자와 그래프가 난무하는 조용한 전쟁터에 가깝죠. 그래서 토스 그래픽 디자인 팀은 어렵고 딱딱하게 느껴지는 금융을 그래픽을 통해 쉽고 즐거운 여정으로 만듭니다. 생명력을 지닌 애니메이션으로 사용자가 글을 읽지 않아도 이해할 수 있게 만들고, 무거운 분위기를 환기하거나 행복감을 느끼게 하는 것처럼 말이에요.
1. 100마디 말보다 1번의 움직임으로 표현하기
토스는 앱을 중심으로 하는 제품입니다. 많은 정보를 작은 모바일 화면에서 전달하고 있어요. 때문에 그래픽 디자이너는 이 작은 영역에서 전달하고자 하는 핵심만 뽑아 표현해야 합니다. 이때 애니메이션이 큰 힘을 발휘하는데요. 움직임을 더한 그래픽은 글을 읽지 않아도 내용을 이해할 수 있을 만큼 직관적이에요. 덕분에 빠르고 효과적인 커뮤니케이션을 할 수 있죠.
[이미지 1]은 왼쪽부터 ‘계정 잠금’ ‘사기 계좌 안내’ ‘배송 중’을 나타내는 애니메이션인데요, 한국어를 읽을 수 없는 사람이라도 대략 어떤 이야기를 하는지 빠르게 이해할 수 있어요.
‘로딩’과 ‘완료’를 표현할 때도 애니메이션이 효과적이에요. 토스에는 송금이나 결제, 조회 등 사용자가 필연적으로 기다려야 하는 상황이 발생해요. 원을 그리며 돌아가는 여러 사람의 얼굴과 로딩이 종료된 후 나오는 체크 애니메이션을 활용해 매우 직관적으로 표현합니다. 애니메이션을 보면서 기다리는 과정을 지루하지 않게 만들어주는 것은 덤이고요.
[이미지 3]은 토스페이스(Tossface)라 불리는 토스 이모지 폰트를 소개할 때 활용한 애니메이션인데요. 실제 동물의 크기는 모두 다르지만, 이모지는 ‘Typeface’기 때문에 실제 크기와 상관없이 모두 균일한 크기로 만들었어요. 그리고 이 설명을 모든 동물의 크기가 하나로 정렬되는 3초 가량의 애니메이션으로 요약해 전달했죠. 그밖에 기본 도형을 이용해 디자인하거나 퍼스펙티브를 동일하게 맞추는 표현 등도 애니메이션 하나로 충분히 설명할 수 있었습니다.
2. 분위기를 가볍게 만들기
애니메이션은 정보 전달력도 높지만, 감정을 전달할 때 더욱 효과적이에요. 토스는 신용점수가 오르거나 월급날, 생일 등 사용자가 행복감을 느끼는 순간에 폭죽이 터지는 애니메이션으로 열렬히 축하해요. 이런 Confetti 애니메이션은 ‘해피 모먼트’를 극적으로 만들어주는 가장 효과적인 장치입니다.
즐거운 것은 공유할 때 배가 되죠. 토스에는 채팅 공간이 있어 움직이는 이모지를 친구에게 보낼 수 있어요. 행복하거나 슬픈 감정을 표현할 수도 있고, 돈이 날아가는 이모지를 통해 플렉스한 상황을 표현할 수도 있어요. 움직이는 작은 이모티콘에 감정 한 스푼씩 담겨 있어, 사용자끼리 훨씬 풍성하고 재미있는 대화가 가능해요.
반면, 어쩔 수 없이 불편한 이야기를 하게 될 때도 있어요. 네트워크 연결이 끊어졌거나 길고 어려운 약관을 구구절절 설명해야 하는 경우처럼 말이죠. 이럴 때는 역으로 귀엽고 가벼운 애니메이션을 통해 사용자가 너무 무겁게 생각하지 않도록 유도합니다. 오로지 애니메이션만이 할 수 있는 커뮤니케이션 방식이죠.
3. 풍성한 3D 애니메이션으로 표현 극대화하기
토스는 앱에서 3D 이미지나 애니메이션도 빈번히 사용해요. 3D 이미지 몇 컷과 Lottie를 이용해 아래와 같은 3D 애니메이션을 만듭니다. 사용자가 이자 받을 때 재생되는 애니메이션인데요, 동전이 돌아가는 부분 몇 컷만 PNG 시퀀스 이미지를 포함해 Lottie로 출력했어요. Full 3D 애니메이션보다 효율적이면서도 눈으로 봤을 때 퍼포먼스의 차이도 크게 드러나지 않죠.
비슷한 방식으로 1~2장의 3D 이미지를 겹쳐 움직이는 효과를 만들기도 해요. [이미지 12]처럼 날개 달린 돈은 날개를 펼친 이미지 1장과 접은 이미지 1장을 교차로 보여주면서, 날개가 파닥거리는 듯한 효과를 만들었어요. 저용량에 투명한 배경 효과가 가능한 Lottie 의 장점을 바탕으로 더욱 풍성한 3D 애니메이션을 제작할 수 있었죠.
4. 금융 서비스와 Lottie가 만나면
토스는 애니메이션을 통해 지표적 성장을 이뤘고, 단순 금융 플랫폼을 넘어 디자인 잘 하는 기업으로 브랜딩할 수 있었습니다. 이런 눈부신 발전에 Lottie가 큰 힘이 됐습니다. 지난 몇 년간 수많은 모션 툴과 포맷을 활용했지만 Lottie 만큼 앱 그래픽에 최적화된 툴은 없습니다. 무궁무진한 상상력을 펼쳐나가는 토스의 여정에 함께해 주셔서 감사합니다.
[로티파일즈 더 알아보기]
▶국문 랜딩 페이지 바로가기
▶로티 블로그 바로가기
로티파일즈의 업데이트 소식과 인터뷰, 로티 애니메이션 케이스 스터디, 영감, 팁 그리고 튜토리얼 등 다양한 소식을 놓치지 마세요.
▶로티 튜토리얼 바로가기
로티 소개 영상, 기본 툴 사용 영상을 만나보세요. 앞으로 Lottie/LottieFiles 관련 유저들이 제작하는 콘텐츠도 기대해주세요.
