Inkscape에서 Bézier 핸들을 정확한 좌표에 배치하는 방법

노드 도구의 좌표 필드는 선택한 노드의 위치를 변경합니다. Bézier 핸들은 노드 옆에서 곡선의 모양을 조절하는 별도의 제어점입니다. 따라서 도구 모음에 원하는 핸들 좌표를 입력하면 기하 구조의 잘못된 부분이 바뀝니다. Inkscape 초보자 가이드에서는 이 필드가 선택한 노드의 좌표라고 명시합니다. 노드 도구 옵션

노드 도구를 사용해 곡선을 시각적으로 확인하세요. N 키를 누르고 경로를 선택한 다음 노드를 선택합니다. 노드에 얇은 선으로 연결된 작은 원으로 핸들이 표시됩니다. 이 원이 수치상 위치를 편집할 점입니다. 노드 도구로 경로 편집하기

3차 Bézier 세그먼트는 시작 노드, 두 개의 제어점, 끝 노드로 이루어집니다. SVG 경로 데이터에서 시작 노드는 앞선 명령에서 가져옵니다. 그 뒤에 대문자 C가 오면 두 제어점과 끝점을 순서대로 지정합니다. W3C: 3차 Bézier 곡선 명령

다음 예시 d 속성 값을 살펴보세요.

M 40 120 C 40 40 200 40 200 120

숫자를 다음과 같이 읽습니다.

부분	좌표	의미
M 40 120	(40, 120)	시작 노드
C 다음의 첫 번째 쌍	(40, 40)	시작 노드의 나가는 핸들
C 다음의 두 번째 쌍	(200, 40)	끝 노드의 들어오는 핸들
C 다음의 세 번째 쌍	(200, 120)	끝 노드

실용적인 규칙은 편집하기 전에 C 뒤의 여섯 값을 세 쌍으로 묶는 것입니다. 두 노드를 모두 유지하면서 핸들 하나의 위치를 바꾸려면 해당 쌍만 변경하세요. MDN의 SVG 튜토리얼에도 같은 순서가 설명되어 있으며, 제어점이 각 끝점 부근에서 곡선의 방향을 어떻게 결정하는지 나와 있습니다. MDN: 경로

처음에는 다음의 완전한 SVG 문서를 사용해 보세요. 일반 텍스트 편집기에서 exact-curve.svg로 저장한 뒤 Inkscape에서 엽니다. 이 문서에는 그룹, 변환, 경로 효과가 없는 일반 경로 하나가 들어 있습니다.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160"
     viewBox="0 0 240 160">
  <path id="curve"
        d="M 40 120 C 40 40 200 40 200 120"
        fill="none"
        stroke="black"
        stroke-width="2" />
</svg>

예제의 XML 구조와 아래 좌표 계산은 Python으로 확인했습니다. Inkscape 데스크톱 조작 자체는 실행하지 않았습니다.

1. Inkscape에서 곡선을 선택합니다.
2. 기본 단축키로 문서화된 Ctrl+Shift+X를 눌러 XML 편집기를 엽니다.
3. XML 트리에서 id="curve"로 식별되는 경로 요소를 선택합니다.
4. 해당 요소의 d 속성을 선택하고 속성 값을 편집합니다.
5. Ctrl+Enter를 누르거나 대화상자의 속성 설정 컨트롤을 사용해 값을 적용합니다. 이 명령은 Inkscape의 단축키 참조 문서에 나와 있습니다. Inkscape 키보드 및 마우스 참조

예를 들어 이 속성 값을 입력해 첫 번째 핸들을 (40, 40)에서 (70, 30)로 바꿉니다.

M 40 120 C 70 30 200 40 200 120

값 필드에는 경로 데이터 문자열만 붙여 넣으세요. d=, 따옴표 또는 전체 <path> 요소는 붙여 넣지 마세요. 시작 좌표 쌍, 두 번째 제어점 쌍, 끝 좌표 쌍은 그대로 유지하세요. 이렇게 하면 쉽게 확인할 수 있는 단일 핸들 편집이 됩니다.

노드 도구로 돌아가 시작 노드를 선택합니다. 핸들의 새 방향을 눈으로 확인한 다음, 수치 확인을 위해 d 값을 다시 살펴봅니다. 여러 세그먼트로 이루어진 기존 윤곽에서는 주변 명령을 보존하고 관련 제어점 쌍만 편집하세요. 이 짧은 예제로 속성 전체를 바꾸면 윤곽 전체가 교체됩니다.

경로 데이터의 좌표는 SVG 사용자 단위를 사용합니다. 문서의 viewBox와 변환이 이 단위가 화면에 보이는 그림에 어떻게 대응하는지 결정합니다. 초기 SVG 좌표계의 원점은 왼쪽 위에 있으며, X는 오른쪽으로, Y는 아래쪽으로 증가합니다. W3C: 좌표계, 변환 및 단위

제공된 예제에서는 240 × 160 뷰포트와 viewBox="0 0 240 160"가 단순한 대응 관계를 제공합니다. (40, 40)에서 (70, 30)으로 이동하면 제어점이 오른쪽으로 30단위, 위쪽으로 10단위 이동합니다. 이 좌표는 설명을 위한 예시이며 특정 캐릭터 모양에 그대로 적용하라는 뜻은 아닙니다.

기존 문서에서는 로컬 좌표를 페이지 위치로 간주하기 전에 경로와 부모 그룹의 transform 속성을 확인하세요. 예시 계산으로, 단독 translate(30,20)는 로컬 핸들 (70,30)을 부모 좌표계의 (100,50)로 변환합니다. 이 변환 아래에서 (100,50)에 도달하려면 로컬 좌표로 (70,30)을 입력하세요. 크기 조정, 회전 및 추가 상위 요소 변환이 있다면 전체 변환 관계를 고려해야 합니다. W3C: 좌표계와 변환

소문자 c는 세그먼트 시작점으로부터의 오프셋을 저장합니다. 세 쌍 모두 같은 시작점을 기준으로 하며, 한 제어점에서 다음 제어점으로 연속해서 이동하는 값이 아닙니다. 대문자 C는 현재 사용자 좌표계의 절대 좌표를 저장합니다. W3C: 3차 Bézier 곡선 명령

원래 예제에서는 시작 노드 (40,120)를 이후 각 점에서 빼세요.

점	절대 위치	상대 오프셋
첫 번째 핸들	(40,40)	(0,-80)
두 번째 핸들	(200,40)	(160,-80)
끝점	(200,120)	(160,0)

따라서 이에 해당하는 속성 값은 다음과 같습니다.

M 40 120 c 0 -80 160 -80 160 0

숫자는 그대로 둔 채 c만 대문자로 바꾸지 마세요. 그렇게 하면 숫자의 의미가 달라집니다. 더 긴 상대 경로를 편집할 때는 먼저 현재 세그먼트의 시작점을 계산하세요.

S 세그먼트는 첫 번째 제어점을 생략합니다. 3차 세그먼트 뒤에 오면 SVG가 앞선 세그먼트의 마지막 제어점을 두 세그먼트가 공유하는 노드 너머로 반사해 생략된 제어점을 계산합니다. 두 제어점을 각각 직접 지정하려면 축약형을 명시적인 C 세그먼트로 확장하고, 처음에는 계산된 첫 번째 제어점을 그대로 유지하세요. MDN: 경로

Inkscape의 노드 유형은 이후의 대화형 편집을 제한합니다. 모퉁이 노드에서는 핸들을 각각 독립적으로 움직일 수 있습니다. 부드러운 노드에서는 두 핸들과 노드가 한 직선 위에 놓입니다. 대칭 노드에서는 두 핸들의 길이도 같게 유지됩니다. 자동 부드러운 노드는 노드를 움직일 때 핸들의 길이를 자동으로 조정합니다. 노드 유형 정보

최종 수치를 배치하기 전에 원하는 노드 동작을 선택하세요. 제어점을 각각 독립적으로 지정하려면 모퉁이 노드를 선택하는 것이 유용합니다. 부드럽게 이어지는 연결부를 만들려면 공유 노드 양쪽의 좌표가 호환되도록 계획한 다음, 노드 유형을 변경한 뒤 최종 값을 확인하세요.

예를 들어 공유 노드가 (200,120)에 있고 들어오는 제어점이 (200,40)이라고 가정해 보겠습니다. 나가는 제어점이 (200,200)에 있으면 그 노드를 기준으로 반사한 위치는 2 × (200,120) − (200,40)입니다. 이 예시 계산에서 핸들 벡터의 길이는 같고 방향은 서로 반대입니다. 대칭 연결부의 좌표를 구체적으로 확인하는 방법입니다.

다음 항목을 순서대로 확인하세요.

1. 요소를 확인합니다. 속성을 바꾸기 전에 선택한 경로의 ID를 확인합니다.
2. 좌표 쌍을 식별합니다. 필요한 경우 시작 노드, 첫 번째 제어점, 두 번째 제어점, 끝점을 종이에 표시합니다.
3. 명령 문자를 확인합니다. 숫자가 절대 좌표인지, 상대 좌표인지, 축약형인지 확인합니다.
4. 좌표 변환을 확인합니다. viewBox, 경로 변환 및 부모 요소의 변환을 살펴봅니다.
5. 이후 편집 내용을 확인합니다. 핸들을 드래그하거나 노드 유형을 바꾼 뒤 좌표를 다시 확인합니다.
6. 원래 값을 보존합니다. 편집으로 의도하지 않은 세그먼트가 바뀌었을 때 복원할 수 있도록 완전한 d 문자열을 복사해 둡니다.

정밀한 캐릭터 윤곽 작업을 마칠 때는 눈에 보이는 윤곽과 저장된 제어점 좌표를 모두 확인하세요. 명령 유형과 좌표계가 분명하면 정확한 핸들 배치는 추적하기 쉬운 간단한 편집이 됩니다. 세그먼트를 식별하고, 원하는 좌표 쌍을 변경한 뒤, 결과를 확인하세요.

• 노드 도구 옵션 — Inkscape 초보자 가이드
• 노드 도구로 경로 편집하기 — Inkscape 초보자 가이드
• 노드 유형 정보 — Inkscape 초보자 가이드
• Inkscape 키보드 및 마우스 참조 — 문서 소스
• 경로 — SVG 2, W3C
• 좌표계, 변환 및 단위 — SVG 2, W3C
• 경로 — MDN Web Docs