CSS 개발자를 위한 GPU 2D 에디터 만들기

Canvas, WebGL, WebGPU, Three.js로 Figma-like 에디터 구조 이해하기

강의 시작첫 레슨 보기

CSS에서 GPU로

DOM, CSS transform, SVG에 익숙한 사람이 Canvas/WebGL/WebGPU의 좌표계, 픽셀 버퍼, renderer boundary로 넘어갑니다.

Figma-like editor

camera, scene graph, hit testing, selection, snapping, command model, export/import를 실제 편집기 구조로 연결합니다.

2D renderer internals

batching, instancing, texture atlas, clipping, filters, render groups, culling, accessibility까지 제품화에 필요한 개념을 다룹니다.

어떤 강의인가요?

CSS로 그래픽 UI를 만들던 사람이 Canvas, WebGL, WebGPU, Three.js 기반의 Figma-like editor를 만들 수 있도록 설계한 107개 강의입니다.

이 강의는 WebGL API를 외우는 순서로 가지 않습니다. 먼저 DOM에서 공짜로 받던 box model, event target, z-index, accessibility가 GPU canvas로 넘어오면서 왜 사라지는지 확인하고, 그 빈자리를 scene model, camera, matrix, hit testing, renderer abstraction으로 채웁니다.

각 레슨은 짧은 Markdown 문서와 독립 실행 데모로 구성되어 있습니다. 문서에서 구조를 읽고, 데모에서 editor state가 어떻게 pixels로 바뀌는지 확인하는 흐름입니다.

학습 경로

CSS / DOM / SVG
  -> Canvas editor shell
  -> WebGL 2D renderer
  -> editor tool math
  -> Figma-like scene graph
  -> image / text / vector
  -> WebGPU backend
  -> Three.js bridge
  -> production appendices

본편은 001부터 071까지 이어지고, 072부터 107까지는 실무에서 필요한 디버깅, 호환성, asset pipeline, motion, production architecture, 2D renderer engine pattern, editor production gap을 부록으로 정리합니다.

다루는 범위

  • CSS box가 사라진 뒤 남는 scene model과 renderer boundary
  • Canvas size, DPR, backing store, render loop, viewport camera
  • WebGL context, clip space, shader, rectangle buffer, batching, instancing
  • pointer 좌표 변환, CPU hit testing, selection bounds, move/resize/rotate, marquee, snapping
  • node tree, transform inheritance, layer order, clipping, style model, undo/redo, JSON persistence
  • texture, atlas, text rendering, SVG/vector path, asset pipeline
  • WebGPU adapter/device/context, WGSL, render pipeline, bind group, fallback
  • Three.js를 WebGL backend로 쓰는 기준과 editor core 뒤에 붙이는 adapter 구조
  • debug overlay, frame capture, feature detection, context lost, GPU memory, export 전략
  • renderable type, texture cache, render group, culling, clipping, filter/batch, interactivity budget, accessibility layer
  • dirty invalidation, color/premultiplied alpha, stroke rule, text editing overlay, tool state machine, pixel regression test

최종 목표

이 강의의 목표는 큰 그래픽 라이브러리를 한 번 써보는 것이 아닙니다. 사용자가 만든 문서 상태를 renderer와 분리하고, WebGL/WebGPU/Three.js 같은 backend를 바꿔도 editor core가 유지되는 구조를 직접 만드는 것입니다.

editor state
  -> scene graph
  -> camera / matrix
  -> renderer backend
  -> tool state
  -> persisted document

작게는 rectangle editor에서 시작하지만, 끝에서는 Figma-like editor를 만들 때 어떤 구조가 오래 버티는지 판단할 수 있어야 합니다.