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

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 곡선을 유지했다.
• 영역 채우기는 특히 어려운 문제였으며, 사용자가 구멍을 직접 정의해야 하는 접근은 복잡하다는 결론을 내렸다.
• 최종적으로 자유로운 연결, 직접 곡선 조작, 영역 토글 방식을 결합해 기존 편집기의 동작을 더 자연스럽게 만들었다.

벡터 네트워크의 핵심 가치는 새로운 그래픽 형식을 도입하는 데 있지 않고, 기존 벡터 구조를 유지하면서도 편집 방식을 사용자의 직관에 맞게 바꾼 데 있다. 벡터 편집기를 설계할 때는 내부 데이터 모델의 제약보다 사용자가 점·선·영역을 어떻게 직접 조작하고 싶어 하는지를 우선하는 것이 실용적인 방향이다.