모션 구성·연속성·원칙
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
시간차 애니메이션 Staggered Animation
요소별 시작 시간을 조금씩 어긋나게 하는 방식.
목록·카드 순차 등장.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
눌림과 늘어남 Squash and Stretch
움직임의 힘을 전달하도록 형태를 압축·신장하는 표현.
탄성 버튼·캐주얼 캐릭터.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
예비 동작 Anticipation
본 동작을 예상하게 만드는 선행 움직임.
버튼 확장·캐릭터 공격 준비.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
후속 동작 Follow-through
주된 움직임이 멈춘 뒤 일부 요소가 계속 움직이는 표현.
머리카락·꼬리·아이콘 꼬리.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
겹치는 동작 Overlapping Action
여러 부분이 서로 다른 타이밍으로 움직이는 표현.
자연스러운 연결·지연 반응.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
모션 안무 Motion Choreography
여러 요소의 시작 순서·경로·강조를 조직하는 설계.
복합 화면 등장·전환.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
시퀀스 Sequence
여러 애니메이션을 정해진 순서로 연결한 구성.
온보딩·단계 피드백.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
병렬 애니메이션 Parallel Animation
여러 속성이나 요소의 애니메이션을 동시에 진행한다.
크기·색·위치 동시 전환.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
애니메이션 타임라인 Animation Timeline
애니메이션 구간과 이벤트를 시간축에 배치한 구조.
장면·복합 모션 편집.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
보조 모션 Secondary Motion
주된 동작을 보강하는 부수적 움직임.
입자·장식·옷자락.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
모션 위계 Motion Hierarchy
중요도에 따라 움직임의 크기·강도·순서를 다르게 두는 설계.
핵심 액션 강조.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
공간적 연속성 Spatial Continuity
전환 전후 대상의 위치 관계를 이해할 수 있게 유지하는 성질.
공유 요소·목록 상세 전환.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
시간적 연속성 Temporal Continuity
동작이 갑자기 끊기거나 어색하게 재시작하지 않도록 이어지는 성질.
중단·재타깃 전환.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
모션 아크 Motion Arc
움직임이 따르는 곡선 경로.
자연스러운 이동·투척 표현.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
애니메이션 루프 Animation Loop
끝과 시작을 연결해 반복 재생하는 구성.
로딩·배경·대기 동작.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
핑퐁 루프 Ping-pong Loop
정방향과 역방향을 번갈아 반복하는 재생 방식.
부유·왕복·호흡 모션.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
이음매 없는 루프 Seamless Loop
반복 경계에서 값이나 속도 차이가 눈에 띄지 않는 루프.
연기·배경·장시간 반복.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
모션 토큰 Motion Token
지속시간·곡선·스프링·지연 등 재사용 가능한 모션 규칙을 이름으로 관리한 값.
디자인 시스템·다중 플랫폼 일관성.
원칙은 고정된 효과 목록이 아니다. 사용자 과업과 시각적 위계에 맞게 적용하고 불필요한 지연은 줄인다.
Motion Composition, Continuity & Principles
Open an entry for its visual reference, comparisons and source-language text.
Staggered Animation 시간차 애니메이션
Starting individual elements at slightly offset times.
Sequential entrances of list items and cards.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Squash and Stretch 눌림과 늘어남
Compressing and stretching a form to communicate the forces of motion.
Elastic buttons and stylized characters.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Anticipation 예비 동작
A preparatory movement that signals the main action to come.
Button expansion and character attack anticipation.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Follow-through 후속 동작
Movement that continues in some parts after the primary motion stops.
Hair, tails, and trailing icon parts.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Overlapping Action 겹치는 동작
Movement in which different parts follow different timings.
Natural continuity and delayed responses.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Motion Choreography 모션 안무
Organizing the start order, paths, and emphasis of motion across multiple elements.
Complex screen entrances and transitions.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Sequence 시퀀스
A composition connecting animations in a defined order.
Onboarding and step feedback.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Parallel Animation 병렬 애니메이션
Running animations of multiple properties or elements at the same time.
Simultaneous changes in size, color, and position.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Animation Timeline 애니메이션 타임라인
A structure arranging animation segments and events along a time axis.
Editing scenes and complex motion.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Secondary Motion 보조 모션
Supporting movement that reinforces a primary action.
Particles, decorations, and trailing fabric.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Motion Hierarchy 모션 위계
Varying motion scale, intensity, and order according to importance.
Emphasizing the primary action.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Spatial Continuity 공간적 연속성
Maintaining understandable spatial relationships between objects before and after a transition.
Shared elements and list-to-detail transitions.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Temporal Continuity 시간적 연속성
Continuity that prevents movement from abruptly stopping or awkwardly restarting.
Interrupted and retargeted transitions.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Motion Arc 모션 아크
The curved path followed by a movement.
Natural movement and throwing effects.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Animation Loop 애니메이션 루프
A sequence connecting its end to its start for repeated playback.
Loading, backgrounds, and idle animations.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Ping-pong Loop 핑퐁 루프
Playback alternating between forward and reverse directions.
Floating, back-and-forth, and breathing motion.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Seamless Loop 이음매 없는 루프
A loop whose repeat boundary has no conspicuous value or velocity discontinuity.
Smoke, backgrounds, and long-running loops.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.
Motion Token 모션 토큰
A named, reusable motion value or rule for duration, easing, springs, or delay.
Consistency in design systems and across platforms.
Principles are not a fixed list of effects. Apply them to user tasks and visual hierarchy while avoiding unnecessary delays.