🔢우리 앱에 어울리는 숫자 서체 적용하기(1/2)

우리 앱에 맞는 서체를 선정하고 적용하는 법

서체는 디자인의 중요한 요소입니다. 특히 앱 화면의 대부분은 글자로 이루어져있다고 봐도 무방하죠. 그러니 서체를 잘 바꾸는 것만으로도 서비스 이미지에 긍정적인 변화를 줄 수 있습니다.

알라미 팀에 입사하고 가장 먼저 하고 싶던 작업 중 하나가 알라미 앱 ‘숫자’의 서체를 바꾸는 작업이었습니다. 모든 일이그렇듯, 쉽게 진행되지는 않았습니다.😅 ‘그냥 괜찮은 폰트 하나 고르면 되는거 아냐?’ 라고 생각할 지 모르지만… 실은 그렇지가 않죠. 저와 같은 고민을 하시거나 서체 선정에 어려움을 느끼는 디자이너분들께 조금이나마 도움을 드리고자, 저의 피땀눈물이 담긴 ’숫자 서체 선정과 적용 과정’을 그저 작업 진행의 순서대로 써내려가 보겠습니다.

Step 1. 숫자 서체를 왜 바꾸려고 하는데?

우선 숫자 서체를 바꾸고자 하는 이유를 한번 체크하고 넘어가겠습니다.

앞서 언급했 듯, 서체는 디자인의 중요한 요소입니다. 정보의 역할을 나타내며 조형적 완성도를 높여 줄 수 있는 요소이죠. ‘Samsung Health’ 앱을 살펴보면 숫자에 적용된 각각의 서체가 어떤 역할을 하는지 알 수 있을 겁니다.

1. 큰 강조 : 시간

전자 시계에 쓰이는 디지털 폰트를 활용해 스포틱한 느낌을 주면서 활동 시간 이라는 의미를 잘 전달합니다.

2. 중간 강조 : 칼로리, 세션

다른 내용보다 더 중요하게 강조되어야 하는 사용자 활동정보를 나타냅니다.

3. 작은 강조

디테일한 사용자 활동 정보를 나타냅니다.

특히나 알라미는 알람앱의 특성상 화면에 숫자가 크게, 많이 들어갑니다. 그래서 숫자에 다른 서체를 적용하는 것 만으로 사용성을 높이고,우리가 알라미를 통해 제공하고자 하는 가치를 표현할 수 있습니다. ⏰

Step 2. 알라미에서 숫자의 역할에 맞는 서체 기준은?

세상에 많고 많은 서체 중에서 우리 앱에 어울리는 딱 하나를 고르는 건 쉽지 않은 일입니다. 저는 서체를 선택하기에 앞서, 알라미에서 ‘숫자’가 하는 역할이 어떤 것인지 짚어봤습니다. 주로 ‘시간 확인’과 ‘미션 카운트 확인’을 위한 역할이 많고, 또 중요했습니다.

‘입력/조작’과 단순한 ‘표시’보다는 ‘상황을 확인’하는 역할에 더 초점이 맞추어져 있는 거지요. 그래서 다음 3가지의 조건을 충족하는 서체들안에서 선정하고자 기준을 정했습니다.

1. Oldstyle 보다는 Lining

알라미에서 많이 쓰이는 컴포넌트 중 하나는 알람 시간과 미션 횟수를 설정하는 Picker 입니다. 이를 고려했을 때 Ascender 와 Descender로 높이 차이가 나는 Oldstyle 보다 높이 값이 일정한 Lining 타입이 쓰이기 더 적합합니다.

2. Proportional 보다는 Monospace

마찬가지로 Picker 컴포넌트와 알람 리스트 등 일정한 간격으로 숫자가 표현되어야 더 가독성이 좋은 요소들이 있습니다. 때문에 글자간 너비가 다른 Monospace 가 아닌, 너비가 일정한 Proportional타입이 더 적합합니다. 다만 너무 큰 차이가 나지 않는다면 Monospace 타입의 서체도 고려하기로 했습니다.

3. Serif 보다는 San-serif

익히 아시다시피, 삐침이 있는 Serif 보다는 삐침이 없는 San-Serif으로 쓰인 숫자가 ‘상황을 확인’하기에 더 좋을 것 입니다.

이정도 걸렀으면 서체 선정이 좀 쉬워지지 않을까요? 아니요. 전혀 그렇지 않았습니다.ㅋㅋ 작업을 진행하다보니 위 조건들은 ‘서체의 분류 체계’에 불과하고, 우리 앱에 걸맞는 서체 조건을 대변해주지는 못한다는 생각이 들더군요. 그러니까 위 기준은 1차 필터링을 도와주는 도구에 불과했고, 디자이너들 간 ‘이건 알라미에 딱 맞는 서체다!”라고 씽크를 맞춰 줄 기준은 되지 못했습니다. ‘알라미 숫자 서체 선정 기준’에만 적용 가능하게 커스터마이징이 된 기준이 아니었던 것이죠. 그래서 딜라이트룸 디자이너들의 생각을 맞출 수 있는 다른 기준이 필요했습니다. 그래서 서체 체크리스트를 만들었습니다.

Step 3. 숫자 서체 선정을 위한 체크리스트 작성

숫자 서체 변경시 기대되는 점들을 나열해보고, 그 안의 키워드들을 꺼내 체크리스트 항목을 만들었습니다.

여기서 나온 가독성, 아이덴티티, 조형미, 조화 네가지의 키워드로 체크리스트 항목을 만들었습니다.

그리고 실제 다음과 같은 형태로 딜라이트룸 세 명의 디자이너가 총 7가지 서체의 점수를 매겼습니다.

Step 4. 최종 서체 선정 ...?

체크리스트를 작성하니 디자이너들끼리 생각을 싱크하고 의견을 좁히는 일이 수월해졌습니다. 이로써 Montserrat로 선정할 수 있었습니다.

그러나 알람 앱의 숫자를 Montserrat로 사용할 수 없는 치명적인 문제가 발견되었는데요. 그 문제가 무엇이고, 그 후 어떻게 작업이 진행되었는 지는
🔢우리 앱에 어울리는 숫자 서체 적용하기 (2탄!) 에서 이어 작성해보겠습니다.

그럼 이만 ,, 👋

이어지는 글 : #2 . 우리 앱에 어울리는 숫자 서체 적용하기

딜라이트룸에서 같이 일하고 싶으신분! 여러 포지션이 열려있습니다.
우리 같이 여러 재미난 일들을 해봐요 😎
https://team.alar.my/