Files

kjs 0743786f9b feat: 노드 기반 데이터 플로우 시스템 구현

- 노드 에디터 UI 구현 (React Flow 기반)
  - TableSource, DataTransform, INSERT, UPDATE, DELETE, UPSERT 노드
  - 드래그앤드롭 노드 추가 및 연결
  - 속성 패널을 통한 노드 설정
  - 실시간 필드 라벨 표시 (column_labels 테이블 연동)

- 데이터 변환 노드 (DataTransform) 기능
  - EXPLODE: 구분자로 1개 행 → 여러 행 확장
  - UPPERCASE, LOWERCASE, TRIM, CONCAT, SPLIT, REPLACE 등 12가지 변환 타입
  - In-place 변환 지원 (타겟 필드 생략 시 소스 필드 덮어쓰기)
  - 변환된 필드가 하위 액션 노드에 자동 전달

- 노드 플로우 실행 엔진
  - 위상 정렬을 통한 노드 실행 순서 결정
  - 레벨별 병렬 실행 (Promise.allSettled)
  - 부분 실패 허용 (한 노드 실패 시 연결된 하위 노드만 스킵)
  - 트랜잭션 기반 안전한 데이터 처리

- UPSERT 액션 로직 구현
  - DB 제약 조건 없이 SELECT → UPDATE or INSERT 방식
  - 복합 충돌 키 지원 (예: sales_no + product_name)
  - 파라미터 인덱스 정확한 매핑

- 데이터 소스 자동 감지
  - 테이블 선택 데이터 (selectedRowsData) 자동 주입
  - 폼 입력 데이터 (formData) 자동 주입
  - TableSource 노드가 외부 데이터 우선 사용

- 버튼 컴포넌트 통합
  - 기존 관계 실행 + 새 노드 플로우 실행 하이브리드 지원
  - 노드 플로우 선택 UI 추가
  - API 클라이언트 통합 (Axios)

- 개발 문서 작성
  - 노드 기반 제어 시스템 개선 계획
  - 노드 연결 규칙 설계
  - 노드 실행 엔진 설계
  - 노드 구조 개선안
  - 버튼 통합 분석

2025-10-02 16:22:29 +09:00

62 KiB

Raw Permalink Blame History

🎯 노드 기반 데이터 제어 시스템 개선 계획

📋 문서 정보

작성일: 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 노드 추가

// 사용자 액션
1. 좌측 도구 패널에서 노드 아이템 클릭
2. 캔버스로 드래그
3. 원하는 위치에 드롭

// 시스템 동작
- 마우스 커서를 따라 노드 프리뷰 표시
- 드롭 가능 영역 하이라이트
- 드롭 시 새 노드 생성 및 배치

1.2 노드 이동

// 사용자 액션
1. 캔버스의 노드 헤더 클릭
2. 원하는 위치로 드래그
3. 드롭하여 재배치

// 시스템 동작
- 연결된 선들이 함께 움직임
- 그리드 스냅 옵션 (10px 단위)
- 다중 선택 시 여러 노드 동시 이동

1.3 다중 선택

// 방법 1: Shift + 클릭
노드를 하나씩 Shift + 클릭하여 선택

// 방법 2: 드래그 영역 선택
빈 공간을 드래그하여 사각형 영역 내 노드 선택

// 방법 3: Ctrl + A
전체 노드 선택

2. 연결선 그리기

2.1 연결 생성

// 단계별 프로세스
1. 출력 포인트(○) 클릭
2. 마우스를 드래그하여 선 그리기
3. 입력 포인트에 드롭하여 연결

// 시각적 피드백
- 드래그 중 임시 선 표시
- 호환되는 입력 포인트 하이라이트
- 호환되지 않는 포인트 비활성화

2.2 연결 검증

// 타입 검증
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 연결 스타일

// 연결선 종류
1. 데이터 흐름: 굵은 곡선 (베지어 커브)
2. 필드 연결: 가는 직선
3. 조건 분기: 점선 (TRUE/FALSE)

// 색상 코딩
- 정상: #3B82F6 (파란색)
- 경고: #F59E0B (주황색)
- 오류: #EF4444 (빨간색)
- 비활성: #9CA3AF (회색)

3. 실시간 검증

3.1 구문 검증

// 필드명 검증
validateFieldName(fieldName) {
  // 존재하지 않는 필드
  if (!sourceFields.includes(fieldName)) {
    return error('필드를 찾을 수 없습니다');
  }
}

// SQL 표현식 검증
validateSQLExpression(expression) {
  try {
    // 기본 SQL 파싱
    parseSQLExpression(expression);
    return success();
  } catch (e) {
    return error('잘못된 SQL 표현식');
  }
}

3.2 논리 검증

// 필수 연결 체크
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	• 가장 인기있음 • 풍부한 예제 • TypeScript 지원 • 커스터마이징 용이	• 복잡한 로직은 직접 구현	⭐⭐⭐⭐⭐
Rete.js	• 강력한 플러그인 시스템 • 자동 레이아웃	• 학습 곡선 높음 • React 통합 까다로움	⭐⭐⭐⭐
react-diagram	• 간단한 구조	• 기능 제한적 • 업데이트 느림	⭐⭐⭐

2. React Flow 선택 이유

// 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 노드 데이터 모델

// 기본 노드 인터페이스
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 연결선 데이터 모델

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 전체 플로우 데이터

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. 상태 관리

// 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 사용자 정의 템플릿

// 템플릿 저장
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. 접근 제어

// 플로우 권한 레벨
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. 민감 정보 보호

// 비밀번호 등 민감 정보 마스킹
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. 감사 로그

// 모든 플로우 변경 기록
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)
   - 뷰어 모드만 지원 (편집 불가)
   - 플로우 실행 및 모니터링 가능

🎉 결론

노드 기반 데이터 제어 시스템은 현재의 단계별 마법사 방식에 비해 다음과 같은 혁신적인 개선을 제공합니다:

핵심 가치

직관성: 비개발자도 쉽게 이해하고 사용
효율성: 작업 시간 50% 이상 단축
유연성: 복잡한 로직도 쉽게 표현
협업: 팀 간 소통 및 협업 향상
품질: 실시간 검증으로 오류 감소

기대 효과

사용자 만족도 향상
개발 생산성 증가
유지보수 비용 감소
시스템 안정성 향상

다음 단계

이해관계자 리뷰 및 피드백
프로토타입 개발 (1주)
사용자 테스트 (1주)
본격 개발 시작

📚 참고 자료

유사 시스템

n8n: 워크플로우 자동화 플랫폼
- https://n8n.io/
Node-RED: IoT 플로우 기반 프로그래밍
- https://nodered.org/
Unreal Blueprint: 게임 개발 비주얼 스크립팅
- https://docs.unrealengine.com/en-US/ProgrammingAndScripting/Blueprints/

기술 문서

React Flow 공식 문서
- https://reactflow.dev/
React Flow 예제
- https://reactflow.dev/examples
TypeScript 베스트 프랙티스
- https://www.typescriptlang.org/docs/

디자인 가이드

Material Design - Data Visualization
- https://material.io/design/communication/data-visualization.html
Blueprint UI Framework
- https://blueprintjs.com/

문서 버전: 1.0
최종 수정: 2025-10-02
작성자: 개발팀
검토자: 제품팀, 디자인팀
승인자: CTO

62 KiB Raw Permalink Blame History Unescape Escape

🎯 노드 기반 데이터 제어 시스템 개선 계획

📋 문서 정보

📈 구현 진행 상황

✅ 완료된 작업 (Phase 1)

Week 1 - 완료 ✓

Week 2 - 완료 ✓

Week 3 - 완료 ✓

Week 4 - 완료 ✓

🎉 Phase 1 & Phase 2 완료!

🎯 다음 작업 (Phase 3)

Week 5 - 완료 ✓

🎉 Phase 2 완료!

🎯 Phase 3 계획: 검증 및 실행 시스템

Week 6 - 완료 ✓

우선순위 1: 검증 시스템 강화 ✅ 완료

우선순위 2: 플로우 실행 엔진 (추후 구현)

📦 구현된 컴포넌트

🎮 현재 사용 가능한 기능

📍 테스트 URL

📊 현재 시스템 분석

현재 구조

문제점

1. 사용성 문제

2. 기능적 제한

3. 학습 곡선

🚀 제안: 노드 기반 비주얼 에디터

핵심 개념

주요 장점

1. 직관성

2. 유연성

3. 생산성

4. 디버깅

🎨 UI/UX 디자인

전체 레이아웃

도구 패널 상세

데이터 소스 섹션

🎯 노드 타입 정의

1. 데이터 소스 노드

1.1 테이블 소스 노드

1.2 외부 DB 소스 노드

1.3 REST API 노드

2. 변환/조건 노드

2.1 조건 분기 노드

2.2 필드 매핑 노드

2.3 데이터 변환 노드

3. 액션 노드

3.1 INSERT 노드

3.2 UPDATE 노드

3.3 DELETE 노드

4. 유틸리티 노드

4.1 주석 노드

4.2 로그 노드

📐 실제 사용 예시

예시 1: 간단한 데이터 복사

현재 시스템

노드 기반 시스템

예시 2: 조건부 데이터 처리

시나리오

노드 배치

예시 3: 복잡한 다중 분기

시나리오

노드 배치

🎮 주요 기능 명세

1. 드래그 앤 드롭

1.1 노드 추가

1.2 노드 이동

1.3 다중 선택

2. 연결선 그리기

2.1 연결 생성

2.2 연결 검증

2.3 연결 스타일

3. 실시간 검증

3.1 구문 검증

3.2 논리 검증

3.3 시각적 피드백

4. 그룹화 및 주석

4.1 그룹 노드

4.2 주석 시스템

🔧 기술 스택

62 KiB

Raw Permalink Blame History