Cubic Bezier 생성기
CSS cubic-bezier() 이징 곡선 시각 편집기. 컨트롤 포인트를 드래그하여 미세 조정하고 애니메이션을 실시간 미리보며 CSS / SCSS / Tailwind 코드를 출력. 브라우저에서 동작.
- 브라우저에서 처리
- 데이터가 브라우저 밖으로 나가지 않습니다
- 무료 · 회원가입 불필요
WeChat으로 스캔하여 공유
예시·자세한 설명·자주 묻는 질문 실제 출력이 있는 예시, 다른 도구와의 차이, 자주 묻는 질문.
커스텀 cubic-bezier가 필요한 순간
linear / ease / ease-in / ease-out / ease-in-out 다섯 키워드로 일상적인 케이스는 대부분 충분합니다. 다음과 같을 때 커스텀 cubic-bezier가 필요합니다:
- 디자인 시스템에 모션 언어가 정의되어 있을 때 — Material Design 2 표준 곡선
(0.4, 0, 0.2, 1), Material 3의(0.2, 0, 0, 1), Tailwind의ease-in-out. - 애니메이션에 overshoot나 anticipation이 필요할 때 — 모달 팝업, 드로어 드래그, 버튼 누름 피드백.
- Figma 또는 After Effects의 타이밍 곡선을 프로덕션 빌드와 정확히 일치시키고 싶을 때.
한눈에 곡선 읽기
X축은 정규화된 시간(시작 0, 종료 1), Y축은 애니메이션 진행도. 대각선 그대로면 linear. 곡선이 대각선 아래로 처지면 천천히 출발해 끝에서 따라잡는 ease-in 느낌. 위로 부풀면 빠르게 출발해 점점 느려지는 ease-out 느낌. 아래에서 위로 S자를 그리면 ease-in-out입니다. 0 아래로 내려가거나 1을 초과하면 “스프링” 효과가 생기는데, 장식적인 UI에는 어울리지만 기능적인 흐름에서는 리듬을 끊을 수 있습니다.
자주 쓰는 이징 레시피
| 사용 상황 | 추천 곡선 | 이유 |
|---|---|---|
| 페이지/섹션 진입 | cubic-bezier(0, 0, 0.2, 1) (decelerate) | 처음에는 빠르고 끝은 부드럽게 안착해서 최종 상태를 인지하기 쉽다. |
| 페이지/섹션 퇴장 | cubic-bezier(0.4, 0, 1, 1) (accelerate) | 천천히 시작하고 빠르게 사라져서 다음 화면이 경쾌하게 느껴진다. |
| 일반 트랜지션 | cubic-bezier(0.4, 0, 0.2, 1) (Material 2 표준) | 빠르게 가속하고 천천히 감속. hover, focus, 작은 이동에 어울린다. |
| 장난스러운 팝업 | cubic-bezier(0.68, -0.55, 0.265, 1.55) (back ease) | anticipation과 overshoot를 함께 표현. 배지, 토스트, 주의 환기에 적합. |
| 드래그 추적 | cubic-bezier(0.25, 0.46, 0.45, 0.94) | 부드러운 감속으로 물리 관성처럼 느껴진다. |
프리셋 출처
각 프리셋 버튼은 아래 표의 네 숫자를 불러옵니다. 같은 이름이라도 곡선이 다를 수 있어 라벨에 체계와 버전을 적었습니다. Material 3는 Material 2의 표준 곡선을 바꿨고, Apple의 “기본값”도 하나가 아닙니다.
| 프리셋 | 값 | 출처 |
|---|---|---|
| Ease, Ease-In, Ease-Out, Ease-In-Out | (0.25, 0.1, 0.25, 1), (0.42, 0, 1, 1), (0, 0, 0.58, 1), (0.42, 0, 0.58, 1) | CSS 키워드, CSS Easing Functions Level 1 §2.2 |
| Material 2 표준 / 감속 / 가속 | (0.4, 0, 0.2, 1), (0, 0, 0.2, 1), (0.4, 0, 1, 1) | Material Design 2, Speed |
| Material 3 표준 | (0.2, 0, 0, 1) | Material 3 easing tokens (md.sys.motion.easing.standard) |
| Core Animation 기본 | (0.25, 0.1, 0.25, 1) | CAMediaTimingFunctionName.default. CSS ease와 같은 곡선입니다. UIKit 뷰 애니메이션의 기본값은 ease-in-ease-out입니다. |
| Tailwind In-Out | (0.4, 0, 0.2, 1) | Tailwind CSS transition-timing-function (ease-in-out) |
| Back (오버슈트) | (0.68, -0.55, 0.265, 1.55) | 흔히 쓰는 오버슈트 곡선. y가 0 아래, 1 위로 나가서 한 번 당겼다가 끝점을 지나칩니다. |
시간은 거꾸로 갈 수 없으므로 두 제어점의 x는 0~1 안에 있어야 하며 편집기가 자동으로 맞춥니다. y는 이 범위를 벗어나도 되고, Back 프리셋의 오버슈트가 그렇게 만들어집니다.
개인정보 처리
편집기는 모두 브라우저 안에서 동작합니다. 곡선 계산, 애니메이션 미리보기, 복사 동작은 전부 기기에서 처리되며, 컨트롤 포인트 값·시간·생성된 CSS는 서버로 전송되지 않습니다.
관련 도구
- CSS Clip Path 생성기 — 핸들을 드래그해서 편집하는 시각 clip-path 편집기.
- 글래스모피즘 생성기 — 실시간 미리보기가 있는 프로스트 글래스 UI 생성기.
- CSS 필터 생성기 — blur, brightness, hue-rotate 등 필터를 슬라이더로 조정.
FAQ
cubic-bezier 이징 함수란?
CSS cubic-bezier(x1, y1, x2, y2)는 4개의 숫자로 「경과 시간(0~1)」을 「애니메이션 진행도(0~1)」로 매핑하는 곡선을 정의합니다. 곡선의 양 끝은 (0, 0)과 (1, 1)에 고정되며, 조정 가능한 것은 중간의 두 컨트롤 포인트 P1, P2입니다. P1.x와 P2.x는 반드시 [0, 1] 범위 안에 있어야 하지만, P1.y와 P2.y는 0보다 작거나 1보다 클 수 있어서 overshoot와 anticipation을 표현할 수 있습니다.
ease, ease-in, ease-out 키워드와 어떻게 다른가요?
CSS 키워드는 사실 cubic-bezier의 고정된 별칭입니다. ease는 cubic-bezier(0.25, 0.1, 0.25, 1), ease-in-out은 cubic-bezier(0.42, 0, 0.58, 1)입니다. 모양은 4가지뿐. 커스텀 곡선을 사용하면 디자인 시스템 표준(Material / iOS / Tailwind)에 정확히 맞추고, 특정 트랜지션 한 개의 감각만 미세 조정하며, CSS / SCSS / Tailwind 설정 사이에 동일한 값을 재사용할 수 있습니다.
왜 P1.y / P2.y는 0~1 범위를 벗어나도 되나요?
Y가 음수면 anticipation(요소가 먼저 반대 방향으로 「당겨졌다가」 움직임 시작), 1을 넘으면 overshoot(목적지를 지나갔다가 되돌아옴)이 됩니다. 대표적인 back-out 곡선 cubic-bezier(0.68, -0.55, 0.265, 1.55)는 둘 다 사용합니다. X축은 시간이므로 [0, 1] 범위를 유지해야 유효한 CSS 타이밍 함수가 됩니다.
Tailwind CSS에서는 어떻게 사용하나요?
tailwind.config.js의 theme.extend.transitionTimingFunction에 항목을 추가하세요. 예: smooth-out: 'cubic-bezier(0.4, 0, 0.2, 1)'. 그러면 ease-smooth-out 유틸리티 클래스를 사용할 수 있습니다. 이 도구의 Tailwind 출력 모드는 이 스니펫을 그대로 생성해줍니다.
설정이 어딘가에 저장되나요?
컨트롤 포인트 위치, 미리보기 시간, 출력 형식은 ZeroTool 공통 영속화 레이어를 통해 기기의 localStorage에 저장됩니다. 어떤 데이터도 업로드되지 않습니다. 페이지의 Clear 버튼으로 기본 ease-in-out으로 한 번에 리셋할 수 있습니다.