CSS 큐빅 베지어 생성기

CSS 큐빅 베지어 생성기란?

CSS 큐빅 베지어 생성기는 CSS 전환·애니메이션이 사용하는 cubic-bezier() 타이밍 함수를 시각적으로 편집하는 무료 도구로, 프런트엔드 개발자와 모션 디자이너를 위해 만들어졌습니다. ease, linear, ease-in, ease-out, ease-in-out 같은 프리셋을 고르거나 두 제어점을 직접 미세 조정할 수 있습니다. x 값은 사양상 합법 범위인 0~1로 제한되고, y 값은 1을 넘거나 0보다 작아져 오버슈트(지나침)와 예비 동작(앤티시페이션)을 만들 수 있습니다. 미리보기는 단위 정사각형 위에 곡선을 그려 가속과 감속을 한눈에 읽게 해 주고, 정확한 cubic-bezier(x1, y1, x2, y2) 선언이 생성되어 복사할 수 있습니다. 기본 키워드가 너무 평범하게 느껴지고 더 경쾌하거나 탄력 있거나 차분한 모션을 원할 때 사용하세요.

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

1. 설정을 열어 시작 프리셋(ease, linear, ease-in, ease-out, ease-in-out)을 골라 제어점을 초기화합니다.
2. 곡선 미리보기의 둥근 핸들 두 개를 드래그해 이징을 다시 잡거나, x1·y1·x2·y2 칸에 정확한 값을 입력합니다.
3. x1과 x2는 0~1 사이로 유지하고, y1이나 y2를 1보다 크게 또는 0보다 작게 밀어 모션에 오버슈트나 예비 동작을 더합니다.
4. 점선으로 표시된 linear 기준선과 곡선을 비교해 이징이 어떻게 가속·감속하는지 판단합니다.
5. 생성된 cubic-bezier() 값을 복사해 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, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

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

자주 묻는 질문

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

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

왜 x1이나 x2를 1보다 크게 설정할 수 없나요?

CSS 사양은 두 제어점의 x(시간) 좌표가 0~1 안에 머물도록 요구합니다. 그래야 타이밍 함수가 진행도에서 출력으로 가는 유효한 매핑으로 유지됩니다. 이 도구는 x 칸과 드래그 핸들을 자동으로 그 범위로 제한합니다. 다만 y 값은 오버슈트나 예비 동작을 위해 1을 넘거나 0보다 작아질 수 있습니다.

통통 튀거나 탄력 있는 이징은 어떻게 만드나요?

y 값 중 하나를 1보다 크게(끝에서 지나치게) 또는 0보다 작게(시작에서 예비 동작) 밀어 보세요. 예를 들어 cubic-bezier(0.34, 1.56, 0.64, 1)은 자리잡기 전에 살짝 지나쳐, 자바스크립트 없이도 스프링 같은 느낌을 줍니다.

생성된 값은 어디에 쓰나요?

transition-timing-function이나 animation-timing-function의 값으로 붙여넣으세요 — 예: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease나 ease-in-out 같은 키워드를 맞춤 곡선으로 대체합니다.

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

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