Toggle Switch (토글 스위치)
다른 이름 Switch, Switch Thumb Slide
둥근 손잡이가 트랙을 따라 미끄러지고, 꺼짐과 켜짐에 따라 트랙 색이 바뀝니다.
쓰는 곳
설정, 다크 모드
변형
- checkbox-hack toggle
- role=switch
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 토글 스위치(Toggle Switch) 애니메이션을 넣어 줘. 스위치(switch)라고도 불러.
켜고 끌 때 둥근 손잡이가 트랙 반대쪽 끝까지 부드럽게 미끄러지고, 그와 함께 트랙 색이 바뀌게 해 줘. 빠르고 또렷하게, 튕김 없이.
키보드로도 작동하는 진짜 접근성 있는 스위치(checked 상태를 가진 role="switch")로 만들어 줘.비슷한 모션
클릭해 보세요
Checkbox Check Draw (체크박스 체크 드로우)
다른 이름 Animated checkbox, Checkmark draw
체크하면 상자 안에 체크 표시가 한 획씩 그려집니다.
쓰는 곳
폼, 할 일 목록
[적용할 곳]에 체크박스 체크 드로우(Checkbox Check Draw) 애니메이션을 넣어 줘. 애니메이티드 체크박스(animated checkbox), 체크마크 드로우(checkmark draw)라고도 불러.
체크하면 상자가 색으로 채워지고 체크 표시가 빠르고 부드러운 한 획으로 그려지게 해 줘. 체크를 풀면 같은 방식으로 지워지게.
체크 상태를 가진 진짜 체크박스로 유지하고, 키보드로도 동작하며 포커스 링이 보이게 해 줘.ABC
클릭해 보세요
Tab Indicator Slide (탭 인디케이터 슬라이드)
다른 이름 Sliding underline, Active tab indicator, Segmented control pill
밑줄이나 알약 모양 배경이 이전 탭에서 새로 선택한 탭으로 미끄러지듯 이동합니다.
쓰는 곳
탭 바, 세그먼트 컨트롤
[적용할 곳]에 탭 인디케이터 슬라이드(Tab Indicator Slide)를 넣어 줘. 슬라이딩 언더라인(sliding underline), 액티브 탭 인디케이터(active tab indicator)라고도 불러.
새 탭을 선택하면 밑줄이 이전 탭에서 새 탭으로 빠르게, 부드럽게 감속하며 미끄러지고, 탭 너비가 다르면 새 탭 너비에 맞게 늘어나게 해 줘.
화살표 키로 이동할 수 있는 올바른 탭 시맨틱을 지키고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 미끄러지지 않고 바로 옮겨지게 해 줘.••••••ABCDEF
클릭해 보세요
Password Reveal Toggle (비밀번호 보기 토글)
다른 이름 Show/hide password, Eye icon toggle
비밀번호를 보이거나 숨길 때 눈 아이콘이 뜬 눈과 사선이 그어진 눈으로 바뀝니다.
쓰는 곳
로그인·회원가입 폼
[적용할 곳]에 비밀번호 보기 토글(Password Reveal Toggle)을 넣어 줘. 비밀번호 보이기/숨기기(show/hide password), 눈 아이콘 토글(eye icon toggle)이라고도 불러.
눈을 누르면 사선이 빠르게 지워지면서 가려진 점들이 실제 글자로 크로스페이드되고, 다시 누르면 사선이 다시 그어지며 글자가 가려지게 해 줘. 부드럽고 빠르게, 튕김 없이.
글자가 튀지 않게 입력란 너비를 고정하고, 토글은 비밀번호가 보이는지 레이블로 알려 주는 진짜 버튼으로 만들어 줘.Micro-interaction의 다른 모션
A
1
클릭해 보세요
Add to Cart Fly (장바구니 담기 애니메이션)
다른 이름 Fly to cart, Add-to-cart animation
상품 이미지가 작아지며 포물선을 그리고 장바구니 아이콘으로 날아갑니다.
쓰는 곳
이커머스
[적용할 곳]에 장바구니 담기 애니메이션(Add to Cart Fly)을 넣어 줘. 플라이 투 카트(fly to cart), 장바구니 추가 애니메이션(add-to-cart animation)이라고도 불러.
담기 버튼을 누르면 상품 이미지의 작은 복사본이 작아지면서 부드럽고 빠른 포물선을 그리며 장바구니 아이콘으로 날아가고, 장바구니는 개수가 바뀔 때 살짝 튀게 해 줘.
누를 때마다 한 번만 재생하고 원래 상품 카드는 움직이지 않게 해 줘. 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 날아가는 동작은 빼고 장바구니 갱신만 해 줘.A
클릭해 보세요
Confetti (컨페티)
다른 이름 Confetti burst, Celebration
알록달록한 종이 조각이 터져 나와 흩날리며 성공을 축하합니다.
쓰는 곳
구매 완료, 목표 달성
[적용할 곳]에 컨페티(Confetti) 축하 효과를 넣어 줘. 컨페티 버스트(confetti burst)라고도 불러.
알록달록한 작은 종이 조각이 버튼에서 빠르게 터져 나온 뒤, 뒤집히며 흩날려 떨어지다 사라지게 해 줘. 짧고 경쾌하게.
반복하지 말고 성공할 때마다 한 번만 터뜨리고, 페이지 클릭을 막지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.