사이드프로젝트 - 다이어그램 기능 계획 및 정리
생성일 : 2026.10.12 14:48
- 다이어그램 그리기와 이미지( PNG, SVG, JPEG 등) 추출 기능을 갖춘 웹 서비스를 목표로 함
- 구현은 주로 React Flow / Svelte Flow, Excalidraw, Fabric.js / Konva.js 중 하나를 선택하여 진행
- 핵심 기능은 캔버스(노드 추가·연결·이동), 툴바(도형·텍스트·지우개 등), 내보내기( PNG/JPEG, SVG, JSON) 등
- 파일 저장은 @react‑flow/node‑to‑image, html‑to‑image, exportToBlob, canvas.toDataURL 등을 활용해 간편히 구현
글쓰기 -> 팝업 -> 다이어그램 그리기
화면에서 다이어그램을 그리고 이미지(PNG, SVG, JPEG 등)로 추출하는 웹 서비스는 프론트엔드 엔지니어링 관점에서도 Canvas/SVG 렌더링, DOM 조작, 상태 관리, 파일 익스포트 등 다룰 거리가 알찬 주제입니다.
1. 주요 구현 방식 (기술 선택)
구현하려는 다이어그램의 복잡도와 자유도에 따라 보통 아래 3가지 라이브러리 중 하나를 선택합니다.
React Flow / Svelte Flow (가장 추천 - 노드 기반 다이어그램)
특징: 순서도(Flowchart), 노드-간선(Node-Edge) 연결, 마인드맵 형태에 최적화
장점: 드래그 앤 드롭, 선 연결, 줌/팬(Zoom/Pan) 기능이 기본 탑재되어 있어 빠르게 완성도 높은 다이어그램 웹을 만들 수 있습니다.
이미지 저장:
@react-flow/node-to-image나html-to-image라이브러리를 붙이면 버튼 한 번에 PNG/SVG로 다운로드 가능합니다.
Excalidraw (손그림 느낌 / 자유 드로잉)
특징: Excalidraw의 핵심 패키지(
@excalidraw/excalidraw)를 가져와서 내 웹 서비스에 바로 이식할 수 있습니다.장점: 이미 완성된 오픈소스 화이트보드 엔진이라 퀄리티가 매우 높고, 자체 exportToBlob/exportToSvg API를 제공합니다.
Fabric.js / Konva.js (HTML5 Canvas 직접 제어)
특징: 도형, 텍스트, 이미지 등을 Canvas 위에 자유롭게 배치하고 조작하는 방식입니다.
장점: 커스텀 커맨드, 그래픽 편집기 느낌의 완전한 자유도를 원할 때 적합합니다.
canvas.toDataURL()로 이미지 저장이 매우 쉽습니다.
2. 핵심 기능 요구사항 예시
캔버스 영역: 노드(상자) 추가, 텍스트 입력, 노드 간 화살표 연결, 위치 이동(Drag & Drop)
툴바 (Toolbar): 사각형, 원, 화살표, 텍스트, 지우개 등 도구 선택
내보내기 (Export):
PNG/JPEG: 결과물을 이미지 파일로 다운로드SVG: 벡터 형태로 깨지지 않고 다운로드JSON: 현재 그린 다이어그램 상태를 저장하고 나중에 다시 불러오기 (Import/Export)