📈 CSS cubic-bezier 에디터

두 개의 컨트롤 포인트를 드래그하여 cubic-bezier 편집. 애니메이션으로 확인.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

🔒 개인정보 보호

・브라우저 내 처리
・입력 데이터는 서버로 전송되지 않습니다
・저장 로그 · 기록 · DB 없음
・가입 · 로그인 · 결제 불필요

파란색과 분홍색 점을 드래그

미리보기

프리셋

CSS

📖 자주 걸리는 지점

두 개의 컨트롤 포인트를 드래그해 cubic-bezier() 커브를 만들고 움직임을 그 자리에서 확인할 수 있습니다. 처리는 브라우저 안에서 끝납니다. 커브의 모양은 속도의 변화 방식을 나타내며 그래프가 가파른 구간일수록 빠르게 움직인다고 읽습니다. 다만 이징만 조정해서는 움직임이 좋아지지 않습니다 — 실제 인상을 정하는 것은 커브와 같거나 그 이상으로 지속 시간 쪽입니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
전부에 ease-in-out 을 쓰고 있다	`ease-in-out` 은 시작도 끝도 느리므로 요소가 나타나는 움직임에 쓰면 처음 한순간 아무 일도 일어나지 않는 것처럼 보입니다. 특히 클릭에 대한 반응에서 이렇게 하면 눌렀는데 반응이 없다고 느끼는 원인이 됩니다. 사람이 느리다고 느끼는 것은 총시간이 아니라 누른 뒤 무언가가 움직이기 시작할 때까지의 시간입니다.	출현은 감속 커브, 소실은 가속 커브가 정석입니다. `cubic-bezier(0, 0, .2, 1)` 같은 ease-out 은 처음에 단숨에 움직이고 조용히 멈추므로 반응이 빠르게 느껴집니다. 반대로 닫히거나 사라질 때는 `cubic-bezier(.4, 0, 1, 1)` 같은 ease-in 으로 서서히 시작해 훅 사라지는 편이 자연스럽습니다. 위치가 움직이는 것은 ease-out, 그 자리에서 사라지기만 하는 것은 linear 로 충분합니다.
커브를 공들여도 차이를 모르겠다	지속 시간이 너무 짧습니다. 150ms 를 밑돌면 이징의 차이는 거의 지각할 수 없어 어떤 커브든 같아 보입니다. 반대로 500ms 를 넘으면 이번에는 조작의 대기 시간으로 의식되기 시작합니다. 공들인 커브가 효과를 내는 것은 그 사이의 대역뿐입니다.	UI 의 표준은 150~300ms 입니다. 호버나 포커스의 색 변화는 100~150ms, 모달이나 드로어의 개폐는 200~300ms, 페이지 전환급의 큰 움직임에서 400ms 정도. 이동 거리가 길수록 시간도 길게 잡는 것이 원칙이며, 화면 끝에서 끝까지 움직이는 것에 150ms 를 쓰면 부자연스럽게 빨라 보입니다. 먼저 시간을 정하고 그다음에 커브를 조정하세요.
바운스를 원하는데 `cubic-bezier` 로 안 된다	Y 좌표는 0~1 밖으로 나갈 수 있지만 X 좌표는 0~1 로 제한됩니다. Y 를 1보다 크게 하면 지나쳤다 돌아오는 오버슈트(`cubic-bezier(.68, -.55, .27, 1.55)` 등)는 만들 수 있지만, 갔다 돌아왔다 다시 가는 여러 번의 바운스는 하나의 베지에 곡선으로는 표현할 수 없습니다. 베지에는 단조롭지 않은 왕복을 가질 수 없기 때문입니다.	여러 번의 바운스가 필요하다면 `@keyframes` 로 키프레임을 새기거나 `linear()` 함수로 꺾은선으로 근사합니다. 다만 그 전에 정말 필요한지 생각해 보세요 — 실무 UI 에서 바운스가 효과를 내는 것은 삭제 취소나 알림 도착처럼 주의를 끌고 싶은 한순간뿐입니다. 일상적으로 만지는 요소에 붙이면 몇 번째부터는 방해가 됩니다.

어떤 커브를 고르든 애니메이션시키는 CSS 속성 쪽이 성능에 미치는 영향이 자릿수가 다르게 큽니다. transform 과 opacity 는 합성 레이어에서만 처리되어 레이아웃도 리페인트도 일어나지 않지만, width / height / top / margin 을 움직이면 매 프레임 레이아웃 계산부터 다시 합니다. 같은 오른쪽으로 100px 이동이라도 left: 100px 과 transform: translateX(100px) 은 부하가 전혀 다릅니다. 아울러 @media (prefers-reduced-motion: reduce) 를 반드시 준비하세요 — 전정 장애가 있는 이용자에게 큰 움직임은 실제로 몸 상태에 영향을 줍니다.

📖 사용법

1

컨트롤 포인트 드래그

두 점을 드래그하여 곡선 변형.
2

미리보기로 확인

재생 버튼으로 실제 이징 확인.
3

CSS 복사

생성된 스니펫을 복사.

❓ 자주 묻는 질문

데이터가 서버로 전송됩니까?

아니요. 모두 브라우저 내에서 처리됩니다.

Y 좌표가 0-1 범위 밖이어도 유효합니까?

예. Y는 범위 밖 가능. X는 0-1 제한.

어디서 사용할 수 있습니까?

transition / animation timing function에서 사용.

🔗 관련 도구

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.