ATLASDESIGN REFERENCE GALLERY
ATLAS GALLERY / 2026.10

모션 접근성·성능·실행 상태

각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.

모션 감소 Reduced Motion

비필수 움직임을 줄이거나 다른 표현으로 대체하는 접근성 대응.

큰 이동·줌·패럴랙스 대체.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

프레임 시간 예산 Frame Budget

목표 프레임률을 유지하기 위해 한 프레임에 쓸 수 있는 시간 범위.

UI·게임 성능 계획.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

모션 선호 설정 Motion Preference

사용자가 움직임의 양이나 사용 여부를 선택하는 설정.

OS·앱 접근성 설정.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

정적 대체 표현 Static Fallback

애니메이션 없이도 같은 의미를 전달하는 정지 상태.

모션 감소·재생 실패.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

필수 애니메이션 Essential Animation

제거하면 핵심 정보나 기능이 성립하지 않는 움직임.

동작 자체를 설명하는 콘텐츠.

단지 보기 좋다는 이유만으로 필수라고 분류하지 않는다.

참고 문서

일시정지·중지 제어 Pause / Stop Control

자동 재생 콘텐츠를 사용자가 멈출 수 있도록 하는 조작.

반복 배경·자동 전환.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

번쩍이는 콘텐츠 Flashing Content

짧은 시간에 강한 명도 변화가 반복되는 표현.

섬광·전투 효과 검수.

안전성은 빈도뿐 아니라 면적·대비·색 등도 검토하며 임의의 한 수치로 보증하지 않는다.

참고 문서

프레임 페이싱 Frame Pacing

각 프레임 표시 간격을 일정하게 유지하는 성질.

체감 부드러움 검수.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

잰크·끊김 Jank

프레임 지연 등으로 스크롤이나 애니메이션이 버벅이는 현상.

웹·GUI 반응성 문제 분석.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

합성 단계 애니메이션 Compositor Animation

레이아웃·페인트 작업을 최소화하고 합성 단계에서 처리 가능한 애니메이션.

transform·opacity 중심 최적화.

어떤 속성이든 항상 GPU에서 무료로 처리되는 것은 아니다.

참고 문서

레이아웃 스래싱 Layout Thrashing

레이아웃 읽기와 쓰기를 교차해 불필요한 동기 계산을 반복하는 현상.

웹 모션 성능 진단.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

애니메이션 상태 머신 Animation State Machine

상태와 전이 조건으로 재생 동작을 결정하는 구조.

호버·로딩·성공·실패 모션 관리.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

UI 애니메이션 목표 변경 Animation Retargeting (UI)

진행 중 현재 상태에서 새로운 목표값으로 자연스럽게 변경하는 처리.

반복 입력·패널 크기 변경.

캐릭터 골격 간 동작 이전을 뜻하는 retargeting과 구분한다.

참고 문서

애니메이션 취소 처리 Animation Cancellation

진행 중 재생을 취소하고 자원·상태를 정리하는 과정.

화면 이탈·새 작업 시작.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

퇴장 생명주기 Exit Lifecycle

퇴장 모션이 끝날 때까지 요소를 유지한 뒤 제거하는 처리.

토스트·목록·모달 퇴장.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

백그라운드 제한 Background Throttling

보이지 않는 화면에서 애니메이션이나 타이머 실행을 줄이는 동작.

배터리·CPU 사용 관리.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

모션 명세 Motion Specification

트리거·속성·시간·곡선·중단·감소 대안을 기록한 구현 사양.

디자이너·개발자 협업.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

모션 회귀 테스트 Motion Regression Test

수정 후 전환·타이밍·종료 상태가 의도대로 유지되는지 검증한다.

시각·상태·접근성 QA.

모션을 줄여도 정보와 기능은 유지한다. 성능 효과는 속성·브라우저·장치·장면에 따라 달라 실제 측정이 필요하다.

참고 문서

Motion Accessibility, Performance & Lifecycle

Open an entry for its visual reference, comparisons and source-language text.

Reduced Motion 모션 감소

An accessibility response that reduces nonessential motion or replaces it with alternatives.

Alternatives to large movement, zooming, and parallax.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Frame Budget 프레임 시간 예산

The time available per frame to maintain a target frame rate.

Interface and game performance planning.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Motion Preference 모션 선호 설정

A setting allowing users to choose whether and how much motion is used.

Operating-system and application accessibility settings.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Static Fallback 정적 대체 표현

A nonanimated state that communicates the same meaning.

Reduced motion and playback failures.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Essential Animation 필수 애니메이션

Motion whose removal would prevent essential information or functionality from being conveyed.

Content explaining the movement itself.

Do not classify motion as essential merely because it looks attractive.

Reference

Pause / Stop Control 일시정지·중지 제어

A control allowing users to stop automatically playing content.

Looping backgrounds and automatic transitions.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Flashing Content 번쩍이는 콘텐츠

A presentation with repeated strong luminance changes in a short interval.

Reviewing flashing and combat effects.

Safety depends on area, contrast, color, and other factors as well as frequency. Do not guarantee safety from a single arbitrary number.

Reference

Frame Pacing 프레임 페이싱

The consistency of time intervals between displayed frames.

Reviewing perceived smoothness.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Jank 잰크·끊김

Visible stuttering in scrolling or animation caused by delayed frames or related problems.

Analyzing responsiveness issues in web and GUI applications.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Compositor Animation 합성 단계 애니메이션

Animation that can be handled in compositing while minimizing layout and paint work.

Optimization centered on transform and opacity.

Not every property is always processed on the GPU at no cost.

Reference

Layout Thrashing 레이아웃 스래싱

Repeated unnecessary synchronous layout calculation caused by alternating layout reads and writes.

Diagnosing web animation performance.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Animation State Machine 애니메이션 상태 머신

A structure determining animation behavior through states and transition conditions.

Managing hover, loading, success, and failure animations.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Animation Retargeting (UI) UI 애니메이션 목표 변경

Smoothly redirecting an ongoing animation from its current state toward a new target value.

Repeated input and panel resizing.

Distinguish this from retargeting motion between character skeletons.

Reference

Animation Cancellation 애니메이션 취소 처리

Canceling playback and cleaning up the associated resources and state.

Leaving a screen and starting new work.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Exit Lifecycle 퇴장 생명주기

Retaining an element until its exit animation finishes, then removing it.

Toast, list-item, and modal exits.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Background Throttling 백그라운드 제한

Reducing animation or timer activity when a page is not visible.

Managing battery and CPU usage.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Motion Specification 모션 명세

An implementation specification recording triggers, properties, timing, easing, interruption, and reduced-motion alternatives.

Designer-developer collaboration.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference

Motion Regression Test 모션 회귀 테스트

Testing that transitions, timing, and final states remain correct after a change.

Visual, state, and accessibility QA.

Preserve information and functionality when reducing motion. Performance varies with properties, browsers, devices, and scenes; measure it.

Reference