Cubic Bezier 생성기
신규조절점을 드래그해 CSS 이징 곡선을 디자인 — 라이브 미리보기.
Runs entirely in your browser. Nothing is uploaded.
CSS 이징 곡선을 시각적으로 디자인하기
이 cubic-bezier 생성기는 추상적인 cubic-bezier(x1, y1, x2, y2) 값을 눈으로 보고 느낄 수 있는 것으로 바꿔줍니다. 그래프의 두 제어점 핸들을 드래그해 가속 곡선을 만들고, 그 정확한 타이밍으로 움직이는 실시간 미리보기를 확인한 다음, CSS 트랜지션과 애니메이션에 바로 쓸 수 있는 값을 복사하세요. 완전한 이징 곡선 편집기와 cubic-bezier 시각화 도구가 하나로 합쳐져, 브라우저 안에서 모두 동작합니다 — 설치 불필요, 계정 불필요.
모든 곡선은 (0,0)에서 (1,1)까지 이어집니다. 가로축은 시간이고 세로축은 진행도입니다. 초반에 가파르게 올라가는 곡선은 빠른 시작을, 끝 부분에서 평탄해지는 곡선은 부드러운 마무리를 의미합니다. 네 개의 입력 칸에 정확한 숫자를 입력하거나, 핸들을 드래그하거나, 기존 cubic-bezier() 값을 붙여넣어 불러와 조정하세요. 핸들을 움직일 때마다 결과가 실시간으로 업데이트됩니다.
30개 이상의 프리셋: CSS 키워드와 명명된 이징 곡선
프리셋 바는 경쟁 도구들이 보통 따로 나눠 놓는 두 가지를 하나로 합쳐 줍니다. CSS 다섯 키워드 — linear, ease, ease-in, ease-out, ease-in-out — 와 함께 easings.net이 알린 명명된 이징 곡선 전체 카탈로그를 제공합니다: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back — 각각 In, Out, In-Out 변형으로. 즉 easeInOutCubic, easeOutQuart, easeOutBack 등이 클릭 한 번으로 이미 css cubic-bezier 값으로 변환된 채 사용 가능합니다.
각 프리셋에는 작은 곡선 썸네일이 표시되어 한눈에 형태를 알아볼 수 있으며, 클릭하면 편집기에 바로 불러와져 세부 조정을 할 수 있습니다. Easings.net은 이름과 정적 이미지만 나열할 뿐 편집이나 내보내기는 할 수 없습니다. cubic-bezier.com은 CSS 다섯 키워드는 보여주지만 전체 Penner 세트는 없습니다. 이 도구는 편집 기능과 함께 두 가지 모두를 한 곳에서 제공합니다.
오버슈트, 바운스, 예비 동작
cubic-bezier의 y값은 0–1로 제한되지 않습니다. 핸들을 박스 위로 밀면 애니메이션이 목표를 지나쳤다가 자리를 잡습니다 — easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)의 스프링 같은 느낌입니다. 핸들을 박스 아래로 당기면 요소가 먼저 뒤로 물러났다가 나아갑니다. 편집기 그래프는 단위 박스 밖으로 확장되어 있어 오버슈트 영역으로 드래그하고 결과를 즉시 확인할 수 있습니다.
Chrome DevTools에는 내장 cubic-bezier 편집기가 있지만 핸들을 0–1 박스 안에 고정하기 때문에 오버슈트나 예비 동작 효과를 만들 수 없습니다. Firefox DevTools도 같은 제한이 있습니다. 두 도구 모두 여기서 제공하는 명명된 프리셋 카탈로그와 내보내기 옵션이 없습니다. 오버슈트가 필요하다면 이 도구는 이를 실제로 지원하는 몇 안 되는 곳 중 하나입니다.
다른 cubic-bezier 도구와의 비교
Lea Verou의 cubic-bezier.com은 드래그-프리뷰 방식을 대중화한 참고 도구로, 빠른 CSS 곡선 생성에 여전히 훌륭합니다. 하지만 GSAP 내보내기, JavaScript 이징 함수 출력, 비교 모드, Penner 프리셋 라이브러리가 없고 모바일에서는 인터페이스가 제대로 동작하지 않습니다. Easings.net은 읽기 전용 참조로 — 명명된 곡선을 선택하면 값을 보여주지만 편집기도, 조정 기능도 없습니다.
Chrome과 Firefox DevTools는 브라우저 인스펙터 안에 가벼운 cubic-bezier 편집기를 포함하고 있어 DevTools를 열어둔 상태에서는 편리합니다. 단점으로는 DevTools 없이 사용 불가, 핸들이 0–1로 고정(오버슈트 없음), GSAP나 JS 코드 내보내기 불가, 모바일에서는 전혀 사용할 수 없습니다. UtiloKit의 생성기는 대화형 편집기, 프리셋 라이브러리, 비교 도구, 세 가지 내보내기 형식을 어떤 기기에서도 작동하는 한 페이지에 통합했습니다.
실시간 미리보기와 나란히 비교
재생 버튼을 누르면 데모 요소가 내 곡선으로 루프 재생되어 숫자가 아닌 실제 움직임을 판단할 수 있습니다. 데모를 translate, scale, opacity 사이에서 전환하고, 실제 애니메이션에 맞게 지속 시간을 조정하세요. 비교를 켜면 두 번째 곡선을 첫 번째 곡선 옆에 나란히 배치할 수 있어, 실제 반영 전에 올바른 트랜지션 타이밍 함수를 고르기에 최적입니다.
지속 시간 슬라이더는 미리보기 속도를 200ms에서 3초까지 제어하므로 같은 곡선이 다른 속도에서 어떻게 느껴지는지 테스트할 수 있습니다. 슬로우 모션 미리보기는 300ms에서는 보이지 않는 문제 — 시작 부분의 버벅임 같은 — 를 자주 드러냅니다. cubic-bezier.com을 포함한 대부분의 다른 도구들은 고정된 한 가지 속도로만 미리보기를 제공하며 나란히 비교 기능은 없습니다.
CSS, GSAP, JavaScript로 내보내기 — 무료
사용하는 스택에 필요한 것을 복사하세요. CSS 탭은 transition 한 줄 단축 표기와 전체 @keyframes 애니메이션 블록을 모두 제공합니다. GSAP 탭은 GSAP 애니메이션이 곡선과 정확히 일치하도록 CustomEase.create() 호출을 출력합니다. JS 탭은 독립 실행형 javascript cubic-bezier 이징 함수를 생성합니다 — 의존성 없이 requestAnimationFrame 이나 어떤 트윈에도 붙여 쓸 수 있는 Newton-Raphson 솔버입니다.
마음에 드는 곡선을 찾았나요? 공유하세요. 도구가 네 개의 값을 페이지 URL에 인코딩하므로 링크 하나로 어떤 기기에서도 정확한 이징을 재현할 수 있습니다. 모든 것이 브라우저에서 실행되며 — 업로드, 저장, 로그 기록이 전혀 없고 — 회원 가입 없이 완전히 무료입니다.
Frequently asked questions
CSS에서 cubic-bezier란 무엇인가요?
cubic-bezier()는 베지어 곡선으로 정의된 이징(타이밍) 함수입니다. transition-timing-function이나 animation-timing-function에서 cubic-bezier(x1, y1, x2, y2)로 씁니다. 두 개의 제어점이 곡선을 구부려 애니메이션이 일정한 속도 대신 가속하고 감속하게 만듭니다. 예를 들어 cubic-bezier(0.25, 0.1, 0.25, 1)은 CSS 키워드 'ease'와 정확히 같은 이징입니다.
cubic-bezier의 네 값은 어떻게 작동하나요?
cubic-bezier(x1, y1, x2, y2)는 두 개의 제어점을 지정합니다: P1 = (x1, y1)이 곡선의 시작을 당기고 P2 = (x2, y2)가 끝을 당깁니다. 곡선 자체는 항상 (0,0)에서 시작해 (1,1)에서 끝납니다. x값은 시간을 나타내며 0과 1 사이에 있어야 합니다; y값은 진행도를 나타내며 오버슈트 효과를 위해 0 미만이나 1 초과가 될 수 있습니다. 그래프의 두 핸들을 드래그하면 네 숫자가 실시간으로 업데이트됩니다.
ease, ease-in, ease-out, ease-in-out의 차이는 무엇인가요?
linear는 이징 없이 일정 속도로 움직여 대부분의 UI에서 어색해 보입니다. ease — CSS 기본값 — 는 약간 빠르게 시작했다가 서서히 느려집니다. ease-in은 느리게 시작해 끝에서 가속하며, 무언가가 떨어지는 느낌을 줍니다. ease-out은 빠르게 시작해 감속하는데, 화면에 등장하는 요소에 가장 자연스럽습니다. ease-in-out은 양쪽 끝이 느리고 중간이 가장 빨라, 화면을 가로질러 부드럽게 멈춰야 하는 요소에 적합합니다.
cubic-bezier의 y값이 1을 넘거나 0 미만이 될 수 있나요?
y값은 그럴 수 있으며, 그것이 오버슈트와 예비 동작 효과를 만드는 방법입니다. x(시간)값은 항상 0–1로 고정되지만, 1 초과의 y는 요소가 목표를 지나쳤다가 돌아오게 만들고 — 스프링처럼 — 0 미만의 y는 먼저 뒤로 당겨지게 합니다. 대표적인 예는 easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)입니다. 이 편집기는 0–1 박스 밖으로 핸들을 드래그해 그런 효과를 만들 수 있습니다.
CSS 트랜지션이나 애니메이션에서 cubic-bezier를 어떻게 사용하나요?
타이밍 함수 자리에 넣으면 됩니다. 트랜지션의 경우: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. 키프레임 애니메이션의 경우: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. 이 도구의 CSS 탭이 현재 곡선과 지속 시간으로 두 스니펫을 자동으로 생성해 스타일시트에 바로 붙여 넣을 수 있습니다.
easeInOutQuad 같은 명명된 이징을 cubic-bezier로 어떻게 변환하나요?
프리셋 카탈로그에서 불러오세요 — Penner / easings.net 곡선에는 모두 표준 cubic-bezier 근삿값이 있습니다. 예를 들어 easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1), easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). 갤러리에서 명명된 곡선을 선택하고 값을 CSS에 바로 복사하세요.
이 cubic-bezier 생성기는 무료이고 개인 정보가 보호되나요?
완전히 무료이며, 회원 가입이 필요 없고, 아무것도 어디에도 업로드되지 않습니다. 곡선 편집기, 실시간 미리보기, CSS·GSAP·JavaScript 내보내기는 모두 브라우저에서 로컬로 실행됩니다. 만드는 내용은 서버로 전송되지 않으므로 작업물이 완전히 기기에 남아 있습니다. URL에 네 값이 인코딩된 링크로 곡선을 공유할 수도 있습니다 — 계정 불필요.
Related tools
모든 도구 보기
신규 색상 믹서
두 색상을 원하는 비율로 혼합하고 결과 또는 중간 단계를 복사.
신규 이미지 색상 추출기
이미지에서 원하는 색상을 선택하고 주요 팔레트를 HEX, RGB, HSL로 추출하세요.
신규 Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
신규 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
색상 선택기 및 변환기
색상을 고르고 HEX, RGB, HSL, OKLCH 간에 변환.
신규 색상 대비 검사기
텍스트와 배경색 사이의 WCAG AA/AAA 대비 비율 확인.