CSS Graphics Geometry

CSS로 Figma 같은 에디터를 만들기 위한 좌표, 행렬, 곡선 수학

강의 시작

Math first

좌표, 벡터, 행렬, 역변환, bounding box, 곡선 길이를 편집기 문제로 연결합니다.

CSS infinite canvas

viewport, camera, ruler, hit testing, selection, resize, snapping을 DOM 기반으로 구현합니다.

Figma to CSS

Figma node, layout, paint, gradient, VectorNetwork를 CSS/SVG 모델로 번역합니다.

어떤 강의인가요?

CSS로 Figma 같은 그래픽 툴을 만들고 싶은 사람을 위한 선형대수와 geometry 강의입니다. 단순히 transform, gradient, position 속성을 나열하지 않고, 그 뒤에 있는 좌표계, 벡터, 행렬, 거리 함수, 보간, path length를 먼저 설명합니다.

각 강의는 짧은 문서와 독립 실행 데모로 구성되어 있습니다. 문서에서 원리를 읽고, 데모에서 실제 DOM/CSS/SVG 값이 어떻게 바뀌는지 확인하는 흐름입니다.

다루는 범위

  • 좌표계, CSS pixel, local/world/screen 변환
  • 2D transform, CSS matrix, transform-origin, inverse matrix
  • infinite canvas의 camera, cursor anchored zoom, ruler, grid
  • hit testing, selection rectangle, resize/rotation handle, snapping, group/frame/clipping
  • CSS box, clip-path, gradient, stacking context, paint/composite
  • editor state, command model, undo/redo, JSON persistence
  • SVG viewBox, CTM, stroke hit testing, cubic Bezier editing, marker/mask/clipPath
  • Figma node/layout/paint/vector/gradient/VectorNetwork를 CSS/SVG로 옮기는 기준
  • motion timing, keyframe timeline, motion path, Bezier curve 길이 계산