cubic-bezier 이징 생성기

cubic-bezier 이징 생성기란?

CSS의 *이징 함수* 는 애니메이션이 진행 시간 동안 어떻게 가속·감속하는지를 정합니다. ease, ease-in, ease-out, ease-in-out 키워드는 네 가지 특정 곡선의 단축어죠. 그 너머로 가고 싶을 때 CSS는 cubic-bezier() 를 줍니다 - 숫자 네 개로 원하는 곡선을 그려 주는 함수입니다.

이 네 숫자는 두 제어점(x1, y1, x2, y2)의 좌표예요. 손으로 쓰면 번거롭습니다. 작은 수치 변화가 큰 시각적 변화를 만들고, 살짝 오버슈트만 들어가도 *튀는 듯한* 움직임이 되는데 그 감각은 숫자만 봐서는 안 보이거든요. 비주얼 에디터로 핸들을 끌면 곡선이 즉시 반응해, 소숫점을 일일이 만지는 것보다 훨씬 빠릅니다.

Coddy 에디터는 곡선을 실시간으로 그리고, 미리보기 공을 직접 만든 이징으로 굴려 보여 줍니다. 자주 쓰는 패턴-CSS 키워드, Material Design 의 *standard*, 살짝 튀는 bouncy out, 오버슈트 anticipate-을 프리셋으로 묶었습니다. 만든 cubic-bezier() 문자열을 복사해 CSS에 붙이세요. 모든 처리는 브라우저 안에서 일어납니다.

cubic-bezier 이징에서 알아두면 좋은 점

• 그래프는 *진행도* 를 *시간* 에 대해 그립니다. 시간은 왼쪽→오른쪽(0 → 1), 진행도는 아래→위(0 → 1). 대각선 직선이 linear, 단위 시간당 진행이 같다는 뜻이에요.
• 두 제어점의 X 좌표는 0..1로 제한됩니다. Y는 0 미만이나 1 초과로 갈 수 있어요 - 튀는, 안티시페이트, 오버슈트 효과(목표를 잠시 지나치거나 반대 방향으로 시작)가 이렇게 만들어집니다.
• *ease-out* 곡선(진행이 초반에 집중)은 빠릿하고 반응 좋은 느낌입니다 - 등장 애니메이션이나 버튼 반응에 잘 어울려요. *ease-in*(진행이 후반에 집중)은 굼떠 보이기 쉽고, UI 등장에는 어울리지 않습니다(퇴장엔 유용).

cubic-bezier 이징을 디자인하는 단계

1. 1

   프리셋부터 시작

   원하는 감각에 가까운 프리셋을 먼저 누르세요. UI 모션이라면 *Material standard* 와 *Bouncy out* 이 좋은 출발점. 등장 애니메이션의 안전한 기본값은 *ease-out* 입니다.

2. 2

   두 핸들을 드래그

   컬러 점이 제어점입니다. 첫 번째를 끌어 *시작* 을, 두 번째를 끌어 *끝* 을 조정하세요. 캔버스 위쪽으로 끌면 오버슈트가 생깁니다.

3. 3

   재생 시간을 정하고 다시 재생

   실제 사용 시간을 입력해 보세요. UI 트랜지션은 보통 150–300ms, 강조 동작은 400–600ms. *Replay* 로 새 설정으로 다시 재생할 수 있습니다.

4. 4

   숫자 입력으로 마감

   정확한 값이 필요하면 X1/Y1/X2/Y2 입력란에 직접 적으세요. Y는 0..1을 벗어날 수 있지만 X는 항상 0..1 사이입니다.

5. 5

   CSS 복사

   *복사* 를 눌러 전체 transition 규칙을 가져오세요. 스타일시트에 붙여 넣고 transform 을 실제로 애니메이션할 속성으로 바꾸면 됩니다.

cubic-bezier 빠른 참고

자주 쓰는 이징과 그 안의 cubic-bezier 값. CSS 키워드 네 개는 모두 특정 곡선의 별칭입니다.

cubic-bezier 시도해 볼 만한 예시

.btn {    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover {    transform: translateY(-2px);}

.card {    transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}

.hero {    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}

이징에서 자주 하는 실수

• 등장 애니메이션에 ease-in 쓰기. 느리게 시작해 빠르게 끝나, 반응성과 정반대로 들립니다. 등장엔 ease-out 을 쓰세요.
• "중립적" 이라며 UI에 linear 적용. 등속 모션은 기계적으로 보입니다. 진행률 바나 스피너엔 맞지만 그 외 자리엔 적합하지 않아요.
• 모든 트랜지션에 오버슈트 넣기. 튀는 이징은 강조용이지 기본값이 아닙니다 - 전부 쓰면 화면이 어수선해집니다.

cubic-bezier 자주 묻는 질문