수학 기초: 베지어 곡선 — 애니메이션 커브와 로고 곡선 그리기

실 하나로 그리는 마법의 곡선, 베지어 곡선

종이에 매끈한 곡선을 그려 본 적 있나요? 손으로 그리면 자꾸 삐뚤빼뚤해져요. 그런데 컴퓨터는 어떻게 로고의 부드러운 곡선이나, 스르륵 움직이는 애니메이션을 그릴까요?

비밀은 베지어 곡선이에요. 점 몇 개만 콕콕 찍으면, 컴퓨터가 그 사이를 매끈한 곡선으로 이어 줘요. 오늘은 이 곡선을 기초부터 차근차근 알아볼게요.

점 몇 개가 곡선을 만든다고?

베지어 곡선을 만들려면 점이 필요해요. 보통 3개나 4개면 충분해요.

• 시작점: 곡선이 출발하는 곳
• 끝점: 곡선이 도착하는 곳
• 조절점: 곡선을 잡아당기는 "자석" 같은 점

재미있는 건, 곡선이 조절점을 지나가지 않는다는 거예요. 곡선은 조절점 쪽으로 끌려가기만 해요. 강아지가 간식 쪽으로 몸을 기울이지만, 목줄 때문에 간식까지 못 가는 모습과 비슷해요.

그림으로 한눈에 보기

점 3개로 만든 가장 간단한 베지어 곡선이에요. 가운데 위에 있는 조절점이 곡선을 위로 끌어당기고 있어요.

회색 점선은 점들을 이은 길이고, 빨간 선이 진짜 곡선이에요. 조절점을 위로 올리면 곡선이 더 볼록해지고, 옆으로 옮기면 곡선이 그쪽으로 기울어요. 점 하나만 움직여도 곡선 전체가 부드럽게 따라와요.

실 잇기 놀이로 이해하기

혹시 못을 박고 실을 걸어서 곡선처럼 보이게 하는 놀이를 본 적 있나요? 곧은 실을 여러 개 겹치면, 신기하게도 가운데에 곡선 모양이 나타나요.

베지어 곡선도 똑같은 원리예요. 컴퓨터는 시작점에서 끝점까지 가는 동안, 곧은 선 위의 점들을 아주 촘촘하게 계산해요. 그 점들을 이으면 매끈한 곡선이 되는 거예요. 곧은 선만 알아도 곡선을 만들 수 있다니, 꽤 똑똑한 방법이죠?

조절점을 하나 더 늘리면?

조절점이 1개면 곡선이 한쪽으로만 볼록해요. 그런데 조절점을 2개로 늘리면, S자처럼 구불구불한 곡선도 만들 수 있어요. 이걸 3차 베지어 곡선이라고 불러요. 손잡이가 2개니까 곡선을 양쪽에서 잡아당길 수 있는 거죠.

그림판의 곡선 도구, 일러스트레이터의 펜 도구, 글꼴 만들기 프로그램까지, 대부분 이 3차 곡선을 써요. 점 4개로 웬만한 모양은 다 만들 수 있거든요.

애니메이션에서는 어떻게 쓰일까?

화면에서 버튼이 스르륵 나타날 때를 떠올려 보세요. 처음엔 천천히, 중간엔 빠르게, 끝에서 다시 천천히. 이 "빠르기의 변화"도 베지어 곡선으로 정해요.

이번엔 곡선이 모양이 아니라 시간표 역할을 해요. 가로는 시간, 세로는 움직인 거리예요.

곡선이 완만하면 느리게, 가파르면 빠르게 움직여요. 조절점 2개만 옮기면 "통통 튀는 느낌", "묵직한 느낌" 같은 움직임의 성격이 바뀌어요. 애니메이터들이 하루 종일 만지는 게 바로 이 곡선이에요.

로고와 글꼴 속에도 숨어 있어요

지금 읽고 있는 이 글자들도 사실 베지어 곡선 덩어리예요. 글꼴을 만드는 사람은 글자 하나하나의 곡선을 점과 조절점으로 그려요. 회사 로고도 마찬가지고요.

점으로 저장하면 좋은 점이 있어요. 아무리 크게 확대해도 계단처럼 깨지지 않아요. 사진은 확대하면 네모 칸이 보이지만, 베지어 곡선은 "점의 위치"만 기억해 두고 매번 새로 그리니까 언제나 매끈해요.

직접 써 보면 어떨까?

쓸 때 좋은 점부터 말할게요. 곡선을 통째로 지우고 다시 그릴 일이 없어요. 마음에 안 들면 점 하나만 살짝 옮기면 돼요. "로고 곡선을 조금만 더 둥글게"라는 부탁을 받아도 손잡이 하나 당기면 끝이라, 고치는 일이 무섭지 않아요. 확대해도 안 깨지니까 명함에 쓰던 로고를 그대로 건물 간판에 써도 돼요.

쓸 때 힘든 점도 있어요. 펜 도구를 처음 잡으면 손잡이가 정말 말을 안 들어요. 곡선을 살짝 구부리려 했는데 엉뚱한 방향으로 훅 휘어 버리고, 되돌리기를 수십 번 누르게 돼요. 손잡이를 어느 방향으로 얼마나 당겨야 하는지는 머리가 아니라 손이 외울 때까지 연습이 필요해요. 그리고 점을 많이 찍을수록 좋을 것 같지만, 오히려 곡선이 울퉁불퉁해져요. "점을 줄여야 예뻐진다"는 걸 받아들이는 데 시간이 좀 걸려요.

자동차에서 시작된 이야기

이 곡선의 이름은 프랑스 기술자 피에르 베지에(1910~1999)에게서 왔어요. 그는 1960년대에 르노 자동차 회사에서 일하며, 자동차 몸체의 매끈한 곡선을 컴퓨터로 설계할 방법을 찾다가 이 곡선을 사용했어요.

자동차를 위해 다듬어진 곡선이 지금은 글꼴, 로고, 게임, 애니메이션까지 온 세상의 곡선을 그리고 있어요. 곡선 여러 개를 이어 붙이면 더 복잡한 모양(스플라인)도 만들 수 있고, 이 아이디어를 넓히면 울퉁불퉁한 3차원 표면까지 표현할 수 있답니다.

정리해 볼까요?

• 베지어 곡선은 점 몇 개로 매끈한 곡선을 만드는 방법이에요.
• 조절점은 자석처럼 곡선을 끌어당기기만 해요. 곡선이 그 점을 지나가지는 않아요.
• 모양을 그릴 때도 쓰고, 애니메이션의 빠르기를 정할 때도 써요.
• 글꼴과 로고 속에도 숨어 있고, 시작은 자동차 설계였어요.

다음에 로고나 애니메이션을 보면 떠올려 보세요. 그 매끈한 곡선 뒤에는, 보이지 않는 점 몇 개가 자석처럼 곡선을 잡아당기고 있다는 걸요.