vector-networks

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

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 샘플링과 곡선 피팅을 결합하는 방식이 실용적인 해결책이 된다.

벡터 네트워크 소개 | 피그 (새 탭에서 열림)

Figma는 기존의 단일 경로(path) 모델을 확장한 **벡터 네트워크(vector networks)** 를 소개한다. 벡터 네트워크는 점과 선을 자유롭게 연결·분리할 수 있어 복잡한 도형을 더 직관적으로 편집하게 해주며, 기존 벡터 데이터와의 호환성도 유지한다. 직접 곡선을 구부리고 영역을 클릭해 채우거나 뚫을 수 있어, 기존 벡터 편집기의 불편한 동작을 크게 줄이는 것이 결론이다. ## 기존 경로 모델의 한계 - 기존 path는 두 끝점을 가진 선과 곡선이 하나의 연속된 체인을 이루는 구조다. - 펜 플로터가 선을 따라 이동하듯, 점과 곡선을 정해진 순서로 연결해야 한다. - 세 개 이상의 선이 한 점에 연결되는 구조를 표현하기 어렵다. - 일부를 삭제하거나 도형을 분리·재결합할 때 사용자가 연결 관계를 직접 관리해야 해 조작이 부자연스럽다. - 선을 연결하거나 해제하는 동작도 상황에 따라 다르게 작동해 직관성이 떨어진다. ## 자유로운 연결을 지원하는 벡터 네트워크 - 벡터 네트워크에서는 임의의 두 점 사이에 선이나 곡선을 연결할 수 있다. - 모든 선이 하나의 단일 체인을 이룰 필요가 없으므로, 여러 선이 한 점에서 만나는 구조를 자연스럽게 표현한다. - 도형의 일부를 어디서든 삭제하고, 필요한 요소를 다시 연결할 수 있다. - 선의 cap과 join 스타일이 분기점에서도 자연스럽게 동작한다. - 기존 path와 동일한 곡선 데이터를 사용하므로 기존 벡터 데이터와의 하위 호환성을 유지한다. - 사용자 테스트에서는 많은 사용자가 구조적 차이를 의식하지 않아도 원하는 방식으로 편집할 수 있었다. ## 곡선을 직접 조작하는 벤드 도구 - 기존 벡터 그래픽은 cubic Bézier 곡선과 곡선 바깥에 위치한 control handle로 형태를 조정한다. - 따라서 사용자는 곡선 자체가 아니라 멀리 떨어진 핸들을 움직여야 했다. - Figma의 bend tool은 곡선 위를 직접 드래그할 수 있게 한다. - 사용자가 곡선을 원하는 위치로 움직이면 편집기가 적절한 control handle의 위치를 자동으로 계산한다. - 새로운 곡선 형식을 도입하는 대신 기존 Bézier 기반 구조를 유지해 호환성과 직접 조작성을 함께 확보했다. ## 직관적인 영역 채우기 - 기존 벡터 엔진은 winding number를 사용해 영역의 안팎을 판단한다. - 이 방식은 곡선을 시계 방향 또는 반시계 방향으로 그렸는지에 따라 채우기 결과가 달라진다. - 사용자는 곡선의 방향을 직접 볼 수 없기 때문에 구멍과 채우기 동작을 예측하기 어렵다. - Figma는 기본적으로 곡선이 둘러싼 모든 영역을 자동으로 채운다. - 구멍이 필요하면 곡선 방향을 조정하는 대신 paint bucket 도구로 해당 영역을 직접 토글해 채우기를 제거한다. - 이 방식은 음의 공간을 별도로 구성해야 했던 기존 접근보다 도형 내부와 구멍을 이해하기 쉽다. ## 개발 과정과 설계 방향 - 경로 모델처럼 기본적인 벡터 구조를 다시 설계하는 과정은 여러 시행착오를 거쳤다. - 초기에는 더 강력한 곡선 형식도 실험했지만, 기존 벡터 데이터와의 호환성을 위해 Bézier 곡선을 유지했다. - 영역 채우기는 특히 어려운 문제였으며, 사용자가 구멍을 직접 정의해야 하는 접근은 복잡하다는 결론을 내렸다. - 최종적으로 자유로운 연결, 직접 곡선 조작, 영역 토글 방식을 결합해 기존 편집기의 동작을 더 자연스럽게 만들었다. 벡터 네트워크의 핵심 가치는 새로운 그래픽 형식을 도입하는 데 있지 않고, 기존 벡터 구조를 유지하면서도 편집 방식을 사용자의 직관에 맞게 바꾼 데 있다. 벡터 편집기를 설계할 때는 내부 데이터 모델의 제약보다 사용자가 점·선·영역을 어떻게 직접 조작하고 싶어 하는지를 우선하는 것이 실용적인 방향이다.