모션, 금융을 즐겁고 쉬운 경험으로 만드는 방법

토스는 한국의 모바일 금융 플랫폼입니다. 은행, 증권, 보험 등 다양한 금융 생활을 하나의 앱에서 쉽고 편리하게 경험할 수 있도록 돕고 있어요.

금융은 게임이나 영화처럼, 즐거움과 감동을 불러일으키는 종류는 아닙니다. 오히려 복잡한 숫자와 그래프가 난무하는 조용한 전쟁터에 가깝죠. 토스의 그래픽 디자인 팀은 어렵고 딱딱하게 느껴지는 금융을 그래픽을 통해 쉽고 즐거운 여정으로 만들어가고 있습니다. 생명력을 가진 애니메이션으로 사용자가 글을 읽지 않아도 이해할 수 있게 만들고, 무거운 분위기를 환기하거나 행복감을 느끼게 하는 것처럼 말이에요.

1. 100마디 말보다 1번의 움직임으로 표현하기

토스는 앱을 중심으로 하는 제품입니다. 아주 많은 정보가 작은 모바일 화면을 통해 전달되어야 하죠. 그래픽 디자이너는 이 작은 영역에서 전달하고자 하는 핵심을 요약해 표현해야 합니다. 이때 애니메이션이 큰 힘을 발휘하는데요. 움직임을 더한 그래픽은 글을 읽지 않아도 내용을 이해할 수 있을 만큼 직관적이에요. 덕분에 빠르고 효과적인 커뮤니케이션을 할 수 있어요.

아래 예시는 왼쪽부터 “계정 잠금”, “사기 계좌 안내”, “배송 중” 을 나타내는 애니메이션인데요, 한국어를 읽을 수 없는 사람이라도 대략 어떤 이야기를 하는지 빠르게 이해할 수 있어요.

로딩과 완료를 표현할 때도 애니메이션은 효과적이예요. 토스에는 송금이나 결제, 조회 등 사용자가 필연적으로 기다려야 하는 상황이 발생하는데요. 원을 그리며 돌아가는 여러 사람의 얼굴과, 로딩이 종료된 이후 나오는 체크 애니메이션으로 매우 직관적으로 표현할 수 있죠. 애니메이션을 보면서 기다리는 과정을 지루하지 않게 만들어주는 것은 덤이고요.

아래 예시는 ‘Tossface’라고 하는 토스의 이모지 폰트를 소개할 때 활용한 애니메이션인데요. 실제 동물들은 고유한 크기가 모두 다르지만, 이모지는 ‘Typeface’이기 때문에 실제 크기와 상관없이 모두 균일한 크기로 만들었어요. 그리고 이 설명을 모든 동물의 크기가 하나로 정렬되는 애니메이션 하나로 요약해서 전달했어요. 그밖에 기본도형을 이용해 디자인하거나, 퍼스펙티브를 동일하게 맞추는 표현 등도 애니메이션 하나로 충분히 설명할 수 있었죠.

2. 분위기를 가볍게 만들기

애니메이션은 정보 전달력도 높지만, 감정을 전달할 때 가장 효과적이에요. 신용점수가 오르거나 월급날, 생일 등 사용자가 행복감을 느끼는 순간에 토스는 폭죽이 터지는 애니메이션으로 열렬히 축하해줘요. 이런 Confetti 애니메이션은 ‘해피 모먼트’를 극적으로 만들어주는 가장 효과적인 장치예요.

즐거운 것은 공유할 때 배가 되죠. 토스에는 채팅 공간이 있어서 움직이는 이모지를 친구에게 보낼 수 있어요. 행복하거나 슬픈 감정을 표현할 수도 있고, 돈이 날아가는 이모지를 통해 쇼핑으로 플렉스한 상황을 표현할 수도 있어요. 작은 움직이는 이모티콘에 감정 한 스푼씩 담아 훨씬 풍성하고 재미있는 대화가 가능해졌어요.

반면에, 어쩔 수 없이 불편한 이야기를 하게 될 때도 있어요. 네트워크 연결이 끊어졌다거나, 길고 어려운 약관을 구구절절 설명해야 하는 것처럼 말이에요. 이럴 때는 역으로 귀엽고 가벼운 애니메이션을 통해서 사용자가 너무 무겁게 생각하지 않도록 유도해요. 오로지 애니메이션을 통해서만 가능한 커뮤니케이션 방식이에요.

3. 적은 리소스로 큰 임팩트 내기

토스는 앱에서 3D 이미지나 애니메이션도 빈번히 사용해요. 저희는 3D 이미지 몇 컷과 Lottie를 이용해서 아래와 같은 3D 애니메이션을 만들어요. 이자를 받을 때 재생되는 애니메이션인데, 동전이 돌아가는 부분 몇 장만 PNG 시퀀스 이미지를 포함해서 Lottie로 출력했어요. Full 3D 애니메이션보다 효율적이면서도 눈으로 봤을 때 퍼포먼스의 차이는 크게 드러나지 않죠.

비슷한 방식으로 1~2장의 3D 이미지를 겹쳐 움직이는 효과를 만들기도 해요. 아래 예시에서 날개 달린 돈의 경우 날개를 펼친 이미지 1장과 접은 이미지 1장을 겹쳐 교차로 보여주면서, 날개가 파닥거리는 듯한 효과를 만들었어요. Lottie가 가진 가벼운 용량과 투명한 배경이 가능하다는 장점을 그대로 가져가면서 더욱 풍성한 3D 애니메이션을 만들어 낸 거예요.

4. 풍성한 3D 애니메이션으로 효과 극대화하기

토스는 웹사이트나 유튜브, SNS 등의 채널에서도 다양한 브랜드 활동을 펼치고 있습니다. 이런 채널은 앱과 달리 용량이나 포멧의 제약이 거의 없기 때문에 그래픽 퍼포먼스를 최대한으로 끌어올릴 수 있죠. 토스에서는 이럴 때 3D 애니메이션을 주로 활용해요. 2D에 비하면 제작 난이도도 높고 물리적 리소스도 많이 들지만, 3D 애니메이션만이 가진 볼륨감이나 공간감에서 오는 효과는 분명하거든요.

아래는 올해 초에 공개된 토스페이스 티저 영상이예요. 토스페이스는 대중에게 무료로 공개된 토스의 이모지 폰트인데, 폰트 파일이라는 실질적인 밸류를 공개하기 전부터 영상만으로 많은 사람들의 기대를 한 몸에 받았어요.

각종 컨퍼런스의 홈페이지에서도 3D 애니메이션이 큰 역할을 합니다. 시선을 사로잡는 멋진 3D 이미지와 애니메이션은 사용자들이 컨퍼런스를 쉽고 오래 기억할 수 있도록 만들어줘요.

2022년 개발자 컨퍼런스 〈Slash22〉 

2021년 디자인 컨퍼런스 〈Simplicity 21〉 

토스 앱 안에서도 강력한 임팩트가 필요할 때는 3D 애니메이션이 사용됩니다. 작년, 토스 앱의 얼굴이라고 할 수 있는 홈 화면이 크게 개편되면서 개편된 내용을 사용자에게 알려야 할 필요가 있었어요. 바뀐 부분을 이미지로 비교해서 보여줄 수도 있었지만, 모션 그래픽이 가진 영상문법, 특히 트랜지션 포인트를 적용해서 UI의 변화를 효과적으로 설명해 주었어요.

5. 만질 수 있는 3D 인터랙티브 애니메이션

지금까지 보여드린 것들은 저희가 제작한 모션 그래픽을 사용자에게 일방적으로 보여주는 방식이예요. 그런데 더 나아가서, 사용자가 움직임의 주체가 될 수 있다면 참여하는 재미까지 더할 수 있겠다는 생각이 들었어요. 사용자의 움직임에 반응하는 그래픽, 즉 3D 인터랙티브 그래픽입니다.

토스뱅크카드의 카드 발급 플로우는 이 3D 인터랙티브 그래픽을 적용하기 가장 좋은 영역이었어요. 토스뱅크카드는 앞, 뒷면이 각각 다른 색상으로 만들어졌는데, 사용자가 카드 3D 모델을 직접 돌려보면서 색상을 볼 수 있게 했어요. 실제 카드를 만지는 것과 거의 흡사한 경험을 앱 안에서 만들어주었죠.

토스페이스 홈페이지에서도 3D 인터랙티브 그래픽을 체험해 보실 수 있어요. 토스페이스는 이모지 폰트인 동시에 토스 그래픽 유니버스의 기초가 되는 요소인데, 이 거대한 세계관과 리소스의 방대함을 느끼게 하고 싶었어요. 그래서 넓은 우주공간에서 3D 이모지를 직접 돌려보고 구경할 수 있는 체험 페이지를 만들었어요. 마우스 오버하거나 이모지를 클릭하면 각각의 이모지의 움직임도 볼 수 있게 했고요.

지금까지 토스가 모션 그래픽을 사용하는 다섯 가지 이유와 그 사례들을 알려드렸어요. 모션 그래픽은 단순히 지표적인 성장과 금융 경험을 보조하는 수단을 넘어, 토스가 디자인에 진심인 브랜드로 거듭나도록 만들어 줬어요. 앞으로도 저희 그래픽 디자인 팀이 토스의 브랜드 경험을 쉽고 즐겁게 만들어나가는 과정을 지켜봐 주세요.

– 이 글은 로띠 쇼케이스에도 업로드되었습니다.