AI 분석
알림 벨 버튼 위 빨간 배지의 등장 모션을 기본형과 바운스 개선형으로 비교한 마이크로 인터랙션 데모다.
흰 배경 중앙에 그림자가 있는 원형 벨 아이콘 버튼을 두고, 우상단에 숫자 1이 든 빨간 원형 배지가 나타나는 장면을 반복한다. 상단에는 회색 무표정 아이콘과 초록 웃는 얼굴 아이콘으로 개선 전후 상태를 구분하고, 하단에는 모노스페이스 글꼴의 연회색 알약형 칩으로 속성·값·지속 시간·이징 곡선을 표기한다. 기본형은 불투명도와 스케일을 0에서 100%로 300ms 동안 단순히 키우고, 개선형은 스케일을 105%까지 150ms로 키운 뒤 200ms에 걸쳐 100%로 되돌리는 오버슈트와 X축 위치 이동을 함께 적용한다. 배지 모션의 구체적인 수치와 타이밍을 비교해 볼 수 있어 알림·배지 마이크로 인터랙션 설계 참고로 유용하다.
minimal · light-mode
claude-opus-5-5 · 2026-10-16 17:55 · 신뢰도 0.75
