WCAG 2.3.3: 상호작용으로 인한 애니메이션

WCAG 2.3.3은 사용자 상호작용에 의해 트리거되는 동작 애니메이션이, 그 애니메이션이 기능이나 전달되는 정보에 필수적인 것이 아닌 한 비활성화될 수 있어야 한다고 요구합니다. 이는 동작이 전정 장애를 유발하여 인구의 상당수에게 어지러움, 메스꺼움, 방향 감각 상실을 일으킬 수 있기 때문에 중요합니다.

이 규칙의 의미

WCAG 2.3.3 — 상호작용으로 인한 애니메이션은 Operable(운용 가능) 원칙 아래의 AAA 수준 기준이다. 이 기준은 상호작용에 의해 트리거되는 모션 애니메이션은, 그 애니메이션이 기능 수행이나 전달되는 정보에 필수적인 경우를 제외하고, 사용자가 비활성화할 수 있어야 한다고 요구한다. 이 기준은 클릭, 스크롤, 호버, 포커스 등 사용자 행동이나 그 밖의 어떤 형태의 상호작용으로 시작되는 애니메이션에 적용되며, 페이지 로드 시 자동으로 재생되는 애니메이션에는 적용되지 않는다(이들은 2.2.2 일시정지, 정지, 숨기기와 같은 다른 기준의 적용을 받을 수 있다).

여기서 핵심 개념은 모션 애니메이션이다. 여기에는 패럴랙스 스크롤 효과, 페이지 전환 애니메이션, 요소의 슬라이딩 또는 줌, 회전하는 인디케이터, 그리고 사용자의 행동에 직접적으로 수반되어 발생하는 기타 모든 움직임이 포함된다. 단순한 불투명도(Opacity) 페이드나 색상 변경은 공간적 움직임을 수반하지 않아 전정기관 반응을 유발하지 않으므로 여기에 포함되지 않는다. 차이는 공간을 통한 움직임(해를 끼칠 수 있음)과 공간적 이동 없이 외형만 변하는 경우(일반적으로 해를 끼치지 않음) 사이에 있다.

통과하려면 사용자가 이러한 애니메이션을 끄더라도 동일한 콘텐츠나 기능에 대한 접근을 잃지 않도록, 신뢰할 수 있는 비활성화 메커니즘을 제공해야 한다. 가장 널리 인정되는 기법은 운영체제 수준의 prefers-reduced-motion 미디어 쿼리를 존중하는 것이다. 이 쿼리는 사용자의 시스템 차원의 모션 감소 선호를 반영한다. 또는, 설정 패널이나 접근성 위젯 등에 눈에 잘 띄게 배치된 사이트 수준 토글을 제공하는 것도, 세션 간에 설정이 유지되고 찾기 쉬운 경우라면 이 기준을 충족할 수 있다.

필수(essential) 예외는 매우 좁게 정의된다. 애니메이션을 제거하면 정보나 기능이 근본적으로 달라지고, 동등한 비애니메이션 대안이 존재하지 않을 때에만 그 애니메이션은 필수적이라고 할 수 있다. 예를 들어, 콘텐츠가 로드 중임을 알려주는 유일한 시각적 단서가 회전하는 로딩 인디케이터라면 필수에 해당할 수 있다. 반면, 사용자가 스크롤할 때 움직이는 장식적 패럴랙스 배경 이미지는, 디자인에서 미적으로 중심적인 요소라 하더라도 필수에 해당하지 않는다.

이 기준은 애니메이션을 완전히 제거할 것을 요구하는 것이 아니라, 애니메이션을 비활성화할 수 있는 메커니즘이 존재할 것을 요구한다. 이 메커니즘이 활성화되었을 때에도 콘텐츠는 여전히 완전히 접근 가능해야 하며, 비애니메이션 대안이 동일한 정보를 전달하거나 동일한 기능을 수행해야 한다.

왜 중요한가

전정기관 장애 — 균형과 안구 운동을 제어하는 내이와 뇌에 영향을 미치는 상태 — 는 전 세계 인구의 상당 부분에 영향을 미친다. Vestibular Disorders Association에 따르면, 미국에서 40세 이상 성인의 약 35%가 어떤 형태로든 전정 기능 장애를 경험한 바 있다. 전 세계적으로 양성 발작성 체위성 현훈(BPPV), 메니에르병, 전정 편두통과 같은 상태는 수천만 명에게 영향을 미친다. 이러한 사람들에게 화면상의 움직임은 어지러움, 현기증, 메스꺼움, 두통, 심한 경우 일시적 무능력 상태와 같은 즉각적인 신체 증상을 유발할 수 있다.

전정 편두통을 가진 사용자가 여행 예약 웹사이트를 방문하는 상황을 생각해 보자. 이 사이트는 전체 페이지 패럴랙스 스크롤 효과를 사용하며, 사용자가 스크롤할 때 히어로 이미지가 페이지 콘텐츠와 다른 속도로 움직인다. 사용자가 스크롤을 시작한 지 몇 초 만에 심한 어지러움과 메스꺼움을 느끼게 된다. 이 사용자는 예약을 완료할 수 없고, 인지적 장벽이나 운동 장애 때문이 아니라 화면상의 움직임에 대한 신체적 반응 때문에 사이트를 완전히 떠나야 한다. 이것이 WCAG 2.3.3이 방지하고자 하는 실제 세계의 피해이다.

전정기관 장애를 넘어, 모션 애니메이션은 지속적이거나 트리거되는 움직임을 산만하고 무시하기 어렵게 느끼는 주의력 결핍 장애 사용자와, 예기치 않은 움직임이 스트레스를 유발할 수 있는 불안 장애 사용자에게도 부정적인 영향을 줄 수 있다. 뇌진탕이나 외상성 뇌 손상에서 회복 중인 사람들 역시 시각적 움직임에 매우 민감하다. 진단된 상태가 없는 사용자라도, 장시간 세션 동안 과도한 애니메이션을 피로하게 느낄 수 있다.

사용성 및 비즈니스 관점에서, 모션 감소 선호를 존중하는 것은 민감한 사용자들의 작업 완료율과 세션 지속 시간 향상과 상관관계를 보인다. 시스템 수준 선호를 존중하는 것은 제품이 잘 설계되어 있고 사용자 요구에 주의를 기울이고 있음을 보여 주며, 이는 신뢰를 구축한다. 장바구니 이탈이 나쁜 경험으로 인해 직접적으로 매출에 영향을 미치는 전자상거래에서는, 불필요한 애니메이션 장벽을 제거하는 것이 구체적인 상업적 이익을 가져온다.

테스트 방법

OS 수준에서 모션 감소 설정 활성화: macOS에서는 시스템 설정 > 손쉬운 사용 > 디스플레이로 이동해 "동작 줄이기(Reduce Motion)"를 활성화한다. Windows 11에서는 설정 > 손쉬운 사용 > 시각 효과로 이동해 "애니메이션 효과(Animation effects)"를 끈다. iOS에서는 설정 > 손쉬운 사용 > 동작으로 이동해 "동작 줄이기(Reduce Motion)"를 활성화한다. Android에서는 설정 > 손쉬운 사용 > 애니메이션 제거(Remove Animations)로 이동한다. 이렇게 하면 prefers-reduced-motion: reduce 미디어 쿼리가 활성 상태가 된다.
기준선으로 자동 스캔 실행: 대상 페이지에서 Chrome DevTools의 axe DevTools 또는 Lighthouse를 연다. 두 도구 모두 WCAG 2.3.3 위반을 직접 표시하지는 않지만, 관련 문제를 드러낼 수 있고 테스트 환경이 정상 작동하는지 확인해 준다. 맥락을 위해 애니메이션 관련 발견 사항을 기록한다.
OS 모션 감소가 활성화된 상태에서 페이지와 상호작용: 페이지를 천천히 스크롤하고, 버튼, 내비게이션 토글, 드롭다운, 캐러셀, 모달 같은 인터랙티브 요소를 클릭한다. 요소 위에 마우스를 올려 본다. 키보드로 탭 이동을 하며 페이지를 탐색한다. 공간적 모션 애니메이션이 여전히 재생되는지 관찰한다. 애니메이션이 억제된다면, OS 선호 경로에 대해서는 통과이다.
OS 모션 감소를 비활성화하고 다시 테스트: OS 모션 감소를 끈 상태에서 모든 상호작용을 반복한다. 사용자 상호작용으로 트리거되는 모든 모션 애니메이션을 식별한다. 각 애니메이션에 대해 트리거 행동과 관찰된 애니메이션을 설명과 함께 문서화한다.
사이트 수준 애니메이션 토글 확인: OS 모션 감소가 존중되지 않는 경우, 접근성 위젯, 설정 메뉴, 푸터 등에 흔히 위치한 사이트 수준 제어를 찾는다. 이를 활성화하고 모든 상호작용 테스트를 반복해 모션이 억제되는지 확인한다.
CSS와 JavaScript에서 prefers-reduced-motion 구현 검사: DevTools를 열고 Sources 또는 Elements 패널로 이동한 뒤, 스타일시트 파일에서 prefers-reduced-motion을 검색한다. 식별된 모든 모션 애니메이션이 이 쿼리로 게이트되어 있는지 확인한다. Chrome DevTools에서는 미디어 쿼리를 에뮬레이션할 수 있다. Rendering 탭(More Tools > Rendering)을 열고 "Emulate CSS media feature prefers-reduced-motion"을 "reduce"로 설정한다. 브라우저를 재시작하지 않고도 애니메이션이 억제되는지 확인한다.
필수 예외 평가: 모션 감소가 활성화된 상태에서 여전히 남아 있는 각 애니메이션에 대해, 그것이 진정으로 필수적인지 평가한다. 제거하면 비애니메이션 대안이 없는 정보나 기능이 사라지는가? 각 판단에 대한 근거를 문서화한다.
스크린 리더 검증(NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): 부분 시력을 가진 스크린 리더 사용자는 전정 효과에서 자유롭지 않다. 스크린 리더를 활성화하고 OS 모션 감소를 켠 상태에서 키보드만 사용해 페이지를 탐색한다. 포커스 이벤트나 키보드 기반 상호작용으로, 모션 감소 조정 없이 애니메이션이 트리거되지 않는지 확인한다.

수정 방법

패럴랙스 스크롤 효과 — 잘못된 예

<!-- Background moves at a different rate than content on scroll -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Creates parallax on scroll */
    height: 100vh;
  }
</style>
<div class='hero'></div>

패럴랙스 스크롤 효과 — 올바른 예

<!-- Parallax is disabled when the user prefers reduced motion -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Parallax by default */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Static background; no spatial movement */
    }
  }
</style>
<div class='hero'></div>

인터랙티브 요소의 CSS 트랜지션 — 잘못된 예

<!-- Button slides and scales on click with no reduced-motion accommodation -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

인터랙티브 요소의 CSS 트랜지션 — 올바른 예

<!-- Spatial transform is suppressed; a simple opacity shift conveys state without motion -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Only non-spatial change retained */
    }
    .btn:active {
      transform: none; /* No movement */
      opacity: 0.75;   /* State still communicated visually */
    }
  }
</style>
<button class='btn'>Submit</button>

JavaScript 애니메이션 라이브러리(GSAP) — 잘못된 예

<!-- GSAP tween fires on button click regardless of user motion preference -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

JavaScript 애니메이션 라이브러리(GSAP) — 올바른 예

<!-- Check matchMedia before triggering spatial animation; fall back to instant display -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Skip spatial movement; just make the modal visible immediately */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

사이트 수준 애니메이션 토글(접근성 위젯) — 올바른 패턴

<!-- Persist user preference in localStorage and apply a class to <html> -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Default: animations active */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* When user opts out via widget */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

자주 발생하는 실수

prefers-reduced-motion을 CSS 애니메이션에만 적용하고 CSS 트랜지션에는 적용하지 않는 경우: animation 단축 속성과 transition 속성 모두 공간적 움직임을 생성할 수 있다. 팀은 종종 키프레임 애니메이션에 대한 미디어 쿼리는 작성하면서, 호버나 포커스 시 transition: transform 0.3s 역시 모션을 트리거하며 게이트되어야 한다는 점을 잊는다.
reduce 대신 prefers-reduced-motion: no-preference를 쿼리 조건으로 사용하는 경우: 올바른 패턴은 축소된 경험 스타일을 @media (prefers-reduced-motion: reduce) 안에 감싸는 것이지, 그 반대가 아니다. 애니메이션 스타일을 @media (prefers-reduced-motion: no-preference) 안에 감싸는 방식도 가능하지만 더 오류가 발생하기 쉽고, 사용자가 명시적으로 선호를 설정하지 않은 경우에도 애니메이션이 활성 상태로 남게 되는 오용이 자주 발생한다.
matchMedia 결과를 한 번만 캐시하고 다시 확인하지 않는 경우: 사용자는 페이지가 열린 상태에서도 OS 선호를 변경할 수 있다. JavaScript 기반 애니메이션이 페이지 새로고침 없이도 실시간 선호 변경에 반응하도록, matchMedia(...).addEventListener('change', handler)에 구독해야 한다.
불투명도만 변경되는 페이드를 억제해야 할 모션 애니메이션으로 취급하는 경우: 이 기준은 공간적 움직임을 구체적으로 대상으로 한다. 모션 감소가 활성화되었을 때 불투명도 트랜지션까지 제거하는 것은 과도하며 사용성을 떨어뜨린다. 요소를 공간적으로 이동시키지 않는 페이드는 일반적으로 유지해도 괜찮다.
애니메이션 토글을 접근하기 어려운 설정 메뉴 깊숙이 배치하는 경우: 사이트 수준 제어가 OS 미디어 쿼리를 대신하거나 보완하는 용도로 사용된다면, 찾기 쉬워야 한다. 이상적으로는 지속적인 사이트 헤더, 푸터, 또는 접근 가능한 오버레이 위젯에 위치해야 하며, 로그인해야 접근할 수 있는 사용자 계정 설정 페이지의 세 단계 깊은 곳에 묻혀 있어서는 안 된다.
모든 애니메이션 라이브러리가 자동으로 prefers-reduced-motion을 존중한다고 가정하는 경우: GSAP, Anime.js, 커스텀 requestAnimationFrame 구현을 포함한 대부분의 JavaScript 애니메이션 라이브러리는 미디어 쿼리를 자동으로 존중하지 않는다. 각 프로그래밍된 애니메이션은 JavaScript 레이어에서 matchMedia 체크로 개별적으로 보호되어야 한다.
충분한 근거 없이 애니메이션을 필수라고 선언하는 경우: 팀이 수정 작업을 피하기 위해 복잡한 장식적 애니메이션을 필수로 표시하는 경우가 있다. 필수 예외는 매우 좁다. 애니메이션이 전달하는 정보를 어떤 정적 또는 비애니메이션 방식으로도 표현할 수 없을 때에만 필수라고 할 수 있다. 로딩 스피너, 장식적 패럴랙스, 페이지 진입 애니메이션은 거의 필수에 해당하지 않는다.
클릭 이외의 상호작용, 특히 스크롤과 호버를 테스트하지 않는 경우: 패럴랙스 스크롤 효과와 호버로 트리거되는 트랜스폼은 전정기관에 가장 흔한 문제를 일으키는 요소 중 하나지만, 테스트는 종종 클릭 상호작용에만 한정된다. 포괄적인 테스트는 스크롤, 호버, 포커스, 드래그, 키보드 내비게이션 등 모든 상호작용 방식을 포함해야 한다.
사이트 수준 토글 선호를 세션 간에 유지하지 않는 경우: 사용자가 사이트 토글을 통해 모션 감소를 설정한 뒤 다른 페이지로 이동하거나 다음 날 사이트에 다시 방문했을 때 설정이 초기화된다면, 이 조정은 사실상 실패한 것이다. 선호는 localStorage나 사용자 프로필에 저장되고, 모든 페이지 로드 시 다시 적용되어야 한다.
서드파티 임베드와 위젯을 잊는 경우: 임베디드 소셜 피드, 채팅 위젯, 지도 임베드, 광고 스크립트는 호스트 사이트의 CSS 제어 범위를 완전히 벗어난 자체 모션 애니메이션을 도입할 수 있다. 서드파티 콘텐츠 역시 감사 대상이며, 공급업체가 모션 감소 지원을 제공하도록 요구하거나, 가능한 경우 CSS 컨테인먼트 전략을 통해 모션을 억제하는 컨테이너로 임베드를 감싸야 한다.

터키 접근성 규정과의 관계

터키의 대통령령 2025/10은 2025년 6월 21일자 관보(Resmî Gazete) 제32933호에 게재되었으며, 터키에서 운영되는 특정 유형의 주체에 대해 구속력 있는 디지털 접근성 의무를 설정한다. 적용 대상에는 공공 기관 및 기관, 전자상거래 플랫폼, 은행 및 금융 서비스 제공자, 병원 및 민간 의료 시설, 200,000명 이상의 가입자를 보유한 통신 사업자, 허가받은 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립학교가 포함된다.

이 대통령령은 발효일 이후에 제작되거나 실질적으로 업데이트되는 디지털 서비스에 대해 WCAG 2.1 AA 수준 준수를 기준 표준으로 의무화한다. WCAG 2.3.3 — 상호작용으로 인한 애니메이션은 AAA 수준 기준이므로, 대통령령 2025/10에 따라 필수 요건은 아니다. 적용 대상 주체는 터키 법률상 준수 상태를 달성하기 위해 이 기준을 구현할 법적 의무는 없다.

그러나 2.3.3과 같은 기준에서 AAA 수준 준수를 달성하는 것은 터키 조직에 상당한 실질적·평판적 가치를 지닌다. 전정 및 모션 민감성 상태는, 스크린 리더 호환성에만 좁게 초점을 맞춘 접근성 감사에서 자주 간과되는 보이지 않는 장애이다. 신경학적 상태로 인해 모션 민감성이 높을 수 있는 환자가 사용자에 포함될 수 있는 의료(병원 및 민간 건강 플랫폼) 분야와, 스크롤이 많이 발생하고 애니메이션 UI 패턴이 흔한 전자상거래 및 여행사 분야에서 2.3.3을 구현하는 것은 성숙하고 사용자 중심적인 접근성 전략을 보여 준다.

자발적 AAA 준수를 추구하는 조직 — 예를 들어 공공 입찰에서의 이점, 국제 시장 진출, 업계 인증을 목표로 하는 조직 — 은 2.3.3을 우선 기준으로 취급해야 한다. 그 이유는 비교적 낮은 수정 비용(잘 구조화된 prefers-reduced-motion 미디어 쿼리 전략을 디자인 시스템 전반에 체계적으로 적용할 수 있음)과, 이를 구현하지 않을 경우 발생할 수 있는 직접적인 신체적 피해 때문이다. Accsible과 같은 접근성 오버레이 위젯 내에 애니메이션 제어를 포함하면, 터키 조직은 사용자가 운영체제 설정을 찾아야 할 필요 없이 이 조정을 제공할 수 있으며, 모션 감소로 가는 경로를 가능한 한 넓은 사용자층에게 발견 가능하고 사용 가능하게 만들 수 있다.