컴포넌트 인스턴스의 토대를 재구축한 방법 | Figma 블로그 (새 탭에서 열림)
10년간 컴포넌트 인스턴스를 담당해 온 Figma의 `Instance Updater`는 오토 레이아웃, 변수, variants, 컴포넌트 속성 등 기능 확장으로 한계에 도달했다. Figma는 이를 대체하기 위해 반응형 기반의 범용 시스템인 `Materializer`를 구축하고, 인스턴스의 구조·속성 계산과 레이아웃·변수 평가를 분리했다. 그 결과 대규모 디자인 시스템에서 자주 수행하는 작업이 최대 50% 빨라졌고, 향후 동적 기능을 확장할 수 있는 기반도 마련했다. ## 컴포넌트 인스턴스의 기본 구조 - 메인 컴포넌트는 크기, 색상, 구조 같은 속성을 정의한다. - 인스턴스는 메인 컴포넌트의 변경 사항을 자동으로 반영하는 스마트 복사본이다. - 기존에는 `Instance Updater`라는 독립 런타임이 다음 작업을 모두 담당했다. - 인스턴스 속성 해석 - 인스턴스 내부 구조 관리 - 메인 컴포넌트와의 동기화 - 레이아웃 엔진 등 다른 시스템은 인스턴스를 만나면 `Instance Updater`에 처리를 위임했다. ## 기존 아키텍처가 한계에 도달한 이유 - Figma에는 오토 레이아웃(2019), variants(2020), 컴포넌트 속성(2022), 변수(2023) 등이 추가되며 인스턴스가 훨씬 복잡해졌다. - 현대적인 인스턴스는 다음 요소를 동시에 포함할 수 있다. - variants와 변수 바인딩 - 오토 레이아웃 규칙 - 고유한 오버라이드를 가진 중첩 인스턴스 - 변수 모드 - 복잡한 반응형 동작 - 기능이 추가될 때마다 `Instance Updater`에 개별적이고 특수한 로직을 덧붙였다. - 그 결과 인스턴스 처리, 레이아웃 계산, 변수 평가가 서로 강하게 얽혔다. - 작은 변경도 인스턴스 트리 전체에 전파될 수 있었다. - 변수 모드 하나를 바꾸면 수천 개 노드의 인스턴스 업데이트와 레이아웃 재계산이 발생할 수 있다. - 서로 다른 시스템이 같은 서브트리를 반복적으로 무효화하는 문제도 생겼다. - 인스턴스 교체나 속성 변경 시 편집기가 수 초 동안 멈추기도 했다. ## 아키텍처를 근본적으로 재설계한 목표 - 점진적인 최적화만으로는 문제를 해결하기 어렵다고 판단하고 구조 자체를 다시 설계했다. - 첫 번째 목표는 관심사의 분리였다. - 인스턴스 시스템은 메인 컴포넌트를 기반으로 어떤 속성과 자식 구조를 제공할지만 결정한다. - 레이아웃은 레이아웃 시스템이 전담한다. - 변수 평가는 변수 시스템이 전담한다. - 두 번째 목표는 세밀한 무효화(granular invalidation)다. - 기존 시스템은 변경이 발생하면 인스턴스 전체를 갱신했다. - 새 구조에서는 실제로 변경된 트리의 일부만 업데이트한다. - 깊게 중첩된 컴포넌트에서 불필요한 재귀적 작업을 줄일 수 있다. - 또한 인스턴스 전용 해결책이 아니라, 다른 기능에도 사용할 수 있는 범용 반응형 프레임워크를 목표로 삼았다. ## Materializer와 파생 서브트리 - Figma는 새 아키텍처를 지원하기 위해 `Materializer`를 만들었다. - `Instance Updater`가 컴포넌트 인스턴스에 특화된 시스템이었다면, `Materializer`는 Figma 문서 트리 전반에서 동작하는 범용 시스템이다. - Materializer의 핵심 역할은 **파생 서브트리(derived subtree)**를 생성하고 유지하는 것이다. - 파생 서브트리는 다른 원천 데이터로부터 구조와 속성이 계산되는 서브트리다. - 컴포넌트 인스턴스뿐 아니라 외부 CMS의 원본 콘텐츠와 동기화해야 하는 리치 텍스트 노드에도 같은 개념을 적용할 수 있다. - 따라서 인스턴스 기능 개선을 넘어, 외부 데이터나 다른 상태에 따라 문서 트리를 동적으로 구성하는 기능의 기반이 된다. ## 실용적인 결론 복잡한 트리 기반 시스템에서는 모든 변경 때 전체 트리를 다시 계산하기보다, 원천 데이터와 파생 결과를 분리하고 변경된 부분만 무효화하는 구조가 효과적이다. 또한 기능별 책임을 명확히 나누고 반응형 업데이트·의존성 추적을 범용 인프라로 추출하면, 성능 개선과 새로운 기능 확장을 동시에 달성할 수 있다.