iOS 기본 서체 SF Pro와 Apple SD Gothic Neo의 자동 자간 조정에 대해
애플의 iOS와 macOS , watchOS, tvOS는 기본 서체로 San Francisco를 사용하고 있습니다. 그 중 iOS ( iPad OS를 포함 ) 의 경우로 한정지어 이야기를 해보고자 합니다. 아마 macOS도 같거나 비슷한 상황일 것 같고, watchOS는 조금 다른 것으로 압니다.
iOS 기본 서체는
iOS는 기본 서체로 SF Pro를 사용하고 있습니다. 구체적으로는 20pt 미만에서는 SF Pro Text로 20pt 이상에서는 SF Pro Display로 전환이 되는 방식입니다. SF Pro Text는 작은 글씨로 본문 등에 사용되기 때문에 자간이 비교적 넓은 편이고, SF Pro Display는 큰 글씨로 제목 등에 사용되기 때문에 자간이 비교적 좁은 편입니다.
SF Pro 서체는 한글을 지원하지 않습니다. 따라서 iOS에는 Apple SD Gothic Neo라는 한글용 서체가 따로 들어있습니다. 애플의 요청으로 산돌에서 만든 서체인데 사실은 산돌 고딕 Neo1의 크기와 간격을 조금씩 손을 본 버전입니다. 실제로 두 서체의 크기와 자간을 조금씩 조정한 후 겹쳐보면 완전히 동일한 서체임을 확인할 수 있습니다.
Apple SD Gothic Neo는 SF Pro에서 보여주지 못하는 한글 글씨들을 보여줍니다. 영문, 숫자 등은 대부분 SF Pro를 따르고, 한글의 경우에만 Apple SD Gothic Neo를 따르는 방식입니다. 히라가나/가타카나, 한자 등 다른 문자의 경우엔 어떤지 잘 모르겠습니다.
하나 주의해야 할 점은, Apple SD Gothic Neo의 영문, 숫자 서체는 SF Pro와 다른 서체라는 것입니다. 따라서 iOS용 화면 시안을 Figma, Sketch, Photoshop 등에서 디자인 할 때는 영문, 숫자 용으로 SF Pro와 한글 용으로 Apple SD Gothic Neo를 섞어서 사용해줘야 합니다.
여기까지 SF Pro의 Text, Display 두가지 타입과 한글 전용 서체인 Apple SD Gothic Neo에 대한 설명이었습니다. 여기까지 설명드린 서체 사이의 전환은 디자이너가 시안을 제작할 때 참고하기 위한 목적입니다.
어플 내부에선 자동으로 전환이 이루어지기 때문에 개발자 입장에선 아래와 같이 size, weight만 지정하면 됩니다.
myLabel.font = UIFont.systemFont(ofSize: 14, weight: .regular)
Variable Letter Spacing
여기서부터가 글을 작성한 이유입니다. SF Pro 서체는 iOS, macOS 상에서 애플이 사전에 지정해놓은 최적화된 값으로 자간을 변경합니다. 자신들이 서체의 크기에 따라 적절한 자간값을 찾아두었으니 신경쓰지 말고 사용하기만 하면 된다는 것입니다. 그럼 여기서부터 의문이 3가지가 생깁니다.
- 한글용 서체인 Apple SD Gothic Neo도 자동 자간 조정이 되는 것인가
- Figma에서 화면 시안을 만들 때는 어떻게 자동 조정되는 자간값을 사용할 수 있을 것인가
- 만약 자간값을 커스텀 하고 싶다면 어떻게 전달해야 할 것인가
우선 결론부터 이야기 하자면 1번 문제에 관한 문서가 보이지 않아 직접 확인해본 결과 No 입니다. 다음으로 2번 문제는 일단 SF Pro로 한정지어 구글링을 해보니 그럴싸한 해답을 찾을 수 있었습니다. 마지막으로 3번 문제는 정말 모르겠습니다.
먼저 실험용 어플을 만들어 iOS 상에서 각 pt마다 글씨를 작성한 후 캡쳐한 이미지를 Figma에 가져왔습니다. 좌측이 원본 캡쳐 이미지입니다. 그리고 캡쳐한 이미지 위에 최대한 글자가 겹치도록 흰색 글씨로 내용을 따라 작성했습니다. 우측이 겹친 이미지입니다. 마지막으로 각 경우별로 자간을 어떻게 조정했는지를 기록했습니다.
한글용 서체인 Apple SD Gothic Neo만 보면 어느정도 자간 조정이 들어갔음을 확인할 수 있었습니다. 그러나 그 값이 1% 이하에서 오밀조밀하게 모여있었으며, 20pt를 기준으로 크게 달리지지 않는 것을 확인할 수 있었습니다. 애플이 Sandoll 고딕 Neo1을 Apple SD Gothic Neo로 바꾸는 과정에서 자간을 이미 한 차례 좁혔기 때문인 것 같습니다. 자동 자간 조정의 적용을 받지만 값의 변화가 크지 않다 정도로 이해하면 될 것 같습니다.
그런데 여기서 또 다른 의문이 생겼습니다. Apple SD Gothic Neo는 오로지 한글에서만 나타나는 서체입니다. 한글로만 쓰여진 문장이 있다 한들 띄어쓰기가 있다면 그 부분은 SF Pro로 나타날 것입니다. 그렇다면 띄어쓰기를 없애면 어떻게 될까요?
띄어쓰기를 하지 않은 문장을 출력하고 위와 같은 과정을 해보니 Apple SD Gothic Neo로 쓰여진 한글 글씨는 자간에 어떠한 조정도 들어가지 않았음을 확인할 수 있었습니다. 여러 크기에서 테스트 해보았지만 마찬가지였습니다. 따라서 Apple SD Gothic Neo는 자간 자동 조정이 되지 않음을 알 수 있습니다.
한편 SF Pro의 경우엔 20pt 이상에서 값이 내려가는 양상을 보입니다.
사실 SF Pro는 각 사이즈별로 자간이 어떻게 변하는지 애플의 가이드라인에 기재되어 있습니다. 그런데 문제는 애플 홈페이지에 나와있는 Tracking 값을 어떻게 Figma의 Letter-spacing으로 적용해야 할지 모르겠다는 것입니다.
방금 방문했던 Fonts 페이지의 하단에는 각 Size별로 Tracking 값이 어떻게 변화하는지 안내되어 있습니다. 그러나 여기 적혀있는 권장 값들과 Figma에서 직접 글씨를 덮어씌우며 확인한 Letter-spacing 값 사이에 어떠한 상관관계가 있는지 찾아내지 못했습니다.
검색을 해보니 Tracking은 글자 중앙에서부터 다음 글자의 중앙까지의 거리, Letter-spacing은 글자 끝에서 다음 글자 시작까지의 거리라고 합니다. 그걸 듣고 다시 생각을 해보았지만 SF Pro는 고정폭이 아닌데 어떻게 Tracking을 Letter-spacing으로 바꿀 수 있는 것인지 의문이 들었습니다.
사실 값이 잘못 기록되어 있거나 도구가 잘못되었을리는 없고 제가 서체에 대해 잘 알지 못하여 그 규칙을 발견하지 못했을 가능성이 큽니다. 디자인을 제대로 공부하지 못한 비전공자라서 이럴 때마다 벽을 느끼게 됩니다.
아무튼 해결책은
비록 원리는 이해하지 못해도 어떻게든 써먹을 수만 있다면 한 고비 넘기는 것이 아닐까요? 그것이 바로 공학이니까...
1. 무식하지만 확실한 방법, 직접 값을 찾아보자.
디자인 시스템을 준비하는 도중 발생한 문제이기 때문에 디자인 시스템의 힘을 빌리는 방법이 있습니다. 디자인 시스템을 적용했기 때문에 어플 내에서 사용하는 스타일 프리셋은 10개 안팎으로 한정됩니다.
여기서 지정한 Size, Weight, Line-height를 이용해 테스트를 위한 글씨를 어플에서 출력한 후, iOS 상에서 자동으로 조정된 Tracking 값과 유사한 Letter-spacing 값을 피그마에서 찾아내서 Text Styles로 등록시켜 둔다면 향후 작업에 문제가 없을 것입니다.
이렇게 말입니다.
2. 다른 사람이 찾아둔 해결책은 없을까.
이런 메이저한 문제를 저만 겪고 있을리가 없습니다. 분명 세상 어딘가의 디자이너들도 동일하게 겪고 있을텐데 영어로 구글링을 해보았습니다.
In Figma, the tracking must be manually applied to get a more accurate representation. Hence,
Fix San Francisco is here to automate this process for you ♥
역시 누군가가 먼저 이 문제를 겪고 해결책을 제시해두었습니다. Figma의 플러그인으로 문제를 해결해두었으니 그걸 이용하면 된다고 합니다. 다만 정확성을 높이기 위해서는 수동으로 어느정도 값을 조정해야 한다고 합니다. 그래도 앞서 제시한 1번 해결책을 사용하되 이 플러그인의 도움을 받는다면 조금이나마 수고를 덜 수 있을 것 같습니다.
Letter-spacing 값을 변경하려면
한 걸음 더 나아가서 Figma에서 설정한 Letter-spacing 값을 iOS 어플에도 적용하려면 어떡해야 할까요. 앞서 제시한 1번 방법을 거꾸로 적용하여 Figma 상에서 Letter-spacing 값을 고정해두고 iOS 어플에서 의도대로 적용될 때까지 Tracking 값을 변경한다는 해결책이 있을 것입니다. 값이 맞아 떨어질 때까지 계속해서 Tracking 값을 변경하고 컴파일하기를 반복해야겠지요. 와 신난다.
이보다 나은 해결책이 있다면 부디 알려주셨으면 합니다.
그냥 커스텀 포기하고 애플이 제시한대로 쓰면 어떨까
곰곰이 생각해보니 애플은 자기네 서비스를 위해 폰트를 만들고 커스텀까지 할 만큼 신경을 썼는데 애플이 설정해둔 값을 믿고 그대로 사용하는건 어떨까요. 잡스는 젊어서부터 타이포그래피에 관심이 많았고 그 영향으로 매킨토시 시절부터 애플의 타이포 사랑은 유별났다고 합니다. 그래서 저는 시총 1위 기업이 제시한 규칙을 믿어보기로 했습니다.