모바일 좁은 카드에서 긴 한글 제목의 말줄임 및 정보 손실 문제
화면 폭이 320~390px로 좁은 모바일 화면에서 뉴스·블로그·커머스 카드의 제목에 한 줄 말줄임(white-space: nowrap; text-overflow: ellipsis;)을 무비판적으로 적용할 경우, 핵심 결론이나 수치가 완전히 잘려나가 사용자가 맥락을 파악할 수 없게 됩니다.
1. 문제 정의 및 발생 메커니즘
국내 주요 모바일 웹사이트에서 레이아웃 높이를 강제로 통일하기 위해 카드 제목 영역에 한 줄 말줄임(single-line ellipsis)을 거는 관행이 널리 퍼져 있습니다. 한글은 어절 길이가 상대적으로 길고 서술어나 핵심 수치가 문장 후반부에 배치되는 언어적 특성이 있습니다. 360px 너비 기준 카드의 본문 폭은 패딩을 제외하면 약 240~280px에 불과하며, 18px 크기 폰트로는 공백 포함 약 14~18글자만 노출된 채 뒷부분이 "..."으로 절단됩니다. 이로 인해 사용자는 카드를 클릭하기 전까지 글의 전체 주제나 중요한 조건(예: "할인 마감", "제외 대상 안내")을 인지할 수 없는 심각한 정보 차단이 발생합니다.
“[긴급 안내] 2026년 하반기 소상공인 에너지 효율 개선 지원사업 신청 기간 연장 및 지원 제외 대상 업종 공고”
실험 재현 환경 및 조건
- 대상 뷰포트: 320px ~ 375px 모바일 뷰포트 (카드 내부 실효 가용 폭 240~280px)
- 적용 UI 엘리먼트: 카드 컴포넌트 내부 <h3> 헤드라인 요소
- 문제를 유발하는 기존 CSS 속성: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 28px
아래 상자는 결함 조건이 적용된 실제 렌더링 결과이며, 사이트 본체의 UI와 격리되어 있습니다.
2. 측정 결과와 확인 범위
63자 제목을 높이 28px의 한 줄에 가두어 뒤쪽 핵심 정보가 잘림
동일한 63자 제목 전체 표시. 254px 텍스트 폭에서 높이 104.4px
측정 환경: 2026-10-27, Windows Chrome 155.0.8059.85 헤드리스, 360×800 CSSpx 뷰포트, Malgun Gothic 18px, 제목 폭 254px. 실제 모바일 기기 측정은 아닙니다.
확인 기록: 한 줄 말줄임에서는 제목 끝의 “신청 기간 연장 및 지원 제외 대상” 정보가 보이지 않을 수 있습니다. 개선 예시는 같은 63자 제목을 모두 표시합니다.
3. 웹 접근성 기반 엔지니어링 해결책
제목의 핵심 조건이 끝에 있으므로 줄 수 제한을 없애고 전체 문장을 표시합니다. 단어 단위 줄바꿈과 긴 문자열 보호를 함께 적용합니다.
적용 가능한 CSS 예시
/* 중요한 정보를 끝까지 보존하는 제목 CSS */
.card-title-fixed {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
line-height: 1.45;
}⚖️ 기술적 트레이드오프 및 한계점 고지
전체 제목을 표시하면 카드 높이가 달라질 수 있습니다. 카드의 하단 동작 위치는 CSS Grid 또는 flex 레이아웃으로 정렬할 수 있습니다. 제목을 다시 줄 수로 제한해야 한다면 전체 제목을 여는 별도의 동작을 제공해야 합니다.
본 사례 관련 실무 FAQ
Q. 단일 줄 말줄임 대신 무조건 글자 크기를 줄이면 안 되나요?
A. 글자 크기만 줄여도 긴 제목의 정보 손실은 남을 수 있습니다. WCAG에 일반 텍스트의 고정 최소 글자 크기 규정이 있는 것은 아니며, 사용자의 확대와 내용 보존을 지원하는 것이 중요합니다.
Q. keep-all을 쓰면 긴 단어 때문에 우측 공백이 생기지 않나요?
A. 공백 없는 긴 복합명사나 영단어가 포함될 때 여백이 발생할 수 있으므로, 반드시 overflow-wrap: break-word를 함께 선언하여 컨테이너 폭을 초과할 때만 예외적으로 음절 단위 줄바꿈이 일어나도록 방어해야 합니다.
Q. 3줄 말줄임으로 바꾸면 해결되나요?
A. 이 예문의 중요한 제외 대상 정보는 3줄 뒤에 놓일 수 있습니다. 줄 수 제한만 늘리는 대신 전체 제목을 표시하거나 명확한 전체보기 기능을 제공해야 합니다.