인포그랩design-skills

korean-typography 가이드

한글 줄바꿈, 행간, 숫자와 단위 분리를 렌더로 잴 때

한 줄 결과물: 한글 블록별 줄바꿈 위험(끝 줄 고아, 어절 중간 끊김, 숫자·단위 분리, 금칙)을 잰 보고서와 문구를 바꾸지 않는 해결안.

스킬 본문: ../../korean-typography/SKILL.md · 참고: css-audit, notation, measure-kr-usage

언제 쓰나

  • 한글 본문, 제목, 버튼, 표, 슬라이드의 글꼴, 크기, 행간, 줄 길이를 정하거나 검수할 때
  • 한 줄에 조사나 한 글자만 남거나, 숫자와 단위가 갈라지거나, 어절 중간에서 끊기는 문제를 잡을 때
  • 쓰지 않을 때: 문구의 어조(ux-writing-ko), 대비와 키보드(a11y-audit), 글꼴 라이선스 판단

샘플

한글 줄바꿈 전후 비교: word-break keep-all 적용

입력값
문구"이번 분기 신규 고객은 35명이며 목표를 달성했습니다" (한 글자도 바꾸지 않음)
전word-break 기본값. "35"와 "명"이 갈라지고 어절 중간에서 끊기고 끝 줄에 한 글자가 남는다
후word-break: keep-all. 어절 단위로만 끊긴다
핵심 숫자위험 블록 3개, 본문 16px, 행간 1.7 (모두 측정 표시)

위 전후 그림은 어떤 모양의 문제가 어떻게 해결되는지 보여 주는 예시다. 실제 끊김 위치는 글꼴과 폭에 따라 달라서 measure_kr.js 실측으로 확정한다.

따라하기

  1. 조건을 고정한다. 웹은 뷰포트 폭(360, 768, 1440), 덱은 1920x1080 배율 1. 글꼴이 로드된 뒤에 잰다.
    korean-typography 스킬로 <URL 또는 덱> 의 한글 줄바꿈을 점검해 줘.
뷰포트 360과 1440. 문구는 바꾸지 말고, 문구 변경이 필요한 문제는 따로 분리해 줘.
  2. 텍스트만으로 후보를 먼저 찾는다. 근사 모델이라 후보일 뿐이다.
    python3 korean-typography/scripts/kr_wrap_risk.py 문구.txt --width 14 --mode keep-all
python3 korean-typography/scripts/kr_wrap_risk.py --selftest   # 자체 시험 8/8 통과
  3. 렌더에서 잰다. korean-typography/scripts/measure_kr.js는 page.evaluate에 넘기는 함수 식이다. 블록별 글자 크기, 행간 비율, 줄 수, 끝 줄, 어절 중간 끊김, 숫자·단위 분리, 줄머리·줄끝 금칙, 넘침을 돌려준다.
  4. 유형별로 나눈다. 끝 줄 고아, 어절 중간 끊김, 숫자·단위 분리, 줄머리 금칙, 줄끝 금칙, 조사만 남음, 넘침.
  5. 문구 변경 없이 해결한다. 폭 조정, word-break: keep-all, 제목에 text-wrap: balance, 본문에 text-wrap: pretty, 숫자·단위 붙여 쓰기(맞춤법이 허용하는 경우), 단위에만 white-space: nowrap. 그래도 안 되면 "문구 변경 필요"로 분리한다.
  6. 크기를 바꿨다면 다시 잰다. 제안한 값은 아무도 렌더로 보지 못했으므로 "미검증"으로 적는다.

흔한 실패

  • 글자 수를 셀 때 공백 포함/제외를 정하지 않는다. measure_kr.js의 줄당 글자 수는 공백 제외다.
  • kr_wrap_risk.py 결과를 확정으로 쓴다. 근사 폭이라 후보다.
  • keep-all을 걸고 overflow-wrap을 확인하지 않는다. 긴 어절이 넘칠 수 있다.
  • 긴 본문에 text-wrap: balance를 쓴다. 줄 수 제한이 있다.
  • 글꼴 라이선스와 임베딩을 이 스킬에서 판정한다. 사람이 결정할 항목이다.

다음 스킬