솔직히 처음에는 제 블로그 글이 재미없어서 독자가 안 읽는다고 생각했습니다. 그런데 제가 직접 모바일로 읽어보니 두 문단도 안 가서 눈이 불편해졌습니다. 문제는 콘텐츠가 아니라 CSS였습니다. font-size, line-height, letter-spacing 설정 몇 가지를 바꾸고 나서야 같은 글이 다르게 느껴졌습니다. 이 경험을 바탕으로 블로그 가독성을 실질적으로 높이는 CSS 설정을 정리했습니다.
내용이 좋아도 읽기 불편하면 독자는 떠난다. CSS 몇 줄 바꾸고 나서 체류 시간이 달라지는 걸 느꼈다.
font-size와 line-height, 숫자 하나가 읽히는 경험을 바꾼다
티스토리 기본 스킨은 font-size가 14px으로 설정되어 있습니다. font-size란 화면에 렌더링되는 글자의 기본 크기를 픽셀 단위로 지정하는 속성입니다. 14px은 데스크톱 화면에서는 크게 불편하지 않지만, 모바일에서는 이야기가 다릅니다. 제가 직접 써봤는데, 스마트폰으로 14px 텍스트를 읽을 때는 글에 집중하기보다 글자를 해독하는 데 에너지가 먼저 쓰이는 느낌이었습니다. 16px로 올리는 것만으로도 그 피로감이 눈에 띄게 줄었습니다.
font-size를 16px로 바꾸고 나서 그 다음에 손댄 것이 line-height였습니다. line-height란 텍스트 한 줄이 차지하는 높이를 조정하는 속성으로, 쉽게 말해 줄 간격입니다. 기본값인 1.4는 줄과 줄 사이가 좁아서 텍스트 블록 전체가 빽빽하게 느껴집니다. 저는 1.8로 올렸고, 똑같은 글을 다시 읽어보니 중간에 포기하고 싶은 느낌이 확연히 줄었습니다. MDN Web Docs에 따르면 가독성을 위한 line-height 권장 범위는 1.5 이상이며, 본문 텍스트에는 1.5~2.0 사이가 적합하다고 명시되어 있습니다(출처: MDN Web Docs).
letter-spacing을 건드릴 때는 솔직히 실수를 했습니다. letter-spacing이란 글자 사이의 간격을 조정하는 속성인데, 처음에 0.08em으로 설정했더니 글자들이 낱낱이 떨어져 보여서 오히려 읽기가 더 어려워졌습니다. "자간을 넓히면 가독성이 좋아진다"는 말을 그대로 믿었다가 생긴 일입니다. 실제로 써보니 한글은 영문보다 자간에 훨씬 민감하게 반응했습니다. 0.02em으로 줄이고 나서야 자연스러운 흐름이 생겼습니다. 저는 이때부터 수치를 조금씩 바꿔가며 직접 눈으로 확인하는 습관이 생겼습니다.
이 세 가지 속성을 조정할 때 실질적으로 확인해야 할 포인트는 다음과 같습니다.
- font-size는 본문 기준 최소 16px 이상으로 설정할 것
- line-height는 1.6~1.8 사이에서 조정하되, 모바일에서 직접 확인할 것
- letter-spacing은 한글 기준 0.01em~0.03em 범위에서 조심스럽게 시작할 것
font-family와 word-break, 눈에 안 보이는 것들이 만드는 차이
font-family는 웹에서 사용할 글꼴 우선순위를 지정하는 속성입니다. 처음에는 Noto Sans KR을 사용하고 있었는데, 모바일에서 첫 화면이 뜨는 속도가 유독 느리다는 걸 체감했습니다. 구글 폰트처럼 외부 서버에서 불러오는 웹 폰트는 네트워크 요청이 추가로 발생하기 때문에 초기 렌더링 속도에 영향을 줄 수 있습니다. 이를 줄이기 위해 시스템 폰트 스택(system font stack)으로 전환했습니다. 시스템 폰트 스택이란 운영체제에 기본 설치된 폰트들을 우선순위 순으로 나열한 font-family 설정 방식으로, 별도의 다운로드 없이 사용자의 기기에 이미 있는 폰트를 바로 사용합니다. 바꾸고 나서 첫 화면이 뜨는 속도가 확실히 빨라졌고, 이후로는 웹 폰트를 꼭 써야 하는 상황이 아니라면 시스템 폰트를 먼저 고려하게 됐습니다.
웹 폰트를 반드시 써야 하는 상황이라면 어떤 폰트가 가독성에 유리한지 따져봐야 한다고 생각합니다. Noto Sans KR을 쓰는 분들도 많고 실제로 좋은 폰트이지만, 가독성을 기준으로 선택해야 한다면 획의 두께나 자형의 균일성을 우선적으로 봐야 합니다. Google의 웹 폰트 가이드라인에서도 폰트 로딩 전략과 성능을 동시에 고려하도록 권장하고 있습니다(출처: web.dev).
word-break는 처음에는 건드릴 생각도 없던 속성입니다. 그런데 긴 URL을 본문에 포함시킨 뒤 가로 스크롤이 생기는 문제가 발생했고, 원인을 찾다가 이 속성에 도달했습니다. word-break: keep-all은 한글 단어를 음절 단위로 쪼개지 않고 단어 단위로 줄 바꿈을 처리하는 설정입니다. 여기에 overflow-wrap: break-word를 함께 적용하면 영문 URL처럼 띄어쓰기 없이 길게 이어지는 문자열은 강제로 줄 바꿈이 되어 레이아웃이 깨지지 않습니다. 이 두 속성을 같이 적용하고 나서 가로 스크롤 문제가 완전히 해결됐습니다.
한 가지 아쉬운 점을 덧붙이자면, 이 글에서 다룬 속성들 외에도 font-weight와 폰트 렌더링 설정을 함께 고려해야 가독성이 완성된다고 느낍니다. font-weight란 글자의 굵기를 지정하는 속성인데, 같은 16px이라도 font-weight가 300이면 모바일 화면에서 글자가 얇게 번져 보이는 경우가 있습니다. 저는 본문에 font-weight: 400을 기본으로 두고 있고, 이게 훨씬 안정적으로 보인다고 느꼈습니다. Nielsen Norman Group의 가독성 연구에서도 글자 크기, 간격, 명도 대비가 복합적으로 작용할 때 독해 속도가 유의미하게 달라진다는 점을 지적하고 있습니다(출처: Nielsen Norman Group).
CSS 설정은 한 번 맞추면 끝나는 게 아니라, 글을 올릴 때마다 실제 화면에서 읽어보면서 계속 조정하는 작업입니다. 제 경험상 가장 좋은 기준은 제가 직접 모바일로 읽어보는 것이었습니다. 설정값이 얼마나 논리적으로 올바른지보다 실제로 읽히는지가 중요합니다. font-size, line-height, letter-spacing, font-family, word-break 중 아직 손대지 않은 속성이 있다면, 하나씩 바꿔보고 직접 눈으로 확인해보시길 권합니다. 숫자 하나의 차이가 독자가 글을 끝까지 읽느냐 아니냐를 가를 수 있습니다.
출처 및 참고 링크
MDN Web Docs — line-height
MDN Web Docs — letter-spacing
Nielsen Norman Group — Legibility, Readability, and Comprehension
web.dev — Font best practices (Google)
Google Fonts — Noto Sans KR