[UX] 구글 머티리얼 디자인 – 3.6.머티리얼 기초(Material foundation) – 서체(Typography): 언어 지원(Language support)
서체가 표현하는 문자의 크기, 표현 양식은 각 언어가 같고 있는 문자셋(Character set)이 영문과 유사한지(English-like), 높게 표현되는지(Tall), 굵게 표현(Dense)되는지 등에 따라 매우 다양합니다. 즉, 하나의 서체가 여러 언어를 지원할 때, 각 언어별로 서체가 표현되는 양식이 달라진다는 것이고, 이러한 세부사항을 머티리얼에서 어떻게 다루는 지 본 포스팅에서 다룰 것입니다.
출처: 원문보기
1. 언어에 대한 고려사항 (Language considerations)
1.1. 형상 (Glyphs)
서체로 표현되는 각각의 언어는 형상(Glyphs)이라 부르는 각각의 고유한 문자셋(Character set)을 갖습니다. 예를 들어 어떤 언어의 문자셋은 문자를 표현할때 기준선(Baseline)을 침해하지 않고, 표현되기도 하지만 어떤 언어의 문자셋은 기준선(Baseline)을 넘어서 상승문자(Ascenders) 또는 하강문자(Descenders)로 다채롭게 표현되는 경우가 있다는 것입니다.
만약 제품에서 UI를 통해 표현되는 언어가 다국어로 설정된다면, 서체로 표현되는 레이아웃은 언어에 따라 매우 달라질 수 있습니다. 각 언어는 평균적으로 서로 다른 길이(Length)와 높이값(Height)을 갖으며, 이는 UI 전반에 영향을 미칩니다.
예를 들어, 다중 언어를 지원하면서 발생하는 가장 흔한 사례는 줄바꿈 발생입니다. 어떤 언어에서는 1줄의 문단으로 표현된 UI가 어떤 언어에서는 2줄의 문단으로 표현되는데, 이는 언어의 형상(Glyphs)이 다름에 따른 대표적인 예라고 볼 수 있습니다.
UI 구성 요소 및 개별 요소에 문자(Text)를 포함하고 있다면 형상(Glyphs)에 대한 검토가 필요하다는 것을 의미합니다.
1.2. 길이 (Length)
단어의 길이(Word length)는 언어에 따라 달라집니다. 심지어 문자셋의 형상(Glypsh)이 유사해 라틴어를 기반으로하는 영어와 독일어의 경우에도 단어가 표현하는 길이는 매우 다른 것을 아래 그림에서 볼 수 있습니다.
영어는 유럽의 다른 언어들에 비해 단어의 길이가 보통 짧습니다. 예를 들어 독일어는 단어가 더 길고, 이에 따라 더 많은 줄(Line)을 요구합니다. 또한 합성어들이 상승문자, 하강문자 등으로 표현됨에 따라 줄 간격 또한 더 여유로워야 합니다.
여기서 이야기하는 단어의 길이(Length)란 단어가 표현되는 총 너비(Width)를 의미합니다. 위 그림의 붉은 색 음영이 단어의 길이(Length)입니다. 당연한 이야기겠지만 단어의 길이가 달라지면 위의 예시에서와 같이 단락(Paragraph) 표현에서도 차이가 발생하게 됩니다.
1.3. 정렬 (Alignment)
몇몇 아랍어와 히브리어와 같은 표기 체계는 문자를 오른쪽에서 왼쪽으로 표기합니다. 이 언어들은 같은 서체 크기(Font-size)일 때, 라틴어 기반의 언어들에 비해 더 작습니다. 이런 경우 모든 언어에서 UI가 제대로 표현되기 위해 줄 간격 및 정렬 등의 조정이 필요합니다.
1.4. 높이 (Height)
많은 언어들의 표기 체계(Writing system)는 영어에서 문자가 차지하는 세로 영역보다 더 많은 영역을 요구합니다. 그렇기 때문에 UI는 서로 다른 언어의 표기 체계를 위해 세로 영역에 여유가 있어야 합니다.
라틴어 기반의 베트남어는 ớ와 같이 일부 문자가 표현될 때, 더 높은 높이값(Height)을 갖습니다. 위의 그림에서 New의 높이값과 Mới의 높이값은 차이가 있습니다.
보통 UI 내에서 문자가 표현될 때, 문자(Text)는 아이콘(Icon) 등과 함께 별도의 컨테이너(Container)나 다른 UI 구성 요소(Component)에 속한 개별 요소(Element)로 표현됩니다. 이때 제품에서 다국어를 지원한다면 개별 요소를 포함하는 구성 요소의 높이값에 여유가 없으면 특정 언어에서 문자들이 잘리는 현상이 발견될 수 있습니다.
다시 말해, 다중 언어를 지원하는 제품이라면 문자(Text)를 포함하는 구성 요소(Component)의 높이값을 신경써서 설계해야 된다는 것입니다. 이는 대부분의 제품이 문자와 이미지로 표현된다는 점에서 매우 중요하며, 디자인 변경 시 더 많은 콘텐츠를 노출하기 위해 개별 요소를 포함하는 구성 요소(Component)들의 높이값을 임의로 변경하는 것이 어떤 영향을 줄 수 있는지에 대한 충분한 검토가 이뤄져야 하는 이유가 됩니다.
구글의 머티리얼 디자인은 다국어에 대한 테스트를 포함하여 각 서체 스케일(Scale), 서체 크기(Size) 등의 다양한 서체 속성(Properties)을 정의하고 있습니다. 이에 따라 서체 속성에 대한 변경은 단순히 디자인 관점으로만 검토할 것이 아니라 신중히 결정되어야 합니다.
1.5. 세로 쓰기 (Vertical typesetting)
비록 세로 쓰기는 제품에서 드물게 사용되는 옵션이지만 가로쓰기 대신 문자를 표현하기 위해 사용될 수 있습니다.
중국어, 일본어, 한국어는 전형적인 고정 너비값(Mono space)을 갖는 언어입니다. 고정 너비값이란 각각의 문자가 다른 문자와 동일한 공간을 차지한다는 것입니다. 다시 말해, 받침이 있건 없건 상관없이 각각의 글자가 차지하는 공간이 모두 같다는 의미입니다.
이런 언어들은 주로 왼쪽에서 오른쪽으로 글자 표기를 하지만 위에서 아래로도 표기합니다. 종종 이 언어들은 세로 쓰기를 할때 위에서 아래로 오른쪽에서 왼쪽으로 표기를 하기도 합니다. 즉, 세로 쓰기를 할 때,이 언어들은 아랍어나 히브리어와 유사하게 세로줄이 오른쪽에서 왼쪽으로 쓰여진다는 뜻입니다. 가장 오른쪽 세로줄이 첫째줄이고, 그 다음 오른쪽 세로줄이 둘째줄이 된다는 것입니다.
구분선을 기준으로 위쪽은 가로 쓰기에서 각 언어들이 왼쪽에서 오른쪽으로 표기하는 사례를 보여주며, 구분선을 기준으로 아래쪽은 세로 쓰기에서 각 언어들이 오른쪽에서 왼쪽으로 표기하는 사례를 나타냅니다.
1.6. 언어 옵션 (Language options)
하나 이상의 서체는 다국어 콘텐츠를 출력하기 위해 각각의 언어가 가진 서로 다른 표기 체계(Writing system)를 사용하면서 동시에 동일한 UI 내에서 표현할 수 있어야 합니다.
표기 체계는 아래와 같이 3 가지 유형으로 분류될 수 있습니다.
1.6.1. 영어와 유사한 서체 (English-like typeface)
서부, 중부, 동부 유럽과 다수의 아프리아 국가들의 언어는 라틴어를 기반으로 하는 알파벳으로 글자를 표기합니다. 베트남어는 그 중에서도 예외적으로 라틴 표기 체계로부터 현지화한 형식(Localized form)을 사용합니다.
현지화한 형식의 특징은 상승 문자(Ascender)의 끝이 라틴어에 비해 더 높은 것에 있습니다. 또한 그리스어와 키릴문자의 표기 체계 역시 라틴어 표기와 매우 유사합니다.
1.6.2. 높이값이 높은 서체 (Tall typeface)
더 큰 글자 형상(Glyphs)에 따라 더 높은 줄 간격(Line height)을 요구하는 언어들도 있습니다. 아랍어, 힌디어, 텔루구어(Telugu), 태국어, 베트남어와 같은 남아시아, 동남아시아, 중동 언어들이 이 언어에 해당됩니다.
1.6.3. 짙은 서체 (Dense typeface)
중국어, 일본어, 한국어는 더 큰 글자 형상(Glyphs)에 따라 더 높은 줄 간격(Line height)을 요구하는 언어입니다.
현재 머티리얼 디자인 원문의 짙은 서체(Dense typeface) 관련 설명이 높이값이 높은 서체(Tall typeface)와 동일합니다.
해당 내용과 관련하여 구글에 피드백 요청 의견을 남겨두었는데, 아마도 해당 내용은 특정 언어는 획의 두께가 더 짙게 표현된다는 것을 의미하는 것 같은데, 제대로 설명이 되지 않은 것으로 보입니다. 굳이 더 높은 줄 간격을 갖는 게 특징이라면 높이값이 높은 서체(Tall typeface)와 짙은 서체(Dense typeface)를 구분할 필요가 없어 보이기 때문입니다. 이후 내용을 다시 확인해보도록 하겠습니다.
2. Noto 서체 사용 지침 (Noto guidance)
Noto 서체는 Roboto 서체가 처리하지 못하는 다른 언어들을 처리할 수 있는 기본 서체입니다. Noto 서체는 안드로이드 시스템에서 기본으로 제공됩니다. Noto 서체는 여러 언어에 걸쳐 조화로운 표현이 가능하고, 높이값(Tall)과 두께감(Dense) 표현에 유연하도록 디자인되었습니다.
Noto 서체는 유니코드 버전 6.0(Unicode version 6.0)에서 93개의 언어(Script)를 지원하고 있습니다. 스크립트는 언어의 표기 체계(Writing system)와 구분되는 개념이며, 엄밀히 이야기해서 언어 구분으로 설명하지 않습니다.
스크립트의 쉬운 예는 일본어 표기 체계의 히라가나와 가타카나입니다. 일본어 표기 체계(Writing system)은 2개의 세부 표기체계를 갖는데, 각각의 표기 체계를 스크립트(Script)라고 부릅니다.
하지만 편의상 이하에서는 스크립트를 특정 언어와 동일한 개념으로 설명하겠습니다. 머티리얼 디자인의 설명도 스크립트를 언어의 표기체계와 크게 구분하여 설명하고 있지는 않기 때문입니다.
2.1. 짙게 표현되는 언어에 대한 고려 (Dense script considerations)
Noto CJK(Noto Chinese, Japanese, Korean) 서체는 영어의 두께(Weight)를 표현하는 설정과 동일하게 7가지 두께(Weight)를 설정할 수 있습니다. 이전 포스팅에서 Roboto 서체는 두께를 일반적으로 Light, Regular, Medium, Bold로 표현한다고 하였습니다.
여기서 7가지 두께는 Extra Light, Extra Bold와 같이 위에서 설명한 4가지 외에 추가적으로 설정할 수 있는 값을 포함하는 것입니다.
Noto CJK 서체에서 서체 스케일로 제목(Title)보다 작은 서체 크기(Type size)가 적용되면 라틴어 유형의 서체와 조화를 이루기 위해 라틴어 유형(Latin type)의 서체 스케일을 조정해야 합니다.
즉, Noto CJK 서체가 적용되는 언어(중국어, 일본어, 한국어)들에서 일정 수준 이하로 서체 스케일이 적용되면 라틴어와의 서체 스케일의 조화가 깨진다는 의미이고, 라틴어와 해당 언어의 스케일을 다르게 적용해야 된다는 의미입니다.
Noto CJK 서체는 라틴어 유형(Latin type)의 문자들에 비해 줄 간격(Line height)이 조금 더 넓게 설정됩니다.
위 그림은 중국어와 일본어의 줄간격 비교 예시입니다.
2.2. 높이값이 높은 언어에 대한 고려 (Tall script considerations)
Noto 서체는 남아시아, 동남아시아, 아랍어, 힌디어, 태국어를 포함한 중동 언어들처럼 높이값이 높은 언어들을 지원합니다. 이 언어들은 두께를 Regular로 표현할 수 있고, Medium은 지원하지 않습니다. 이 언어들은 두께를 Bold로 설정하면 획이 너무 무겁게 표현되기 때문에 이를 설정하는 것을 피해야 합니다.
이 언어들도 위의 Noto CJK 예에서와 마찬가지로 서체 스케일로 제목(Title)보다 작은 서체 크기(Type size)가 적용되면 라틴어 유형의 서체와 조화를 이루기 위해 라틴어 유형(Latin type)의 서체 스케일을 조정해야 합니다.
위 그림에서 왼쪽은 태국어, 오른쪽은 데바나가리어입니다.
높이값이 높은 언어는 당연하겠지만 라틴어 유형의 문자들에 비해 줄 간격(Line height)이 조금 더 여유있게 설정됩니다.
위 그림은 태국어와 데바나가리어의 줄간격 비교 예시입니다.
3. 언어 유형 참고사항 (Language categories reference)
3.1. 언어 유형 참고사항 (Language categories reference)
구글은 제품의 글로벌 버전 출시를 용이하게 하기 위해 언어를 영어와 유사한 언어(English-like), 높이값이 높은 언어(Tall), 짙은 언어(Dense)와 같이 3가지 유형(Category)으로 분류하고 있습니다.
영어와 유사한 유형의 언어는 라틴어(베트남어 제외), 그리스어(Greek), 키릴문자(Cyrillic), 히브리어(Hebrew), 아르메니안(Armenian), 조지안(Georgian) 등이 있습니다.
높이값이 높은 언어(Tall)는 남부, 동남아시아, 아랍어, 힌두어, 텔루구어(Telugu), 태국어, 베트남어와 같이 더 넓은 줄 간격(Line height)를 요구하는 언어들입니다.
짙은 언어(Dense)는 더 넓은 줄간격(Line height)을 요구하는 언어로 문자가 고정 너비값(Mono space)을 갖는 다는 점에서 높이값이 높은 언어(Tall)와는 구분되며, 중국어, 일본어, 한국어가 이에 해당됩니다.
위에서 설명이 충분하진 않았지만 짙은 언어(Dense script)는 더 넓은 줄간격을 요구한다는 점에서는 높이값이 높은 언어와 유사하지만 문자가 고정 너비값(Mono space)으로 표현된다는 점에서 짙은 언어(Dense script)로 구분 하는 것으로 예상됩니다. 해당 내용이 추가적으로 확인되면 더 정확하게 업데이트하도록 하겠습니다.
| Code | Description | Category |
|---|---|---|
| af | Afrikaans | English-like |
| am | Amharic | English-like |
| ar | Arabic (Modern Standard) | Tall |
| az | Azerbaijani | English-like |
| bg | Bulgarian | English-like |
| bn | Bengali | Tall |
| ca | Catalan | English-like |
| cs | Czech | English-like |
| cy | Welsh | English-like |
| da | Danish | English-like |
| de | German | English-like |
| el | Greek | English-like |
| en | English (US) | English-like |
| en-GB | English (UK) | English-like |
| es | Spanish (European) | English-like |
| es-419 | Spanish (Latin American) | English-like |
| et | Estonian | English-like |
| eu | Basque | English-like |
| fa | Persian | Tall |
| fi | Finnish | English-like |
| fil | Filipino | English-like |
| fr | French (European) | English-like |
| fr-CA | French (Canadian) | English-like |
| gl | Galician | English-like |
| gu | Gujarati | Tall |
| hi | Hindi | Tall |
| hr | Croatian | English-like |
| hu | Hungarian | English-like |
| hy | Armenian | English-like |
| id | Indonesian | English-like |
| is | Icelandic | English-like |
| it | Italian | English-like |
| iw | Hebrew | English-like |
| ja | Japanese | Dense |
| ka | Georgian | English-like |
| kk | Kazakh | English-like |
| km | Khmer | Tall |
| kn | Kannada | Tall |
| ko | Korean | Dense |
| ky | Kirghiz | English-like |
| lo | Lao | English-like |
| lt | Lithuanian | English-like |
| lv | Latvian | English-like |
| mk | Macedonian | English-like |
| ml | Malayalam | Tall |
| mn | Mongolian | English-like |
| mr | Marathi | Tall |
| ms | Malay | English-like |
| my | Burmese (Myanmar) | Tall |
| ne | Nepali | Tall |
| nl | Dutch | English-like |
| no | Norwegian (Bokmål) | English-like |
| pa | Punjabi | Tall |
| pl | Polish | English-like |
| pt | Portuguese (Brazilian) | English-like |
| pt-PT | Portuguese (European) | English-like |
| ro | Romanian | English-like |
| ru | Russian | English-like |
| si | Sinhala | Tall |
| sk | Slovak | English-like |
| sl | Slovenian | English-like |
| sq | Albanian | English-like |
| sr | Serbian (Cyrillic) | English-like |
| sr-Latn | Serbian (Latin) | English-like |
| sv | Swedish | English-like |
| sw | Swahili | English-like |
| ta | Tamil | Tall |
| te | Telugu | Tall |
| th | Thai | Tall |
| tr | Turkish | English-like |
| uk | Ukrainian | English-like |
| ur | Urdu | Tall |
| uz | Uzbek | English-like |
| vi | Vietnamese | Tall |
| zh-Hans | Chinese (Simplified) | Dense |
| zh-Hant | Chinese (Traditional) | Dense |
| zu | Zulu | English-like |
위의 표는 각각의 언어 코드와 언어가 갖는 스크립트, 각 언어의 유형을 정리한 것입니다.
4. 마무리
단일 언어를 지원하는 제품에서 문자(Text)는 특정 UI 내에서 표현 시 높이값에 대한 고려가 크게 영향을 받지 않습니다. 머티리얼 디자인에서 설정한 서체 스케일에 따라서 충실히 적용한다면 UI 표현에서 문자가 잘리는 등의 문제가 될 것은 없다는 것입니다.
다만 다국어를 지원하는 제품의 경우 단순히 서체 스케일에 따라 문자를 표현하는 것을 넘어서 문자를 포함하는 구성 요소(예: 컨테이너, 기타 구성 요소)들의 높이값이 사전에 더 여유있게 설정되어야 특정 언어에서 글자 잘림 현상을 방지할 수 있습니다.
즉, 서체 스케일을 통한 문자 표현 시 각각의 서체 스케일로 표현되는 문자들 간에 균형을 유지하는 것 뿐만 아니라 이를 포함하는 구성 요소들의 높이값에 대한 검토도 충분히 이루어져야 한다는 것을 의미합니다.
이러한 이유로 구글에서 개발한 대부분의 레퍼런스 서비스들을 분석해보면 각 서체 스케일이 적용되는 상황에서 해당 서체를 포함하는 구성요소들의 높이값이 충분히 여유있게 설계된 것을 흔히 볼 수 있습니다.
이는 단순히 구글의 디자인 선호로 볼 것이 아니라 다양한 언어에 대한 분석을 통해 적용한 값으로 이해해야 하며, 이를 수정하여 화면에 출력하고자 하는 콘텐츠를 단순히 늘리지 말아야 하는 이유가 되는 것이기도 합니다.
서체와 관련된 내용은 이번 콘텐츠로 마무리가 되었습니다. 다음 콘텐츠는 소리(Sound)를 통해 제품 내에서 어떻게 사용자와 상호작용(Interaction) 하는지를 설명하겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기