한글 웹문서의 줄 길이·행간·문단 간격을 함께 검수하는 법

같은 안내문을 다른 폭에서 읽습니다

본문 폭을 줄였더니 읽기 편해 보이지만 날짜와 금액이 조각날 수 있습니다. 반대로 폭을 넓히면 줄 수는 줄어도 제목과 다음 문단의 관계가 흐려질 수 있습니다. 글꼴이나 취향을 바꾸기 전에 같은 문장을 두고 본문 폭과 간격을 하나씩 비교하면 원인을 나누기 쉽습니다.

아래 전시 안내는 문자 배치를 비교하기 위해 만든 예제입니다. 한글, 영문, 날짜, 금액과 괄호를 같은 내용으로 유지하고 영역의 폭만 바꿉니다.

한 줄 글자 수 대신 실제 문장의 끊기는 곳을 봅니다

같은 폭에서도 한글, 영문 제품명, 숫자와 기호의 비율에 따라 줄 모양이 달라집니다. ch 단위는 글꼴의 0 글자 폭을 기준으로 하므로 한글 글자 수와 일치하는 칸으로 생각하면 안 됩니다. 본문 최대 폭의 출발점으로 사용할 수는 있지만 실제 문장을 넣어 확인해야 합니다.

마지막 줄에 조사 한 글자가 남았다고 본문 전체에 수동 줄바꿈을 넣지는 않습니다. 제목처럼 짧고 중요한 문장은 표현을 다듬을 수 있지만, 긴 본문에는 다른 화면 폭과 확대 설정이 들어옵니다. 특정 캡처 한 장에 맞춘 줄바꿈은 그 조건이 바뀌면 더 큰 빈칸을 만들 수 있습니다.

줄 사이·문단 사이·절 사이에 다른 역할을 줍니다

행간을 넓히는 것과 새 생각이 시작되는 문단 간격을 늘리는 것은 다릅니다. 제목 아래의 첫 문단이 어디에 속하는지도 간격으로 드러납니다. 제목이 앞 문단에 더 가까우면 새 절의 시작이 모호해질 수 있습니다.

모든 카드와 제목에 같은 여백 값을 주면 숫자는 정돈돼도 관계가 같아지는 것은 아닙니다. 역할이 같은 곳에 같은 간격을 쓰고, 관계가 다른 곳은 구분합니다. 디자인 토큰을 만든다면 line·paragraph·section처럼 쓰임도 함께 적어 두면 변경 범위를 찾기 쉽습니다.

굵은 문장과 제목을 구분합니다

큰 글자를 썼다고 문서의 제목이 되지는 않습니다. H1은 글 전체 주제를, H2는 주요 질문을 설명하게 두고, 굵은 본문은 그 문단 안에서 필요한 강조를 맡깁니다. 모든 문장이 굵으면 독자가 무엇부터 훑을지 고르기 어렵습니다. 소제목만 이어 읽었을 때 글의 순서를 알 수 있는지도 봅니다.

주의 문장, 정의, 다음 행동은 각각 강조할 이유가 다릅니다. “중요” 배지를 늘리기보다 어떤 문장이 어떤 역할인지 적어 보세요. 제목을 줄여 본문의 질문과 맞추는 편집이 글자 크기 조정보다 먼저 필요할 수 있습니다.

문구와 글꼴이 바뀌면 같은 조건으로 다시 비교합니다

짧은 예문에서 정한 폭을 긴 제품명과 오류 메시지에도 적용해 봅니다. 날짜, 단위, 괄호와 링크가 있는 실제 문장 묶음을 사용하면 이상적인 샘플만 통과시키는 일을 줄일 수 있습니다. 글꼴이 바뀌면 같은 CSS라도 문자 폭과 줄 수가 달라질 수 있으므로 글꼴 준비 전후 화면도 확인합니다.

사용자가 텍스트 간격을 늘렸을 때 글자가 사라지는지는 별도 검사입니다. 그 조건과 고정 높이의 관계는 모바일 정보 손실 검사에 맡기고, 이 글에서는 폭·행간·문단 간격이 내용의 관계를 어떻게 드러내는지에 집중합니다. 위 비교만으로 독자의 읽기 속도나 선호를 측정한 것은 아닙니다.

참고 자료

• Understanding Success Criterion 1.4.12: Text Spacing
• Understanding Success Criterion 1.4.10: Reflow
• Understanding Success Criterion 2.4.6: Headings and Labels