서체 고민 없이 본질에만 집중할 수 있도록

토스는 그동안 다양한 서체를 써왔습니다. iOS와 안드로이드, 맥과 윈도우, 토스팀 내부와 외부 등 그 환경에 따라 모두 다른 서체를 사용했거든요. 예를 들어 아이폰에서는 애플 기본 서체인 San Francisco(SF)로, 윈도우에서는 맑은 고딕으로 보이고 있었어요. 환경마다 다른 서체를 쓰면서 비효율적인 상황이 발생했고, 가독성과 사용성이 가장 뛰어난 토스만의 본문용 서체가 필요해졌어요.

2020년 여름, 저희는 국내 최고의 글꼴 회사 중 하나인 산돌과 함께 서체 프로젝트를 시작했고 7개월 간 14번의 협의 과정을 거쳐 토스 전용 서체, 토스 프로덕트 산스(Toss Product Sans, 이하 프로덕트 산스) 첫 번째 버전을 개발했습니다. 첫 번째 버전은 7개의 굵기(weight)로 구성되어 있어요. 그리고 두 번째 버전부터는 폰트 디자인 및 기술 스타트업 이도타입과 개발하면서 수많은 필드 테스트를 함께 진행하고 있어요.

토스 서비스는 금융을 다루고 있고, 모바일로 사용해요. 프로덕트 산스를 만들면서 제일 많이 본 건 토스 ‘제품’입니다. 현대 사회에서 모든 글자는 지면 대신 화면에서 이뤄져요. 이제는 종이 출력물도 컴퓨터에서 구성을 마친 뒤 인쇄하니까요. 종이에 글자를 써본 게 언제일까 싶을 정도로 화면이 훨씬 익숙해졌죠. 하지만 일반 서체들은 화면에 적합한 토스만의 서체가 아니었어요.

프로덕트 산스를 만들면서 세 가지에 집중했습니다. 균형, 맥락, 그리고 형태예요.

새로운 균형: 알맞은 크기와 간격을 찾는 여정

일반적으로 본문용 서체의 숫자와 영문은 국문보다 조금 더 작은 크기로 디자인되어 있어요. 디지털 서비스, 특히 토스는 텍스트 호흡이 짧기 때문에 그 환경에 맞는 새로운 균형이 필요했어요.

숫자만 썼을 때, 국문만 썼을 때, 영문만 썼을 때에도 서로 균형을 이룰 수 있는 지점을 찾기 위해 여러 스케일을 테스트했어요. 완벽하게 국문과 동일한 두께로 맞추면 숫자, 영문이 너무 얇아 보이기 때문에 국문보다 조금 더 두껍게 디자인했고요.

국문에 비해 숫자, 영문이 얼마나 더 커져야 알맞을지 찾는 여정이었죠.

글자를 만들면서 흰 공간을 더 유심히 본 것 같아요. 타이핑할 때 점과 글자 사이가 너무 좁아 띄어쓰기한 적이 있나요? 괄호 위치가 한글과 맞지 않거나, 기호 간격이 너무 좁거나, 중앙선이 너무 두껍다는 등 사소하지만 신경 쓰이는 부분들이요. 제작하면서 모든 기호들이 중앙에, 같은 두께라고 인지될 수 있는 수준으로 균형을 맞췄습니다. 띄어쓰기 간격까지도 신경 썼고요.

금융이라는 맥락: 숫자와 기호까지 재해석

토스 앱에서 흔히 만날 수 있는 글은 내 소비 | 삼성카드 → 내 우리 계좌 와 같이 짧은 정보들의 조합과 나열입니다. 이런 맥락에서 가장 많이 활용되는 것은 숫자와 기호인데요. 퍼센트, 쉼표, 더하기, 빼기, 화살표 등 가장 많이 사용되면서 UI 요소로 활용되는 기호들의 가독성을 높였습니다. 더 크게, 아이콘에 가깝게 좀 더 넓은 여백으로 디자인했죠. 또한 다른 글자와의 균형과 일관성을 고려해 다듬었어요.

사용자에게 특수문자는 익숙한 글자예요. 한편 이걸 UI에 사용하는 아이콘이라고 생각하며 디자인되는 서체는 드물어요. 프로덕트 산스에서는 금융 맥락에서 사용되는 모든 화살표, 수학 기호뿐만 아니라 일반적으로 활용하는 특수문자까지 재해석해 토스가 사용하는 맥락에 더 적합한 형태로 제작했어요.

물론 프로덕트 산스는 토스 제품 외 일반 문서에서도 사용합니다. 따라서 UI에서 아이콘처럼 쓰이는 문자들과 더불어 국문, 영문의 디자인과 잘 어울리는 일반 문자들도 제작해 다양한 용도와 맥락을 포함할 수 있도록 했어요.

수가 커질수록 자릿수를 비교하기 어려워요. 반면 숫자를 크게 볼 땐 숫자마다의 고유 간격을 지키는 것이 안정감을 줍니다. 토스 서비스에는 실시간으로 변동되는 수치를 보여주는 화면이 많은데요. 대표적인 사례로 토스증권의 실시간 시세 화면이 있습니다. 이 화면에서 숫자가 고정폭이 아니라면 어지럽겠죠.

프로덕트 산스는 가변폭과 고정폭 숫자를 마련해 주식 수, 전체 매출액 등 큰 수와 실시간으로 반영되는 수치들에는 고정폭을 활용하고 내 소비 총액 등 주요 정보가 크게 표현되거나 하나만 활용되는 상황에선 가변폭을 사용할 수 있습니다.

중립적 형태: 글자 대신 글이, 형태 대신 내용이 보일 수 있도록

프로덕트 산스는 글자 대신 글이, 형태 대신 내용이 더 잘 보일 수 있도록 과도하게 특징적인 부분은 모두 절제했어요. 특히 본문용 서체로서 최고의 사용성과 기능성을 담고 싶었거든요. 일반 서체에 비해 영문, 숫자, 기호가 크다 보니 글자들의 속공간을 넓히면서 좀 더 둥글고 시원한 인상을 주었습니다. 이는 읽기의 피로도를 낮출 수 있게 하는 큰 요인이 됩니다. 획이 중첩되는 부분은 밖으로 파내서 좀 더 가벼운 인상을 주었고요.

숫자의 가독성을 높이기 위해 꽤 많은 수정이 필요했어요. 아무래도 사용자가 가장 많이 보는 것이 숫자이니까요. 특히 4와 같은 뾰족한 형태의 경우 상단을 뾰족하게 두지 않고 머리를 넓혀서 보완했습니다. 1과 7도 마찬가지였고요. 반면 5, 6, 9는 너무 두꺼워 보이지 않게 조정했어요.

모두가 사용하게 만들기까지

지금은 토스 모든 계열사의 온오프라인 결과물에 모두 프로덕트 산스를 적용하고 있어요. 동시에 토스 디자인 시스템(TDS)에 내재화되어 모두가 어떤 서체를 고를지, 뭘 사용하고 있는지 인지하지 못할 정도로 자연스러운 환경을 만들 수 있었습니다.

디자인 플랫폼 팀과 함께 제작한 마크다운(markdown) 규칙으로 특수 문자를 쓸 수 있도록 해서 번거로운 과정 없이 타이핑만으로 여러 문자와 맥락을 표현할 수 있도록 했어요.

서체도 빠르게, 자주 개선할 수 있다

디지털 환경의 특징 중 하나는 고치는 대로 바로 반영할 수 있는 점이에요. 인쇄물에 찍혀버린 서체는 고칠 수 없지만 사용자가 앱, 웹에서 보는 서체는 고칠 수 있으니까요. 특히 서체 테스트를 프레이머(Framer)^*에서 할 수 있다는 것도 큰 장점이었어요. 서체가 앱에 적용됐을 때 나타날 오류를 프레이머에서 미리 확인할 수 있었거든요.

^* 토스에서 사용하는 UI 디자인 툴. 디자인 플랫폼 팀에서 실제 제품 환경과 동일하게 구현된 디자인 시스템을 자체 개발했다.

여러 번 고쳤던 흔적들을 공유해볼게요. 한글 서체는 정보 값이 많아 용량이 더 커요. 자연히 로딩 시간에도 큰 영향을 미치죠. 처음엔 KS X 1001 완성형에 포함된 국문 2,350자로 경량화된 버전을 제작했어요. 하지만 토스 제품 내에서 채팅처럼 타이핑해야 하는 일이 생각보다 많다 보니 중간중간 뜨지 않는 글자들이 사용성을 해치고 있었고 11,172자 모두 포함된 버전으로 바꾸게 됐어요. 더 빠른 로딩을 위해 서브셋(subset)^* 파일도 별도로 제작했고요.

^* 마스터 폰트 파일에서 불필요한 글자를 제거하여 사용할 글자만 남겨둔 폰트 파일.

유니코드에 대해 잘 몰랐기 때문에 수시로 추가하기도 했어요. 가령 저희가 중앙점이라고 알고 있는 글자는 국가별로, 키보드나 OS별로 다른 유니코드를 사용하고 있어요. 같은 모양인데 코드가 다른 거죠. 그래서 통일할 문자는 무엇인지, 없는 글자는 어떻게 처리할지 등을 논의했어요. 서체를 ‘디자인’하는 시간보다 오류를 해결하고 모든 환경에서 사용할 수 있도록 적용하는 시간이 더 길었던 것 같아요.

일반 서체에서는 한글 위치가 시각적으로 중앙에 정렬되어 있지 않고 너무 높거나 낮은 경우가 많았어요. 버튼을 디자인할 때 글자를 정중앙에 배치하기 위해서 개발자가 시각적 보정을 해야 하는 상황이었죠. 예를 들어 사용자가 눈으로 볼 땐 정중앙에 있는 텍스트이지만 개발 상으로는 위의 여백을 조금 더 넓게 추가하는 방식으로요.

참고로 폰트의 수직 위치 값을 버티컬 메트릭스(vertical metrics)라고 불러요. 이를 계산하는 방법이 매우 복잡하고 OS나 프로그램마다 해석하는 방식이 다르다 보니 발생한 문제였죠.

프로덕트 산스를 만든 목적을 기억하시나요? 토스의 모든 환경에서 하나의 서체를 쓰기 위함이에요. 따라서 저희는 안드로이드, iOS, 윈도우, 크롬, 사파리 등 다양한 환경에서 원활하게 작동할 수 있도록 최적화된 버티컬 메트릭스를 테스트했어요.

프로덕트 산스 두 번째 버전부터 베트남어가 추가되었습니다. 베트남 문자 구조는 한글과 달랐어요. 베트남 문자의 구조상 발음 구별 기호(diacritic) 위치가 한글에 비해 많이 높아 글자의 어센더(ascender)^*가 올라가 있거든요. 상대적으로 한글이 중앙에 정렬되지 않고 아래로 쳐져 보이는 문제가 있었죠. 디센더(descender)를 낮춰 아래 공간을 확보함으로써 한글이 최대한 시각적으로 중앙 정렬되어 되어 보이도록 했습니다. 주로 한글을 사용하는 환경을 고려한 선택이었죠.

^*  타이포그래피 용어로, 로마자 알파벳으로 된 글꼴의 소문자에서 위쪽 평균선(가상선) 너머로 튀어나온 부분을 가리킨다. 반대로 글꼴의 자모가 베이스라인 밑으로 나와 있는 부분을 ‘디센더’라고 부른다.

마지막으로 토스에서 자주 사용하는 이모지들을 추가했어요. @, #, ~, 원기호 등 저희가 자주 사용하는 기호들은 최소 3번 이상은 고쳤습니다. 서체를 제작하기 전에 이게 토스 제품처럼 이터레이션(iteration)^*이 가능할까 싶었는데 프로덕트 산스는 벌써 세 번째 버전을 제작하고 있답니다.

^* 최상의 결과를 생성하기 위한 프로세스의 반복. 참고하면 좋을 아티클.

‘모두가 모든 환경에서 하나의 서체만 쓸 수 있도록 하자’는 단순한 목표를 이루기까지 많은 시행착오가 있었어요. 디지털 환경에서 국문 서체를 적용하는 것이 얼마나 어려운 일인지도 깨달았고요.

서체를 향한 토스의 도전은 이제 막 시작 단계예요. 아직 완벽한 서체가 아니고, 지금 이 순간에도 계속 개선하고 있거든요. 결과적으로는 ‘프로덕트 산스’라는 하나의 땅 위에 더 큰 숲을 만들고자 해요. 글로벌 확장을 위한 다국어 서체, 개발 언어를 위한 고정폭 서체, 토스의 그래픽 자산을 더 풍부하게 담은 서체, 디지털 환경의 가독성을 극단적으로 높이는 서체 등 서체에 대한 다양한 꿈을 꾸고 있습니다.

이제 토스 앱을 사용하실 때, 글꼴도 유심히 살펴봐주세요. 꿈이 어떻게 구현되고 있는지 보일 테니까요.

Words 김지윤 Edit 손현