이징 곡선 편집기
Easing Curve Editor
움직이는 미리보기를 보며 cubic-bezier나 스프링 곡선을 조절하고 CSS 타이밍 함수를 만듭니다.
3차 베지에 이징 곡선을 끌어서 만들고, 그것이 실제 움직임에 무엇을 하는지 보여 줍니다. 브라우저의 컴포지터가 직접 움직이는 블록과, 같은 곡선을 일정한 시간 간격으로 찍은 띠를 함께 둡니다. 느낌이 아니라 모양으로 읽히도록요.
두 점을 끌거나, 초점을 맞춘 뒤 화살표 키를 쓰세요. shift를 함께 누르면 열 배씩 움직입니다. 음영이 들어간 띠가 0에서 1까지이고, 그 위아래 공간은 오버슛입니다. CSS가 x만 제한하고 y는 놔두기 때문에 존재하는 영역입니다.
CSS가 요구해서 x는 0–1로 제한합니다. 그 범위를 벗어나면 선언 전체가 무효가 되어 브라우저가 버립니다. y는 일부러 열어 두었습니다. 1을 넘으면 오버슛이, 0 아래로 가면 미리 당기는 동작이 나오는데, 사람이 곡선을 손으로 고치는 이유의 대부분이 그것입니다.
아래 띠는 같은 곡선을 시간 간격 스무 개로 나눠 찍은 것입니다. 표시가 몰려 있으면 그 구간이 느린 것이고, 벌어져 있으면 빠른 것입니다. 곡선의 모양을 움직임으로 말한 셈입니다.
미리 설정
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);사용 방법
제어점 두 개를 끕니다
초점을 맞추고 화살표 키를 써도 됩니다. shift를 함께 누르면 열 배씩 움직입니다. 재현할 곡선이 있다면 아래 숫자 칸에 직접 입력하면 됩니다.
블록보다 띠를 봅니다
움직이는 블록은 읽기 어렵습니다. 아래 표시들은 같은 곡선을 스무 개의 시간 간격으로 찍은 것입니다. 몰려 있으면 느리고, 벌어져 있으면 빠릅니다.
값이나 transition 전체를 복사합니다
점이 정확히 키워드와 같아지면 — `ease`, `ease-in-out` 같은 경우 — 그 키워드를 냅니다. 더 짧고 의도를 말해 주기 때문입니다.
자주 묻는 질문
x를 왜 0–1 밖으로 못 끄나요?
CSS가 금지하기 때문입니다. x가 그 범위를 벗어나면 선언 전체가 무효가 되어 브라우저가 그 속성을 버립니다. 그래서 조용히 아무 일도 하지 않는 값을 만들게 두는 대신 제한합니다.
y가 0–1을 벗어나면 무엇이 되나요?
1을 넘으면 오버슛입니다. 목표를 지나쳤다가 돌아옵니다. 0 아래면 미리 당기는 동작이라, 움직이기 전에 반대로 살짝 물러납니다. 키워드를 두고 굳이 곡선을 손으로 고치는 이유의 대부분이 이 둘입니다.
미리보기가 정확한가요?
정확합니다. 타이밍 함수를 CSS 애니메이션으로 브라우저에 넘기는데, 실제 `transition`이 지나갈 경로와 같습니다. 자바스크립트 루프에서 곡선을 샘플링하면 비슷해 보일 뿐 같은 것이 아닙니다.
스프링이나 바운스도 되나요?
진짜는 안 됩니다. 3차 베지에는 제어점이 둘이라 한 번만 지나칠 수 있습니다. 스프링은 진동하기 때문에 정지점이 많은 `linear()`나 물리 기반 애니메이션 라이브러리가 필요합니다. 여기 오버슛이 곡선 하나로 갈 수 있는 가장 가까운 지점입니다.
이 도구로 이어지는 것
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
CSS 정렬·압축
CSS Beautifier & Minifier
선언 순서를 바꾸지 않고 CSS를 정렬하거나 압축하며, 토큰 구성을 그대로 보존합니다.
그림자 CSS 생성
Box Shadow Generator
여러 겹의 박스·텍스트 그림자를 미리보기와 함께 구성하고 CSS로 내보냅니다.
SVG 패스 편집기
SVG Path Editor
패스 데이터를 절대·상대 명령으로 바꾸고 이동·확대·회전·방향 뒤집기를 적용하며 경계 상자와 미리보기를 보여 줍니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.
명도대비 검사
Contrast Checker
전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.