Pretendard 시스템 폰트 도입기
리멤버가 기본 시스템 폰트 대신 커스텀 폰트를 쓰게 된 이유
안녕하세요, 프로덕트 디자이너 강민석입니다. 새해를 맞아 현재 리멤버 앱에 적용 중인 커스텀 폰트인 Pretendard에 대해 이야기해 보려고 합니다. 폰트는 디지털 프로덕트 디자인의 전부라고 해도 과언이 아닌데요, 리멤버는 왜 기본 폰트 대신 커스텀 폰트를 적용하기로 했는지 이번 글을 통해 공유해보려고 합니다.
고민의 시작
리멤버는 iOS와 안드로이드 양 플랫폼에서 모바일 앱을 운영하고 있으며, 각 플랫폼에서 제공하는 시스템 폰트(한글 기준으로 iOS는 Apple SD Neo gothic, 안드로이드는 Noto sans kr)로 작업을 해왔습니다. 그러다 보니 디자이너들은 디자인된 화면을 개발자에게 전달하기 위해 폰트만 다른 2벌의 같은 화면을 만들어야만 했습니다.
개발자들은 주로 피그마의 화면을 보고 작업을 하기 때문에 화면 상의 플로우나 설명 역시 플랫폼 별로 2벌로 만들어서 전달한쪽 플랫폼의 화면만 만들고 다른 플랫폼의 개발자에게 폰트만 교체해서 ‘알아서’ 작업해달라고 할 수도 있지만, 디자이너가 실제로 출력되는 화면을 제대로 확인하지 않고 배포할 수 없었기 때문에 어쩔 수 없이 플랫폼별로 동일한 화면을 매번 만들 수밖에 없었습니다. 비단 화면뿐만 아니라 디자인의 베이스가 되는 디자인 시스템(RDS)의 컴포넌트 역시 폰트만 다르게 플랫폼마다 별도로 만들어야 했습니다.
같은 종류의 컴포넌트가 서체가 다르다는 이유로 플랫폼 별로 따로 제작이런 이유로 각 제품 크루의 프로덕트 디자이너들이 불필요한 리소스 낭비가 크다는 판단이 들어 플랫폼에 상관없이 통합해서 사용할 수 있는 커스텀 폰트 적용을 검토하게 되었습니다.
고려사항
커스텀 폰트를 찾기에 앞서 우리가 원하는 고려사항을 먼저 정리해봤습니다.
1. 상업용 무료 폰트일 것
브랜딩을 목적으로 한 폰트 교체가 아니라서 유료 폰트를 라이센스 비용 지불해가며 사용하기는 아직 부담스러웠습니다. 따라서 상업용 무료 폰트를 후보로 먼저 고려했습니다.
2. 다양한 굵기(Weight)를 지원할 것
기존의 타이포그래피 스타일에서 폰트만 교체하는 것이라, 최소한 기존 양 플랫폼에서 제공하는 시스템 폰트들의 굵기는 다 커버할 수 있어야 했습니다.
iOS의 시스템폰트가 안드로이드 대비 더 많은 굵기를 제공하므로, 커스텀 폰트는 iOS의 폰트 굵기를 모두 지원가능해야 함3. UI 상에 한글이 잘 표현될 것
리멤버는 한글을 기반으로 서비스를 하고 있기 때문에 한글을 가장 잘 표현해줄 수 있는 서체가 필요합니다. 플랫폼에서 제공하는 시스템 폰트들의 경우 한글을 지원하고 있지만, 범용성을 위해 가장 많이 쓰이는 알파벳을 중심으로 폰트가 제작된 뒤 한글을 적당히 얹힌 느낌이라 한글로 된 텍스트를 UI에 배치할 때 아래 이미지처럼 원하는 정렬을 맞추기가 무척 어렵습니다.
UI 상에서 1행의 한글 텍스트를 배치했을 때 기존 시스템 서체의 쏠림 문제 발생이런 문제를 해결하기 위해 디자이너들은 ‘시각 보정’이라는 이름으로 UI 요소로 쓰인 한글 텍스트의 기본 행간을 초기화(폰트 크기와 동기화)한 뒤 정렬을 맞춰야 했습니다. 행간을 초기화하더라도 폰트 디자이너가 서체 제작 시에 임의로 넣은, 제어할 수 없는 여백이 위아래에 포함되어 있어 원하는 간격으로 정확하게 디자인할 수 없습니다. 새롭게 적용할 커스텀 폰트에서는 한글이 UI 요소로써 사용했을 때 이런 문제가 최대한 해결될 수 있어야 했습니다.
리멤버에 적합한 폰트 찾기
위의 고려사항들을 바탕으로 최종적으로 “Spoqa han sans Neo” 와 “Pretendard” 2개의 서체가 후보에 올랐습니다.
1.Spoqa Han Sans Neo
스포카 폰트는 이미 디자이너들 사이에서 대체 시스템 폰트로 널리 사용되고 있으며, 리멤버 역시 웹사이트에서 사용하고 있었기 때문에 가장 유력한 후보였습니다. 아무래도 폰트를 만들어서 배포하고 있는 스포카가 직접 실무에서 활용하기 위해 만들었기 때문에 지속적으로 유지보수가 된다는 점과 한글에 최적화되어 있다는 점이 장점입니다.
스포카 폰트 다운로드 : https://spoqa.github.io/spoqa-han-sans/
2. Pretendard
프리텐다드는 요즘 디자인 업계에서 가장 핫한 시스템 폰트로, 디자이너 길형진 님이 inter와 noto를 결합해 서로의 단점을 보완해서 만든 폰트입니다. 여러 플랫폼에서 애플의 san francisco나 apple sd gothic처럼 사용할 수 있는 시스템 폰트를 만들기 위한 목적이라고 합니다. Noto Sans KR(본고딕)을 베이스로 가장 두꺼운 Black 마스터를 만든 후, 9개의 레벨 굵기로 만들어졌으며, Window, iOS 둘 다 지원하고 조형적인 아름다움, 다국어 환경 조화, 한국어에 최적화된 기호까지 지원됩니다.
길형진 디자이너 티스토리: https://cactus.tistory.com/306
프리텐다드 폰트 다운로드: https://github.com/orioncactus/pretendard
최종 검토
고려 사항을 기반으로 두 폰트를 비교해봤습니다.
1. 상업적 무료 폰트
둘 다 SIL 오픈 폰트 라이선스로 글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능합니다.
2. 다양한 굵기 제공
스포카 폰트도 점점 업데이트되면서 기존에 없던 굵기가 추가되고 있지만, 이 부분에 있어서는 프리텐다드가 훨씬 더 다양한 굵기를 제공하고 있습니다.
프리텐다드는 iOS에 1대1 대응할 수 있는 모든 굵기를 갖추었음3. UI 상의 한글 표현
기본적으로 양 폰트 모두 한글을 고려해서 제작되었기 때문에 한글 표현에 강점이 있지만, 한글 폰트의 쏠림 현상은 스포카에서도 여전히 발생하고 있었습니다. 그에 반해 프리텐다드는 폰트에 별 다른 조치를 취하지 않아도 텍스트 박스의 가운데 잘 배치되어 보입니다.
고려 사항을 바탕으로 최종 검토 결과 Pretendard가 더 적합하다고 판단되어 리멤버의 시스템 폰트로 적용하기로 결정하게 되었습니다.
적용 후기
시스템 서체가 플랫폼에 상관없이 통합됨에 따라서 더 이상 디자이너들이 플랫폼 별로 디자인을 만들 필요가 없어졌고, 디자인 시스템 상의 컴포넌트도 단일화되어 유지 보수가 더 간편해졌습니다. 아직 적용한 지 얼마 되지 않았지만 실 사용자인 동료 디자이너들의 피드백을 통해 커스터 폰트 도입의 효과를 체감할 수 있었습니다.
권우리 디자이너
이전에는 안드로이드와 iOS 각각 다른 폰트를 쓰니 같은 디자인을 적용해도 OS별로 다르게 시각 보정을 해야 했습니다. 각각 다른 폰트의 고유 높이와 내부 정렬 때문에 디자인이 같아도 쏠림 현상이 있어서 미세한 디자인 조정을 해야 했었지요. 그런데 프리텐다드를 적용하니 그럴 필요가 없어져서 작업 시간이 엄청 줄었습니다!!!!!
송우석 디자이너
컴포넌트 내부의 텍스트 정렬 같은 부분에서 개발된 화면과 디자인 화면 간의 오차가 사라졌다는 게 가장 큰 장점으로 느껴집니다!
마치며
아직 모든 화면에서 100% 완벽하게 대응하지는 못했고, 기존의 플랫폼 시스템 폰트의 이점에 대한 우려들도 있기 때문에 지속적으로 업데이트 해 갈 예정입니다. 저희처럼 커스텀 폰트 도입에 고민이 있으신 분들에게 도움이 되었으면 좋겠습니다. 긴 글 읽어주셔서 감사합니다.
