모바일 디자인을 하다보면 스케치에서 서체를 정말 많이 씁니다. 기본적인 스케치의 서체 동작은 알고 있지만 주로 한글로 된 서비스를 만들면서 여러가지 문제에 직면하게 됩니다. 스케치에서 제플린 등으로 개발팀에 시안을 전달할 때 정확한 수치가 표시되는게 중요한데, 한글은 영문과 다르게 의도한 것과 다르게 수치가 표기될 때가 많습니다. 스케치에서 서체가 어떻게 동작하는지를 세세하게 실험해봤습니다.
서체 기본 구조
스케치는 영문을 기준으로 제작된 툴이기 떄문에 먼저 영문이 스케치에서 어떻게 표시되는지 살펴보았습니다. 영문 서체는 아래의 요소들로 구성됩니다.
- ascender — 소문자 b, k, l 과 같이 대문자의 높이입니다.
- cap height — 대문자 높이
- x-height — 위아래로 확장되지 않는 소문자를 위한 높이, x를 기준으로 하기 때문에 x-height라 부름
- baseline — 글자가 하단으로 정렬되는 라인
- descender — 베이스라인 아래로 확장되는 소문자 부분 p,j,y,q 등
한글은 어떻게 구성될까요? 한글을 측정해본 결과 Cap Height 와 Baseline은 동일하게 적용되어 있습니다. 한글을 제작할 때 영문과의 균형을 맞춰 자체적으로 조정하는 것으로 추측됩니다. Ascender와 Descender는 한글에서 적용된 것을 확인할 수 있는 방법이 없지만 아마 영문과 동일한 수치 값이 적용됐으리라 보입니다.
노토산스 외에 애플고딕으로 측정하면 영문의 경우 각 수치들 간의 간격이 다르지만, 한글은 비슷한 비율로 적용된 것을 확인할 수 있습니다.
*한글만이 쓰이는 환경이 고려된 것인지 동일한 조건에서 영문과 한글이 함께 쓰일 때 영문이 더 작아 보이는 것 같습니다.
자간
스케치에서는 서체 패널의 Character를 이용해 자간을 조절합니다. 노토산스를 기준으로 스케치의 Character 값을 조절했을 때, 영문은 글자의 기본 여백+오른쪽으로 입력한 값만큼 늘어남을 확인할 수 있습니다. 한글 또한 영문과 같은 방식으로 적용됩니다.
바운딩 박스
스케치에서 텍스트를 넣으면 바운딩 박스가 생깁니다. 이 바운딩 박스는 고정된 값을 넣을 수도 있고, Line에 값을 입력하면 그만큼 높이가 지정됩니다. 개발 팀과 커뮤니케이션 하기 위해 제플린에 업로드했을 때, 이 바운딩 박스를 기준으로 수치가 측정되기 때문에 신중하게 적용할 필요가 있습니다. 바운딩 박스는 Alignment, Line, Paragraph 수치에 영향을 받습니다.
Alignment
얼라인은 바운딩 박스의 확장 방식과 정렬 방식을 설정할 수 있습니다. 첫번째 줄은 바운딩 박스가 어떻게 조절되는지를 설정할 수 있으며 두번째 줄은 수직 정렬, 세번째 줄은 수평 정렬을 조절할 수 있습니다.
Auto
- 가로를 자동으로 설정하면 세로 높이가 고정됩니다.
- 세로를 자동으로 설정하면 세로 높이가 고정되지 않습니다.
- override에 따라 크기가 자유자재로 변하는 스케치 스마트 레이아웃 기능을 사용할 수 있습니다.
Fixed
- 바운딩 박스의 크기를 자유자재로 지정할 수 있습니다.
- vertical-align을 설정할 수 있습니다.
- 크기를 고정하는 것이기 때문에 자동으로 크기를 조절해주는 스케치의 스마트 레이아웃 기능을 사용할 수 없습니다.
Line – 스케치 기본값
스케치에서 행간은 보통 Line에 값을 입력해 조절합니다. 서체마다 자동으로 적용되는 line 값이 다르기 때문에 다양한 서체로 조사했습니다. 보편적으로 쓰이는 Noto CJK KR(이하 노토산스) 과 Apple SD Gothic NEO(이하 애플고딕) SF Pro(이하 샌프란)의 한글/영어 서체를 살펴봤습니다. 각 서체를 동일한 서체 값인 32pt로 Bold 입력했을 때 행간의 값이 달랐습니다. 노토 산스의 경우 47이 세팅되고 애플고딕은 39, SF는 38로 세팅됐습니다.
서체의 굵기를 변경해도 기본 line-height 값을 동일했기 때문에 서체 크기 변화에 따른 line-height 값을 표로 정리했습니다. 조사 결과 특별한 규칙을 찾기는 어려웠습니다. 표시되지 않는 소수 단위가 적용되어 1~2씩 오차가 있는 것으로 추측됩니다.
| font size | Noto CJK | Apple SD | SF Pro |
| 32 | 47 | 39 | 38 |
| 28 | 41 | 33 | 34 |
| 24 | 36 | 29 | 29 |
| 20 | 29 | 24 | 24 |
| 19 | 28 | 23 | 23 |
| 18 | 27 | 21 | 21 |
| 17 | 25 | 20 | 20 |
| 16 | 24 | 19 | 19 |
| 15 | 22 | 19 | 18 |
| 14 | 20 | 17 | 16 |
| 13 | 19 | 16 | 15 |
| 12 | 18 | 15 | 14 |
Line – 커스텀
더 나은 가독성을 위해 행간 값을 변경할 수 있습니다. line 값을 변경할 경우 2줄이 됐을 경우 각 글줄간의 간격이 변하며, 1줄인 경우에도 바운딩 박스의 높이가 변합니다. line 값을 입력하면 1줄인 바운딩 박스는 아래 공식으로 적용됩니다. 아래는 24pt 의 서체를 중심으로 제작한 예시입니다.
- Padding = fontsize + (line-fontsize)
- Bounding box = fontsize + padding(위 간격 + 아래 간격)
- padding은 2로 나뉘어 서체의 위아래에 여백이 적용됩니다.
ex. font size=24, line=40일 경우
- Padding = 24+(40-24) = 16
- Bounding box = 24+8+8
Parapraph
Paragraph는 텍스트 바운딩 박스 내에서 Enter를 쳤을 때 간격을 설정합니다. Line은 텍스트를 입력하고 바운딩 박스를 조절했을 때 자동으로 줄바꿈될 때 적용됩니다. Paragraph의 간격은 1이 기본입니다. line + Paragraph 값이 더해지고 소수점이 적용되어 내림 되는 것으로 보이지만, 완벽하게 계산이 일치하지 않는 것으로 보아 소수점 단위의 차이가 있는 것으로 추측됩니다.
| Paragraph | PT |
| 1 | 47 |
| 2 | 48 |
| 8 | 54 |
| 16 | 62 |
| 24 | 69 |
| 32 | 78 |
결론
대략적인 큰 동작 방식을 자세히 이해할 수 있었지만, 소수가 계산식에 섞여 있어서인지 뚜렷한 로직을 알아내기는 어려웠습니다. 완벽한 수치는 알아낼 수 없었지만, 개발자와 소통하는데 가장 중요한 텍스트의 Bounding box가 구체적으로 어떻게 동작하는지는 이해할 수 있었습니다.
앞으로의 방향과 숙제가 보이기도 했습니다. 디자인툴과 개발툴, 거기다 각 플랫폼마다 구현하는 방식이 다르기 때문에 커뮤니케이션 코스트가 들 경우가 많은데, CSS, Xcode, Android Studio와 같은 개발 툴에서의 서체 구현을 이해하고 스케치에서의 설정을 최대한 일치시키면 더 효율적으로 프로덕트를 설계할 수 있을 것이라 기대가 됩니다! 🙂
