읽기 좋은 글을 만드는 화면 기본기

같은 글인데 어떤 화면에서는 술술 읽히고 어떤 화면에서는 몇 줄 읽다 눈이 피로해집니다. 내용이 달라서가 아니라 글이 놓인 방식이 달라서입니다. 이 글에서는 한국어 본문을 기준으로 네 가지 숫자를 정리합니다. 거창한 이론이 아니라, 직접 바꿔 보며 정한 값들입니다.

글자 크기: 데스크톱 18px, 모바일 17px

본문은 너무 작으면 눈이 가까이 가고, 너무 크면 한 줄에 담기는 글자 수가 줄어 시선이 자주 꺾입니다. 한글은 같은 px에서 라틴 문자보다 크게 보이기 때문에 영문 사이트에서 흔한 16px는 조금 작게 느껴집니다.

• 데스크톱: 18px(1.125rem)
• 모바일: 17px(1.0625rem)
• 캡션·메타 정보: 14px 안팎

처음부터 숫자를 고정하기보다, 평소 읽는 글 몇 편을 같은 크기로 띄워 놓고 어느 쪽이 먼저 지치는지 보는 것이 빠릅니다.

줄 길이: 한 줄에 40~48자

가장 큰 차이를 만드는 값입니다. 한글은 글자 하나가 대략 1em 너비이므로, max-width를 em 단위로 주면 글자 수를 거의 그대로 계산할 수 있습니다.

.article-body {
  max-width: 42em;   /* 한 줄에 42자 안팎 */
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.7;
  word-break: keep-all;      /* 어절 중간에서 끊지 않기 */
  overflow-wrap: break-word; /* 긴 URL은 넘치지 않게 */
}

word-break: keep-all은 한국어에서 특히 효과가 큽니다. 기본값은 글자 단위로 줄을 바꾸기 때문에 단어가 반으로 갈라지는데, 이것만 막아도 글의 인상이 달라집니다. 다만 좁은 화면에서 긴 단어가 한 줄을 넘칠 수 있으니 overflow-wrap을 함께 둡니다.

줄이 길면 독자는 다음 줄의 시작을 찾느라 애쓰고, 줄이 너무 짧으면 리듬이 계속 끊긴다.

행간: 1.7을 기준으로

한글은 획이 조밀해서 라틴 문자 기준의 1.4~1.5로는 답답해 보입니다. 본문은 1.7 전후, 제목은 줄 수가 적으므로 1.3~1.4 정도가 무난합니다.

• 본문은 1.7입니다. 18px 기준으로 약 30px이고, 두 줄 이상 이어지는 글에서 가장 편했습니다.
• 소제목은 1.35 전후로 두고 두 줄을 넘기지 않게 문구를 다듬습니다.
• 인용은 본문보다 아주 조금 조밀한 1.65로 두면 덩어리로 읽힙니다.

단락 간격: 글자 크기의 1.2배

단락 사이를 빈 줄 하나로 처리하면 간격이 행간과 비슷해서 단락의 경계가 흐려집니다. 반대로 너무 벌리면 글이 뚝뚝 끊깁니다. 저는 1.2em을 씁니다.

.article-body > * + * {
  margin-top: 1.2em;
}
.article-body h2 {
  margin-top: 2.2em; /* 소제목 위는 더 넓게 */
}

소제목 위의 여백이 아래보다 넓어야 소제목이 앞 단락이 아니라 뒤따르는 단락에 속한다는 걸 눈이 알아챕니다.

색 대비: 연한 회색의 함정

본문 글자를 연한 회색으로 두면 첫인상은 세련되어 보입니다. 하지만 낮 시간 야외에서 폰으로 읽으면 글자가 배경에 녹아 버립니다. 일반 본문은 배경과의 대비 비율이 4.5 대 1은 되어야 하고, 보조 설명도 그 아래로 내려가지 않게 맞춥니다.

저는 두 가지를 습관처럼 확인합니다. 하나는 화면 밝기를 절반으로 낮춘 상태에서 읽어 보는 것, 다른 하나는 주변이 밝은 창가에서 읽어 보는 것입니다. 이 두 상황에서 글자가 흐려진다면 값을 한 단계씩 진하게 조정합니다. 디자인 도구 안에서 보는 색과 실제 화면에서 읽는 색은 생각보다 많이 다릅니다.

• 본문: 배경과 대비 4.5:1 이상
• 보조 설명(날짜·캡션): 같은 기준을 지키되 크기를 14px 아래로 내리지 않기
• 링크: 색만으로 구분하지 말고 밑줄을 함께 쓰기

여백도 내용이다

글을 읽기 편하게 만드는 마지막 재료는 비워 두는 공간입니다. 본문 양옆의 여백이 좁으면 글이 화면 가장자리에 붙어 답답하고, 위아래 여백이 좁으면 글 덩어리가 서로 부딪칩니다. 여백을 줄여서 한 화면에 더 많은 글을 담으려는 유혹이 있지만, 읽는 사람은 한 화면에 얼마나 많이 들어 있는지보다 한 번에 얼마나 편하게 읽히는지를 기억합니다.

모바일에서는 좌우 여백을 16px 아래로 내리지 않고, 데스크톱에서는 본문 칼럼 바깥을 일부러 비워 둡니다. 비어 있는 자리에 목차나 보조 정보를 놓을 수는 있지만, 본문의 폭과 위치는 바꾸지 않는 것이 좋습니다.

이미지와 캡션

글 중간에 사진이 들어가면 읽는 호흡이 바뀝니다. 사진은 본문 폭에 맞추고, 바로 아래에 한 줄짜리 캡션을 붙입니다. 캡션은 사진을 설명하는 문장이 아니라 사진이 글에 왜 들어왔는지 말해 주는 문장이면 좋습니다. 사진이 장식으로 보이는 순간 독자는 스크롤을 빨리 내리기 시작합니다.

대체 텍스트는 별개의 문제입니다. 화면을 보지 못하는 독자에게는 사진이 무엇을 담고 있는지가 전달되어야 하므로, 캡션과 겹치더라도 눈에 보이는 내용을 짧게 적어 둡니다.

글꼴 굵기와 강조

한글은 획이 많아서 굵은 글씨가 라틴 문자보다 훨씬 무겁게 보입니다. 본문 안의 강조는 두껍게 하나로 충분하고, 기울임은 쓰지 않습니다. 한글에는 진짜 기울임 글꼴이 없어 화면에서 억지로 비튼 모양이 나오기 때문에 획이 뭉개집니다. 강조가 필요한 곳은 굵기로, 인용은 왼쪽 선으로 구분하는 편이 안정적입니다.

제목의 굵기도 한 번쯤 의심해 볼 만합니다. 소제목을 가장 굵은 값으로 두면 본문과의 위계는 분명해지지만 화면 전체가 소란스러워집니다. 본문 굵기와 제목 굵기 사이에 두 단계 정도의 간격만 있어도 구분은 충분했습니다.

모바일에서 따로 확인할 것

데스크톱에서 완성한 레이아웃이 폰에서 어긋나는 곳은 늘 비슷합니다. 코드 블록이 화면 밖으로 넘치거나, 표처럼 넓은 요소가 본문을 밀어내거나, 긴 영문 단어가 한 줄을 터뜨립니다. 코드 블록은 가로 스크롤을 허용하고, 스크롤 영역에는 키보드로도 닿을 수 있게 포커스를 줍니다. 긴 단어는 overflow-wrap으로 줄을 바꿉니다.

마지막으로, 손가락으로 누르는 링크와 버튼은 높이를 44px 이상 확보합니다. 글 아래의 이전·다음 글 링크가 작으면 엄지로 누르다 엉뚱한 곳을 열게 됩니다.

한 번에 하나씩만 바꾸기

여기까지의 값을 한꺼번에 바꾸면 무엇이 효과가 있었는지 알 수 없습니다. 저는 한 번에 하나만 바꾸고, 같은 글 하나를 이틀 정도 두고 읽어 봅니다. 글자 크기를 올린 날, 줄 길이를 줄인 날, 행간을 넓힌 날을 따로 적어 두면 나중에 자기 취향의 기준이 숫자로 남습니다. 그 기록이 쌓이면 새 글을 쓸 때도 처음부터 다시 고민하지 않아도 됩니다.

마지막으로 확인할 것

숫자를 다 맞췄다면 화면을 세 가지로 바꿔 봅니다.

1. 폰 화면을 가로로 눕혀서
2. 브라우저를 200%까지 확대해서
3. 어두운 모드로 바꿔서

세 상황에서 모두 한 줄 글자 수가 극단으로 가지 않고 대비가 충분하다면, 기본기는 갖춘 셈입니다.

이 글의 값은 모두 개인적인 취향과 경험에 기반한 제안이며 정답이 아닙니다.