Chapter 06

행간과 글줄 길이

넓은 모니터에서 긴 기사를 읽다 보면 한 줄을 다 읽고 다음 줄로 넘어갈 때 같은 줄을 다시 읽거나 한 줄을 건너뛰는 일이 생긴다. 휴대폰에서는 반대로 줄이 너무 자주 끊겨 문장이 토막 난다. 글자를 잘 골라도 줄 사이가 좁거나 한 줄이 너무 길면 글은 읽기 싫어진다. 이 장은 줄과 줄 사이의 거리인 행간, 한 줄의 길이인 글줄 길이, 그리고 글자 크기가 서로 어떻게 맞물리는지를 직접 끌어 보며 익힌다. 그리고 이 분야의 "정답 같은 숫자"들이 어디서 왔고 근거가 얼마나 단단한지 가려 본다.

줄 사이의 숨

글줄과 글줄 사이의 거리를 행간(Leading)이라고 한다. 영어 이름은 금속 활자 시절 줄과 줄 사이에 끼우던 얇은 납(lead) 띠에서 왔다. 우리 인쇄소에서는 이 띠를 흔히 "인테르"라고 불렀다. 인테르를 끼우지 않고 활자의 몸끼리 맞붙여 짜는 것을 "솔리드"라고 했고, 인테르를 한 장 끼울 때마다 줄 사이가 그 두께만큼 벌어졌다. 그러니 원래 뜻의 행간은 글자 몸 바깥에 더한 빈 띠의 두께다.

한글 Type 글줄 Line 기준선 기준선 줄 높이 (기준선 사이) 글자 크기(1 em) 행간 = 반행간 둘 점선: 글자 몸 · 연한 띠: 줄 하나가 차지하는 높이
그림 1. 줄 높이와 행간. 점선 상자가 글자 크기(1 em)의 몸이고, 연한 띠가 줄 하나가 차지하는 높이다. 기준선에서 다음 기준선까지가 줄 높이이고, 여기서 글자 크기를 뺀 나머지가 행간이다. 웹 브라우저는 이 행간을 반으로 나눠 글자 몸의 위와 아래에 붙인다(반행간). 그래서 두 줄 사이의 빈 띠는 위 줄의 아래 반행간과 아래 줄의 위 반행간을 합친 것이다.

디지털 조판에서는 행간을 보통 두 가지로 적는다. 디자인 프로그램은 "10/14"처럼 글자 크기와 기준선 사이 거리를 함께 적는다(10pt 글자, 기준선 사이 14pt). 웹의 CSS는 line-height로 줄 하나의 높이를 적는데, 단위 없이 1.6이라고 쓰면 글자 크기의 1.6배라는 뜻이다. 어느 쪽이든 결국 같은 양을 가리킨다.

$$\ell = \frac{h}{s}, \qquad \text{행간} = h - s, \qquad \text{반행간} = \frac{h - s}{2}$$
\(s\): 글자 크기, \(h\): 줄 높이(기준선 사이 거리), \(\ell\): 줄 높이 비율(CSS의 단위 없는 line-height). 16px 글자에 line-height: 1.6이면 \(h\) = 25.6px, 행간은 9.6px, 반행간은 4.8px이다.

우리나라 문서 작성 프로그램에서 흔히 보는 "줄 간격 160%" 같은 표기도 비슷한 생각이지만, 프로그램마다 100%의 기준(글자 크기인지, 글꼴이 정한 기본 줄 높이인지)이 달라 같은 숫자라도 CSS의 1.6과 정확히 같지는 않다. 다른 도구로 옮길 때는 숫자만 옮기지 말고 출력해서 기준선 사이 거리를 직접 재 보는 것이 안전하다.

행간을 끌어 보기

아래 문단에서 둘째 줄 기준선의 손잡이를 위아래로 끌면 줄 높이가 바뀐다. 모든 줄이 같은 간격으로 따라 움직인다. 처음 값은 1.25로, 많은 글꼴이 행간을 따로 정하지 않았을 때 쓰는 기본값과 비슷하다.

SIMULATOR

줄 높이 끌기

둘째 줄 왼쪽 손잡이를 끈다
줄 높이(line-height)—
행간—
줄 사이 빈 띠 ÷ 글자 잉크 높이—
해볼 것: ① 1.25에서 본다. 한글은 줄 사이가 빠듯해 위아래 줄이 하나의 덩어리처럼 보인다. ② 손잡이를 내려 1.6~1.8 근처로 둔다. 줄마다 숨이 생기고 줄을 따라가기가 쉬워진다. ③ 0.9까지 올린다. 받침과 다음 줄 글자가 부딪치고 붉게 표시된다. ④ 2.6 이상으로 내린다. 줄들이 서로 떨어진 낱낱의 띠가 되어 문단으로 읽히지 않는다. 라틴으로 바꿔 같은 일을 한다. (잉크 높이는 이 문단의 글자들이 실제로 차지한 위아래 범위를 화면에서 잰 값이다. 글꼴마다 다르다.)

세 번째와 네 번째 해볼 것이 행간의 양 끝이다. 줄 사이가 글자 잉크와 겹칠 만큼 좁으면 글자가 엉기고, 줄 사이 빈 띠가 글자 높이에 가까울 만큼 넓으면 줄들이 서로 상관없는 띠처럼 떨어진다. 문단이 하나의 고른 회색 면으로 보이면서도 줄 하나하나를 따라갈 수 있는 구간은 그 사이 어딘가에 있다. 그 구간이 어디인지는 다음 두 가지, 글줄 길이와 글자의 생김새에 달려 있다.

한 줄의 길이

한 줄의 길이를 글줄 길이(Measure, Line length)라고 한다. 길이를 센티미터나 픽셀로 적을 수도 있지만, 읽기에 중요한 것은 한 줄에 몇 글자가 들어가는가이므로 타이포그래피에서는 흔히 한 줄 글자 수(공백과 문장부호 포함)로 말한다. 로버트 브링허스트는 『타이포그래피 스타일의 요소』(The Elements of Typographic Style, 1992)에서 세리프 글꼴로 짠 한 단 본문은 45~75자, 그중 66자 안팎이 흔히 알맞다고 썼다. 이 숫자는 오랜 조판 관습을 정리한 권고이지, 이 범위를 실험으로 증명한 연구에서 나온 것은 아니다.

이 숫자를 한글에 그대로 쓸 수는 없다. 라틴 본문은 공백과 문장부호를 합쳐 한 자의 평균 폭이 글자 크기의 절반 안팎(이 장의 견본으로 재면 약 0.48 em)이지만, 한글은 한 자가 거의 1 em을 차지하고 어절 사이 공백이 끼어 평균이 약 0.68 em이다. 그러니 같은 폭의 줄에 들어가는 글자 수는 한글이 라틴의 70% 남짓이다. 웹 접근성 지침 WCAG 2의 성공 기준 1.4.8(시각적 표현, AAA 등급)도 이 차이를 반영해, 사용자가 고를 수 있게 할 글줄 폭의 상한을 80자, 한중일 글자는 40자로 따로 적었다. 아래에서 단의 오른쪽 끝을 끌어 글줄 길이를 바꿔 본다.

SIMULATOR

단의 폭 끌기

단의 오른쪽 끝을 끈다
단의 폭—
한 줄 평균 글자 수(공백 포함)—
참고 기준—
해볼 것: ① 한글에서 단을 끌어 한 줄이 35~40자가 되게 한다. 폭이 얼마나 되는지 em으로 읽는다. ② 라틴으로 바꾸면 같은 폭에 1.4배 안팎의 글자가 들어간다. 위 눈금의 45~75자 띠가 한글의 몇 em에 해당하는지 본다. ③ 단을 아주 좁게 줄인다. 한 줄에 한두 낱말만 들어가 줄이 자주 끊기고 오른쪽 끝이 들쭉날쭉하다. ④ 끝까지 넓힌다. 다음 줄 첫머리(초록 표시)를 찾으려 눈이 먼 길을 되돌아가야 한다. (글자 크기는 16px, 행간 1.6, 한글은 −0.02em 자간으로 짰다. 한 줄 글자 수는 마지막 줄을 뺀 줄들의 평균이다.)

두 번째 해볼 것에서 라틴 45~75자는 대략 22~36 em이었다. 같은 폭에 한글을 넣으면 30~50자쯤 들어가서, 긴 쪽은 WCAG의 한글 상한 40자(약 27~29 em)를 넘는다. 여기서 한글 본문의 출발점을 하나 얻는다. 한 줄의 폭을 라틴 권고의 짧은 쪽, 곧 20~29 em 안팎에 두면 한글은 줄당 30~40자로 표준의 상한 안쪽에 들어온다. 이것은 연구로 얻은 한글의 최적값이 아니라, 라틴 권고와 표준의 상한을 한글의 글자 폭으로 옮겨 본 계산이다.

되돌아가는 눈

글을 읽는 눈은 줄을 따라 매끄럽게 미끄러지지 않는다. 짧은 도약과 멈춤을 되풀이하며 오른쪽으로 가다가, 줄 끝에서 왼쪽 아래로 크게 한 번 건너뛰어 다음 줄 첫머리로 간다. 이 큰 도약을 되돌아가기(Return sweep)라고 한다. 읽기 연구에서는 이 도약이 다음 줄 첫머리에 정확히 닿지 못하고 조금 모자라게 떨어진 뒤 짧게 바로잡는 일이 흔하다고 보고한다. 줄이 길수록 도약이 길어지고, 줄 사이가 좁을수록 엉뚱한 줄에 떨어지기 쉽다.

이 책은 이 관계를 아주 단순한 기하로 흉내 낸다. 줄 끝에서 다음 줄 첫머리를 겨냥할 때, 위아래로 반 줄 높이 안에만 떨어지면 맞는 줄에 닿는다고 보자. 그러면 허용되는 각도는 다음과 같다.

$$\theta = \arctan\!\left(\frac{\ell / 2}{L}\right)$$
\(\ell\): 줄 높이 비율, \(L\): 글줄 길이(em). 둘 다 글자 크기에 대한 비율이라 글자 크기는 약분된다. \(\theta\)가 작을수록 되돌아갈 때 줄을 놓치기 쉽다고 본다. 이 식은 방향을 감으로 익히기 위한 이 책의 모델이며, 실제 눈의 정확도를 잰 값이 아니다.
SIMULATOR

되돌아가기의 과녁

허용 각도 θ—
이 길이에서 θ 1.5°를 지키는 줄 높이—
해볼 것: ① 28 em, 1.8에서 과녁(초록 부채꼴)의 각도를 본다. 약 1.8°다. ② 글줄 길이를 100 em까지 늘린다. 같은 줄 높이인데 부채꼴이 바늘처럼 가늘어진다. 화면 폭 끝까지 이어지는 본문이 이렇다. ③ 길이를 늘린 채로 줄 높이를 2.4까지 올린다. 각도가 조금 회복되지만 28 em 때만큼은 되지 않는다. 둘째 칸은 1.5°를 지키려면 줄 높이가 5를 넘어야 한다고 알려 준다. 행간만으로 긴 줄을 구할 수는 없다. ④ 길이를 10 em으로 줄인다. 각도는 크지만 줄이 너무 자주 끊긴다. (그림은 글줄 길이가 바뀌어도 줄이 그림 폭을 채우도록 같은 비율로 줄여 그렸다. 회색 막대가 글줄, 점이 눈의 위치다.)

두 번째와 세 번째 해볼 것을 견주면 이 장의 중심 생각이 나온다. 줄이 길어질수록 행간을 늘려야 하지만, 행간을 늘리는 것만으로는 긴 줄의 불리함을 다 메울 수 없다. 28 em에서 1.8이 주는 각도(약 1.8°)를 100 em에서 지키려면 줄 높이가 6을 넘어야 하는데, 그러면 줄들이 떨어져 문단이 무너진다. 그래서 긴 줄은 행간이 아니라 글줄 길이 자체를 줄여서 고친다.

세 값이 맞물린다

글자 크기, 행간, 글줄 길이는 따로 정할 수 없다. 단의 폭이 정해져 있으면 글자를 키울수록 한 줄 글자 수가 줄고, 글자를 줄이면 줄이 길어진다. 줄이 길어지면 행간을 늘려야 하고, 행간을 늘리면 같은 지면에 들어가는 줄 수가 준다. 아래 지도는 가로가 글줄 길이, 세로가 줄 높이다. 점을 끌어 위치를 옮기면 위쪽 견본이 그 조합으로 짜인다(견본은 지도 폭에 맞게 같은 비율로 줄인다).

SIMULATOR

글줄 길이 × 행간 지도

지도 위의 점을 끈다
글줄 길이 · 줄 높이—
한 줄 글자 수(대략)—
θ · 판정—
해볼 것: ① 점을 출발 구간(초록) 안의 여러 곳으로 옮겨 견본을 비교한다. ② 구간 아래 오른쪽(긴 줄, 좁은 행간)으로 끈다. 견본의 줄들이 촘촘한 띠로 뭉친다. ③ 구간 위(행간 2.2 이상)로 끈다. 줄들이 흩어진다. ④ 라틴으로 바꾼다. 같은 em 길이에서 한 줄 글자 수가 1.4배 안팎이고, 출발 구간의 아래 경계가 조금 내려간다. (출발 구간은 이 책이 정한 것이다. 아래 경계는 앞 시뮬레이터의 θ가 1.5° 이상, 그리고 한글 1.5·라틴 1.3 이상의 줄 높이, 위 경계는 2.2. 연구로 정해진 경계가 아니라 비교의 기준이다.)

지도의 초록 구간은 오른쪽으로 갈수록 위로 올라간다. 긴 줄일수록 더 넓은 행간이 필요하다는 뜻이다. 동시에 구간은 오른쪽 끝에서 위 경계(2.2)에 부딪혀 닫힌다. 어떤 행간으로도 알맞게 만들 수 없는 길이가 있다는 뜻이다. 이렇게 행간과 글줄 길이가 함께 움직여야 한다는 생각은 20세기 전반 미국의 마일스 팅커(Miles Tinker)와 도널드 패터슨(Donald Paterson)이 인쇄물의 읽기 속도를 여러 조건으로 잰 연구에서도 나타난다. 그들은 글자 크기, 글줄 길이, 행간을 하나씩 따로 볼 수 없고 조합으로 봐야 한다고 정리했다(팅커, 『인쇄물의 가독성』(Legibility of Print), 1963에 요약).

근거의 수준

행간과 글줄 길이에는 유난히 "정답 같은 숫자"가 많다. "행간은 150%", "한 줄은 66자" 같은 숫자들이다. 그런데 이 숫자들의 출처는 성격이 저마다 다르다. 표준 문서가 정한 것, 실험으로 잰 것, 오랜 관습을 정리한 것이 섞여 있다. 아래 표는 이 장에서 쓴 숫자들의 근거를 가른 것이다.

주장출처근거의 성격주의할 점
한 단 본문은 45~75자, 66자 안팎브링허스트(1992) 등 조판 교본관습의 정리(권고)라틴 세리프 인쇄 본문 기준. 한글·화면에 그대로 옮길 수 없다.
글줄 폭은 80자(한중일 40자) 이하로 고를 수 있게WCAG 2, 성공 기준 1.4.8(AAA)표준"사용자가 그렇게 바꿀 수 있어야 한다"는 요구. 최적값이 아니라 상한이다.
문단 안 행간은 1.5배 이상WCAG 2, 1.4.8(AAA)표준같은 기준이 단락 간격도 정한다. AA 등급의 1.4.12는 사용자가 1.5배로 넓혀도 깨지지 않을 것을 요구한다.
화면에서는 긴 줄이 더 빨리 읽히기도 한다메리 다이슨(Mary Dyson) 등의 화면 읽기 실험(1998, 2001)실험 연구읽기 속도와 이해도, 선호가 서로 다른 방향을 가리키기도 했다. 스크롤 방식과 과제에 따라 결과가 달라진다.
크기·길이·행간은 조합으로 봐야 한다팅커와 패터슨의 인쇄물 연구(1920~40년대)실험 연구오래된 인쇄물·영어 독자 조건. 숫자 그대로보다 "상호작용이 있다"는 결론이 중요하다.
한글 본문은 라틴보다 행간을 넉넉히(대략 1.6~1.8)한국 편집·웹 실무관습글꼴의 글자 높이와 크기에 따라 다르다. 연구로 정해진 값이 아니다.
"연구에 따르면 X% 더 빨리 읽힌다"를 조심한다 글줄 길이와 행간에 관한 실험 결과는 글자 크기, 매체(종이·화면), 넘기는 방식(쪽 넘김·스크롤), 독자(나이·언어), 과제(훑어 읽기·이해)에 따라 크게 달라진다. 한 실험의 퍼센트 숫자를 다른 조건에 옮겨 붙이면 근거 없는 통설이 된다. 이 책이 퍼센트 대신 "출발 구간"을 쓰는 이유다. 구간 안에서 고른 뒤에는 실제 독자에게 실제 기기로 읽혀 보고 고친다.

한글의 행간

같은 줄 높이로 짜도 한글 문단은 라틴 문단보다 빽빽해 보인다. 이유는 글자의 높이에 있다. 라틴 소문자는 대부분 x높이(글자 크기의 절반 안팎) 안에 들어가고, 어센더와 디센더가 있는 몇 글자만 위아래로 뻗는다. 그래서 줄 사이에 실제로 빈 띠가 넓게 남는다. 한글은 거의 모든 글자가 글자 몸의 높이를 꽉 채운다(받침 있는 글자는 특히). 같은 줄 높이라면 줄 사이에 남는 빈 띠가 훨씬 좁다. 아래에서 두 문단을 같은 크기, 같은 줄 높이로 나란히 놓고 비교한다.

SIMULATOR

같은 행간, 다른 빈 띠

라틴: 줄 사이 빈 띠(x높이 기준)—
한글: 줄 사이 빈 띠(글자 높이 기준)—
한글 빈 띠가 라틴과 같아지는 줄 높이—
해볼 것: ① 1.5에서 두 문단을 흐리게 본다. 라틴 문단은 줄 사이로 바탕이 시원하게 보이고, 한글 문단은 회색 띠가 거의 맞닿는다. ② 줄 높이를 올리며 한글 문단이 1.5의 라틴 문단만큼 숨 쉬어 보이는 값을 찾는다. 셋째 칸이 이 장의 계산이다(줄 사이 빈 띠의 em 두께를 같게). ③ 명조·세리프로 바꾼다. 글꼴이 바뀌면 글자 높이도 바뀐다. (빈 띠는 줄 높이에서 글자의 주된 높이를 뺀 값이다. 라틴은 x높이, 한글은 문단 한글 글자들의 평균 잉크 높이로 잰다. 어센더·디센더를 무시한 단순 비교이며 글꼴마다 다르다.)

이 계산은 한국의 편집 실무에서 한글 본문에 대개 라틴보다 넉넉한 행간을 주는 관습과 방향이 같다. 다만 셋째 칸의 숫자를 그대로 정답으로 쓰지는 않는다. 라틴 문단은 어센더와 디센더가 줄 사이로 뻗어 실제로는 x높이만큼 시원하지 않고, 한글은 받침이 없는 글자가 섞이면 띠가 조금 넓어진다. 계산은 방향을 알려 주고, 마지막 값은 실제 문단을 실제 크기로 짜 보고 정한다.

행간은 글자 크기와 짝으로 적는다 편집 디자이너들은 행간을 홀로 적지 않는다. "본문 10/17", "캡션 8/12"처럼 언제나 글자 크기와 짝으로 적는다. 글자 크기를 바꾸면 행간도 다시 정해야 한다는 것을 숫자가 스스로 일깨우기 때문이다. 웹에서도 line-height는 픽셀 대신 단위 없는 비율로 적어 두는 것이 안전하다. 픽셀로 적으면 독자가 브라우저에서 글자를 키웠을 때 줄 높이가 따라오지 않아 글줄이 겹친다. 한도경은 인쇄소에서 배운 순서를 이렇게 말한다. "크기를 정하고, 인테르를 끼워 보고, 판을 멀리서 본다. 그다음에 줄 길이를 자른다."

작품과 디자인에서: 규칙이 깨질 때

1499년 베네치아의 인쇄업자 알두스 마누티우스가 펴낸 『폴리필로의 꿈 속 사랑의 싸움』(Hypnerotomachia Poliphili)은 초기 인쇄본 가운데 가장 아름다운 책으로 자주 꼽힌다. 이 책은 글줄 길이의 규칙을 일부러 깬다. 아래 그림처럼 문단의 마지막 부분에서 줄을 하나씩 짧게 잘라 본문을 역삼각형이나 잔 모양으로 짰다. 줄이 짧아지는 만큼 낱말이 줄 끝에서 자주 끊기고 읽기는 조금 불편해진다. 대신 지면 위의 글 덩어리가 그림처럼 하나의 모양이 되어, 위의 목판화와 함께 한 장의 구성을 이룬다.

위쪽에 말이 끄는 개선 행렬의 목판화가 있고, 그 아래에 라틴 글자로 짠 본문이 이어진다. 본문의 아래쪽 문단은 줄이 점점 짧아져 역삼각형을 이루고, 맨 끝에는 별 모양 장식 세 개가 놓였다.
그림 2. 프란체스코 콜론나 지음, 알두스 마누티우스 인쇄, 『폴리필로의 꿈 속 사랑의 싸움』, 1499. 아래쪽 문단은 행간은 그대로 두고 글줄 길이만 한 줄씩 줄여 역삼각형을 만들었다. 짧은 줄에서는 낱말이 줄 끝에서 잘려 다음 줄로 넘어간다. 읽기의 편안함 일부를 내주고 지면의 모양을 얻은 선택이다.메트로폴리탄 미술관, 목판화 삽화가 든 인쇄본. 공공 도메인(The Met Open Access, CC0). 펼친 면 사진에서 오른쪽 면 일부를 잘랐다. 소장처 작품 페이지 · 크레딧

행간의 규칙도 자주 깨진다. 큰 제목은 본문의 비율로 행간을 주면 줄 사이가 지나치게 벌어져 두 줄짜리 제목이 두 개의 제목처럼 보인다. 그래서 큰 제목은 줄 높이를 1.0~1.2 안팎으로, 때로는 글자 크기보다 작게 잡아 위아래 줄을 하나의 덩어리로 묶는다. 시와 노랫말은 반대로 한 줄이 하나의 숨이므로 줄 길이가 들쭉날쭉한 것이 내용이고, 행간을 넉넉히 두어 줄마다 쉼을 준다. 지하철 노선도나 표지판처럼 멀리서 한두 줄만 읽는 글은 글줄 길이 규칙과 거의 상관이 없다.

동아시아의 세로쓰기는 행간과 글줄 길이를 처음부터 다르게 본다. 글줄이 위에서 아래로 내려가고 줄은 오른쪽에서 왼쪽으로 쌓이므로, "행간"은 세로 글줄 사이의 가로 간격이 되고 "글줄 길이"는 단의 높이가 된다. 아래 그림은 같은 글을 가로와 세로로 짠 모습이다. 세로쓰기 책에서 지면을 위아래 두세 단으로 나누어 한 줄을 짧게 하는 방식은 가로쓰기 신문이 여러 단으로 줄을 자르는 것과 같은 이유에서다.

가로쓰기 세로쓰기 행간 글줄 방향 · 길이 글줄 행간 줄은 오른쪽에서 왼쪽으로 쌓인다
그림 3. 가로쓰기와 세로쓰기의 행간. 같은 네 줄을 두 방향으로 짰다. 세로쓰기에서는 글줄 길이가 단의 높이, 행간이 세로줄 사이의 가로 간격이 된다. 한글 세로쓰기는 지금은 드물지만, 세로로 짠 옛 책과 신문을 읽을 때 행간과 글줄 길이를 이렇게 돌려서 보면 같은 원리가 보인다.
종이 띠로 행간 고르기 같은 문단(10줄 안팎)을 글자 크기 10pt로, 줄 높이만 1.2, 1.5, 1.8, 2.1로 바꿔 네 장 출력한다. 같은 내용을 단의 폭만 8 cm와 16 cm로 바꿔 두 벌 만든다. 여덟 장을 벽에 붙이고 2 m 떨어져 흐리게 본 뒤, 가까이 가서 각 장을 소리 내어 한 문단씩 읽는다. 읽다가 줄을 놓친 곳에 연필로 표시한다. 16 cm 단에서 표시가 많았던 장과, 8 cm 단에서 표시가 없던 장의 줄 높이를 견주어 본다. 금속 활자 시절 인쇄공들은 이 일을 인테르의 장수를 바꿔 가며 했다.

휴대폰과 넓은 화면

이 장의 생각을 모아 서점 소식 글 한 편을 두 화면에 짠다. 아래 작업대에서 화면 폭을 끌어 휴대폰부터 넓은 모니터까지 바꿔 볼 수 있다. 글자 크기, 줄 높이, 최대 글줄 폭(em)을 정하면 그 화면에서 실제로 한 줄에 몇 자가 들어가는지, 되돌아가기 각도가 얼마인지가 바로 계산된다. 화면 양옆에는 휴대폰에서 20px, 넓은 화면에서 32px의 바깥 여백을 둔다.

SIMULATOR

서점 소식 조판 작업대

화면 오른쪽 끝 손잡이를 끈다
글줄 폭—
한 줄 글자 수(공백 포함)—
되돌아가기 θ—
WCAG 1.4.8(한글 40자, 행간 1.5)—
해볼 것: ① 처음 상태는 "처음 소식"이다(16px, 줄 높이 약 1.3, 최대 폭 없음). 넓은 화면 1280으로 바꾸면 한 줄이 90자를 넘고 θ가 0.5° 안팎으로 떨어진다. ② "서윤 안"을 누른 뒤 휴대폰과 넓은 화면을 오간다. 휴대폰은 화면 폭이 곧 글줄 폭이고, 넓은 화면은 최대 폭에서 멈춘다. ③ 서윤 안에서 최대 폭을 90까지 풀어 본다. 화면이 넓을수록 줄이 끝없이 길어진다. ④ 휴대폰에서 글자 크기를 24px까지 키운다. 한 줄이 열 몇 자로 줄어 문장이 토막 난다. (화면이 그림보다 넓으면 같은 비율로 줄여 그린다. 글꼴은 Noto Sans KR, 자간 −0.02em. 한 줄 글자 수는 마지막 줄을 뺀 평균이다. 단락 간격과 정렬은 이 작업대에서 다루지 않는다.)

휴대폰에서는 글줄 길이를 고를 여지가 거의 없다. 화면 폭에서 양옆 여백을 빼면 그것이 글줄 폭이고, 남은 손잡이는 글자 크기뿐이다. 글자를 키우면 한 줄 글자 수가 줄고, 줄이면 읽기 힘든 작은 글자가 된다. 그래서 휴대폰에서는 글자 크기를 먼저 정하고, 짧은 줄에 맞게 행간을 조금 덜 준다. 넓은 화면은 반대다. 글자 크기에는 여유가 있지만 줄이 끝없이 길어질 수 있으니, 최대 글줄 폭을 먼저 정하고 그 길이에 맞는 행간을 준다.

서윤의 작업 노트

CASE 서윤작업 노트 · 6장

화면 끝까지 가던 줄을 자르다

본문 자간을 정한 다음 날, 서윤은 서점 소식 글을 사무실의 넓은 모니터로 열었다. 브라우저 기본 16px, 행간은 따로 정하지 않은 채 화면 끝까지 이어지는 줄이었다. 이 장의 작업대로 재 보니 1280px 화면에서 한 줄이 106자 안팎이었고, 되돌아가기 각도는 0.5°였다. 서윤 자신도 셋째 문단에서 같은 줄을 두 번 읽었다. 주인은 휴대폰으로 같은 글을 보여 주며 "여기서는 괜찮아 보이는데, 할머니 손님은 자꾸 키워서 보신다"고 했다.

도경은 서윤의 화면 앞에 신문 한 장을 펴 놓았다. "신문은 왜 단을 나눴을 것 같아? 종이가 아까워서가 아니야." 서윤은 두 화면을 따로 정하기로 했다. 휴대폰에서는 양옆 여백 20px을 빼면 360px 화면의 글줄 폭이 320px뿐이다. 글자를 17px로 두면 18.8 em, 한 줄 24자 안팎이 된다. 줄이 짧으니 행간은 1.7(기준선 사이 28.9px)로 두었다. θ는 2.6°다. 넓은 화면에서는 글자를 18px로 키우고, 최대 글줄 폭을 28 em(504px)으로 막았다. 한 줄 37자 안팎으로 WCAG 1.4.8의 한글 40자 상한 안쪽이다. 처음에는 32 em을 생각했지만 계산해 보니 한 줄이 43자로 상한을 넘었다. 줄이 휴대폰보다 기니 행간은 1.8(32.4px)로 조금 더 주었다. θ는 1.8°로, 이 책의 출발 구간 경계(1.5°)보다 크다.

서윤은 한때 넓은 화면의 최대 폭을 40 em까지 풀어 보았다. 한 줄이 55자 안팎이 되고 θ가 1.3°로 떨어졌다. 줄 높이를 2.0으로 올리면 각도는 회복되지만 문단이 성기게 흩어졌다. 서윤은 줄을 자르는 쪽을 택했다. 두 값 모두 line-height는 단위 없는 비율로 적어, 할머니 손님이 글자를 키워도 줄 사이가 함께 넓어지게 했다.

화면글자 크기줄 높이최대 글줄 폭한 줄 글자 수θ
처음 소식(1280px)16px약 1.3없음(1216px)1060.5°
휴대폰(360px)17px1.7화면 폭 − 40px(320px)242.6°
넓은 화면18px1.828 em(504px)371.8°
이 장에서 정한 것휴대폰: 본문 17px, 줄 높이 1.7, 글줄 폭은 화면 폭에서 양옆 20px을 뺀 값(360px 화면에서 320px, 18.8 em). 넓은 화면: 본문 18px, 줄 높이 1.8, 최대 글줄 폭 28 em(504px, 한 줄 40자 이하). line-height는 단위 없는 비율, 글줄 폭은 em으로 적는다. 자간은 5장의 −0.02em을 그대로 쓴다.
아직 남은 문제17px과 18px이 할머니 손님에게 충분한 크기인지, 글자와 바탕의 대비가 충분한지는 아직 재지 않았다. 휴대폰과 넓은 화면 사이(태블릿)의 값을 어떻게 이을지도 정하지 않았다.
다음 단계7장: 주인의 말에 따라 최소 본문 크기와 글자–바탕 대비 기준을 점검한다.

핵심 정리

  1. 줄 높이는 기준선 사이 거리이고, 행간은 줄 높이에서 글자 크기를 뺀 빈 띠다. 웹은 행간을 반씩 글자 위아래에 붙인다. 줄 높이는 글자 크기와 짝으로, 웹에서는 단위 없는 비율로 적는다.
  2. 글줄 길이는 한 줄 글자 수로 생각한다. 라틴 본문의 45~75자는 관습의 권고이고, 한글은 공백을 포함한 평균 글자 폭이 라틴의 1.4배 안팎이라 같은 폭에 70% 남짓이 들어간다. WCAG 1.4.8은 한중일 글자의 상한을 40자로 따로 적는다.
  3. 줄이 길수록 줄 끝에서 다음 줄로 되돌아가는 도약이 길어지고 엉뚱한 줄에 떨어지기 쉽다. 긴 줄에는 행간을 더 주지만, 행간만으로 긴 줄을 구할 수는 없다. 긴 줄은 길이를 줄여 고친다.
  4. 글자 크기, 행간, 글줄 길이는 함께 움직인다. 하나를 바꾸면 나머지를 다시 본다.
  5. 한글은 글자가 글자 몸 높이를 거의 채워, 같은 줄 높이에서 라틴보다 줄 사이 빈 띠가 좁다. 한글 본문에 행간을 넉넉히 주는 관습은 이 차이와 방향이 같다.
  6. 권장 수치는 표준, 실험, 관습으로 근거가 다르다. 퍼센트를 옮겨 붙이지 말고 출발 구간을 정한 뒤 실제 독자와 기기로 확인한다.
  7. 제목, 시, 그림 같은 지면 구성에서는 행간과 글줄 길이의 규칙을 일부러 깨기도 한다. 기준은 읽혀야 하는 글인가, 보여야 하는 모양인가다.

확인 퀴즈

1. 20px 글자에 CSS로 line-height: 1.5를 주었다. 행간과 반행간은 각각 얼마인가?

줄 높이는 20 × 1.5 = 30px이고, 행간은 줄 높이에서 글자 크기를 뺀 30 − 20 = 10px이다. 반행간은 그 절반인 5px로, 글자 몸의 위와 아래에 하나씩 붙는다. 30px은 줄 높이(기준선 사이 거리)이지 행간이 아니다.

2. 넓은 모니터에서 본문이 화면 끝까지 이어져 한 줄이 100자 가까이 된다. 이 장의 생각에 가장 맞는 처방은?

긴 줄의 불리함은 행간만으로 메울 수 없다. 이 장의 모델로도 28 em·1.8과 같은 각도를 100 em 줄에서 지키려면 줄 높이가 6을 넘어야 하고, 그러면 문단이 흩어진다. 글자를 줄이면 한 줄 글자 수가 오히려 늘고, 본문 자간을 넓히면 회색값이 무너진다(5장).

3. 같은 크기, 같은 줄 높이 1.5로 짠 라틴 문단보다 한글 문단이 더 빽빽해 보인다. 가장 알맞은 설명은?

같은 줄 높이에서 줄 사이에 실제로 남는 빈 띠는 글자의 주된 높이에 따라 다르다. 라틴은 x높이가 글자 크기의 절반 안팎이라 빈 띠가 넓고, 한글은 받침 있는 글자를 중심으로 글자 몸 높이를 거의 채운다. 한글도 어절 사이에 공백을 둔다. 30%라는 연구 수치는 지어낸 것이다.

4. "한 단 본문은 45~75자"라는 권고에 대한 설명으로 옳은 것은?

45~75자는 브링허스트 등 조판 교본이 정리한 라틴 본문의 관습적 권고다. WCAG에는 AAA 등급의 1.4.8에 80자(한중일 40자) 상한이 있을 뿐이다. 실험 결과는 매체와 조건에 따라 엇갈린다. 한글은 평균 글자 폭이 넓어 같은 폭에 70% 남짓만 들어간다.

출처와 글꼴