스케치앱소스닷컴에서 스케치용 UI 키트를 다운로드 받아 열어보면 작년 WWDC 2015에서 애플이 발표한 새로운 시스템 폰트, 샌프란시스코 서체(이하 SF체)가 적용되어 있는 것을 볼 수 있다. 그런데 내 맥에 분명 이 폰트가 있는 것 같은데 없다고 알려주는 경고창을 종종 보곤 했을 것이다. 이는 애플이 기존 시스템 폰트와 달리 이번 SF체를 각 OS 별 특성과 디스플레이 환경을 고려해서 최적화했기 때문이다. 그럼 오늘은 이 ‘최적화’라는 것이 구체적으로 무엇인지에 대해 알아보자.
SF체의 구성
애플 개발자 사이트에 계정이 등록되어 있다면 쉽게 SF체를 다운로드 받을 수 있다. 계정이 없다면 여기에서 받아라. 이 서체는 윈도우에서도 설치가 가능하다.
SF체에 대한 애플의 각종 자료와 온라인 상의 분석 글들을 정리해 보면 다음 그림과 같다.
SF와 SF Compact의 차이
‘SF’와 ‘SF Compact’의 가장 큰 차이는 측면의 곡률이 다르다는 점이다. ‘SF Compact’의 곡률이 ‘SF’ 보다 더 작은 이유는 잘 알려진대로 애플 워치의 작은 디스플레이 안에서 조금이라도 더 많은 정보를 보여주기 위함이다. 때문에 iOS와 OSX에서는 ‘SF’를, 워치OS에서는 ‘SF Compact’를 사용하는 것이 좋다.
Display와 Text의 차이
‘Display’와 ‘Text’의 가장 큰 차이는 자간이라고 할 수 있다. ‘Display’의 자간이 더 좁은데 때문에 ‘Display’는 타이틀에 사용하고 자간이 더 넓은 ‘Text’는 본문에 사용하는 것이 좋다.
이 두 서체를 OS에서 자동으로 리사이징하기도 한다. ‘Display’는 20pt 이상으로 키우며 ‘Text’는 19pt 이하로 줄인다. 물론 코드 상에서 이를 제어할 수 있다. 코드 상에서는 ‘:(세미콜론)’을 숫자 들과 세로로 정렬하거나, 숫자 ‘6’, ‘9’을 다른 폰트로 대체할 수 있다. 또한 애니메이션을 위해 동일 자간을 적용할 수도 있다.
오늘은 여기까지…
찾아보면 SF체에 대한 자료가 굉장히 많은데 일단 위 개념을 먼저 이해하고 다른 다양한 자료들을 읽어보기를 추천한다. 다양한 자료들을 최대한 단순하게 정리해 본 내용이기 때문이다.
