글자를 건물만큼 확대해도 어떻게 매끈하게 유지할 수 있을까?
곡선 글자는 작은 사각형들의 집합보다 그리는 방법으로 저장되는 경우가 많다. 그 방법은 선을 어떻게 휘게 할지 지정한다. 3차 베지에 곡선은 벡터 드로잉, 글꼴 외곽선, 일러스트 도구에서 널리 쓰인다. 적은 수의 점에 서로 다른 역할을 맡긴다는 점이 묘미다.
핸들은 곡선 위에 있지 않아도 곡선을 이끈다.
두 끝점과 두 지시점
3차 베지에 구간에는 제어점 네 개가 있다. 첫 점과 마지막 점은 곡선이 실제로 지나는 끝점이다. 가운데 두 점은 경로를 특정 방향으로 끌어당긴다. 하나를 움직이면 구간 전체가 바뀌지만, 곡선은 보통 그 핸들을 지나지 않는다. 편집기에서 점을 끌 때 다른 곳의 선이 움직이는 이유다.
예제는 (0, 0)에서 시작해 (1, 1)에서 끝나며 핸들은 (0.2, 1.2), (0.8, −0.2)에 있다. 밀리미터나 픽셀이 아닌 드로잉 좌표다. 같은 설명을 확대한 뒤 화면에 렌더링할 수 있다.
직선으로 곡선을 만든다
곡선 위 한 점을 찾는 직관적인 방법이 있다. 0과 1 사이의 진행값을 고르고, 이웃한 제어점을 잇는 세 선분에서 그 비율만큼 이동한다. 새 점 세 개를 연결한 다음 같은 일을 두 번 더 반복하면 점 하나가 남는다. 그 점이 곡선 위에 있다.
이것이 드 카스텔조 알고리즘이다. 예제의 중간 진행값에서는 (0.5, 0.5)가 나온다. 진행값을 전체 범위에서 바꾸면 곡선이 그려진다. 다음 점의 위치를 짐작할 필요 없이, 반복적인 직선 보간으로 복잡해 보이는 모양을 얻는다.
핸들이 출발 방향을 정한다
네 제어점을 순서대로 P0, P1, P2, P3라고 하면 시작 미분값은 3(P1 − P0)로, 시작점에서 첫 핸들을 향한다. 끝 미분값은 3(P3 − P2)로, 두 번째 핸들에서 끝점을 향한다. 이 예에서는 둘 다 (0.6, 3.6)이므로 곡선은 양끝에서 같은 접선 방향으로 진행한다.
미분값에는 방향과 진행 매개변수에 대한 속도가 함께 담긴다. 실제 펜이나 애니메이션 물체가 반드시 그 속도로 움직인다는 뜻은 아니다. 같은 진행 간격도 곡선 위에서는 다른 거리가 된다. 일정한 이동 속도를 원한다면 별도의 거리 계산이 필요할 수 있다.
작은 변화가 멀리까지 퍼진다
비교 그림은 첫 핸들의 높이만 0.4, 1.2, 2.0으로 바꾼다. 끝점은 그대로지만 경로 윗부분이 올라간다. 핸들로 윤곽을 효율적으로 다듬을 수 있는 동시에, 한 부분을 고치면 다른 부분도 바뀌는 이유다. 영향은 구간 전체에 걸쳐 있다.
더 국소적인 제어가 필요하면 짧은 구간 여러 개를 잇는다. 매끄러워 보이는 연결에는 보통 접선 방향의 정렬이 필요하다. 방향만 같다고 미분값의 크기나 곡률까지 같아지지는 않는다. 로고 윤곽과 기계의 이동 경로는 요구하는 매끄러움이 다를 수 있다.
글꼴은 곡선 하나보다 크다
글자는 여러 윤곽, 직선과 곡선 구간으로 이루어진다. 구간마다 핸들 하나를 쓰는 2차 베지에 글꼴도 있고, 둘을 쓰는 3차 글꼴도 있다. 여기서는 3차만 설명하며 모든 글꼴 엔진을 모델링하지 않는다. 닫힌 윤곽에는 어느 영역을 채울지 정하는 규칙도 필요하다.
결국 윤곽은 픽셀 격자를 만난다. 렌더러는 면적 점유율을 추정하고 표시 규칙을 적용하며, 작은 글자의 가독성을 위해 형태를 조정할 수도 있다. 수학적으로 매끄러운 윤곽이 작은 글자까지 완벽하게 보장하지는 않는다. 벡터는 기하를 보존하고 렌더링은 이를 제한된 발광 픽셀로 옮긴다.
선 뒤의 설계도를 읽는다
연속적인 경로를 지탱하는 작은 뼈대를 떠올리면 좋다. 끝점은 시작과 끝을, 핸들은 출발과 도착 방식을 정한다. 제어점을 많이 추가한다고 늘 좋아지지는 않는다. 지나치게 복잡한 윤곽은 편집하기 어렵고 의도하지 않은 굴곡이 생길 수 있다.
곡선이 어색하면 점을 더하기 전에 제어 다각형을 살펴보자. 핸들이 잘못된 방향을 향하는지, 한 구간에 너무 많은 역할을 맡겼는지 확인할 수 있다. 보이는 선은 결과이며 뼈대가 원인을 설명하는 경우가 많다. 편집기를 이해하는 방법이지, 특정 점 배치가 이상적인 글자를 만든다는 주장은 아니다.
더 읽어 보기
W3C SVG paths: cubic Bézier commands ↗Microsoft OpenType: CFF outlines ↗공식 문서와 함께 읽으면 좋은 자료입니다.