cubic-bezier 이징 편집기

ease-out이 거의 항상 정답인 이유

이징을 하나만 외워야 한다면 ease-out입니다. 빠르게 시작해 부드럽게 멈추는 곡선인데, 이유가 있습니다.

사용자가 버튼을 눌렀을 때 화면이 반응하는 속도는 "체감 반응 속도"를 결정합니다. ease-in(느리게 시작)을 쓰면 클릭 후 잠깐 아무 일도 안 일어나는 것처럼 느껴집니다. 실제 지속시간이 같아도 ease-in 애니메이션이 훨씬 굼떠 보입니다. 반대로 ease-out은 즉시 튀어나온 뒤 천천히 자리 잡으므로 즉각 반응한 것처럼 느껴집니다.

지속시간 — 길수록 고급스럽지 않습니다

이징 곡선만큼 중요한 것이 지속시간입니다. 그리고 대부분의 사람이 너무 길게 줍니다. 미리보기의 기본값 800ms는 곡선 차이를 눈으로 보기 위한 값이지, 실무에 쓸 값이 아닙니다.

실제 UI에서는 200~300ms가 기준선입니다. 100ms 아래면 애니메이션이 있었는지도 모르고, 500ms를 넘으면 사용자가 기다리기 시작합니다. 사용자는 그 화면을 하루에 수십 번 봅니다. 처음엔 우아해 보이던 600ms 전환이 열 번째부터는 방해물이 됩니다.

• 100ms 이하 — 색 변화, 아주 작은 상태 변화(체크박스). 사실상 즉시.
• 150~250ms — hover, 버튼 반응, 작은 요소의 등장. 가장 많이 쓰는 구간.
• 250~350ms — 모달, 드롭다운, 카드 펼침. 중간 크기 요소.
• 350~500ms — 전체 화면 전환, 페이지 이동. 이보다 길면 대개 과합니다.
• 움직이는 거리가 멀수록 조금 더 길게. 화면을 가로지르는 요소는 짧은 이동보다 시간이 더 필요합니다.

오버슈트(탄성)를 언제 쓰고 언제 피하나

제어점을 그래프의 위아래 여백으로 끌면 y가 0~1 범위를 벗어납니다. 그러면 목표 지점을 지나쳤다가 되돌아오는 탄성 효과가 납니다. 이 도구가 그래프 위아래에 여백을 둔 이유입니다.

easeOutBack(.34, 1.56, .64, 1)이 대표적입니다. 살짝 튀어나왔다 제자리로 돌아오며 물리적인 무게감을 줍니다.

• 쓸 곳 — 장바구니 담기 확인, 좋아요 하트, 알림 배지 등 "축하"나 "주목"의 성격이 있는 짧은 순간.
• 피할 곳 — 모달, 드롭다운, 툴팁처럼 자주 반복되는 UI. 매번 통통 튀면 금방 질리고 산만합니다.
• 절대 피할 곳 — 크기가 큰 요소. 화면 절반을 차지하는 패널이 튀어나왔다 들어가면 멀미가 납니다.
• 레이아웃을 밀어내는 애니메이션 — 오버슈트로 넘친 만큼 옆 요소가 밀렸다 돌아오면 화면 전체가 흔들립니다.

이징으로 표현할 수 없는 것

cubic-bezier로는 진짜 튕김(bounce)을 만들 수 없습니다. 공이 바닥에 여러 번 통통 튀는 움직임은 곡선이 위아래로 여러 번 꺾여야 하는데, 이 곡선은 그런 모양을 만들 수 없습니다. 오버슈트는 딱 한 번만 가능합니다.

이런 움직임이 필요하면 다른 방법을 써야 합니다.

/* 여러 번 튕김 — cubic-bezier 로는 불가능, keyframes 로 */
@keyframes bounce-in {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(.96); }
  85%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.pop { animation: bounce-in 400ms ease-out both; }

움직임을 원치 않는 사용자가 있습니다

전정기관 장애가 있는 사람에게 화면 움직임은 실제로 어지럼증과 메스꺼움을 일으킵니다. 그래서 운영체제에 "동작 줄이기" 설정이 있고, 브라우저는 이를 prefers-reduced-motion 으로 알려 줍니다.

이 설정을 켠 사용자에게는 애니메이션을 끄거나 아주 짧게 줄여야 합니다. 완전히 없애는 것보다 투명도 변화 정도만 남기는 편이 맥락을 잃지 않아 좋습니다.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}