연재의 마지막 회차입니다. 글자의 크기 · 행간 · 줄바꿈을 정했고, 웹폰트가 흔들림 없이 도착하게 만들었습니다. 남은 것은 그 글자를 지면 위에 어떻게 배치할 것인가입니다.
한 줄에 몇 글자인가 — 측정폭
본문 한 줄의 길이를 조판에서는 측정폭(measure)이라고 부릅니다. 서구 조판의 오랜 관례는 한 줄에 45~75자입니다. 줄이 너무 길면 눈이 다음 줄의 시작을 찾지 못하고, 너무 짧으면 시선이 계속 되돌아와 피로해집니다.
이 관례를 한글에 그대로 옮길 수는 없습니다. 한글 글자 하나는 라틴 소문자보다 눈에 띄게 넓기 때문입니다. 같은 픽셀 폭에 들어가는 글자 수가 적고, 대신 글자 하나가 담는 정보량은 많습니다. 실무적으로는 한글 35~45자 정도가 편안한 출발점이고, 폰트와 크기에 따라 조정합니다.
⚠ 여기서 ch 단위를 쓰지 않는 편이 좋습니다. ch는 숫자 0의 폭을 기준으로 하는 단위라 한글 글자 폭과 관계가 없습니다. max-width를 픽셀이나 rem으로 정한 뒤, 실제 화면에서 한 줄의 글자 수를 세어 확인하는 편이 정확합니다.
.article__content {
max-width: 46rem; /* 약 736px — 세어 보고 조정한다 */
margin-inline: auto;
}
/* 본문보다 넓어도 되는 것들 */
.article__content > figure,
.article__content > pre { max-width: 56rem; }세로 리듬 — 간격을 한 벌로 쌓습니다
본문에는 문단만 있는 것이 아닙니다. 제목 · 목록 · 인용 · 이미지 · 코드가 섞이고, 각각이 제멋대로 여백을 갖고 있으면 글이 울퉁불퉁해집니다.
규칙은 둘입니다. 첫째, 간격 값을 미리 정한 계단에서만 고릅니다. 둘째, 여백은 한쪽 방향에서만 줍니다 — 요소마다 위아래 마진을 다 주면 어느 값이 이겼는지 매번 확인해야 합니다.
.article__content > * + * {
margin-block-start: var(--space-6); /* 형제 사이의 기본 간격 */
}
/* 제목은 위 여백을 크게, 아래 여백은 두지 않는다 */
.article__content > h2 + * { margin-block-start: var(--space-4); }
.article__content > h2 { margin-block-start: var(--space-12); }제목의 여백에는 원칙이 하나 있습니다. 제목 위 여백을 아래 여백보다 크게 둡니다. 제목은 앞 내용의 끝이 아니라 뒤에 오는 내용의 시작이므로, 가까이 붙어야 할 대상이 아래쪽입니다. 이 하나만 지켜도 긴 글의 구조가 눈에 훨씬 잘 들어옵니다.
한글 본문에서 하지 않는 것
양쪽 정렬(text-align: justify)을 쓰지 않습니다. 양쪽 정렬은 어절 사이 공백을 늘려 오른쪽 끝을 맞추는데, 앞서 다룬 word-break: keep-all과 만나면 끊을 자리가 적어 공백이 크게 벌어집니다. 문단 안에 흰 강이 흐르는 모양이 되고, 왼쪽 정렬보다 읽기 어려워집니다.
하이픈 분철에 기대지 않습니다. hyphens: auto는 언어별 분철 사전을 쓰는 기능이라 한국어에는 적용되지 않습니다. 한글 문단의 오른쪽 끝은 어느 정도 들쭉날쭉한 것이 정상이고, 그것을 억지로 맞추려 하면 앞의 두 문제로 되돌아옵니다.
본문에 음수 자간을 주지 않습니다. 첫 회차에서 다룬 이유 그대로입니다 — 이미 촘촘한 글자를 더 붙이는 일입니다.
마지막 점검
여기까지 적용했다면 실제 화면에서 세 가지를 확인합니다. 넓은 모니터에서 한 줄의 글자 수를 세어 보고, 모바일에서 문단이 벽처럼 보이지 않는지 보고, 제목과 본문의 간격이 뒤바뀌어 있지 않은지 봅니다. 셋 다 도구 없이 눈으로 확인되는 항목이고, 셋 다 자주 어긋납니다.
연재를 마치며
여덟 회차 동안 다룬 것은 결국 한 가지였습니다. 웹의 기본값은 라틴 알파벳을 기준으로 정해졌고, 한글은 그 기준에서 몇 군데가 다르다는 사실입니다. 기본값이 틀린 것이 아니라 우리 문자에 맞게 다시 세우면 되는 문제이고, 그 작업은 대부분 CSS 몇 줄로 끝납니다.
더 넓은 화면 설계 주제는 테마 · 플러그인 아카이브에 이어져 있습니다. 운영 중인 사이트에서 타이포그래피 · 웹폰트 로딩 · 성능 · 접근성을 한 번에 정비하고 싶다면 최적화 지원 사업에서 그 작업을 함께 처리하고, 어떤 순서로 측정하고 고치는지는 작업 과정에 절차 그대로 공개돼 있습니다.