retained mode vs immediate mode

CSS와 DOM으로 UI를 만들 때 우리는 retained mode 환경에 살고 있습니다. 요소를 한 번 만들어두면 브라우저가 그 구조를 계속 기억합니다.

const node = document.createElement("div");
node.style.transform = "translate(120px, 80px)";
document.body.append(node);

이 코드를 실행하고 나면 DOM 안에 요소가 남습니다. 나중에 style을 바꾸면 브라우저가 이전 상태와 현재 상태를 비교해서 필요한 렌더링을 다시 합니다.

Canvas와 WebGL/WebGPU는 보통 다르게 생각합니다. 매 프레임 우리가 다시 그립니다.

clear
draw rect A
draw rect B
draw selection outline
present

이 차이가 편집기 구조를 크게 바꿉니다.

retained mode는 상태를 시스템이 기억한다

DOM은 retained mode API입니다. 우리가 요소와 속성을 등록하면 브라우저가 그 상태를 유지합니다.

DOM tree
  -> style
  -> layout
  -> paint
  -> composite

그래서 CSS 기반 에디터에서는 화면에 있는 것과 모델이 가까워 보입니다. 실제로는 DOM도 브라우저 내부 렌더링 모델로 변환되지만, 개발자 입장에서는 요소가 살아 있는 객체처럼 보입니다.

이 방식의 장점은 큽니다.

하지만 수천 개의 도형, 복잡한 overlay, 빠른 pan/zoom, 직접 제어하는 픽셀 효과가 필요하면 이 장점이 부담으로 바뀔 수 있습니다.

Canvas 2D를 보면 immediate mode 감각이 잘 드러납니다.

ctx.clearRect(0, 0, width, height);
ctx.fillRect(120, 80, 200, 120);
ctx.strokeRect(120, 80, 200, 120);

이 명령은 실행되는 순간 픽셀을 바꿉니다. fillRect가 끝난 뒤 Canvas가 “사각형 객체”를 기억하지 않습니다. 다음 프레임에 위치가 바뀌면 다시 지우고 다시 그립니다.

WebGL/WebGPU도 API 모양은 다르지만 편집기 입장에서는 같은 방향입니다. buffer와 pipeline 같은 GPU 리소스는 유지하지만, 화면에 어떤 순서로 무엇을 그릴지는 render pass에서 다시 구성합니다.

frame N:
  upload changed data
  encode draw commands
  submit

frame N + 1:
  upload changed data
  encode draw commands
  submit

여기서 중요한 결론이 나옵니다. GPU 에디터 전체가 immediate mode가 되는 것은 아닙니다.

편집기 문서 자체는 retained model이어야 합니다.

const scene = {
  nodes: [
    { id: "a", type: "rect", x: 120, y: 80 },
    { id: "b", type: "rect", x: 280, y: 140 }
  ],
  selection: ["a"]
};

사용자가 만든 도형, 선택 상태, 레이어 순서, undo history는 계속 남아야 합니다. 사라지는 것은 DOM 요소이지 문서 모델이 아닙니다.

그래서 우리는 이렇게 나눕니다.

editor core: retained model
renderer: immediate draw commands

이 구분이 있으면 CSS 경험을 버릴 필요가 없습니다. CSS에서 DOM이 해주던 retained 상태 관리를 이제 editor core가 맡고, 렌더러는 그 상태를 빠르게 그리는 일에 집중합니다.

초반 구현에서 자주 나오는 실수는 renderer cache를 문서 상태처럼 쓰는 것입니다.

GPU buffer에 있으니까 이게 node 위치다
selection color를 shader uniform에 넣었으니 이게 선택 상태다

이렇게 되면 undo/redo, export/import, WebGL/WebGPU 교체가 어려워집니다. GPU buffer는 캐시입니다. 캐시는 버리고 다시 만들 수 있어야 합니다. 문서 상태는 scene model에 있어야 합니다.

좋은 기준은 이 질문입니다.

브라우저를 새로고침한 뒤 JSON만 읽어서 복원해야 하는가?

그렇다면 editor model에 들어가야 합니다. 특정 renderer가 빠르게 그리기 위해 만든 값이라면 renderer cache에 둡니다.

CSS에서 GPU canvas로 넘어갈 때 retained mode를 버리는 것이 아닙니다. retained model을 브라우저 DOM에서 우리 editor core로 옮기는 것입니다.

CSS/DOM editor:
  browser keeps DOM state
  browser renders changes

GPU editor:
  editor core keeps scene state
  renderer draws current frame

이 차이를 이해하면 다음 레슨의 hit testing도 자연스럽게 이어집니다. DOM event target이 없으니, retained scene model을 기준으로 직접 맞은 도형을 찾아야 합니다.