Success Checkmark (석세스 체크마크)

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

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

대시 오프셋을 애니메이션해 SVG 선이 경로를 따라 그려지는 것처럼 보여 줍니다.

[적용할 곳]에 라인 드로잉(Line Drawing) 애니메이션을 넣어 줘. 패스 드로잉(path drawing), 셀프 드로잉 SVG(self-drawing SVG)라고도 불러.
각 선이 경로를 따라 처음부터 끝까지 부드럽게 저절로 그려지는 것처럼 보이고, 체크 표시 같은 두 번째 선은 첫 번째 선 바로 뒤에 이어지게 해 줘.
반복하지 말고 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 다 그려진 선을 보여 줘.

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

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

호가 고리를 따라 늘어나며 완료된 비율을 보여 줍니다.

[적용할 곳]에 프로그레스 링(Progress Ring)을 넣어 줘. 서큘러 프로그레스(circular progress), 레이디얼 프로그레스(radial progress)라고도 불러.
맨 위에서 시작한 호가 고리를 따라 시계 방향으로 늘어나며 완료 비율을 보여 주고, 멈출 때는 부드럽게 감속하면서 가운데 숫자도 함께 올라가게 해 줘.
호와 숫자가 서로 맞게 움직이게 하고, 값은 올바른 프로그레스 바 시맨틱으로 스크린 리더에 전달해 줘.

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

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

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

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

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

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