디자인 시스템 구축 (Typography)
프로덕트 디자이너의 디자인 시스템 제작 이야기 - 2
다양한 앱을 관찰해 보면 서체 하나에도 퀄리티가 달라질 수 있다는 걸 느끼곤 한다. 그만큼 서체는 브랜드를 나타내는 가장 기본적이며 중요한 부분이다.
이번에는 디자인 시스템의 가장 기본이 되는 요소인 Typography의 이야기를 해보려 한다.
Chapter 2. Typography 개선
- 우리 프로덕트에서 Typography는 어떤 문제점이 있을까?
- 문제점을 발견했다면 해결하자
- 새로운 폰트 적용 후기
1. 우리 프로덕트에서 Tyopgraphy는 어떤 문제점이 있을까?
서체는 Chapter. 디자인 시스템 구축 결정과 팀원 설득에서 문제점 중의 하나로 짧게 얘기했던 부분이다.
몇 년 전까지만 해도 디자인할 때 국문, 영문, 숫자를 서로 다른 종류의 폰트로 사용하곤 했다. 지금은 시인성도 좋고, 여러 디스플레이에 어울릴 수 있도록 만들어진 서체가 많이 나오고 있다. 이런 환경에서 다양한 폰트를 하나의 프로덕트에 사용하는 것은 리소스도 많이 들고 브랜드의 일관성을 주지 않는다고 생각했다.
우리 프로덕트는 어떨까?
먼저 안드로이드부터 살펴보면 한글은 Noto Sans KR, 영어, 숫자는 Roboto로 적용되어 있도록 디자인 가이드 되어 있었다. 개발자들과 함께 개발 소스들을 살펴보니 한글, 영어, 숫자 모두 Noto Sans KR로 적용되어 있었다. 그 어디에도 Roboto를 적용한 화면은 없었다. 이전 디자이너에게 개발 리소스를 줄이기 위해 하나의 폰트로 간다고 구두로 말했고, 소통이 잘 되지 않아 디자인 화면과 다른 식으로 개발되어 있었다.
(우리 프로덕트 특성상 날짜와 금액이 많아.. 노토산스의 숫자, 컴마 표기는 앱의 퀄리티가 떨어져 보였다..)
또한 Noto Sans KR 특성상 폰트 상단에 패딩이 기본으로 들어가 있어 아이콘과의 정렬이 안 맞아 보였다. 정렬을 맞추기 위해서는 디자인, 개발 소스에서 모두 1-2px을 수동으로 내려야 하는 작업을 하고 있었다.
안드로이드는 폰트 자채에 문제가 있었다면, ios는 한 화면에 타이틀은 Noto Sans KR, 본문은 Apple SD Gothic Neo, 영문은 Helvetica, 숫자는 Roboto 등.. 너무 다양한 폰트가 정리되지 않은 상태로 무작위로 적용되어 있는 것이 문제였다.
ios 초기 개발은 외부 개발자, 내부에서도 개발자가 여러 번 바뀌어 작업자가 여러 번 달라지는 상황 속에서 정확한 가이드들이 없어 상황에 따라 유동적으로 적용하는 사례가 발생했던 것이다. 피그마로 화면들을 다시 그려 개발 환경을 잡으려고 시도해 보았으나, 전체적인 폰트를 변경하지 않은 이상 검수를 진행해도 의미가 없는 무의미한 시간들이 발생되고 있었다.
예시를 위한 이미지입니다.그리고 마지막으로 안드로이드, ios의 폰트를 따로 가다 보니 디자이너는 개발자에게 화면을 전달하기 위해서는 폰트만 다른 같은 두 화면을 만들어야 하는 공수가 발생하고 있었다. 폰트를 위한 두 벌의 화면 작업을 디자이너 혼자 짧은 시간 안에 작업하기에는 힘든 일이었고, 불필요한 리소스 낭비가 크다고 판단했다.
예시를 위한 이미지입니다.2. 문제점을 발견했다면 해결하자
먼저 폰트의 가독성과 리소스 낭비를 방지하기 위해 안드로이드, ios 새로운 하나의 폰트로 모두 변경하기로 결정 내렸다. 그 폰트는 바로 프리텐다드_Pretendard이다.
아래의 3가지 체크사항을 고려해 봤을 때 우리에게 알맞은 폰트였다.
상업용 무료 폰트인가?
회사에서 유료 라이선스를 구매해 사용하기에는 부담스러웠고, 그렇게 되면 결재를 거쳐 작업을 진행해야 하므로 프로젝트의 예상 진행 일정이 미뤄질 것 같았다.
애플산돌고딕네오를 대체할 수 있는가?
폰트의 굵기가 다양하게 지원되면 좋겠다고 생각했고
금액과 날짜 표기가 많은 서비스로 “,” 의 모양이 Apple SD Gothic Neo와 유사하여 대체 가능한지 중요했다.
UI 상으로 가독성이 뛰어난가?
한글과 숫자를 많이 사용하고 있는 서비스로 한글과 숫자를 잘 표현할 수 있는 폰트가 필요했다. Noto Sans KR가 특히 텍스트를 배치했을 때 쏠림 현상이 심하고, 특수기호들의 가독성이 뛰어난 폰트를 희망했다. 또한 지금처럼 디자인, 개발에서 임의로 아이콘과 정렬을 맞추기 위해 수동으로 간격을 조정하는 리소스를 피하고 싶었다.
이렇게 3가지의 고려사항을 체크해 봤을 때 프리텐다드가 우리에게 적합한 폰트로 판단되었다.
3. 새로운 폰트 적용 후기
먼저, 우리가 고려했던 대로 숫자와 특수문자에서의 가독성이 뛰어났다. 1차적으로 배포 전 내부 타 팀의 직원들에게 공유 후 피드백을 들어보니 한글폰트에서는 느끼지 못했다가 숫자를 보고 이전보다 깔끔해졌다는 느낌을 많이 받았다고 했다.
디자이너는 프리텐다드 폰트 적용으로 이제부터 OS별 두 벌로 화면을 만들 필요가 없어졌고, 디자인 시스템과 개발 리소스에서도 하나로 정리되어 유지 보수가 간편해졌다. 아직 적용한 지 얼마 되지 않아 모든 화면을 100% 완벽하게 대응하지는 못했다. 새로운 폰트로 변경함으로써 생기는 정렬 틀어짐이나 우려했던 부분들을 지속적으로 업데이트하고 있다.
글을 마치며..
디자이너 입장으로 작업 시 무의미하게 소비되는 리소스가 줄어든 점이 가장 크게 와닿았고, 디자인 작업된 화면과 개발된 화면의 오차가 항상 컸었는데 그 부분이 조금씩 줄어들고 있다는 점이 좋았다.
다음 이야기 --> Chapter3. 네이밍 규칙 정하기
