Infinite Canvas와 Tool-network 기반의 Next.js UI 자동 생성 시스템 구축

Building OpenCraft in Public: Making Web Design Simple Again

Adithya Vardhan Reddy2026년 6월 19일9분advanced

AI 요약

Context

Figma, IDE, Sandbox 등 파편화된 도구 사용으로 인한 설계 의도 유실 및 AI 생성 UI의 정형화된 품질 저하 문제 발생. 단순 채팅 기반 UI 생성기의 한계를 넘어 실제 Production-ready한 코드를 직접 조작하고 배포할 수 있는 통합 환경의 필요성 대두.

Technical Solution

O(1) 조회를 위한 Normalized entity state 도입을 통한 대규모 캔버스 요소 관리 최적화
Viewport와 Shape 리듀서를 분리하여 팬/줌 동작 시 불필요한 셰이프 렌더링을 방지하는 렌더링 전략 수립
Interaction state를 Ref로 관리하고 RAF throttling(8ms)을 적용하여 Freehand drawing의 렌더링 지연 해소
Inngest AgentKit 기반의 UI Coding Agent를 구축하여 단순 텍스트 생성이 아닌 파일 쓰기 및 터미널 명령 수행이 가능한 Tool-network 구조 설계
E2B Sandbox를 통한 격리된 Next.js 개발 서버 환경을 구축하여 실시간 코드 실행 및 검증 루프 구현
OpenRouter를 통한 Multi-model(Kimi, Gemini, MiniMax) 추상화 계층을 구축하여 비전 기반 UI 생성의 유연성 확보

실천 포인트

- 캔버스 기반 인터랙티브 툴 설계 시 상태 업데이트와 렌더링을 분리하는 Render Discipline 적용 검토 - AI 코드 생성 기능 구현 시 Raw Text 출력 방식에서 Tool-using Agent 방식으로의 전환 고려 - 고빈도 입력 이벤트(Drawing, Dragging) 처리 시 React State 대신 Ref와 RAF(requestAnimationFrame) 조합 활용

태그

#E2B Sandbox #Normalized State #Next.js #Infinite Canvas #Agentic Workflow

원문 읽기