cubic-bezier 이징 생성기 — CSS 애니메이션을 더 자연스럽게
웹 애니메이션의 완성도는 "얼마나 움직이는가"보다 "어떤 속도 곡선으로 움직이는가"에서 크게 갈립니다. CSS의 transition과 animation은 타이밍 함수로 속도 변화를 제어하는데, ease·linear 같은 키워드만으로는 표현이 한정적입니다. 이때 cubic-bezier() 함수를 사용하면 두 개의 제어점만으로 가속·감속·튕김 같은 미세한 움직임까지 자유롭게 설계할 수 있습니다. 이 베지어 곡선 CSS 생성기는 네 개의 숫자를 입력하거나 프리셋을 고르면 즉시 코드와 곡선 미리보기를 만들어, 복사해서 바로 프로젝트에 붙여넣을 수 있게 도와줍니다.
cubic-bezier의 네 숫자가 의미하는 것
cubic-bezier(x1, y1, x2, y2)의 네 값은 베지어 곡선을 정의하는 두 제어점 P1(x1, y1)과 P2(x2, y2)입니다. 곡선의 시작점은 항상 (0, 0), 끝점은 항상 (1, 1)로 고정되어 있습니다. 가로(x)축은 정규화된 시간(0이 시작, 1이 끝)을 뜻하고, 세로(y)축은 애니메이션의 진행 비율을 뜻합니다. 곡선이 가파른 구간에서는 빠르게, 완만한 구간에서는 느리게 움직입니다. 시간축인 x1, x2는 반드시 0과 1 사이여야 하지만, y1과 y2는 0보다 작거나 1보다 커도 되며, 그렇게 하면 목표를 잠깐 지나쳤다가 돌아오는 오버슈트·바운스 효과가 만들어집니다.
대표 프리셋과 표준 값
CSS 명세에 정의된 키워드의 실제 cubic-bezier 값은 다음과 같습니다. 이 값들은 그대로 외워 두면 빠르게 쓸 수 있습니다.
- ease → cubic-bezier(0.25, 0.1, 0.25, 1) — 기본값, 자연스러운 가속·감속
- linear → cubic-bezier(0, 0, 1, 1) — 일정한 속도(등속)
- ease-in → cubic-bezier(0.42, 0, 1, 1) — 천천히 시작해 빨라짐
- ease-out → cubic-bezier(0, 0, 0.58, 1) — 빠르게 시작해 천천히 멈춤
- ease-in-out → cubic-bezier(0.42, 0, 0.58, 1) — 양끝이 부드러움
여기에 더해 y 값이 1을 넘거나 음수가 되는 back·탄성 프리셋을 제공해, 버튼 팝업이나 모달 등장처럼 살짝 튕기는 인터랙션도 손쉽게 만들 수 있습니다.
이 도구 활용법
- 프리셋을 먼저 골라 기준 곡선을 확인한 뒤, x1~y2 값을 미세 조정해 원하는 느낌을 찾으세요.
- 캔버스의 파란 제어점을 직접 드래그하면 숫자가 자동 갱신되고 코드도 실시간으로 바뀝니다.
- 오른쪽 데모 공이 현재 이징으로 좌우로 움직이므로 실제 체감 속도를 확인할 수 있습니다.
- '복사하기'를 누르면
transition에 바로 넣을 수 있는 한 줄 코드가 클립보드에 담깁니다.
참고로 이 미리보기는 브라우저의 실제 렌더링과 거의 동일한 베지어 보간을 사용하지만, 곡선 형태와 실제 프레임 타이밍은 화면 주사율·GPU에 따라 미세하게 달라질 수 있으니 최종 확인은 실제 환경에서 하시길 권장합니다.
자주 묻는 질문 (FAQ)
Q. cubic-bezier()는 어떻게 사용하나요?
A. transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);처럼 타이밍 함수 자리에 넣습니다. 이 도구가 만든 코드를 그대로 복사해 붙여넣으면 됩니다.
Q. cubic-bezier의 네 숫자는 무슨 의미인가요?
A. 두 제어점 P1(x1,y1), P2(x2,y2)입니다. 시작점 (0,0), 끝점 (1,1)은 고정이며 x는 시간, y는 진행 비율을 뜻합니다.
Q. ease, ease-in-out 같은 키워드의 cubic-bezier 값은 무엇인가요?
A. ease는 (0.25,0.1,0.25,1), linear는 (0,0,1,1), ease-in은 (0.42,0,1,1), ease-out은 (0,0,0.58,1), ease-in-out은 (0.42,0,0.58,1)입니다.
Q. y 값이 1을 넘으면 어떻게 되나요?
A. 애니메이션이 목표를 잠깐 지나쳤다가 돌아오는 오버슈트·바운스 효과가 납니다. 탄성 인터랙션에 자주 쓰입니다.