한글·영문·숫자·URL 혼합 텍스트에서 발생하는 단어 뜯김과 비정상 여백

1. 문제 정의 및 발생 메커니즘

한글 텍스트에 word-break: keep-all;을 적용하면 띄어쓰기 단위로 줄바꿈이 일어나 단어가 쪼개지지 않아 한글 읽기 흐름이 매우 정돈됩니다. 하지만 실무 문서나 게시물에는 한글만 존재하는 것이 아닙니다. 영문 기술 용어(예: "Internationalization"), 이메일 주소, 긴 웹사이트 URL 등이 포함될 때, 브라우저는 해당 문자열 전체를 하나의 단어로 인식하여 한 줄 전체에 들어가지 않으면 통째로 다음 줄로 넘겨버립니다. 이로 인해 윗줄 끝부분에 거대한 공백(Ragged margin)이 발생하거나, 컨테이너 너비 자체를 초과하여 가로 스크롤바가 생기는 사태가 벌어집니다.

2. 측정 결과와 확인 범위

측정 환경: Windows Chrome 모바일 뷰포트 에뮬레이션, 360×800 CSSpx, 텍스트 박스 300px에서 CSS 줄바꿈 동작을 확인했습니다. 실제 iOS Safari 기기는 검증하지 않았습니다.

확인 기록: 같은 예문과 300px 폭에서 keep-all은 한글 어절의 분할을 억제하지만 긴 URL에는 비상 줄바꿈 지점을 만들지 않습니다. anywhere를 더하면 긴 문자열 내부에서도 줄을 바꿀 수 있습니다. 실제 줄 위치와 여백 크기는 서체, 글자 크기, 화면 폭에 따라 다시 확인해야 합니다.

3. 웹 접근성 기반 엔지니어링 해결책

word-break: keep-all은 한글 어절을 가능한 한 유지하고, overflow-wrap: anywhere는 긴 URL·영문 단어가 상자 폭을 넘을 때 문자열 내부에 줄바꿈 기회를 만듭니다. 화면에서만 줄이 나뉘며 원문 문자열은 바뀌지 않습니다. 다만 URL이나 기술 용어의 중간에서 시각적으로 끊길 수 있어 복사 가능성과 실제 사용 폭을 함께 확인해야 합니다.

적용 가능한 CSS 예시

/* 한글·영문·URL 혼합 텍스트 안전 줄바꿈 CSS */
.mixed-text-safe {
  word-break: keep-all;
  overflow-wrap: anywhere; /* 긴 URL 및 긴 영단어 오버플로 방지 */
  line-height: 1.6;
}

관련 실험과 공식 기준

• 모바일 리플로우 실험
• W3C 리플로우 기준