이징 커브 에디터
두 조절점을 끌어서 cubic-bezier 이징 곡선을 만들고, 실제 움직임을 바로 미리 봐요. CSS 코드와 자바스크립트 함수를 복사해서 웹이나 게임에 쓸 수 있어요.
조절점
사용 방법
이런 때 쓰면 좋아요
버튼이 튀어나오거나 캐릭터가 점프하는 움직임은 속도 변화가 자연스러워야 기분 좋게 느껴져요. 이 속도 변화를 정하는 것이 이징 곡선이고, 웹과 많은 게임 엔진이 cubic-bezier 네 숫자로 곡선을 표현해요.
숫자만 보고는 움직임을 상상하기 어려워서, 이 도구는 곡선을 직접 끌어 보며 공이 어떻게 움직이는지 바로 보여 줘요. y 값을 0보다 작거나 1보다 크게 하면 살짝 뒤로 갔다가 나가거나 목표를 넘었다가 돌아오는 탄력 있는 움직임도 만들 수 있어요.
CSS에는 transition-timing-function 값으로, 게임 코드에는 시간 0~1을 넣으면 진행률을 돌려주는 자바스크립트 함수로 가져가세요. 함수는 다른 언어로도 옮기기 쉽게 짧게 만들었어요.
자주 묻는 질문
x 값은 왜 0~1로 제한되나요?
x는 시간 축이라 거꾸로 갈 수 없어서 CSS 규칙상 0~1이어야 해요. y는 범위 제한이 없어서 튕기는 효과를 낼 수 있어요.
JS 함수는 어떻게 쓰나요?
const ease = cubicBezier(x1, y1, x2, y2) 로 만든 뒤 ease(t)에 0~1 사이 시간을 넣으면 진행률이 나와요. 시작값 + (끝값 - 시작값) × ease(t) 로 위치를 구하면 돼요.
Unity나 Godot에서도 쓸 수 있나요?
복사한 함수의 계산 방식은 언어와 상관없이 같아서 C#이나 GDScript로 옮겨 쓸 수 있어요. Godot의 Tween은 자체 이징을 쓰니 비슷한 프리셋을 고르는 데 참고하세요.
스프링처럼 여러 번 튕기는 효과는요?
cubic-bezier는 한 번 넘었다 돌아오는 정도까지만 표현할 수 있어요. 여러 번 튕기는 효과는 별도의 스프링 계산이나 키프레임이 필요해요.