Ripple (리플)

마우스를 올리면 색이 있는 원이 가운데에서 커지거나 가운데로 줄어들며 요소를 채웁니다.

[적용할 곳]에 레이디얼 필(Radial Fill) 호버 효과를 넣어 줘. 서클 익스팬드(circle expand)라고도 불러.
새 색의 원이 가운데에서 부드럽게 커져 요소를 가득 채우고, 포인터가 벗어나면 다시 가운데로 줄어들게 해 줘. 그동안 라벨 색도 읽히도록 바꿔 주고.
원은 요소 모양 안으로 잘라 넣고 라벨은 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

클릭한 지점에서 퍼져 나가는 원 안으로 새 화면이 드러납니다.

[적용할 곳]에 서큘러 리빌(Circular Reveal) 전환을 넣어 줘. 클립 패스 원 확장(clip-path circle expand), 테마 전환 리빌(theme toggle reveal)이라고도 불러.
누른 컨트롤에서 원이 바깥으로 커지며 그 안에 새 화면이 드러나 전체 영역을 덮게 해 줘. 부드럽고 일정하게, 시작과 끝은 완만하게.
원은 컨트롤을 누른 바로 그 자리에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 원 없이 바로 바뀌게 해 줘.

동심원이 중심점에서 바깥으로 퍼져 나가며 사라집니다.

[적용할 곳]에 리플 링(Ripple Rings) 효과를 넣어 줘. 배경 리플(background ripple), 동심원 물결(concentric ripples)이라고도 불러.
고리가 중심점에서 바깥으로 계속 퍼져 나가며 커질수록 사라지게 하고, 일정한 간격으로 하나씩 이어지게 해 줘. 느리고 꾸준하게.
가운데 요소는 제자리에 가만히 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.

반투명 오버레이가 요소에 색을 덧입혀 포인터가 올라가 있음을 보여 줍니다.

[적용할 곳]에 호버 스테이트 레이어(Hover State Layer)를 넣어 줘. 호버 스테이트(hover state), 스테이트 레이어(state layer), 호버 오버레이(hover overlay)라고도 불러.
포인터가 올라가 있는 동안 콘텐츠 색의 옅은 반투명 오버레이가 요소 위에 빠르게 나타나고, 벗어나면 사라지게 해 줘.
대비가 유지되도록 옅게 두고, 포커스와 눌림 상태에도 같은 레이어 방식을 써 줘.

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

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

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

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

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

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