출처: 이에이트(주)

✨ 프로젝트 소개

• NDXPRO ADMIN WEB은 NGSI-LD 기반 디지털 트윈 데이터를 정제하고 모델링·운영할 수 있는 NDXPRO 플랫폼의 핵심 관리 시스템입니다.
• 프로젝트 참여 인력
  • FE: 3명
  • BE: 3명
  • 디자이너: 1명
• 프로젝트 소개 URL
• 프로젝트 소개 영상

✨ 내가 기여한 부분

🚩 Problem: React Flow 기반 V3의 한계점

1. 노드 그룹핑 기능의 제약

   • 같은 타입의 Relationship을 가진 여러 Data Model을 하나의 그룹으로 묶어서 표시하는 기능이 필요했으나, React Flow의 기본 구조에서는 이를 구현하기 어려웠습니다.

   • React Flow는 각 노드를 독립적인 엔티티로 관리하기 때문에, 동적으로 여러 노드를 하나의 컨테이너로 묶는 것이 복잡했습니다

   • 사용자가 관계가 많은 복잡한 데이터 모델을 다룰 때 화면이 복잡해지고 가독성이 떨어짐

   • 유사한 관계를 가진 노드들을 시각적으로 그룹화하여 관리할 수 없음

     Screen Recording 2025-12-30 at 4.00.58 pm.mov

2. 커스터마이징의 어려움

   • 노드 내부 상호작용: 노드 내부의 버튼 클릭, 드롭다운, 컨텍스트 메뉴 등 복잡한 UI 요소를 React Flow의 노드 시스템 안에서 자유롭게 구현하기 어려웠습니다
   • 엣지 스타일링: 엣지에 애니메이션 효과(점선 애니메이션), 동적 색상 변경, 레이블 표시 등을 세밀하게 제어하기 어려웠습니다
   • 레이아웃 제어: Dagre 레이아웃을 React Flow와 통합할 때 레이아웃 알고리즘의 세부 파라미터를 조정하거나 커스텀 레이아웃 로직을 적용하는 데 제약이 있었습니다
   • 디자이너와 협업하여 구상한 세밀한 UI/UX 요구사항을 충족시키기 어려움
   • 사용자 경험 개선을 위한 인터랙션과 시각적 피드백 구현의 한계

3. 성능 및 제어권 문제

   • React Flow는 내부적으로 복잡한 상태 관리와 렌더링 최적화를 수행하는데, 대량의 노드와 엣지를 다룰 때 성능 이슈가 발생할 수 있었습니다
   • 라이브러리의 내부 동작을 완전히 제어할 수 없어, 특정 상황에서 예상치 못한 동작이 발생할 수 있었습니다
   • 확장성 있는 솔루션으로 발전시키기 어려움
   • 특정 비즈니스 요구사항에 맞춘 최적화가 제한적

🏃 Solution: 직접 구현한 V4 아키텍처

1. 커스텀 Canvas 기반 렌더링 아키텍처

• React Flow 의존성을 제거하고 React + TypeScript 기반 그래프 엔진 직접 구현
• 렌더링 책임을 명확히 분리
  • Viewport Layer: 팬·줌·애니메이션
  • Node Layer (DOM): 복잡한 UI와 인터랙션
  • Edge Layer (SVG): 시각적 표현과 애니메이션
• 모든 이동/확대는 transform 기반으로 처리하여 reflow 최소화
• requestAnimationFrame 기반 애니메이션으로 대규모 그래프에서도 안정적인 UX 유지

2. RelationshipGroupNode 설계

• 동일한 Relationship 타입을 하나의 그룹 노드로 추상화

• 그룹 내부에 Data Model을 그리드 형태로 배치하여

  관계 중심의 구조를 한 눈에 파악 가능하도록 설계