Micro-interaction

상품 이미지가 작아지며 포물선을 그리고 장바구니 아이콘으로 날아갑니다.

[적용할 곳]에 장바구니 담기 애니메이션(Add to Cart Fly)을 넣어 줘. 플라이 투 카트(fly to cart), 장바구니 추가 애니메이션(add-to-cart animation)이라고도 불러.
담기 버튼을 누르면 상품 이미지의 작은 복사본이 작아지면서 부드럽고 빠른 포물선을 그리며 장바구니 아이콘으로 날아가고, 장바구니는 개수가 바뀔 때 살짝 튀게 해 줘.
누를 때마다 한 번만 재생하고 원래 상품 카드는 움직이지 않게 해 줘. 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 날아가는 동작은 빼고 장바구니 갱신만 해 줘.

체크하면 상자 안에 체크 표시가 한 획씩 그려집니다.

[적용할 곳]에 체크박스 체크 드로우(Checkbox Check Draw) 애니메이션을 넣어 줘. 애니메이티드 체크박스(animated checkbox), 체크마크 드로우(checkmark draw)라고도 불러.
체크하면 상자가 색으로 채워지고 체크 표시가 빠르고 부드러운 한 획으로 그려지게 해 줘. 체크를 풀면 같은 방식으로 지워지게.
체크 상태를 가진 진짜 체크박스로 유지하고, 키보드로도 동작하며 포커스 링이 보이게 해 줘.

알록달록한 종이 조각이 터져 나와 흩날리며 성공을 축하합니다.

[적용할 곳]에 컨페티(Confetti) 축하 효과를 넣어 줘. 컨페티 버스트(confetti burst)라고도 불러.
알록달록한 작은 종이 조각이 버튼에서 빠르게 터져 나온 뒤, 뒤집히며 흩날려 떨어지다 사라지게 해 줘. 짧고 경쾌하게.
반복하지 말고 성공할 때마다 한 번만 터뜨리고, 페이지 클릭을 막지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.

복사 아이콘이 체크 표시로 바뀌고, 라벨이 잠시 「복사됨」으로 바뀝니다.

[적용할 곳]에 클립보드 복사 피드백(Copy-to-Clipboard Feedback) 애니메이션을 넣어 줘. 복사됨 상태(copied state), 복사 아이콘에서 체크 표시로(copy icon to checkmark)라고도 불러.
복사 버튼을 누르면 복사 아이콘이 빠르게 작아지며 사라지고 체크 표시가 그려지면서 라벨이 「복사됨」으로 바뀌고, 잠시 뒤 모두 부드럽게 원래대로 돌아오게 해 줘.
바뀌는 동안 버튼 크기를 그대로 두어 아무것도 밀리지 않게 하고, 복사된 상태를 스크린 리더에 알려 줘.

드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.

[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.

입력란에 포커스가 가거나 값이 들어가면, 플레이스홀더 라벨이 위로 올라가며 작아집니다.

[적용할 곳]에 플로팅 라벨(Floating Label)을 넣어 줘. 플로트 라벨(float label), 애니메이티드 플레이스홀더(animated placeholder)라고도 불러.
입력란에 포커스가 가거나 값이 있으면, 안에 있던 라벨이 부드럽고 빠르게 위로 미끄러지며 작아져 입력란 위쪽 가장자리에 걸치고, 입력란이 비어 있고 포커스도 없을 때만 다시 내려오게 해 줘.
입력란과 연결된 진짜 라벨로 유지하고, 입력란 높이가 바뀌지 않게 해서 폼이 밀리지 않게 해 줘.

하트 아이콘을 클릭하면 색이 채워지며 작은 입자가 터지거나 두근거립니다.

[적용할 곳]에 좋아요 / 하트 버스트(Like / Heart Burst) 애니메이션을 넣어 줘. 하트 애니메이션(heart animation), 즐겨찾기 토글(favorite toggle)이라고도 불러.
좋아요를 누르면 하트가 색으로 채워지며 통통 튀듯 커지고, 링과 작은 점들이 바깥으로 터졌다가 사라지게 해 줘. 전체적으로 빠르고 경쾌하게, 좋아요를 취소하면 하트만 조용히 비워지게.
눌림 상태를 가진 진짜 토글 버튼으로 만들고, 버스트는 켤 때만 재생해 줘.

항목을 잠시 누르고 있으면 추가 동작이나 진행 채움이 실행됩니다.

[적용할 곳]에 길게 누르기(Long Press) 인터랙션을 넣어 줘. 프레스 앤 홀드(press and hold), 터치 앤 홀드(touch and hold)라고도 불러.
누르고 있는 동안 항목이 살짝 눌려 들어가고 진행 채움이 일정한 속도로 가로질러 차오르게 해 줘. 다 차면 톡 튀어 돌아오며 메뉴를 열고, 중간에 손을 떼면 취소되고 채움이 초기화되게.
키보드와 스크린 리더 사용자도 같은 동작에 닿을 수 있는 다른 방법을 주고, 길게 누를 때 텍스트가 선택되거나 브라우저 기본 컨텍스트 메뉴가 뜨지 않게 해 줘.

새 알림이 오면 숫자 배지가 톡 튀어나오거나 통통 튀거나 두근거립니다.

[적용할 곳]에 알림 배지 바운스(Notification Badge Bounce) 애니메이션을 넣어 줘. 배지 팝(badge pop), 핑(ping)이라고도 불러.
새 알림이 오면 숫자 배지가 없던 자리에서 톡 튀어나와 빠르고 탄력 있게 두어 번 튀다가 자리 잡고, 그동안 부드러운 링이 한 번 퍼져 나가게 해 줘.
반복하지 말고 새 알림마다 한 번만 재생하고, 바뀐 숫자를 스크린 리더가 읽어 주게 해 줘.

비밀번호를 보이거나 숨길 때 눈 아이콘이 뜬 눈과 사선이 그어진 눈으로 바뀝니다.

[적용할 곳]에 비밀번호 보기 토글(Password Reveal Toggle)을 넣어 줘. 비밀번호 보이기/숨기기(show/hide password), 눈 아이콘 토글(eye icon toggle)이라고도 불러.
눈을 누르면 사선이 빠르게 지워지면서 가려진 점들이 실제 글자로 크로스페이드되고, 다시 누르면 사선이 다시 그어지며 글자가 가려지게 해 줘. 부드럽고 빠르게, 튕김 없이.
글자가 튀지 않게 입력란 너비를 고정하고, 토글은 비밀번호가 보이는지 레이블로 알려 주는 진짜 버튼으로 만들어 줘.

텍스트가 스크롤로 화면에 들어오면 포인터 화살표가 단어 둘레에 강조 상자를 그립니다.

[적용할 곳]에 포인터 하이라이트(Pointer Highlight) 효과를 넣어 줘.
텍스트가 스크롤로 화면에 들어오면 핵심 단어 둘레에 상자가 왼쪽에서 오른쪽으로 그려지고, 작은 포인터 화살표가 그 모서리를 따라 움직이게 해 줘. 부드럽고 일정하게, 누가 손으로 단어에 표시하는 것처럼.
처음 화면에 들어올 때 한 번만 텍스트를 밀어내지 않고 그리고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 상자를 바로 보여 줘.

누르는 동안 요소가 살짝 작아지고, 손을 떼면 탄력 있게 돌아옵니다.

[적용할 곳]에 프레스(Press (Button Tap Scale)) 효과를 넣어 줘. 탭 피드백(tap feedback), 프레스 상태(press state)라고도 불러.
누르는 동안 요소가 살짝 작아지고 약간 어두워졌다가, 손을 떼면 작게 튕기며 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
키보드로 누를 때와 터치할 때도 똑같이 반응하게 하고, 주변 레이아웃이 밀리지 않게 해 줘.

목록을 아래로 당기면 스피너가 나타나고, 손을 떼면 콘텐츠를 다시 불러옵니다.

[적용할 곳]에 당겨서 새로고침(Pull to Refresh) 인터랙션을 넣어 줘. 스와이프 투 리프레시(swipe to refresh)라고도 불러.
목록을 맨 위에서 아래로 당기면 약간의 저항감을 주며 손가락을 따라오고, 당기는 만큼 도는 스피너가 드러나게 해 줘. 손을 떼면 콘텐츠를 다시 불러오는 동안 스피너가 계속 돌다가, 끝나면 목록이 부드럽게 다시 올라가게.
목록이 이미 맨 위까지 스크롤된 상태에서만 시작하고, 키보드와 스크린 리더 사용자를 위해 일반 새로고침 버튼도 함께 둬.

클릭하거나 탭한 바로 그 지점에서 둥근 물결이 퍼지며 사라집니다.

[적용할 곳]에 리플(Ripple) 효과를 넣어 줘. 머티리얼 리플(material ripple), 잉크 리플(ink ripple)이라고도 불러.
클릭하거나 탭할 때마다 누른 바로 그 지점에서 부드러운 원형 물결이 요소를 덮을 때까지 퍼지며 점점 옅어지게 해 줘. 빠르고 가볍게.
물결은 요소 모양대로 잘라 내고, 빠르게 연달아 누르면 각각 새 물결이 시작되게 하고, 키보드로 누를 때는 가운데에서 시작해 줘.

원과 체크 표시가 스스로 그려지며 작업이 성공했음을 알립니다.

[적용할 곳]에 석세스 체크마크(Success Checkmark) 애니메이션을 넣어 줘. 애니메이션 성공 체크(animated success tick)라고도 불러.
원이 부드러운 한 획으로 그려진 다음 그 안에 체크 표시가 그려지고, 표시 전체가 작고 부드럽게 톡 튀게 해 줘. 차분하고 확신 있게.
작업이 성공했을 때 한 번만 재생하고, 스크린 리더가 읽어 줄 수 있는 텍스트 메시지를 함께 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 표시를 바로 보여 줘.

목록 행을 옆으로 밀면 삭제나 보관 같은 동작 버튼이 드러납니다.

[적용할 곳]에 스와이프 삭제(Swipe to Delete) 인터랙션을 넣어 줘. 스와이프 액션(swipe actions), 스와이프 투 리빌(swipe to reveal)이라고도 불러.
행을 옆으로 끌면 손가락을 그대로 따라 움직이며 뒤에 있는 보관·삭제 같은 동작 버튼이 드러나고, 버튼이 다 보이면 멈추게 해 줘. 손을 떼면 튕김 없이 부드럽게 제자리로 미끄러지게.
가로로 밀 때도 세로 스크롤이 되게 하고, 스와이프하지 않아도 키보드와 스크린 리더로 같은 동작을 할 수 있게 해 줘.

둥근 손잡이가 트랙을 따라 미끄러지고, 꺼짐과 켜짐에 따라 트랙 색이 바뀝니다.

[적용할 곳]에 토글 스위치(Toggle Switch) 애니메이션을 넣어 줘. 스위치(switch)라고도 불러.
켜고 끌 때 둥근 손잡이가 트랙 반대쪽 끝까지 부드럽게 미끄러지고, 그와 함께 트랙 색이 바뀌게 해 줘. 빠르고 또렷하게, 튕김 없이.
키보드로도 작동하는 진짜 접근성 있는 스위치(checked 상태를 가진 role="switch")로 만들어 줘.