토스의 이모지 폰트, 토스페이스 제작기

토스는 왜 이모지 폰트를 만들었을까?

토스페이스는 토스의 그래픽 스타일로 디자인한 이모지 폰트입니다. 이모지 폰트는 문자가 아닌 그림 🖼️ 으로 이루어진 독특한 폰트예요. 하나의 유니코드마다 사회적으로 약속된 의미를 표현하고, ttf 형식으로 키보드에서 한 자씩 찍어 사용한다는 점에서 폰트의 형식과 동일하다고 할 수 있습니다. 주로 구글이나 애플같은 세계적인 IT 기업에서 각자의 OS 키보드에 내장하기 위해서 만들고 있죠. 그런 이모지 폰트를 왜 금융 🪙 브랜드인 토스에서 만들게 되었을까요?

일관된 시각 경험을 만들기 위해

가장 중요한 이유는 토스 앱에서의 일관된 시각 경험을 위해서예요. 당시 토스 앱에서는 어려운 금융 맥락을 최대한 쉽고 캐주얼하게 보여주기 위해서 제품에 이모지를 자주 활용하고 있었어요. 그런데 모바일 기기의 OS마다 이모지의 보여지는 모습이 다르답니다. iOS에서는 애플 이모지, 안드로이드에서는 삼성 혹은 구글 이모지가 보이기 때문에 디자인의 차이가 생기는 거예요.

🎉 폭죽 이모지를 예시로 들어볼게요. 왼쪽은 애플, 오른쪽은 삼성 이모지인데 똑같은 폭죽 이모지가 OS에 따라 다른 모양으로 보인답니다. 사용자가 어떤 OS를 사용하든 토스 앱 안에서는 같은 시각적 일관성을 경험할 수 있어야 하는데 그렇지 못했어요. 게다가 토스의 UI는 심플한 디자인을 지향하는 반면, OS 이모지는 비교적 설명적이고 볼륨감있는 모습이다보니 이에 따른 이질감도 컸어요.

그 밖에 사용자가 OS 업데이트를 자주 하지 않으면 최신 이모지들은 아예 출력이 안 되거나 ❎ 로 뜨는 현상도 발생했어요. 이런 현상은 기기의 업데이트 여부로 발생하는 문제다보니 저희가 직접 해결할 수 있는 부분이 없었죠. 이 것 때문에 폰트가 아닌 이미지로 사용하자니 OS 이모지의 저작권을 침해하는 행위가 되기 때문에 이 역시 근본적인 해결책이 될 수 없었어요.

위와 같은 여러가지 문제를 원천적으로 해결하는 단 하나의 방법은 토스 스타일의 이모지 폰트를 만들어 모든 OS 공통으로 사용한다 였어요. 이 방법이라면 토스 앱 안에서 이모지를 포함한 모든 그래픽 요소를 시각적으로 일관된 경험을 줄 수 있고, 폰트 파일의 업데이트와 적용을 우리 스스로 할 수 있으며 저작권 문제도 없을테니까요. 그렇게 토스에서 3600개 이모지를 만드는 프로젝트를 시작하게 됐어요.

3600개 이모지 제작 프로세스

이모지 스타일 결정하기

하나의 이모지 폰트는 약 3600개의 글립으로 이루어져 있어요. 작업을 시작하기에 앞서 모든 이모지가 하나의 톤으로 보일 수 있도록 전체를 관통하는 기준을 정해야 했어요. 그래야 앞으로 하나 하나 그려나갈 방향을 결정할 수 있기 때문이었죠.

저희는 그 톤에 대한 해답을 이미 우리가 가지고 있는 그래픽 자산에서 찾았어요. 토스 앱 전체에서 그래픽의 90% 이상은 아이콘이 차지하는데요, 토스 아이콘은 기본 도형을 바탕으로 가장 단순한 형태의 솔리드 타입으로 제작돼요. 보통 문자처럼 작게 사용하고, 문자의 직관성을 보조하며, 토스 UI 화면에 조화로운 컬러나 형태로 만든다는 점에서 이모지와 유사한 사용성을 가집니다. 토스의 아이콘 톤을 그대로 계승하면서 3600개의 새로운 메타포가 추가된다면, 강력한 시각적 통일성을 가진 방대한 그래픽 자산이 완성될 수 있겠다는 생각이 들었어요.

그렇게 기본 도형과 최소한의 묘사를 사용해서 약 100여 개의 Smileys 이모지부터 만들어 나갔어요. 기본 얼굴에서 눈의 크기, 간격, 모서리 라운드, 얼굴 여백의 정도를 변형해가며 어떤 인상이 가장 단순하면서도 호감형인지, 또 제품에 잘 어울리는지 얹어보고 결정한 뒤 같은 방향으로 이어나갔습니다.

모듈 구조로 효율적으로 제작하기

3600개 이모지의 50%를 차지하는 가장 큰 요소는 인물 이모지예요. 인물 이모지의 대부분은 기본이 되는 하나의 얼굴에서 성별, 피부색, 머리카락 등에 변화를 주는 형태로 이루어져 있었어요. 따라서 기본형 얼굴을 먼저 만들고, 다른 요소를 추가하거나 변형하는 형식으로 만든다면 매 번 처음부터 만드는 것보다 훨씬 효율적으로 제작할 수 있겠다는 판단이 되었죠.

얼굴뿐 아니라 몸통이 있는 상반신과 전신 이모지도 같은 방식으로 제작했어요. 기본형 상반신과 전신을 하나씩 만들고 여러 가지 옷과 아이템을 조립해서 전체 인물 이모지를 완성해 나갔어요. 이 모듈 방식은 효율적인 작업을 위해서 선택한 방법이지만, 전체 이모지의 통일성을 지키는 데에도 도움이 되었습니다.

시각적 통일성 만들기

토스페이스는 폰트이므로 시각적 통일성이 매우 중요해요. 그리고 형태적으로 그 노력이 가장 많이 반영된 곳은 바로 ✋ 손 이모지예요.

하나의 이모지 폰트에 약 200개의 손 동작이 있는데, 이 모든 동작이 마치 하나의 손으로부터 만들어진 것처럼 보여야 통일성이 지켜질 수 있겠다고 생각했어요. 손은 형태가 조금만 틀려도 어색해보이기 쉬운 사물이에요. 먼저 손의 형태를 기본 도형만 가지고 그려서 가장 단순하면서도 완성도 높은 형태를 만들어보려고 했어요. 손바닥과 손가락뿐 아니라 접히는 부분과 그림자까지도요. 그리고 나서 나머지 동작들도 손가락과 손바닥의 비율, 두께, 그리고 전체 볼륨과 위치를 계속해서 눈으로 👀 맞춰가며 디자인을 완성해 나갔어요.

또, 통일성을 위해 신경쓴 부분 중 하나는 이모지가 바라보는 방향이에요. 애플 이모지를 보면 이모지의 시선 방향이 어떤 것은 왼쪽, 어떤 것은 오른쪽으로 되어 있는데 토스페이스는 방향이 있는 이모지는 전부 왼쪽에서 ➡️ 오른쪽을 바라보도록 통일했어요. 그래서 글씨와 이모지가 함께 쓰여 있을 때도 시선이 좌우로 끊기지 않고 한 방향으로 이어지도록 만든 거죠.

방향을 맞춘 것처럼 각도도 통일했어요. 각도가 있는 사물은 모두 오른쪽 45도 📐 각도를 맞춰서 기울였죠.

또, 음식 🥘 과 같이 내용물을 보여주기 위해 입체적인 표현이 필요한 이모지도 있는데요, 이 경우에도 모두 동일한 높이에서 바라본 모습으로 제작해서 일관성을 주었어요.

토스페이스의 모든 이모지는 하나의 컬러 팔레트만 사용해서 만들었는데, 이 컬러팔레트는 흰 배경 ⬜️, 검은 배경 ⬛️ 둘 다 잘 보일 수 있도록 제작되어 디지털 📱 환경에서의 사용성을 최대한으로 높였어요.

이렇게 완성된 토스페이스는 지금 보시는 이 페이지에 적용되어 있어요. 🥳 토스 앱과 홈페이지에서도 직접 써 보실 수 있습니다.

폰트에서 그래픽 유니버스로

토스페이스의 탄생으로 토스 앱 안에서의 이모지는 어떤 OS든 토스페이스로 보이기 때문에 시각적 일관성을 지킬 수 있을뿐 아니라, OS 이모지의 저작권 문제나 기기 업데이트 여부에 따른 오류 🐛 도 없어졌어요. 이에 더불어, 3600개라는 방대한 양의 그래픽 메타포들이 탄생했어요. 이제 토스에서 어떤 종류의 그래픽을 만들더라도 맨 땅부터 시작하지 않을 수 있게 된 거예요. 즉 토스페이스는 토스 그래픽 디자인의 원석 💎 이라고 할 수 있어요.

토스페이스는 3D 그래픽으로도 적극적으로 활용되고 있어요. 이모지 폰트인 토스페이스는 디지털 환경에서 작게 사용하는 걸 기준으로 만들었는데, 3D로 만들게 되면 볼륨감과 재질 표현이 가능하기 때문에 핵심적인 화면에 비주얼 임팩트 💫 를 더해줄 수 있어요.

토스뱅크 모임통장이 좋은 예시일 것 같아요. 모임통장은 하나의 계좌를 여러 개의 카드로 여러 명이 공유하는 통장인데요, 이 서비스의 키 비주얼을 3D로 여러 이모지가 모여있는 비주얼로 제작해서 토스 앱, 보도자료, 각종 SNS에 홍보용 그래픽으로 사용했어요. 아래 키 비주얼 제작에는 하루도 걸리지 않았는데, 3D 비주얼을 이렇게 빠르게 만들 수 있는 건 이미 디자인이 완성되어있어 가능했어요. 3D로 만들 때 가장 시간이 오래 걸리는 부분이 형태(모델링)인데 형태에 대한 고민이 폰트화 과정에서 이미 끝났기 때문이에요.

토스페이스 티저 홈페이지에서도 아래 3D 애니메이션을 키 비주얼로 활용했는데, 카메라와 빛의 움직임까지 더해진 비주얼 임팩트 덕분에 예상보다 훨씬 더 많은 관심과 기대감을 불러일으킬 수 있었어요.

처음에는 여러 문제를 해결하기 위한 수단으로 토스페이스를 만들었지만, 이제 폰트를 넘어 토스 그래픽 유니버스 🪐 의 기준으로 자리잡았어요. 그리고 여기에 디자이너들의 상상력 🧚 이 더해지면서, 그 영향력이 무한대로 확장되고 있다는 생각이 들어요.

앞으로의 토스페이스

토스페이스는 오픈소스로 공개되어 있고, 이 글을 보시는 여러분도 무료로 다운받아서 쓸 수 있어요. Github에서 ttf 와 svg 파일로 제공되고 있고, 사용자의 의견을 받아 계속해서 업데이트해나가고 있어요.

이 폰트 파일의 사용자 개인 영역(PUA)에는 저희의 가치관이 담긴 이모지가 몇 가지 추가되어 있어요. 토스는 🇰🇷 한국을 기반으로 하는 앱이기 때문에 소주, 김밥, 붕어빵처럼 한국인에게 정말 친숙한 사물들을 추가해서 우리가 필요할 때 사용할 수 있도록 넣어두었어요. 뿐만 아니라 드론이나 클라우드와 같이, 과거에는 없었던 개념이지만 지금부터 앞으로 범용적으로 사용될 사물이나 개념들도 추가해 두었어요. 토스의 미래지향적 가치관이 담긴 이모지라고 할 수 있어요.

저희는 토스라는 브랜드의 시각 경험을 위해서 토스 스타일의 이모지 폰트를 만들었어요. 보통 특정 브랜드를 위한 폰트는 이 측면에서 제작하고 저희도 이미 그 목적은 달성했다고 생각해요. 하지만 더 나아가 오픈 소스로 공개함으로서 좋은 디자인을 더 많은 사람들이 쓸 수 있게 하고, 더 나은 디자인 생태계 🌏 를 만드는 노력으로 이어나가려고 해요. 앞으로 더 많은 사용자들의 피드백을 통해 발전해 나갈 토스페이스를 기대해 주세요! 🚀