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