Easing curves, 1959년 Pierre Bézier 자동차 곡선

한 줄로

CSS ease-in-out, cubic-bezier(...) 같은 함수들의 뿌리는 1950년대 프랑스 르노 자동차의 곡선 설계 기법입니다.

어디서 왔나

1959년, 프랑스 르노(Renault) 자동차 회사의 엔지니어 피에르 베지에(Pierre Bézier)가 한 가지 문제를 풀고 있었습니다. 자동차 차체의 부드러운 곡선을 수학적으로 어떻게 정의할 것인가.

당시까지 자동차 디자이너들은 종이에 곡선을 그리고, 엔지니어가 그것을 점 1000개로 분해해 기계가 깎게 했습니다. 베지에는 더 효율적 방법을 찾았습니다. 4개 점만으로 곡선 전체를 정의하는 수학식입니다.

P0 (시작점), P1 (제어점), P2 (제어점), P3 (끝점)

이 4점이 곡선 모양을 완전히 결정합니다. 이 곡선이 3차 베지에 곡선(cubic Bézier)입니다.

베지에의 발표는 자동차 산업뿐 아니라 모든 컴퓨터 그래픽 분야로 퍼졌습니다. 어도비 일러스트레이터, 폰트 디자인, 3D 모델링, CSS 애니메이션 모두 베지에 곡선을 씁니다.

CSS easing의 표준

CSS의 transition-timing-function은 4개 미리 정의된 easing을 제공합니다.

linear: 일정한 속도입니다. 자연스럽지 않습니다.

ease: 살짝 가속, 살짝 감속. 기본값입니다.

ease-in: 천천히 시작, 빠르게 끝납니다.

ease-out: 빠르게 시작, 천천히 끝납니다.

ease-in-out: 천천히 시작, 천천히 끝납니다.

각각이 cubic-bezier(...) 함수로 정의됩니다.

.button { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

이 숫자 4개가 베지에 곡선의 P1, P2입니다 (시작과 끝은 항상 (0,0), (1,1)).

Material Design의 표준 easing

Google이 정의한 표준입니다.

Standard easing cubic-bezier(0.4, 0, 0.2, 1): 가장 흔히 쓰입니다.

Decelerate easing cubic-bezier(0, 0, 0.2, 1): 화면에 들어올 때 씁니다.

Accelerate easing cubic-bezier(0.4, 0, 1, 1): 화면에서 나갈 때 씁니다.

도구

cubic-bezier.com: 시각적으로 베지에 곡선 그려보기.

easings.net: 30가지 미리 정의된 easing 시각화.

바이브 메이커가 챙길 한 가지

linear 트랜지션은 거의 항상 어색합니다. 기본 ease도 시작점으로는 OK지만, 사용자 시야에 들어오는 동작은 ease-out, 사라지는 동작은 ease-in이 자연스럽습니다. 이 두 가지만 바꿔도 UI 품질이 한 단계 올라갑니다.

관련

Disney 12 principles · Spring physics · Microinteraction