조판 실험실
열두 장 동안 글자를 한 겹씩 벗겨 보았다. 뼈대와 받침, 글꼴의 갈래, 글자 사이와 줄 사이, 읽히는 크기와 대비, 위계와 그리드, 정렬, 화면과 간판. 그런데 실제 조판에서는 이 값들이 따로 놀지 않는다. 글자를 키우면 한 줄에 들어가는 글자가 줄고, 줄이 짧아지면 행간을 줄여도 되고, 글꼴을 바꾸면 같은 크기도 다르게 보이고, 웹에서는 그 글꼴의 용량까지 따라온다. 이 장은 글 한 편을 놓고 그 값들을 한꺼번에 움직이는 작업대다. 실험실은 정답 설정을 알려 주지 않는다. 대신 지금 설정이 한 줄에 몇 자를 담는지, 글자와 바탕의 대비가 얼마인지, 첫 화면을 띄우려면 글꼴을 몇 킬로바이트 받아야 하는지를 숫자로 보여 주고, 두 설정을 나란히 놓아 눈으로 고르게 한다.
- 글꼴, 크기, 자간, 행간, 글줄 폭, 정렬, 위계 비율이 서로 어떻게 맞물리는지 한 화면에서 확인한다.
- 한 줄 글자 수를 실제 줄바꿈으로 재고, 라틴 관행(45~75자)을 한글로 옮길 때 무엇이 달라지는지 안다.
- 글자–바탕 대비를 WCAG 2 기준으로 재고, 큰 글자 기준과 본문 기준의 차이를 설정에 반영한다.
- 한글 웹폰트가 조각(unicode-range)으로 나뉘어 전송되는 방식을 이해하고, 글 한 편이 실제로 받는 용량을 어림한다.
- 같은 글을 휴대폰과 넓은 화면, A4와 A5에서 비교하고, 두 설정 가운데 무엇을 고를지 근거를 적는다.
실험실 사용법
실험실이 하는 일은 단순하다. 글 한 편을 진짜 글자로 짜서(그림이 아니라 브라우저가 실제로 줄을 바꾸는 글이다) 정해진 폭의 틀에 넣고, 그 결과를 잰다. 틀은 네 가지다. 폭 360 px의 휴대폰, 폭 1,280 px의 넓은 화면, 그리고 인쇄물인 A4(210 mm)와 A5(148 mm). 틀이 이 페이지보다 넓으면 비율을 유지한 채 줄여서 보여 주므로, 줄바꿈과 한 줄 글자 수는 실제 그 폭에서와 같다.
글은 세 편이다. 모두 책방 E의 여름 일감이고, 가상의 글이다.
- 서점 소식 글: 웹사이트에 올리는 여름 낭독 모임 소식. 제목, 날짜 줄, 본문 세 단락. 휴대폰과 넓은 화면에서 읽는다.
- 낭독 모임 안내문: A4 한 장. 제목, 영문 부제, 날짜, 장소, 짧은 본문, 신청 안내. 계산대 옆에 붙이고 PDF로도 보낸다.
- 「골목 산책」 한 쪽: 봄에 만든 A5 안내 책자의 본문 한 쪽. 작은 제목, 본문 두 단락, 펜 그림 자리와 캡션, 쪽 번호.
먼저 실험실이 무엇을 바꾸는지 한 번 보자. 아래는 서점 소식 글을 넓은 화면에 띄운 두 모습이다. 왼쪽은 1장에서 서윤이 처음 올린 그대로다. 시스템 기본 글꼴, 16 px, 브라우저 기본에 가까운 좁은 행간, 화면 끝까지 이어지는 줄, 13 px 안팎의 연회색 날짜 줄. 오른쪽은 같은 글을 실험실에서 조정한 모습이다. 가운데 막대를 좌우로 끌어 비교한다.
#999999. 오른쪽(조정): Noto Sans KR 18 px, 자간 −0.02 em, 행간 1.8, 최대 글줄 폭 28 em(6장의 값), 본문 #22342a, 날짜 줄 14 px #567666(7장의 값). 왼쪽은 넓은 화면에서 한 줄에 —자, 오른쪽은 —자가 들어간다(이 페이지에서 잰 값). 글자는 그대로인데 "읽을 수는 있지만 읽고 싶지 않은" 쪽과 "읽어 볼 만한" 쪽이 갈린다.두 판은 한두 가지가 아니라 다섯 가지가 함께 다르다. 그래서 "무엇 때문에 좋아졌는가"를 말하기 어렵다. 이 장의 앞부분은 그 다섯 가지를 하나씩 떼어 낸 패널이고(각 패널은 앞 장의 시뮬레이터를 실험실 형식으로 다시 쓴 것이다), 마지막 절의 종합 실험실이 다시 그 다섯을 한데 모은다.
글줄 패널: 한 줄에 몇 자가 들어가는가
6장에서 본 것처럼 글줄 길이, 글자 크기, 행간은 한 묶음이다. 실험실은 이 묶음을 한 줄 글자 수(Characters per line)로 잰다. 한 줄에 들어간 글자를 빈칸까지 포함해 센 것이다. 라틴 글자 조판에서는 흔히 이 수로 글줄 길이를 말한다. 브링허스트는 『타이포그래피 스타일의 요소』(1992)에서 한 단짜리 본문은 45~75자 정도를 무난한 글줄 길이로 여기고, 66자 안팎을 이상적인 값으로 드는 관행을 소개했다. 연구로 정한 값이라기보다 오래 쌓인 조판 관행이다.
한글은 이 수를 그대로 옮길 수 없다. 한글 한 자는 거의 정사각형 틀에 들어가 폭이 1 em(글자 크기와 같은 길이)에 가깝다. 이 책이 Noto Sans KR로 재 보니 음절 한 자가 약 0.92 em, 빈칸이 약 0.22 em이었다. 라틴 소문자는 빈칸까지 쳐서 평균 0.5 em 안팎이다. 한글 산문은 서너 음절마다 빈칸이 하나씩 끼므로 빈칸까지 센 평균은 약 0.75 em이 된다. 같은 글줄 폭에 한글은 라틴의 3분의 2쯤 들어간다. 그림 3이 그 관계다.
그림의 관계를 식으로 적으면 이렇다. 글줄 폭을 키우거나 글자를 줄이면 한 줄 글자 수가 늘고, 자간을 넓혀도 줄어든다.
식은 어림이고, 실험실은 실제로 짠 줄에서 센다. 아래 미리보기 위의 눈금자는 글줄 폭이다. 눈금 하나가 1 em(한글 한 자 폭)이고, 오른쪽 끝의 손잡이를 끌면 글줄 폭이 바뀐다. 기기 틀보다 넓게 끌면 틀의 폭에서 멈춘다.
글줄 패널: 글줄 폭, 크기, 행간
넓은 화면에서 서윤의 첫 글이 한 줄에 97자에 이르렀던 것은 글줄 폭을 정하지 않았기 때문이다. 휴대폰에서는 반대로 걱정이 하나 줄어든다. 화면이 좁아 한 줄이 길어질 수가 없다. 대신 글자를 24 px로 키우면 한 줄이 16자 안팎으로 내려가고, 그러면 어절이 자주 다음 줄로 넘어가며 줄 끝이 들쭉날쭉해진다. 휴대폰의 글줄 문제는 "너무 길다"가 아니라 "너무 짧다"에 가깝다.
자간 패널: 글자 사이의 회색
5장에서 본 대로 자간(Tracking, Letter-spacing)은 글줄 전체의 글자 사이를 고르게 넓히거나 좁히는 값이다. 본문 자간과 제목 자간은 따로 다룬다. 큰 글자는 글자 사이의 빈 공간도 함께 커져 성겨 보이므로 조금 좁히고, 작은 글자는 획이 뭉치지 않게 기본값 근처에 둔다. 아래에서 두 값을 따로 움직이며 글자 사이의 "회색"이 고른지 본다. 흐리게 보이도록 눈을 가늘게 뜨면 회색의 얼룩이 더 잘 보인다.
자간 패널: 본문 자간과 제목 자간
자간은 실험실에서 가장 작은 숫자로 가장 큰 차이를 만드는 값이다. 0.02 em은 17 px 글자에서 0.34 px, 화소 하나도 안 되는 거리다. 그런데 한 줄 스무 자에 걸쳐 더해지면 거의 반 글자가 된다. 그래서 자간은 눈으로 정하고, 숫자는 기록하는 데 쓴다.
대비 패널: 할머니 손님도 읽을 수 있게
책방 E 주인의 말을 떠올린다. "할머니 손님도 휴대폰으로 소식을 읽으신다." 7장과 ColorBook 13장에서 본 것처럼 글자가 읽히려면 크기와 함께 글자와 바탕의 밝기 차이, 곧 대비가 있어야 한다. 웹 접근성 지침 WCAG 2(W3C)는 이를 대비율(Contrast ratio)로 잰다. 두 색의 상대 휘도로 계산하며 1:1(같은 색)에서 21:1(검정과 흰색)까지다. 본문 글자는 4.5:1 이상(AA), 더 엄격하게는 7:1 이상(AAA)을 권한다. 큰 글자, 곧 18 pt(24 px) 이상이거나 14 pt(약 18.7 px) 이상의 굵은 글자는 3:1(AA)과 4.5:1(AAA)이다.
아래 띠는 글자색 후보를 어두운 것부터 밝은 것까지 늘어놓은 것이다. 손잡이를 끌어 글자색을 고른다. 띠 위의 세 눈금은 지금 바탕에서 대비가 7:1, 4.5:1, 3:1이 되는 자리다.
대비 패널: 글자색, 바탕색, 글자 크기
#767676이 이 근처다(4.54:1). 기준은 넘지만 아슬아슬하다. 바탕을 크림으로 바꾸면 같은 글자색이 3.7:1로 떨어져 기준 아래로 내려간다. 바탕을 바꿀 때마다 글자색을 다시 재야 하는 이유다. ② 글자 크기를 24 px 이상으로 올린다. 판정이 "큰 글자" 기준으로 바뀌어 같은 대비가 통과한다. 큰 제목에는 옅은 색을 써도 되지만 본문에는 안 된다. ③ 손잡이를 가장 어두운 끝으로 끈다. 대비는 최대지만, 순수한 검정 글자를 흰 화면에서 오래 읽으면 눈이 부시다고 느끼는 사람도 있어 짙은 회색이나 짙은 초록을 쓰는 경우가 많다(취향과 관행이며 연구로 정해진 값은 아니다). (대비율은 ART.contrast(WCAG 2 상대 휘도 공식), APCA는 ART.apca로 계산한 참고값이다. APCA는 WCAG 3 초안의 후보이며 표준이 아니다. 띠는 OKLCH 명도를 바꾼 색이다.)대비 기준은 "이 값을 넘으면 누구나 읽는다"는 보장이 아니라 "이 값보다 낮으면 많은 사람이 어려워한다"는 바닥이다. 시력이 약한 사람, 햇빛 아래의 휴대폰, 밝기를 낮춘 화면에서는 바닥 근처의 글이 먼저 무너진다. 그래서 본문은 바닥보다 넉넉하게 잡고, 기준에 빠듯한 옅은 색은 큰 제목이나 보조 정보에만 쓴다.
위계 패널: 비율 하나로 크기 단계 세우기
8장의 모듈 스케일(Modular scale)은 본문 크기에 같은 비율을 거듭 곱해 크기 단계를 만드는 방법이다. 비율이 1.25면 본문 11 pt에서 13.75, 17.2, 21.5 pt로 올라간다. 실험실은 이 비율 하나로 안내문의 크기를 정한다. 8장의 구성대로 제목은 본문의 비율 세제곱, 날짜와 장소는 한 제곱이고, 그 사이의 제곱 단계는 비워 제목과 정보 사이를 넓힌다. 신청 안내는 본문과 같은 크기에 색과 위치로 구별한다. "흐리게 보기"를 켜면 글자가 읽히지 않는 상태에서도 단계가 보이는지 확인할 수 있다.
위계 패널: 낭독 모임 안내문의 크기 단계
위계는 크기만으로 만들지 않는다. 날짜를 강조색으로 칠하고 굵게 쓰면 크기 차이가 작아도 앞으로 나온다. 실험실이 비율 하나로 크기를 묶는 이유는 크기를 "따로따로" 정하지 않기 위해서다. 제목 36 pt, 날짜 15 pt, 장소 13 pt처럼 하나씩 정하면 단계 사이의 간격이 들쭉날쭉해지고, 고칠 때마다 다른 값이 흔들린다. 비율로 묶어 두면 본문 크기 하나를 바꿔도 위계 전체가 같은 모양으로 따라온다.
정렬 패널: 양끝을 맞추면 어절 사이가 벌어진다
10장의 문제를 실험실에서 다시 잰다. 양끝 맞추기(Justification)는 줄의 오른쪽 끝을 맞추려고 남는 공간을 어절 사이 빈칸에 나눠 준다. 줄이 짧고 어절이 길수록 빈칸 하나가 떠안는 몫이 커진다. 게다가 한글은 줄을 어디서 바꾸느냐가 둘로 갈린다. 글자 단위로 바꾸면(CSS 기본값) 어절 중간에서도 줄이 바뀌어 양끝이 잘 맞지만 낱말이 쪼개지고, 어절 단위로 바꾸면(keep-all) 낱말은 온전하지만 빈칸이 벌어진다. 실험실은 줄마다 빈칸의 실제 폭을 재어 기본 빈칸의 몇 배로 벌어졌는지 보여 준다.
정렬 패널: 「골목 산책」 한 쪽의 정렬과 줄바꿈
인쇄 책자를 만드는 조판 프로그램은 줄바꿈을 단락 전체를 보고 정하고(한 줄씩 채우는 브라우저와 다르다), 글자 사이도 조금씩 늘리고 줄여 빈칸 하나에 몫이 몰리지 않게 한다. 그래서 같은 글줄 폭이라도 인쇄 책자의 양끝 맞추기는 이 실험실보다 고르게 나온다. 실험실의 숫자는 웹 브라우저로 짠 최악에 가까운 경우로 읽는다.
용량 패널: 글꼴을 몇 킬로바이트 받는가
11장에서 본 것처럼 한글 글꼴은 무겁다. 현대 한글 음절만 11,172자이고, 많이 쓰는 글자만 모은 KS X 1001 완성형도 2,350자다. 라틴 글꼴은 수백 자면 된다. 그래서 Google Fonts는 한글 글꼴을 100개 남짓의 조각(Subset slice, unicode-range)으로 나눠 두고, 페이지에 실제로 쓰인 글자가 든 조각만 브라우저가 받게 한다. 이 책이 2026년 10월 15일에 직접 잰 값으로는, 네 글꼴의 보통 굵기(400) 조각을 모두 합치면 아래와 같다.
| 글꼴(400) | 갈래 | 조각 수 | 조각 전체 합 | 700 굵기 합 |
|---|---|---|---|---|
| Noto Sans KR | 고딕 | 124 | 1,868 KB | 1,906 KB |
| Noto Serif KR | 명조 | 124 | 3,281 KB | 3,406 KB |
| Gowun Batang | 명조(바탕) | 95 | 1,591 KB | 1,480 KB |
| IBM Plex Sans KR | 고딕 | 94 | 1,124 KB | 1,131 KB |
fonts.googleapis.com/css2가 데스크톱 Chrome에 돌려준 CSS의 woff2 조각을 모두 내려받아 크기를 더한 값(1 KB = 1,000바이트). 조각이 적은 글꼴은 한자 등 일부 글자가 없는 글꼴이다. Google이 조각 방식이나 글꼴 판을 바꾸면 달라진다.
아래 패널은 글 한 편에 쓰인 글자를 모아, 그 글자가 든 조각만 받았을 때의 용량을 계산한다. 아래 칸 하나가 조각 하나이고, 칠해진 칸이 이 글 때문에 받아야 하는 조각이다.
용량 패널: 글 한 편이 받는 글꼴 조각
조각 방식 덕분에 한글 웹폰트도 첫 화면에 수 MB를 받지는 않는다. 그래도 글 한 편에 수백 KB는 흔하고, 글꼴이 오기 전까지 글자가 대체 글꼴로 보였다가 바뀌는 깜빡임(FOUT, 11장)이 생긴다. 굵기를 하나 더 쓰면 그만큼 또 받는다. 그래서 웹 본문의 글꼴을 고를 때는 모양과 함께 "몇 굵기를, 어떤 방식으로 받는가"를 같이 적는다.
종합 실험실
이제 모든 설정을 한 작업대에 모은다. 위쪽 미리보기에 두 설정 A와 B가 나란히 놓이고, 아래 조절기는 "지금 고치는 쪽"(A 또는 B) 하나를 움직인다. 글을 바꾸면 그 글의 "첫 시안"이 A에, "서윤의 선택"이 B에 들어간다. 둘 다 출발점일 뿐이니 마음껏 바꾼다. 맨 아래 비교표는 두 설정의 숫자를 나란히 보여 주고, "CSS 쓰기"는 지금 설정을 웹에 붙일 수 있는 CSS로 적어 준다.
순서는 이렇게 권한다. ① 기기를 정하고 글꼴과 본문 크기를 고른다. ② 글줄 폭으로 한 줄 글자 수를 출발 범위(빈칸 포함 한 줄 약 30~40자) 안에 넣는다. 휴대폰이면 글자 크기가 이 일을 한다. ③ 행간을 글줄 길이에 맞춘다. ④ 자간을 본문과 제목에 따로 준다. ⑤ 위계 비율로 단계를 세운다. ⑥ 정렬과 줄바꿈을 정한다. ⑦ 대비와 용량을 확인한다. ⑧ "WCAG 간격 덮어쓰기"를 켜서 사용자가 간격을 넓혀도 무너지지 않는지 본다.
조판 실험실
글과 기기
글자
글줄과 지면
색과 점검
| 재는 것 | A | B |
|---|
비교표에서 가장 먼저 볼 줄은 "한 줄 글자 수"와 "대비"다. 둘은 독자가 글을 끝까지 읽을지에 바로 닿고, 고치는 데 비용이 거의 들지 않는다. "용량"은 웹에만 해당하고, "빈칸 배수"와 "쪼개진 어절"은 양끝 맞추기를 고를 때만 중요하다. 표의 어느 줄도 빨갛게 표시되지 않았다고 해서 좋은 조판이 되는 것은 아니다. 숫자가 말하지 못하는 것, 곧 글의 성격에 글꼴이 맞는지, 책방의 목소리처럼 들리는지는 두 판을 나란히 놓고 눈으로 고른다.
서윤의 작업 노트
글 세 편을 한 작업대에
8월 둘째 주, 첫 낭독 모임(7일)을 마치고 21일 모임을 앞둔 저녁이었다. 서윤은 책방 E 계산대에 노트북과 휴대폰을 나란히 놓고 여름 조판 일감 세 편을 실험실에 차례로 넣었다. 서점 소식 글, 낭독 모임 안내문, 「골목 산책」의 글 쪽 하나. 간판 레터링은 12장에서 손으로 마무리했으니 남은 것은 글이 많은 세 편이었다. 지난 여름 내내 장마다 따로 정한 값들이 한 화면에서도 서로 어긋나지 않는지, 정하지 못하고 남겨 둔 것이 무엇인지 보는 것이 목표였다. 도경은 옆에서 교정쇄를 넘기며 "글자도 그림처럼 사이를 본다"는 말을 한 번 더 했다.
아래 값은 이 장의 실험실에서 각 글의 "첫 시안"(A)과 "서윤의 선택"(B)을 잰 것이다. 한 줄 글자 수는 이 책이 2026년 10월에 Chrome으로 잰 값이며, 글꼴 파일과 브라우저에 따라 한두 자 달라질 수 있다.
| 글 · 기기 | 설정 | 글꼴 · 크기 · 행간 · 글줄 폭 | 한 줄 글자 수 | 대비(본문 · 보조) | 그 밖에 |
|---|---|---|---|---|---|
| 소식 글 | A 첫 시안 · 넓은 화면 | 시스템 · 16 px · 1.3 · 제한 없음(1,216 px) | 97 | 14.22 · 2.85 | 보조 글자 13 px #999999 |
| B 선택 · 넓은 화면 | Noto Sans KR · 18 px · 1.8 · 28 em · 자간 −0.02 em | 37 | 13.19 · 5.03 | 웹폰트 185 KB(400·700) | |
| B 선택 · 휴대폰 | Noto Sans KR · 17 px · 1.7 · 틀 폭(320 px) | 24 | 13.19 · 5.03 | 보조 글자 14 px #567666 | |
| 안내문 · A4 | A 첫 시안 | 시스템 · 제목 18 pt, 나머지 14 pt 모두 굵게 · 가운데 | 45 | 13.19 · 13.19 | 제목 ÷ 본문 1.29 |
| B 선택 | Noto Sans KR · 11 pt · 비율 1.5 · 30 em · 왼끝 | 37 | 13.19 · 5.03 | 제목 37 pt #2f7d5b, 날짜·장소 16.5 pt 굵게(날짜 #d24f39 4.27, 큰 글자), 신청 11 pt #567666 | |
| 책자 글 쪽 · A5 | A 9장 상태 | Noto Serif KR · 3.5 mm · 5.5 mm · 판면 33자 · 양끝·어절 · 단락 사이 띄움 | 39 | 14.22 | 빈칸 최대 2.3배 |
| B 10장 방식 | 같은 글꼴·크기·줄 보내기·판면 · 양끝·어절 · 들여쓰기 1자 | 39 | 14.22 | 2배(0.5자) 넘는 줄 2개(브라우저 줄나눔) |
소식 글에서 가장 큰 차이는 넓은 화면에서 났다. 휴대폰에서는 1장의 첫 시안도 한 줄이 스물네 자 안팎이라 길지 않았다(대신 글자 단위 줄바꿈 때문에 낱말이 여덟 군데서 쪼개졌다). 그런데 회사 모니터의 1,216 px 본문 칸에서는 한 줄이 97자였다. 6장의 작업대가 잰 106자와는 글꼴과 재는 방식이 달라 몇 자 차이가 나지만, "100자 안팎"이라는 결론은 같다. 6장에서 정한 값(휴대폰 17 px·행간 1.7, 넓은 화면 18 px·행간 1.8·최대 28 em)을 실험실에 넣으니 휴대폰 24자, 넓은 화면 37자로 6장의 계산과 같게 나왔다. 넓은 화면의 37자는 WCAG 1.4.8의 한중일 40자 상한 안쪽이다. 두 크기는 11장의 공식대로 화면 폭 360~1,280 px 사이를 clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem)로 잇는다. 본문 자간은 5장의 −0.02 em이고, 글자색과 보조 글자는 7장에서 정한 그대로다(본문 #22342a 13.19:1, 날짜 줄 14 px #567666 5.03:1). 실험실의 비교표에서 첫 시안의 날짜 줄은 13 px, 2.85:1로 빨갛게 떴다. 7장에서 할머니 손님이 돋보기를 꺼냈던 바로 그 줄이다. 웹폰트는 본문 400과 제목 700 두 굵기를 조각으로 받아 이 글 한 편에 185 KB(본문 굵기만 122 KB)였다. 11장에서 세운 예산 200 KB 안이다. 실험실에서 새로 정한 것은 제목의 위계였다. 위계 비율 1.333으로 제목을 본문의 약 1.78배(휴대폰 30 px, 넓은 화면 32 px)로 두고 제목 자간을 −0.02 em으로 했다. 1.25에서는 제목이 날짜 줄과 붙어 보였고, 1.5에서는 휴대폰 제목이 두 줄로 꺾였다. 서윤은 시스템 글꼴만 쓰는 안도 끝까지 저울질했다. 용량이 0이고 깜빡임도 없지만, 기기마다 글자 모양이 달라 책방의 목소리가 기기마다 바뀐다는 것이 마음에 걸렸다.
안내문은 8장의 첫 시안과 선택을 나란히 넣었다. 첫 시안(제목 18 pt, 나머지 모두 14 pt, 전부 굵게)은 제목이 본문의 1.29배에 그쳐 "흐리게 보기"를 켜자 한 덩어리의 회색 띠가 되었다. 8장의 선택(비율 1.5, 본문 11 pt, 날짜·장소 16.5 pt, 제목 37 pt, 24.75 pt 단계는 비움)은 흐려도 세 덩어리로 갈렸다. 실험실이 더한 것은 글줄과 정렬이다. 본문을 A4 판면 폭 그대로 흘리면 한 줄이 50자를 넘으므로 글줄 폭을 30 em으로 묶어 한 줄 37자로 했고, 첫 시안의 가운데 맞추기를 왼끝 맞추기로 바꿨다. 짧은 안내문이라 가운데 맞추기도 쓸 수 있지만, 날짜와 장소처럼 눈이 찾아 읽는 줄은 시작점이 한 곳에 모여 있는 편이 찾기 쉬웠다. 날짜의 강조색 #d24f39(4.27:1)는 16.5 pt 굵은 글자라 큰 글자 기준(3:1)을 넘는다는 것도 표에서 다시 확인했다.
책자 글 쪽은 9장의 그리드를 그대로 실험실의 A5 틀에 옮겼다. 본문 3.5 mm, 줄 보내기 5.5 mm, 판면 33자 폭, 여백 위 16·아래 23.5·안 14·바깥 18.5 mm. 판면 33자는 한 자를 정사각 1 em으로 친 폭이라, 빈칸까지 세는 실험실 방식으로는 한 줄 39자가 나왔다. 여기에 10장의 방식(양끝 맞추기, 어절 단위 줄바꿈, 단락은 들여쓰기 1자)을 넣으니 빈칸이 기본의 2.3배까지 벌어지는 줄이 있었다. 단락의 마지막 줄을 뺀 네 줄 가운데 두 줄이 10장의 허용 상한(0.5자, 기본 빈칸 0.25자의 2배)을 넘었다. 서윤은 처음에 놀랐지만 이유는 곧 보였다. 브라우저는 줄을 앞에서부터 한 줄씩 채우고, 10장이 정한 "단락 전체 줄나눔"과 글자 사이 0.03자 나누기를 하지 못한다. 실험실의 숫자는 조판 프로그램이 손대기 전의 최악에 가깝다. 글자 단위로 바꾸면 빈칸 최대는 1.37배로 줄지만 낱말이 두 군데 쪼개져, 10장이 어절 단위를 고른 이유가 그대로 보였다. 서윤은 정렬 방식을 바꾸지 않았다. 대신 실험실에서 2배를 넘은 두 줄에 표시를 해 두고, 조판 프로그램의 교정쇄에서도 0.5자를 넘으면 10장의 규칙대로 문장을 고치기로 했다. 도경은 "그리드는 9장에서, 정렬은 10장에서 끝났어. 여기서는 그 결정이 실제 글에서 어디가 아픈지만 본다"고 했다.
도경은 마지막으로 서윤의 노트에 메모 한 장을 끼워 두었다. "숫자는 글자 사이를 대신 봐 주지 않는다. 숫자가 괜찮다고 할 때 한 번 더 뽑아서, 멀리서 한 번, 가까이서 한 번 봐라. 그리고 네가 고른 것 옆에 고르지 않은 것도 같이 적어 둬. 내년 여름의 네가 그걸 보고 다시 고를 테니까." 서윤은 도경에게 실험실의 "CSS 쓰기" 결과를 휴대폰 메모장에 옮기는 법을 알려 주었다. 도경은 그 글자들을 한참 보더니 "납 활자 대신 이게 활자 상자구나" 했다.
clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem), 본문 자간 −0.02 em. 정렬은 10장대로 왼끝·어절 단위, 단락 사이 1 em. 새로 정한 것: 제목 위계 비율 1.333(제목 30~32 px, 굵게), 제목 자간 −0.02 em. ② 안내문(A4): 8장의 크기·색 그대로, 새로 정한 것은 본문 글줄 폭 30 em(한 줄 37자), 행간 1.6, 왼끝 맞추기. ③ 책자(A5): 9장 그리드와 10장 정렬 그대로. 새로 정한 것은 점검 절차다. 실험실(브라우저 줄나눔)에서 빈칸이 2배(0.5자)를 넘은 줄을 표시해 두고, 조판 프로그램 교정쇄에서도 넘으면 문장을 고친다. 모든 값은 이 장의 실험실로 잰 것이며, 실제 휴대폰과 실제 크기 인쇄로 다시 본다.핵심 정리
- 글꼴, 크기, 자간, 행간, 글줄 폭, 정렬, 위계는 따로 놀지 않는다. 하나를 바꾸면 한 줄 글자 수, 줄 수, 빈칸이 함께 바뀌므로 한 작업대에서 같이 본다.
- 한 줄 글자 수는 빈칸을 포함해 실제 줄바꿈에서 센다. 라틴 관행 45~75자를 폭으로 옮기면 한글 산문은 약 30~50자이고, WCAG 1.4.8은 한중일 글자 40자를 상한으로 둔다. 이 책의 출발점(한 줄 약 30~40자)은 연구로 정한 최적값이 아니다.
- 넓은 화면에서는 글줄 폭(최대 폭)이, 휴대폰에서는 글자 크기가 한 줄 글자 수를 정한다. 긴 줄일수록 행간을 넓힌다.
- WCAG 2는 본문 4.5:1, 큰 글자(24 px 이상 또는 약 18.7 px 이상 굵게) 3:1을 바닥으로 둔다. 바탕을 바꾸면 대비를 다시 잰다.
- 위계는 비율 하나로 묶어 세운다. 이웃한 단계의 차이가 작으면 흐리게 볼 때 단계가 사라지고, 비율이 크면 단계 수를 줄여야 한다.
- 양끝 맞추기의 대가는 벌어진 빈칸(어절 단위) 아니면 쪼개진 낱말(글자 단위)로 치른다. 왼끝 맞추기는 그 대가를 줄 끝의 들쭉날쭉함으로 바꾼다.
- 한글 웹폰트는 조각으로 나뉘어 쓰인 글자의 조각만 받는다. 그래도 글 한 편에 수백 KB가 흔하므로 글꼴과 함께 굵기 수와 받는 방식을 정한다.
확인 퀴즈
1. 같은 서점 소식 글이 휴대폰(폭 360 px)에서는 한 줄 24자 안팎인데, 넓은 화면에서는 한 줄 97자가 되었다. 넓은 화면에서 한 줄 글자 수를 줄이는 가장 알맞은 방법은?
2. 흰 바탕 위 강조색 #d24f39의 WCAG 대비율은 4.27:1이다. 이 색을 안내문에 쓰는 방법으로 가장 알맞은 것은?
3. 「골목 산책」 본문을 양끝 맞추기와 어절 단위 줄바꿈으로 짰더니 어절 사이가 크게 벌어지는 줄이 생겼다. 줄바꿈을 글자 단위로 바꾸면 무엇이 달라지는가?
4. 소식 글 한 편에 쓰인 고유 글자는 150자 남짓인데, Noto Sans KR을 Google Fonts에서 받으면 조각 스무 개, 약 185 KB를 받는다. 고유 글자만 담은 파일보다 훨씬 큰 이유로 가장 알맞은 것은?
글꼴과 참고 문헌
글꼴(모두 SIL 오픈 폰트 라이선스 1.1, Google Fonts에서 불러온다): Noto Sans KR, Noto Serif KR(Google, Adobe 공동 개발 Noto CJK의 한국어판) · Gowun Batang(류양희) · IBM Plex Sans KR(IBM, 산돌 공동 개발). 이 페이지의 본문 글꼴 Pretendard(길형진, OFL)는 서가 공통 글꼴이다. 미리보기의 "시스템 글꼴"은 보는 기기에 설치된 글꼴이다.
참고: W3C, Web Content Accessibility Guidelines (WCAG) 2.2, 2023(성공 기준 1.4.3 대비 최소, 1.4.6 대비 강화, 1.4.12 글자 간격) · Robert Bringhurst, The Elements of Typographic Style, 1992(제4판 2012) · Mary C. Dyson, "How physical text layout affects reading from screen", Behaviour & Information Technology 23(6), 2004 · Google Fonts CSS API(2026-10-15 조각 크기 측정). 대비율은 이 서가의 계산 엔진(ART.contrast, ART.apca)으로 계산했다.