거리가 아니라, 곡선입니다.

주니어 때 제가 만든 메뉴 애니메이션을 보고 선배가 물었습니다. “이거 왜 로봇 팔 같지?” 속도는 충분히 빨랐는데 어딘가 어색했죠. 원인은 거리도 시간도 아니라 ‘곡선’이었습니다. 저는 처음부터 끝까지 같은 속도(linear)로 패널을 밀고 있었던 겁니다. 현실에선 그렇게 움직이는 게 없는데요. 그날 이후로 저는 모션을 ‘얼마나 멀리, 얼마나 빨리’가 아니라 ‘어떤 곡선으로’의 문제로 봅니다.

곡선이 정말 그렇게 다른가요?

말로는 안 와닿습니다. ‘재생’을 눌러보세요. 세 점이 똑같은 거리를 가는데, 느낌이 전혀 다릅니다.

linear는 왜 기계처럼 보일까요?

linear는 출발할 때나 도착할 때나 속도가 똑같습니다. 그런데 현실의 물체는 그렇게 안 움직입니다. 엘리베이터도, 던진 공도, 미는 서랍도 멈출 땐 마찰 때문에 천천히 섭니다. 우리 눈과 몸은 그 ‘감속’에 평생 익숙해져 있어서, 끝까지 같은 속도로 ‘툭’ 멈추는 linear를 보면 무의식적으로 어색하다고 느낍니다. 위 데모에서 맨 위 점이 그렇습니다. 빠르지만 살아 있는 느낌은 없죠.

그럼 ease-out은 뭐가 다른가요?

ease-out은 빠르게 출발해서 끝에서 부드럽게 감속합니다. 위 데모의 가운데 점을 보면, 처음엔 훅 나갔다가 도착 지점 근처에서 살짝 미끄러지듯 멈춥니다. 이게 사람 눈에 ‘자연스럽다’고 읽히는 핵심입니다. 저는 메뉴가 열리고, 카드가 떠오르고, 화면이 넘어가는 거의 모든 ‘큰 움직임’에 ease-out을 기본으로 씁니다. 반대로 ease-in(끝에서 가속)은 화면 밖으로 사라지는 요소에만 가끔 씁니다.

spring은 통통 튀던데, 언제 써요?

spring은 목표 지점을 살짝 지나쳤다가 되돌아오는 탄성을 가집니다. 위 데모의 맨 아래 점이 끝에서 한 번 ‘출렁’하는 게 그것입니다. 이 출렁임이 손맛을 줘서, 저는 사용자의 동작에 직접 반응하는 요소에만 씁니다. 버튼을 눌렀을 때, 토글을 켰을 때, 좋아요를 눌렀을 때처럼요. 반대로 화면 전체가 넘어가는 큰 전환에 spring을 쓰면 멀미가 나니 절대 안 씁니다. 효과는 ‘여기 반응했다’는 신호를 강화할 때만 의미가 있습니다.

그럼 시간은 얼마나 줘야 하나요?

지속시간이 곡선만큼 중요합니다. 저는 UI 모션을 대체로 0.2~0.6초 안에 끝냅니다. 호버나 버튼 반응처럼 작은 변화는 0.15~0.25초로 짧게, 패널이 열리거나 화면이 넘어가는 큰 움직임은 0.3~0.5초로 둡니다. 이유는 단순합니다. 모션은 ‘예쁘게 보이는 시간’이 아니라 ‘사용자가 변화를 따라가는 시간’이거든요. 1초가 넘어가면 사람은 감탄이 아니라 ‘느리다’고 느끼고, 다음 동작을 못 하고 기다립니다.

그래서 저는 곡선과 시간을 매번 새로 적지 않고, 사이트 첫머리에 ‘토큰’으로 한 번만 정의해 둡니다. 위 데모의 세 점도 이 토큰을 그대로 씁니다 — 화면마다 이징이 제각각이면 통일감이 깨지니까요.

:root{
  --ease-out:    cubic-bezier(.22, 1, .36, 1);    /* 큰 전환의 기본 — 끝에서 감속 */
  --ease-in:     cubic-bezier(.55, 0, 1, .45);    /* 화면 밖으로 사라질 때만 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 1↑ 오버슈트 = 탄성(버튼·토글) */
  --dur-fast:    .18s;   /* 호버·버튼 반응 */
  --dur-base:    .4s;    /* 패널·카드 */
}
.menu{ transition: transform var(--dur-base) var(--ease-out); }
.btn:active{ transition: transform var(--dur-fast) var(--ease-spring); }
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; }   /* 멀미 배려 */
}

보시다시피 spring은 곡선의 두 번째 값이 1을 넘어(1.56) 목표를 살짝 지나쳤다 돌아옵니다. 그게 데모 맨 아래 점의 ‘출렁’입니다. 토큰으로 묶어 두면 전 화면이 같은 손맛으로 통일됩니다.

모든 걸 움직이면 안 되나요?

안 됩니다. 화면의 모든 게 통통 튀면 아무것도 강조되지 않습니다. 저는 한 화면에서 ‘가장 중요한 하나’의 움직임에만 신경을 몰아주고, 나머지는 조용히 둡니다. 그리고 운영체제에서 ‘동작 줄이기’를 켠 사용자에게는 prefers-reduced-motion 미디어 쿼리로 애니메이션을 끄거나 단순 페이드로 바꿉니다. 전정기관이 예민한 사람에게 큰 움직임은 멋이 아니라 멀미니까요. 위 데모도 동작 줄이기를 켜면 점이 튀지 않고 그냥 이동합니다.

이걸 정리하면 어떤 차이가 날까요?

다른 담당자와의 연결

이징은 모션의 ‘질감’이지만, 그 위아래로 챙겨야 할 게 또 있습니다. 모션 자체를 언제 어디에 넣을지는 모션 담당자의 스크롤 애니메이션 노트에서, 버튼이 ‘눌렸다’를 어떻게 말하는지는 버튼 상태 담당자의 노트에서, 그리고 이 모든 움직임이 끊기지 않게 60fps를 지키는 법은 성능 담당자의 60fps 노트에서 이어집니다. 같은 사이트를 다른 각도에서 만지는 동료들입니다.