topic★★★★★난이도 · 약 15분
Cubic-Bezier 해부
P1·P2 제어점이 커브 형태를 결정한다 — AE Graph Editor와 CSS의 공통 언어.
#cubic-bezier#베지어#제어점#Graph Editor
왜 배우는가
모든 이징 함수의 내부는 Cubic-Bezier 곡선이다. P0(0,0)에서 P3(1,1)까지의 곡선을 P1·P2 제어점으로 조절한다. 이 구조를 이해하면 AE의 Graph Editor 핸들, CSS의 `cubic-bezier()`, Figma의 이징 설정이 모두 하나로 연결된다.
Cubic-Bezier 곡선은 4개의 점으로 정의된다. P0(시작점, 항상 0,0)과 P3(끝점, 항상 1,1)은 고정이다. 우리가 조절하는 것은 P1(첫 번째 제어점)과 P2(두 번째 제어점) 두 개뿐이다. 이 두 점의 위치가 곡선의 모든 것을 결정한다.
| 이징 | P1 | P2 | 설명 |
|---|---|---|---|
| Linear | (0, 0) | (1, 1) | 직선, 등속 |
| ease | (0.25, 0.1) | (0.25, 1) | CSS 기본값, 부드러운 S자 |
| ease-in | (0.42, 0) | (1, 1) | 느린 시작 |
| ease-out | (0, 0) | (0.58, 1) | 느린 끝 |
| ease-in-out | (0.42, 0) | (0.58, 1) | 양끝 느림 |
| 스냅(극단) | (0.9, 0) | (0.1, 1) | 시작/끝 극도로 느리고 중간 매우 빠름 |
AE의 Graph Editor = Cubic-Bezier 편집기. 키프레임의 핸들(노란색 바)을 드래그하면 P1/P2를 움직이는 것이다. 핸들을 길게 잡아당길수록 해당 구간의 가감속이 극단적이 된다. Influence 값(%)은 핸들 길이를 숫자로 표현한 것이다.
CSS 연결: `transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)` — 괄호 안의 4개 숫자가 순서대로 P1의 x, P1의 y, P2의 x, P2의 y다. cubic-bezier.com에서 커브를 시각적으로 만들고 값을 복사할 수 있다.
실기 드릴 1문항
edit실기 드릴 · 단답형
Cubic-Bezier에서 곡선의 형태를 결정하는 두 점의 이름은?