큐빅 베지어 생성기: 사용자 정의 CSS 이징 곡선 만들기
큐빅 베지어 생성기로 두 제어점을 드래그하거나 ease, ease-in-out, back 같은 프리셋에서 시작해 CSS 이징 곡선을 디자인하세요. 재생 시간을 설정해 애니메이션을 실시간으로 미리 보고, cubic-bezier() 값이나 바로 사용할 수 있는 CSS 트랜지션 스니펫을 복사하세요. 곡선 값만 편집하는 것보다 모션을 더 시각적으로 다듬을 수 있습니다.
큐빅 베지어 생성기는 CSS 이징 곡선을 만드는 시각적 편집기입니다. 숫자에서 곡선을 추론하려 하지 말고 두 제어점을 드래그해 모션이 어떻게 바뀌는지 보세요. ease, ease-in-out, back 같은 표준 프리셋을 선택한 뒤 재생 시간을 설정하고 실시간 애니메이션 미리보기를 보세요.
곡선은 CSS cubic-bezier() 값으로 표현되며, 도구에서는 바로 사용할 수 있는 트랜지션 스니펫도 제공합니다. 표준 이징 프리셋 중 하나에서 시작하거나 제어점을 조정해 사용자 정의 곡선을 만드세요. 재생 시간 설정은 미리보기의 타이밍을 조절합니다. 스타일시트나 워크플로에 맞는 결과를 복사하세요.
cubic-bezier() 값은 이징 타이밍을 기술하고, CSS 트랜지션 선언에는 재생 시간과 함께 해당 이징이 포함될 수 있습니다. 생성기는 곡선 값과 바로 사용할 수 있는 트랜지션 스니펫을 모두 제공하므로 필요한 수준의 CSS 세부 정보를 복사할 수 있습니다. 시각적 미리보기로 결과를 보지 않고 곡선 값을 편집하는 것보다 모션을 비교하기 쉬워집니다.
큐빅 베지어 생성기는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 페이지가 로드된 후에는 오프라인으로 동작하며, 이 도구는 무료로 사용할 수 있습니다.
이 도구는 인터페이스, 테스트, 픽스처, 시드 데이터용 이징 값을 준비하는 개발자와 DevOps 엔지니어에게 도움이 됩니다. CSS 이징이 어떻게 동작하는지 배우든 기존 상호작용을 다듬든, 곡선을 조정하고 미리 본 뒤 결과를 복사할 수 있습니다.
1단계: 곡선을 시작할 ease, ease-in-out, back 같은 표준 이징 프리셋을 선택하세요.
2단계: 두 제어점을 드래그해 곡선을 시각적으로 조정하고 원하는 모션을 만드세요.
3단계: 재생 시간을 설정한 뒤 실시간 미리보기를 보며 곡선이 어떻게 애니메이션되는지 확인하세요.
4단계: 생성된 cubic-bezier() 값이나 바로 사용할 수 있는 CSS 트랜지션 스니펫을 복사하세요.
사용 사례: 프로젝트에 구체적인 이징 곡선이 필요할 때 테스트 케이스, 픽스처, 시드 데이터용 cubic-bezier() 값을 만드세요.
사용 사례: 각 값을 손으로 만들지 말고 여러 곡선이 한 번에 필요할 때 값을 묶음으로 생성하세요.
사용 사례: 랜덤화된 곡선 데이터가 필요할 때 키보드 추측이 아닌 제대로 된 랜덤 값을 사용하세요.
사용 사례: 제어점을 조정하고 모션을 미리 보며 CSS 트랜지션을 시각적으로 다듬으세요.
사용 사례: 스타일시트에 복사하기 전에 ease나 ease-in-out 같은 표준 프리셋을 사용자 정의 곡선과 비교하세요.
사용 사례: 재생 시간을 설정하고 애니메이션을 미리 보며 인터페이스 상호작용의 타이밍을 확인하세요.