핵심 요점
- 01두 제어 점 핸들을 드래그하여 숫자 값을 추측하지 않고 시각적으로 이징 곡선을 만듭니다.
- 02라이브 볼 애니메이션이 타이밍을 재생하므로 커밋하기 전에 동작을 느낄 수 있습니다.
- 035가지 CSS 기본 제공 사전 설정(ease, linear, ease-in, ease-out, ease-in-out)은 시작점으로 사용 가능합니다.
- 04cubic-bezier() 값은 2자리 정밀도로 라이브 업데이트되어 CSS 속성에 붙여 넣을 준비가 됩니다.
UI 동작에 대해 맞춤형 이징 곡선이 중요한 이유
CSS의 기본 타이밍 함수(ease, ease-in-out, linear)는 많은 것을 다룹니다. 하지만 모든 UI에는 기본값이 약간 잘못 느껴지는 순간이 있습니다. 너무 빠르게 나타나는 툴팁, 열 때 과도하게 보정하는 모달, 기계적으로 느껴지는 진행률 표시줄입니다. Cubic-bezier 곡선로 기계적이 아닌 자연스럽게 느껴지도록 동작을 조정할 수 있습니다. 하지만 cubic-bezier(0.4, 0, 0.2, 1)의 4개 숫자는 직접 이해하기 거의 불가능합니다.
Handytool의 cubic-bezier 편집기는 이러한 숫자를 두 개의 드래그 가능한 핸들이 있는 시각적 곡선으로 변환합니다. 핸들을 이동하면 볼 애니메이션이 즉시 재생되어, 동작이 의도와 일치할 때까지 느낌으로 반복할 수 있습니다. 그러면 CSS에 값을 복사하여 붙여 넣으면 완료됩니다.
CSS 이징 곡선을 디자인하는 방법
- 01
사전 설정에서 시작
ease, linear, ease-in, ease-out, 또는 ease-in-out를 기준으로 선택합니다. 핸들이 각 사전 설정의 올바른 위치로 스냅됩니다.
- 02
제어 점 핸들 드래그
각 핸들은 곡선의 한 쪽 끝을 제어합니다. 시작 핸들은 초기 가속을 형성하고, 끝 핸들은 최종 감속을 형성합니다. 핸들을 이동하면 사전 설정이 '맞춤형'으로 자동 전환됩니다.
- 03
볼 애니메이션 보기
볼이 곡선을 사용하여 왼쪽에서 오른쪽으로 애니메이션합니다. 느린 vs 빠른 전환을 미리 보려면 기간 슬라이더를 조정합니다.
- 04
과도 실험
Y축 핸들을 1 위 또는 0 아래로 드래그하여 과도와 언더슈트를 만듭니다. 메뉴가 에너지있게 빠져나가는 '바운시' 효과입니다.
- 05
CSS 값 복사
복사를 클릭하여 cubic-bezier() 문자열을 잡아서 스타일시트의 transition-timing-function 또는 animation-timing-function에 붙여 넣습니다.
완전히 브라우저에서 실행
편집기는 자체 포함된 브라우저 도구입니다. 페이지가 열린 후 글꼴, 스크립트, 데이터는 로드되지 않습니다. 핸들을 드래그하고 애니메이션을 미리 보는 것은 오프라인으로 작동합니다. 미리보기 볼에 사용되는 cubic-bezier 공식은 CSS 전환에 브라우저가 사용하는 것과 같으므로, 편집기에서 본 것이 정확히 스타일시트가 생성하는 것입니다.
설치할 것도 가입할 것도 없습니다. 출력은 단일 CSS 값입니다. 붙여 넣고 완료합니다.
Cubic-Bezier 편집기 FAQ
cubic-bezier 이징 곡선이란 무엇인가요?
CSS 전환 또는 애니메이션이 시간에 따라 가속화되는 방식을 결정하는 두 제어 점으로 정의된 수학적 곡선입니다. cubic-bezier(x1, y1, x2, y2)의 4개 숫자가 이러한 제어 점의 위치를 설정합니다.
Y 값이 1 위 또는 0 아래로 갈 수 있는 이유는 무엇인가요?
0-1 범위 밖의 Y 값은 과도와 언더슈트를 생성합니다. 곡선이 끝점을 지나갑니다. 이는 '바운시' 이징 곡선을 만듭니다. X 값은 0-1 범위 내에 있어야 합니다.
출력을 어떻게 사용하나요?
cubic-bezier(...) 문자열을 복사하여 CSS transition-timing-function 또는 animation-timing-function 값에 붙여 넣습니다. 모든 최신 브라우저에서 작동합니다.
ease-in-out이 정확히 무엇을 의미하나요?
Ease-in-out은 천천히 시작하고, 중간에 가속하고, 끝에서 느려집니다. cubic-bezier(0.42, 0, 0.58, 1)입니다. 실제 개체가 가속 및 감속하는 방식을 반영하며 대부분 세련된 UI 동작의 기본 선택입니다.
볼 애니메이션 미리보기가 CSS에 정확한가요?
네, 정확합니다. 미리보기는 브라우저가 CSS 전환에 적용하는 것과 같은 cubic bezier 공식을 사용합니다. 기간 슬라이더로 느린 vs 빠른 곡선을 느껴본 후 커밋합니다.