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

타이포그래피 검수는 글꼴 취향보다 정보가 유지되는 조건을 먼저 봅니다

본문이 어설퍼 보일 때 제목 크기를 키우고 카드 사이 여백을 똑같이 늘리는 수정은 원인을 가릴 수 있습니다. 긴 줄 때문에 다음 줄을 찾기 어렵거나, 행간이 고정 높이와 충돌하거나, 강조 문장이 너무 많아 위계가 사라졌거나, 좁은 화면에서 영문 단위가 컨테이너를 밀어내는 문제는 서로 다릅니다. 이 글은 미적 선호를 점수화하지 않고 문장 전체가 보이는지, 제목과 본문의 역할이 구분되는지, 간격을 바꾸어도 손실이 없는지, 화면 폭이 줄어도 한 방향으로 읽을 수 있는지를 기록합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing · W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow

W3C의 Text Spacing 해설은 사용자가 텍스트 간격을 늘렸을 때 글자가 잘리거나 겹치지 않아야 한다는 목적을 설명하고, Reflow 해설은 좁은 viewport와 확대 환경에서 정보와 기능이 유지되는지를 다룹니다. 두 기준은 특정 글꼴 크기나 한 줄 글자 수를 디자인 공식으로 정하지 않습니다. 따라서 이 글도 16픽셀, 1.6행간, 65자 같은 값을 보편 정답으로 선언하지 않고 실제 콘텐츠와 레이아웃을 바꿔 관찰하는 시험 조건을 제시합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing · W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow

평균 문장 대신 한글·영문·숫자·링크가 섞인 검수 말뭉치를 준비합니다

자체 예제 문서는 ‘전시 관람 안내’로 정합니다. 제목, 두 문장짜리 소개, 날짜와 시간, 영문 작품명, 12,000원 같은 숫자와 쉼표, ‘A-3 전시장’, 괄호가 있는 주의 문장, 긴 외부 주소 모양의 텍스트, 본문 링크를 포함합니다. 실제 전시나 가격을 나타내지 않는 가상 데이터이며, 다양한 문자 조합이 줄바꿈과 간격 변경에서 어떤 모양을 만드는지 확인하기 위한 것입니다. 문장 수와 구성을 고정해 수정 전후에 같은 텍스트를 사용합니다.

실제 페이지를 검수할 때는 예제 말뭉치만으로 끝내지 않고 가장 긴 제목, 숫자가 많은 표, 영문 제품명이 섞인 설명, 정책 문단, 오류 메시지를 추출해 추가합니다. 짧은 샘플만 쓰면 제작자가 선택한 이상적인 문장에서는 통과하지만 실제 콘텐츠에서 실패할 수 있습니다. 텍스트를 임의로 줄여 통과시키기 전에 삭제된 조건이나 날짜가 없는지 콘텐츠 담당자와 대조해야 합니다.

줄 길이는 글자 수 규칙을 복사하지 않고 실제 컨테이너와 문장으로 측정합니다

본문 줄이 너무 길어 보이면 먼저 콘텐츠 영역의 CSS 폭, 좌우 패딩, 글꼴의 실제 렌더링 폭을 기록합니다. `max-width`를 `ch` 단위로 지정할 수 있지만 한글 한 글자와 영문 숫자가 항상 같은 폭을 갖는 것은 아니므로 `ch` 값만으로 결과를 단정하지 않습니다. 1440픽셀에서 본문 열을 여러 값으로 바꾸고 같은 말뭉치의 줄 수, 마지막 줄 길이, 링크 분리, 주변 이미지와의 간격을 캡처합니다. 좁은 폭에서도 같은 문단이 지나치게 짧은 단위로 조각나지 않는지 함께 봅니다.

1. 본문 말뭉치와 글꼴 파일, 글자 크기, 굵기를 고정합니다.
2. 콘텐츠 최대 폭만 세 단계로 바꾸어 줄 수와 가로 넘침을 기록합니다.
3. 각 폭에서 링크, 숫자·단위, 영문 이름이 의미를 해치는 위치에서 분리되는지 봅니다.
4. 390픽셀과 320픽셀에서 좌우 패딩이 본문 폭을 과도하게 줄이지 않는지 확인합니다.
5. 브라우저 확대와 사용자 글꼴 변경 뒤에도 같은 텍스트가 남는지 다시 검사합니다.
6. 선호하는 폭을 정답으로 선언하지 않고 선택 이유와 실패 조건을 함께 기록합니다.

마지막 줄에 조사 한 글자만 남는 현상은 시각적으로 어색할 수 있지만, 모든 경우를 자동으로 없애려다 강제 공백이나 줄바꿈을 대량 삽입하면 반응형 환경에서 더 큰 문제가 생깁니다. 제목처럼 중요한 짧은 문장은 문구 자체를 다듬을 수 있고, 긴 본문은 브라우저의 자연스러운 줄바꿈을 우선합니다. 고아문자 검수는 콘텐츠 우선순위와 유지보수 비용을 함께 보고 제한적으로 적용합니다.

행간과 섹션 여백은 같은 숫자가 아니라 관계가 반복되도록 설계합니다

행간은 글자 크기와 독립된 장식 값이 아닙니다. 본문, 작은 보조 문장, 큰 제목은 글자 형태와 줄 수가 달라 같은 고정 픽셀 행간을 공유하면 겹치거나 지나치게 벌어질 수 있습니다. 상대 단위로 시작하고 실제 한글 말뭉치에서 위아래 글자가 닿지 않는지, 여러 줄 제목의 덩어리가 분리되지 않는지 확인합니다. 문단 사이 간격은 줄 간격보다 분명해야 하지만 모든 카드와 섹션에 같은 마진을 기계적으로 주지 않습니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

간격 토큰을 만들 때는 숫자 이름보다 역할 이름을 함께 기록합니다. 예를 들어 `space-line`, `space-paragraph`, `space-section`처럼 쓰임을 구분하면 모든 요소가 같은 마진 값을 공유하는 일을 줄일 수 있습니다. 다만 토큰 이름이 있다고 품질이 보장되지는 않습니다. 새 글꼴, 긴 제목, 다국어 문장, 텍스트 간격 재정의가 들어왔을 때 토큰이 정보 손실을 만들지 않는지 계속 검사해야 합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

사용자가 간격을 늘렸을 때 고정 높이와 숨김이 드러나는지 확인합니다

Text Spacing 기준의 검사 조건은 줄 높이 1.5배, 문단 뒤 간격 2배, 글자 간격 0.12배, 단어 간격 0.16배로 간격을 재정의했을 때 콘텐츠나 기능이 없어지지 않는지를 봅니다. 이 값은 예쁜 기본 타이포그래피를 만드는 추천 세트가 아닙니다. 테스트 스타일시트로 적용한 뒤 제목, 카드, 버튼, 배지, 표 셀에서 잘림·겹침·말줄임·가려진 초점이 생기는지 찾아야 합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

간격 변경 뒤 페이지가 길어진 것은 실패가 아닙니다. 세로 스크롤이 늘어도 모든 정보와 기능을 사용할 수 있다면 그 사실을 기록합니다. 반대로 카드 높이를 유지하려고 글자를 줄이거나 마지막 문장을 숨기면 사용자의 설정을 무효화한 셈이 됩니다. 수정 후에는 기본 상태만 보지 말고 동일한 재정의 스타일을 다시 적용해 문제가 사라졌는지 확인합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

굵은 글자와 큰 제목의 수를 줄이기 전에 문서 구조와 역할을 먼저 확인합니다

모든 문장이 굵으면 강조가 아니라 기본 상태가 됩니다. 먼저 H1은 페이지 전체 주제, H2는 주요 구간, H3는 그 안의 하위 질문을 설명하도록 구조를 정합니다. W3C의 Headings and Labels 해설은 제목이 해당 내용의 주제나 목적을 설명해야 한다고 안내합니다. 글자 크기를 크게 만들었다고 제목이 되는 것은 아니며, 실제 제목 요소가 있다고 해서 ‘내용 보기’처럼 모호한 문구가 충분한 것도 아닙니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

• H1이 페이지 주제를 설명하고 로고나 장식 문구와 중복되지 않는가
• H2만 모아 읽어도 문서의 주요 질문과 순서를 이해할 수 있는가
• 굵은 본문이 제목처럼 보이지만 구조에는 누락된 구간이 없는가
• 배지와 강조색이 모든 문단에 반복되어 위계를 지우지 않는가
• 제목 바로 뒤 본문이 그 제목의 질문에 실제로 답하는가
• 모바일에서 글자 크기 변화가 제목 레벨의 의미를 뒤집지 않는가

강조 밀도는 페이지 전체에서 굵은 요소 수를 세는 것만으로 판정하지 않습니다. 주의 문구, 정의, 실제 행동 링크처럼 역할이 다른 강조가 있기 때문입니다. 각 강조에 목적을 붙이고 같은 목적의 강조가 연속되면 통합합니다. 색상만으로 주의와 일반 문장을 구분하지 않고 텍스트 레이블이나 아이콘 설명을 함께 제공합니다. 이 과정은 독자의 기억 향상을 단정하지 않고 구조와 스타일의 일치 여부만 확인합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

최종 기록은 선택한 값보다 실패하지 않은 조건과 남은 예외를 보여 줍니다

타이포그래피 변경 기록에는 글꼴 이름과 크기만 적지 않습니다. 사용한 말뭉치 버전, viewport, 본문 최대 폭, 행간, 문단 간격, 사용자 간격 재정의 여부, 확대율, 가로 넘침, 잘린 텍스트, 제목 구조를 함께 남깁니다. ‘가독성 개선’ 대신 ‘320픽셀과 간격 재정의 조건에서 textContent 전문이 화면에 표시되고 가로 넘침이 없음’처럼 관찰 가능한 결과를 씁니다. 모든 조건을 실행하지 않았다면 해당 행을 미검증으로 둡니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing · W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow · W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

1. 실제 페이지에서 긴 제목, 혼합 문자열, 정책 문단, 링크를 포함한 검수 말뭉치를 고정합니다.
2. 본문 폭과 행간을 한 번에 하나씩 바꾸며 줄 수·넘침·정보 손실을 기록합니다.
3. 320·390·1440픽셀과 200퍼센트 확대에서 같은 문장을 비교합니다.
4. W3C 텍스트 간격 재정의 조건을 적용하고 고정 높이·숨김·겹침을 다시 확인합니다.
5. H1·H2·H3의 문구와 실제 콘텐츠 관계, 강조 요소의 역할을 대조합니다.
6. 독자의 속도나 선호를 측정하지 않았다는 한계와 재검이 필요한 콘텐츠 변화를 기록합니다.

한글 본문의 줄 길이와 간격을 확인한 순서

1. 간격을 바꾸되 같은 전시 안내문을 사용합니다. 날짜·12,000원·A-3·마지막 문장이 두 상태에 남는지 읽습니다.
2. 상자가 내용에 맞게 늘어나는지 봅니다. 끝 문장을 숨기거나 글자를 줄여 높이를 맞추지 않습니다.
3. 실제 문서의 긴 제목과 혼합 문자열도 추가합니다. 정보 보존을 읽기 속도·선호 개선이라는 결론으로 바꾸지 않습니다.

한글 본문의 줄 길이와 간격 판단에서 제외한 범위

• 가상 전시 안내는 문자 조합을 시험하는 자체 예제이며 실제 전시, 가격, 방문자 또는 운영 결과를 나타내지 않습니다.
• 줄바꿈과 정보 손실을 확인해도 독자의 읽기 속도, 이해, 피로, 선호를 직접 측정한 것은 아닙니다.
• 한글 글꼴과 브라우저 렌더링은 환경마다 달라 세 화면 폭과 한 글꼴 결과를 모든 환경에 일반화할 수 없습니다.
• 코드·표·지도처럼 가로 방향이 의미인 콘텐츠는 일반 본문과 다른 예외 설계가 필요합니다.
• 글꼴, 언어, 콘텐츠 길이, 배지나 버튼이 바뀌면 같은 검수 절차를 다시 실행해야 합니다.

한글 본문의 줄 길이와 간격에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. Understanding Success Criterion 1.4.12: Text SpacingW3C Web Accessibility Initiative · 확인 2026-08-20

   줄·문단·글자·단어 간격을 사용자가 바꿀 때 콘텐츠나 기능이 손실되지 않아야 한다는 공식 검사 조건을 참고했습니다.

2. Understanding Success Criterion 1.4.10: ReflowW3C Web Accessibility Initiative · 확인 2026-08-20

   좁은 viewport와 확대 환경에서 정보와 기능을 잃지 않고 이용할 수 있는지 확인하는 기준을 사용했습니다.

3. Understanding Success Criterion 2.4.6: Headings and LabelsW3C Web Accessibility Initiative · 확인 2026-08-20

   제목이 구간의 주제나 목적을 설명해야 한다는 기준을 제목 구조와 강조 밀도 검수에 적용했습니다.