애플의 샌프란시스코 서체에 대한 쉬운 이해

Hoon Cho
Hoon Cho
Mar 29, 2016 · 3 min read

스케치앱소스닷컴에서 스케치용 UI 키트를 다운로드 받아 열어보면 작년 WWDC 2015에서 애플이 발표한 새로운 시스템 폰트, 샌프란시스코 서체(이하 SF체)가 적용되어 있는 것을 볼 수 있다. 그런데 내 맥에 분명 이 폰트가 있는 것 같은데 없다고 알려주는 경고창을 종종 보곤 했을 것이다. 이는 애플이 기존 시스템 폰트와 달리 이번 SF체를 각 OS 별 특성과 디스플레이 환경을 고려해서 최적화했기 때문이다. 그럼 오늘은 이 ‘최적화’라는 것이 구체적으로 무엇인지에 대해 알아보자.


SF체의 구성

애플 개발자 사이트에 계정이 등록되어 있다면 쉽게 SF체를 다운로드 받을 수 있다. 계정이 없다면 여기에서 받아라. 이 서체는 윈도우에서도 설치가 가능하다.

SF체에 대한 애플의 각종 자료와 온라인 상의 분석 글들을 정리해 보면 다음 그림과 같다.

SF체의 구성과 사용처

SF와 SF Compact의 차이

‘SF’와 ‘SF Compact’의 가장 큰 차이는 측면의 곡률이 다르다는 점이다. ‘SF Compact’의 곡률이 ‘SF’ 보다 더 작은 이유는 잘 알려진대로 애플 워치의 작은 디스플레이 안에서 조금이라도 더 많은 정보를 보여주기 위함이다. 때문에 iOS와 OSX에서는 ‘SF’를, 워치OS에서는 ‘SF Compact’를 사용하는 것이 좋다.

SF와 SF Compact의 곡률 비교

Display와 Text의 차이

‘Display’와 ‘Text’의 가장 큰 차이는 자간이라고 할 수 있다. ‘Display’의 자간이 더 좁은데 때문에 ‘Display’는 타이틀에 사용하고 자간이 더 넓은 ‘Text’는 본문에 사용하는 것이 좋다.

‘Display’와 ‘Text’의 자간 차이

이 두 서체를 OS에서 자동으로 리사이징하기도 한다. ‘Display’는 20pt 이상으로 키우며 ‘Text’는 19pt 이하로 줄인다. 물론 코드 상에서 이를 제어할 수 있다. 코드 상에서는 ‘:(세미콜론)’을 숫자 들과 세로로 정렬하거나, 숫자 ‘6’, ‘9’을 다른 폰트로 대체할 수 있다. 또한 애니메이션을 위해 동일 자간을 적용할 수도 있다.

숫자 사이의 세미콜론 위치를 중앙으로!
’6'과 ‘9'만 바꿀수도 있고…
애니메이션을 위해 고정된 자간을 적용할 수도 있다.

오늘은 여기까지…

찾아보면 SF체에 대한 자료가 굉장히 많은데 일단 위 개념을 먼저 이해하고 다른 다양한 자료들을 읽어보기를 추천한다. 다양한 자료들을 최대한 단순하게 정리해 본 내용이기 때문이다.

Hoon Cho

Written by

Hoon Cho

Product designer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade