-
Notifications
You must be signed in to change notification settings - Fork 0
/
fonts.qmd
150 lines (105 loc) · 12.3 KB
/
fonts.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
---
output: html_document
editor_options:
chunk_output_type: console
editor:
markdown:
wrap: sentence
---
# 글꼴
**글꼴(font)**은 디지털 광고와 마케팅에서 브랜드 아이덴티티(Brand Identity)와 메시지 강화를 위해 특정 글꼴이 사용되고, 모바일 앱에서도 글꼴은 사용자 인터페이스와 경험에 큰 축을 담당한다.
뉴스와 저널리즘에서 글꼴은 정보 신뢰성과 중요성을 강조하는 수단으로 작용할 뿐만 아니라, 뉴스 타이틀과 부제, 본문 등에서 다양한 글꼴을 조합함으로써 정보 구조를 더욱 명확히 하는데 기여한다.
교육 자료와 프레젠테이션(PPT)에서도 글꼴이 특히 중요한데, 텍스트가 주는 첫 인상은 강의 효과성을 크게 좌우하고, 글꼴 선택은 복잡한 정보를 더욱 쉽게 이해하는데 도움을 준다.
영화나 유튜브 동영상 제작에서 글꼴은 자막, 크레딧, 제목 등에서 활용될 뿐만 아니라 소셜 미디어(SNS), 인쇄물, 패키지 디자인 등 다양한 매체에 글꼴은 기능적이고 미적인 요소로 가미한다.
한걸음 더 들어가 과학기술 디지털 글쓰기에서 글꼴은 데이터 시각화, 표 제작, 코드 작성, 문서 작성 등 다양한 영역에서 중요한 역할을 한다.
데이터 과학에서 시각화는 매우 중요한데 그래프 문법(Grammar of Graphics)을 구현한 `ggplot` 패키지에서 그래프 라벨, 제목, 범례에 사용되는 글꼴을 달리 설정함으로써 시각적인 표현 정확도와 전달력을 높일 수 있다.
표 문법(Grammar of table)을 구현한 `gt` 패키지에서 표 제목, 칼럼명, 주석 등에 글꼴을 달리 적용함으로써 표를 전문적으로 보일 수 있다.
코드 작성 시 개발자가 사용하는 통합개발환경(RStudio IDE)에 사용되는 코딩 전용 글꼴은 가독성을 높여 코드의 신속한 분석과 수정을 가능하게 하고, 문자와 숫자, 특수문자를 명확히 구분하여 프로그래밍 중 발생할 수 있는 실수를 줄여주고, 고정폭 글꼴과 합자(ligature) 같은 특별한 시각적 요소를 통해 코드 일관성을 유지와 눈의 피로도 줄여준다.
글꼴은 데이터 과학 산출물에 해당되는 PDF, 워드 문서, 대시보드, 웹사이트, 이력서, 팜플렛 제작에도 활용된다.
보고서 PDF 문서 작성에 글꼴은 전문성을 높이고, 대쉬보드와 웹사이트 제작에 색상, 레이아웃과 함께 사용자 경험 향상에 큰 부분을 담당한다.
## 용어 설명
활자와 서체, 글꼴, 타이포그래프은 비슷한 개념처럼 느껴질 수 있으나 각각 다른 의미를 가지고 있다.
**활자(Type)**는 글자나 기호의 물리적 형태로 본래는 글자를 만드는 데 사용된 나무 또는 금속 조각을 일컫는 말이었습니다.
**서체(또는 글꼴 모음, Typeface)**는 글자 및 기호가 서로 비슷한 특징을 가지도록 디자인된 문자 스타일을 의미하며, '나눔고딕', 'Times New Roman', 'Helvetica' 같은 이름을 가진 것이 서체다.
**글꼴(Font)**은 서체의 여러 변형을 총칭하는 용어로, 특정 서체에서 굵고 진한 글꼴(Bold), 기울임(italic) 등 변형이 모두 포함된다.
**타이포그래피(Typography)**는 활자 서체의 배열을 의미하며, 서체의 선택, 글자 크기, 줄 간격, 단어 간격, 문장 사이 간격과 맞춤 등을 조절하여 읽기 쉽고 미적으로 효과적인 텍스트 제작을 의미한다.
전세계적으로 글꼴의 수는 무수히 많지만, 크게과 같이 크게 분류할 수 있다.
글꼴은 기본적으로 **세리프(serif)**와 **산세리프(sans serif)**의 2가지 스타일로 구분되는데 세리프는 글자의 획 끝에 작은 삐침이 있는 글꼴이며 산스(sans)는 프랑스어로 "없다", 또는 "없이"라는 뜻이기 때문에 삐침이 없는 글꼴을 지칭한다.
모노스페이스(`monospaced`) 글꼴은 코드 작성 등에서 유용하게 사용되며, 모든 글자가 같은 폭을 차지한다.
`Consolas`나 `D2 Coding`은 모노스페이스 글꼴의 대표적인 예다.
**디스플레이(Display)**와 **스크립트(Script)** 글꼴은 본문보다는 제목이나 강조할 부분에서 사용되며, 디자인적인 특성이 가미되어 있다.
디스플레이 글꼴은 대체로 크고 눈에 띄는 특성을, 스크립트 글꼴은 필기체나 서명 등을 모방한 스타일을 가진다.
수식을 표현하는데 많이 사용되는 [\LaTeX](http://example.org)에서 기본글꼴로 `Computer Modern`, `AMS Euler`, `STIX` 같은 수식전용 글꼴이 사용되어, 수학적 표기나 공식을 명확하고 정확하게 표현할 수 있도록 설계되었다.
데이터 과학에서 그래프 문법과 표 문법을 사용하여 그래프와 표를 제작할 경우 가독성을 높이고 이목을 끌 수 있도록 색상과 더불어 적절한 글꼴 선택이 필수적으로 자리잡아가고 있다.
일반적으로 본문에는 세리프나 산세리프 글꼴이 사용되고, 제목에는 더 화려하거나 눈에 띄는 글꼴이 사용되고 증거기반 문서 행정문서가 늘어나고 과학기술 문서에 필수적인 수식 등에도 타이포그래피 중요성이 늘어나고 있다.
::: callout-note
## 서체와 글꼴 {#typeface-vs-font}
`typeface`는 서체로 번역되고 `font`는 글꼴로 번역된다.
하나의 `typeface`에 다수 `font`가 포함될 수 있고, [**팬그램(Pangram)**](https://ko.wikipedia.org/wiki/팬그램)은 '모든 글자'라는 뜻으로 주어진 모든 문자를 적어도 한 번 이상 사용하여 만든 문장을 뜻한다.
팬그램은 로렘 입숨처럼 글꼴 샘플을 보여주거나 장비를 테스트하는 데 사용된다.
영어 팬그램으로 가장 유명한 **'The quick brown fox jumps over the lazy dog'**는 19세기부터 사용되어 왔다.
유사하게 한글에서는 **"다람쥐 헌 쳇바퀴에 타고파"**가 사용되고 있다.
:::
## 두가지 형태 글꼴
글꼴(Fonts)은 문자나 기호를 디지털화하여 표현하는 데 사용되는 그래픽 디자인으로 주로 로컬 설치형 글꼴과 웹폰트 두가지 형태로 사용된다.
로컬 설치형 글꼴은 사용자의 컴퓨터나 기기에 직접 설치되어 있는 글꼴로, 윈도우(Windows)나 맥(macOS), 리눅스(Unix/Linux)에서 기본적으로 제공되는 글꼴이나 사용자가 따로 설치하여 사용하는 글꼴을 의미한다.
인터넷 연결 없이도 사용할 수 있으며, 로컬에서 동작하므로 빠른 렌더링 속도를 제공한다는 점이 큰 장점이지만, 사용자 컴퓨터나 기기에 설치되어 있지 않은 글꼴은 보이지 않을 수 있으며, 글꼴 업데이트나 관리는 수동으로 직접해야 한다는 점은 단점이다.
반면 웹폰트는 웹페이지를 로드할 때 서버에서 함께 다운로드되어 사용자의 브라우저에 표시된다.
[구글 폰트(Google Fonts)](https://fonts.google.com/), [눈누](https://noonnu.cc/)와 같은 웹폰트 서비스를 통해 제공되며, 웹페이지를 방문하는 모든 사용자에게 동일한 글꼴를 통해 보여준다는 점은 장점이다.
다양한 스타일과 가중치(weights) 글꼴을 쉽게 사용할 수 있으며, 글꼴 업데이트나 관리가 자동화되는 장점은 있으나, 초기 페이지 로딩 시간이 길어질 수 있으며, 서버 다운 혹은 인터넷 연결 문제로 웹폰트가 정상적으로 로드되지 않을 위험도 있고, 인터넷 통신 데이터 사용량이 증가되어 속도가 늦어지고 관련 네트워크 비용이 늘어날 수 있다.
{fig-align="center"}
## 글꼴 설치
[구글 폰트(Google Fonts)](https://fonts.google.com/), [눈누](https://noonnu.cc/)와 같은 웹사이트에서 `.ttf`, `.otf` 형식 글꼴파일을 다운로드 한 후에 `C:\Windows\Fonts\` 디렉토리에 복사하거나, 다운로드 받은 글꼴파일을 더블 클릭하여 설치 버튼을 눌러 자동으로 해당 디렉토리에 설치한다.
글꼴을 시스템에 설치하면 모든 사용자가 사용할 수 있도 있지만, 프로젝트 별로 `fonts` 디렉토리를 생성하여 이를 프로젝트에서 불러와서 특정 글꼴을 사용하는 것도 많이 사용된다.
두가지 접근 방법 모두 장단점이 있다.
{width="100%"}
### 글꼴 패키지
시스템에 글꼴이 설치되었다고 바로 문서 텍스트, 그래프, 표, 수식 등에 사용할 수 있는 것은 아니다.
이를 등록하는 절치가 필요하다.
언어마다 차이는 있지만 대체로 유사한 작업방식이기 때문에 R 언어를 사례로 살펴보자.
`extrafont`, `sysfonts`, `showtext`, 패키지는 글꼴을 다루기 위한 다양한 기능을 제공하기 위해 개발된 글꼴 패키지로 `extrafont`와 `sysfonts` 패키지는 로컬 설치형 글꼴을 다루는데 특화되어 있는 반면에 `showtext`는 웹글꼴 전용 패키지다.
`sysfonts`가 더 낮은 수준에서 더 많은 제어기능을 제공하는 반면, `extrafont`는 높은 수준 작업에 더 초점을 맞추고 사용자 친화적인 방법으로 글꼴을 적용하는 데 특화되어 있다.
먼저, 로컬 컴퓨터에 설치된 R 글꼴 패키지를 확인한다.
```{r}
library(tidyverse)
font_packages <- c("extrafont", "showtext", "sysfonts")
fonts_list <- map(font_packages, packageDescription)
fonts_list |>
enframe() |>
mutate(패키지명 = map_chr(value, "Package"),
버전 = map_chr(value, "Version"),
날짜 = map(value, "Date") |> as.character(),
URL = map(value, "URL") |> as.character()) |>
select(-name, -value) |>
gt::gt()
```
### 네이버 글꼴 설치
[네이버 나눔스퀘어](https://campaign.naver.com/nanumsquare_neo) 글꼴을 로컬 컴퓨터에 다운로드 받아 설치할 수 있다.
@fig-nanumsquare 에서 "모든 사용자용으로 설치(A)"하게 되면 글꼴이 `C:\Windows\Fonts\` 디렉토리에 설치된다.
운영체제에 설치작업이 완료되면 R에서 사용할 수 있으나, 몇 가지 추가 작업이 필요하다.
우선, `fs` 패키지 `file_exists()` 함수를 사용하여 'NanumSquare.ttf' 파일이 정상적으로 설치되었는지 확인한다.
이후 `font_import()` 명령어를 사용하여 R에서 해당 글꼴을 사용할 수 있도록 설정한다.
이 때, `path=`로 글꼴 파일의 경로를 직접 지정할 수 있으며, `pattern=`을 사용해서 특정 패턴에 맞는 글꼴을 일괄적으로 등록할 수도 있다.
선택한 방식에 따라 글꼴을 설치하면 이후 R 프로젝트에서 네이버 나눔스퀘어 글꼴을 자유롭게 사용할 수 있다.
{#fig-nanumsquare}
```{r}
#| eval: false
library(extrafont)
fs::file_exists("C:/Windows/Fonts/NanumSquare.ttf")
# font_import(paths = "C:/Windows/Fonts/NanumSquare.ttf")
font_import(pattern = "NanumSquare.ttf", prompt = FALSE)
```
동일한 방식으로 [마루부리 글꼴](https://hangeul.naver.com/maruproject_11)도 설치한다.
```{r}
#| eval: false
font_import(pattern = "MaruBuri-ExtraLight.ttf", prompt = FALSE)
font_import(pattern = "MaruBuri-Regular.ttf", prompt = FALSE)
font_import(pattern = "MaruBuri-Bold.ttf", prompt = FALSE)
font_import(pattern = "MaruBuri-Light.ttf", prompt = FALSE)
```
동일한 방식으로 [D2 Coding 글꼴](https://github.com/naver/d2codingfont)도 설치하고 RStudio IDE에서 "Tools" → "Global Options..."를 클릭하면 "Options"창이 열리고, `Appearance`에서 **Editor font:**에서 설치한 코딩전용 글꼴을 선택하고 **Editor theme:**도 지정한다.
{fig-align="center"}
글꼴 선택은 문서나 프로젝트의 특성과 목적에 따라 크게 영향을 미친다.
제목에는 삐침이 없어 깔끔한 느낌을 주기 위해 나눔스퀘어 글꼴을 설치했고, 본문에는 삐침이 있는 마루부리 글꼴을 설치하여 가독성을 높였고, 코딩 작업에 특별히 설계된 D2코딩 글꼴을 선택하여 전체적인 글쓰기 환경을 효율적이고 편안하게 준비했다.