[UX] 구글 머티리얼 디자인 – 3.6.머티리얼 기초(Material foundation) – 서체(Typography): 서체 이해하기(Understanding typography)
서체는 계층적 속성을 갖고 있고, 브랜드를 표현합니다. 여기서 계층적 속성이란 서체가 위치하는 기준선(Baseline), 상단기준선(Cap Height) 등을 표현하는 서체와 관련된 규격들을 의미합니다. 서체는 앞서 이야기한것처럼 이미지와 함께 제품을 표현하는 주된 요소이며, 제품에서 표현하고자 하는 브랜드를 서체로 나타낼 수 있습니다.
출처: 원문보기
1. 서체 속성 (Type properties)
서체 종류(Typeface)는 문자들의 집합을 의미합니다. Roboto, Noto sans등의 서체들이 서체 종류(Typeface)의 하나라고 생각하면 됩니다. 서체에서 각각의 문자는 고유하기도 하지만, 특정한 모양은 문자 전반에 걸쳐서 동일하게 유지합니다. 서체 종류(Typeface)는 이를 구성하는 문자 전반에 걸쳐 일정한 모양의 패턴을 갖습니다.
다시 말해, Roboto라는 서체 종류에서 문자 A,B,C,D와 같이 각각의 문자를 표현하는 패턴이 비슷하게 유지된다는 뜻입니다. 예를 들어, 어떤 문자는 꺽어서 표현하고 어떤 문자는 꺽지 않고 반듯하게 표현하지 않는다는 뜻입니다. 명조체에 고딕체로 표현하는 자음이나 모음 등의 문자가 섞여 있지 않다는 것입니다.
제품에서 표현하고자 하는 스타일, 가독성 등을 위해 선택된 서체 종류는 아래와 같은 서체 디자인의 기본 원리를 따를 때, 가장 효과적입니다.
또한 서체나 제품을 표현하는 로고를 직접 디자인하고자 한다면 아래의 서체가 갖고 있는 속성을 이해하고 디자인을 해야 합니다.
위 그림은 해당 서체에서 각 문자를 표현하는 요소와 규격들의 명칭을 나타내고 있습니다. 각각의 명칭에 따른 설명은 아래에서 다시 자세히 다루겠습니다.
1.1. 기준선 (Baseline)
기준선(Baseline)은 문자위에 떠 있는 가상의 선입니다. 다른 표현으로 이 가상의 선 위에 문자들이 앉아 있다고 표현하기도 합니다. 머티리얼 디자인에서 기준선(Baseline)은 글자와 다른 UI 개별요소와의 수직 거리를 측정하는 중요한 개념입니다.
위 그림을 보면 y는 기준선(Baseline)을 넘어서 표현되지만 y가 표현되는 가장 아래를 기준으로 하여 다음 줄과의 줄간격이 결정되거나 다음에 등장하는 또 다른 UI 개별요소(예: 버튼, 컨테이너 등) 와의 간격이 결정되지 않는다는 것을 의미합니다.
1.1.1. 4dp 기준선 (4dp grid)
문자(Type)는 4dp 기준선 위에 위치합니다. 여기서 주의할 점은 모든 문자(모음, 자음)가 해당 기준선 위에 정확히 놓이는 것은 아닙니다. 위의 그림에서 문자 y는 끝부분이 이 기준선을 넘어서 표현되기도 합니다.
문자가 pt 사이즈로 표현되든 sp 사이즈로 표현되든 상관없이 문자는 4dp 기준선 위에 위치합니다. 이러한 이유로 줄 간격(Line height)는 위의 그림과 같이 24dp, 40dp, 44dp와 같이 4의 배수값을 갖는 dp로 설정합니다.
1.1.2. 기준선으로부터 문자를 측정하는 법 (Measurement from the baseline)
문자와 함께 표현되는 UI 개별 요소(UI elements)들의 거리는 기준선으로부터 산출됩니다. 기준선 값은 플랫폼의 소프트웨어에서 자동으로 산출됩니다. 그렇기 때문에 어떤 디자인 프로그램에서든 기준선으로부터의 거리는 일정하게 처리하며, 4dp 기준선에 따라 동작하게 됩니다. 안드로이드와 iOS 코드는 기준선에 의해 패딩(Padding) 값과 같은 규격이 결정되며, 웹(Web)은 Sass나 CSS에 의해서 규격이 결정됩니다.
위의 왼쪽 그림은 개별 요소들을 포함하는 박스 영역(컨텐이너 영역)이 아니라 4dp 기준선이 각 요소들의 수직 거리를 결정하는 것을 나타냅니다. 이것은 Adobe, Figma 같은 디자인 프로그램이나 iOS, 안드로이드와 같은 플랫폼에 영향을 받지 않고, 더 정확하게 요소들이 정렬될 수 있도록 합니다.
위의 오른쪽 그림은 레이아웃 내 다른 구성요소(Component)와 문자(Text)의 상대적인 거리를 측정하는 것을 나타냅니다. Caption과 Subtitme GS 1의 거리가 16dp로 결정되는 것은 Caption의 기준선(Baseline)과 Subtitle GS 1의 기준선(Baseline)의 간격을 의미하고 있습니다.
위의 오른쪽 그림에서 잘못 이해할 수 있는 부분이 있는데, OVERLINE과 카드(Cards)의 상단 엣지와의 거리가 32dp라는 것이 OVERLINE과 카드(Cards) 사이의 패딩(Padding)값이 32dp라는 것으로 오해해서는 안 됩니다.
이는 문자를 위치시키는 좌표값을 계산하기 위한 측면에서의 값입니다. 즉, 해당 문자의 y값이 얼마인지에 따라 해당 문자를 수직 정렬하는 과정에서 얼마의 줄간격으로 어디에 위치시킬 것이냐를 결정하기 위한 것이라는 것으로 이해해야 함을 의미합니다.
1.2. 대문자 높이 (Cap height)
대문자 높이(Cap height)는 서체에서 I, L과 같이 위와 아래가 납작한 대문자(Flat capital letters)들의 높이를 기준선으로부터 나타낸 높이값입니다. 서체 중에서 S나 A와 같이 문자의 끝이 둥글거(Round)나 뾰족한(Pointed) 대문자는 다른 문자와 크기가 같도록 보이게 하기 위해 대문자 높이(Cap height)보다 조금 더 높게 표현될 수 있습니다. 각각의 서체 종류는 서체마다 고유한 글꼴 높이값을 갖고 있습니다.
끝이 둥글거나 뾰족한 대문자(Round or pointed capital letters)들이 납작한 대문자(Flat capital letters)와 같은 글꼴 높이를 갖는 경우, 끝이 둥글거나 뾰족한 대문자는 그렇지 않은 대문자들에 비해 착시 효과로 인해 더 작게 보입니다.
이에 따라 아래 그림에서 아래가 납작한 대문자(Flat capital letters)를 기준으로 산정된 대문자 높이(Cap height)보다 끝이 둥글거나 뾰족한 대문자는 문자 높이가 더 높을 수 있다는 것입니다.
또한 위 설명에서 서체의 특징에 따라 각 문자의 높이값은 같은 문자라도 더 높거나 낮게 표현될 수 있다는 것이 각각의 서체가 고유한 글꼴 높이를 갖는다고 표현한 것입니다.
1.3. 소문자 x를 기준으로하는 글꼴의 높이 (X-height)
X-height는 소문자 x의 높이를 기준선으로부터 나타낸 높이값입니다. 서로 다른 서체에서 동일한 소문자 x의 높이값을 비교하여 각 서체들의 높이값을 비교할 수 있습니다.
높이값이 높은 X-height를 갖는 서체는 X-height가 작은 서체에 비해 더 높은 가독성(Legibility)을 갖습니다.
이러한 것은 각각의 문자들에 포함된 공백 영역 등이 더 넓게 표현되기 때문에 더 높은 가독성을 가질 수 있게 되는 것입니다. 예를 들어, X-height가 서로 다른 두 서체에서 같은 서체 크기(Type size) 16dp로 문자 O를 표현한다고 가정해 보겠습니다. 두 서체의 서체 크기는 동일하게 16dp지만 X-height값이 더 큰 서체는 다른 서체에 비해 O의 내부 영역을 더 넓게 표현할 수 있을 것입니다. 이러한 요소는 가독성(Legibility)에 영향을 줄 수 있다는 것입니다.
위 그림은 소문자 x가 각 서체의 X-height를 결정하는 것을 보여주고 있습니다.
1.4. 상승문자와 하강문자 (Ascenders and descenders)
상승문자(Ascenders)와 하강 문자(Descenders)는 기준선(Baseline)과 대문자 높이(Cap height)를 벗어나서 표현되는 특정 문자들을 의미합니다. 또한 이러한 문자들의 경계를 각각 Ascender line, Descender line으로 구분합니다. 경우에 따라 줄간격(Line height)이 너무 좁게 설정되면 상승문자나 하강문자는 이전 또는 다음 줄을 침범하기도 합니다.
위 그림은 y와 같이 기준선(Baseline)보다 아래쪽으로 표현되는 문자 y의 Descender line과 대문자 높이(Cap height)를 넘어서서 위쪽으로 표현되는 문자 d의 Ascender line을 나타내고 있습니다.
1.5. 무게감 (Weight)
서체의 무게감(Weight)은 서체의 획(Stroke)의 상대적 두께(Relative thickness)를 타나냅니다. 서체는 다양한 무게감을 가질 수 있습니다. 서체는 일반적으로 4가지에서 6가지에 이르는 다양한 무게감으로 표현될 수 있습니다.
위 그림은 획이 가장 얇은 Light에서부터 가장 두꺼운 Bold에 이르는 획의 두께를 나타낸 것입니다. 4가지로 서체의 무게감을 구분한다면 Light, Regular, Medium, Bold로 구분하는 것이 일반적입니다.
2. 서체 유형 (Type classification)
2.1. Serif 서체
Serif는 문자 획의 시작과 끝에 나타나는 작은 장식선을 부르는 용어입니다. 한글에서 명조체나 바탕체에서 볼 수 있는 꺽음 표현이 있는 서체 유형이 Serif 서체와 유사하다고 볼 수 있습니다. Serif를 포함하고 있는 서체 유형을 Serif 서체라고 부르며, Serif 서체는 다음의 유형 중 하나로 분류될 수 있습니다.
각각의 Serif 서체는 Serif의 강조 정도, Serif의 방향, 문자 내에서 굵은 부분과 얇은 부분의 차이 등에 따라 유형이 분류됩니다.
2.1.1. 잉크로 쓴 것과 닮은 오래된 Serif(Old-Style serifs) 서체
- 문자 내에서 두꺼운 부분과 얇은 부분의 차이가 적음 (Low contrast between thick and thin strokes)
- 획의 표현에서 사선으로 꺽음이 표현 (Diagonal stress in the strokes) – 아래 그림의 1번에서 S의 꼬리 방향이 문자의 끝을 따라서 사선으로 이어지듯이 표현
- 소문자 상승문자에서 기울어진 형태로 Serif 표현 (Slanted serifs on lower-case ascenders)
2.1.2. 과도기적 Serif(Transitional serifs) 서체
- 문자 내에서 두꺼운 부분과 얇은 부분의 차이가 큼 (High contrast between thick and thin strokes)
- 중간 정도의 X-height (Medium-High x-height)
- 장식선의 표현을 수직으로 강조 (Vertical stress in the strokes) – 아래 그림의 2번에서 S의 장식선 방향이 S의 끝 획과 수직 방향으로 표현
- 양쪽으로 표현되는 Serif (Bracketed serifs) – 아래 그림의 2번에서 S의 장식선 표현이 1번과 달리 S의 끝 획을 기준으로 아래와 위로 모두 표현되는 것을 Bracket이라 함
2.1.3. 신고전주의 Serif(Didone or neoclassical serifs) 서체
- 문자 내에서 두꺼운 부분과 얇은 부분의 차이가 매우 큼 (Very high contrast between thick and thin strokes)
- 획의 표현을 수직으로 강조 (Vertical stress in the strokes) – 아래 그림의 3번에서 S의 꼬리 방향이 수직 방향으로 표현
- 둥글게 마무리 되는 획의 표현 (Ball terminal strokes) – 아래 그림의 3번에서 S의 꼬리 표현이 2번보다 더 둥근 아치를 따라 표현
2.1.4. 판 Serif(Slab serifs) 서체
- 문자 내에서 두꺼운 부분과 얇은 부분의 차이가 크지 않고, Serif도 장식선도 두껍게 표현 (Heavy serifs with imperceptible differences between the stroke weight)
- 최소화되거나 한쪽으로 표현되는 Serif (Minimal or no bracketing) – 아래 그림 4번에서 S의 꼬리 표현이 한쪽으로만 향하는 것을 의미
2.2. Sans Serif 서체
Sans Serif는 문자획의 시작과 끝에 나타나는 장식선인 Serif가 없는 서체 유형입니다. 불어로 Sans는 없다(Without)는 의미로 한글 서체 중 고딕체나 굴림체 등이 이에 해당됩니다. Sans Serif는 문자 내에서 굵은 부분과 얇은 부분의 차이 등에 따라 유형이 분류됩니다.
2.2.1. Grotesque 서체
Grotesque 서체는 수직으로 강조되는 획이 발견되거나 획이 없기도 합니다. 문자 내에서 굵은 부분과 얇은 부분의 차이가 적은 서체입니다. 위 그림의 1번 항목이 여기에 해당됩니다.
2.2.2. Humanist 서체
Humanist 서체는 문자 내에서 굵은 부분과 얇은 부분의 차이가 중간 정도인 서체입니다. 다소 두껍게 표현되어 강조를 표현합니다. 위 그림의 2번 항목이 여기에 해당됩니다.
2.2.3. Geometric 서체
Geometric 서체는 문자 내에서 굵은 부분과 얇은 부분의 차이가 적은 서체입니다. 수직으로 강조하는 획이 있고, 획의 끝이 둥근게 특징입니다. 위 그림의 3번 항목이 여기에 해당됩니다.
2.3. Monospace 서체
Monospace 서체는 모든 문자의 너비를 동일하게 출력하는 하는 것이 특징입니다. 일반적으로 Monospace 서체가 아닌 다른 유형의 서체는 각각의 문자마다 너비값이 다릅니다.
예를 들어, 문자 M은 일반적으로 다른 문자에 비해 문자의 너비(Width)가 더 넓습니다.
위 그림은 Monospace 서체 종류를 나타냅니다. 가장 왼쪽부터 오른쪽으로 Roboto Mono, Space Mono, VT323 서체입니다.
2.4. Handwriting 서체 (손글씨와 같이 화려하게 표현된 서체)
Handwriting 서체는 자연스럽고, 손글씨 느낌을 가진 비격식적인 서체 유형입니다. 이 서체는 주로 서체 스케일(Scale) 중 헤드라인(Headline)에만 적용되어 사용됩니다.
서체 스케일 중 헤드라인 스케일인 H1에서부터 H6에만 적용되며, 그 외의 서체 스케일에는 글자 크기가 작아짐에 따라 Handwriting 서체는 가독성이 떨어질 수 있기 때문에 적용하지 않는다고 이전 포스팅에서도 설명하였습니다.
Handwriting 서체는 세부적으로 아래와 같이 분류될 수 있습니다.
2.4.1. Black letter 서체
문자 내에서 굵은 부분과 얇은 부분의 차이가 크며, 곧은 선과 각진 곡선, 졻은 자간 등이 특징입니다. 위 그림의 1번 항목입니다.
2.4.2. Script 서체 (대본 원고와 같이 화려하게 표현된 서체)
붓글씨를 모사한 것과 같은 서체로 다른 유형의 Handwriting 서체에 비해 더 격식있는 글씨체에 해당합니다. 위 그림의 2번 항목이 여기에 해당됩니다.
2.4.3. Black letter 서체
손글씨를 모사한 것과 같은 서체로 덜 격식있는 글씨체에 해당합니다. 위 그림의 3번 항목이 여기에 해당됩니다.
2.5. Display 서체
Display 서체는 기타 유형으로 분류되며 Handwriting 서체와 같이 서체 스케일이 큰 경우에만 적합한 서체들이 여기에 해당됩니다. Handwriting 서체와 마찬가지로 서체 스케일 중 H1에서부터 H6에만 적용됩니다.
3. 가독성 (Readability)
Legibility는 같은 서체 내에서 서로 다른 문자들을 얼마나 잘 구분하여 인식할 수 있는가와 관련된 개념이라면 Readability는 사용자들이 문자로 결합된 단어나 문단을 얼마나 쉽게 읽을 수 있을지를 나타내는 개념입니다. Readability는 서체 종류(Typeface)의 줄 간격(Line height), 자간(Letter spacing) 등의 서체 스타일에 의해 영향을 받으며, 이런 개념이 Legibility와 구분됩니다.
Legibility와 Readability는 한글로 번역을 했을 때, 가독성이라는 개념으로 의미 구분이 모호합니다. 이러한 이유로 머티리얼 디자인에서는 Legibility와 Readability를 구분하고 있습니다.
그럼에도 불구하고 명확하게 Legibility와 Readability의 개념이 와 닿는 것 같지는 않습니다만 주로 서체에서 표현하는 문자 자체를 얼마나 구분하기 쉽냐와 그 문자들로 구성된 단어나 단락이 얼마나 쉽게 구분되느냐 정도로 Legibility와 Readability를 구분하고 있다는 것으로 이해하고 넘어가겠습니다.
Legibility와 Readability는 머티리얼 디자인 내용 전반에서 자주 사용되는 개념이기 때문에 잘 기억해두고 해당 개념이 의미하는 바를 잘 구분하여 이해하길 바랍니다.
3.1. 자간 (Letter-spacing)
글자 간격(자간, Letter-spacing)은 각 문자들 사이에 정해진 고유한 간격을 나타냅니다. 아래 그림에서 x, y, M이 각각 갖는 자간을 붉은색 음영으로 표시하고 있고, 각각의 간격이 다른 것을 확인할 수 있습니다.
아래 그림에서 더 큰 서체 크기를 갖는 헤드라인(Headline)과 같은 서체 스케일은 자간(Letter-spacing)을 작게(Tighter) 설정함으로써 문자들 사이의 간격을 줄이고, 가독성(Readability)을 높인다고 하고 있습니다.
위 그림은 자간이 상대적으로 작게(Tighter) 설정된 예시를 나타냅니다.
헤드라인과 같은 서체 스케일은 서체의 크기(Type size)가 큰데, 이 경우 왜 자간을 작게(Tighter) 설정하는 게 가독성과 어떤 관련이 있는지를 생각해보면, 같은 단어라고 하더라도 서체의 크기가 크면 우리 눈이 단어를 인식해야하는 범위(시야각)가 상대적으로 커지게 됩니다. 이때, 서체의 크기가 큰 경우 일반적으로 자간도 같이 넓어지기 때문에 인식해야 하는 문자들의 단어의 범위는 더 넓어지게 됩니다. 그렇기 때문에 서체의 크기가 커지는 경우 자간을 조금 더 작게(Tighter) 설정하여 시야에 단어들이 더 잘 들어오게하고, 가독성(Readability)을 높일 수 있다는 것입니다.
반대로 서체의 크기(Type size)가 작은 경우, 자간을 넓게(Looser) 설정하여 문자들 사이에 더 넓은 공간을 제공하고, 각각의 문자를 구분할 수 있도록 하여 더 높은 가독성을 확보할 수 있습니다. 또한 서체의 크기가 작은 경우, 대문자를 사용하면 가독성을 높이는데 도움이 될 수 있습니다. 대문자는 소문자에 비해 더 넓은 자간을 갖기 때문입니다.
위에서 설명한 헤드라인과 같은 서체 스케일과는 반대로 서체의 크기가 작은 경우 눈이 단어를 인식하는 범위(시야각)는 문제가 되지 않습니다. 하지만 서체 크기가 작은 경우 문자들이 중첩되어 단어들을 구분하는 것이 오히려 가독성에 영향을 주게 됩니다. 이러한 이유로 반대로 자간을 더 여유있게 설정(Looser)하여 가독성을 확보하는 것입니다.
위의 내용을 종합해보면 자간(Letter-spacing)은 가독성(Readability)에 얼마나 문자들을 시야에 잘 들어오게 하면서 동시에 각 문자들이 서로 중첩되지 않고 잘 구분되도록 할 것인가와 연관되는 속성이라고 볼 수 있습니다.
3.1.1. 표, 그림 등의 표현 (Tabular figures)
표나 그림에서 숫자를 표현하는데, 똑같은 자간(Letter-spacing)을 갖는 Monospace 서체는 가독성을 높일 수 있습니다.
위 그림에서 숫자마다 서로 다른 자간을 갖는 숫자를 표(Proportional figures)에 사용한 위의 사례와 동일한 자간을 갖는 숫자를 표(Tabular/Monospaced figures)에 사용한 아래 사례를 비교해보면, 잘 정렬된 숫자들이 시야에서 더 쉽게 인식된다는 것을 알 수 있습니다.
3.2. 줄 길이 (Line length)
줄 길이(Line length)는 한 줄에 들어가는 글자수입니다. 참고로 아래의 줄 길이와 관련된 설명은 영문을 기준으로 설명하고 있습니다. 본문(Body)을 위한 줄 길이는 보통 40자에서 60자 사이입니다. 데스크톱 환경과 같은 경우 20sp에서 24sp 기준으로 120자까지 줄길이가 길어질 수 있습니다. 이 기준에 따라 한 줄에 표현하는 글자의 자간이나 서체 크기를 적절히 조절하면 됩니다.
위 그림에서 한 줄에 30자를 포함하는 경우 너무 좁은(Too narrow) 경우로 간주하며, 이상적인 줄 길이는 40자에서 60자 내외로 보고 있습니다. 60자를 초과하는 경우 조금 긴(A little wide) 것으로 봅니다. 90자에 근접한 경우 너무 긴(Too wide) 것으로 간주합니다.
위 그림은 특별히 짧은 줄을 요구하는 경우 20자에서 40자 내외가 적정하다고 하고 있습니다.
3.3. 줄 간격 (Line height)
줄 간격(Line height)은 단락의 기준선 사이의 전체 공간을 의미합니다. 문자는 4dp 기준선(Baseline)에 위치하며, 서체의 크기와 이전 줄 사이에 약간의 여백을 갖는데, 서체의 크기(Type size)와 이 여백을 합한 공간의 크기를 줄 간격이라고 합니다. 줄 간격은 서체 크기(Type size)에 따라서 가변적입니다.
위의 왼쪽 그림은 서체 크기가 14dp인 경우 6dp의 여백을 포함하여 20dp를 줄간격으로 갖는 것을 나타내고, 오른쪽 그림은 서체 크기가 20dp인 경우 8dp의 여백을 포함하여 28dp의 줄간격을 갖는 것을 나타냅니다.
3.4. 단락 간격 (Paragraph spacing)
단락 간격(Paragraph spacing)은 서체 크기(Type size)의 0.75배에서 1.25배 사이로 설정합니다.
위 그림은 서체 크기가 20sp이고, 줄 간격이 30dp인 상황에서 28dp의 단락 간격을 적용한 것을 나타냅니다. 위의 예시에서 20sp는 20dp와 크기가 동일하기 때문에 단락 간격의 최대치인 1.25배를 적용해도 25dp가 되어야 하지만 제안한 값보다 더 크게 설정된 것을 볼 수 있습니다.
이는 임의로 3dp를 더한 것이 아니라 위에서 설명한 줄 간격(Line height)이 4dp grid로 구성되기 때문에 이러한 것을 종합적으로 고려하여 4의 배수인 28dp를 단락 간격으로 적용한 것을 알 수 있습니다.
3.5. 정렬 기준 (Type alignment)
정렬 기준은 문자가 출력되는 공간에서 문자가 어떻게 정렬되는지를 설정합니다. 정렬 기준은 다음과 같이 3가지 기준이 있습니다.
- 좌측 정렬(Left-aligned): 문자가 왼쪽 여백으로부터 정렬됩니다.
- 우측 정렬(Right-aligned): 문자가 우측 여백으로부터 정렬됩니다.
- 중간 정렬(Centered): 문자가 출력되는 공간의 중간을 기준으로 문자가 정렬됩니다.
3.5.1. 좌측 정렬(Left-aligned)
좌측 정렬은 영어와 같이 좌측에서 우측으로 기술하는 언어에서 가장 흔히 사용되는 설정입니다.
위 그림은 좌측 정렬된 본문을 나타냅니다.
3.5.2. 우측 정렬(Right-aligned)
우측 정렬은 아랍어나 히브리어와 같이 우측에서 좌측으로 기술하는 언어에서 가장 흔히 사용되는 설정입니다. 좌측에서 우측으로 기술하는 언어는 경우에 따라 우측 정렬을 사용할 수 있습니다. 예를 들어, 레이아웃 내에서 다른 개별 요소들과 구분되는 짧은 구문(예: Side note)를 구분하기 위해 우측 정렬을 사용할 수 있지만 긴 문장에 우측 정렬을 사용하는 것은 권장하지 않습니다.
위 그림은 단락을 요약 설명하는 Side note에 우측 정렬이 적용된 사례를 나타냅니다.
3.5.3. 중간 정렬(Centered)
중간 정렬은 레이아웃 내에서 인용문같이 짧은 구문을 표현하는 개별 요소를 구분하기 위해 사용됩니다. 우측 정렬과 마찬가지로 긴 문장에서 중간정렬은 가독성(Readability) 문제로 권장하지 않고 있습니다.
위 그림은 인용문을 중간 정렬로 표현한 사례를 나타냅니다.
4. 시스템 서체 (System fonts)
시스템 서체는 컴퓨터나 장치에 기본적으로 설치되어 있습니다. 시스템 서체는 개발자들을 위해 다양한 언어를 지원하며, 사용료 없이 무료로 제공됩니다. 앱에서 시스템 서체를 사용하면 여러 플랫폼(iOS, Android, Web)에 걸쳐 앱의 외형(Look and feel)을 일관성 있게 표현할 수 있습니다. 물론, 일부 장치에서는 이를 지원하지 않을 수 있기 때문에 시스템 서체가 적용되지 않을 수도 있습니다.
시스템 서체는 기본적으로 해당 플랫폼에서 지원하지 않을 경우 플랫폼에서 알아서 변경을 해주거나 OS가 업데이트 되는 과정에서 적용이 되지만 일부 장치는 업데이트 지원이 종료되는 상황이 있을 수 있기 때문에 시스템 서체가 완벽히 적용되지 않을 수 있다고 설명하고 있는 것입니다.
4.1. 시스템 서체 사용 (Using system fonts)
시스템 서체는 서체크기가 큰 영역과 14sp 이하의 작은 영역 등 어떤 영역에서도 사용될 수 있습니다.
Roboto 서체는 안드로이드 플랫폼의 기본 시스템 서체입니다. 안드로이드와 웹(Web) 플랫폼 이외의 다른 플랫폼을 고려하여 플랫폼에서 선호하는 시스템 서체를 사용하는 것이 권장됩니다. 예를 들어, iOS는 Apple’s San Francisco가 시스템 서체에 해당됩니다.
위의 왼쪽 그림은 안드로이드에서 시스템 서체인 Roboto가 적용된 것을 나타내며, 오른쪽 그림은 iOS에서 시스템 서체인 San Francisco가 적용된 것을 나타냅니다. 두 플랫폼에서 적용하고 있는 시스템 서체는 공교롭게도 모두 Sans serif 유형인 것이 특징입니다.
5. 마무리
오늘 다룬 내용은 서체를 직접 디자인하거나 서체를 활용해 로고 등을 디자인 하는 경우 서체 규격을 검토하고 이해하는데 도움이 될 수 있습니다. 또한 레이아웃 구성에서 본문 영역 등을 글자로 표현하는 과정에서 출력하고자 하는 글자수에 따라서 컨테이너 영역(Bounding box) 및 다른 개별 요소들이 어디에 출력되는지 등을 줄 간격이나 줄 길이 규격 등을 통해서 가늠해 볼 수 있을 것입니다..
오늘 내용에서 특히 중요한 것은 서체의 사용과 가독성(Readability)과 관련된 내용입니다. 프로젝트를 진행하다보면 레이아웃에 개별 요소로 표현되는 서체가 대개 레이아웃을 변경하지 못하는 상황에서 가장 간단하게 임의로 수정하는 것으로 의사결정을 하는데, 이는 글자의 가독성에 심각한 영향을 주는 경우가 많습니다.
WCAG 표준이 색상을 적용하는 것에는 다소 엄격할 수 있는 반면 서체에 대한 스타일을 변경하는 것은 이러한 표준에 영향을 덜 주기 때문에 이를 쉽게 생각하는 경우가 많다는 것입니다.
가독성을 떨어뜨리는 행위는 결국 제품에서 전달하고자 하는 메시지를 사용자에게 제대로 전달할 수 없다는 의미가 되기 때문에 가시적으로 당장 어떤 영향이 있을지 알 수 없더라도 쉽게 타협해서는 안 되는 것이라 감히 말씀드리겠습니다.
다음 내용은 서체와 관련된 마지막 내용으로 다국어를 지원하는 앱을 개발하면서 고려해야 될 요소들이 무엇인지에 대해 다룰 예정입니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기