Back_to_Basics

{3줄 요약}

가독성(Readability)은 텍스트가 얼마나 편하게 읽히는지를 말합니다.
서체가 같아도 크기·줄 길이·대비가 달라지면 가독성은 크게 달라집니다.
기준은 "읽을 수 있냐"가 아니라 "불편하지 않게 읽히냐"에 가깝습니다.

사용자가 화면에서 글을 읽어야 할 때

텍스트를 화면에 올려야 하는 모든 순간에 가독성 원리를 적용해요.
앱 본문, 웹사이트 기사, 제품 설명 페이지, 온보딩 화면 - 사용자가 읽어야 하는 텍스트가 있다면 다음 기준을 써요.

텍스트 크기: 작으면 읽는 게 아니라 해독하게 돼요

화면 본문의 최소 기준은 16px이에요.
iOS와 Android 모두 이 크기를 기본 본문 크기로 권장해요.

16px보다 작으면 읽는 속도가 느려지고 눈의 피로가 빠르게 올라요.
특히 모바일 환경에서, 밝은 야외에서, 작은 화면을 쓰는 사용자에게는 더 큰 문제가 돼요.

실수 예시: 설명 텍스트나 부가 정보를 "덜 중요하니까"라는 이유로 12px로 줄이는 경우가 많아요.
하지만 사용자가 그 정보를 읽으려 할 때 불편함이 생기면, "안 읽겠다"는 선택으로 이어져요.

제목과 본문의 크기 차이도 중요해요.
본문은 16px을 기준으로 삼고, 섹션 제목·페이지 제목까지 크기 차이를 단계적으로 두면 스캔만으로도 정보 구조가 한눈에 들어와요.

줄 길이: 너무 길어도, 너무 짧아도 불편해요

한 줄에 들어가는 글자 수를 라인 길이(Line Length)라고 해요.
인쇄물과 화면 모두에서 연구된 최적 범위는 한 줄 45~75자예요.

줄이 너무 길면 (90자 이상): 줄 끝에서 다음 줄 시작을 찾는 눈의 이동이 힘들어요.
틀린 줄로 이동하기도 해요.

줄이 너무 짧으면 (25자 이하): 줄바꿈이 너무 잦아 리듬이 끊겨요.
단어가 어색하게 쪼개지기도 해요.

카카오 브런치(brunch. co.
kr)의 본문 영역 폭을 보면, 화면 전체 너비를 쓰지 않고 중앙의 일정 폭으로 제한해요.
이건 줄 길이를 최적 범위로 유지하기 위한 의도적인 설계예요.
동일한 이유로 Medium, Notion도 본문 컨테이너 폭을 700px 안팎으로 제한해요.

회색 텍스트는 세련돼 보이지만 읽기 힘들어요

텍스트와 배경의 명도 차이가 충분하지 않으면 읽기 어려워요.
WCAG(Web Content Accessibility Guidelines, 웹 접근성 국제 표준)는 일반 본문 텍스트의 최소 대비 비율을 4.5:1로 정의해요.

흰 배경(#FFFFFF)에 회색 텍스트(#767676)는 딱 4.5:1이에요.
더 밝은 회색(#999999 등)을 쓰면 기준 미달이에요.

많은 디자인에서 "세련돼 보인다"는 이유로 회색 텍스트를 쓰다가 가독성 문제를 만들어요.
특히 작은 글자, 밝은 야외 환경, 노안이 있는 사용자에게 문제가 더 크게 나타나요.

실무 팁: Figma의 플러그인이나 Colour Contrast Checker로 배포 전에 확인하세요.

촘촘하면 답답하고, 너무 넓으면 흩어져요

행간(Line Height)은 줄과 줄 사이의 간격이에요.
글자 크기 대비 비율로 표현하는 게 실무에서 편해요.

본문 텍스트의 권장 행간은 글자 크기의 1.4~1.6배예요.
16px 본문이라면 행간 24~26px이 편안해요.

행간이 1.1~1.2 수준으로 좁으면 글자들이 서로 붙어 답답해 보이고, 긴 글에서 피로감이 빠르게 와요.
행간이 2.0 이상으로 넓으면 문단 안의 줄들이 따로 노는 느낌이고, 문단 구분이 흐려져요.

카카오페이 고객센터 FAQ 페이지처럼 글이 길게 이어지는 페이지를 보면, 행간이 충분히 확보되어 있어요.
이게 없으면 사용자가 "읽기 귀찮다"는 느낌으로 이탈해요.

하지 말아야 할 것들

대문자로만 쓴 긴 본문: 대문자는 단어 형태의 윤곽이 균일해서 인식 속도가 느려요. 제목·레이블에는 쓸 수 있지만, 본문엔 금물이에요.
이탤릭체로 된 긴 단락: 이탤릭은 강조용이에요. 단락 전체를 이탤릭으로 쓰면 오히려 강조가 사라지고 읽기도 어려워요.
저해상도 이미지 위에 올린 텍스트: 배경과 텍스트 경계가 흐려지면서 대비가 급격히 떨어져요. 반투명 오버레이나 텍스트 그림자를 써도 완전한 해결은 어려워요.

실행 체크리스트

이 방법을 마치면 아래를 확인해보세요.

본문 텍스트가 16px 이상인가요?
한 줄 길이가 45~75자 범위 안에 있나요?
텍스트와 배경의 색 대비가 4.5:1 이상인가요?
행간이 글자 크기의 1.4배 이상인가요?
실제 모바일 기기에서 직접 읽어봤나요?

행간과 자간의 세부 기준은 Line Height와 Letter Spacing에서, 타이포그래피 위계와 연결하는 방법은 Typography 계층에서 다뤄요.

참고 문헌

Robert Bringhurst, 《The Elements of Typographic Style》(1992) - 줄 길이, 행간, 서체 크기 기준의 고전적 근거예요.
Jason Santa Maria, 《Web Typography》(2014) - 화면 환경에서 가독성을 확보하는 실무 방법을 다뤄요.
WCAG 2.1, Web Content Accessibility Guidelines - https://www.w3.org/TR/WCAG21/ - 색 대비 기준의 공식 출처예요.

가독성의 원리