한글 가독성 Lab — 타이포그래피 A/B 실험

디지털 화면에서의 한글 타이포그래피 엔지니어링 원리

한글은 1443년 창제된 음소 문자이면서도 표기 시에는 초성(자음), 중성(모음), 종성(받침)을 하나의 사각형 글자 틀(Em Box) 안에서 조합하여 표기하는 독창적인 ‘모아쓰기’ 체계를 지닙니다. 알파벳이 소문자의 x-height를 기준으로 상하 여백(Ascender/Descender)이 자연스럽게 확보되는 구조인 것과 달리, 한글은 글자 틀 안에서 자음과 모음이 결합되는 구조적 특성상 상하좌우 여백이 상대적으로 적어 디지털 디스플레이에서 폰트 크기 대비 시각적 밀도가 높게 체감될 수 있습니다.

1. 행간(line-height)과 줄 간 수직 간격(Leading)의 레이아웃 특성

한 줄을 읽고 다음 줄로 시선이 이동할 때 행간(line-height)이 1.3 이하로 협소하면, 윗줄의 종성(받침)과 아랫줄의 초성 간 물리적 수직 여백이 좁아져 시각적 줄 구분이 모호해지는 현상이 발생합니다. 본 실험실의 브라우저 레이아웃 실측 데이터에 따르면, 16px 폰트 기준 동일 문단에서 line-height를 1.2에서 1.65로 조절할 때 문단 전체의 렌더링 높이와 줄 간 수직 여백이 약 40% 이상 확장되는 물리적 기하 변화가 확인됩니다. (※ 이는 브라우저 DOM 높이 측정 결과이며, 실제 인간 독자의 주관적 피로도나 인지 속도는 개인의 시각 조건 및 환경에 따라 상이하므로 별도의 인체공학적 사용자 연구와 구분되어야 합니다.)

2. 한 줄당 글자 수(Measure)와 본문 폭(max-width)의 한계

W3C 웹 접근성 가이드라인(WCAG 2.2) 1.4.8(Visual Presentation) 기준은 최고 적합성 수준인 AAA 성공 기준(Success Criterion)에 해당하며, 시선 이동의 부담을 줄이기 위해 한 줄당 텍스트 길이를 영문 기준 80자(글리프 밀도가 높은 한글의 경우 약 40자 내외) 이하로 유지할 것을 권장합니다. 데스크톱 고해상도 모니터(1920px 이상)에서 본문 컨테이너에 max-width를 선언하지 않으면, 한 줄이 1,200px 이상 길어져 시선 이동 거리가 과도해질 수 있습니다. 반대로 320px 모바일 화면에서는 한 줄당 15자 내외로 너무 자주 줄바꿈되어 문맥 파악에 방해가 될 수 있습니다. 따라서 실무에서는 max-width: 640px ~ 680px 구간을 설정하여 반응형 화면에서 균형 잡힌 문단 비례를 형성하는 패턴을 널리 활용합니다.

3. 단어 단위 줄바꿈(word-break: keep-all)의 실무 적용과 안전장치

CSS 표준 속성인 word-break: keep-all;은 띄어쓰기 공백을 기준으로만 줄바꿈을 허용하여 한글 단어가 중간에 쪼개지는 현상을 방지합니다. 그러나 이 속성은 긴 영단어, 이메일 주소, 하이퍼링크 URL이 포함될 때 컨테이너 경계선을 무시하고 가로로 넘쳐나는 부작용을 동반합니다. 따라서 실제 상용 서비스에 적용할 때는 반드시 overflow-wrap: break-word; 또는 overflow-wrap: anywhere;를 병행 선언하는 2중 방어 코드가 필수적입니다.