1921 lines
62 KiB
Markdown
1921 lines
62 KiB
Markdown
# 🎯 노드 기반 데이터 제어 시스템 개선 계획
|
||
|
||
## 📋 문서 정보
|
||
|
||
- **작성일**: 2025-10-02
|
||
- **최종 수정일**: 2025-10-02
|
||
- **버전**: 1.5
|
||
- **상태**: 🎉 Phase 1 완료! (100%)
|
||
- **담당**: 개발팀
|
||
|
||
## 📈 구현 진행 상황
|
||
|
||
### ✅ 완료된 작업 (Phase 1)
|
||
|
||
#### Week 1 - 완료 ✓
|
||
|
||
- ✅ React Flow 11.10.4 통합 및 기본 설정
|
||
- ✅ 라이브러리 설치 및 설정
|
||
- ✅ 기본 캔버스 구현
|
||
- ✅ 그리드 배경 및 줌/팬 기능
|
||
- ✅ 기본 노드 타입 구현 (3개/3개)
|
||
- ✅ 테이블 소스 노드 (TableSourceNode)
|
||
- ✅ INSERT 액션 노드 (InsertActionNode)
|
||
- ✅ 필드 매핑 노드 (FieldMappingNode)
|
||
- ✅ 핵심 인프라
|
||
- ✅ TypeScript 타입 정의 완료 (types/node-editor.ts)
|
||
- ✅ Zustand 상태 관리 스토어 (flowEditorStore.ts)
|
||
- ✅ 노드 팔레트 설정 (nodePaletteConfig.ts)
|
||
|
||
#### Week 2 - 완료 ✓
|
||
|
||
- ✅ 드래그 앤 드롭 기능
|
||
- ✅ 도구 패널에서 캔버스로 드래그
|
||
- ✅ 노드 이동 및 재배치
|
||
- ✅ 다중 선택 및 그룹 이동
|
||
- ✅ 연결선 그리기
|
||
- ✅ 기본 연결 생성
|
||
- ✅ 연결 검증 (타입 호환성, 순환 참조, 중복 연결)
|
||
- ✅ 연결 스타일링 (smoothstep)
|
||
- ✅ 추가 노드 타입 구현 (4개 완료)
|
||
- ✅ 조건 분기 노드 (ConditionNode) - TRUE/FALSE 2개 출력
|
||
- ✅ 외부 DB 소스 노드 (ExternalDBSourceNode) - DB 타입별 색상
|
||
- ✅ UPDATE 액션 노드 (UpdateActionNode) - WHERE 조건 포함
|
||
- ✅ DELETE 액션 노드 (DeleteActionNode) - 경고 메시지
|
||
|
||
**마일스톤 1 완료**: 7개 노드 타입 구현 완료 (58%)
|
||
|
||
#### Week 3 - 완료 ✓
|
||
|
||
- ✅ 속성 편집 기능 (완료)
|
||
- ✅ 노드 선택 이벤트 핸들러 (onSelectionChange)
|
||
- ✅ 속성 패널 프레임워크 (PropertiesPanel)
|
||
- ✅ 노드 타입별 속성 라우팅
|
||
- ✅ 7개 노드 속성 편집 UI 완성
|
||
- ✅ TableSource: 테이블명, 스키마, 출력 필드
|
||
- ✅ InsertAction: 필드 매핑, 배치 크기, 옵션
|
||
- ✅ FieldMapping: 소스→타겟 매핑, 변환 함수
|
||
- ✅ Condition: 12가지 연산자, AND/OR 로직
|
||
- ✅ UpdateAction: WHERE 조건, 업데이트 필드
|
||
- ✅ DeleteAction: WHERE 조건, 위험 경고 UI
|
||
- ✅ ExternalDBSource: DB 타입별 색상, 연결 정보
|
||
|
||
**마일스톤 2 완료**: 속성 편집 기능 100% 완료 (7/7 노드)
|
||
|
||
#### Week 4 - 완료 ✓
|
||
|
||
- ✅ 저장/불러오기 기능 (완료)
|
||
- ✅ 플로우 저장 API (신규/수정)
|
||
- ✅ 플로우 목록 조회 API
|
||
- ✅ 플로우 상세 조회 API
|
||
- ✅ 플로우 삭제 API
|
||
- ✅ JSON 직렬화/역직렬화
|
||
- ✅ 불러오기 다이얼로그 UI
|
||
- ✅ JSON 파일 내보내기
|
||
- ✅ node_flows 테이블 생성
|
||
- ✅ API 클라이언트 통합
|
||
- ✅ JSONB 타입 처리 (문자열/객체 자동 변환)
|
||
- ✅ **실제 저장/불러오기 동작 검증 완료**
|
||
|
||
**마일스톤 3 완료**: 저장/불러오기 100% 완료 및 검증
|
||
|
||
## 🎉 Phase 1 & Phase 2 완료!
|
||
|
||
모든 핵심 기능이 구현 및 테스트 완료되었습니다:
|
||
|
||
**Phase 1 (완료)**
|
||
|
||
- ✅ 7개 노드 타입 구현
|
||
- ✅ 7개 속성 편집 UI
|
||
- ✅ 저장/불러오기 시스템 (DB + JSON)
|
||
- ✅ 검증 시스템
|
||
- ✅ 드래그앤드롭 에디터
|
||
- ✅ **실제 저장/불러오기 테스트 완료**
|
||
|
||
**Phase 2 (완료)**
|
||
|
||
- ✅ 12개 노드 타입 구현 (100%)
|
||
- ✅ 12개 속성 편집 UI (100%)
|
||
- ✅ REST API, UPSERT, 데이터 변환, 주석, 로그 노드 추가
|
||
|
||
### 🎯 다음 작업 (Phase 3)
|
||
|
||
#### Week 5 - 완료 ✓
|
||
|
||
- ✅ 남은 노드 타입 구현 (5개)
|
||
|
||
- ✅ UpsertAction: INSERT + UPDATE 결합 (ON CONFLICT)
|
||
- ✅ DataTransform: 데이터 변환 (UPPERCASE, LOWERCASE, TRIM 등)
|
||
- ✅ RestAPISource: REST API 호출
|
||
- ✅ Comment: 주석 노드
|
||
- ✅ Log: 로그 출력 노드
|
||
|
||
- ✅ 남은 속성 편집 패널 구현 (5개)
|
||
- ✅ UpsertActionProperties: 충돌 키, 필드 매핑, 옵션
|
||
- ✅ DataTransformProperties: 변환 규칙, 표현식
|
||
- ✅ RestAPISourceProperties: URL, 메서드, 헤더, 인증
|
||
- ✅ CommentProperties: 메모 내용
|
||
- ✅ LogProperties: 로그 레벨, 메시지, 데이터 포함
|
||
|
||
**마일스톤 4 완료**: 노드 타입 100% 완료 (12/12)
|
||
**마일스톤 5 완료**: 속성 패널 100% 완료 (12/12)
|
||
|
||
## 🎉 Phase 2 완료!
|
||
|
||
모든 노드 타입과 속성 패널이 구현되었습니다!
|
||
|
||
### 🎯 Phase 3 계획: 검증 및 실행 시스템
|
||
|
||
#### Week 6 - 완료 ✓
|
||
|
||
- ✅ 검증 시스템 강화
|
||
- ✅ 순환 참조 검증 (DFS 알고리즘)
|
||
- ✅ 노드별 필수 속성 검증 (12개 노드 타입)
|
||
- ✅ Comment/Log 노드 독립 허용
|
||
- ✅ 상세한 오류 메시지 및 노드 ID 포함
|
||
|
||
**마일스톤 6 완료**: 검증 시스템 100% 완료
|
||
|
||
#### 우선순위 1: 검증 시스템 강화 ✅ 완료
|
||
|
||
#### 우선순위 2: 플로우 실행 엔진 (추후 구현)
|
||
|
||
- ⏳ 노드 실행 로직
|
||
- ⏳ 데이터 흐름 처리
|
||
- ⏳ 에러 핸들링
|
||
- ⏳ 트랜잭션 관리
|
||
- ⏳ 플로우 목록 조회
|
||
|
||
### 📦 구현된 컴포넌트
|
||
|
||
```
|
||
frontend/
|
||
├── types/
|
||
│ └── node-editor.ts ✅ (완료)
|
||
├── lib/
|
||
│ └── stores/
|
||
│ └── flowEditorStore.ts ✅ (완료)
|
||
├── components/dataflow/node-editor/
|
||
│ ├── FlowEditor.tsx ✅ (완료)
|
||
│ ├── FlowToolbar.tsx ✅ (완료)
|
||
│ ├── nodes/
|
||
│ │ ├── TableSourceNode.tsx ✅ (완료)
|
||
│ │ ├── ExternalDBSourceNode.tsx ✅ (완료)
|
||
│ │ ├── ConditionNode.tsx ✅ (완료)
|
||
│ │ ├── FieldMappingNode.tsx ✅ (완료)
|
||
│ │ ├── InsertActionNode.tsx ✅ (완료)
|
||
│ │ ├── UpdateActionNode.tsx ✅ (완료)
|
||
│ │ ├── DeleteActionNode.tsx ✅ (완료)
|
||
│ │ ├── RestAPISourceNode.tsx ✅ (완료)
|
||
│ │ ├── DataTransformNode.tsx ✅ (완료)
|
||
│ │ ├── UpsertActionNode.tsx ✅ (완료)
|
||
│ │ ├── CommentNode.tsx ✅ (완료)
|
||
│ │ └── LogNode.tsx ✅ (완료)
|
||
│ ├── sidebar/
|
||
│ │ ├── NodePalette.tsx ✅ (완료)
|
||
│ │ └── nodePaletteConfig.ts ✅ (완료)
|
||
│ └── panels/
|
||
│ ├── PropertiesPanel.tsx ✅ (완료)
|
||
│ └── properties/
|
||
│ ├── TableSourceProperties.tsx ✅ (완료)
|
||
│ ├── ExternalDBSourceProperties.tsx ✅ (완료)
|
||
│ ├── ConditionProperties.tsx ✅ (완료)
|
||
│ ├── FieldMappingProperties.tsx ✅ (완료)
|
||
│ ├── InsertActionProperties.tsx ✅ (완료)
|
||
│ ├── UpdateActionProperties.tsx ✅ (완료)
|
||
│ ├── DeleteActionProperties.tsx ✅ (완료)
|
||
│ ├── UpsertActionProperties.tsx ✅ (완료)
|
||
│ ├── DataTransformProperties.tsx ✅ (완료)
|
||
│ ├── RestAPISourceProperties.tsx ✅ (완료)
|
||
│ ├── CommentProperties.tsx ✅ (완료)
|
||
│ └── LogProperties.tsx ✅ (완료)
|
||
└── app/(main)/admin/dataflow/
|
||
└── node-editor/
|
||
└── page.tsx ✅ (완료)
|
||
```
|
||
|
||
### 🎮 현재 사용 가능한 기능
|
||
|
||
- ✅ 노드 드래그 앤 드롭으로 캔버스에 추가
|
||
- ✅ 노드 간 연결선 그리기
|
||
- ✅ 노드 선택 및 속성 편집 (100%)
|
||
- ✅ 줌/팬 컨트롤 (확대/축소/전체보기)
|
||
- ✅ 미니맵 표시
|
||
- ✅ 플로우 검증 (소스/액션 체크, 고아 노드 감지)
|
||
- ✅ 반응형 레이아웃 (250px 사이드바 + 캔버스 + 350px 속성)
|
||
- ✅ 7개 노드 타입 구현 (58%)
|
||
- 데이터 소스: 테이블, 외부 DB
|
||
- 변환/조건: 필드 매핑, 조건 분기 (TRUE/FALSE 출력)
|
||
- 액션: INSERT, UPDATE, DELETE
|
||
- ✅ 7개 노드 속성 편집 완성 (100%)
|
||
- TableSource: 테이블/스키마 설정
|
||
- InsertAction: 필드 매핑, 배치 옵션
|
||
- FieldMapping: 소스→타겟, 변환 함수
|
||
- Condition: 12가지 연산자, AND/OR
|
||
- UpdateAction: WHERE 조건, 업데이트 필드
|
||
- DeleteAction: WHERE 조건, 위험 경고
|
||
- ExternalDBSource: DB 타입별 UI
|
||
- ✅ 저장/불러오기 시스템 (100%)
|
||
- DB 저장 (신규/수정)
|
||
- 플로우 목록 조회
|
||
- 플로우 불러오기
|
||
- 플로우 삭제
|
||
- JSON 파일 내보내기
|
||
|
||
### 📍 테스트 URL
|
||
|
||
```
|
||
http://localhost:3000/admin/dataflow/node-editor
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 현재 시스템 분석
|
||
|
||
### 현재 구조
|
||
|
||
현재 데이터 제어 시스템은 4단계 마법사 방식을 사용합니다:
|
||
|
||
```
|
||
Step 1: 연결 설정 (FROM/TO 테이블 선택)
|
||
↓
|
||
Step 2: 데이터 선택 (컬럼 매핑)
|
||
↓
|
||
Step 3: 조건 설정 (제어 조건)
|
||
↓
|
||
Step 4: 액션 설정 (INSERT/UPDATE/DELETE)
|
||
```
|
||
|
||
### 문제점
|
||
|
||
#### 1. 사용성 문제
|
||
|
||
- ❌ **전체 흐름 파악 어려움**: 4단계를 모두 거쳐야 전체 구조 이해 가능
|
||
- ❌ **수정 불편**: 이전 단계로 돌아가서 수정하기 번거로움
|
||
- ❌ **복잡한 로직 표현 제한**: 다중 분기, 조건부 실행 등 표현 어려움
|
||
- ❌ **시각화 제한**: "흐름 미리보기" 탭에서만 전체 구조 확인 가능
|
||
|
||
#### 2. 기능적 제한
|
||
|
||
- 단선형 흐름만 지원 (A → B → C)
|
||
- 복잡한 데이터 변환 로직 구현 어려움
|
||
- 디버깅 시 어느 단계에서 문제가 발생했는지 파악 어려움
|
||
- 재사용 가능한 로직 패턴 저장 불가
|
||
|
||
#### 3. 학습 곡선
|
||
|
||
- 새로운 사용자가 4단계 프로세스를 이해하는데 시간 소요
|
||
- 각 단계의 설정이 최종 결과에 어떤 영향을 주는지 직관적이지 않음
|
||
|
||
---
|
||
|
||
## 🚀 제안: 노드 기반 비주얼 에디터
|
||
|
||
### 핵심 개념
|
||
|
||
**블루프린트 스타일 노드 프로그래밍**
|
||
|
||
- 언리얼 엔진, N8N, Node-RED와 같은 비주얼 프로그래밍 방식 채택
|
||
- 드래그 앤 드롭으로 노드 배치
|
||
- 노드 간 연결선으로 데이터 흐름 표현
|
||
- 실시간 시각적 피드백
|
||
|
||
### 주요 장점
|
||
|
||
#### 1. 직관성
|
||
|
||
- ✅ 전체 데이터 흐름을 한 화면에서 파악
|
||
- ✅ 시각적으로 로직 구조 이해
|
||
- ✅ 노드 간 관계가 명확하게 표현됨
|
||
|
||
#### 2. 유연성
|
||
|
||
- ✅ 자유로운 노드 배치 및 재배치
|
||
- ✅ 복잡한 분기 로직 쉽게 구현
|
||
- ✅ 동적으로 노드 추가/제거
|
||
|
||
#### 3. 생산성
|
||
|
||
- ✅ 드래그 앤 드롭으로 빠른 구성
|
||
- ✅ 템플릿 시스템으로 재사용
|
||
- ✅ 실시간 검증으로 오류 조기 발견
|
||
|
||
#### 4. 디버깅
|
||
|
||
- ✅ 각 노드별 실행 상태 시각화
|
||
- ✅ 데이터 흐름 추적 가능
|
||
- ✅ 병목 지점 쉽게 파악
|
||
|
||
---
|
||
|
||
## 🎨 UI/UX 디자인
|
||
|
||
### 전체 레이아웃
|
||
|
||
```
|
||
┌───────────────────────────────────────────────────────────────────────────┐
|
||
│ 📋 제어 관리: 오라클 테스트2 [저장] [테스트 실행] [닫기] │
|
||
├────────────────┬──────────────────────────────────────────────────────────┤
|
||
│ 🔧 도구 패널 │ 🎨 캔버스 (노드 배치 영역) │
|
||
│ (250px) │ (나머지 영역) │
|
||
│ │ │
|
||
│ ┌─ 데이터 소스 │ ┌────────────────────────────────────────────────────┐ │
|
||
│ │ 📊 테이블 │ │ │ │
|
||
│ │ 🔌 외부 DB │ │ 노드를 여기에 드래그 앤 드롭하세요 │ │
|
||
│ │ 📁 REST API │ │ │ │
|
||
│ │ 🌐 GraphQL │ │ [빈 캔버스] │ │
|
||
│ └──────────────│ │ │ │
|
||
│ │ └────────────────────────────────────────────────────┘ │
|
||
│ ┌─ 변환/조건 │ │
|
||
│ │ 🔀 필드 매핑 │ ┌─────────────────┐ │
|
||
│ │ ⚡ 조건 분기 │ │ 미니맵 │ │
|
||
│ │ 🔧 데이터 변환│ │ ┌───────────┐ │ │
|
||
│ │ 🔄 루프 │ │ │ ▪ ▪ ▪ │ │ 150x100px │
|
||
│ └──────────────│ │ │ ▪ ▪ │ │ │
|
||
│ │ │ └───────────┘ │ │
|
||
│ ┌─ 액션 │ └─────────────────┘ │
|
||
│ │ ➕ INSERT │ │
|
||
│ │ ✏️ UPDATE │ 컨트롤 바: [확대/축소] [전체보기] [그리드 ON/OFF] │
|
||
│ │ ❌ DELETE │ │
|
||
│ │ 🔄 UPSERT │ │
|
||
│ └──────────────│ │
|
||
│ │ │
|
||
│ ┌─ 유틸리티 │ │
|
||
│ │ 💬 주석 │ │
|
||
│ │ 📦 그룹 │ │
|
||
│ │ 🔍 로그 │ │
|
||
│ └──────────────│ │
|
||
└────────────────┴──────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 도구 패널 상세
|
||
|
||
#### 데이터 소스 섹션
|
||
|
||
```
|
||
┌─ 데이터 소스 ─────────────────┐
|
||
│ │
|
||
│ 📊 내부 테이블 │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ [끌어서 캔버스에 배치] │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
│ 🔌 외부 DB 연결 │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ [외부 데이터베이스] │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
│ 📁 REST API │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ [HTTP 요청 노드] │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
│ 🌐 GraphQL │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ [GraphQL 쿼리 노드] │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
└───────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 노드 타입 정의
|
||
|
||
### 1. 데이터 소스 노드
|
||
|
||
#### 1.1 테이블 소스 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 📊 사용자정보 │ ← 파란색 헤더 (#3B82F6)
|
||
│ user_info │
|
||
├─────────────────────────────────────┤
|
||
│ 📍 연결: 메인 DB │
|
||
│ 📋 스키마: public │
|
||
│ │
|
||
│ 출력 필드: [모두 보기 ▼] │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ ○ user_id (integer) → │ │ ← 필드별 연결 포인트
|
||
│ │ ○ user_name (varchar) → │ │
|
||
│ │ ○ email (varchar) → │ │
|
||
│ │ ○ created_at (timestamp) → │ │
|
||
│ │ ○ updated_at (timestamp) → │ │
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ [설정 ⚙️] [프리뷰 👁️] │
|
||
└─────────────────────────────────────┘
|
||
|
||
노드 데이터 구조:
|
||
{
|
||
type: 'tableSource',
|
||
data: {
|
||
connectionId: 0,
|
||
tableName: 'user_info',
|
||
schema: 'public',
|
||
fields: [
|
||
{ name: 'user_id', type: 'integer', nullable: false },
|
||
{ name: 'user_name', type: 'varchar', nullable: false },
|
||
// ...
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.2 외부 DB 소스 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🔌 Oracle DB │ ← 주황색 헤더 (#F59E0B)
|
||
│ USERS 테이블 │
|
||
├─────────────────────────────────────┤
|
||
│ 📍 연결: Oracle 운영 서버 │
|
||
│ 🔐 상태: 연결됨 ✅ │
|
||
│ │
|
||
│ 출력 필드: │
|
||
│ ○ SALT (VARCHAR2) → │
|
||
│ ○ USERNAME (VARCHAR2) → │
|
||
│ ○ EMAIL (VARCHAR2) → │
|
||
│ │
|
||
│ [연결 테스트] [새로고침] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
#### 1.3 REST API 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 📁 HTTP 요청 │ ← 초록색 헤더 (#10B981)
|
||
├─────────────────────────────────────┤
|
||
│ 메서드: [GET ▼] │
|
||
│ URL: https://api.example.com/users │
|
||
│ │
|
||
│ 헤더: │
|
||
│ Authorization: Bearer {token} │
|
||
│ │
|
||
│ 응답 필드: │
|
||
│ ○ data.users → │
|
||
│ ○ data.total → │
|
||
│ │
|
||
│ [요청 테스트] [저장] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 2. 변환/조건 노드
|
||
|
||
#### 2.1 조건 분기 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ⚡ 조건 검사 │ ← 노란색 헤더 (#EAB308)
|
||
├─────────────────────────────────────┤
|
||
│ ← 입력 데이터 │
|
||
│ │
|
||
│ 조건식: │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ [user_id] [IS NOT NULL] [✓] │ │
|
||
│ │ [AND] │ │
|
||
│ │ [email] [LIKE] [%@%] [✓] │ │
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ [+ 조건 추가] │
|
||
│ │
|
||
│ 분기: │
|
||
│ ✅ TRUE → │ ← 조건 충족 시
|
||
│ ❌ FALSE → │ ← 조건 불충족 시
|
||
└─────────────────────────────────────┘
|
||
|
||
노드 데이터 구조:
|
||
{
|
||
type: 'condition',
|
||
data: {
|
||
conditions: [
|
||
{ field: 'user_id', operator: 'IS_NOT_NULL', value: null },
|
||
{ field: 'email', operator: 'LIKE', value: '%@%' }
|
||
],
|
||
logic: 'AND'
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2.2 필드 매핑 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🔀 필드 매핑 │ ← 보라색 헤더 (#8B5CF6)
|
||
├─────────────────────────────────────┤
|
||
│ 입력: │
|
||
│ ← user_id │
|
||
│ ← user_name │
|
||
│ ← email │
|
||
│ ← created_at │
|
||
│ │
|
||
│ 매핑 규칙: │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ user_id → SALT │ │
|
||
│ │ user_name → USERNAME │ │
|
||
│ │ email → EMAIL │ │
|
||
│ │ NOW() → CREATED_AT │ │ ← 함수/상수
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ [+ 매핑 추가] [자동 매핑] │
|
||
│ │
|
||
│ 출력 → │
|
||
└─────────────────────────────────────┘
|
||
|
||
노드 데이터 구조:
|
||
{
|
||
type: 'fieldMapping',
|
||
data: {
|
||
mappings: [
|
||
{ source: 'user_id', target: 'SALT', transform: null },
|
||
{ source: 'user_name', target: 'USERNAME', transform: null },
|
||
{ source: 'email', target: 'EMAIL', transform: null },
|
||
{ source: null, target: 'CREATED_AT', transform: 'NOW()' }
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2.3 데이터 변환 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🔧 데이터 변환 │ ← 청록색 헤더 (#06B6D4)
|
||
├─────────────────────────────────────┤
|
||
│ ← 입력 데이터 │
|
||
│ │
|
||
│ 변환 규칙: │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ UPPER(user_name) │ │
|
||
│ │ TRIM(email) │ │
|
||
│ │ CONCAT(first_name, last_name) │ │
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ [+ 변환 추가] [함수 도움말] │
|
||
│ │
|
||
│ 출력 → │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 액션 노드
|
||
|
||
#### 3.1 INSERT 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ➕ INSERT │ ← 초록색 헤더 (#22C55E)
|
||
├─────────────────────────────────────┤
|
||
│ 타겟: USERS │
|
||
│ 연결: Oracle 운영 서버 │
|
||
│ │
|
||
│ ← 매핑 데이터 입력 │
|
||
│ │
|
||
│ 삽입 필드: │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ • SALT ← user_id │ │
|
||
│ │ • USERNAME ← user_name │ │
|
||
│ │ • EMAIL ← email │ │
|
||
│ │ • PASSWORD ← [미매핑] ⚠️ │ │
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ 옵션: │
|
||
│ ☑ 중복 시 무시 │
|
||
│ ☐ 배치 처리 (1000건) │
|
||
│ │
|
||
│ ✅ 완료 → │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.2 UPDATE 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ✏️ UPDATE │ ← 파란색 헤더 (#3B82F6)
|
||
├─────────────────────────────────────┤
|
||
│ 타겟: user_info │
|
||
│ 연결: 메인 DB │
|
||
│ │
|
||
│ ← 데이터 입력 │
|
||
│ │
|
||
│ 조건 (WHERE): │
|
||
│ user_id = {input.user_id} │
|
||
│ │
|
||
│ 업데이트 필드: │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ • user_name ← new_name │ │
|
||
│ │ • updated_at ← NOW() │ │
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ ✅ 완료 → │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.3 DELETE 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ❌ DELETE │ ← 빨간색 헤더 (#EF4444)
|
||
├─────────────────────────────────────┤
|
||
│ 타겟: temp_data │
|
||
│ 연결: 메인 DB │
|
||
│ │
|
||
│ ← 데이터 입력 │
|
||
│ │
|
||
│ 조건 (WHERE): │
|
||
│ created_at < DATE_SUB(NOW(), 7) │
|
||
│ │
|
||
│ ⚠️ 경고: │
|
||
│ 삭제 작업은 되돌릴 수 없습니다 │
|
||
│ │
|
||
│ ☑ 삭제 전 확인 │
|
||
│ │
|
||
│ ✅ 완료 → │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 4. 유틸리티 노드
|
||
|
||
#### 4.1 주석 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 💬 주석 │ ← 회색 헤더 (#6B7280)
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ 사용자 데이터를 Oracle DB로 동기화 │
|
||
│ │
|
||
│ 작성자: 김주석 │
|
||
│ 날짜: 2025-10-02 │
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
#### 4.2 로그 노드
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🔍 로그 출력 │ ← 회색 헤더
|
||
├─────────────────────────────────────┤
|
||
│ ← 입력 데이터 │
|
||
│ │
|
||
│ 로그 레벨: [INFO ▼] │
|
||
│ 메시지: "데이터 처리 완료: {count}" │
|
||
│ │
|
||
│ 출력 → │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 실제 사용 예시
|
||
|
||
### 예시 1: 간단한 데이터 복사
|
||
|
||
#### 현재 시스템
|
||
|
||
```
|
||
Step 1: user_info 선택
|
||
Step 2: USERS (Oracle) 선택
|
||
Step 3: 조건 없음
|
||
Step 4: INSERT + 필드 매핑 4개
|
||
```
|
||
|
||
#### 노드 기반 시스템
|
||
|
||
```
|
||
캔버스 뷰:
|
||
|
||
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
|
||
│ 📊 user_info │ │ 🔀 필드 매핑 │ │ ➕ INSERT │
|
||
│ │═══════>│ │═══════>│ USERS │
|
||
│ user_id ○─┼───────>│ 4개 매핑 │ │ (Oracle) │
|
||
│ user_name ○─┼───────>│ │ │ │
|
||
│ email ○─┼───────>│ │ │ │
|
||
└──────────────┘ └──────────────┘ └──────────────┘
|
||
```
|
||
|
||
### 예시 2: 조건부 데이터 처리
|
||
|
||
#### 시나리오
|
||
|
||
- user_info에서 데이터 읽기
|
||
- user_id가 NULL이 아니고 email이 유효한 경우만 처리
|
||
- 조건 통과 시 Oracle DB에 INSERT
|
||
|
||
#### 노드 배치
|
||
|
||
```
|
||
┌──────────────┐ ┌──────────────┐ TRUE ┌──────────────┐ ┌──────────────┐
|
||
│ 📊 user_info │ │ ⚡ 조건 검사 │═══════>│ 🔀 필드 매핑 │ │ ➕ INSERT │
|
||
│ │═══════>│ │ │ │═══════>│ USERS │
|
||
│ user_id ○─┼───────>│ user_id │ │ 4개 매핑 │ │ │
|
||
│ user_name ○─┼─┐ │ IS NOT NULL │ │ │ │ │
|
||
│ email ○─┼─┼─────>│ AND │ │ │ │ │
|
||
└──────────────┘ │ │ email LIKE │ FALSE │ │ │ │
|
||
│ │ '%@%' │═══════>│ [중단] │ │ │
|
||
│ └──────────────┘ └──────────────┘ └──────────────┘
|
||
│ ↑
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 예시 3: 복잡한 다중 분기
|
||
|
||
#### 시나리오
|
||
|
||
- 사용자 타입에 따라 다른 테이블에 저장
|
||
- 관리자 → admin_users
|
||
- 일반 사용자 → regular_users
|
||
- 게스트 → guest_logs
|
||
|
||
#### 노드 배치
|
||
|
||
```
|
||
┌──────────────┐ ┌──────────────┐
|
||
│ 🔀 매핑1 │ │ ➕ INSERT │
|
||
admin ═══>│ │═══════>│ admin_users │
|
||
╱ └──────────────┘ └──────────────┘
|
||
┌──────────────┐ ┌──╱───────────┐
|
||
│ 📊 user_info │ │ ⚡ 타입 분기 │ ┌──────────────┐ ┌──────────────┐
|
||
│ │═══════>│ │ user ═══>│ 🔀 매핑2 │ │ ➕ INSERT │
|
||
│ user_type ○─┼───────>│ user_type │ │ │═══════>│ regular_users│
|
||
└──────────────┘ │ │ └──────────────┘ └──────────────┘
|
||
└──╲───────────┘
|
||
╲ ┌──────────────┐ ┌──────────────┐
|
||
guest ════>│ 🔀 매핑3 │ │ ➕ INSERT │
|
||
│ │═══════>│ guest_logs │
|
||
└──────────────┘ └──────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎮 주요 기능 명세
|
||
|
||
### 1. 드래그 앤 드롭
|
||
|
||
#### 1.1 노드 추가
|
||
|
||
```typescript
|
||
// 사용자 액션
|
||
1. 좌측 도구 패널에서 노드 아이템 클릭
|
||
2. 캔버스로 드래그
|
||
3. 원하는 위치에 드롭
|
||
|
||
// 시스템 동작
|
||
- 마우스 커서를 따라 노드 프리뷰 표시
|
||
- 드롭 가능 영역 하이라이트
|
||
- 드롭 시 새 노드 생성 및 배치
|
||
```
|
||
|
||
#### 1.2 노드 이동
|
||
|
||
```typescript
|
||
// 사용자 액션
|
||
1. 캔버스의 노드 헤더 클릭
|
||
2. 원하는 위치로 드래그
|
||
3. 드롭하여 재배치
|
||
|
||
// 시스템 동작
|
||
- 연결된 선들이 함께 움직임
|
||
- 그리드 스냅 옵션 (10px 단위)
|
||
- 다중 선택 시 여러 노드 동시 이동
|
||
```
|
||
|
||
#### 1.3 다중 선택
|
||
|
||
```typescript
|
||
// 방법 1: Shift + 클릭
|
||
노드를 하나씩 Shift + 클릭하여 선택
|
||
|
||
// 방법 2: 드래그 영역 선택
|
||
빈 공간을 드래그하여 사각형 영역 내 노드 선택
|
||
|
||
// 방법 3: Ctrl + A
|
||
전체 노드 선택
|
||
```
|
||
|
||
### 2. 연결선 그리기
|
||
|
||
#### 2.1 연결 생성
|
||
|
||
```typescript
|
||
// 단계별 프로세스
|
||
1. 출력 포인트(○) 클릭
|
||
2. 마우스를 드래그하여 선 그리기
|
||
3. 입력 포인트에 드롭하여 연결
|
||
|
||
// 시각적 피드백
|
||
- 드래그 중 임시 선 표시
|
||
- 호환되는 입력 포인트 하이라이트
|
||
- 호환되지 않는 포인트 비활성화
|
||
```
|
||
|
||
#### 2.2 연결 검증
|
||
|
||
```typescript
|
||
// 타입 검증
|
||
const validateConnection = (source, target) => {
|
||
// 데이터 타입 호환성 체크
|
||
if (!isCompatibleType(source.dataType, target.dataType)) {
|
||
return { valid: false, error: "데이터 타입 불일치" };
|
||
}
|
||
|
||
// 순환 참조 체크
|
||
if (hasCircularReference(source, target)) {
|
||
return { valid: false, error: "순환 참조 감지" };
|
||
}
|
||
|
||
// 중복 연결 체크
|
||
if (isDuplicateConnection(source, target)) {
|
||
return { valid: false, error: "이미 연결되어 있음" };
|
||
}
|
||
|
||
return { valid: true };
|
||
};
|
||
```
|
||
|
||
#### 2.3 연결 스타일
|
||
|
||
```typescript
|
||
// 연결선 종류
|
||
1. 데이터 흐름: 굵은 곡선 (베지어 커브)
|
||
2. 필드 연결: 가는 직선
|
||
3. 조건 분기: 점선 (TRUE/FALSE)
|
||
|
||
// 색상 코딩
|
||
- 정상: #3B82F6 (파란색)
|
||
- 경고: #F59E0B (주황색)
|
||
- 오류: #EF4444 (빨간색)
|
||
- 비활성: #9CA3AF (회색)
|
||
```
|
||
|
||
### 3. 실시간 검증
|
||
|
||
#### 3.1 구문 검증
|
||
|
||
```typescript
|
||
// 필드명 검증
|
||
validateFieldName(fieldName) {
|
||
// 존재하지 않는 필드
|
||
if (!sourceFields.includes(fieldName)) {
|
||
return error('필드를 찾을 수 없습니다');
|
||
}
|
||
}
|
||
|
||
// SQL 표현식 검증
|
||
validateSQLExpression(expression) {
|
||
try {
|
||
// 기본 SQL 파싱
|
||
parseSQLExpression(expression);
|
||
return success();
|
||
} catch (e) {
|
||
return error('잘못된 SQL 표현식');
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 3.2 논리 검증
|
||
|
||
```typescript
|
||
// 필수 연결 체크
|
||
validateRequiredConnections(node) {
|
||
if (node.type === 'action' && !node.hasInput) {
|
||
return error('입력 데이터가 필요합니다');
|
||
}
|
||
}
|
||
|
||
// 고아 노드 감지
|
||
findOrphanNodes() {
|
||
return nodes.filter(node =>
|
||
!node.hasInput &&
|
||
!node.hasOutput &&
|
||
node.type !== 'source'
|
||
);
|
||
}
|
||
```
|
||
|
||
#### 3.3 시각적 피드백
|
||
|
||
```
|
||
노드 상태 표시:
|
||
✅ 정상: 초록색 체크마크
|
||
⚠️ 경고: 노란색 경고 아이콘
|
||
❌ 오류: 빨간색 X 아이콘
|
||
⏳ 미완성: 회색 점선 테두리
|
||
```
|
||
|
||
### 4. 그룹화 및 주석
|
||
|
||
#### 4.1 그룹 노드
|
||
|
||
```
|
||
┌─ 사용자 데이터 처리 그룹 ─────────────────────────────────┐
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │ 소스 │═══════>│ 변환 │═══════>│ 액션 │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ 💬 주석: Oracle DB 동기화 로직 │
|
||
└────────────────────────────────────────────────────────────┘
|
||
|
||
기능:
|
||
- 그룹 단위 이동
|
||
- 그룹 접기/펼치기
|
||
- 그룹 색상 지정
|
||
- 그룹 내보내기/가져오기
|
||
```
|
||
|
||
#### 4.2 주석 시스템
|
||
|
||
```
|
||
주석 타입:
|
||
1. 노드 주석: 특정 노드에 첨부
|
||
2. 플로팅 주석: 캔버스에 독립적으로 배치
|
||
3. 연결선 주석: 연결선에 레이블 추가
|
||
|
||
표시 옵션:
|
||
- 항상 표시
|
||
- 마우스 오버 시 표시
|
||
- 클릭 시 표시
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 기술 스택
|
||
|
||
### 1. 노드 에디터 라이브러리 비교
|
||
|
||
| 라이브러리 | 장점 | 단점 | 추천도 |
|
||
| ----------------- | ---------------------------------------------------------------------------- | ----------------------------------------- | ---------- |
|
||
| **React Flow** | • 가장 인기있음<br>• 풍부한 예제<br>• TypeScript 지원<br>• 커스터마이징 용이 | • 복잡한 로직은 직접 구현 | ⭐⭐⭐⭐⭐ |
|
||
| **Rete.js** | • 강력한 플러그인 시스템<br>• 자동 레이아웃 | • 학습 곡선 높음<br>• React 통합 까다로움 | ⭐⭐⭐⭐ |
|
||
| **react-diagram** | • 간단한 구조 | • 기능 제한적<br>• 업데이트 느림 | ⭐⭐⭐ |
|
||
|
||
### 2. React Flow 선택 이유
|
||
|
||
```typescript
|
||
// 1. 쉬운 설치 및 설정
|
||
npm install reactflow
|
||
|
||
// 2. 간단한 초기 설정
|
||
import ReactFlow, { MiniMap, Controls, Background } from 'reactflow';
|
||
import 'reactflow/dist/style.css';
|
||
|
||
function FlowEditor() {
|
||
return (
|
||
<ReactFlow nodes={nodes} edges={edges}>
|
||
<MiniMap />
|
||
<Controls />
|
||
<Background />
|
||
</ReactFlow>
|
||
);
|
||
}
|
||
|
||
// 3. 커스텀 노드 쉽게 구현
|
||
const nodeTypes = {
|
||
tableSource: TableSourceNode,
|
||
condition: ConditionNode,
|
||
action: ActionNode,
|
||
};
|
||
|
||
<ReactFlow nodeTypes={nodeTypes} ... />
|
||
```
|
||
|
||
### 3. 핵심 컴포넌트 구조
|
||
|
||
```
|
||
frontend/components/dataflow/node-editor/
|
||
├── FlowEditor.tsx # 메인 에디터 컴포넌트
|
||
├── nodes/ # 노드 컴포넌트들
|
||
│ ├── TableSourceNode.tsx
|
||
│ ├── ExternalDBNode.tsx
|
||
│ ├── ConditionNode.tsx
|
||
│ ├── FieldMappingNode.tsx
|
||
│ ├── InsertActionNode.tsx
|
||
│ ├── UpdateActionNode.tsx
|
||
│ ├── DeleteActionNode.tsx
|
||
│ └── index.ts
|
||
├── edges/ # 커스텀 엣지
|
||
│ ├── DataFlowEdge.tsx
|
||
│ ├── ConditionEdge.tsx
|
||
│ └── index.ts
|
||
├── sidebar/ # 도구 패널
|
||
│ ├── NodePalette.tsx
|
||
│ ├── NodeLibrary.tsx
|
||
│ └── index.ts
|
||
├── panels/ # 설정 패널
|
||
│ ├── NodePropertiesPanel.tsx
|
||
│ ├── ValidationPanel.tsx
|
||
│ └── index.ts
|
||
├── hooks/ # 커스텀 훅
|
||
│ ├── useNodeValidation.ts
|
||
│ ├── useAutoLayout.ts
|
||
│ └── useFlowExecution.ts
|
||
└── utils/ # 유틸리티
|
||
├── nodeFactory.ts
|
||
├── flowValidator.ts
|
||
└── flowSerializer.ts
|
||
```
|
||
|
||
### 4. 데이터 구조
|
||
|
||
#### 4.1 노드 데이터 모델
|
||
|
||
```typescript
|
||
// 기본 노드 인터페이스
|
||
interface BaseNode {
|
||
id: string;
|
||
type: string;
|
||
position: { x: number; y: number };
|
||
data: any;
|
||
style?: CSSProperties;
|
||
}
|
||
|
||
// 테이블 소스 노드
|
||
interface TableSourceNode extends BaseNode {
|
||
type: "tableSource";
|
||
data: {
|
||
connectionId: number;
|
||
tableName: string;
|
||
schema: string;
|
||
fields: Array<{
|
||
name: string;
|
||
type: string;
|
||
nullable: boolean;
|
||
primaryKey: boolean;
|
||
}>;
|
||
filters?: Array<{
|
||
field: string;
|
||
operator: string;
|
||
value: any;
|
||
}>;
|
||
};
|
||
}
|
||
|
||
// 조건 노드
|
||
interface ConditionNode extends BaseNode {
|
||
type: "condition";
|
||
data: {
|
||
conditions: Array<{
|
||
field: string;
|
||
operator:
|
||
| "EQUALS"
|
||
| "NOT_EQUALS"
|
||
| "GREATER_THAN"
|
||
| "LESS_THAN"
|
||
| "LIKE"
|
||
| "IN"
|
||
| "IS_NULL"
|
||
| "IS_NOT_NULL";
|
||
value: any;
|
||
}>;
|
||
logic: "AND" | "OR";
|
||
};
|
||
}
|
||
|
||
// 액션 노드
|
||
interface ActionNode extends BaseNode {
|
||
type: "insertAction" | "updateAction" | "deleteAction" | "upsertAction";
|
||
data: {
|
||
targetConnection: number;
|
||
targetTable: string;
|
||
fieldMappings: Array<{
|
||
sourceField: string;
|
||
targetField: string;
|
||
transform?: string;
|
||
}>;
|
||
options?: {
|
||
batchSize?: number;
|
||
ignoreErrors?: boolean;
|
||
upsertKey?: string[];
|
||
};
|
||
};
|
||
}
|
||
```
|
||
|
||
#### 4.2 연결선 데이터 모델
|
||
|
||
```typescript
|
||
interface Edge {
|
||
id: string;
|
||
source: string; // 출발 노드 ID
|
||
target: string; // 도착 노드 ID
|
||
sourceHandle?: string; // 출발 핸들 ID (필드별 연결 시)
|
||
targetHandle?: string; // 도착 핸들 ID
|
||
type?: "default" | "smoothstep" | "step" | "straight";
|
||
animated?: boolean;
|
||
label?: string;
|
||
style?: CSSProperties;
|
||
data?: {
|
||
dataType?: string;
|
||
validation?: {
|
||
valid: boolean;
|
||
errors?: string[];
|
||
};
|
||
};
|
||
}
|
||
|
||
// 조건 분기 엣지
|
||
interface ConditionalEdge extends Edge {
|
||
data: {
|
||
condition: "TRUE" | "FALSE";
|
||
label: string;
|
||
};
|
||
}
|
||
```
|
||
|
||
#### 4.3 전체 플로우 데이터
|
||
|
||
```typescript
|
||
interface DataFlow {
|
||
id: number;
|
||
name: string;
|
||
description: string;
|
||
companyCode: string;
|
||
nodes: BaseNode[];
|
||
edges: Edge[];
|
||
viewport: {
|
||
x: number;
|
||
y: number;
|
||
zoom: number;
|
||
};
|
||
metadata: {
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
createdBy: string;
|
||
version: number;
|
||
tags?: string[];
|
||
};
|
||
}
|
||
```
|
||
|
||
### 5. 상태 관리
|
||
|
||
```typescript
|
||
// Zustand를 사용한 플로우 상태 관리
|
||
import create from "zustand";
|
||
|
||
interface FlowState {
|
||
nodes: Node[];
|
||
edges: Edge[];
|
||
selectedNodes: string[];
|
||
selectedEdges: string[];
|
||
|
||
// 노드 관리
|
||
addNode: (node: Node) => void;
|
||
updateNode: (id: string, data: Partial<Node>) => void;
|
||
removeNode: (id: string) => void;
|
||
|
||
// 엣지 관리
|
||
addEdge: (edge: Edge) => void;
|
||
updateEdge: (id: string, data: Partial<Edge>) => void;
|
||
removeEdge: (id: string) => void;
|
||
|
||
// 선택 관리
|
||
selectNode: (id: string, multi?: boolean) => void;
|
||
clearSelection: () => void;
|
||
|
||
// 검증
|
||
validateFlow: () => ValidationResult;
|
||
|
||
// 실행
|
||
executeFlow: () => Promise<ExecutionResult>;
|
||
}
|
||
|
||
const useFlowStore = create<FlowState>((set, get) => ({
|
||
// ... 구현
|
||
}));
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 비교 분석
|
||
|
||
### 현재 시스템 vs 노드 기반 시스템
|
||
|
||
| 측면 | 현재 시스템 | 노드 기반 시스템 | 개선도 |
|
||
| --------------- | --------------------- | -------------------- | ------ |
|
||
| **학습 곡선** | 중간 (4단계 프로세스) | 쉬움 (시각적 직관성) | +40% |
|
||
| **전체 파악** | 어려움 (단계별 분리) | 쉬움 (한눈에 파악) | +60% |
|
||
| **수정 편의성** | 불편 (단계 이동 필요) | 편리 (직접 수정) | +50% |
|
||
| **복잡한 로직** | 제한적 (선형 흐름) | 우수 (다중 분기) | +80% |
|
||
| **재사용성** | 낮음 (수동 복사) | 높음 (템플릿 시스템) | +70% |
|
||
| **디버깅** | 어려움 (로그 확인) | 쉬움 (시각적 추적) | +65% |
|
||
| **협업** | 보통 (설명 필요) | 우수 (자체 문서화) | +55% |
|
||
| **성능** | 양호 | 양호 (동일) | 0% |
|
||
|
||
### 사용자 시나리오별 비교
|
||
|
||
#### 시나리오 1: 간단한 테이블 복사
|
||
|
||
```
|
||
현재: 4단계 × 평균 2분 = 8분
|
||
노드: 드래그 3개 + 연결 2개 = 3분
|
||
개선: 62.5% 단축
|
||
```
|
||
|
||
#### 시나리오 2: 조건부 다중 액션
|
||
|
||
```
|
||
현재: 4단계 × 5분 + 조건 설정 5분 = 25분
|
||
노드: 드래그 7개 + 연결 8개 + 설정 5분 = 12분
|
||
개선: 52% 단축
|
||
```
|
||
|
||
#### 시나리오 3: 복잡한 데이터 변환
|
||
|
||
```
|
||
현재: 여러 제어를 순차적으로 생성 = 45분
|
||
노드: 하나의 플로우에서 모두 처리 = 20분
|
||
개선: 55.5% 단축
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 구현 로드맵
|
||
|
||
### Phase 1: 기본 노드 에디터 (2주)
|
||
|
||
#### Week 1
|
||
|
||
- [ ] React Flow 통합 및 기본 설정
|
||
- [ ] 라이브러리 설치 및 설정
|
||
- [ ] 기본 캔버스 구현
|
||
- [ ] 그리드 배경 및 줌/팬 기능
|
||
- [ ] 기본 노드 타입 구현
|
||
- [ ] 테이블 소스 노드
|
||
- [ ] INSERT 액션 노드
|
||
- [ ] 필드 매핑 노드
|
||
|
||
#### Week 2
|
||
|
||
- [ ] 드래그 앤 드롭 기능
|
||
- [ ] 도구 패널에서 캔버스로 드래그
|
||
- [ ] 노드 이동 및 재배치
|
||
- [ ] 다중 선택 및 그룹 이동
|
||
- [ ] 연결선 그리기
|
||
- [ ] 기본 연결 생성
|
||
- [ ] 연결 검증
|
||
- [ ] 연결 스타일링
|
||
- [ ] 데이터 저장/불러오기
|
||
- [ ] JSON 직렬화
|
||
- [ ] 백엔드 API 연동
|
||
|
||
**마일스톤 1**: 기본적인 테이블 → 필드 매핑 → INSERT 플로우 구현
|
||
|
||
### Phase 2: 고급 기능 (2주)
|
||
|
||
#### Week 3
|
||
|
||
- [ ] 추가 노드 타입
|
||
- [ ] 외부 DB 소스 노드
|
||
- [ ] 조건 분기 노드
|
||
- [ ] UPDATE/DELETE 액션 노드
|
||
- [ ] 데이터 변환 노드
|
||
- [ ] SQL 함수 지원
|
||
- [ ] 커스텀 표현식
|
||
- [ ] 노드 설정 패널
|
||
- [ ] 우측 속성 패널
|
||
- [ ] 인라인 편집
|
||
- [ ] 필드 자동 완성
|
||
|
||
#### Week 4
|
||
|
||
- [ ] 실시간 검증 시스템
|
||
- [ ] 구문 검증
|
||
- [ ] 논리 검증
|
||
- [ ] 타입 검증
|
||
- [ ] 조건부 실행
|
||
- [ ] TRUE/FALSE 분기
|
||
- [ ] 다중 조건 처리
|
||
- [ ] 오류 표시 및 해결
|
||
- [ ] 오류 하이라이트
|
||
- [ ] 오류 메시지 툴팁
|
||
- [ ] 자동 수정 제안
|
||
|
||
**마일스톤 2**: 조건 분기 및 다중 액션을 포함한 복잡한 플로우 구현
|
||
|
||
### Phase 3: UX 개선 (1주)
|
||
|
||
#### Week 5
|
||
|
||
- [ ] 미니맵
|
||
- [ ] 전체 플로우 미리보기
|
||
- [ ] 현재 뷰포트 표시
|
||
- [ ] 미니맵 클릭 네비게이션
|
||
- [ ] 줌/팬 컨트롤
|
||
- [ ] 줌 인/아웃 버튼
|
||
- [ ] 전체 보기 버튼
|
||
- [ ] 선택된 노드로 포커스
|
||
- [ ] 노드 템플릿 시스템
|
||
- [ ] 자주 사용하는 패턴 저장
|
||
- [ ] 템플릿 갤러리
|
||
- [ ] 드래그로 템플릿 적용
|
||
- [ ] 키보드 단축키
|
||
- [ ] Ctrl+C/V: 복사/붙여넣기
|
||
- [ ] Delete: 삭제
|
||
- [ ] Ctrl+Z/Y: 실행 취소/다시 실행
|
||
- [ ] Ctrl+A: 전체 선택
|
||
- [ ] Space + Drag: 팬
|
||
- [ ] 튜토리얼 및 도움말
|
||
- [ ] 첫 방문자 가이드
|
||
- [ ] 인터랙티브 튜토리얼
|
||
- [ ] 컨텍스트 도움말
|
||
|
||
**마일스톤 3**: 사용자 친화적인 인터페이스 완성
|
||
|
||
### Phase 4: 고급 기능 (1주)
|
||
|
||
#### Week 6
|
||
|
||
- [ ] 그룹화 기능
|
||
- [ ] 노드 그룹 생성
|
||
- [ ] 그룹 접기/펼치기
|
||
- [ ] 그룹 색상 및 라벨
|
||
- [ ] 주석 시스템
|
||
- [ ] 노드 주석
|
||
- [ ] 플로팅 주석
|
||
- [ ] 연결선 라벨
|
||
- [ ] 실행 추적 (디버그 모드)
|
||
- [ ] 노드별 실행 상태 표시
|
||
- [ ] 데이터 흐름 애니메이션
|
||
- [ ] 실행 로그 패널
|
||
- [ ] 중단점 설정
|
||
- [ ] 버전 관리
|
||
- [ ] 플로우 버전 히스토리
|
||
- [ ] 버전 비교
|
||
- [ ] 이전 버전 복원
|
||
- [ ] 내보내기/가져오기
|
||
- [ ] JSON 파일 내보내기
|
||
- [ ] JSON 파일 가져오기
|
||
- [ ] 이미지 내보내기 (PNG/SVG)
|
||
- [ ] 템플릿 공유
|
||
|
||
**마일스톤 4**: 프로덕션 레디 기능 완성
|
||
|
||
### Phase 5: 최적화 및 테스트 (1주)
|
||
|
||
#### Week 7
|
||
|
||
- [ ] 성능 최적화
|
||
- [ ] 대규모 플로우 렌더링 최적화
|
||
- [ ] 가상 스크롤링
|
||
- [ ] 레이지 로딩
|
||
- [ ] 단위 테스트
|
||
- [ ] 노드 컴포넌트 테스트
|
||
- [ ] 검증 로직 테스트
|
||
- [ ] 플로우 실행 테스트
|
||
- [ ] 통합 테스트
|
||
- [ ] E2E 시나리오 테스트
|
||
- [ ] 크로스 브라우저 테스트
|
||
- [ ] 사용자 테스트
|
||
- [ ] 베타 테스터 모집
|
||
- [ ] 피드백 수집 및 반영
|
||
- [ ] 문서화
|
||
- [ ] 사용자 가이드
|
||
- [ ] API 문서
|
||
- [ ] 개발자 문서
|
||
|
||
**최종 마일스톤**: 프로덕션 배포 준비 완료
|
||
|
||
---
|
||
|
||
## 💡 추가 기능 아이디어
|
||
|
||
### 1. 템플릿 갤러리
|
||
|
||
#### 1.1 내장 템플릿
|
||
|
||
```
|
||
📚 템플릿 카테고리:
|
||
|
||
1️⃣ 데이터 동기화
|
||
- 테이블 → 테이블 복사
|
||
- 테이블 → 외부 DB 동기화
|
||
- 양방향 동기화
|
||
- 증분 동기화 (변경분만)
|
||
|
||
2️⃣ 데이터 정제
|
||
- 중복 제거
|
||
- NULL 값 처리
|
||
- 데이터 형식 변환
|
||
- 데이터 검증
|
||
|
||
3️⃣ 데이터 집계
|
||
- 그룹별 집계
|
||
- 시계열 집계
|
||
- 피벗 테이블 생성
|
||
|
||
4️⃣ 외부 연동
|
||
- REST API → DB
|
||
- DB → REST API
|
||
- 파일 → DB
|
||
- DB → 파일
|
||
|
||
5️⃣ 배치 처리
|
||
- 일일 배치
|
||
- 대용량 데이터 처리
|
||
- 에러 핸들링
|
||
```
|
||
|
||
#### 1.2 사용자 정의 템플릿
|
||
|
||
```typescript
|
||
// 템플릿 저장
|
||
const saveAsTemplate = () => {
|
||
const template = {
|
||
name: "사용자 데이터 동기화",
|
||
description: "user_info를 Oracle USERS로 동기화",
|
||
category: "custom",
|
||
nodes: currentNodes,
|
||
edges: currentEdges,
|
||
thumbnail: generateThumbnail(),
|
||
parameters: extractParameters(), // 매개변수화
|
||
};
|
||
|
||
saveTemplate(template);
|
||
};
|
||
|
||
// 템플릿 적용
|
||
const applyTemplate = (template) => {
|
||
// 매개변수 입력 받기
|
||
const params = promptParameters(template.parameters);
|
||
|
||
// 노드 생성
|
||
const nodes = template.nodes.map((node) => replaceParameters(node, params));
|
||
|
||
addNodes(nodes);
|
||
addEdges(template.edges);
|
||
};
|
||
```
|
||
|
||
### 2. AI 어시스턴트
|
||
|
||
#### 2.1 자연어 플로우 생성
|
||
|
||
```
|
||
사용자: "사용자 테이블을 Oracle DB로 복사하고 싶어요"
|
||
|
||
AI 분석:
|
||
1. 소스: user_info 테이블
|
||
2. 타겟: Oracle USERS 테이블
|
||
3. 액션: INSERT
|
||
|
||
AI 제안:
|
||
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
|
||
│ 📊 user_info │═══════>│ 🔀 필드 매핑 │═══════>│ ➕ INSERT │
|
||
│ │ │ 자동 매핑 │ │ USERS │
|
||
└──────────────┘ └──────────────┘ └──────────────┘
|
||
|
||
"이 플로우를 생성할까요? [생성] [수정]"
|
||
```
|
||
|
||
#### 2.2 오류 자동 수정
|
||
|
||
```
|
||
오류 감지:
|
||
❌ user_name 필드가 매핑되지 않았습니다
|
||
|
||
AI 제안:
|
||
"user_name을 USERNAME으로 자동 매핑할까요?"
|
||
[자동 수정] [무시] [수동 수정]
|
||
```
|
||
|
||
#### 2.3 최적화 제안
|
||
|
||
```
|
||
AI 분석:
|
||
⚠️ 현재 플로우는 10,000건 이상의 데이터를 처리합니다.
|
||
|
||
AI 제안:
|
||
1. 배치 처리 활성화 (1000건씩)
|
||
2. 인덱스가 없는 필드 조건 제거
|
||
3. 불필요한 필드 변환 최적화
|
||
|
||
예상 성능 개선: 3배
|
||
[적용하기] [상세 보기]
|
||
```
|
||
|
||
### 3. 실행 추적 (디버그 모드)
|
||
|
||
#### 3.1 실시간 실행 상태
|
||
|
||
```
|
||
실행 중 노드 상태:
|
||
|
||
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
|
||
│ 📊 user_info │ │ 🔀 필드 매핑 │ │ ➕ INSERT │
|
||
│ ✅ 완료 │═══════>│ ⚡ 실행 중 │═══════>│ ⏳ 대기 중 │
|
||
│ 100건 읽음 │ │ 47/100 │ │ │
|
||
└──────────────┘ └──────────────┘ └──────────────┘
|
||
|
||
진행률: ████████░░ 80%
|
||
소요 시간: 00:00:23
|
||
예상 완료: 00:00:29
|
||
```
|
||
|
||
#### 3.2 데이터 미리보기
|
||
|
||
```
|
||
노드 클릭 시 데이터 샘플:
|
||
|
||
┌─ user_info 출력 데이터 ─────────────┐
|
||
│ Row 1: │
|
||
│ user_id: 1001 │
|
||
│ user_name: "홍길동" │
|
||
│ email: "hong@example.com" │
|
||
│ │
|
||
│ Row 2: │
|
||
│ user_id: 1002 │
|
||
│ user_name: "김철수" │
|
||
│ ... │
|
||
│ │
|
||
│ [전체 보기] [CSV 다운로드] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.3 중단점 설정
|
||
|
||
```
|
||
디버그 기능:
|
||
|
||
1. 중단점 설정
|
||
- 노드에서 우클릭 → "중단점 설정"
|
||
- 해당 노드에서 실행 일시 정지
|
||
|
||
2. 단계별 실행
|
||
[▶️ 다음 노드] [⏭️ 완료까지] [⏹️ 중지]
|
||
|
||
3. 변수 감시
|
||
- 특정 필드 값 추적
|
||
- 조건 변화 모니터링
|
||
```
|
||
|
||
### 4. 협업 기능
|
||
|
||
#### 4.1 실시간 공동 편집
|
||
|
||
```
|
||
사용자 표시:
|
||
- 👤 김주석 (나)
|
||
- 👤 이철수 (편집 중) ← 빨간색 커서
|
||
- 👤 박영희 (보기만) ← 초록색 커서
|
||
|
||
동시 편집:
|
||
- 각 사용자의 커서 위치 표시
|
||
- 노드 잠금 (편집 중인 노드)
|
||
- 충돌 방지 메커니즘
|
||
```
|
||
|
||
#### 4.2 변경 이력 및 댓글
|
||
|
||
```
|
||
┌──────────────┐
|
||
│ 필드 매핑 │
|
||
│ │ 💬 3
|
||
│ │
|
||
└──────────────┘
|
||
|
||
댓글:
|
||
김주석: "user_id를 SALT로 매핑하는게 맞나요?"
|
||
이철수: "네, 맞습니다. 보안을 위한 필드입니다."
|
||
박영희: "문서에 추가했습니다."
|
||
```
|
||
|
||
#### 4.3 승인 워크플로우
|
||
|
||
```
|
||
플로우 변경 승인 프로세스:
|
||
|
||
1. 개발자: 플로우 수정
|
||
↓
|
||
2. 검토 요청
|
||
↓
|
||
3. 관리자: 변경 사항 검토
|
||
- 변경 전/후 비교
|
||
- 영향도 분석
|
||
↓
|
||
4. 승인/반려
|
||
↓
|
||
5. 배포 또는 재작업
|
||
```
|
||
|
||
---
|
||
|
||
## 🎓 학습 리소스 및 온보딩
|
||
|
||
### 1. 인터랙티브 튜토리얼
|
||
|
||
#### 단계별 가이드
|
||
|
||
```
|
||
튜토리얼 1: 첫 번째 플로우 만들기 (5분)
|
||
┌─────────────────────────────────────┐
|
||
│ 1단계: 데이터 소스 추가 │
|
||
│ "좌측에서 '테이블' 노드를 드래그" │
|
||
│ │
|
||
│ [다음] [건너뛰기] │
|
||
└─────────────────────────────────────┘
|
||
|
||
튜토리얼 2: 조건 분기 사용하기 (7분)
|
||
튜토리얼 3: 복잡한 변환 구현하기 (10분)
|
||
튜토리얼 4: 디버깅 및 최적화 (8분)
|
||
```
|
||
|
||
### 2. 도움말 시스템
|
||
|
||
#### 컨텍스트 도움말
|
||
|
||
```
|
||
노드 위에 마우스 오버:
|
||
┌─────────────────────────────────────┐
|
||
│ 💡 필드 매핑 노드 │
|
||
│ │
|
||
│ 소스 필드를 타겟 필드로 매핑합니다.│
|
||
│ │
|
||
│ 사용 방법: │
|
||
│ 1. 입력 데이터 연결 │
|
||
│ 2. 매핑 규칙 정의 │
|
||
│ 3. 출력을 다음 노드로 연결 │
|
||
│ │
|
||
│ [자세히 보기] [튜토리얼 보기] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 예제 갤러리
|
||
|
||
```
|
||
📚 예제 플로우 갤러리
|
||
|
||
초급:
|
||
- 단순 테이블 복사
|
||
- 필드명 변경하여 복사
|
||
- 특정 레코드만 복사
|
||
|
||
중급:
|
||
- 조건부 데이터 처리
|
||
- 다중 테이블 병합
|
||
- 데이터 형식 변환
|
||
|
||
고급:
|
||
- 복잡한 데이터 정제
|
||
- 다중 분기 처리
|
||
- 배치 최적화
|
||
|
||
[예제 열기] [템플릿으로 저장]
|
||
```
|
||
|
||
---
|
||
|
||
## 📈 성공 지표 (KPI)
|
||
|
||
### 사용자 경험 지표
|
||
|
||
```
|
||
1. 학습 시간
|
||
- 목표: 기존 대비 40% 단축
|
||
- 측정: 첫 플로우 완성까지 소요 시간
|
||
- 현재: 평균 15분
|
||
- 목표: 평균 9분
|
||
|
||
2. 작업 효율성
|
||
- 목표: 플로우 생성 시간 50% 단축
|
||
- 측정: 동일 기능 구현 소요 시간
|
||
- 현재: 평균 20분
|
||
- 목표: 평균 10분
|
||
|
||
3. 오류 감소
|
||
- 목표: 설정 오류 60% 감소
|
||
- 측정: 실행 실패율
|
||
- 현재: 12%
|
||
- 목표: 4.8%
|
||
|
||
4. 사용자 만족도
|
||
- 목표: NPS 40점 이상
|
||
- 측정: 설문 조사
|
||
- 주기: 분기별
|
||
```
|
||
|
||
### 기술 성능 지표
|
||
|
||
```
|
||
1. 렌더링 성능
|
||
- 목표: 100개 노드 렌더링 < 100ms
|
||
- 측정: React Profiler
|
||
|
||
2. 메모리 사용
|
||
- 목표: 대규모 플로우 < 100MB
|
||
- 측정: Chrome DevTools
|
||
|
||
3. 저장/로드 속도
|
||
- 목표: 플로우 저장 < 500ms
|
||
- 측정: Network 탭
|
||
|
||
4. 검증 속도
|
||
- 목표: 실시간 검증 < 50ms
|
||
- 측정: Performance API
|
||
```
|
||
|
||
### 비즈니스 지표
|
||
|
||
```
|
||
1. 도입률
|
||
- 목표: 신규 사용자 60% 이상이 노드 에디터 선택
|
||
- 측정: 사용 통계
|
||
|
||
2. 재사용률
|
||
- 목표: 템플릿 재사용 40% 이상
|
||
- 측정: 템플릿 사용 횟수
|
||
|
||
3. 생산성
|
||
- 목표: 플로우 생성 수 2배 증가
|
||
- 측정: 월별 생성된 플로우 수
|
||
|
||
4. 유지보수
|
||
- 목표: 플로우 수정 시간 30% 단축
|
||
- 측정: 평균 수정 소요 시간
|
||
```
|
||
|
||
---
|
||
|
||
## 🔒 보안 및 권한
|
||
|
||
### 1. 접근 제어
|
||
|
||
```typescript
|
||
// 플로우 권한 레벨
|
||
enum FlowPermission {
|
||
VIEW = "view", // 보기만
|
||
EDIT = "edit", // 편집 가능
|
||
EXECUTE = "execute", // 실행 가능
|
||
ADMIN = "admin", // 모든 권한
|
||
}
|
||
|
||
// 권한 체크
|
||
const checkPermission = (
|
||
userId: string,
|
||
flowId: number,
|
||
permission: FlowPermission
|
||
) => {
|
||
const userPermissions = getUserFlowPermissions(userId, flowId);
|
||
return userPermissions.includes(permission);
|
||
};
|
||
```
|
||
|
||
### 2. 민감 정보 보호
|
||
|
||
```typescript
|
||
// 비밀번호 등 민감 정보 마스킹
|
||
const renderSensitiveField = (value: string, fieldType: string) => {
|
||
if (fieldType === "password" || fieldType === "secret") {
|
||
return "••••••••";
|
||
}
|
||
return value;
|
||
};
|
||
|
||
// 실행 로그에서 민감 정보 제외
|
||
const sanitizeLog = (log: string) => {
|
||
return log
|
||
.replace(/password=\w+/gi, "password=***")
|
||
.replace(/token=\w+/gi, "token=***");
|
||
};
|
||
```
|
||
|
||
### 3. 감사 로그
|
||
|
||
```typescript
|
||
// 모든 플로우 변경 기록
|
||
interface AuditLog {
|
||
timestamp: Date;
|
||
userId: string;
|
||
flowId: number;
|
||
action: "create" | "update" | "delete" | "execute";
|
||
changes: {
|
||
before: any;
|
||
after: any;
|
||
};
|
||
ipAddress: string;
|
||
}
|
||
|
||
// 로그 기록
|
||
const logFlowChange = (log: AuditLog) => {
|
||
saveAuditLog(log);
|
||
|
||
if (isCriticalChange(log)) {
|
||
notifyAdmins(log);
|
||
}
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 🌐 국제화 (i18n)
|
||
|
||
### 지원 언어
|
||
|
||
```
|
||
- 한국어 (ko) - 기본
|
||
- 영어 (en)
|
||
- 일본어 (ja)
|
||
- 중국어 간체 (zh-CN)
|
||
```
|
||
|
||
### 번역 대상
|
||
|
||
```
|
||
1. UI 라벨 및 버튼
|
||
2. 노드 타입명 및 설명
|
||
3. 오류 메시지
|
||
4. 도움말 및 튜토리얼
|
||
5. 템플릿명 및 설명
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 반응형 디자인
|
||
|
||
### 화면 크기별 대응
|
||
|
||
```
|
||
1. 데스크톱 (1920px+)
|
||
- 전체 기능 사용 가능
|
||
- 3열 레이아웃 (도구-캔버스-속성)
|
||
|
||
2. 노트북 (1366px ~ 1920px)
|
||
- 속성 패널 접기 가능
|
||
- 2열 레이아웃
|
||
|
||
3. 태블릿 (768px ~ 1366px)
|
||
- 도구 패널 오버레이
|
||
- 1열 레이아웃 + 플로팅 패널
|
||
|
||
4. 모바일 (~ 768px)
|
||
- 뷰어 모드만 지원 (편집 불가)
|
||
- 플로우 실행 및 모니터링 가능
|
||
```
|
||
|
||
---
|
||
|
||
## 🎉 결론
|
||
|
||
노드 기반 데이터 제어 시스템은 현재의 단계별 마법사 방식에 비해 다음과 같은 혁신적인 개선을 제공합니다:
|
||
|
||
### 핵심 가치
|
||
|
||
1. **직관성**: 비개발자도 쉽게 이해하고 사용
|
||
2. **효율성**: 작업 시간 50% 이상 단축
|
||
3. **유연성**: 복잡한 로직도 쉽게 표현
|
||
4. **협업**: 팀 간 소통 및 협업 향상
|
||
5. **품질**: 실시간 검증으로 오류 감소
|
||
|
||
### 기대 효과
|
||
|
||
- 사용자 만족도 향상
|
||
- 개발 생산성 증가
|
||
- 유지보수 비용 감소
|
||
- 시스템 안정성 향상
|
||
|
||
### 다음 단계
|
||
|
||
1. 이해관계자 리뷰 및 피드백
|
||
2. 프로토타입 개발 (1주)
|
||
3. 사용자 테스트 (1주)
|
||
4. 본격 개발 시작
|
||
|
||
---
|
||
|
||
## 📚 참고 자료
|
||
|
||
### 유사 시스템
|
||
|
||
1. **n8n**: 워크플로우 자동화 플랫폼
|
||
- https://n8n.io/
|
||
2. **Node-RED**: IoT 플로우 기반 프로그래밍
|
||
- https://nodered.org/
|
||
3. **Unreal Blueprint**: 게임 개발 비주얼 스크립팅
|
||
- https://docs.unrealengine.com/en-US/ProgrammingAndScripting/Blueprints/
|
||
|
||
### 기술 문서
|
||
|
||
1. **React Flow 공식 문서**
|
||
- https://reactflow.dev/
|
||
2. **React Flow 예제**
|
||
- https://reactflow.dev/examples
|
||
3. **TypeScript 베스트 프랙티스**
|
||
- https://www.typescriptlang.org/docs/
|
||
|
||
### 디자인 가이드
|
||
|
||
1. **Material Design - Data Visualization**
|
||
- https://material.io/design/communication/data-visualization.html
|
||
2. **Blueprint UI Framework**
|
||
- https://blueprintjs.com/
|
||
|
||
---
|
||
|
||
**문서 버전**: 1.0
|
||
**최종 수정**: 2025-10-02
|
||
**작성자**: 개발팀
|
||
**검토자**: 제품팀, 디자인팀
|
||
**승인자**: CTO
|