움직임을 넣기 전에 정할 7가지
UI 애니메이션 속도와 easing은 어떻게 정해야 하나요? 버튼 반응은 100~150ms, 작은 요소 등장은 150~250ms, 화면 전환은 250~400ms로 하고 등장은 ease-out, 퇴장은 ease-in을 씁니다.
애니메이션은 넣을지 말지부터 정합니다. 하루에 수십 번 보는 동작에 효과를 넣으면 금방 거슬립니다.
이렇게 씁니다
- 먼저 묻습니다. 이 움직임이 "어디서 와서 어디로 갔는지"를 알려 주는가? 아니라면 뺍니다.
- 하루 수십 번 쓰는 동작(탭 전환, 목록 스크롤)은 짧게 또는 없이. 가끔 일어나는 일(첫 완료, 결제 성공)만 크게.
- 움직이는 속성은 위치(transform)와 투명도(opacity)만 씁니다. 크기나 여백을 움직이면 화면이 버벅입니다.
- 길이 기준: 버튼 반응 100~150ms, 작은 요소 등장 150~250ms, 화면 전환 250~400ms. 400ms를 넘기면 느리다고 느낍니다.
- 곡선 기준: 들어올 때는 감속(ease-out), 나갈 때는 가속(ease-in), 손으로 끌었다 놓는 동작은 스프링.
- 중간에 끊을 수 있어야 합니다. 열리는 도중 닫기를 누르면 그 자리에서 되돌아가야 합니다.
- 기기에서 "동작 줄이기"를 켠 사람에게는 이동 대신 페이드만 보여 줍니다.
복사해서 쓰는 프롬프트
모션 규칙 붙이기
아래 규칙으로 이 화면의 애니메이션을 정리해 줘. - transform과 opacity만 애니메이션. width, height, top, left는 움직이지 마. - 버튼 눌림 120ms, 작은 요소 등장 200ms ease-out, 화면 전환 300ms. - 자주 쓰는 동작(탭 전환, 목록)은 효과를 최소로. - 열리는 도중에 닫으면 그 자리에서 되돌아가게(중간 취소 가능). - prefers-reduced-motion이 켜져 있으면 이동 없이 opacity 페이드만.