결론부터 말하면, 읽기 편한 글은 예쁜 폰트를 입힌 글이 아니다. 열자마자 무슨 글인지 알 수 있고, 중간에 주의가 흩어져도 돌아올 수 있고, 글자를 키워도 깨지지 않고, 언어가 바뀌어도 자연스럽게 읽히는 글이다. 독자는 글을 공략하러 온 게 아니다. 길 안내는 글이 해야 한다는 얘기다.
먼저 3줄 요약:
- 본문은 17
18px 안팎, 줄 간격 1.71.9, 너무 길지 않은 한 줄 너비를 실무의 출발점으로 삼으면 다루기 쉽다. 만능 법칙은 아니다. - WCAG 2.2(웹 접근성 국제 표준)에서는 명암 대비, 200% 글자 확대, 320 CSS px에서의 리플로(화면 폭에 맞춰 배치가 다시 짜이는 것), 글자 간격 덮어쓰기, 키보드 조작을 깨뜨리지 않는 것이 중요하다. [R1-R8]
- 12개 언어는 "같은 CSS를 12번 복붙"하는 게 아니라, 공통 접근성 토대에 문자 체계별 조정을 더하는 방식으로 간다. [R10-R13]
1. 가독성은 센스가 아니라 3겹 설계다
가독성에는 적어도 세 겹이 있다. 글자가 보이는가, 글을 따라갈 수 있는가, 페이지를 조작할 수 있는가. 18px여도 문장이 벽처럼 빽빽하면 힘들다. 글이 쉬워도 버튼이 너무 작으면 힘들다. 그러니 "폰트 크기만 고치면 끝"이라는 건 집 문패만 반짝반짝 닦고 계단을 뜯어낸 것과 같다.
2. 독자는 처음부터 전부 읽지 않는다. 그래서 4단계로 읽히게 만든다
웹에서는 훑어 읽기가 당연하다. 그래서 글을 5초=제목과 도입부, 30초=H2 제목과 굵은 글씨, 3분=핵심 요점, 깊이 읽기=전문의 4단계로 읽을 수 있게 만든다. 짧은 글만 쓰라는 뜻이 아니다. 긴 글이라도 중간 정거장을 많이 만들라는 뜻이다.
H2만 이어 읽어도 이야기가 통하고, 각 절 첫머리에 작은 결론이 있고, 표와 글머리 기호로 비교가 한눈에 들어오면 "전부 읽는 사람"과 "답만 필요한 사람"이 한 페이지에서 공존할 수 있다.
3. 본문 글자 크기는 17~18px 안팎에서 시작한다
웹 본문에 절대적인 최적값은 없다. 다만 글자가 너무 작으면 잘 보이지 않고, 실제 웹페이지를 쓴 시선 추적 연구에서도 글꼴 크기가 커질수록 응시 시간이 짧아지는 경향이 있었다. [R14] 실무에서는 본문 17~18px을 출발점으로 삼고, rem처럼 확대에 강한 단위로 짜면 다루기 편하다.
중요한 건 "18px로 했으니 접근성 OK"가 아니라는 점이다. WCAG 2.2 AA의 글자 크기 조절(Resize Text) 기준은 200%까지 확대해도 내용과 기능이 사라지지 않을 것을 요구한다. [R3] 독자가 키운 순간 메뉴가 사라진다면, 18px짜리 예쁜 첫 화면은 그저 기념사진일 뿐이다.
4. 줄 간격·문단 간격·한 줄 너비는 '글자의 교통량'을 줄인다
본문 줄 간격은 1.7~1.9 정도로 시작하면 긴 웹 글에서 여유를 만들기 쉽다. 문단 사이에도 뚜렷한 여백을 둔다. 한 문단에는 한 주제가 기본이고, 줄바꿈 하나 없는 거대한 덩어리는 피한다. [R9]
알파벳 글에서는 한 줄 55자 안팎의 중간 길이가 효과적이었다는 연구가 있고, 실무에서는 55~70자 안팎을 출발점으로 삼기 쉽다. [R15] WCAG AAA의 시각적 표현(Visual Presentation) 기준은 80자 이하, CJK(한중일 문자)는 40자 이하를 제시한다. [R8] 여기서도 "55가 우주의 진리"는 아니다. 화면, 언어, 글자 크기에 맞춰 조정한다.
양쪽 맞춤은 단어 사이 공백이 들쭉날쭉해지기 쉽다. 특히 웹에서는 기본적으로 한쪽 정렬이면 충분하다. [R8]
5. 폰트는 마법 지팡이가 아니다. 평범하게 읽히는 걸 빠르게 띄워라
세리프냐 산세리프냐에 만능 승자는 없다. 통제 실험에서는 읽는 속도에 큰 세리프 효과가 나타나지 않았다. [R16] 게다가 2026년 메타분석에서는 OpenDyslexic 같은 "난독증용 특수 폰트"가 표준 폰트보다 읽기 성적을 일관되게 높인다는 증거가 확인되지 않았다. [R17]
그러니 장애 대응이 곧 특수 폰트 강제는 아니다. 충분한 크기, 여백, 자연스러운 글자 모양, 정확한 글자 수록, 사용자가 확대할 수 있는 것이 토대가 된다. 본문은 기기의 시스템 폰트나 각 언어의 일반적인 폰트를 우선하면 거대한 웹 폰트를 불러오지 않아도 된다.
6. 배경색과 명암 대비: 연한 회색 글씨는 '멋 부리기 세금'이 비싸다
WCAG 2.2 AA에서는 일반 글자 4.5:1, 큰 글자 3:1 이상의 명암 대비가 기준이다. [R2] "왠지 고급스러워 보인다"며 흰 배경에 연한 회색을 얹어 독자 눈에 디버프를 걸 필요는 없다.
연구에서는 밝은 배경에 어두운 글자를 두는 양극성(positive polarity) 표시가 교정이나 작은 글자 식별에 유리하다는 결과가 여러 건 있다. [R18] 그러니 일반 독자용 기본값은 라이트 테마가 무난하다. 다만 다크 모드를 좋아하는 사람도 있으니 선택지는 남겨 둔다. "새하얀색보다 반드시 오프화이트가 눈 건강에 좋다"고 단언할 만큼 강한 근거는 없다.
7. H1·H2·H3는 장식이 아니라 글의 도로 표지판이다
H1은 페이지의 주제, H2는 큰 논점, H3는 그 세부 내용이다. 겉모양만 굵게 해서 제목인 척하지 말고, HTML 제목 구조로 의미를 부여한다. 화면 낭독기 사용자는 제목으로 페이지 안을 이동하므로, 제목은 시각 디자인이자 내비게이션이다. [R7][R9]
좋은 테스트는 간단하다. H2만 뽑아 봐도 글의 줄거리가 보이는가. 안 보인다면 제목이 "제2장", "계속", "더 자세히" 같은 길 잃음 제조기일 가능성이 높다.
8. 굵은 글씨·글머리 기호·표·결론 상자는 '정보 표지판'으로 쓴다
굵은 글씨는 중요한 용어, 글머리 기호는 나란한 정보, 표는 비교, 결론 상자는 판단이 내려앉는 곳이다. 전부에 역할을 준다. 글 전체를 굵게 하면 경고등 100개를 동시에 켜는 것과 같아서, 결국 어느 것도 눈에 띄지 않는다.
링크는 색만으로 구분하지 말고 밑줄 같은 다른 단서도 준다. 중요한 정보도 "빨간색이니까 위험합니다"로 끝내지 말고 글자나 아이콘으로도 뜻을 보여 준다.
9. '도파민 중독 모드'를 전제로 한다. 다만 인류 집중력 8초설은 믿지 않는다
여기서 말하는 '도파민 중독 모드'는 의학 용어가 아니다. 알림→숏폼 영상→다른 탭→돌아와서→"어디까지 읽었더라?"로 이어지는 요즘 웹의 산만한 상태를 우스개로 부르는 말이다. 세대나 장애를 뭉뚱그려 욕하는 데 쓸 말이 아니다.
대책은 글 전체를 숏폼 영상으로 만드는 게 아니다. 짧은 문단, 구체적인 제목, 절마다 작은 결론, 필요하면 목차, 돌아왔을 때 맥락을 되살릴 수 있는 고유명사를 쓰는 것이다. 자동 재생, 관련 없는 캐러셀, 읽는 도중 화면을 가로채는 팝업은 독자의 집중력에 의자를 던지는 짓이니 줄인다. [R9]
10. 장애 접근성은 '특별 모드'가 아니라 기본 장비로 갖춘다
기본은 WCAG 2.2 AA를 목표로 한다. 대표적으로 200% 글자 확대, 320 CSS px 상당에서 좌우 스크롤이 필요 없는 리플로, 4.5:1 명암 대비, 24×24 CSS px 이상의 포인터 대상 또는 충분한 간격, 키보드 조작, 눈에 보이는 포커스, 반복되는 부분을 건너뛰는 장치 등이다. [R1-R7]
Text Spacing 기준의 "줄 간격 1.5, 문단 뒤 간격 2, 자간 0.12em, 단어 간격 0.16em"은 초기 CSS를 그 값으로 하라는 명령이 아니다. 이용자가 그 값으로 덮어써도 글자가 겹치거나 사라지거나 기능이 깨지지 않는 것이 AA 요건이다. [R5]
실무에서는 주요 버튼을 44px 안팎까지 키우면 누르기 쉽지만, WCAG 2.2 AA의 최소 기준 자체는 예외 조건이 붙은 24×24 CSS px이다. [R6]
11. 12개 언어는 같은 디자인 시스템을 공유하되, 같은 조판을 강요하지 않는다
공통으로 갖는 것은 명암 대비, 제목 계층, 확대, 리플로, 여백, 조작성, 접근 가능한 이름 같은 토대다. 언어마다 바꾸는 것은 폰트, 줄바꿈, 하이픈 넣기, 문장 부호, 줄 높이 같은 문자 체계에 의존하는 부분이다. [R10-R13]
lang 속성도 중요하다. zh-Hans, zh-Hant, pt-BR 같은 정보를 마음대로 zh나 pt로 뭉뚱그리면 안 된다. 브라우저, 음성 낭독, 하이픈 처리, 폰트 선택의 단서가 된다.
12. 언어별 실무 출발값
| 그룹 | 출발값의 사고방식 |
|---|---|
| 일본어 | 17 |
| 중국어 간체·번체 | CJK용 폰트를 나누고, 금칙 처리와 문장 부호를 깨뜨리지 않는다. zh-Hans와 zh-Hant를 분리한다. [R11] |
| 한국어 | 한글용 폰트를 쓰고 부자연스러운 자간을 넣지 않는다. 한국어 줄바꿈이 제대로 되는지 확인한다. [R12] |
| 태국어 | 올바른 글자 조합(셰이핑)과 단어 경계·줄바꿈을 깨뜨리지 않는다. 줄 높이는 조금 넉넉한 쪽이 안전하다. word-break: break-all을 함부로 쓰지 않는다. [R13] |
| 베트남어 | 성조 부호(다이어크리틱 마크)를 빠짐없이 수록한 폰트를 쓰고, 고정 높이로 글자 위아래가 잘리지 않게 한다. |
| en/es/pt-BR/id/fr/de | 55~70자 정도를 출발점으로 삼고, 올바른 lang과 hyphens:auto를 검토한다. 독일어의 긴 복합어 등으로 넘치지 않는지 확인한다. |
13. 스마트폰에서는 '읽힌다'뿐 아니라 '바로 뜬다'가 중요하다
12개 언어 전부에 거대한 웹 폰트를 쌓으면 글자가 뜨기도 전에 독자가 떠난다. web.dev는 웹 폰트가 FCP/LCP(첫 화면과 주요 콘텐츠가 뜨는 속도)를 늦추고, 폰트 교체가 CLS(레이아웃 흔들림)를 일으킬 수 있다고 설명한다. [R19] 본문은 시스템 폰트 우선, 브랜드 폰트는 필요한 곳에만 쓰는 것이 탄탄하다.
Core Web Vitals의 현재 양호 목표는 75번째 백분위수에서 LCP 2.5초 이하, INP 200ms 이하, CLS 0.1 이하다. [R20] 읽는 도중 광고나 폰트 때문에 문단이 쿵 하고 아래로 떨어지는 사이트는 내용 이전에 "손가락으로 책을 누르고 있는데 점원이 책상을 옮긴" 꼴이다.
14. 계속 찾아오는 글은 매번 같은 자리에 같은 것이 있다
재방문을 늘리는 토대는 화려한 연출보다 예측 가능성이다. 제목의 모양, 링크의 모양, 목차, 글 너비, 언어 전환, 검색 결과, 관련 글의 위치가 매번 거의 같으면 독자가 조작법을 익힌다.
글자 크기·줄 간격·테마를 바꾸는 "Aa" 설정을 마련한다면 그 선택을 저장해 두는 것도 좋다. 접근성은 매번 "장애인 모드를 켜 주세요"라고 하는 게 아니라, 처음부터 잘 깨지지 않고 필요한 사람만 조정할 수 있는 형태가 다루기 쉽다.
15. 해서는 안 되는 '독자 내구 테스트'
피하고 싶은 대표 사례는 12px급 본문, 연한 회색, 100자가 넘는 긴 줄, 양쪽 맞춤, 한 화면을 가득 채우는 문단, 제목 단계 건너뛰기, 전부 굵은 글씨, 색만으로 뜻을 전하는 UI, 자동 재생, 닫기 어려운 팝업, 본문을 이미지로 만들기, 확대하면 가로 스크롤 지옥, 거대한 웹 폰트, 의미 없는 애니메이션이다.
독자는 "이 사이트를 끝까지 읽을 지능과 동체 시력이 있는지" 시험을 보러 온 게 아니다.
16. 고민될 땐 이 기준값에서 시작한다
| 항목 | 실무 출발값 | 비고 |
|---|---|---|
| 본문 | 17~18px | 절대값이 아님. 확대 가능하게 한다 |
| 본문 줄 간격 | 1.7~1.9 | 언어·폰트에 맞춰 조정 |
| 알파벳 한 줄 | 약 55~70자 | 연구와 실무의 출발점. 너무 긴 줄은 피한다 [R15] |
| CJK 한 줄 | 약 30~40자 | 40은 WCAG AAA Visual Presentation의 기준에도 대응 [R8] |
| H1 | 약 32~40px | 본문과의 차이를 분명히 |
| H2 | 약 25~30px | H2만으로도 흐름을 이해할 수 있게 |
| H3 | 약 21~24px | H2와의 차이를 남긴다 |
| 일반 글자 명암 대비 | 4.5:1 이상 | WCAG 2.2 AA [R2] |
| 큰 글자 | 3:1 이상 | WCAG 2.2 AA [R2] |
| 포인터 대상 | 24×24 CSS px 이상이 기준 | 예외 있음. 실무에서는 44px 안팎도 검토 [R6] |
| 글자 확대 | 200% | 내용·기능을 잃지 않는다 [R3] |
| 리플로 | 320 CSS px | 원칙적으로 2방향 스크롤 불필요 [R4] |
17. 품질 관문을 만든다. "조심하겠습니다"는 품질 보증이 아니다
글 공장이나 CMS(콘텐츠 관리 시스템)라면 가독성을 사람의 기억에만 맡기지 않는다. 정적 검사로 lang, H1, 제목 순서, 이미지 alt, 접근 가능한 이름, 금지 CSS를 보고, 실제 브라우저 검사로 320px, 200% 확대, Text Spacing 덮어쓰기, 키보드, 포커스, 가로 스크롤을 확인한다.
안전하게 고칠 수 있는 것은 자동 수정해도 된다. 예를 들면 빠진 lang이나 공통 CSS 적용이다. 다만 문장의 의미, 번역, alt의 내용처럼 뜻을 바꾸는 수정은 멋대로 지어내지 않는다. 고칠 수 없으면 FAIL로 처리해 사람에게 넘긴다. 품질 관문은 "화내는 선생님"이 아니라 "망가진 상품을 출하하지 않는 개찰구"다.
18. 정리: 좋은 글은 독자를 시험하지 않는다
읽기 편한 글의 본질은 글자를 거대하게 키우는 것도, 여백을 멋지게 쓰는 것도 아니다. 어디를 읽으면 되는지 알 수 있고, 중간에 돌아올 수 있고, 확대할 수 있고, 누를 수 있고, 읽어 줄 수 있고, 언어마다 자연스럽고, 그리고 빠르다. 이것들을 하나의 설계 시스템으로 묶는 것이다.
평범한 성인에게는 자연스럽고, 주의가 쉽게 흩어지는 사람, 시력이 약한 사람, 글 읽기가 어려운 사람, 키보드나 보조 기술을 쓰는 사람에게도 잘 깨지지 않는다. 그게 가장 강하다. "접근 가능한 버전"을 따로 방에 만들기보다, 처음부터 현관을 넓게 해 두면 된다.
