태그: Canvas
이 태그가 달린 글 "Canvas".
XGEN Canvas Chat와 Harness 컴파일: 대화형 워크플로우를 실행 가능한 에이전트 파이프라인으로 만들기
대화로 만든 Canvas 워크플로우를 Harness 노드와 Compile 버튼으로 실행 가능한 에이전트 파이프라인으로 전환하면서 겪은 설계 판단을 정리한다. stage 로그, tool 입출력, LLM narration, 권한 전파, system prompt 주입, UI 재실행 버그까지 다룬다.
비주얼 워크플로우 에디터: 노드 기반 AI 파이프라인 설계
React + SVG 기반 커스텀 캔버스 에디터를 직접 구현한 과정. 노드 드래그 앤 드롭, 베지어 엣지, 포트 스냅핑, Undo/Redo 히스토리, 셀렉션 박스, 예측 노드 자동 생성까지.
커스텀 노드 에디터: 드래그 앤 드롭 + 엣지 스냅핑 구현
워크플로우 에디터의 핵심 인터랙션 구현. 노드 드래그 앤 드롭, 엣지 스냅핑(자동 연결), 포트 타입 호환성 체크, 줌/패닝 최적화까지 실전 구현기.
Next.js 기반 AI 워크플로우 에디터 만들기 (from scratch)
Next.js 15 + React 19 + TypeScript로 무한 캔버스 기반 워크플로우 에디터를 처음부터 구현한 과정. Canvas, Node, Edge 컴포넌트 설계부터 패닝/줌, 그리드 배경, 노드 드래그, forwardRef 패턴까지.