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