마이크로인터랙션·로딩 피드백
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
스피너 Spinner
완료 비율을 모를 때 반복 회전으로 작업이 진행 중임을 나타냅니다.
완료 시점을 모르는 작업.
수치 진행률을 표시하지 않습니다. 회전한다는 이유만으로 실제 처리 비율을 추정할 수 없습니다.
스켈레톤 화면 Skeleton Screen
콘텐츠가 들어올 레이아웃을 빈 블록으로 먼저 보여줍니다.
목록·카드 초기 로딩.
스켈레톤은 공간 구조, 시머는 그 위에 흐르는 빛 애니메이션입니다.
로딩 버튼 Loading Button
실행 후 버튼 자체에서 진행 상태를 보여주는 컴포넌트.
저장·제출·요청 실행.
중복 요청 방지와 성공·실패 복귀 동작을 함께 설계한다.
시머 Shimmer
요소 표면을 따라 밝은 띠가 흐르는 반복 애니메이션입니다.
스켈레톤의 진행 중 표현.
스켈레톤 없이도 쓸 수 있는 모션 효과이며 진행률을 나타내지 않습니다.
스트리밍 텍스트 Streaming Text
새 텍스트 데이터가 도착하는 대로 점진적으로 표시하는 방식.
AI 응답·실시간 로그.
타자기 효과처럼 이미 있는 글을 지연 표시하는 연출과 구분한다.
마이크로인터랙션 Microinteraction
하나의 작은 과업·상태 변화에 대한 제한된 상호작용과 피드백.
토글·좋아요·저장 반응.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
리플 효과 Ripple Effect
입력 위치에서 원형 파동이 퍼지는 피드백.
터치 접수 표현.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
컨페티 애니메이션 Confetti Animation
색종이나 작은 조각이 흩날리는 축하 효과.
목표 달성·완료 축하.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
호버 애니메이션 Hover Animation
포인터가 요소 위에 있을 때 변하는 시각 반응.
메뉴·카드 강조.
터치·키보드 환경에서도 같은 정보를 얻을 수 있어야 한다.
눌림 피드백 Press Feedback
버튼을 누르는 순간 크기·색·그림자 등으로 입력을 알리는 반응.
버튼 조작 확인.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
포커스 전환 표현 Focus Transition
키보드 초점이 이동하거나 활성화될 때의 시각 변화.
접근성·입력 위치 안내.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
펄스 애니메이션 Pulse Animation
크기·밝기·불투명도가 주기적으로 증감하는 표현.
진행 중·주의 대상 강조.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
주의 환기 흔들림 Attention Shake
요소를 짧게 좌우 등으로 흔들어 주의를 유도하는 표현.
입력 거부·경고.
오류 원인은 텍스트로도 설명한다.
위글 애니메이션 Wiggle Animation
작은 회전이나 흔들림을 반복하는 표현.
편집 모드·조작 가능성 암시.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
진행률 보간 Progress Interpolation
진행 값 변화가 시각적으로 끊기지 않게 보간하는 처리.
업로드·처리 진행 표시.
실제 진행률을 과장하거나 없는 완료량을 만들어 표시하지 않는다.
성공 체크 모션 Success Check Animation
작업 성공 시 체크 표시가 그려지거나 변형되는 표현.
저장·제출 완료.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
좋아요 버스트 Like Burst
선택 시 하트 등 중심에서 작은 요소가 퍼지는 표현.
반응·북마크 피드백.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
숫자 변화 애니메이션 Number Ticker
수치가 굴러가거나 보간되며 바뀌는 표현.
통계·점수·금액 변화.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
애니메이션 토글 Animated Toggle
켜짐·꺼짐을 손잡이 이동·색 변화로 보여주는 컨트롤.
설정 상태 변경.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
알림 도착 모션 Notification Arrival Motion
새 알림이 들어온 위치와 변화를 보여주는 모션.
토스트·메시지 도착.
입력이 접수됐다는 표시와 서버 작업 성공을 구분한다. 무한 반복 효과는 중지·감소 동작을 준비한다.
Microinteractions & Loading Feedback
Open an entry for its visual reference, comparisons and source-language text.
Spinner 스피너
Uses repeated rotation to indicate work whose completion fraction is unknown.
Tasks with an unknown completion time.
Shows no numerical completion estimate; rotation speed does not measure progress.
Skeleton Screen 스켈레톤 화면
Displays placeholder blocks matching the upcoming content layout.
Initial loading of lists and cards.
Skeleton is the placeholder structure; shimmer is the moving highlight effect.
Loading Button 로딩 버튼
A button that displays progress within itself after an action starts.
Saving, submitting, and sending requests.
Design duplicate-request prevention and recovery from both success and failure.
Shimmer 시머
A repeating highlight that sweeps across an element surface.
Showing ongoing activity on skeleton placeholders.
A motion effect usable without skeletons; it does not encode completion.
Streaming Text 스트리밍 텍스트
Displaying text incrementally as new text data arrives.
AI responses and real-time logs.
Distinguish streaming from a typewriter effect that delays the display of text already available.
Microinteraction 마이크로인터랙션
A small, focused interaction and its feedback for a single task or state change.
Toggle, like, and save feedback.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Ripple Effect 리플 효과
Feedback in which circular waves spread from the input location.
Acknowledging touch input.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Confetti Animation 컨페티 애니메이션
A celebratory effect with scattered pieces of confetti or small particles.
Celebrating completion or goals.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Hover Animation 호버 애니메이션
A visual response triggered when a pointer is over an element.
Emphasizing menus and cards.
Provide the same information for touch and keyboard users.
Press Feedback 눌림 피드백
Immediate size, color, shadow, or similar feedback acknowledging a button press.
Confirming button interactions.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Focus Transition 포커스 전환 표현
A visual change when keyboard focus moves or becomes active.
Accessibility and indicating the current input location.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Pulse Animation 펄스 애니메이션
A periodic increase and decrease in scale, brightness, or opacity.
Highlighting ongoing activity and items needing attention.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Attention Shake 주의 환기 흔들림
A short shake, often side to side, intended to draw attention.
Rejected input and warnings.
Explain the cause of an error in text as well.
Wiggle Animation 위글 애니메이션
A repeated small rotation or wobble.
Indicating editing mode and interactive elements.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Progress Interpolation 진행률 보간
Interpolating progress-value changes so the visual indicator moves smoothly.
Showing upload and processing progress.
Do not exaggerate actual progress or invent a completion percentage.
Success Check Animation 성공 체크 모션
A checkmark drawn or transformed to communicate successful completion.
Confirming completed saves and submissions.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Like Burst 좋아요 버스트
Small elements bursting outward from a heart or similar icon when selected.
Reaction and bookmark feedback.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Number Ticker 숫자 변화 애니메이션
A value change animated by rolling digits or numeric interpolation.
Changes in statistics, scores, and amounts.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Animated Toggle 애니메이션 토글
A control showing on/off changes through thumb movement and color transitions.
Changes to settings.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.
Notification Arrival Motion 알림 도착 모션
Motion showing where a new notification has arrived and what changed.
Arriving toasts and messages.
Distinguish acknowledgement of input from successful server processing. Provide ways to stop or reduce endlessly looping effects.