ZeroTool Workbench

Cubic Bezier 생성기

CSS cubic-bezier() 이징 곡선 시각 편집기. 컨트롤 포인트를 드래그하여 미세 조정하고 애니메이션을 실시간 미리보며 CSS / SCSS / Tailwind 코드를 출력. 100% 브라우저 동작.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요
프리셋
곡선 편집기

두 개의 채워진 원을 드래그하세요. 숫자가 실시간 갱신됩니다.

애니메이션 미리보기
밀리초
P1
P2
출력 
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

관련 도구

CSS Clip-Path 생성기 CSS clip-path 도형을 시각적으로 생성. 핸들을 드래그하여 폴리곤·원·타원·인셋을 만들고 육각형·별 등 5가지 프리셋 제공. 실시간 미리보기로 즉시 CSS 복사. 무료 온라인 도구. Glassmorphism CSS 생성기 글래스모피즘 CSS 효과를 시각적으로 생성. 블러, 채도, 배경 투명도, 테두리, 모서리 반경, 그림자를 실시간 미리보기로 조정. backdrop-filter + -webkit-backdrop-filter 지원. 100% 클라이언트 처리. CSS 필터 생성기 CSS filter 효과를 시각적으로 생성. blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia를 슬라이더로 조정. 커스텀 이미지 업로드로 실시간 미리보기. 무료 온라인 도구. UUID 생성기 즉시 v4 UUID 생성 — 단건 또는 일괄 생성. 색상 변환기 HEX, RGB, HSL 형식 간 색상 변환. 실시간 색상 미리보기. 정규식 테스터 매치 하이라이트와 캡처 그룹 세부 정보로 정규식을 실시간 테스트.

커스텀 cubic-bezier가 필요한 순간

linear / ease / ease-in / ease-out / ease-in-out 다섯 키워드로 일상적인 케이스는 대부분 충분합니다. 다음과 같을 때 커스텀 cubic-bezier가 필요합니다:

  • 디자인 시스템에 모션 언어가 정의되어 있을 때 — Material Design 표준 곡선 (0.4, 0, 0.2, 1), iOS 자연 이징, Tailwind의 ease-in-out.
  • 애니메이션에 overshoot나 anticipation이 필요할 때 — 모달 팝업, 드로어 드래그, 버튼 누름 피드백.
  • Figma 또는 After Effects의 타이밍 곡선을 프로덕션 빌드와 정확히 일치시키고 싶을 때.

한눈에 곡선 읽기

X축은 정규화된 시간(시작 0, 종료 1), Y축은 애니메이션 진행도. 대각선 그대로면 linear. 곡선이 대각선 아래로 부풀면 처음에는 빠르고 끝에서 부드러워지는 ease-in-out 느낌. 위로 부풀면 출발이 빠르고 천천히 도착하는 ease-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 표준)좌우 대칭, 중립적인 느낌. 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)부드러운 감속으로 물리 관성처럼 느껴진다.

개인정보 처리

편집기는 모두 브라우저 안에서 동작합니다. 곡선 계산, 애니메이션 미리보기, 복사 동작은 전부 기기에서 처리되며, 컨트롤 포인트 값·시간·생성된 CSS는 서버로 전송되지 않습니다.

관련 도구

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으로 한 번에 리셋할 수 있습니다.