"Structured는 Step CRUD, Visual은 연결만 — 역할을 분리했다"
Structured Step Editor는 이미 완성돼 있었지만, 정작 Visual Flow Canvas가 없어 관련 요건을 충족하지 못하는 상태였습니다. 코드를 살펴보니 리듀서에 Node를 추가하거나 수정하는 액션은 있는데, Edge를 추가하거나 삭제하는 액션 자체가 아예 없었습니다.
@xyflow/react를 도입하면서, 먼저 Domain 모델(ProcessNode/ProcessEdge)과 React Flow가 요구하는 객체 형태를 서로 변환하는 순수 Adapter를 분리했습니다. Custom Node 4종을 Domain의 Node Type과 1:1로 매핑하고, 색상만으로 구분하지 않고 모양과 아이콘, 라벨까지 함께 써서 구분되도록 했습니다.
리듀서에 ADD_EDGE(즉시 실제 UUID를 확정)와 DELETE_EDGE를 신규로 추가했고, 두 Node를 연결할 때는 새로운 검증 로직을 만들지 않고 기존 그래프 검증 함수를 재사용해 중복 Edge나 Self Loop만 즉시 피드백하도록 했습니다.
Node 생성 기능은 이번 범위에서 의도적으로 제외했습니다. Structured Editor가 이미 그 역할을 맡고 있고, Canvas는 위치와 연결에만 집중하는 게 문서상의 역할 분리와 맞았기 때문입니다. 272개 테스트가 통과했고, Edge id 처리가 Node용과 같은 패턴이라 문제없다는 걸 회귀 테스트로 고정했습니다. 다만 이 시점의 검증은 코드와 자동 테스트 수준이었고, 실제 사용자가 여러 Node를 자유롭게 연결하며 쓰는 흐름은 이후 작업에서 브라우저로 직접 확인하게 됩니다.
"Structured Editor는 Step CRUD, Visual Editor는 연결(Edge) 담당"이라는 문서상의 역할 분리를 그대로 따랐습니다. 새 패턴을 발명하지 않고, 이미 문서에 있던 경계를 코드로 옮기는 것에 집중했습니다. Node 생성 기능을 이번 범위에서 의도적으로 제외한 것도 같은 이유로, Canvas는 위치와 연결에만 집중하도록 역할을 명확히 나눴습니다.
관련 프로젝트
프로젝트 개요 비즈니스 프로세스 트랜스포메이션(BPR)을 지원하는 한국어 기반 웹 애플리케이션. 컨설팅 프로젝트의 AS-IS 프로세스 분석부터 TO-BE 설계, Blueprint 승인까지의 전체 워크플로우를 디지털화하는 플랫폼으로, EPIC 단위로 구조화된 백로그를 기반으로 개발 중. 역할 및 워크플로우 PM / Architect / Reviewer 역할 수행 Codex(구현 담당)에게 Task 단위 구현 프롬프트 설계 Codex 구현 결과를 git log, git grep, git status로 직접 검증 후 승인 승인 전에는 Codex가 commit하지 않는 엄격한 게이팅 프로세스 운영 한 번에 하나의 Backlog Task만 진행, Task 완료 전 다음 Task 착수 금지 기술적 의사결정 및 성과 워크스페이스/프로젝트 접근 권한을 DB 레벨(복합 FK, SECURITY DEFINER 트리거)과 애플리케이션 레벨(Server Action 권한 검증)의 이중 방어 구조로 설계 Hard Delete 미구현 원칙 하에 배열 필드 전체교체(replace)를 단일 트랜잭션 RPC로 처리하는 패턴 확립 및 재사용 AS-IS 프로세스 그래프의 순환 참조 탐지에 Tarjan SCC 알고리즘 적용, 차단 오류(Error)와 경고(Warning)를 분리한 이중 Validator 아키텍처 설계 도메인 규칙 위반을 커스텀 Postgres 에러 코드 체계(SIA0104)로 문서화하여 거버넌스 문서와 코드베이스 간 정합성 유지 AI 생성 데이터와 사람이 검증한 데이터를 구분하는 generatedbyai / verified 메타데이터 패턴을 여러 도메인 테이블에 일관되게 적용 진행 상태 ✅ EPIC-01 (인증 / 워크스페이스 / 프로젝트 접근) ✅ EPIC-02 (조직 / 산업 / 프로젝트) 🚧 EPIC-03 (AS-IS 프로세스 그래프) — 그래프 검증, Input/Output 스키마, Business Rule 스키마 구현 완료