벡터 네트워크의 삭제 및 복구 | (새 탭에서 열림)

Figma의 “삭제 후 복구(Delete and Heal)”는 정점을 단순히 제거하는 기능이 아니라, 주변 선과 곡률을 최대한 보존하며 벡터 구조를 재구성하는 작업이다. 단순한 경로에서는 인접 정점을 연결하면 되지만, 곡선과 벡터 네트워크에서는 베지어 곡선 근사와 그래프 구조를 함께 고려해야 한다. Figma는 이 기능을 통해 복잡한 벡터 네트워크에서도 자연스러운 편집 결과를 제공한다.

삭제와 삭제 후 복구의 차이

• 일반적인 정점 삭제는 해당 정점에 연결된 모든 선분과 그 선분에 닿는 채우기 영역을 함께 제거한다.
• “삭제 후 복구”는 삭제된 정점 양쪽의 구조를 새 선으로 연결해 기존 형태를 유지하려는 기능이다.
• 한쪽에만 선이 연결된 정점은 연결할 대상이 없으므로 선을 제거한다.
• 삼각형처럼 정점 수가 줄어드는 경우에도 결과가 항상 같지는 않다.
  • 어떤 경우에는 두 정점 사이의 단일 선으로 축소된다.
  • 다른 경우에는 두 개의 선이 유지될 수 있다.
• Figma는 정점과 선의 연결 관계에 따라 결과를 다르게 처리한다.

곡선의 형태를 보존하는 복구

• 곡선 위의 정점을 삭제하면 단순히 양 끝점을 직선으로 연결할 경우 기존 곡률이 사라진다.
• 다른 도구는 인접 정점의 곡률 핸들 위치를 그대로 유지하는 경우가 많다.
• Figma는 원래 곡선을 최대한 근사하도록 인접 정점의 제어 핸들을 조정한다.
• 각 곡선 선분은 cubic Bézier curve로 표현된다.
• 복구 문제는 다음 두 개의 cubic Bézier 곡선을 하나의 곡선으로 근사하는 문제로 바뀐다.
  • 첫 번째 곡선: (P0, P1, P2, P3)
  • 두 번째 곡선: (P3, P4, P5, P6)
  • 새 곡선: (P’0, P’1, P’2, P’3)
• 벡터 네트워크의 나머지 부분을 변경하지 않기 위해 새 곡선의 양 끝점은 고정한다.
  • P’0 = P0
  • P’3 = P6
• 따라서 계산해야 하는 것은 새 곡선의 제어점 P’1, P’2다.

베지어 곡선 근사 알고리즘

• 먼저 두 기존 곡선을 따라 여러 샘플 점을 생성한다.
• cubic Bézier의 매개변수 t에 값을 대입해 곡선 위의 점을 계산한다.
• 두 곡선이 공유하는 끝점은 중복해서 세지 않는다.
  • 예를 들어 각 구간에 여러 t 값을 적용하면 전체 연결 곡선 위의 샘플 점 목록을 얻을 수 있다.
• 생성된 점들을 하나의 cubic Bézier 곡선으로 피팅한다.
• Figma는 Philip J. Schneider의 “An Algorithm for Automatically Fitting Digitized Curves” 알고리즘과 관련 구현을 활용한다.
• 결과적으로 삭제 전의 곡률을 완벽히 복원하지는 않지만, 시각적으로 자연스러운 단일 곡선을 얻는다.

벡터 네트워크와 그래프 기반 삭제

• Figma의 벡터 객체는 일반적인 순차 경로가 아니라 무방향 그래프로 표현된다.
• 더 정확히는 각 선 자체의 식별성을 가진 무방향 멀티그래프다.
• 따라서 하나의 정점에 최대 두 개의 선만 연결된다는 경로 기반 도구의 가정을 사용할 수 없다.
• 삭제 대상 정점에 세 개 이상의 선이 연결될 수 있으며, 이 경우 어떤 선끼리 연결할지 결정해야 한다.
• 연결된 선의 개수가 홀수라면 모든 인접 선을 제거한다.
  • 남는 선을 자연스럽게 짝지을 방법이 없기 때문이다.
• 연결된 선의 개수가 짝수라면 선들을 쌍으로 묶어 새 선을 만든다.
• 이때 “서로 반대편에 있는 선”을 정의하기 위해 정점에서 뻗어나가는 선을 각도 기준으로 정렬한다.
• 정렬된 방향을 바탕으로 서로 마주 보는 선끼리 연결해 네트워크 구조를 복구한다.

실용적인 결론

벡터 편집기의 삭제 기능은 단순한 데이터 제거가 아니라, 그래프 연결성·곡선 근사·사용자 기대를 함께 처리하는 기하학적 재구성 문제다. 특히 벡터 네트워크를 지원하려면 정점 차수가 2를 넘는 상황과 곡선 제어점까지 고려해야 하며, Bézier 샘플링과 곡선 피팅을 결합하는 방식이 실용적인 해결책이 된다.