가한글 타이포 린트

한국어가 화면에서 어색하게 끊기는 곳, 주소 하나로 찾아 드립니다

단어 중간 줄바꿈, 헤드라인 강제 줄바꿈, 늦게 뜨는 한글 웹폰트, 휴대폰 폭에서 넘치는 글자를 데스크톱과 390px 휴대폰 화면에서 직접 열어 확인합니다. 문제마다 고치는 CSS 한 줄을 붙여 드립니다.

무료, 가입 없음. 점수는 바로 보여 드리고, 위치와 캡처가 담긴 상세 리포트는 메일로 보내 드립니다.

직접 고치기 어려우면 맡겨 주세요

리포트에 나온 항목을 Define404가 고쳐 드립니다. 홈페이지를 운영하는 가게, 납품 전에 검수가 필요한 제작사 모두 문의하실 수 있습니다.

고쳐 드립니다
검사 항목

사람이 쓴 한국어처럼 보이는지 봅니다

데스크톱 1280px와 휴대폰 390px 두 화면으로 실제 페이지를 열어 확인합니다.

단어 중간 줄바꿈
줄이 바뀌는 자리의 앞뒤 글자가 둘 다 한글이면 단어가 쪼개진 것으로 봅니다. 고침: word-break: keep-all;
헤드라인 강제 줄바꿈
제목 안의 <br>. 화면 폭이 바뀌면 한 글자짜리 줄이 생깁니다. 줄바꿈은 폭으로 맞춥니다.
한글 웹폰트 로딩
font-display가 없거나 block이면 폰트가 올 때까지 글자가 안 보입니다. 300KB가 넘는 폰트 파일은 크기를 적어 드립니다.
한글·영문 서체 짝
영문만 웹폰트로 지정해 한글이 기기 기본 서체로 떨어지는지, 실제로 쓰인 글꼴을 확인합니다.
줄 길이, 자간, 글자 크기
데스크톱에서 한 줄 45자 초과, 본문 자간 -0.03em보다 좁음, 휴대폰 본문 14px 미만.
390px 넘침과 잘림
휴대폰 폭에서 가로로 넘치는 요소, 말줄임표나 줄 수 제한으로 잘린 한글 문장.
명령줄

내 컴퓨터와 배포 전 자동 검사에서도

오픈소스(MIT)입니다. 심각한 문제가 있으면 종료 코드 1을 내므로 배포 전 검사에 바로 넣을 수 있습니다.

주소나 HTML 파일을 넣으면 화면에 결과를 찍고, 캡처가 담긴 report.html을 만듭니다.

git clone https://github.com/johndefine404/hangul-type-lint.git
cd hangul-type-lint && npm install
npx playwright install chromium
node bin/hangul-type-lint.mjs check https://example.com
node bin/hangul-type-lint.mjs check ./dist/index.html --fail-on medium

결과 예시

점수 24점 (고칠 곳 많음) · 심각 2 · 보통 7 · 낮음 2

[심각] 단어 중간 줄바꿈 · 390px
  위치  body > h1
  고침  word-break: keep-all;