Metlivi 블로그

기존 벡터 노드를 기울어진 선에 정렬하는 방법

기존 벡터 노드를 기울어진 선에 정렬하려면 두 개의 고정 기준점을 사용해 선을 정의한 다음, 나머지 노드를 그 선 위로 옮기세요. 정확하게 배치하려면 좌표를 계산해 각 노드에 개별적으로 입력하세요. 대화형 편집을 하려면 각 노드를 임시 직선 기준 경로에 스냅하세요.

이 튜토리얼은 노드를 유지하면서 기존 벡터 캐릭터 윤곽이나 세부 요소를 다듬으려는 사용자를 위한 것입니다. 기본 작업 흐름에서는 Inkscape의 좌표 필드를 사용하고, 대안으로 Affinity Designer 2에서 도형 스냅을 사용하는 방법을 설명합니다. 어느 방법도 아트워크를 다시 만들 필요가 없습니다.

2026년 10월 29일읽는 데 8분작성: Metlivi Editorial Team
섹션 1

노드를 정렬하기 전에 고정할 항목을 결정하세요

의도한 기울기를 정의하는 두 개의 기준 노드 A와 B를 선택하세요. 두 노드는 더 큰 캐릭터 윤곽 안에서 직선 구간의 양 끝을 표시할 수 있습니다. 좌표를 기록하고 중간 노드를 재배치하는 동안 그대로 두세요.

그다음 중간 노드를 어떤 방식으로 이동할지 결정하세요. “선을 따라 정렬”은 도착 위치를 설명하지만, 이동 방향까지 지정하지는 않습니다. 유용한 방법 세 가지는 다음과 같습니다.

배치 규칙 유지되는 항목 선택할 때
각 노드의 X 좌표 유지 기존 수평 위치 노드 위치가 이미 수평 기준 위치와 일치하는 경우
각 노드의 Y 좌표 유지 기존 수직 위치 수평 위치보다 수직 위치가 더 중요한 경우
선에 수직으로 투영 각 노드의 가장 짧은 이동 거리 의도한 선에서 옆으로 벗어난 정도를 없애려는 경우

결과 노드가 모두 같은 선 위에 있더라도 이 규칙에 따라 결과는 달라질 수 있습니다. 간격을 균등하게 만드는 것은 별도의 작업입니다. 정렬만으로 노드 사이의 간격이 같아지지는 않습니다. Inkscape 문서에서도 가로 또는 세로 정렬과 동일 간격 분포를 별도로 설명합니다. 정렬 및 분포 — Inkscape 초보자 가이드

섹션 2

전체 도형을 움직이지 않고 기존 노드 선택하기

Inkscape에서 N 또는 F2를 눌러 노드 도구를 활성화한 다음 기존 경로를 클릭해 노드를 표시하세요. 위치를 바꾸려는 특정 노드를 클릭합니다. 노드 도구는 노드 위치와 인접 세그먼트를 제어하는 핸들을 포함해 경로의 형상을 편집합니다. 노드 도구로 경로 편집하기 — Inkscape 초보자 가이드

편집하기 전에 작업 사본을 저장하고 대상 구간에 어떤 노드가 포함되는지 기록하세요. A와 B의 좌표, 이동할 각 노드의 원래 좌표, 선택한 배치 규칙을 기록하면 유용합니다. 이렇게 하면 작업을 반복할 수 있고 결과를 명확하게 비교할 수 있습니다.

아래 좌표 작업 흐름에서는 노드를 하나씩 선택하세요. Inkscape의 노드 도구 컨트롤에는 X 및 Y 필드와 좌표 단위 선택기가 있습니다. 한 번에 노드 하나만 선택하면 어떤 좌표를 바꾸는지 명확해집니다. 노드 도구 옵션 — Inkscape 초보자 가이드

한 경로 안의 노드가 대상인 경우 오브젝트 정렬 명령을 사용하지 마세요. Inkscape의 문서화된 정렬 작업 흐름은 노드 도구가 활성화되어 있는지, 선택 도구가 활성화되어 있는지에 따라 달라집니다. 정렬 및 분포 — Inkscape 초보자 가이드

섹션 3

수평 위치를 유지하면서 정확한 위치 계산하기

A = (Ax, Ay)와 B = (Bx, By)를 지나는 기울어진 선에서 수평 좌표가 x인 점이 선 위에 있으려면 다음 조건을 만족해야 합니다.

y = Ay + (x − Ax) × (By − Ay) / (Bx − Ax)

이 식은 각 노드의 X 좌표를 변경하지 않아야 할 때 실용적인 정렬 방법을 제공합니다. 편집기의 전용 명령이 아니라 기하학적 계산입니다.

같은 문서 단위로 표현한 다음 좌표는 설명을 위한 예시입니다. A = (20, 30), B = (100, 70)이라고 합시다. 두 점의 수평 차이는 80이고 수직 차이는 40이므로 선의 방정식은 다음과 같습니다.

y = 30 + (x − 20) × 0.5

기존 중간 노드 세 개의 좌표가 다음과 같다고 가정해 보겠습니다. X 값을 유지하면 목표 좌표는 다음과 같습니다.

노드 원래 위치 목표 위치
P1 (40, 50) (40, 40)
P2 (60, 40) (60, 50)
P3 (80, 65) (80, 60)

Inkscape에서 목표 좌표를 적용하세요.

  1. 노드 도구로 P1만 선택합니다.
  2. 좌표 단위가 계산에 사용한 단위와 일치하는지 확인합니다.
  3. X를 40으로 유지하고 Y에 40을 입력합니다.
  4. P2만 선택하고 X를 60으로 유지한 채 Y = 50을 입력합니다.
  5. P3만 선택하고 X를 80으로 유지한 채 Y = 60을 입력합니다.
  6. 기록해 둔 좌표와 A 및 B의 좌표를 다시 확인합니다.

이제 세 노드가 변경하지 않은 기준점으로 정의된 선 위에 있습니다. 이 예시에서 수평 간격이 동일한 것은 선택한 예시 좌표 때문입니다. 정렬 계산 자체가 간격을 균등하게 만들지는 않습니다.

Bx − Ax가 0이면 이 공식으로 수직 목표선 위의 X 좌표를 유지할 수 없습니다. 수직선이라면 모든 목표 노드의 X를 Ax로 설정하세요. 거의 수직인 선에서는 작은 수평 차이가 큰 수직 이동에 해당할 수 있으므로 Y를 유지하는 편이 더 유용할 수 있습니다.

대신 Y를 유지하려면 x = Ax + (y − Ay) × (Bx − Ax) / (By − Ay)를 사용하세요. 이 방식은 By와 Ay가 달라야 합니다. 문서 좌표와 스크린샷에서 측정한 값을 섞지 말고, 모든 좌표를 동일한 편집기 필드와 단위 체계에서 읽으세요.

섹션 4

최소한으로 이동하려면 수직 투영 사용하기

X나 Y 중 어느 것도 고정할 필요가 없다면 수직 투영을 사용해 무한한 목표선 위에서 가장 가까운 점을 구할 수 있습니다. 이는 대체로 올바른 기울어진 구간 주변에서 중간 노드가 약간 벗어나 있을 때 유용합니다.

기존 노드 P = (Px, Py)에 대해 먼저 선의 방향을 계산합니다.

dx = Bx − Ax

dy = By − Ay

그런 다음 선을 따라 노드의 위치와 투영된 좌표를 계산합니다.

t = ((Px − Ax) × dx + (Py − Ay) × dy) / (dx² + dy²)

Qx = Ax + t × dx

Qy = Ay + t × dy

같은 예시 기준점을 원래 노드에 적용하면 결과는 다음과 같습니다.

노드 원래 위치 수직 투영 목표 위치
P1 (40, 50) (44, 42)
P2 (60, 40) (56, 48)
P3 (80, 65) (82, 61)

각 노드의 목표 좌표 두 개를 개별적으로 입력하세요. 이 값은 결정론적인 간단한 Python 계산으로 확인했습니다. 기하학을 설명하기 위한 예시이며, 특정 캐릭터 파일에서 측정한 값은 아닙니다.

두 가지 조건이 중요합니다. 첫째, A와 B는 서로 다른 점이어야 합니다. 기준점이 일치하면 분모가 0이 되어 선을 정의할 수 없습니다. 둘째, 이 계산은 무한한 선에 투영합니다. t 값이 0과 1 사이면 결과가 A와 B 사이에 놓이고, 그 범위를 벗어나면 끝점 너머에 놓입니다.

투영된 노드가 의도한 구간을 벗어나면 이동하기 전에 해당 노드를 검토하세요. 노드를 가장 가까운 끝점으로 자동으로 보내면 여러 노드가 한곳에 겹쳐져 의도한 배치가 달라집니다. 또한 이 공식만으로는 기존 경로의 노드 연결 순서가 되돌아가는 문제를 해결할 수 없습니다.

섹션 5

Affinity Designer 2에서 노드를 기울어진 기준 경로에 스냅하기

노드가 몇 개뿐이라면 좌표를 계산하는 것보다 임시 기준 경로를 사용하는 편이 간편할 수 있습니다. Affinity Designer 2에는 움직이는 노드를 선택한 곡선의 경로나 노드에 스냅하는 선택한 곡선의 도형에 스냅이라는 노드 도구 옵션이 문서화되어 있습니다. 노드 스냅 컨트롤은 전역 스냅과 별개로 작동합니다. 노드 도구 — Affinity Designer 2 도움말

이 문서화된 기능을 이 정렬 작업에 적용하는 방법은 다음과 같습니다.

  1. 필요한 기울기로 별도의 직선 기준 곡선을 만들어 두 기준 위치를 지나도록 배치합니다.
  2. 노드 도구로 아트워크 곡선과 기준 곡선을 선택합니다.
  3. 상황별 도구 모음에서 선택한 곡선의 도형에 스냅을 활성화합니다.
  4. 이동할 아트워크 노드 하나만 선택하고 기준 곡선 쪽으로 드래그합니다.
  5. 의도한 기준 도형 부분에 스냅되었는지 확인합니다.
  6. 두 기준 노드는 고정한 채 나머지 노드에도 반복합니다.
  7. 결과를 확인한 뒤 임시 곡선을 삭제합니다.

의도한 모든 도착 위치를 포함할 만큼 충분히 긴 기준 선분을 사용하세요. 끝점 근처에서는 노드가 원하는 내부 위치가 아니라 끝점에 놓이지 않았는지 확인합니다.

경로에 노드를 드래그하면 해당 경로 위의 위치가 도착점으로 설정됩니다. 이 동작만으로 수직 투영 또는 X나 Y 좌표 유지가 지정되지는 않습니다. 이러한 조건이 중요하면 계산한 좌표를 사용하세요. Affinity Designer 2에서는 변형 패널을 사용해 개별 노드를 재배치하는 방법도 문서화되어 있습니다. 곡선 및 도형 편집 — Affinity Designer 2 도움말

섹션 6

윤곽이 여전히 휘어 보이면 베지어 핸들 확인하기

노드를 정렬해도 눈에 보이는 윤곽이 반드시 직선이 되는 것은 아닙니다. 베지어 핸들은 연결 세그먼트의 모양을 제어하므로 두 노드가 선 위에 있더라도 세그먼트는 목표선에서 벗어나 휘어질 수 있습니다. 노드 도구로 경로 편집하기 — Inkscape 초보자 가이드

연결된 각 세그먼트를 따로 살펴보세요. 작업이 앵커 위치 정렬만 요구한다면 의도한 곡률을 유지하세요. 해당 구간 자체가 직선이어야 한다면 핸들도 적절히 조정해야 합니다. 직선 세그먼트를 사용하거나 관련 제어점을 목표선 위에 배치해 곡선이 지나치게 튀어나오지 않게 하세요.

두 기준 노드에서는 노드 유형을 바꾸기 전에 주변 윤곽을 고려하세요. Inkscape의 모서리 노드는 핸들을 서로 독립적으로 움직일 수 있지만, 매끄러운 노드는 두 핸들이 노드를 통과해 같은 선상에 놓이도록 합니다. 대칭 노드는 핸들의 길이도 같게 유지합니다. 이러한 제약은 직선 구간이 인접 곡선과 만나는 방식에 영향을 줍니다. 노드 유형에 관하여 — Inkscape 초보자 가이드

직선 구간이 곡선과 만나는 모서리에서는 핸들을 독립적으로 조정하는 것이 유용할 수 있습니다. 자연스럽게 이어지는 전환을 원한다면 필요한 접선 방향을 유지하세요. 모든 노드를 같은 유형으로 바꾸면 주변 캐릭터 세부 요소가 불필요하게 달라질 수 있습니다.

섹션 7

기준선을 제거하기 전에 정렬 확인하기

처음에 선택한 작업 기준에 따라 결과를 확인하세요.

  • 기준점: A와 B의 좌표가 기록한 값과 일치합니다.
  • 배치 규칙: 노드가 X를 유지하거나 Y를 유지하거나 계산한 수직 투영 위치에 놓여 있습니다.
  • 범위: 모든 중간 노드가 의도한 구간 안에 있습니다.
  • 경로 순서: 연결된 노드가 의도한 대로 구간을 따라갑니다.
  • 세그먼트 모양: 곡률과 전환이 원하는 윤곽과 일치합니다.
  • 정밀도: 좌표 반올림으로 눈에 띄는 편차가 생기지 않았습니다.

작업 예시에서는 정렬된 모든 좌표 쌍이 입력 정밀도 범위 내에서 y = 0.5x + 20을 만족해야 합니다. 이 수치 검사는 외관과 별개로 확인할 수 있습니다. 편집된 구간이 주변 디자인에 잘 어울려야 하므로 의도한 표시 크기에서도 캐릭터를 확인하세요.

두 기준점을 고정하고 이동 규칙을 신중하게 선택한 뒤 노드를 배치하고 연결 세그먼트를 확인하세요. 이렇게 하면 캐릭터 윤곽의 나머지 부분을 그대로 제어하면서 기존의 기울어진 구간을 반복 가능한 방식으로 정렬할 수 있습니다.

섹션 8

출처

관련 글

이 주제 더 살펴보기