node tree 설계

Figma-like 에디터의 문서는 도형 목록 하나로 끝나지 않습니다. frame 안에 rectangle이 있고, group 안에 text가 있고, component instance 안에 child가 있습니다.

이 구조를 scene graph 또는 node tree라고 부르겠습니다.

node는 문서의 기본 단위다

가장 단순한 node는 이런 정보를 가집니다.

const node = {
  id: "rect-1",
  type: "rect",
  parentId: "frame-1",
  children: [],
  transform: [1, 0, 0, 1, 120, 80],
  size: [200, 120],
  fills: [{ type: "solid", color: [0.05, 0.58, 0.53, 1] }]
};

여기서 중요한 것은 renderer가 아니라 문서 의미입니다. GPU buffer, shader program, texture handle은 node에 들어가지 않습니다.

강의 전체에서 쓸 최소 타입

capstone까지 같은 이름을 쓰기 위해 문서 모델의 최소 타입을 먼저 고정합니다.

type NodeId = string;
type Mat3 = [number, number, number, number, number, number, number, number, number];
type Color = [number, number, number, number];

type Fill = { type: "solid"; color: Color } | { type: "image"; assetId: string; opacity: number };
type Stroke = { color: Color; width: number; align: "inside" | "center" | "outside" };

interface BaseNode {
  id: NodeId;
  name: string;
  type: "page" | "frame" | "group" | "rect" | "text" | "image";
  parentId: NodeId | null;
  children: NodeId[];
  localMatrix: Mat3;
  visible: boolean;
  locked: boolean;
}

interface RectNode extends BaseNode {
  type: "rect";
  width: number;
  height: number;
  fills: Fill[];
  strokes: Stroke[];
}

interface FrameNode extends BaseNode {
  type: "frame";
  width: number;
  height: number;
  clipsContent: boolean;
  fills: Fill[];
}

interface SceneDocument {
  version: 1;
  rootIds: NodeId[];
  nodesById: Map<NodeId, SceneNode>;
}

type SceneNode = BaseNode | RectNode | FrameNode;

이 타입에는 renderer resource가 없습니다. worldMatrix, bounds, GPU buffer는 렌더링 전에 계산하거나 cache합니다.

tree는 포함 관계를 표현한다

flat list만으로도 간단한 에디터는 만들 수 있습니다. 하지만 frame, group, clipping, nested transform을 다루려면 parent/child 관계가 필요합니다.

Page
  Frame
    Rect
    Text
  Group
    Image
    Vector

tree는 렌더링 순서뿐 아니라 편집 동작의 기준도 됩니다. 부모를 움직이면 자식도 같이 움직이고, frame은 child를 clip할 수 있습니다.

id map과 tree를 함께 둔다

tree traversal만 있으면 특정 id의 node를 찾을 때 느려질 수 있습니다. 그래서 실무에서는 id map을 함께 둡니다.

rootIds: ["frame-1"]
nodesById: {
  "frame-1": {...},
  "rect-1": {...}
}

tree 관계는 parentId/children으로 표현하고, 조회는 map으로 빠르게 합니다.

오늘의 핵심

node tree는 편집기의 문서 모델입니다.

node = 의미 있는 편집 단위
tree = 포함 관계
id map = 빠른 조회

이 구조가 안정되어야 renderer, layer panel, inspector, undo/redo가 같은 문서를 바라볼 수 있습니다.