플러스프로젝트 배경
1) 문제점 - 기존 노드 기반 툴(n8n, Node-RED 등)은 자체 호스팅이 필요하거나 무거움 - 간단한 워크플로우 시각화만 필요한 경우에도 복잡한 설정이 요구됨 - 웹에서 바로 사용할 수 있는 경량 노드 에디터 부재 2) 프로젝트 목표 - 별도 설치 없이 브라우저에서 바로 사용 가능한 노드 에디터 개발 - 드래그앤드롭으로 직관적인 워크플로우 설계 지원 - PNG 내보내기로 문서화 및 공
프로젝트 성과
Canvas 렌더링 60fps 유지
requestAnimationFrame과 더티 플래그 패턴으로 100개 이상 노드에서도 60fps 렌더링 성능 달성
노드 연결 정확도 100% 달성
포트 위치 자동 계산 알고리즘으로 노드 크기/위치 변경 시에도 연결선이 정확히 유지됨
개발 기간 2주 내 MVP 완성
Next.js App Router와 TypeScript로 기획부터 배포까지 2주 만에 핵심 기능 구현 완료
핵심 기능
드래그앤드롭 노드 편집
팔레트에서 노드를 드래그하여 캔버스에 배치, 자유로운 위치 이동 및 삭제 지원. 6종 노드 타입 제공
진행 단계
기획 및 기술 검토
2025.01.
Canvas vs SVG 렌더링 비교 분석, 노드 데이터 구조 설계, UI/UX 와이어프레임 작성
프로젝트 상세
개인 SaaS 프로젝트로 웹 기반 노드 그래프 에디터를 기획부터 개발까지 단독 수행했습니다. [기술적 도전] - HTML5 Canvas API를 활용한 고성능 렌더링 구현 - Bezier 곡선 알고리즘으로 자연스러운 노드 연결선 표현 - 드래그앤드롭 시 실시간 좌표 계산 및 충돌 감지 로직 구현 - 줌/팬 기능에서 좌표계 변환 처리 [해결 방안] - requestAnimationFrame
