탐색Motion인라인 토스트 — 코드 복사 알약 버튼 전환 인터랙션

1 / 1

코드 문자열과 Copy 버튼이 든 알약 필드를 클릭하면 블러 전환으로 체크 아이콘과 복사 완료 문구가 나타나고, 배경 진행 바가 차오른 뒤 원래 상태로 돌아가는 동영상이다.

Motion

인라인 토스트 — 코드 복사 알약 버튼 전환 인터랙션

2025-11-29 · 동영상 1

AI 분석

코드 복사 필드가 같은 자리에서 복사 완료 토스트로 바뀌는 마이크로 인터랙션이다.

흰 배경 중앙에 연회색 알약형 필드 하나만 놓인 단일 컴포넌트 구성이다. 왼쪽에는 회색 굵은 산세리프로 코드 문자열이, 오른쪽에는 흰색 알약 Copy 버튼이 그림자와 함께 떠 있다. 버튼을 누르면 내용이 블러로 흐려지며 체크 아이콘과 복사 완료 문구로 바뀌고, 필드 배경을 가로질러 진행 바처럼 옅은 톤이 차오른 뒤 원래 상태로 되돌아간다. 별도 팝업 없이 컴포넌트 안에서 피드백을 주는 인라인 토스트 패턴과 블러 전환 모션의 참고로 유용하다.

minimal · light-mode · monochrome

animation button light-mode micro-interaction minimal monochrome notification progress toast

claude-opus-5-5 · 2026-10-16 17:58 · 신뢰도 0.80