최근 수정 시각 : 2025-05-12 00:33:16
1. 개요2. 개발 배경3. 개발 과정4. 디자인 특징5. 기술적 특징6. 활용7. 여담
Toss Product Sans는 대한민국의 핀테크 기업 비바리퍼블리카(토스)가 개발한 전용 서체다. 토스의 다양한 디지털 환경에서 일관된 사용자 경험을 제공하고, 금융 서비스에 최적화된 가독성과 사용성을 확보하기 위해 제작되었다. 이 서체는 2020년부터 산돌과의 협업으로 개발되기 시작하여, 이후 이도타입과 함께 개선 작업을 이어갔다.
2. 개발 배경
토스는 iOS, 안드로이드, 웹 등 다양한 플랫폼에서 각각 다른 기본 서체를 사용하면서 일관성 부족과 가독성 문제를 겪었다. 특히 금융 서비스 특성상 숫자와 기호의 명확한 표현이 중요했으며, 이를 해결하기 위해 전용 서체 개발을 추진하게 되었다.
3. 개발 과정
2020년 여름, 토스는 산돌과 함께 서체 프로젝트를 시작하여 약 7개월간 14회의 협의를 거쳐 첫 번째 버전을 완성했다. 이후 이도타입과 협업하여 두 번째 버전부터는 폰트 디자인 및 기술적 개선을 진행했다. 개발 과정에서는 다양한 환경에서의 테스트와 사용자 피드백을 반영하여 서체를 지속적으로 개선하였다.
4. 디자인 특징
Toss Product Sans는 한글, 영문, 숫자, 기호 간의 시각적 균형을 고려하여 디자인되었다. 특히 숫자와 영문은 한글보다 약간 더 두껍게 설계되어 전체적인 조화를 이루며, 기호들은 중앙 정렬과 동일한 두께로 인지될 수 있도록 조정되었다.
금융 서비스에서 자주 사용되는 퍼센트(%), 쉼표(,), 더하기(+), 빼기(-), 화살표(→) 등의 기호들은 UI 요소로 활용되므로, 가독성을 높이기 위해 크기와 여백을 조정하였다. 또한, 가변폭과 고정폭 숫자를 모두 지원하여 다양한 상황에 맞게 사용할 수 있도록 설계되었다.
과도한 특징을 절제하여 글자 자체보다 내용에 집중할 수 있도록 디자인되었다. 영문, 숫자, 기호는 속공간을 넓혀 시원한 인상을 주며, 획이 중첩되는 부분은 밖으로 파내어 가벼운 느낌을 준다. 숫자의 가독성을 높이기 위해 4, 1, 7 등의 형태를 조정하였고, 5, 6, 9는 두께를 조절하여 균형을 맞추었다.
5. 기술적 특징
Toss Product Sans는 다양한 운영체제와 브라우저 환경에서 일관된 렌더링을 위해 버티컬 메트릭스를 최적화하였다. 또한, 한글의 시각적 중앙 정렬 문제를 해결하기 위해 디센더를 낮추어 아래 공간을 확보하였다. 서브셋 파일을 별도로 제작하여 로딩 속도를 개선하였으며, 프레이머(Framer)를 활용하여 서체 테스트를 진행하였다.
현재 Toss Product Sans는 토스의 모든 계열사에서 온오프라인 결과물에 적용되고 있으며, 토스 디자인 시스템(TDS)에 내재화되어 있다. 이를 통해 서체 선택에 대한 고민 없이 일관된 디자인 환경을 제공하고 있다.
Toss Product Sans는 Google의 Product Sans와 유사한 이름을 가지고 있으나, 디자인과 목적에서 차이가 있다. Google의 Product Sans는 자사의 브랜드 아이덴티티를 위해 개발된 서체로, 토스의 서체와는 완전히 별개의 폰트다.