확대·터치·움직임: 저시력과 다양한 사용 환경 대응하기

확대·리플로우·모션 가이드 · WCAG 2.1 성공기준 1.4.4 · 1.4.10 · 1.4.12 · 2.2.2 · 2.3.1 · 2.5.5 · 2026년 9월

접근성이라고 하면 화면낭독기부터 떠올리지만, 실제 사용자의 큰 비중은 완전히 못 보는 사람이 아니라 "잘 안 보이는" 사람입니다. 노안이 온 중장년, 저시력자, 밝은 야외에서 화면을 보는 사람, 한 손으로 지하철에서 폰을 조작하는 사람. 이들에게 필요한 것은 보조기기가 아니라 글자를 키울 수 있고, 눌러야 할 곳이 충분히 크고, 화면이 제멋대로 움직이지 않는 페이지입니다.

1. 확대를 막지 않는다 — viewport 설정

모바일 페이지 <head>에서 가장 자주 발견되는 접근성 결함이 아래 한 줄입니다.

<!-- 나쁨: 핀치 줌을 막는다 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- 좋음 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

"확대되면 레이아웃이 깨져서" 막아 놓았다면 원인은 확대가 아니라 레이아웃입니다. 확대를 막는 것은 저시력 사용자의 유일한 수단을 빼앗는 일이고 WCAG 1.4.4(텍스트 크기 조절)를 위반합니다. 이 도구는 viewport-no-zoom 규칙으로 user-scalable=no와 낮은 maximum-scale을 찾습니다.

2. 200% 확대와 320px 리플로우

기준	요구 사항	직접 확인하는 법
1.4.4 텍스트 크기 조절 (AA)	보조기기 없이 텍스트를 200%까지 키워도 내용·기능이 손실되지 않을 것	브라우저 확대를 200%로 올려 잘림·겹침 확인
1.4.10 리플로우 (AA)	가로 폭 320 CSS px(세로 스크롤 문서)에서 좌우 스크롤 없이 볼 수 있을 것	데스크톱 브라우저에서 400% 확대(1280px 창 기준 320px 상당)
1.4.12 텍스트 간격 (AA)	줄 높이 1.5배, 문단 간격 2배, 글자 간격 0.12em, 단어 간격 0.16em로 바꿔도 내용이 잘리지 않을 것	텍스트 간격 북마클릿/확장 프로그램으로 강제 적용

400% 확대가 곧 "320px 폭의 모바일 화면"과 같아진다는 점이 요령입니다. 데스크톱에서 Ctrl++를 여러 번 눌러 400%로 만들면 모바일 레이아웃(반응형)이 그대로 나옵니다. 이때 가로 스크롤바가 생기면 리플로우 실패입니다(표·지도·코드 블록처럼 2차원 레이아웃이 본질인 것은 예외).

자주 깨지는 CSS

고정 높이 — height: 48px인 박스에 글자를 넣으면 확대·긴 번역에서 잘립니다. min-height를 쓰세요.
px 고정 글꼴 — 브라우저 기본 글자 크기 설정을 반영하도록 rem 단위를 씁니다. (html { font-size: 100% }을 유지)
고정 폭 — width: 980px 같은 값은 좁은 화면에서 가로 스크롤을 만듭니다. max-width: 100%와 유연한 그리드를 씁니다.
overflow:hidden으로 잘라 감추기 — 넘치는 글자를 없애는 대신 줄바꿈되도록 둡니다.
텍스트가 이미지로 들어간 배너 — 확대하면 뭉개지고 리플로우도 되지 않습니다. 가능하면 실제 텍스트로 만듭니다.

/* 확대·번역·글자 간격 변경에 강한 카드 */
.card {
  min-height: 3rem;          /* height 대신 */
  padding: .75rem 1rem;
  max-width: 100%;
  overflow-wrap: anywhere;    /* 긴 문자열이 넘치지 않게 */
}
html { font-size: 100%; }     /* 사용자의 기본 글자 크기 존중 */
body { line-height: 1.6; }

3. 눌러야 하는 곳은 충분히 크게

작은 링크·아이콘 버튼은 손 떨림이 있는 사용자, 큰 손가락을 가진 사용자, 이동 중 사용자에게 오조작의 원인이 됩니다. WCAG 2.1은 2.5.5(대상 크기)에서 44×44 CSS px 이상을 권장(AAA)하고, WCAG 2.2는 이를 완화해 최소 24×24 CSS px를 AA 기준(2.5.8)으로 추가했습니다. 주요 모바일 플랫폼의 디자인 가이드도 비슷한 크기를 권합니다.

아이콘이 작아도 클릭 가능한 영역(패딩)을 키워 44px 정도를 확보합니다.
인접한 조작 요소 사이에 여백을 두어 잘못 누르지 않게 합니다.
텍스트 링크가 문장 속에 있는 경우는 예외로 인정되지만, 목록·메뉴의 링크는 행 전체를 누를 수 있게 만드는 편이 좋습니다.

.icon-btn {
  min-width: 44px; min-height: 44px;   /* 그림은 20px여도 누르는 영역은 44px */
  display: inline-grid; place-items: center;
}

함께 확인할 것: 두 손가락 핀치·경로를 그리는 스와이프처럼 복잡한 제스처로만 가능한 기능은 단일 탭 대체 수단이 있어야 하고(2.5.1), 기기를 흔들어 실행하는 기능은 버튼 대체와 끄는 설정이 있어야 합니다(2.5.4). 화면 방향을 세로/가로 하나로 고정하는 것도 침대·휠체어에 기기를 고정해 쓰는 사용자에게 장벽이 됩니다(1.3.4).

4. 움직임과 자동 재생

4-1. 멈출 수 없는 움직임

5초 넘게 자동으로 움직이거나 깜빡이는 콘텐츠(캐러셀, 흐르는 공지, 배경 영상, 애니메이션 배너)는 일시정지·정지·숨김 수단이 있어야 합니다(2.2.2). 주의력 장애·인지 장애가 있는 사용자는 움직임 때문에 본문을 읽을 수 없고, 일부 사용자는 어지럼증·메스꺼움을 겪습니다. <marquee>, <blink>는 멈출 방법이 없어 이 도구가 deprecated-motion으로 바로 잡습니다.

4-2. 초당 3회 넘는 번쩍임 금지

1초에 세 번을 넘겨 번쩍이는 콘텐츠는 광과민성 발작을 유발할 수 있어 WCAG 2.3.1(A)에서 금지합니다. 큰 영역의 강한 명암 변화가 특히 위험합니다. 영상 컷 편집이나 GIF 애니메이션도 대상입니다.

4-3. 사용자의 "동작 줄이기" 설정 존중

운영체제에는 "애니메이션 효과 줄이기" 설정이 있고, CSS에서 이를 읽을 수 있습니다.

.hero { animation: slide-in .8s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  html { scroll-behavior: auto; }
  video[autoplay] { display: none; }   /* 또는 정지 이미지로 대체 */
}

패럴랙스, 큰 이동 애니메이션, 스크롤 연동 효과처럼 화면 전체가 움직이는 효과를 우선적으로 끄세요. 페이드 정도의 작은 전환은 남겨도 무방합니다.

4-4. 자동 재생 소리와 자동 이동

3초 넘게 재생되는 소리가 자동으로 시작되면 정지 또는 음량 조절 수단이 있어야 합니다(1.4.2). 화면낭독기 음성과 겹치면 아무것도 들리지 않게 됩니다(autoplay-media).
<meta http-equiv="refresh" content="5;url=…">로 몇 초 뒤 자동 이동·새로고침하면, 읽던 사람이 내용을 놓치고 입력하던 작업이 사라집니다(2.2.1, meta-refresh).
세션 만료 같은 시간 제한이 있다면 미리 알리고 연장 수단을 제공합니다.

5. 호버·포커스로 나타나는 콘텐츠

툴팁, 서브메뉴처럼 마우스를 올리거나 포커스를 주면 나타나는 콘텐츠는 WCAG 2.1의 1.4.13이 세 가지를 요구합니다.

닫을 수 있다 — Esc 등으로 포커스·호버를 옮기지 않고 닫을 수 있어야 함
호버 가능하다 — 나타난 콘텐츠 위로 마우스를 옮겨도 사라지지 않아야 함(확대 사용자가 툴팁 내용을 읽기 위해)
유지된다 — 사용자가 없애기 전에는 사라지지 않아야 함

6. 5분 점검표

모바일 <meta viewport>에 user-scalable=no, maximum-scale=1이 없는가?
브라우저 확대 200%에서 글자가 잘리거나 겹치지 않는가?
브라우저 확대 400%(=320px)에서 좌우 스크롤이 생기지 않는가?
아이콘 버튼·작은 링크의 클릭 영역이 약 44px 이상인가?
자동으로 움직이거나 소리 나는 요소에 정지 수단이 있는가?
OS의 "애니메이션 줄이기"를 켰을 때 큰 움직임이 멈추는가?
툴팁·서브메뉴를 Esc로 닫을 수 있는가?

이 도구가 자동으로 확인하는 것은 확대 차단(viewport), 자동 새로고침(meta refresh), 자동 재생 미디어, marquee/blink 네 가지입니다. 리플로우·텍스트 간격·터치 영역 크기·번쩍임은 실제 화면에서 사람이 확인해야 하는 항목입니다.

색상 대비와 짝을 이루는 시각 접근성 항목은 색상 대비 가이드에서, 자동 검사 결과를 실제 수정으로 옮기는 과정은 실습: 점수 17점 페이지를 100점으로에서 이어서 볼 수 있습니다.