cubic-bezier란?
cubic-bezier는 CSS 애니메이션과 트랜지션의 속도 변화(이징)를 정의하는 타이밍 함수입니다. 시작과 끝은 (0,0)과 (1,1)로 고정되고, 두 개의 제어점 (x1, y1)과 (x2, y2)을 조절해 시간에 따른 진행 속도 곡선을 자유롭게 만들 수 있습니다. 가로축은 시간, 세로축은 진행도를 의미합니다.
사용법
- 왼쪽 곡선 그래프에서 두 제어점을 마우스나 터치로 드래그합니다.
- 또는 아래 x1, y1, x2, y2 숫자 입력으로 정확한 값을 지정합니다.
- 프리셋 버튼(linear, ease, ease-in, ease-out, ease-in-out)으로 기본 곡선을 빠르게 불러옵니다.
- 오른쪽 미리보기에서 실제 애니메이션 느낌을 확인합니다.
- 완성되면 cubic-bezier() 코드를 복사해 transition·animation에 붙여넣습니다.
그래프 읽는 법
그래프의 가로축은 흘러간 시간, 세로축은 진행도입니다. 곡선이 가파른 구간에서는 짧은 시간에 많이 움직여 빠르게 느껴지고, 완만한 구간에서는 천천히 움직입니다. 대각선에 가까운 곡선일수록 속도 변화가 적고, S자에 가까울수록 시작과 끝이 부드러워집니다.
제어점에서 시작점·끝점으로 이어지는 옅은 선은 곡선이 그 방향으로 끌려가는 정도를 보여 주는 보조선입니다. 참조 곡선 겹쳐 보기를 켜면 linear와 ease 곡선이 흐리게 함께 그려져, 지금 만들고 있는 곡선이 기본값보다 얼마나 빠르거나 느린지 눈으로 비교할 수 있습니다.
값의 범위와 바운스
x1과 x2는 시간축이라 0~1 범위로 제한됩니다. 드래그하거나 숫자를 입력해도 이 범위를 벗어나면 자동으로 잘립니다. 반면 y1과 y2는 진행도라서 0보다 작거나 1보다 큰 값도 넣을 수 있습니다. y를 음수로 두면 시작할 때 살짝 뒤로 물러났다가 출발하고, 1보다 크게 두면 목표를 지나쳤다가 되돌아오는 오버슈트(바운스) 느낌이 납니다. 그래프에는 -0.5부터 1.5까지 표시되어 이런 값도 화면 안에서 다룰 수 있습니다.
기존 값 가져오기
이미 쓰고 있는 이징 값을 다듬고 싶다면 가져오기 칸에 cubic-bezier(.17, .67, .83, .67) 같은 문자열을 붙여넣고 불러오기를 누르세요. 괄호 안의 네 숫자를 읽어 입력칸과 그래프에 채워 줍니다. 괄호 없이 숫자 네 개만 쉼표로 적어도 인식하며, 형식이 맞지 않으면 안내 문구로 알려 줍니다.
복사 형식 3가지
- cubic-bezier() 복사 — 함수 부분만 복사합니다. transition이나 animation 단축 속성 안에 끼워 넣을 때 씁니다.
- timing-function 복사 —
transition-timing-function: …;선언 전체를 복사합니다. - Tailwind 복사 — 공백을 없앤 임의값 클래스
ease-[…]형태로 복사합니다.
활용 예시
- 모달이나 토스트가 나타날 때 빠르게 시작해 부드럽게 멈추는 ease-out 계열 곡선 적용
- 화면 밖으로 사라지는 요소에 점점 빨라지는 ease-in 계열 곡선 적용
- 버튼 눌림처럼 짧은 반응에 살짝 오버슈트를 넣어 탄력 있는 느낌 주기
- 아코디언·드로어가 열리고 닫히는 속도를 프로젝트 전체에서 같은 값으로 통일하기
- 디자인 시안의 이징 값을 붙여넣어 확인하고 필요한 만큼만 수정하기
주의점과 팁
- 이징은 속도 곡선만 정하고 전체 시간은 정하지 않습니다. 느리게 느껴진다면 duration을 함께 조정하세요.
- UI 전환은 보통 0.15~0.4초 사이가 무난합니다. 곡선이 아무리 좋아도 시간이 길면 답답하게 느껴집니다.
- 오버슈트가 큰 곡선은 자주 반복되는 요소에 쓰면 산만해질 수 있어, 강조가 필요한 곳에만 쓰는 편이 좋습니다.
- 미리보기는 1.2초 길이로 2초마다 반복 재생됩니다. 실제 적용할 시간과는 다를 수 있으니 곡선의 느낌을 비교하는 용도로 보세요.
- 같은 프로젝트에서 이징 값을 두세 종류로 정해 두고 재사용하면 화면 전체의 움직임이 일관되게 보입니다.
자주 묻는 질문
cubic-bezier란 무엇인가요?
CSS 애니메이션과 트랜지션의 속도 변화(이징)를 정의하는 함수입니다. 네 개의 값 x1, y1, x2, y2로 두 제어점을 지정해 시간에 따른 진행 속도 곡선을 만듭니다.
x 값과 y 값의 범위는 어떻게 되나요?
x1과 x2는 0~1 사이여야 하며 이 도구에서도 그 범위로 제한됩니다. y1과 y2는 0~1을 벗어나 음수나 1보다 큰 값도 가능하며, 이 경우 살짝 되돌아갔다가 진행하는 바운스 같은 효과를 만들 수 있습니다.
만든 cubic-bezier는 어떻게 사용하나요?
출력된 코드를 복사해 timing-function 자리에 붙여넣으면 됩니다. 예를 들어 transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); 처럼 씁니다.
ease와 linear의 차이는 무엇인가요?
linear는 처음부터 끝까지 일정한 속도로 진행하고, ease는 천천히 시작해 빨라졌다가 다시 천천히 끝나 더 자연스러운 느낌을 줍니다. 대부분의 UI 전환에는 ease 계열이 적합합니다.
이미 쓰던 이징 값을 불러올 수 있나요?
가져오기 칸에 cubic-bezier() 문자열을 붙여넣고 불러오기를 누르면 네 값이 입력칸과 그래프에 채워집니다. 괄호 없이 숫자 네 개를 쉼표로 적어도 인식합니다.
참조 곡선 겹쳐 보기는 무엇인가요?
기본 곡선인 linear와 ease를 흐린 선으로 함께 그려 주는 기능입니다. 지금 만드는 곡선이 기본값보다 얼마나 빠르거나 느린지 비교할 때 켜 두면 편합니다.
Tailwind에서도 쓸 수 있나요?
Tailwind 복사 버튼을 누르면 공백을 없앤 임의값 클래스 ease-[…] 형태로 복사됩니다. 그대로 클래스 목록에 붙여넣어 사용하면 됩니다.
입력한 값이 저장되나요?
저장되지 않습니다. 곡선 계산과 미리보기는 모두 브라우저 안에서 이루어지며 값이 서버로 전송되지 않고, 새로고침하면 기본값으로 돌아갑니다.