✒️ 펜툴 연습
흐리게 깔린 모양을 일러스트레이터·피그마와 같은 펜 도구 조작으로 따라 그리고 점수를 확인합니다. 점을 적게 쓰면서 모양을 맞출수록 잘 그린 것입니다. 곡선이 어떻게 만들어지는지는 지식 노트: 컴퓨터 그래픽에 정리해 두었습니다.
기본
고급 · 한글 윤곽
실제 폰트처럼 글자의 바깥 윤곽과 구멍을 닫힌 경로로 그립니다. 기본 단계와 관계없이 바로 시작할 수 있고, 그린 글자는 폰트 만들기로 가져갈 수 있습니다.
100%
조작
| 클릭 | 모서리 점을 찍습니다. 직선이 이어집니다. |
| 클릭한 채 드래그 | 양쪽 핸들이 함께 나오는 부드러운 점을 만듭니다. 드래그한 방향으로 곡선이 나갑니다. |
| Alt/⌥ + 드래그 | 점을 찍으며 드래그할 때 누르면 나가는 핸들만 움직여 꺾인 점이 됩니다. 다 그린 뒤 핸들을 끌 때 누르면 반대쪽 핸들과 끊어집니다. |
| 첫 점 클릭 | 경로를 닫습니다(원·하트처럼 닫힌 모양). |
| Enter · Esc | 열린 채로 그리기를 끝냅니다. 끝낸 뒤에는 점과 핸들을 끌어 다듬을 수 있습니다. |
| 끝낸 뒤 끝점 클릭 | 첫 점이나 마지막 점을 끌지 않고 클릭하면 그 끝에서 이어 그립니다. “이어 그리기” 버튼은 마지막 점에서 이어 그립니다. |
| N · “새 윤곽” | 지금 윤곽을 끝내고 다음 윤곽을 시작합니다. 글자의 구멍이나 떨어진 획을 그릴 때 씁니다. |
| Backspace | 그리는 중에 마지막 점을 지웁니다. |
| Ctrl/⌘ + Z | 한 단계 되돌립니다. |
| Ctrl/⌘ + 휠 · 핀치 | 확대·축소합니다. Ctrl/⌘ + 0은 맞춤입니다. |
| Space + 드래그 · 두 손가락 | 화면을 옮깁니다. 가운데 버튼 드래그도 됩니다. |
이럴 때: 곡선이 휘는 방향을 바꾸고 싶으면 핸들 방향을, 휘는 정도를 바꾸고 싶으면 핸들 길이를 바꿉니다. 점은 곡선이 가장 많이 굽는 곳이 아니라 굽는 방향이 바뀌는 곳 근처에 두면 적은 점으로 매끄럽게 그릴 수 있습니다.
SVG 경로
지금 그린 모양을 SVG의 d 값으로 나타낸 것입니다. M은 시작점, C는 핸들 두 개와 끝점으로 그리는 곡선, Z는 닫기입니다.
글자 단계에서 저장하면 파일 이름이 U+AC00.svg처럼 그 글자의 유니코드로 붙습니다. 폰트 만들기의 “SVG 불러오기”에서 파일을 하나만 고르면 지금 선택한 글자에, 여러 개를 한꺼번에 고르면 파일 이름의 글자 자리에 들어갑니다. 안쪽 윤곽은 구멍으로 뚫립니다. ㅇ·ㄱ·ㅅ 같은 자모는 폰트 만들기에서 조합용 픽셀 글자라 격자에 맞춰 픽셀로 바뀌고, “가” 같은 완성 글자는 벡터 그대로 들어갑니다.
더 알아보기
- The Bézier Game — 자동차·클립 같은 모양을 적은 점으로 따라 그리는 유명한 펜툴 연습 게임입니다(영어).
- 지식 노트: 컴퓨터 그래픽 — 베지어 곡선과 벡터·래스터의 원리를 정리했습니다.
- 폰트 만들기 — 그린 글자를 TTF 폰트로 만듭니다.