큐빅 베지어 편집기 완벽 가이드
CSS 애니메이션과 트랜지션에서 움직임의 속도 변화를 결정하는 것이 바로 이징 함수(easing function)입니다. transition-timing-function이나 animation-timing-function에 사용하는 cubic-bezier(x1, y1, x2, y2) 값은 시작점(0,0)과 끝점(1,1)을 고정한 상태에서 두 개의 제어점(P1, P2)으로 곡선의 모양을 조절하는 3차 베지어 곡선입니다. 이 도구는 캔버스 위에서 두 제어점을 직접 마우스나 터치로 드래그하면서 곡선의 모양이 실시간으로 바뀌는 것을 보고, 동시에 하단의 데모 박스가 그 곡선을 따라 움직이는 모습을 눈으로 확인할 수 있도록 만들어졌습니다.
제어점의 x 좌표는 항상 0과 1 사이로 제한됩니다. 이는 시간축 상에서 순서가 뒤바뀌지 않도록 하기 위한 CSS 명세의 규칙입니다. 반면 y 좌표는 0보다 작거나 1보다 큰 값도 허용되는데, 이 경우 애니메이션이 목표 지점을 살짝 지나쳤다가 되돌아오는 오버슈트(overshoot) 효과, 흔히 "탄성" 또는 "바운스" 느낌을 만들어낼 수 있습니다. 아래 프리셋 버튼 중 "bounce back"을 눌러보면 y값이 1을 넘거나 0보다 작아지는 곡선이 어떤 느낌을 주는지 바로 체험할 수 있습니다.
실무에서는 버튼 호버, 모달 등장, 카드 슬라이드, 로딩 스피너 등 다양한 UI 모션에 이징 곡선을 적용합니다. 기본 제공되는 ease, ease-in, ease-out, ease-in-out은 대부분의 경우 무난하지만, 브랜드만의 고유한 움직임을 만들고 싶다면 직접 제어점을 조정한 커스텀 값을 사용하는 것이 좋습니다. 생성된 cubic-bezier(...) 코드를 복사해서 CSS의 transition이나 animation 속성에 그대로 붙여넣으면 됩니다.
입력한 값과 곡선 상태는 브라우저에 자동 저장되어 다음에 다시 방문해도 이어서 작업할 수 있습니다. 모바일에서도 손가락으로 제어점을 드래그할 수 있도록 터치 이벤트를 지원합니다.
자주 묻는 질문 (FAQ)
Q. cubic-bezier의 x값이 왜 0~1로 제한되나요?
A. x축은 애니메이션이 진행되는 시간을 의미하기 때문에, 시간이 거꾸로 흐르거나 범위를 벗어나면 브라우저가 정상적으로 값을 해석할 수 없습니다. 그래서 CSS 명세에서는 두 제어점의 x값을 반드시 0 이상 1 이하로 제한합니다.
Q. y값이 1보다 크거나 0보다 작으면 어떻게 되나요?
A. y축은 애니메이션의 진행 정도(속도)를 의미하며 범위 제한이 없습니다. 1을 넘으면 목표값을 살짝 초과했다가 돌아오는 오버슈트 효과가 생기고, 0보다 작으면 시작 전에 반대 방향으로 살짝 움직이는 안티시페이션(anticipation) 효과가 생깁니다. 자연스러운 탄성 애니메이션을 만들 때 자주 사용됩니다.
Q. 생성한 코드는 어디에 붙여넣나요?
A. CSS의 transition-timing-function 또는 animation-timing-function 속성 값으로 사용하면 됩니다. 예를 들어 transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);처럼 작성하면 됩니다.