왜 꺾이나
브라우저는 한글을 글자 사이 어디서나 줄바꿈해도 되는 글로 본다. 그래서 따로 손대지 않으면 간단/한 방법, 걸립니/다. 처럼 어절이 둘로 갈린다. 영어 틀에 한국어를 넣은 화면, 그리고 AI 가 만든 화면에서 특히 자주 보인다.
속성보다 자리
처방 속성은 넷이다. word-break · text-wrap · overflow-wrap · white-space. 어려운 건 어디에 주느냐다.
| 자리 | 처방 |
|---|---|
| 제목 | keep-all + text-wrap: balance |
| 본문 | keep-all + text-wrap: pretty |
| 표·배지·버튼 같은 좁은 칸 | keep-all 주지 않는다. 폭·말줄임, 짧은 묶음만 nowrap |
| 코드·주소 | overflow-wrap: anywhere (keep-all 은 그대로) |
keep-all 을 아무 데나 주면 어절이 칸보다 긴 자리에서 칸을 뚫는다. 반대로 넘침을 덮겠다고 break-all 을 주면 어절을 아무 데서나 자른다. AI 가 가장 자주 넣는 한 줄이 바로 그것이다.
재고, 고치고, 다시 잰다
node scripts/wrapcheck.mjs index.html # 390 · 768 · 1280
node scripts/wrapcheck.mjs http://localhost:3000 360,390 --scope main글자 하나하나의 실제 위치로 줄을 되살려 쪼개짐 · 넘침 · 외톨이를 찾는다. 쪼개짐은 특정 폭에서만 생기기 때문에 눈으로 훑으면 놓친다. 쪼개짐이나 넘침이 있으면 끝 코드가 1이라 배포 앞 검사에 걸어 둘 수 있다. 가로 스크롤 상자 안과 말줄임은 일부러 그런 것이라 넘침으로 치지 않는다.
실측
| 쪼개짐 | 넘침 | |
|---|---|---|
예시 페이지, 규칙 없음 + 카드에 break-all | 11 | 2 |
| 같은 페이지, 자리별 처방 | 0 | 0 |
| giting.kr 매거진 1호 | 34 → 0 | 1 → 0 |
| giting.kr 매거진 2호 | 52 → 0 | 0 → 0 |
giting.kr 은 :where() 로 명시도 0인 기본값을 넣었다. 기존 컴포넌트 규칙이 언제나 이기니 다른 화면이 흔들리지 않는다. 홈·리포트·스킬·태그 화면을 다시 재서 새 넘침 0을 확인했다.
글자를 키운 상태 (0.2.0)
폭만 바꿔 재면 기본 글자 크기에서만 본 것이다. 스레드에서 @buidlermason 이 「글자 크기를 키운 상태도 검사하나요?」 하고 200%·150% 기준과 WCAG 1.4.4 를 알려 줘서 넣었다. --text 150,200 은 글자만 키운다(상자 폭은 그대로, 폰의 글자 크기 설정과 같은 상태). --zoom 150,200 은 브라우저 확대라 배치 폭이 폭 ÷ 배율로 준다. 둘 중 하나라도 주면 100% 와 같이 재고, 버튼 글자가 상자 밖으로 잘리는지와 버튼 한가운데를 누르면 그 버튼이 눌리는지를 더 센다. 시험 페이지에서 200% 일 때 버튼 글자 잘림 1, 고정 바에 덮인 버튼 하나를 잡았고, 우리 스킬 페이지에서는 200% 에서 머리 쪽 「내 스크랩」 버튼이 화면 밖으로 밀리는 것을 찾았다.
정직한 한계
- 외톨이(마지막 줄 한두 글자)는 알리기만 한다.
text-wrap: pretty가 줄여 주지만 모든 브라우저가 지원하지는 않는다. 지원하지 않으면 그냥 무시되니 해는 없다. - 줄 판정은 크롬 계열 엔진 기준이다. 사파리와 몇 픽셀 차이로 꺾이는 자리가 다를 수 있다.
- 캔버스·이미지 속 글자는 못 잰다.
- 글자만 키우기는 흉내다. 모든 요소의 글자 크기에 배율을 곱한다. iOS·안드로이드가 실제로 웹 글자를 얼마나 키우는지는 브라우저와 설정마다 달라 실기기 확인을 대신하지 않는다.
쓰는 법
- Claude Code: "한글 줄바꿈 이상한 데 찾아서 고쳐줘" 하면 재기 → 자리별 처방 → 다시 재기 순서로 간다
- 다른 AI:
npx skills add hanmariyang/giting-skills --skill hangul-wrap