한양과기고 에듀테크 수업도구 대시보드

베지에 곡선 (Bézier Curve)

글꼴의 획, 일러스트레이터의 펜 툴, CSS cubic-bezier() 이징, 게임 캐릭터의 이동 경로… 컴퓨터가 그리는 매끄러운 곡선은 거의 다 베지에 곡선이다. 원리는 놀랍게도 단순하다 — 제어점 몇 개를 찍고, 그 사이를 반복해서 선형 보간(lerp) 하면 곡선이 튀어나온다. 아래에서 점을 직접 끌어 보고, t 를 움직여 곡선이 만들어지는 과정을 지켜보자.

1. 제어점을 끌어 보기 · 드 카스텔조 알고리즘

큰 점 P0~P3 를 마우스/터치로 드래그해 곡선 모양을 바꿔 보자. t 슬라이더는 곡선 위 현재 위치를 나타내며, 재생을 누르면 t 가 0→1 로 흐르면서 곡선이 그려진다. 가는 회색 선은 제어 다각형, 색깔 선·점은 드 카스텔조(De Casteljau) 보간 단계다.

곡선 위 점 = 보간을 계속 반복해 마지막 하나 남은 점. 그 점이 t가 0→1 로 갈 때 남기는 자취가 곧 베지에 곡선이다.

차수 (제어점 개수)

매개변수 t 0.40

제어점 P0…Pn 1차 보간점 2차 보간점 곡선 위 점 B(t)

B(t) = (0, 0)

2. 핵심: 선형 보간을 재귀적으로

lerp 한 번

두 점 A, B 사이를 비율 t 로 나눈 점: lerp(A,B,t) = (1−t)·A + t·B. t=0이면 A, t=1이면 B.

한 겹 줄이기

제어점이 4개면 이웃한 쌍마다 lerp → 점 3개. 다시 lerp → 점 2개 → 점 1개. 점이 하나 남을 때까지 반복한다.

자취가 곡선

마지막 한 점이 B(t). t 를 0에서 1까지 훑으며 이 점을 이으면 부드러운 곡선이 된다.

3차 베지에 곡선의 닫힌 식 (번스타인 다항식):
B(t) = (1−t)³·P0 + 3(1−t)²t·P1 + 3(1−t)t²·P2 + t³·P3 , t ∈ [0, 1]
계수 1, 3, 3, 1 은 파스칼의 삼각형 4번째 줄. n차면 nCk 가 계수가 된다.

3. 드 카스텔조 알고리즘 (JavaScript)

// 점 = [x, y]. pts: 제어점 배열, t: 0~1 function deCasteljau(pts, t) { let layer = pts; while (layer.length > 1) { const next = []; for (let i = 0; i < layer.length - 1; i++) { const a = layer[i], b = layer[i + 1]; next.push([ (1 - t) * a[0] + t * b[0], // x 를 lerp (1 - t) * a[1] + t * b[1] // y 를 lerp ]); } layer = next; // 한 겹 줄었다 } return layer[0]; // 곡선 위의 점 B(t) } // 곡선 그리기: t 를 촘촘히 샘플링해 선으로 잇는다 for (let i = 0; i <= 100; i++) lineTo(...deCasteljau(P, i / 100));

4. 실제로 이렇게 쓰인다

글꼴 (폰트)

TrueType은 2차, OpenType/PostScript는 3차 베지에로 모든 글자의 윤곽선을 저장한다. 크기를 키워도 안 깨지는 이유.

벡터 그래픽

SVG <path d="C ...">, 일러스트레이터·피그마의 펜 툴 손잡이가 바로 제어점 P1, P2다.

애니메이션 이징

CSS cubic-bezier(.25,.1,.25,1) 는 시간→진행률 곡선. P0=(0,0), P3=(1,1) 고정.

경로 · 카메라

게임/영상에서 캐릭터·카메라가 지날 부드러운 궤적을 제어점 몇 개로 정의한다.

긴 곡선은 보통 3차 베지에 여러 개를 이어 붙여(스플라인) 만든다. 이음매에서 손잡이를 일직선으로 맞추면 꺾임 없이 매끄럽게 연결된다(C1 연속).