CSS 큐빅베지어 생성기

이 도구는 무엇인가요?

cubic-bezier()는 애니메이션이나 전환 값이 일정한 속도로 움직이는 대신 시간에 따라 어떻게 가속·감속되는지를 제어하는 CSS 타이밍 함수입니다. 고정된 시작점 (0,0)과 끝점 (1,1) 사이의 곡선을 휘게 만드는 두 개의 제어점 — (x1, y1)과 (x2, y2) — 로 정의됩니다. x 값은 0과 1 사이여야 하지만, y 값은 오버슈트나 바운스 효과를 만들기 위해 그 범위를 벗어날 수 있습니다.

손으로 직접 쓰면서 너무 급하지도 너무 흐물흐물하지도 않은 느낌을 찾으려면 네 개의 소수점 숫자를 시행착오로 조정해야 합니다. 이 도구는 그런 시행착오를 직접 조작으로 대체합니다 — 슬라이더를 드래그하면 곡선이 휘고 미리보기 공이 그에 맞춰 움직이는 걸 보면서, 움직임이 원하는 느낌이 되면 CSS를 복사하면 됩니다.

출처: CSS Easing Functions Level 1, W3C — cubic-bezier()와 이 도구의 프리셋이 기반으로 하는 다섯 가지 명명된 키워드를 정의하는 명세입니다.

왜 사용해야 할까요?

• 실시간 SVG 그래프가 고정된 시작점과 끝점 사이에서 곡선이 정확히 어떻게 휘는지 두 제어점과 핸들까지 함께 보여줍니다.
• 재생 버튼으로 미리보기 요소가 트랙을 따라 정확히 여러분의 곡선대로 움직이는 것을 볼 수 있어서, 정적인 그래프가 아니라 실제 움직임을 느낄 수 있습니다.
• CSS Easing Functions 명세에 문서화된 표준 이름의 다섯 가지 이징 함수 — ease, ease-in, ease-out, ease-in-out, linear — 를 클릭 한 번으로 적용할 수 있는 프리셋으로 제공합니다.
• y 값을 0 아래나 1 위로 보낼 수 있어서 이름 있는 키워드로는 만들 수 없는 오버슈트/바운스 스타일 이징을 만들 수 있습니다.
• 바로 붙여넣을 수 있는 transition-timing-function CSS를 출력하며, 같은 값이 animation-timing-function에도 그대로 사용됩니다.
• 전적으로 브라우저 안에서 동작합니다 — 설정한 내용이 어디로도 업로드되지 않습니다. 무료, 가입 불필요.

사용 방법

1. x1/y1 슬라이더를 드래그해 첫 번째 제어점을 설정하세요 — 애니메이션이 어떻게 시작하는지를 결정합니다.
2. x2/y2 슬라이더를 드래그해 두 번째 제어점을 설정하세요 — 애니메이션이 어떻게 끝나는지를 결정합니다.
3. 그래프의 검은 곡선을 확인하세요 — 초반에 대각선보다 위로 볼록하면 빠르게 시작한다는 뜻이고, 대각선 아래에 머물면 느리게 시작한다는 뜻입니다.
4. 재생 버튼을 눌러 여러분의 곡선을 transition-timing-function으로 사용해 미리보기 요소가 트랙을 따라 움직이는 것을 확인하세요.
5. 프리셋(ease, ease-in, ease-out, ease-in-out, linear) 중 하나를 시작점으로 삼은 뒤 슬라이더를 조금씩 조정해 보세요.
6. 생성된 CSS를 복사해 transition이나 animation 규칙에 붙여넣으세요.

예시

입력

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

결과

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

이것은 CSS 표준 ease 키워드를 명시적인 제어점으로 풀어 쓴 것입니다 — 빠르게 시작해 급격히 가속한 뒤 끝을 향해 점차 느려지는 곡선입니다.

y 값이 0~1을 벗어날 수 있는 이유

시간을 나타내며 반드시 0에서 1 사이여야 하는 x축과 달리, y축은 애니메이션 값의 진행 정도를 나타내며 그런 제한이 없습니다. y1을 0 아래로, y2를 1 위로 설정하면 곡선이 시작 값보다 아래로 내려갔다가 끝 값을 넘어섰다가 다시 안정되는 형태가 되는데, 이것이 버튼 눌림, 모달 등장, 재미있는 UI 마이크로 인터랙션에 쓰이는 오버슈트와 앤티시페이션 효과의 기본 원리입니다. 다섯 개의 이름 있는 키워드(ease, ease-in, ease-out, ease-in-out, linear) 중 어느 것도 이런 효과를 만들 수 없으며, 이를 위해서는 커스텀 cubic-bezier()가 필요합니다.

transition-timing-function vs. animation-timing-function

이 도구가 생성하는 cubic-bezier() 값은 두 속성 모두에서 동일하게 동작합니다. 호버나 클래스 토글 같은 상태 변화로 움직임이 촉발될 때는 transition-timing-function을 쓰고, @keyframes로 구동되는 animation 규칙 안에서 자동으로 반복되거나 자동 재생되는 움직임에 같은 이징 느낌이 필요할 때는 animation-timing-function을 쓰세요.

자주 쓰이는 이징 패턴

• 간결한 UI 피드백(버튼, 토글): 제어점을 대각선에 가깝게 두고 ease-out 쪽으로 살짝 치우치게 하세요, 예: cubic-bezier(0.4, 0, 0.2, 1).
• 머티리얼 디자인의 표준 곡선: cubic-bezier(0.4, 0, 0.2, 1) — 빠르게 시작해 부드럽게 마무리되며, 패널이나 카드 전환에 널리 쓰입니다.
• 바운스/오버슈트: y2를 1보다 크게 올리세요, 예: cubic-bezier(0.34, 1.56, 0.64, 1), 재미있는 팝인 느낌을 위해.
• 움직이기 전 예비 동작: y1을 0 아래로 내리면 요소가 앞으로 움직이기 전 살짝 뒤로 당겨지는 느낌을 줄 수 있습니다.
• 반복 애니메이션을 위한 부드러운 ease-in-out: 곡선을 중심을 기준으로 대칭에 가깝게 유지하세요.

다른 CSS 도구와 조합하기

이징 곡선은 보통 그림자, 둥근 모서리, 그라디언트가 함께 정의된 요소에 적용됩니다. 아래의 다른 CSS 도구로 시각적 스타일을 먼저 만든 뒤, 이 도구의 타이밍 함수를 같은 규칙이나 transition/animation 선언에 추가하세요.

→ 박스 섀도우 생성기 · Border Radius 생성기

자주 묻는 질문