Copy-to-Clipboard Feedback (클립보드 복사 피드백)
다른 이름 Copied state, Copy icon to checkmark
복사 아이콘이 체크 표시로 바뀌고, 라벨이 잠시 「복사됨」으로 바뀝니다.
쓰는 곳
코드 블록, 공유 링크
변형
- icon morph
- tooltip Copied
- label swap
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 클립보드 복사 피드백(Copy-to-Clipboard Feedback) 애니메이션을 넣어 줘. 복사됨 상태(copied state), 복사 아이콘에서 체크 표시로(copy icon to checkmark)라고도 불러.
복사 버튼을 누르면 복사 아이콘이 빠르게 작아지며 사라지고 체크 표시가 그려지면서 라벨이 「복사됨」으로 바뀌고, 잠시 뒤 모두 부드럽게 원래대로 돌아오게 해 줘.
바뀌는 동안 버튼 크기를 그대로 두어 아무것도 밀리지 않게 하고, 복사된 상태를 스크린 리더에 알려 줘.비슷한 모션
클릭해 보세요
Icon Morph (아이콘 모프)
다른 이름 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
햄버거 메뉴 같은 아이콘이 막대의 회전과 이동으로 다른 아이콘(X)으로 바뀝니다.
쓰는 곳
메뉴 열기·닫기 버튼
[적용할 곳]에 아이콘 모프(Icon Morph)를 넣어 줘. 햄버거 투 엑스(hamburger to X), 메뉴 아이콘 모프(menu icon morph)라고도 불러.
누를 때마다 위아래 막대가 먼저 가운데로 모인 다음 회전해 X가 되고 가운데 막대는 사라지며, 다시 누르면 반대로 돌아가게 해 줘. 빠르고 경쾌하게.
접근성 레이블과 펼침 상태가 함께 바뀌는 진짜 토글 버튼으로 만들고, 주변이 밀리지 않게 아이콘 크기는 고정해 줘.Success Checkmark (석세스 체크마크)
다른 이름 Animated success tick
원과 체크 표시가 스스로 그려지며 작업이 성공했음을 알립니다.
쓰는 곳
폼 제출, 결제 완료
[적용할 곳]에 석세스 체크마크(Success Checkmark) 애니메이션을 넣어 줘. 애니메이션 성공 체크(animated success tick)라고도 불러.
원이 부드러운 한 획으로 그려진 다음 그 안에 체크 표시가 그려지고, 표시 전체가 작고 부드럽게 톡 튀게 해 줘. 차분하고 확신 있게.
작업이 성공했을 때 한 번만 재생하고, 스크린 리더가 읽어 줄 수 있는 텍스트 메시지를 함께 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 표시를 바로 보여 줘.Button Loading State (버튼 로딩 스테이트)
다른 이름 Spinner button, Loading button, Button spinner, Submit loading state
작업이 진행되는 동안 버튼의 라벨이 작은 스피너로 바뀌거나 스피너가 덧붙습니다.
쓰는 곳
폼 제출, 비동기 작업
[적용할 곳]에 버튼 로딩 스테이트(Button Loading State)를 넣어 줘. 스피너 버튼(spinner button), 로딩 버튼(loading button)이라고도 불러.
누르면 버튼이 살짝 눌리고, 라벨이 서서히 사라지면서 작업이 도는 동안 그 자리에 작은 스피너가 보이다가, 끝나면 라벨이 돌아오게 해 줘.
로딩 중에도 버튼 너비는 그대로 두고, 여러 번 눌리지 않게 막고, 처리 중 상태를 스크린 리더에 알려 줘.••••••ABCDEF
클릭해 보세요
Password Reveal Toggle (비밀번호 보기 토글)
다른 이름 Show/hide password, Eye icon toggle
비밀번호를 보이거나 숨길 때 눈 아이콘이 뜬 눈과 사선이 그어진 눈으로 바뀝니다.
쓰는 곳
로그인·회원가입 폼
[적용할 곳]에 비밀번호 보기 토글(Password Reveal Toggle)을 넣어 줘. 비밀번호 보이기/숨기기(show/hide password), 눈 아이콘 토글(eye icon toggle)이라고도 불러.
눈을 누르면 사선이 빠르게 지워지면서 가려진 점들이 실제 글자로 크로스페이드되고, 다시 누르면 사선이 다시 그어지며 글자가 가려지게 해 줘. 부드럽고 빠르게, 튕김 없이.
글자가 튀지 않게 입력란 너비를 고정하고, 토글은 비밀번호가 보이는지 레이블로 알려 주는 진짜 버튼으로 만들어 줘.Micro-interaction의 다른 모션
A
끌어 보세요
Drag (드래그)
다른 이름 Draggable, Drag constraints
드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.
쓰는 곳
슬라이더, 정렬 가능한 카드
[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.ABC
Floating Label (플로팅 라벨)
다른 이름 Float label, Animated placeholder
입력란에 포커스가 가거나 값이 들어가면, 플레이스홀더 라벨이 위로 올라가며 작아집니다.
쓰는 곳
폼, 로그인 입력란
[적용할 곳]에 플로팅 라벨(Floating Label)을 넣어 줘. 플로트 라벨(float label), 애니메이티드 플레이스홀더(animated placeholder)라고도 불러.
입력란에 포커스가 가거나 값이 있으면, 안에 있던 라벨이 부드럽고 빠르게 위로 미끄러지며 작아져 입력란 위쪽 가장자리에 걸치고, 입력란이 비어 있고 포커스도 없을 때만 다시 내려오게 해 줘.
입력란과 연결된 진짜 라벨로 유지하고, 입력란 높이가 바뀌지 않게 해서 폼이 밀리지 않게 해 줘.클릭해 보세요
Like / Heart Burst (좋아요 / 하트 버스트)
다른 이름 Heart animation, Twitter heart, Favorite toggle
하트 아이콘을 클릭하면 색이 채워지며 작은 입자가 터지거나 두근거립니다.
쓰는 곳
좋아요·즐겨찾기 버튼
[적용할 곳]에 좋아요 / 하트 버스트(Like / Heart Burst) 애니메이션을 넣어 줘. 하트 애니메이션(heart animation), 즐겨찾기 토글(favorite toggle)이라고도 불러.
좋아요를 누르면 하트가 색으로 채워지며 통통 튀듯 커지고, 링과 작은 점들이 바깥으로 터졌다가 사라지게 해 줘. 전체적으로 빠르고 경쾌하게, 좋아요를 취소하면 하트만 조용히 비워지게.
눌림 상태를 가진 진짜 토글 버튼으로 만들고, 버스트는 켤 때만 재생해 줘.