토스의 이모지 폰트, 토스페이스 제작기
고현선 토스 · 토스 기술 블로그
AI 핵심 요약
토스는 OS마다 다른 이모지 모양과 구형 기기에서 최신 이모지가 표시되지 않는 문제를 해결하고, 앱의 시각 경험을 일관되게 만들기 위해 자체 이모지 폰트 토스페이스를 제작했다. 토스 아이콘의 단순한 솔리드 스타일을 기준으로 삼고, 인물 요소는 기본형을 조립하는 모듈 방식으로 만들었으며 시선·각도·색상 등에도 공통 규칙을 적용해 약 3,600개의 글립을 구성했다. 그 결과 OS와 기기 업데이트에 좌우되지 않는 그래픽 자산을 확보했고, 이를 3D 키 비주얼 등으로도 빠르게 확장할 수 있었다. 토스페이스는 오픈소스로 공개되어 사용자 피드백을 반영해 발전하고 있다.
- 플랫폼별 렌더링 차이와 업데이트 의존성을 해결하려면 OS 기본 이모지 대신 자체 폰트 자산을 관리하는 방법을 고려할 수 있다.
- 대규모 그래픽 작업은 기존 디자인 시스템의 시각 언어를 기준으로 삼으면 새 요소를 추가하면서도 일관성을 유지하기 쉽다.
- 반복되는 인물 이모지는 기본형에 피부색·머리카락·의상 등을 조합하는 모듈 방식으로 제작해 효율과 통일성을 함께 확보했다.
- 시선 방향, 사물의 각도, 입체 표현의 시점, 컬러 팔레트처럼 세부 규칙을 정하면 서로 다른 이모지를 하나의 체계로 묶을 수 있다.
- 폰트로 만든 그래픽 자산은 3D 비주얼 등 다른 매체로 확장할 때 형태 설계 시간을 줄이는 기반이 될 수 있다.
소개
세계적인 IT 기업에서나 만드는 이모지 폰트를 어떻게 한국 금융 플랫폼 토스에서 만들게 됐을까? 토스의 이모지 폰트, 토스페이스 제작의 모든 것을 공개합니다.
비슷한 학습 자료
문서 정윤호
토스는 어떻게 광고 속에 게임을 넣었을까
문서 차영훈
토스의 디바이스 팜 만들기
문서 박서진
토스 프론트엔드 챕터를 소개합니다!
문서 정세희
문제의 근원을 해결 하기 위한 다양한 시도
문서 이지윤