Trim (트림)

마우스를 올리면 외곽선이 요소에서 바깥으로 퍼지거나 요소 쪽으로 좁혀집니다.

[적용할 곳]에 아웃라인 익스팬드(Outline Expand) 호버 효과를 넣어 줘.
외곽선이 요소 가장자리에 딱 붙은 채로 시작해 바깥으로 벌어지며 둘레에 작은 틈을 만들고, 호버 중에는 그대로 있다가 포인터가 벗어나면 다시 좁혀지게 해 줘. 부드럽고 빠르게.
요소 크기를 바꾸거나 주변 콘텐츠를 밀지 않는 방식으로 외곽선을 그리고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 테두리 색이 서서히 나타나거나 바뀝니다.

[적용할 곳]에 보더 페이드(Border Fade) 호버 효과를 넣어 줘.
포인터가 요소 위에 있는 동안 테두리가 차분한 색에서 강조색으로 부드럽게 바뀌게 해 줘. 은은하게, 움직임이나 크기 변화 없이.
아무것도 밀리지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 채워진 배경이 비워지고 테두리만 남은 버튼이 됩니다.

[적용할 곳]에 할로우(Hollow) 호버 효과를 넣어 줘. 고스트 필(ghost fill)이라고도 불러.
채워진 배경이 사라지면서 테두리만 남고, 빈 배경에서도 읽히도록 라벨 색이 바뀌게 해 줘. 부드럽고 빠르게.
요소 크기가 변하지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

선이 아래나 위 가장자리에서 미끄러져 들어와 요소에 밑줄이나 윗줄을 긋습니다.

[적용할 곳]에 언더라인 리빌(Underline Reveal) 호버 효과를 넣어 줘. 오버라인 리빌(overline reveal), 리빌(reveal)이라고도 불러.
포인터가 요소 위에 있는 동안 전체 너비의 선이 아래 가장자리 바로 밑에서 위로 미끄러져 제자리에 오고, 벗어나면 다시 아래로 미끄러져 사라지게 해 줘. 빠르고 부드럽게.
선을 가장자리에서 잘라 서서히 나타나거나 늘어나는 대신 미끄러져 나오게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

카드 위에서 포인터가 움직이면 그에 맞춰 카드가 살짝 이동하고 커집니다.

[적용할 곳]에 워블 카드(Wobble Card) 효과를 넣어 줘.
포인터가 카드 위에서 움직이면 카드는 포인터 쪽으로 살짝 움직이고, 안의 콘텐츠는 반대쪽으로 살짝 움직이며 조금 커지면서 부드럽게 따라가게 해 줘. 포인터가 벗어나면 모두 제자리로 돌아와야 해.
움직임은 작게 하고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 꺼 줘.

색 배경이 한쪽 끝에서 쓸려 들어오며 탄력 있게 살짝 넘쳤다가 자리 잡습니다.

[적용할 곳]에 배경 바운스 스윕(Background Bounce Sweep) 호버 효과를 넣어 줘.
새 배경색이 한쪽 끝에서 쓸려 들어와 반대쪽 끝을 탄력 있게 살짝 넘었다가 자리 잡고, 글자색은 잘 읽히도록 바뀌게 해 줘. 포인터가 벗어나면 부드럽게 다시 빠져나가게 해 줘.
글자는 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.