토스페이스 제작기

이모지는 폰트일까?

‘토스페이스(Tossface)’는 그림 문자인 이모지 폰트입니다. “이모지가 폰트였어요?”하는 분들이 계실 수 있겠네요. 보시다시피 문자가 아닌 그림이니까요. 우선 이모지가 폰트인지 살펴보죠.

일반적인 텍스트 폰트와 비교해 볼게요. 같은 A라도 폰트에 따라 조금씩 생김새가 다르죠. 하지만 모두 유니코드 블록 U+0410 안에서 대문자 A를 표현하고 있어요. 이는 사회적으로 합의된 규칙이라고 할 수 있어요.

이모지를 볼까요? 이모지도 같습니다. 사용하는 OS에 따라 노란 바탕의 웃는 얼굴 😀은 조금씩 다르겠지만 유니코드 블록 U+1F600 안에서 ‘웃는 얼굴’을 표현해요. 모두 TTF(True Type Font) 포맷이라서 키보드로 한 개씩 입력할 수 있고 자간과 행간을 조절할 수 있어요. 폰트의 구성과 완전히 같다고 할 수 있겠죠?

이모지는 구조뿐 아니라 사회적으로도 그림이 아닌 언어로 볼 수 있어요. SNS에서 이모지는 1년 동안 전 세계적으로 60억 건 이상 쓰였어요. 여타 그림 문자와는 다르게 세계적으로 대중화되어 있다고 볼 수 있죠. 2015년, 옥스포드 사전은 ‘기쁨의 눈물을 흘리는 이모지’를 올해의 단어로 선정하기도 했어요. 이제 이모지는 단순히 언어를 보조하는 수준을 넘어 글자 그 자체로 인식되고 있답니다.

일관된 시각 경험을 토스에서 만들 수 있을까?

토스는 금융 플랫폼이에요. 이모지는 보통 애플이나 삼성 같은 IT 대기업에서 만들죠. 그럼 왜 금융회사에서 이모지 폰트를 만든 걸까요?

그래픽 디자이너가 인지한 문제

• OS별로 다른 생김새
• UI와 맞지 않는 디자인
• 저작권 문제
• 표시되지 않는 이모지 등

저희가 이모지 폰트를 만들게 된 계기는 너무나 단순하고 사소했어요. 토스는 앱 서비스라서 은행, 증권, 대출, 보험 등 모든 금융 활동을 작은 모바일 화면에서 제공해요. 그런데 금융, 솔직히 어렵고 딱딱하잖아요. 하지만 이모지를 하나만 넣으면 같은 화면인데도 훨씬 캐주얼하고 편안하게 보이는 효과가 있어요. 그러다 보니 토스 디자이너들은 화면을 구성할 때 이모지를 자주 사용하게 됐어요.

폰트마다 인상이 다른 것처럼 이모지 폰트에도 각자만의 인상이 있어요. 아래 그림의 왼쪽은 애플, 오른쪽은 삼성의 폭죽 이모지예요. 자세히 보면 조금 다르게 생기지 않았나요? 자연스레 토스 앱의 인상도 OS마다 달랐습니다.

게다가 토스의 UI는 깔끔하고 평면적인 디자인을 지향하지만, OS 이모지들은 입체적이고 설명적으로 보입니다. 또 보통 화면에서 텍스트처럼 작은 크기로 사용되는 OS 이모지가 확대되어 나타날 때, 과한 디테일에서 큰 이질감을 느낄 수 있었어요.

여기까지는 ‘디자이너만이 아는 디테일 아닐까?’라고 짐작할 수도 있어요. 더 명확한 문제가 있었어요.

대표적인 사례로 토스의 만보기 서비스가 있습니다. 만보기 서비스를 이용하는 친구에게 “포기하지 말아요.”라는 응원 메시지를 보낼 때 배추 포기 이모지가 나타나도록 했어요. 하지만 OS 업데이트를 하지 않은 기기에서는 최신 이모지들이 전혀 나타나지 않는 문제가 발생했어요. 당시 배추 포기 이모지는 나름 최신 이모지였거든요. 목도리나 추운 얼굴 이모지도 기종에 따라 표시되지 않는 경우가 많았어요. 기기의 OS 업데이트 여부에 좌우되는 이런 문제들은 저희가 해결할 수 있는 부분이 아니었기 때문에 답답했죠.

저작권 문제도 있었어요. 모든 디자인이 그렇듯 이모지에도 저작권이 있습니다. OS 이모지를 토스 같은 상업용 앱에서 사용하려면 애플, 삼성, 구글 등 원작자의 허가가 있어야 한다고 해요. 아직 문제가 된 사례는 없지만 원칙적으로는 불가능한 것이죠.

이처럼 이모지는 앱에서 빈번히 쓰이고 있는데 OS별로 다른 생김새에 UI와 맞지 않는 디자인, 저작권 문제, 표시되지 않는 이모지 등 크고 작은 걸림돌의 해결책을 모색하다 보니 ‘우리만의 이모지 폰트를 만들어 전부 우리 것으로 바꾸면 해결되지 않을까?’라는 방향으로 확장했어요. 그때는 금방 만들지 않을까 쉽게 생각했는데 완성하고 보니 1년이 지났더군요.

이모지 스타일을 결정하고, 모듈 구조로 효율적으로 제작하기

하나의 이모지 폰트는 약 3,600개의 유니코드를 가지고 있어요. 3,600이란 숫자가 주는 중압감도 있지만, 무엇보다 모든 이모지가 하나의 톤으로 보여야 한다는 점이 쉽지 않았어요. 그래서 톤을 정하기 전에 우선 이모지를 현실적으로 직시하려 했습니다. 이모지의 아트워크만 고민하면 오로지 미적 측면에만 집중하게 될 것 같았죠.

이모지는 토스 앱 안에서 아주 작은 크기의 아이콘으로 활용되겠죠? 기존 아이콘과 조화롭게 보이는 게 중요했어요. 토스의 기존 아이콘은 오브제를 설명하는 데 필요한 최소한의 요소를 사용해 타 아이콘보다 심플하고 평면적인 형태였어요. 저희는 이 특징에서 힌트를 얻어 토스페이스의 톤을 ‘플랫/아이코닉(Flat/Iconic)’으로 정했어요. 기존 이모지 중에서 그와 유사한 톤을 거의 본 적이 없었기에 토스만의 톤이 될 수 있다고 생각했습니다.

평면 이모지를 위해서는 볼륨(부피감)을 포기해야 했어요. 대신 볼륨을 대체할 토스페이스만의 무기가 필요했죠. 바로 이모지의 형태예요.

• 자유 곡선을 배제하고 원, 직선 그리고 딱 떨어지는 곡선으로 이루어진 기본 도형을 활용해 형태를 잡는다.

형태를 잡을 때 저희가 세운 규칙이에요. 마치 로고나 아이콘을 제작하듯 이모지의 형태를 잡은 것이죠. 자유 곡선으로 완성도를 높일 수 있겠지만 통일성을 유지하는 데는 방해가 됐어요. 작은 크기로 볼 때는 오히려 이미지의 명시성을 해칠 수도 있었고요. 그렇게 형태를 잡고자 원, 직선 그리고 이 두 도형과 딱 맞아떨어지는 곡선을 이모지 형태에 종합적으로 적용하면서 자연히 전체 통일성을 만들 수 있었고, 의도했던 것처럼 평면적이면서도 아이코닉한 톤을 만들 수 있었어요.

이모지는 대략 55%의 사물과 45%의 인물로 구성되어 있어요. 1,700개의 인물 이모지를 하나하나 만들기에는 인력도 시간도 모두 부족한 상황이었어요. 그래서 생각해 낸 방식은 점, 선, 면을 모듈로 활용해 레고처럼 조립하여 수많은 변주(variation)를 만들어내는 거였어요.

이모지를 제작하는 내내 통일성을 신경 썼지만, 진짜 고민은 3,600여 개의 이모지를 다 만든 뒤에야 시작됩니다. 기본 요소들을 조립해 제작한 인물 이모지의 경우, 종종 오브제 이모지와 부피 차이가 났거든요. 특히 인체의 전신을 보여야 하는 이모지는 오브제 이모지보다 꽤 작아 보이는 문제점이 발생했어요. 이를 개선하고자 인물 형태와 요소의 두께를 수정하는 작업을 거쳤고, 부피 문제가 있던 이모지들이 다른 이모지 사이에서 튀지 않도록 바로 잡았어요.

시각적 통일성 만들기

앞서 토스페이스는 폰트라고 말씀드렸죠. 폰트는 시각적 통일성이 매우 중요해요. 형태적으로 그 노력이 가장 많이 반영된 곳은 바로 손 이모지예요.

하나의 이모지 폰트에 약 200개의 손동작이 있어요. 이 모든 동작이 마치 하나의 손에서 만들어진 것처럼 보여야 통일성이 지켜질 수 있겠다고 생각했어요. 손은 형태가 조금씩만 달라도 어색해 보이기 쉽거든요.

먼저 손의 형태를 기본 도형만으로 그린 다음, 가장 단순하면서도 완성도 높은 형태로 만들어보려 했어요. 손바닥과 손가락뿐 아니라 접히는 부분과 그림자까지도요. 나머지 동작들도 손가락과 손바닥의 비율, 두께, 전체 볼륨과 위치를 계속해서 눈으로 맞춰가며 디자인을 완성해 나갔어요.

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

각도도 통일했어요. 각도가 있는 사물은 모두 오른쪽 45도를 맞춰서 기울였죠.

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

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

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

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

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

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

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

앞으로의 토스페이스

토스페이스는 처음에 여러 문제를 해결하기 위한 수단으로 탄생했어요. 이제는 폰트를 넘어 토스 그래픽 유니버스의 기준점으로 자리 잡았어요. 여기에 디자이너들의 상상력이 더해지면서 그 영향력이 더 커지는 걸로 보여요.

토스페이스 폰트는 오픈소스(open-source)입니다. 토스페이스 깃허브에서 TTF와 SVG(Scalable Vector Graphics) 파일로 제공되고 있고, 여러분도 무료로 내려받아 사용할 수 있어요.

이 폰트 파일의 사용자 개인 영역(PUA, Private Use Area)에는 저희의 가치관이 담긴 이모지가 몇 가지 추가되어 있어요. 토스는 한국을 기반으로 하는 앱인 만큼 소주, 김밥, 붕어빵과 같이 한국인에게 친숙한 사물들을 우리가 필요할 때 사용할 수 있도록 넣어두었어요. 드론이나 클라우드처럼 과거에 없던 개념이지만 현재와 미래에 범용적으로 사용될 사물과 개념도 추가했고요. 특히 계산기와 계좌는 금융 분야에서 통용되는 사물인데 공용 이모지로 표현할 수 없어서 늘 아쉬웠어요.

‘왜 이런 이모지는 없나요?’와 같은 목소리를 내는 사람들을 위해, 유니코드 컨소시엄에서는 1년에 한 번씩 새로운 이모지 제안을 받아요. 그래서 저희도 이번에 2개 이모지 등록을 위한 제안서를 제출했어요. 만약 유니코드 컨소시엄에서 이런 이모지들의 필요성과 범용성을 인정한다면 몇 년 내로 우리의 스마트폰 키보드에서 볼 수 있을지도 몰라요.

참, 마지막으로 토스페이스가 세계적인 디자인 공모전 레드닷 어워드 중 2023년 브랜드&커뮤니케이션 부문에서 본상을 수상했어요 🎉 이모지 폰트로는 토스페이스가 최초 수상 사례라고 합니다.

앞으로도 토스가 금융 플랫폼에 그치지 않고, 더 좋은 디자인 생태계를 만드는 데 기여하는 브랜드로 성장하면 좋겠습니다.

Words 고현선, 김경태, 이은호   Edit 손현