Chapter 14

용어집 & 종합 퀴즈

타이포그래피의 말은 여러 작업실에서 따로 자랐다. 활판 인쇄소의 인테르와 공목, 사진식자의 급과 치, 라틴 활자 교본의 커닝과 x높이, 한글 글꼴 디자인의 네모틀과 모임꼴, 그리고 웹 명세의 line-height와 font-display. 같은 양을 행간이라고도 줄 보내기라고도 부르고, 같은 갈래를 명조라고도 바탕이라고도 부른다. 이 장은 이 책에서 쓴 뜻을 한곳에 모으고, 그 말을 설명한 절로 돌아가는 길을 놓는다. 마지막에는 열세 장을 묶는 종합 퀴즈와, 서윤의 여름 조판 노트가 장마다 정한 것을 다시 모았다.

용어 찾기

용어, 영어 이름, 뜻풀이의 어느 낱말로도 찾는다. 부 단추로 그 부의 장에서 설명한 용어만 볼 수 있다. 각 항목 아래의 장 번호를 누르면 그 용어를 설명한 절로 간다. 여러 장에서 다룬 용어는 링크가 여럿이다. 글자 모양이 곧 뜻인 용어에는 예시 글자를 붙였다(Noto Serif KR과 Noto Sans KR, 둘 다 OFL).

헷갈리기 쉬운 짝

짝차이장
판독성 · 가독성판독성은 글자 하나하나를 서로 헷갈리지 않고 알아보는 정도로, 글꼴·크기·대비·거리가 정한다. 가독성은 글 한 편을 편하게, 오래, 내용에 집중하며 읽는 정도로, 판독성 위에 자간·행간·글줄 길이와 내용, 읽는 사람의 익숙함이 더해진다. 연회색 날짜 줄을 돋보기 없이 못 읽는 것은 판독성의 문제이고, 글자는 다 알아보는데 긴 줄에서 다음 줄을 자꾸 놓치는 것은 가독성의 문제다. 아래층이 무너지면 위층도 무너진다.7 · 6
트래킹 · 커닝
(자간 손질의 둘)		자간은 글자 사이 간격을 두루 이르는 말이고, 손질은 둘로 나뉜다. 트래킹은 글줄 전체에 같은 양을 더하거나 빼서 회색값, 곧 글줄의 밀도를 정한다. 커닝은 A–V, 책–방처럼 특정한 두 글자 짝의 간격만 고친다. 트래킹으로는 이미 고르지 않은 짝을 고칠 수 없고(함께 넓어지거나 좁아질 뿐이다), 커닝으로 글줄 전체의 밀도를 정하지도 않는다. 서윤의 간판은 짝마다 커닝(책–방 −115/1000 em)을 주고, 멀리서 볼 판이라 그 위에 전체 트래킹 +0.03 em을 더했다.5 · 5 · 12
행간 · 줄 보내기
(행송)		이 책에서 행간은 원래 뜻대로 줄과 줄 사이에 더한 빈 띠, 곧 "줄 높이 − 글자 크기"다(납 띠 인테르의 두께에서 온 말). 줄 보내기(행송)는 한 줄의 기준선에서 다음 줄 기준선까지의 거리로, CSS의 line-height가 나타내는 줄 높이와 같은 양이다. 16px 글자에 line-height 1.6이면 줄 보내기는 25.6px, 행간은 9.6px이다. 실무에서는 "행간 160%"처럼 줄 보내기를 행간이라 부르는 일도 흔하니, 숫자가 어느 쪽을 가리키는지 먼저 확인한다. 「골목 산책」은 3.5 mm 글자에 줄 보내기 5.5 mm(22치)다.6 · 9
x높이 · 캡하이트x높이는 소문자 x의 윗변, 곧 소문자 몸통이 들어가는 높이이고, 캡하이트는 대문자 H의 높이다. 같은 em 상자 안에서 x높이가 캡하이트의 약 6할인 글꼴(EB Garamond)도, 4분의 3쯤인 글꼴(Inter)도 있어서, 같은 글자 크기인데 커 보이고 작아 보이는 차이는 주로 x높이에서 온다. 한글에는 x높이가 없으므로 라틴 글자를 섞을 때 대문자 높이와 x높이를 한글 글자 높이의 어디에 맞출지 따로 정한다.2 · 2 · 3
세리프 · 산세리프세리프는 획 끝에 붙은 작은 돌출이고, 산세리프는 그것이 없는 글꼴이다(프랑스어 sans는 "없이"). 갈래는 글꼴의 성격을 말할 뿐 쓸 자리를 정하지 않는다. "본문은 세리프가 더 잘 읽힌다"는 연구 결과가 엇갈리는 통설이고, 실험에서 더 크게 작용한 것은 x높이·획 굵기·간격·익숙함이었다. 한글의 명조·고딕과 닮은 짝이지만 같은 체계는 아니다.2 · 4 · 7
명조 · 바탕같은 갈래를 가리키는 두 이름이다. 명조는 명나라 목판 인쇄에서 굳은 한자 활자 꼴을 일본에서 부르던 말을 빌려 온 것이고, 바탕은 1990년대에 우리말로 바꿔 부르자는 움직임에서 나온 이름이다(고딕과 돋움, 부리와 민부리도 같은 관계). 다만 「바탕」은 운영체제 기본 글꼴 한 벌의 이름이기도 하고, Gowun Batang처럼 이름에 바탕이 들어간 명조 계열 글꼴도 있어서, 갈래 이름인지 글꼴 이름인지는 문맥으로 가린다.4
양끝 맞추기 · 왼끝 맞추기왼끝 맞추기는 남는 폭을 줄 오른쪽에 모두 두어 낱말 사이가 일정하고 회색이 고르지만, 오른쪽 끝이 들쭉날쭉하다(래그). 양끝 맞추기는 남는 폭을 낱말 사이에 나눠 양쪽 끝이 반듯하지만, 줄마다 낱말 사이가 달라지고 강물이 생길 수 있다. 한글은 어절 단위 줄바꿈에서 이 벌어짐이 커진다. 그래서 단락 전체 줄나눔을 쓸 수 있는 책자에는 양끝을, 한 줄씩 채우는 웹 브라우저에는 왼끝을 고르는 일이 많다. 서윤도 그렇게 나눴다.10 · 10 · 10
강물 · 외톨이 줄강물은 한 단락 안에서 벌어진 낱말 사이가 여러 줄에 걸쳐 세로로 이어진 흰 물길로, 정렬과 줄바꿈의 문제다. 외톨이 줄은 단락의 첫 줄 하나(오펀)나 마지막 줄 하나(위도)만 단·쪽의 끝이나 머리에 따로 남는 것으로, 단과 쪽을 나누는 문제다. 강물은 줄바꿈 방식과 문장 고치기로, 외톨이 줄은 단 높이나 앞쪽의 줄 수를 조정해 고친다. 한두 글자만 남은 짧은 끝줄은 그 사이에 있는 단락 안의 구멍이다.10 · 10
위계 · 강조위계는 지면의 모든 요소에 "꼭 먼저, 그다음, 읽고 싶은 사람만"의 순서를 주는 체계이고, 강조는 그중 하나를 두드러지게 하는 손짓이다. 강조를 여러 곳에 주면 위계가 사라진다. 제목도 날짜도 장소도 굵게 한 첫 안내문이 그랬다. 위계는 덧셈보다 뺄셈으로, 강조는 격자를 하나만 분명히 깨는 것처럼 적고 분명하게 쓴다.8 · 8 · 9
그리드 · 여백여백은 종이 가장자리와 판면 사이의 빈 띠, 곧 그리드의 바깥 틀이다. 그리드는 그 안쪽 판면을 단·거터·모듈·기준선으로 나눈 설계도다. 여백은 제본과 엄지, 쪽 번호의 자리이자 지면의 숨이고, 그리드는 쪽마다 내릴 결정을 줄인다. 둘은 함께 정한다. 판면을 글자와 줄 보내기의 정수 배로 잡으면 여백이 남는 수로 정해진다. 쪽 하나를 거의 비우는 "비워서 깨기"처럼, 빈 칸도 그리드의 일부로 쓸 수 있다.9 · 9 · 9
힌팅 · 안티에일리어싱힌팅은 글꼴 쪽의 손질로, 작은 크기에서 획이 픽셀 경계에 맞아떨어지도록 윤곽선의 점을 옮긴다. 안티에일리어싱은 렌더러 쪽의 칠하기로, 윤곽선이 덮은 넓이만큼 칸을 회색으로 칠해 계단을 누그러뜨린다. 힌팅은 모양을 격자에 맞추고, 안티에일리어싱은 격자에 맞지 않는 경계를 회색으로 흐린다. 기기 픽셀 비율(DPR)이 2 이상인 화면에서는 둘 다 덜 중요해진다.11 · 11
가변 글꼴 · 여러 굵기여러 굵기는 굵기마다 따로 그린 파일을 한 벌씩 싣는 것이고, 가변 글꼴은 기준 윤곽선과 축별 이동량을 한 파일에 담아 그 사이의 어느 굵기·너비든 계산해 낸다. 쓰는 굵기가 많을수록 가변 글꼴이 유리하고, 두 개만 쓰면 이득이 작다. 이 책의 측정으로 Noto Sans KR 가변판은 3.51 MB, 보통·굵게 두 벌의 합은 3.77 MB였다. 서윤은 두 벌을 조각 방식으로 받는 쪽을 골랐다.11 · 11
네모틀 · 탈네모틀네모틀은 모든 음절 글자를 같은 크기의 네모에 꽉 차게 맞춰, 줄이 위아래로 가지런하고 가로·세로쓰기에 모두 맞는다. 받침글자는 위 칸이 눌리고 무게중심이 아래로 쏠린다. 탈네모틀은 초성과 모음을 늘 같은 크기로 쓰고 받침을 아래에 매달아, 윗선은 가지런하지만 받침글자만 아래로 내려와 낱말의 윤곽이 생긴다. 어느 쪽이 더 잘 읽힌다는 주장은 익숙함과 떼어 보기 어렵다. 서윤의 간판 "책방"은 두 글자 모두 받침글자라 네모틀을 골랐다.3 · 3

종합 퀴즈

도입과 네 부, 실험실에서 고루 뽑은 스물한 문제다. 열세 장에서 적어도 한 문제씩 나온다. 답을 고르면 해설과 그 내용을 다룬 절이 나온다. 맞힌 개수는 아래에 쌓인다.

SCORE

나의 점수

푼 문제0 / 21
맞힌 문제0
다시 볼 장—
부마다 맞힌 비율을 막대로 보여 준다. 틀린 문제가 있는 장은 "다시 볼 장"에 쌓인다. (점수는 이 화면에만 있고 어디에도 저장하거나 보내지 않는다.)

서윤의 여름 조판 노트 색인

2027년 여름, 열세 장에 걸쳐 서윤과 도경이 책방 E의 네 과제를 두고 정한 것을 장 순서대로 모았다. 가로 1.8 m 간판의 로고타입 "책방 E", 서점 웹사이트의 소식 글 본문, 여름 낭독 모임 안내문(A4 한 장), 그리고 봄에 그린 드로잉이 들어갈 「골목 산책」(A5, 16쪽)의 본문 조판이다. 각 줄의 장 번호를 누르면 그 장의 작업 노트로 간다. 수치는 모두 이 책의 교육용 모형과 가상의 시안으로 잰 값이고, 마지막 장의 설정도 정답이 아니라 서윤의 선택이다.

장상황서윤의 선택
내 조판 노트 색인 쓰기 1장에서 시작한 글자 일지와 세 벌의 출력물을 처음부터 넘기며 이 표처럼 적어 본다. 왼쪽 칸에는 그 장을 읽으며 짠 글에서 막힌 곳을, 오른쪽 칸에는 무엇을 정했는지(글꼴, 크기와 행간, 글줄 폭, 대비, 크기 단계, 정렬)를 숫자와 함께 쓴다. 정하지 못한 칸은 비워 둔다. 빈칸이 다음에 다시 읽을 장이다. 마지막으로 1장의 실습처럼 같은 단락을 지금 고른 설정으로 한 벌 더 출력해, 첫 세 벌과 나란히 벽에 붙이고 50 cm, 1 m, 2 m에서 읽어 본다. 무엇이 달라졌는지 한 줄 적는 것으로 이 책을 마친다.

글꼴과 이미지 크레딧

글꼴

이 책의 예시 글꼴은 모두 SIL 오픈 폰트 라이선스(OFL) 1.1 글꼴이다. 상업적 용도를 포함해 자유롭게 쓰고 고칠 수 있지만, 글꼴 파일만 따로 팔 수는 없다. 장 본문에서는 Google Fonts로 필요한 굵기만 불러왔다. 각 장의 "출처와 글꼴"에서 모은 목록이며, 쓰인 곳의 장 번호를 누르면 그 장으로 간다. 장 안에서 상용 글꼴(운영체제 기본 글꼴 등)은 이름만 언급했고, 간판 로고타입 "책방 E"와 모형 글꼴은 이 책이 직접 그린 가상의 예시다.

글꼴만든 이견본쓰인 곳

서가 공통 글꼴: 본문과 화면 글자는 Pretendard(길형진, OFL), 고정폭 글자는 JetBrains Mono(JetBrains, OFL)다. 실험실과 몇몇 시뮬레이터의 "시스템 글꼴"은 보는 기기에 설치된 글꼴이다.

작품 이미지

이 책의 작품 이미지는 모두 공공 도메인 또는 CC0로 공개된 자료다(대부분 메트로폴리탄 미술관 Open Access). 웹용으로 줄였고(긴 변 1600px 이하, WebP), 작품 위에 얹은 기준선·격자·측정 레이어와 직접 그린 도식, 모형 글자는 이 책의 그림이며 CC BY 4.0을 따른다. 서가 전체의 목록은 크레딧 페이지에 있다.

이 책이 기댄 자료

대비비(ART.contrast)는 WCAG의 정의 그대로이고, 글자 폭과 잉크 양은 브라우저가 실제로 그린 글자에서 쟀다. 반면 커닝의 면적 모델, 한글 구조 모형의 무게중심, 되돌아가기 각도, 강물과 공백의 벌점 같은 계산은 이 책이 만든 단순한 교육용 모형이며 각 모형의 식과 한계는 해당 장에 밝혔다. 본문에서 이름을 밝힌 주요 자료는 아래와 같다.

핵심 정리

  1. 글자 크기는 em 상자의 크기이고, 보이는 크기는 x높이와 글꼴이 정한다. 한글은 초성·중성·종성이 한 틀에 모이며, 받침이 틀 안의 넓이와 무게중심을 바꾼다.
  2. 글꼴의 갈래(명조·고딕, 세리프·산세리프)는 역사적 관습이며 경계가 흐리다. 글꼴은 "무엇을, 어디서, 얼마나 길게 전하는가"로 고른다.
  3. 자간은 거리보다 빈 면적을 본다. 트래킹은 글줄의 회색을, 커닝은 짝을 고친다. 글자 크기·행간·글줄 길이는 한 묶음이라 하나만 바꿀 수 없다.
  4. 읽힌다는 말은 시인성·판독성·가독성으로 나뉜다. 크기는 시각으로, 대비는 WCAG 대비비로 잴 수 있지만, 세리프 통설과 난독증 글꼴 주장은 근거가 약하다.
  5. 위계는 두세 단계와 뺄셈으로, 그리드는 글자와 줄의 정수로 세운다. 한글 양끝 맞추기는 어절 단위 줄바꿈에서 벌어지므로 단락 전체 줄나눔과 문장 고치기로 다룬다.
  6. 매체가 바뀌면 처음부터 다시 본다. 화면은 픽셀과 웹폰트 용량을, 간판은 거리와 시력을 묻는다. 숫자는 판단의 재료이고, 결론은 실제 독자에게 실제 크기로 보여 주며 짜는 사람의 선택으로 남긴다.