[Type branding]핫한 금융 플랫폼이 폰트를 바라보는 관점

UI를 위한 폰트 「토스 프로덕트 산스」


금융 플랫폼의 브랜드 전용폰트

「토스 프로덕트 산스」는 금융 플랫폼 기업인 토스에서 제작 문의를 받아 진행되었는데요. 2020년 7월부터 2021년 3월까지 약 9개월간 진행된 프로젝트입니다. 첫 문의 내용이 일반적인 브랜드 전용폰트 프로젝트와는 조금 색달랐던 것으로 기억하고 있어요. 산돌에서 제작하는 대부분의 전용 폰트 프로젝트는 주로 한글이 큰 비중을 차지하는 반면, 토스에서는 한글보다 라틴과 숫자에 포커싱 되어 있었기 때문이에요. 첫 스텝부터 여느 전용폰트 프로젝트와는 다른 관점에서 시작했기 때문에, 시작 단계부터 색다르고 재미있었어요.

 「토스 프로덕트 산스」 (이미지 출처: toss feed)



UI 환경을 위한 개발 방향 논의

토스와 폰트 개발 방향성에 대한 이야기를 나누면서, 가장 중요했던 포인트는 UI 환경에 최적화된 폰트 패밀리 개발이었어요. 사용자의 시스템이나 OS(운영체제)에 따라 각기 다르게 보이는 과거 UI 환경이, 사용자와 제작자 모두에게 불편했던 점이 많았기 때문이었어요.

또, 토스는 서비스 특성상 금융에 대한 정보들을 주로 다루고 있어서 숫자와 문장부호의 중요도가 높았어요. 그래서 이미 잘 만들어져 있고 사용자 눈에도 익숙한 한글을 새로 제작하기보다는, 라틴과 숫자, 그리고 문장부호에 초점을 맞추기로 했어요. 따라서 한글은 기존에 사용하고 있던 「Sandoll 고딕neo1」을 약간의 수정만 한 채로 유지하고, 이 한글에 맞춰 라틴, 문장부호 등 나머지 글립들을 최적화하는 것으로 방향을 잡았습니다.

「토스 프로덕트 산스」를 위한 프로토타입 논의 과정



숫자와 문장부호 디자인

앞서 이야기한 것처럼, 토스의 서비스 특성상 숫자와 문장부호의 디자인이 전체 프로젝트의 가장 중요한 내용 중 하나였어요. 「토스 프로덕트 산스」를 제작하며 실제로 어떤 내용을 고민했고, 또 그 결과는 어떻게 나왔는지 몇 가지 포인트를 설명드리도록 할게요.


1. 숫자의 너비

숫자의 너비는 크게 두 가지로, 모든 숫자의 폭이 동일한 고정폭과 숫자의 생김새에 따라 모두 다른 너비를 가진 가변폭으로 나눌 수 있어요. 고정폭 숫자의 경우 모든 글립의 너비가 동일하기 때문에 숫자 내용이 달라지더라도 전체 글줄이 흔들리지 않는다는 장점이 있어요. 반면 동일한 너비를 유지해야 하기 때문의 숫자와 숫자 사이의 흰 공간이 달라 보일 수 있다는 단점을 가지기도 해요. 이와는 반대로 가변폭 숫자는 고정폭과는 반대로 장단점을 가지게 되고요.

토스의 서비스는 매우 짧은 호흡의 단어를 위주로 사용하고, 또 그 안에서 숫자의 사용 빈도가 굉장히 높았어요. 때문에 일반적인 가변폭 숫자보다는 모두 같은 너비 값을 가진 고정폭 숫자가 훨씬 더 사용성을 높여줄 수 있을 것이라고 판단했어요. 

가변폭 숫자(윗줄)와 고정폭 숫자(아랫줄) 비교


2. 숫자의 형태

고정폭으로 너비가 정해졌으니, 그 다음인 숫자의 디자인은 일정한 너비 안에서 최대한 자연스럽고 읽기 편하게 디자인해야 하는 과제가 생겼어요. 아시다시피 숫자는 각각 생김새가 많이 다른 편인데요, 숫자 1의 경우 좌우 폭이 애초에 좁게 생긴 반면, 숫자 0의 경우는 좌우 폭이 넓어요. 동일한 폭 안에서 최대한 사이 공간까지 눈에 거슬리게 하지 않기 위해 디자인에 신경 쓸 수밖에 없었어요. 

숫자 1이 최대한 좌우로 차도록 하기 위해 하단의 수평 획을 넣을까 고민하기도 했지만, 전반적인 디자인 컨셉을 조금 더 우선하여 최종 형태는 아래의 이미지처럼 정해졌어요.

「토스 프로덕트 산스」 숫자의 형태


3. 문장부호

앞서 이야기한 것처럼 문장부호는 토스의 특성상 굉장히 중요했어요. 금융 서비스이기 때문에 산술 기호의 사용 빈도도 높았고, 앱 특성상 뒤로 가기/앞으로 가기 등 문장부호가 특정 기능을 가진 기호로써 역할을 하는 케이스도 많았어요. 때문에 일반적인 다른 한글 폰트의 문장부호와는 달리, 크기나 글줄의 높이 등을 세밀하게 맞춰 디자인했어요.

「토스 프로덕트 산스」 문장부호의 형태



편리한 사용을 위한 제너레이트 옵션

「토스 프로덕트 산스」 제작 프로젝트에서 또 색다른 경험이었던 것 중 하나는, 제너레이트 옵션을 여러 개로 나눠 제작했던 것이에요. 폰트를 모두 제작하고 나면, 폰트가 사용될 디바이스나 시스템에 잘 보여질 수 있도록 파일화 하는 과정이 필요한데, 이를 산돌에서는 퍼블리싱, 또는 제너레이트 단계라고 불러요. 보통 대부분의 폰트는 동일한 글립 구성의, 동일한 디자인으로 제너레이트하여 클라이언트에게 최종 공유를 하는데요. 토스에서는 특이하게 사용성에 좀 더 최적화하기 위해 제너레이트 옵션을 세 개로 나누었어요.


1. 토스 내부에서 사용하는 옵션

내부 직원들이 다양한 디자인 아웃풋을 만들어 내기 편리하도록 세팅된 옵션이에요. 이 옵션은 가장 일반적으로 세팅하여, 다양한 환경에서도 사용이 가능할 수 있도록 했어요.

2. 토스 앱에서 사용하는 옵션

토스의 앱 안에서 사용자와 제작자 모두가 편리하게 사용할 수 있도록 세팅된 옵션이에요. 위에서 설명한 것처럼 앱 안에서 문장부호가 기호로서 편리하게 사용될 수 있도록 몇 가지 부호류 글립의 형태를 변경하여 넣었어요. 이렇게 제작하여 앱 서비스를 개발할 때 기호류를 매번 수정할 필요가 없도록 했죠.

3. 토스 웹에서 사용하는 옵션

토스의 웹사이트에서 사용하기 편리하도록 세팅된 옵션이에요. 웹 환경에서는 폰트 파일의 크기 이슈가 중요했기 때문에 경량화된 폰트 파일을 제작해야 했어요. 따라서 한글의 글립 수를 기존의 11,172자에서 최소 스펙인 2,780자로 줄여 제너레이트하게 됐어요.



토스 프로덕트 산스

총 세 가지의 제너레이트 옵션을 최종 점검하고, 모든 사용 환경 및 디바이스에서 잘 출력되는 것을 확인하는 과정을 끝으로 토스 프로젝트를 종료했어요. 토스의 가장 대표 프로덕트인 토스 앱에서 사용될 폰트 패밀리이기 때문에 이름은 「토스 프로덕트 산스」로 결정이 됐고요.

아래는 「토스 프로덕트 산스」의 사용 예시 이미지들이에요. 깔끔한 토스의 브랜드 이미지와 잘 어울리는 결과물이 나와 개인적으로 만족도가 높은 프로젝트였어요. 또한 한글이 중점이 됐던 다른 프로젝트들과는 달리 라틴과 숫자, 그리고 문장부호에 포커싱하여 고민할 수 있었던 경험도 재밌었고요. 폰트 디자이너로서도 좋은 경험이 된 프로젝트였습니다.

「토스 프로덕트 산스」가 적용된 토스 앱



이수현
타입디자인팀 팀장
글자를 그립니다. 산돌에서는 여러 사람들과
함께 고민하며 그려요.

Hoping to make the world
better place to live together

Sandoll

Story

News

Family

Sandoll Inc

6th Floor, 49, Achasan-ro 17-gil, Seongdong-gu, Seoul, Republic of Korea

Hoping to make the world better place to live together

Sandoll

Story

News

Family

Sandoll

6th Floor, 49, Achasan-ro 17-gil, Seongdong-gu, Seoul, Republic of Korea