글이 안 읽히는 건 문장 탓이 아니었습니다, 한글은 한 줄 40자

7월에 인사이트 글 세 편을 올리고 나서 "내용은 좋은데 읽다 보면 지친다"는 말을 들었습니다.

처음엔 문장을 고쳐야 하나 싶었어요. 그런데 원고를 다시 읽어보니 문장은 멀쩡했습니다. 문제는 화면이었습니다.

우리 화면이 어땠냐면

당시 게시글 본문이 이랬습니다.

이 조합이면 한 줄에 한글이 50자 넘게 들어갑니다. 그리고 문단 간격 8픽셀은 행간보다 좁아서, 문단이 나뉘어 있어도 눈에는 붙어 보입니다.

원고를 아무리 잘 써도 이 조합에서는 지칩니다. 제가 쓴 글인데도 제가 읽다가 놓쳤어요.

고치면서 근거를 찾아보니 W3C 문서에 이미 숫자가 있었습니다.

WCAG 2.2 성공 기준 1.4.8 Visual Presentation, 레벨 AAA입니다. 텍스트 블록에 대해 다섯 가지 조건을 걸어놓았는데 그중 두 개가 정확히 우리 문제였습니다.

줄 길이 조건은 이렇게 되어 있습니다.

"Width is no more than 80 characters or glyphs (40 if CJK)"

한중일 문자는 40자입니다. 영문 80자의 절반이에요. 우리가 50자 넘게 넣고 있었으니 기준의 1.25배였습니다.

줄 간격과 문단 간격 조건은 이렇습니다.

"Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing"

문단 안의 줄 간격은 1.5배 이상, 그리고 문단 사이 간격은 줄 간격의 1.5배보다 커야 한다는 뜻입니다. 우리는 행간 1.625에 문단 간격 8픽셀이었으니 완전히 거꾸로였습니다.

나머지 세 조건도 옮겨둡니다. 전경색과 배경색을 사용자가 선택할 수 있을 것, 양쪽 정렬을 쓰지 말 것, 보조 기술 없이 200퍼센트까지 확대해도 가로 스크롤 없이 읽을 수 있을 것입니다.

기준을 보고 이렇게 바꿨습니다.

문단 간격 20픽셀은 16픽셀 기준 행간 1.85(약 30픽셀)의 1.5배에는 아직 못 미칩니다. 정확히 맞추려면 45픽셀이 필요한데, 그러면 글이 너무 뚝뚝 끊겨 보여서 타협했습니다. 이건 기준 미달인 걸 알고 남겨둔 값입니다.

한 줄 40자는 폭으로 조정하는 대신 원고 쪽에서 눌렀습니다.

화면만 고쳐서는 부족했습니다. 원고가 긴 문단으로 되어 있으면 여전히 벽처럼 보이거든요.

그래서 기준을 하나 세웠습니다. 한 문단 180자 이하, 200자 넘으면 무조건 쪼갠다. 목표 평균은 60에서 70자입니다.

긴 나열이 들어간 문장은 문단으로 두지 않고 목록으로 뺍니다. 이 글에서도 그렇게 하고 있어요.

발행 전에 원고를 열어서 빈 줄 기준으로 문단을 잘라 평균 길이와 최댓값을 재봅니다. 명령 한 줄이면 되고, 최댓값이 200을 넘으면 그 문단을 찾아서 자릅니다.

읽다가 나가는 사람이 늘면 그건 결국 콘텐츠 평가로 돌아옵니다.

그리고 요즘은 사람만 읽는 게 아닙니다. 답변형 서비스가 글을 잘라서 인용할 때, 문단이 짧고 소제목이 명확한 글이 훨씬 잘 잘립니다. 200자짜리 문단은 통째로 버려지거나 어중간하게 잘립니다.

/post/44에서 인용되기 좋은 문장 구조 얘기를 했는데, 그때는 문장 단위만 봤습니다. 문단 단위가 빠져 있었어요.

세 번째가 제일 중요한데 아직 데이터가 안 모였습니다. 한 달쯤 뒤에 숫자로 다시 올리겠습니다.

한 가지 더 적어두면, 스타일은 코드라 배포해야 반영됩니다. 원고는 데이터베이스라 고치면 바로 보이고요. 이 차이 때문에 "고쳤는데 왜 그대로냐"고 십 분쯤 헤맸습니다.

출처