모바일 본문 폭과 행간의 부조화로 인한 줄 구분 모호 및 가독성 저하
모바일 화면에서 본문 글자 크기 대비 행간이 지나치게 좁거나(1.2 이하) 반대로 2.0 이상으로 넓어지면, 아랫줄로 시선을 옮길 때 상하 글리프 간 수직 간격이 모호해지거나 줄 간격이 과도하게 벌어져 시각적 줄 구분에 어려움이 발생하기 쉽습니다.
1. 문제 정의 및 발생 메커니즘
한글은 알파벳과 달리 위아래로 모아쓰는 음절 구조를 가지고 있어 글자 박스(Em box)의 상하 여백이 상대적으로 적습니다. 특히 받침(종성)이 있는 글자와 윗줄 글자 간의 간격이 좁을 때 시각적 밀도가 과도하게 높아집니다. line-height: 1.2 이하를 적용한 본문은 모바일 기기에서 초성과 종성의 물리적 여백이 2~3px 내외에 불과하여 줄 구분이 모호해집니다. 반면 line-height를 2.0 이상으로 설정하고 컨테이너 너비를 280px 미만으로 좁히면 한 줄에 10~15자밖에 들어가지 않는데 줄 간격만 거대해져 문장의 논리적 연결 고리가 시각적으로 분리될 수 있습니다.
“디지털 환경에서 한글의 시각적 안정성을 높이려면 글자 크기와 행간, 그리고 한 줄당 글자 수(Measure)의 비례가 적절해야 합니다. 지나치게 좁은 행간은 상하 글자의 획이 서로 맞닿아 시각적 간섭을 유발하며, 과도하게 넓은 행간은 다음 행을 탐색하는 시선 이동에 불필요한 공백을 줍니다. 모바일 본문에서는 1.6~1.75 내외의 행간이 상하 획 간섭을 줄이는 실무적인 참고 기준이 될 수 있으나, 모든 서체나 독자에게 적용되는 절대적 최적값이 아니므로 컬럼 폭과 서체 특성에 맞추어 조율해야 합니다.”
실험 재현 환경 및 조건
- 대상 뷰포트: 360px 화면을 가정한 최대 폭 260px 본문 예시
- 적용 UI 엘리먼트: <p> 본문 텍스트 단락
- 문제를 유발하는 기존 CSS 속성: font-size: 15px; line-height: 1.15; letter-spacing: 0.08em; max-width: 260px
아래 상자는 결함 조건이 적용된 실제 렌더링 결과이며, 사이트 본체의 UI와 격리되어 있습니다.
2. 측정 결과와 확인 범위
281자 예문, 15px 글자·260px 폭·자간 0.08em·행간 1.15: 15줄, 높이 258.75px
같은 조건에서 행간만 1.68로 변경: 15줄, 높이 377.81px (차이 119.06px). 아래 개선 CSS는 별도의 일반 예시
측정 환경: 2026-10-27, Windows Chrome 155.0.8059.85 헤드리스, 360×800 CSSpx 뷰포트, Malgun Gothic 15px, 텍스트 폭 260px. 행간만 변경하여 비교했습니다.
확인 기록: 281자 예문에서 두 조건 모두 15줄입니다. 행간만 바꾼 높이 차이는 119.06px입니다. 아래 개선 CSS는 16px·최대 폭 640px 등 다른 조건이므로 이 수치와 직접 비교하지 않습니다.
3. 웹 접근성 기반 엔지니어링 해결책
아래 CSS는 실측 대조군과 동일 조건이 아닌 일반적인 개선 예시입니다. 행간 1.68, 자간 -0.02em, 최대 폭 640px을 시작점으로 쓰되 서체와 화면 폭에 맞춰 확인하세요.
적용 가능한 CSS 예시
/* 한글 본문 가독성 개선 참고 CSS */
.body-rhythm-optimized {
font-size: 16px;
line-height: 1.68;
letter-spacing: -0.02em;
max-width: 640px;
word-break: keep-all;
overflow-wrap: break-word;
margin-bottom: 1.25em;
}⚖️ 기술적 트레이드오프 및 한계점 고지
행간을 넓히면 스크롤 길이가 늘어나 한 화면에 보이는 정보 밀도가 감소합니다. 데이터 테이블이나 목록형 컴포넌트에서는 line-height 1.4~1.5 수준으로 절충해야 하며, 모든 컴포넌트에 일괄 1.7을 적용해서는 안 됩니다.
본 사례 관련 실무 FAQ
Q. 자간(letter-spacing)을 음수로 주면 글자가 겹치지 않나요?
A. 디지털 시스템 폰트(Apple SD Gothic Neo, Malgun Gothic 등)는 한글 글자 간 기본 여백이 알파벳보다 넓게 잡혀 있어 -0.01em ~ -0.025em 정도의 미세 조정을 주면 글자 간 시각적 벌어짐을 보정하여 단어 묶음을 정돈하는 데 도움을 줍니다. 단, -0.05em 이하의 과도한 음수 자간은 글자 겹침을 유발하므로 금물입니다.
Q. WCAG 1.4.12 텍스트 간격 조정 기준을 어떻게 만족하나요?
A. 사용자가 브라우저나 스타일시트로 line-height를 1.5배, 단락 하단 간격을 2배, 글자 간격을 0.12배로 강제 변경하더라도 텍스트가 잘리거나 박스 밖으로 튀어나가지 않도록 고정 height 대신 min-height를 사용하는 설계가 필수적입니다.