모바일 헤더에서 한글 브랜드명이 글자 단위로 쪼개질 때 — keep-all과 wbr

모바일에서 사이트 헤더의 한글 상호가 "이미지성 / 형외과" 처럼 단어 중간에서 끊겨 보이는 현상은 생각보다 흔합니다. 폰트나 이미지 문제로 오해하기 쉽지만 원인은 CSS의 줄바꿈 규칙에 있고, 고치는 방법도 정해져 있습니다.

왜 글자 단위로 끊기나

헤더는 보통 display: flex에 로고와 버튼을 space-between으로 배치합니다. 이때 로고 영역은 flex 아이템이라 공간이 모자라면 압축되는데, 압축의 하한은 min-content 너비입니다.

영어는 단어 사이 공백이 줄바꿈 기회라 min-content가 "가장 긴 단어"입니다. 반면 한글은 기본 줄바꿈 규칙상 거의 모든 글자 사이에서 끊을 수 있어 min-content가 한 글자가 됩니다. 즉 브라우저 입장에서는 상호를 한 글자 폭까지 줄이는 것이 합법이고, 그래서 세로로 쌓인 형태가 나옵니다.

세 가지 도구의 역할 구분

• white-space: nowrap — 줄바꿈을 아예 금지합니다. 한 줄에 확실히 들어갈 공간이 있을 때만 안전하고, 공간이 부족하면 오버플로가 납니다.
• word-break: keep-all — CJK에서 단어 중간 임의 분리를 막습니다. 다만 "이미지성형외과"처럼 공백 없는 합성어는 끊을 자리가 사라져 사실상 nowrap처럼 동작합니다.
• <wbr> — "여기서는 끊어도 된다"는 지점을 하나 지정합니다. keep-all과 함께 쓰면 "끊긴다면 반드시 여기"가 됩니다.

실무 조합 — 목표에 따라 다릅니다

① 한 줄을 지키고 싶을 때: 로고에 flex-shrink: 0과 white-space: nowrap을 주고, 좁은 폭에서는 미디어쿼리로 글자 크기와 버튼 패딩을 함께 줄입니다. 폭이 아주 좁으면 라틴 서브라벨처럼 부차적 요소를 숨겨 본 상호를 지킵니다.

② 줄바꿈을 허용하되 위치를 고정하고 싶을 때: word-break: keep-all + 원하는 위치에 <wbr> 하나. 결과는 한 줄이거나, 지정한 위치에서만 두 줄입니다.

/* ② 패턴 */
.brand-name { word-break: keep-all; }
<span class="brand-name">이미지<wbr>성형외과</span>

인라인 스타일 헤더에서의 함정

많은 랜딩 페이지가 헤더를 인라인 style 속성으로 작성합니다. 이 경우 외부 스타일시트나 미디어쿼리는 특이도와 무관하게 인라인 선언을 이길 수 없어 !important가 필요합니다. 미디어쿼리를 넣었는데 적용이 안 된다면 대개 이 이유입니다.

검증은 눈이 아니라 수치로

수정 후에는 헤드리스 브라우저로 폭 구간별 수치를 찍어 두는 편이 확실합니다. 확인할 값은 세 가지입니다.

• 브랜드명 요소의 높이 — 한 줄 높이의 배수인지로 줄 수를 판정합니다.
• document.documentElement.scrollWidth — 뷰포트보다 크면 가로 오버플로가 난 것입니다.
• 헤더 전체 높이 — 줄바꿈이 헤더를 밀어 올렸는지 한눈에 드러납니다.

실제 적용 사례에서 360·390·430·480·600px 전 구간과 데스크톱 1280px을 함께 측정했고, 수정 후 헤더 높이가 4줄분에서 한 줄분으로 돌아오면서 가로 오버플로는 전 구간 0이었습니다.

정리

한글 사이트의 헤더 깨짐은 대부분 "한글은 min-content가 한 글자"라는 한 문장으로 설명됩니다. 한 줄을 지킬 것인가, 끊는 위치를 정할 것인가를 먼저 정하면 도구 선택은 자동으로 따라옵니다.