CSS 큐빅 베지어 생성기

CSS 큐빅 베지어 생성기란?

CSS 큐빅 베지어 생성기는 CSS 전환·애니메이션이 사용하는 이징 함수를 시각적으로 편집하는 무료 도구로, 프런트엔드 개발자와 모션 디자이너를 위해 만들어졌습니다. cubic-bezier 모드에서는 두 제어점을 드래그하거나 입력해 곡선을 만듭니다. x 값은 합법 범위인 0~1에 머물고, y 값은 1을 넘거나 0보다 작아져 오버슈트와 예비 동작을 만들 수 있습니다. steps() 모드는 계단식 타이밍을 위한 것으로, 단계 수를 조절하고 jump 항(jump-start, jump-end, jump-none, jump-both)을 고를 수 있으며 step-start·step-end는 steps(1, …)에 해당합니다. 실시간 애니메이션 미리보기는 설정한 길이 동안 움직이고 확대되는 상자 위에서 현재 이징을 재생하고, 아무 프리셋이나 고스트 곡선으로 겹쳐 비교할 수 있으며, 기존 cubic-bezier()·steps() 문자열을 가져올 수 있습니다. 정확한 선언을 복사해 transition-timing-function이나 animation-timing-function에 사용하세요.

CSS 큐빅 베지어 생성기 사용법

1. 상단에서 cubic-bezier() 또는 steps() 모드를 고르거나, 설정을 열어 ease, ease-in-out, linear 같은 프리셋을 시작점으로 삼습니다.
2. cubic-bezier 모드에서는 그래프의 두 핸들을 드래그하거나 x1·y1·x2·y2 값을 정확히 입력합니다. 오버슈트를 원하면 y를 1보다 크게 밀어 보세요.
3. steps() 모드에서는 단계 수를 정하고 jump 항(jump-start, jump-end, jump-none, jump-both)을 골라 계단을 그립니다.
4. 재생을 눌러 움직이고 확대되는 상자에서 실시간 애니메이션을 실행하고, 초 단위 길이를 조절해 타이밍을 느껴 보세요.
5. 설정에서 비교 곡선을 골라 프리셋을 같은 그래프에 고스트로 겹치거나, 값을 가져오기에 붙여넣고 적용하세요.
6. 생성된 cubic-bezier() 또는 steps() 값을 복사해 transition-timing-function이나 animation-timing-function에 붙여넣습니다.

예시

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

steps 모드, N 4, jump-end

steps(4, jump-end)

자주 묻는 질문

cubic-bezier의 네 숫자는 무슨 뜻인가요?

두 제어점의 좌표입니다. 첫 점은 x1, y1이고 두 번째 점은 x2, y2입니다. 곡선은 항상 (0,0)에서 시작해 (1,1)에서 끝나며, 제어점이 그 사이를 휘게 합니다. 이것이 애니메이션되는 속성이 시간에 따라 얼마나 빨라지고 느려지는지를 결정합니다.

steps() 모드는 어디에 쓰나요?

steps()는 부드럽게 보간하는 대신 고정된 개수의 값 사이를 건너뜁니다 — 스프라이트 애니메이션, 딸깍이는 카운터, 프레임 단위 효과에 유용합니다. 단계 수와 jump 항(jump-start, jump-end, jump-none, jump-both)을 설정하세요. step-start는 steps(1, jump-start), step-end는 steps(1, jump-end)와 같습니다.

실시간 애니메이션 미리보기는 어떻게 작동하나요?

재생을 누르면 상자가 현재 이징으로 트랙을 가로질러 움직이고 확대되며 앞뒤로 반복합니다. 초 단위 길이를 바꿔 느리거나 빠르게 할 수 있습니다. 순수 CSS 애니메이션을 사용하며 여러분의 cubic-bezier()나 steps() 값을 타이밍 함수로 씁니다.

기존 이징 값을 가져올 수 있나요?

네. cubic-bezier(...)나 steps(...) 값, 또는 ease-in-out, step-start, step-end 같은 키워드를 가져오기 칸에 붙여넣고 적용하세요. 에디터가 이를 제어점이나 단계 설정으로 다시 해석합니다.

제 데이터가 서버로 전송되나요?

아니요. 에디터 전체가 자바스크립트로 브라우저 안에서 실행됩니다 — 제어점과 곡선이 로컬에서 계산되고 업로드되지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.