웹 디자인에서 자주 생기는 정보 유실과 접근성 문제를 여섯 사례로 비교합니다. 브라우저 레이아웃 관찰, 명도비 계산, 폼의 HTML·ARIA 확인 결과를 각각 구분해 설명합니다.
화면 폭이 320~390px로 좁은 모바일 화면에서 뉴스·블로그·커머스 카드의 제목에 한 줄 말줄임(white-space: nowrap; text-overflow: ellipsis;)을 무비판적으로 적용할 경우, 핵심 결론이나 수치가 완전히 잘려나가 사용자가 맥락을 파악할 수 없게 됩니다.
모바일 화면에서 본문 글자 크기 대비 행간이 지나치게 좁거나(1.2 이하) 반대로 2.0 이상으로 넓어지면, 아랫줄로 시선을 옮길 때 상하 글리프 간 수직 간격이 모호해지거나 줄 간격이 과도하게 벌어져 시각적 줄 구분에 어려움이 발생하기 쉽습니다.
흰색 배경의 #999999 캡션은 계산상 명도비 2.85:1로 WCAG 2.2 AA 일반 텍스트 기준 4.5:1에 미달합니다. #595959는 7.00:1입니다.
word-break: keep-all만 적용한 좁은 본문에서는 긴 URL이나 영문 단어가 줄바꿈되지 않아 큰 여백이나 가로 넘침이 생길 수 있습니다.
높이 40px로 고정한 버튼은 텍스트를 200%로 확대할 때 내용이 잘릴 수 있습니다. 이 사례는 텍스트 확대와 터치 대상 크기를 별도 기준으로 설명합니다.
오류를 #EF4444 테두리 색상만으로 표시하면 원인과 해결 방법이 전달되지 않습니다. 텍스트 오류 설명과 필드 연결이 필요합니다.
레이아웃 측정, 명도비 계산, HTML·ARIA 확인 중 현재 문제에 맞는 방법을 골라 살펴보세요.
| 문제 유형 | 먼저 확인할 것 | 핵심 수정 |
|---|---|---|
| 긴 제목 | 좁은 카드에서 문장 끝의 조건이 보이는가 | 한 줄 말줄임을 풀고 제목 전체 표시 |
| 본문 행간 | 같은 260px 폭에서 줄 수와 높이가 어떻게 달라지는가 | 서체와 폭에 맞춰 행간 조정 |
| 회색 캡션 | 실제 전경·배경색의 명도비가 기준에 맞는가 | 대비율을 계산해 캡션 색상 선택 |
| 혼합 문자열 | 300px 상자에서 긴 URL이 넘치거나 여백을 만드는가 | keep-all과 anywhere를 함께 적용 |
| 확대 버튼 | 28px 글자에서 40px 고정 높이를 넘치는가 | 최소 높이와 줄바꿈 허용 |
| 폼 오류 | 잘못된 입력의 원인이 문구와 필드 속성으로 전달되는가 | 오류 설명과 aria-invalid·aria-describedby 연결 |
여섯 사례의 한국어 예문과 설명은 이 사이트를 위해 작성했습니다. 결과는 사례에 따라 브라우저 레이아웃 관찰, sRGB 명도비 계산 또는 HTML·ARIA 구조 확인에 근거합니다.
각 사례에는 문제 정의, 예문, 재현 조건, 확인 범위, 수정 전후 비교, CSS 예시, 한계 및 FAQ 2~3문항을 제공합니다.