한국어 블로그의 가독성을 CSS 다섯 줄로 개선하기

블로그 글이 읽기 불편한데 어디를 고쳐야 할지 알기 어려웠다. 글자가 작은 것 같기도 하고, 줄이 빽빽한 것 같기도 했다. 잘 읽히는 블로그와 나란히 놓고 봐도 느낌만으로는 차이를 설명할 수 없었다.

그래서 우아한형제들 기술블로그, GitHub Blog, CSS-Tricks, Mozilla Hacks의 본문 크기와 행간, 폭을 개발자 도구로 측정했다. 차이를 비교한 뒤 줄바꿈과 행간, 본문 폭을 CSS 다섯 줄로 조정했다. 어떤 값을 골랐는지, 워드프레스 테마가 업데이트되어도 설정이 남도록 어디에 적었는지 정리한다.

1. 짐작을 접고 네 사이트의 값을 쟀다

브라우저 개발자 도구를 열고 각 사이트 본문에서 가장 긴 문단을 골라 실제 적용값을 읽었다. 스타일시트에 적힌 값이 아니라 그 순간 화면에 실제로 걸려 있는 값이다.

	우아한형제들	GitHub Blog	CSS-Tricks	Mozilla Hacks
본문 크기	16px	18px	19.4px	16px
행간	1.70	1.67	1.70	1.50
본문 폭	650px	699px	608px	595px
한 줄	41자(한글)	78자(영문)	63자	74자

표 1. 네 기술블로그의 본문 타이포그래피 실측값

표를 놓고 보면 제일 먼저 걸리는 것이 폭이다. 본문 폭이 하나같이 600~700px 언저리다. 요즘 노트북 화면은 1,400px가 넘는데 그 절반도 안 쓴다. 넷이 서로 짜고 그럴 리는 없으니 화면을 남겨 두고 좁게 쓰는 데에는 취향 말고 다른 이유가 있다는 뜻이다.

우아한형제들에는 다른 셋에 없는 CSS 한 줄이 있었다. 그 한 줄이 첫 번째 문제의 답이었다.

2. 왜 “프로비저”에서 줄이 바뀌는가

브라우저 창을 좁혀 놓고 한국어 글을 읽으면 이런 줄바꿈을 만난다. 한국어로 된 화면을 오래 본 사람이라면 이 모양을 어디선가 한 번쯤 마주쳤을 것이다.

영문 웹 표준을 그대로 가져오면 한국어는 어절 중간에서 줄이 바뀐다. "프로비저
닝"이 "프로비저"와 "닝"으로 쪼개지는 식이다.

프로비저 다음에 줄이 바뀌고 닝이 다음 줄로 넘어가면 읽다가 한 번 멈칫한다. 이걸 폰트나 테마 탓으로 보기 쉬운데, 원인은 그보다 아래인 브라우저의 기본 동작에 있다.

브라우저는 사람이 끊는 자리에서 끊지 않는다. 기본 동작이 영어를 기준으로 만들어졌기 때문이다. 영어는 단어 사이에 공백이 있어서 브라우저가 “여기서 끊으면 된다”를 안다. 한국어는 글자 하나하나가 붙어 있어서 브라우저 입장에서는 어디서 끊어도 된다고 판단한다.

고치는 방법은 CSS 한 줄이다.

word-break: keep-all;

“어절 단위로만 끊어라”는 뜻이다. 띄어쓰기가 있는 자리에서만 줄을 바꾼다. 이 한 줄로 끝날 것 같지만 실제로 넣어 보면 한 가지가 더 걸린다.

이 한 줄만 쓰면 긴 영문 주소가 화면 밖으로 삐져나간다. 그래서 짝이 되는 한 줄을 같이 쓴다.

body,
p,
li,
dd,
dt,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.site-title,
.widget-title {
  word-break: keep-all;
  overflow-wrap: break-word;
}

overflow-wrap: break-word는 “그래도 도저히 안 들어가는 것은 끊어도 된다”는 예외다. 한글 어절은 지키면서 긴 URL만 잘린다.

한국어 웹에서 체감 차이가 가장 큰 한 줄인데 의외로 빠뜨린 곳이 많다. 위 표의 넷 중 우아한형제들만 쓰고 있었다.

3. 숫자가 같은데 왜 한글만 빽빽한가

표에서 Mozilla Hacks의 행간은 1.50이었다. 영문 사이트라 그 값으로 읽어도 아무 문제가 없다. 그런데 같은 1.50을 한국어 글에 그대로 옮기면 읽는 속도가 확 떨어진다. 숫자가 똑같은데 한쪽만 그런 이유는 배수가 아니라 글자 쪽에 있다.

행간은 줄과 줄 사이 간격이고 글자 크기의 몇 배인지로 적는다. 1.5면 글자 크기의 1.5배다. 배수는 같아도 그 배수가 감싸는 글자의 생김새가 언어마다 다르다는 것이 답이었다.

한글은 네모 한 칸 안에 획이 꽉 차 있다. 쓸이나 왕 같은 글자를 보면 위아래 여백이 거의 없다. 반면 영문 소문자 a나 e는 글자 위아래로 빈 공간이 남고, 행간이 좁아도 그 공간이 대신 숨통을 틔워 준다. 같은 배수를 줬을 때 한글 쪽이 빽빽해 보이는 것은 그 여백만큼을 손해 보기 때문이다.

기준은 이렇다.

언어	편한 행간
영문	1.5 ~ 1.6
한글	1.7 ~ 1.9

표 2. 언어별로 편안한 행간 구간

영문 사이트의 행간을 그대로 가져오면 안 되는 이유가 여기 있다. 숫자만 나란히 놓고 봐서는 이 차이가 잘 안 보인다.

4. 화면이 넓은데 왜 좁게 쓰는가

1번 표에서 넷이 다 600~700px에 몰려 있던 이유도 결국 여기서 나온다.

눈은 한 줄을 다 읽으면 왼쪽 아래로 되돌아간다. 그 이동 거리가 멀수록 방금 어느 줄을 읽었는지 놓치는 실수가 잦아진다. 반대로 너무 짧으면 되돌아가는 횟수가 늘어서 그것대로 피곤하다. 양쪽 사이에 편한 구간이 있다는 뜻이다.

한글은 한 줄에 35~45자가 편안하고, 글자 폭이 일정해서 계산도 쉽다. 본문 크기가 18px이면 한 줄에 40자는 대략 720px다.

이 블로그는 728px로 잡았다. 우아한형제들의 650px보다 조금 넓지만 같은 구간 안에 있다. 폭을 정할 때는 화면이 얼마나 넓은지가 아니라 한 줄에 몇 자가 들어가는지를 보면 된다.

5. 테마 파일을 직접 고치면 어떻게 되는가

여기까지 정한 값을 어딘가에 적어야 한다. 관리자 화면에서 “외모 → 테마 파일 편집기”를 열면 테마 CSS가 그대로 나온다. 여기에 다섯 줄을 붙여넣으면 끝날 것처럼 보인다. 관리자 화면이 편집기를 열어 주니 해도 되는 일처럼 보이는데 그러면 안 된다.

테마가 업데이트되는 순간 고친 내용이 전부 사라진다. 업데이트는 테마 파일을 새 버전으로 덮어쓰는 일이라 그 안에 적어 넣은 줄도 같이 지워진다. 어느 날 글이 다시 읽기 불편해져 있는데 무엇을 건드렸는지는 기억나지 않는다.

인쇄된 사진 위에 직접 색연필로 그리는 대신, 투명 필름을 덮고 그 위에 그린다고 생각하면 된다. 사진을 새것으로 바꿔도 필름은 그대로 남는다.

그 투명 필름이 자식 테마다. 원래 테마(부모 테마)는 건드리지 않고 그 위에 얹는 별도 테마를 만든다. 워드프레스는 부모 테마의 CSS를 먼저 읽고 자식 테마의 CSS를 나중에 읽는다. 나중에 읽은 값이 앞의 값을 덮는다. 그래서 자식 테마에 적은 값이 적용된다.

만드는 데는 파일 두 개면 된다.

wp-content/themes/generatepress-child/
├── style.css       ← 여기에 내 CSS 를 적는다
└── functions.php   ← 부모 테마 CSS 를 불러오는 코드

style.css 맨 위에 어느 테마의 자식인지 밝힌다.

/*
Theme Name: GeneratePress Child
Template: generatepress
*/

Template 값이 부모 테마의 폴더 이름이고 이것만 맞으면 워드프레스가 관계를 알아본다. 만든 뒤 외모 → 테마에서 자식 테마를 활성화하면 끝이다. 준비할 것이 많아 보이지만 실제로 필요한 파일은 위의 두 개가 전부다.

6. 같은 색이 세 군데에 적혀 있다

값을 어디에 적을지는 정했으니 이제 같은 값을 몇 번 적을 것인지가 남았다.

CSS를 쓰다 보면 같은 색이 여러 자리에 적힌다. 링크 색과 인용문 선 색과 버튼 색이 다 같은 파란색인데 적힌 곳은 서로 떨어진 세 군데다. 나중에 그 파란색을 조금 다른 파란색으로 바꾸려면 세 군데를 전부 찾아 고쳐야 하고, 그러다 인용문 선 하나가 옛날 색으로 남는다.

CSS에는 그 일을 막는 장치가 있다. 값을 쓰는 자리마다 적는 대신, 맨 위에 이름과 값을 한 번 정해둔다.

:root {
  --color-text: #363737;
  --color-accent: #2096ff;
  --content-width: 728px;
}

본문에서는 이름으로 부른다.

body {
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
}

이렇게 해두면 포인트 색을 바꾸고 싶을 때 --color-accent 한 줄만 고치면 되고 링크와 인용문 선이 한꺼번에 따라온다. 고칠 자리가 애초에 하나뿐이라 빠뜨릴 수가 없다.

7. 가독성을 높이며 감수한 점

얻은 것만 적으면 공평하지 않으니 이렇게 옮기면서 치른 것도 같이 적어 둔다.

관리자 화면에서 클릭으로 색을 고르던 것을 이제 파일을 열어 고친다. 익숙해지기 전에는 이쪽이 확실히 느리다.

테마를 갈아타기도 어려워졌다. 자식 테마는 특정 부모 테마에 붙어 있어서 나중에 다른 테마로 옮기면 지금 쓴 CSS의 상당 부분을 다시 맞춰야 한다. 클래스 이름이 테마마다 다르기 때문이다.

값도 전부 직접 정해야 한다. 좋은 테마는 이런 값이 이미 맞춰져 있다. 직접 잡으면 자유로운 대신 정할 것이 늘어난다.

그래도 옮긴 이유는 하나다. 한국어에 맞춘 값은 어떤 테마도 기본으로 주지 않는다. word-break: keep-all을 기본값으로 넣어 둔 테마는 아직 찾지 못했다.

8. 지금 쓰는 값과 아직 모르는 것

지금까지 정한 값을 한자리에 모으면 이렇다.

항목	값
본문 크기	18px (모바일 16.5px)
행간	1.8 (모바일 1.78)
본문 폭	728px
자간	-0.003em
본문 색	#363737
줄바꿈	word-break: keep-all

표 3. 이 블로그에 최종 적용한 값

자간을 살짝 조인 것은 요즘 한글 폰트가 그렇게 해야 제 모양이 나기 때문이다. 다만 본문에서 과하게 조이면 오히려 읽기 힘들어지므로 제목은 조이고 본문은 거의 건드리지 않는 편이 낫다.

아직 확인하지 못한 것도 있다. 여기 수치는 전부 데스크톱에서 잰 값이라 모바일에서 실제로 어떻게 보이는지는 기기별로 다시 봐야 한다.

지금은 폭이나 색을 고칠 일이 생겨도 :root 한 곳만 열면 되고 테마가 업데이트돼도 그 값이 그대로 남는다. 느낌으로만 불편하던 것이 고칠 자리가 있는 값이 됐다는 것이 달라진 전부다.