모션·전환·시각 효과
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
등장 애니메이션 Entrance Animation
요소가 나타날 때의 모션.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
퇴장 애니메이션 Exit Animation
요소가 사라질 때의 모션.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
페이드 인·아웃 Fade In / Out
불투명도를 변경해 나타나거나 사라짐.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
슬라이드 인·아웃 Slide In / Out
화면 안팎으로 미끄러져 이동.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
가속·감속 이징 Ease-in / Ease-out
시작이나 종료 구간에 속도 변화를 부여.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
로티 애니메이션 Lottie Animation
벡터 기반 JSON 애니메이션을 UI에 표시하는 방식.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
라이브 애니메이션 Rive Animation
상태 기계와 연동하는 실시간 인터랙티브 애니메이션.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
블러 효과 Blur Effect
요소를 흐리게 처리해 시각적 초점을 조정.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
배경 블러 Backdrop Blur
반투명 전경 뒤쪽 콘텐츠를 흐리게 처리.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
글래스모피즘 Glassmorphism
반투명·배경 흐림·하이라이트로 유리 질감을 표현.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
뉴모피즘 Neumorphism
낮은 대비의 입체 그림자로 표면 돌출·함몰을 표현.
모션·전환·시각 효과에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Motion, Transitions & Visual Effects
Open an entry for its visual reference, comparisons and source-language text.
Entrance Animation 등장 애니메이션
Motion used when an element appears.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Exit Animation 퇴장 애니메이션
Motion used when an element disappears.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Fade In / Out 페이드 인·아웃
Changing opacity to make an element appear or disappear.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Slide In / Out 슬라이드 인·아웃
Sliding an element into or out of view.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Ease-in / Ease-out 가속·감속 이징
Changing the animation's speed near its beginning or end.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Lottie Animation 로티 애니메이션
Displaying a vector-based JSON animation within an interface.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Rive Animation 라이브 애니메이션
Real-time interactive animation connected to a state machine.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Blur Effect 블러 효과
Blurring an element to influence visual focus.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Backdrop Blur 배경 블러
Blurring content behind a translucent foreground element.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Glassmorphism 글래스모피즘
A glass-like visual treatment using translucency, background blur, and highlights.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Neumorphism 뉴모피즘
A visual style using low-contrast shadows to suggest raised or recessed surfaces.
Specifying motion, transitions, and visual effects.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.