모바일 320px 리플로우 및 텍스트 간격 적응 실험
320 CSSpx의 협소한 뷰포트와 WCAG 1.4.12 사용자 텍스트 간격 확장 환경에서 한글 UI 요소가 수평 넘침(Horizontal Overflow) 없이 반응형으로 자연스럽게 재배치되는지 검증합니다.
모바일 뷰포트 리플로우 및 텍스트 간격 조정 실험
WCAG 1.4.10 (320 CSSpx Reflow) 및 1.4.12 (Text Spacing) 조건에서 한글 레이아웃의 줄바꿈 왜곡과 가로 스크롤 결함을 시뮬레이션합니다.
2026년 공공 웹 접근성 실태조사 및 디지털 포용 법률 시행에 따른 한글 UI 개선 지침
한글 텍스트에 긴 공식 참조 링크(https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)가 포함될 때, overflow-wrap 속성이 미지정되면 카드를 뚫고 나가는 심각한 레이아웃 결함이 발생합니다.
/* 현재 선택한 설정: 측정 중 */
.mobile-reflow-example {
width: 100%;
max-width: 100%;
word-break: keep-all;
overflow-wrap: anywhere;
box-sizing: border-box;
}모바일 리플로우(Reflow)와 한국어 웹 레이아웃 결함 분석
과거의 웹사이트는 화면 크기가 작아지면 글자 크기가 함께 축소되거나, 화면 밖으로 넘친 콘텐츠를 읽기 위해 사용자가 수평 스크롤(Horizontal Panning)을 반복해야 했습니다. 이는 뇌병변, 지체 장애로 인해 섬세한 양손 터치가 어려운 사용자나 시야 범위가 좁은 터널 시야(Tunnel Vision) 저시력자에게 웹 서핑을 포기하게 만드는 심각한 장벽이었습니다.
1. WCAG 2.2 1.4.10(Reflow) 기준의 실무적 요구
리플로우 지침은 수직 스크롤을 기본으로 하는 웹페이지에서 가로 320 CSSpx 폭으로 표시될 때, 콘텐츠나 기능의 손실이 없고 두 방향(수평 및 수직) 동시 스크롤을 요구하지 않아야 함을 명시합니다. 이를 구현하기 위해서는 고정 픽셀 너비(예: width: 360px;) 지정을 피하고, 유연한 백분율(width: 100%;) 및 상한선(max-width)을 사용하는 레이아웃 설계가 근간이 되어야 합니다.
2. WCAG 1.4.12 텍스트 간격(Text Spacing) 강제 변경 테스트
난독증(Dyslexia)이나 주의력 결핍 장애를 가진 사용자는 글을 수월하게 읽기 위해 브라우저 확장 프로그램을 통해 웹페이지의 줄 간격과 자간을 강제로 넓혀서 읽습니다. WCAG 1.4.12는 사용자가 다음 네 가지 속성을 강제로 적용하더라도 텍스트 박스가 깨지거나 글자가 잘리지 않아야 한다고 규정합니다:
- 행간(line-height): 최소 글자 크기의 1.5배
- 단락 하단 간격: 최소 글자 크기의 2배
- 글자 간격(letter-spacing): 최소 글자 크기의 0.12배
- 단어 간격(word-spacing): 최소 글자 크기의 0.16배
이 조건을 만족하려면 긴 텍스트를 담는 컴포넌트에 고정 height를 적용할 때 내용이 잘리지 않는지 확인해야 합니다. min-height와 내부 padding을 사용하면 높이를 유연하게 조절할 수 있습니다.
🔗 본 실험과 연계된 실무 사례 연구:
- 사례 1: 긴 한글 제목 말줄임 — 320px 모바일 화면에서 발생하는 헤드라인 정보 차단 해결
- 사례 4: 혼합 텍스트 줄바꿈 — 좁은 화면에서 영문 URL이 카드를 뚫고 나가는 현상 방어
모바일 리플로우 자주 묻는 질문 (FAQ)
Q. 왜 하필 320 CSSpx가 모바일 리플로우의 기준 너비인가요?
A. W3C WCAG 1.4.10(Reflow) 지침은 1280px 데스크톱 모니터에서 브라우저를 400%로 확대했을 때의 뷰포트 폭(1280 / 4 = 320 CSSpx)을 기준으로 삼습니다. 또한 iPhone 5/SE 초기 모델의 물리적 가로 폭이 320 CSSpx에 해당하므로, 이 너비에서 가로 스크롤 없이 수직 흐름만으로 콘텐츠를 온전히 읽을 수 있어야 접근성 적합 판정을 받습니다.
Q. 데이터 표(Table)나 지도(Map)도 320px에서 가로 스크롤을 금지해야 하나요?
A. 아닙니다. 2차원 데이터 관계를 표현해야 하는 복잡한 표(Data Table), 지도, 다이어그램, 툴바 등은 1.4.10 기준에서 공식적인 예외(Essential Exception)로 인정됩니다. 그러나 일반 텍스트 문단, 공지문, 기사, 카드 헤드라인은 어떠한 경우에도 가로 스크롤 없이 리플로우되어야 합니다.
Q. word-break: keep-all이 모바일 리플로우를 깨뜨리는 주된 이유는 무엇인가요?
A. keep-all은 단어를 띄어쓰기 기준으로만 자르기 때문에, 320px 너비에서 "한국지역정보개발원지원사업단"처럼 12자 이상의 긴 복합명사나 긴 URL이 나타나면 단어 하나의 길이가 300px를 초과하여 카드 경계선을 뚫고 나가 가로 스크롤바를 강제로 생성하기 때문입니다.