mirror of
https://github.com/sotam0316/drawNET_test.git
synced 2026-04-24 19:48:37 +09:00
static 폴더 및 하위 파일 업로드
This commit is contained in:
sotam0316
@@ -0,0 +1,238 @@
|
||||
# drawNET System Architecture: Native JSON-Object Topology (v1.0)
|
||||
|
||||
> **"Programs must be written for people to read, and only incidentally for machines to execute."** — *Harold Abelson*
|
||||
> **"What is not documented, does not exist in the eyes of Engineering."** — *Software Engineering Proverb*
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 (Abstract)
|
||||
|
||||
drawNET은 단순한 다이어그램 그리기 도구를 넘어, 엔터프라이즈급 네트워크 토폴로지 설계 및 엔니지어링을 위한 **객체 지향적 시각화 프레임워크**입니다. 초기 DSL(Domain Specific Language) 기반의 텍스트 중심 구조에서 탈피하여, 고성능 그래프 엔진인 **AntV X6 v2**를 기반으로 한 **JSON-Native 아키텍처**로 진화했습니다. 본 시스템은 데이터의 영속성(Persistence), 정밀한 공간 쿼리(Spatial Query), 그리고 멀티레이어 논리 격리를 핵심 가치로 삼는 **v1.0 Premium Edition**입니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 설계 철학 (Design Philosophy)
|
||||
|
||||
### 2.1 Drawing에서 Engineering으로
|
||||
기존 도구들이 시각적 표현에 집중했다면, drawNET은 **"데이터가 주도하는 시각화"**를 지향합니다. 모든 시각적 요소는 정규화된 데이터 모델의 하위 표현(View)에 불과하며, 핵심 로직은 UUID 기반의 객체 관계망에서 동작합니다.
|
||||
|
||||
### 2.2 하이브리드 인터페이스 (The Hybrid UI Strategy)
|
||||
사용자에게는 직관적인 GUI(마우스 조작)를 제공하지만, 백그라운드에서는 모든 행위가 정형화된 JSON 스트림으로 변환되어 저장됩니다. 이는 향후 AI 기반의 토폴로지 자동 최적화 및 이상 탐지(Anomaly Detection)를 위한 학습 데이터셋 구축에 최적화된 구조입니다.
|
||||
|
||||
---
|
||||
|
||||
## 3. 핵심 아키텍처 모델 (Core Architecture Model)
|
||||
|
||||
drawNET은 **SSoT (Single Source of Truth)** 원칙에 따라 모든 상태를 단일 JSON 객체로 관리합니다.
|
||||
|
||||
### 3.1 논리 흐름 (Logical Workflow)
|
||||
시스템의 데이터 처리는 다음과 같은 순환 구조를 따릅니다.
|
||||
|
||||
1. **Interaction Layer**: 사용자의 드래그, 단축키, 속성 변경을 수집합니다.
|
||||
2. **Event Orchestration**: 객체 간 부모-자식 관계 변경(Embedding), 연결 상태 변경(Connecting) 이벤트를 감지하여 데이터 무결성을 검증합니다.
|
||||
3. **Data Transformation**: 변경된 상태를 X6 셀(Cell)의 `data` 속성에 즉각 반영합니다.
|
||||
4. **Persistence Layer**: 변경된 전체 그래프 상태를 `graph.toJSON()`으로 직렬화하여 영속 저장소(LocalStorage/Server)에 동기화합니다.
|
||||
|
||||
### 3.2 UUID 기반 객체 참조 (UUID-based Referencing)
|
||||
모든 노드와 엣지는 시스템 전역에서 유일한 **UUID**를 식별자로 가집니다. 이는 **RFC4122 v4** 표준을 철저하게 준수하며, 라벨(Label)이나 명칭 변경 시에도 객체 간의 참조 무결성(Referential Integrity)이 깨지지 않도록 보장하며, 대규모 프로젝트에서 복잡한 계층 구조를 추적하는 핵심 메커니즘입니다.
|
||||
|
||||
### 3.3 시스템 구조도 (System Overview Diagram)
|
||||
|
||||
본 시스템의 모듈 간 상호작용과 데이터 흐름은 다음과 같습니다.
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
User["사용자 (User)"]
|
||||
X6["AntV X6 Graph Engine"]
|
||||
Sidebar["속성 사이드바 (Sidebar)"]
|
||||
Persistence["영속성 제어 (persistence.js)"]
|
||||
State["Shared State (state.js)"]
|
||||
LocalStorage["Local Storage / Server"]
|
||||
|
||||
User -- "UI 상호작용" --> X6
|
||||
X6 -- "JSON Export" --> Persistence
|
||||
Persistence -- "JSON Save" --> LocalStorage
|
||||
LocalStorage -- "JSON Load" --> Persistence
|
||||
Persistence -- "graph.fromJSON()" --> X6
|
||||
|
||||
X6 -- "객체 선택 (UUID)" --> Sidebar
|
||||
Sidebar -- "데이터 수정 (setData)" --> X6
|
||||
|
||||
subgraph Frontend [Client Side]
|
||||
X6
|
||||
Sidebar
|
||||
State
|
||||
Persistence
|
||||
end
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 멀티레이어 논리 격리 및 제어 (Multi-Layer & Logical Isolation)
|
||||
|
||||
drawNET은 단순히 선을 겹쳐 그리는 도구가 아닌, 복잡한 인프라를 **논리적 도메인(Domain)**으로 분리하여 관리하는 차세대 아키텍처를 채택했습니다. 이는 기존의 드로잉 도구(Draw.io, Visio 등)와 가장 극명하게 대비되는 drawNET만의 독보적 강점입니다.
|
||||
|
||||
### 4.1 Visual Layer vs. Logical Engineering Layer
|
||||
| 비교 항목 | 기존 도구 (Visio, Draw.io) | **drawNET Premium** |
|
||||
| :--- | :--- | :--- |
|
||||
| **핵심 성격** | **Visual Layer** (시각적 그룹화) | **Logical Layer** (엔지니어링 격리) |
|
||||
| **주요 용도** | 단순 Show/Hide (투명 비닐지 방식) | 도메인별 논리 격리 및 데이터 제어 |
|
||||
| **데이터 일관성** | 레이어 간 복사 시 별개 객체로 분리 | 동일 UUID 기반의 다중 관점(View) 동기화 |
|
||||
| **상호 작용** | 레이어 간 논리적 연동 불가 | Cross-layer Tunneling (계층 간 연동 추적) |
|
||||
| **활용 가치** | "그림의 정리 정돈" | "복잡한 시스템의 통합 거버넌스" |
|
||||
|
||||
### 4.2 왜 '논리적 격리'인가? (The Reason Why)
|
||||
엔터프라이즈급 인프라 설계에서 물리(Physical), 논리(Logical), 보안(Security) 데이터를 하나의 화면에 그리는 것은 불가능에 가깝습니다. drawNET은 이를 해결하기 위해 다음과 같은 고난도 기술을 구현했습니다.
|
||||
1. **도메인 격리(Domain Isolation)**: L1(케이블/랙), L2(VLAN/IP), L3(보안 정책) 등 각 도메인의 정밀한 분리를 통해 설계의 복잡도를 낮추고 각 담당자가 본인의 영역에 집중하게 합니다.
|
||||
2. **Single Source of Truth (SSOT)**: 1번 레이어의 '코어 스위치'와 3번 레이어의 '보안 장비'가 동일한 물리 장비라면, drawNET은 단 하나의 데이터 소스를 공유하여 어느 레이어에서 수정해도 전체 정합성이 유지되게 설계되었습니다.
|
||||
3. **지능형 터널링(Layer Tunneling)**: 레이어는 분리되어 있지만, 데이터 경로(Path)는 연결되어 있습니다. 물리적 케이블이 끊어졌을 때 논리 레이어의 패킷 흐름에 어떤 영향을 주는지 **교차 레이어 분석**이 가능합니다.
|
||||
|
||||
### 4.3 공간 쿼리 및 부모 선택 알고리즘 (Innermost Heuristic)
|
||||
노드가 중첩된 그룹 영역으로 이동할 때, 시스템은 **Bounding Box 면적 기반의 Innermost 알고리즘**을 수행합니다.
|
||||
- **알고리즘**: 드롭 포인트를 포함하는 모든 부모 후보 중 면적이 가장 작은(가장 구체적인) 그룹을 최종 부모로 선택합니다.
|
||||
- **의도**: 이를 통해 복잡한 랙(Rack) 및 사이트(Site) 계층 내부로의 직관적인 객체 삽입이 가능해집니다.
|
||||
|
||||
---
|
||||
|
||||
## 5. 저장 방식의 지향성과 확장성 (Storage & Scalability)
|
||||
|
||||
### 5.1 JSON-Native의 이점
|
||||
- **VCS 친화성**: 텍스트 기반 JSON 파일로 저장되므로, Git과 같은 버전 관리 시스템을 통해 시나리오별 변경 이력을 관리하기 용이합니다.
|
||||
- **상호운용성 (Interoperability)**: Python, JS 등 다양한 언어에서 표준 JSON 라이브러리를 통해 프로젝트 파일에 접근하여 자동화된 분석 보고서를 생성할 수 있습니다.
|
||||
|
||||
### 5.2 에셋 라이브러리 확장성 (Modular & Open Asset Architecture)
|
||||
drawNET의 에셋 시스템은 폐쇄적�### 7. 전문 내보내기 서브시스템 및 하이브리드 리포팅 (High-Fidelity Export & Hybrid Reporting)
|
||||
|
||||
drawNET은 단순한 캔버스 캡처를 넘어, 엔지니어링 결과물의 시각적 완밀성과 데이터의 편집 가능성을 동시에 확보하는 **하이브리드 내보내기 전략**을 취합니다.
|
||||
|
||||
#### 7.1 하이브리드 이미지-객체 모델 (Hybrid Image-Object Model)
|
||||
PPTX 리포트 생성 시, 시스템은 두 가지 서로 다른 렌더링 경로를 결합합니다.
|
||||
1. **Topology View (High-Res Snapshot)**: 복잡한 선(Path) 라우팅, SVG 그림자, 반투명 그룹 등은 PPTX 네이티브 객체로 변환 시 시각적 손실이 큽니다. 이를 방지하기 위해 200% 스케일의 고해상도 PNG 스냅샷으로 캔버스를 캡처하여 삽입합니다.
|
||||
2. **Inventory Data (Native PPTX Objects)**: 장비 목록, 프로젝트 정보, 요약 통계는 수정이 용이해야 합니다. 따라서 이 데이터는 PPTX의 네이티브 테이블(Table) 및 텍스트 상자로 생성하여, 리포트 출력 후에도 사용자가 파워포인트 내에서 직접 내용을 수정할 수 있도록 보장합니다.
|
||||
|
||||
#### 7.2 초정밀 클린 캡처 및 안정화 (Clean Capture & Stabilization)
|
||||
내보내기 수행 시, 시스템은 실시간으로 **가상 스타일시트 주입(Virtual CSS Injection)** 및 **모사 데이터 동기화** 기술을 사용합니다.
|
||||
- **UI 노이즈 제거**: 연결점(Port/Anchor), 선택 박스(Selection), 그리드 가이드 등을 캡처 순간에만 `display: none`으로 처리합니다.
|
||||
- **적응형 안정화 지연 (1000ms Delay)**: 모델 업데이트(Base64 변환 등) 후 브라우저 DOM이 완전히 동기화되도록 1초의 대기 시간을 강제하여, 저사양 환경에서도 캡처 무결성을 보장합니다.
|
||||
- **해상도 보정 (2x Scaling)**: 사용자 모니터의 DPI와 관계없이 항상 고품질 인쇄가 가능한 수준의 픽셀 밀도를 확보하기 위해 2배수 슈퍼 샘플링(Super Sampling) 캡처를 수행합니다.
|
||||
|
||||
#### 7.3 전수 속성 스캔 및 Base64 임베딩 (Recursive Asset Embedding)
|
||||
SVG 내보내기의 핵심은 외부 자산의 완전한 자립화입니다.
|
||||
- **재귀적 선택자 탐색**: 특정 태그에 국한되지 않고 노드의 모든 속성 트리를 스캔하여 외부 이미지 경로를 식별합니다.
|
||||
- **속성 패리티(Parity)**: `xlink:href`와 일반 `href` 속성 모두에 동일한 Base64 데이터를 주입하여 크로스 브라우저/뷰어 호환성을 극대화합니다.
|
||||
- **절대 좌표 매핑 (Zero-Clip)**: 캔버스의 현재 뷰포트 상태와 무관하게 `getCellsBBox`를 통한 실제 객체 영역을 자동 계산하고, 명시적인 `viewBox` 주입을 통해 상하좌우 짤림 현상을 원천 차단합니다.
|
||||
상태, 환경 사양 등 무한한 메타데이터를 자유롭게 추가하고 수정할 수 있습니다.
|
||||
- **데이터 활용성**: 모든 부가 정보는 JSON 데이터 모델에 정적/동적으로 포함되어 저장되므로, 설계가 완료된 후 즉시 인벤토리 보고서(Inventory Report) 생성, 검색 엔진 필터링, 혹은 외부 시스템과의 데이터 연동(API)에 활용됩니다.
|
||||
- **설계 의도의 보존**: 이는 "그림"이 아닌 "설계 데이터" 그 자체를 보존함으로써, 설계자가 의도한 모든 엔지니어링 맥락이 유실 없이 영구적으로 관리됨을 의미합니다.
|
||||
|
||||
### 5.4 PM 지향적 설계 및 자산 관리 (PM-Centric Design & Asset Management)
|
||||
엔지니어의 기술적 관점뿐 아니라, 프로젝트 매니저(PM)의 **의사결정 및 자산 관리 효율성**을 극대화합니다.
|
||||
- **선제적 비즈니스 데이터 매핑**: 설계 초기 단계부터 각 객체에 벤더 정보, 단가(Price), 구매 일정, 담당 부서 등 관리 지표를 미리 입력할 수 있습니다.
|
||||
- **원클릭 전수 관리**: "Inventory View" 및 "JSON/PPTX Export" 기능을 통해 프로젝트에 투입된 전체 자산 현황과 예상 비용을 한눈에 파악할 수 있으며, 이는 즉시 구매 발주서나 예산 보고서의 기초 자료로 변환됩니다.
|
||||
- **전략적 가시성**: 시각적 토폴로지와 비즈니스 데이터가 결합됨으로써, PM은 단순히 "어떻게 연결되는가"를 넘어 "무엇이 얼마의 비용으로 구축되는가"에 대한 전략적 통찰을 실시간으로 확보할 수 있습니다.
|
||||
|
||||
### 5.5 REST API 기반의 생태계 통합 (REST API-Based Ecosystem Integration)
|
||||
drawNET의 데이터 구조는 고립된 파일에 머물지 않고 외부 시스템과 유기적으로 소통할 수 있는 **프로그래밍 가능한 인터페이스(Programmable Interface)**를 지향합니다.
|
||||
- **Native REST API 지원**: Flask 기반의 강력한 백엔드를 통해 토폴로지 데이터의 CRUD(Create, Read, Update, Delete)를 REST API로 실시간 제공합니다.
|
||||
- **엔터프라이즈 시스템 연동**: 기업 내 CMDB(자산 관리 시스템), NMS(네트워크 모니터링), 혹은 클라우드 프로비저닝 엔진과의 양방향 데이터 동기화가 가능합니다.
|
||||
- **자동화된 생명주기 관리**: 외부 스크립트를 통해 새로운 프로젝트를 자동 생성하거나, 실시간 모니터링 데이터를 API로 수신하여 캔버스상의 노드 상태(장애 발생 등)를 시각적으로 즉시 갱신하는 등 고도화된 자동화 워크플로우를 구현할 수 있는 강력한 무기를 갖추고 있습니다.
|
||||
|
||||
---
|
||||
|
||||
## 6. 엔지니어링 생산성: 지능형 단축키 시스템 (Engineering Productivity: Intelligent Hotkey System)
|
||||
|
||||
drawNET은 일반적인 드로잉 도구(Draw.io, Visio 등)와 차별화되는 **"전문 엔지니어 전용 워크스테이션"**으로서의 정체성을 단축키 시스템을 통해 증명합니다.
|
||||
|
||||
### 6.1 "Always-Enabled" 로직의 기술적 의도
|
||||
일반적인 웹 도구는 텍스트 입력 중 시스템 단축킹(Undo/Redo 등)이 차단되거나 포커스 충돌을 일으킵니다. drawNET의 단축키 엔진은 `isTyping` 상태를 정밀하게 인지하되, 핵심적인 그래프 제어 액션에 대해서는 **전역적 우선순위(Override Priority)**를 부여합니다. 이는 수천 개의 속성을 동시에 수정하는 현업 환경에서 작업의 연속성을 완벽하게 보장하는 설계입니다.
|
||||
|
||||
### 6.2 Drawing Tool vs. Engineering Tool
|
||||
- **드로잉 도구 (Draw.io, Visio)**: 시각적 표현이 목적이므로 마우스 기반의 정교한 배치를 우선시하며, 단축키는 보조 수단에 불과합니다.
|
||||
- **엔지니어링 도구 (drawNET)**: 토폴로지 구성 속도가 핵심입니다. 따라서 **"Zero-Mouse"** 워크플로우를 지향하며, 로직 기반의 정렬(Alignment), 속성 복제(Format Painter), 컨텍스트 기반의 부모-자식 포함 로직을 단축키 하나로 수행할 수 있도록 최적화되어 있습니다.
|
||||
|
||||
### 6.3 현업 최적화 컨텍스트 핸들러
|
||||
단순한 좌표 이동을 넘어, `Grid Snapping` 연동 이동, `Large/Small Step` 이동, 그리고 레이어 가시성 퀵 토글 등 현업 엔지니어가 토폴로지 구성 시 가장 빈번하게 수행하는 동작들을 모듈화된 핸들러(`handlers/`)로 구현하여 응답성을 극대화했습니다.
|
||||
|
||||
---
|
||||
|
||||
## 7. 전문 내보내기 서브시스템 및 하이브리드 리포팅 (High-Fidelity Export & Hybrid Reporting)
|
||||
|
||||
drawNET은 단순한 캔버스 캡처를 넘어, 엔지니어링 결과물의 시각적 완밀성과 데이터의 편집 가능성을 동시에 확보하는 **하이브리드 내보내기 전략**을 취합니다.
|
||||
|
||||
### 7.1 하이브리드 이미지-객체 모델 (Hybrid Image-Object Model)
|
||||
PPTX 리포트 생성 시, 시스템은 두 가지 서로 다른 렌더링 경로를 결합합니다.
|
||||
1. **Topology View (High-Res Snapshot)**: 복잡한 선(Path) 라우팅, SVG 그림자, 반투명 그룹 등은 PPTX 네이티브 객체로 변환 시 시각적 손실이 큽니다. 이를 방지하기 위해 200% 스케일의 고해상도 PNG 스냅샷으로 캔버스를 캡처하여 삽입합니다.
|
||||
2. **Inventory Data (Native PPTX Objects)**: 장비 목록, 프로젝트 정보, 요약 통계는 수정이 용이해야 합니다. 따라서 이 데이터는 PPTX의 네이티브 테이블(Table) 및 텍스트 상자로 생성하여, 리포트 출력 후에도 사용자가 파워포인트 내에서 직접 내용을 수정할 수 있도록 보장합니다.
|
||||
|
||||
### 7.2 초정밀 클린 캡처 메커니즘 (Clean Capture Mechanism)
|
||||
내보내기 수행 시, 시스템은 실시간으로 **가상 스타일시트 주입(Virtual CSS Injection)** 기술을 사용하여 시각적 노이즈를 제거합니다.
|
||||
- **UI 노이즈 제거**: 연결점(Port/Anchor), 선택 박스(Selection), 그리드 가이드 등을 캡처 순간에만 `display: none`으로 처리하여 설계 데이터 본연의 모습만 선명하게 담아냅니다.
|
||||
- **해상도 보정 (2x Scaling)**: 사용자 모니터의 DPI와 관계없이 항상 고품질 인쇄가 가능한 수준의 픽셀 밀도를 확보하기 위해 2배수 슈퍼 샘플링(Super Sampling) 캡처를 수행합니다.
|
||||
|
||||
### 7.3 레이어 기반 수직적 리포팅 (Layer-Aware Vertical Reporting)
|
||||
전체 토폴로지뿐 아니라, 프로젝트에 정의된 각 레이어(물리, 논리, 보안 등)를 개별적으로 분석하여 슬라이드를 생성합니다.
|
||||
- **동적 가시성 제어**: 각 레이어별 전용 슬라이드를 캡처할 때, 시스템은 백그라운드에서 레이어 가시성을 순차적으로 토글(Toggle)하고 필터를 적용하여 해당 도메인의 객체들만 깨끗하게 분리된 자동 리포트를 구성합니다.
|
||||
|
||||
|
||||
#### 7.4 엔지니어링 실무 데이터 매핑 (Engineering Data Mapping)
|
||||
- **식별자 기반 매핑 (ID-Key Linkage)**: drawNET의 모든 객체는 고유 UUID를 Primary Key로 가집니다. 이는 실무 엔지니어가 보유한 방대한 외부 데이터(라우팅 테이블, 방화벽 룰 등)와 시각적 도면을 VLOOKUP이나 데이터 조인으로 즉시 연결하는 매개체가 됩니다.
|
||||
- **경량 메타데이터 레이어 (Description & Tags)**: 도면의 가벼움을 유지하면서도 실무에 꼭 필요한 컨텍스트를 `Tags`와 `Description`으로 캡처합니다. 이는 "무거운 데이터 관리는 외부 전문 툴에 맡기고, 도면은 맥락과 연결 고리만 제공한다"는 실무적 철학을 반영합니다.
|
||||
- **BOM 및 인벤토리 자동 생성**: 인벤토리 내 '소속 그룹' 정보를 포함하여, 내보낸 즉시 자산 관리 대장(Excel)으로 활용 가능한 고순도 데이터를 제공합니다.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 8. Connectivity & Simulation Architecture (논리적 연결 계층화)
|
||||
drawNET은 물리적 자산 배치와 논리적 연결 시뮬레이션을 분리하기 위해 **'레이어 타입 기반 제약(Layer-Type Constraints)'** 아키텍처를 채택합니다.
|
||||
### 8.1 레이어 타입 정의
|
||||
- **Standard (Physical)**: 장비(Node)와 연결(Edge)이 공존하는 기본 레이어.
|
||||
- **Logical (Simulation)**: 연결선(Edge)만 허용되는 특수 레이어. 신규 노드 생성이 차단되며, 복제 시 노드는 필터링되고 연결 관계만 전이됩니다.
|
||||
### 8.2 데이터 일관성 및 시뮬레이션 원칙
|
||||
- **SSoT (Single Source of Truth)**: 장비의 마스터 정보는 물리 레이어에 위치하며, 논리 레이어의 선들은 서로 다른 레이어에 속한 노드들을 참조(UUID 기반)하여 가상의 망 구성을 형성합니다.
|
||||
- **포맷 페인터(Style Propagation)**: 클립보드 데이터를 최우선으로 하는 `Default-Strict` 로직을 통해 개체의 스타일 정보가 유실 없이 전파되도록 보장합니다.
|
||||
- **자기 치유형 상태 관리**: 브라우저 및 OS 레벨의 이벤트 유실에 대비하여, 인터랙션 발생 시마다 실제 모디파이어(Ctrl/Cmd) 상태를 재검증하는 안정성 프로토콜을 운영합니다.
|
||||
|
||||
|
||||
|
||||
|
||||
## 9. AI Ready: 구조화된 그래프 데이터의 가치 (AI Ready: The Value of Structured Data)
|
||||
|
||||
drawNET은 단순히 도면을 "그리는" 도구가 아니라, **AI가 즉시 이해하고 분석할 수 있는 고정밀 데이터셋**을 생성하는 플랫폼입니다.
|
||||
|
||||
### 9.1 데이터 고정밀도 (Data High-Fidelity)
|
||||
기존의 PDF나 이미지(OCR 기반) 도면 분석은 시각적 모호성으로 인해 연결 관계의 왜곡이나 오인식 확률이 높습니다. drawNET의 JSON-Native 구조는 모든 연결을 UUID와 참조 무결성(Referential Integrity)으로 정의하므로, AI에게 **"정답(Ground Truth)"**을 제공합니다. 이는 AI 모델의 학습 및 분석 정확도를 비약적으로 높여줍니다.
|
||||
|
||||
### 9.2 지능형 설계 감사 및 예측 (Intelligent Auditing & Prediction)
|
||||
구조화된 데이터 모델은 차세대 AI 엔진과 결합하여 다음과 같은 가치를 창출합니다:
|
||||
- **자동 설계 검증 (Automated Auditing)**: 설계된 토폴로지가 기업의 보안 정책이나 표준망 구성 원칙을 준수하는지 AI가 실시간으로 감시하고 이상 징후를 탐지합니다.
|
||||
- **장애 시뮬레이션 (Impact Analysis)**: 특정 노드 장애 시 전체 서비스에 미치는 영향도를 그래프 알고리즘으로 자동 계산하여 최적의 백업 경로를 제안합니다.
|
||||
- **비용 최적화 (TCO Optimization)**: 입력된 단가와 장비 스펙 데이터를 AI가 분석하여, 운용 효율은 유지하면서도 구축 비용을 최소화할 수 있는 설계 최적화 모델을 제시합니다.
|
||||
|
||||
### 9.3 그래프 알고리즘과의 완벽한 호환성
|
||||
본 프로젝트가 생성하는 데이터는 **그래프 이론(Graph Theory)**을 따르는 인접 리스트(Adjacency List) 구조로 즉시 변환 가능합니다. 이는 LLM(대형 언어 모델)뿐만 아니라 GNN(Graph Neural Networks)과의 결합을 통해 네트워크 인프라의 미래를 설계하는 데 가장 적합한 아키텍처임을 증명합니다.
|
||||
|
||||
### 9.4 네트워크 가상 시뮬레이션 및 디지털 트윈 (Network Virtual Simulation & Digital Twin)
|
||||
drawNET의 데이터는 단순한 시각화를 넘어, 가상 환경에서의 **패킷 흐름 시뮬레이션**을 가능케 하는 디지털 트윈의 기반이 됩니다.
|
||||
- **라우팅 루프 및 블랙홀 탐지 (Loop & Blackhole Detection)**: 엔터프라이즈 네트워크의 고질적인 문제인 라우팅 루프를 설계 단계에서 사전에 차단합니다. 객체의 `tags`에 포함된 라우팅 정보와 `ip` 속성을 그래프 경로 탐색 알고리즘과 결합하여, 논리적 순환 경로(Loop)나 목적지 없이 사라지는 경로(Blackhole)를 AI가 0.1초 만에 전수 검사합니다.
|
||||
- **물리-논리 정합성 검증**: 물리적 케이블 연결(Edge)과 논리적 라우팅 정책(Metadata) 사이의 불일치를 잡아내어, "그림과 실제 설정이 다른" 휴먼 에러를 원천적으로 방지합니다.
|
||||
|
||||
### 9.5 AI 범용성 및 미래 지향성 (Universal AI-Agnostic Architecture)
|
||||
drawNET이 생성하는 데이터 모델은 특정 AI 기술에 종속되지 않는 **"범용 AI 데이터 언어"**로서의 가치를 지닙니다.
|
||||
- **Cross-AI Compatibility**: OpenAI(GPT), Anthropic(Claude), Meta(Llama) 등 모든 주요 AI 모델들은 시각적 이미지보다 정형화된 JSON 데이터에서 강력한 추론 능력을 발휘합니다. drawNET은 어떤 AI가 등장하더라도 즉시 협업할 수 있는 완벽한 인터페이스를 미리 갖추고 있습니다.
|
||||
- **데이터 주권과 보안 (Data Sovereignty)**: 클라우드 기반 AI를 사용할 수 없는 고도의 보안 환경에서도, 표준 JSON 형식의 프로젝트 파일을 로컬 AI 엔진(On-premise LLM)이 직접 분석하게 함으로써 데이터 외부 유출 없이도 지능형 설계를 수행할 수 있습니다.
|
||||
- **공공 및 국가 중요 시설 최적화**: 망 분리 환경이 필수적인 공공기관, 금융, 국방 분야에서 폐쇄형 LLM과의 결합을 통해 **보안 가이드라인 준수 여부(Compliance Audit)**를 자동 검증할 수 있습니다. 이는 인적 과실로 인한 국가적 보안 사고를 설계 단계에서 원천 차단하는 가장 강력한 보안 설계 아키텍처임을 보장합니다.
|
||||
- **미래를 위한 확장팩**: 현재 입력된 `tags`, `ip`, `metadata` 등은 미래의 강력한 AI 에이전트가 네트워크 인프라를 자동으로 정밀하게 제어(Autonomous Networking)할 수 있게 만드는 핵심 데이터 전구체(Precursor) 역할을 수행합니다.
|
||||
|
||||
---
|
||||
|
||||
## 10. 미래 전망 및 지향점 (Future Direction)
|
||||
|
||||
1. **AI Topology Auditor**: 저장된 JSON 데이터를 분석하여 네트워크 설계상의 병목 구간이나 단일 장애점(SPOF)을 AI가 자동으로 식별하는 기능을 계획하고 있습니다.
|
||||
2. **Visual Diff Engine (Next Gen)**: 두 개의 프로젝트 JSON 파일을 비교하여 노드 위치 변화, 속성 변화를 캔버스상에 시각적으로 강조(Highlight)하는 도구로 발전시킬 것입니다.
|
||||
3. **Master Model Definition**: 하나의 마스터 모델에서 다양한 관점의 서브 그래프(View)를 동시에 생성하고 동기화하는 엔터프라이즈 협업 기능을 지향합니다.
|
||||
|
||||
---
|
||||
|
||||
*최초 공식 릴리즈: 2026-03-20 (v1.0 Premium Edition - New Launch)*
|
||||
*작성자: Antigravity AI Implementation Team (drawNET Core)*
|
||||
@@ -0,0 +1,23 @@
|
||||
# drawNET Bug Fix Log 🐞 index
|
||||
|
||||
이 문서는 drawNET 개발 과정에서 발생한 버그 수정 이력을 날짜별로 요약 및 아카이브합니다.
|
||||
|
||||
---
|
||||
|
||||
## 📅 아카이브 목록 (By Date)
|
||||
|
||||
- **[2026-03-21](./bug_reports/2026-03-21.md)**: 리치 카드 이슈, 데이터 정합성(Z-Index, 유실 복구), 사이드바 수동 저장 모델 도입 등 (총 19건)
|
||||
- *추가 예정...*
|
||||
|
||||
---
|
||||
|
||||
## 🔍 주요 카테고리별 요약
|
||||
|
||||
| 카테고리 | 주요 사례 | 누적 건수 |
|
||||
| :--- | :--- | :--- |
|
||||
| **UX/UI** | 사이드바 포커스 유지, Alt+Enter, 실시간 동기화 | 5건 |
|
||||
| **Syntax/Load** | JSON 문법 오류, 중복 식별자, 구문 에러 | 4건 |
|
||||
| **Stability/Data** | 데이터 복구(Pos/Label), Z-Index 계층, 엣지 보존 | 10건 |
|
||||
|
||||
---
|
||||
마지막 업데이트: 2026-03-21
|
||||
@@ -0,0 +1,133 @@
|
||||
# drawNET Bug Report - 2026-03-21 🐞
|
||||
|
||||
이 문서는 2026년 3월 21일 발생한 버그 및 장애와 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #2255] - Sidebar Focus Loss & Explicit Save Refactoring
|
||||
- **현상**: 사이드바에서 라벨 수정 시 포커스 유실로 인한 타이핑 불가능 현상 및 자동 저장에 의한 의도치 않은 데이터 경합 가능성 제기.
|
||||
- **원인**: 실시간 `input` 및 자동 `change`(blur) 이벤트가 시각 속성 변경 리스너와 충돌하여 DOM 리렌더링 발생.
|
||||
- **조치**:
|
||||
1. **명시적 저장 모델(Explicit Apply)** 도입: 텍스트 관련 필드는 오직 **Enter** 또는 **[적용]** 버튼 클릭 시에만 저장되도록 변경하여 입력 중 데이터 무결성 보장.
|
||||
2. 사이드바 내부 요소에 포커스가 있을 경우 그래프 외부 변화에 의한 리렌더링을 차단하여 포커스 연속성 확보.
|
||||
- **현상**: 라벨 위치를 "하(bottom)"로 설정해도 저장 후 불러오면 다시 "상(top)"으로 초기화됨.
|
||||
- **원인**: `layers.js` 내부에 라벨 위치 기본값이 `bottom`으로 하드코딩되어 강제 적용되었으며, 일부 객체 생성 시 `label_pos` 데이터 주입 누락.
|
||||
- **조치**: `layers.js` 하드코딩 제거, `system.js`에서 생성 시 기본값(장비-하, 그룹-상) 강제 주입, 유틸리티 함수 보강을 통한 정합성 확보.
|
||||
|
||||
### [Instance #2245] - Sidebar Display Stale During Group Rename (Recursive & Logic Fix)
|
||||
- **현상**: 그룹 이름을 변경해도 해당 그룹에 속한 하위 개체의 사이드바 내 [상위] 정보가 즉시 바뀌지 않음.
|
||||
- **원인**:
|
||||
1. **저장 조건부 누락**: 부모 노드가 바뀌지 않은 단순 속성(이름 등) 변경 시 `saveUpdates` 호출이 누락되어 저장이 실행되지 않음.
|
||||
2. **포커스 가드 충돌**: 사이드바 내부에서 편집 중일 때 리렌더링을 차단하는 로직이 적용(Apply) 시점의 갱신마저 막아버림.
|
||||
3. **비동기 타이핑 불일치**: 엔진의 데이터 확정 전 UI 렌더링 시도로 인한 구형 데이터 출력.
|
||||
- **조치**:
|
||||
1. `handleNodeUpdate` 내 저장 로직을 평탄화하여 **속성 변경 시 항상 저장**되도록 수정.
|
||||
2. **재귀적 전파(Recursive Propagation)** 도입: 그룹명 변경 시 하위 모든 개체(`getDescendants`)에 동기화 타임스탬프를 주입하여 하위 개체들의 변경 이벤트를 강제 트리거함.
|
||||
3. `safeRender` 포커스 가드 최적화: `INPUT/TEXTAREA`가 활성화된 경우만 스킵하도록 정규화하고 `setTimeout(0)`으로 렌더링 시기를 튜닝함.
|
||||
- **현상**: 불러온 파일의 일부 그룹 라벨이 화면 출력값과 사이드바 표시값이 서로 다름 (예: Storage vs 그룹).
|
||||
- **원인**: 과거 버전의 저장 로직 오류로 인해 `attrs`와 `data` 필드 간의 불일치가 파일 내에 고착화됨.
|
||||
- **조치**: `json_handler.js` 마이그레이션 필터를 추가하여, 로드 시 `data.label`을 원본 소스로 삼아 시각적 라벨을 강제 동기화함.
|
||||
|
||||
### [Instance #2235] - Destructive Object Disappearance (Style Corrupt)
|
||||
- **현상**: 레이어 설정 변경 시 객체가 갑자기 투명해지거나 색상이 사라지는 현상.
|
||||
- **원인**: `layers.js`에서 투명도 적용 시 `setAttrs`를 사용하여 기존의 모든 커스텀 스타일(fill, stroke 등)을 덮어써버림.
|
||||
- **조치**: `attr()` 개별 호출 방식으로 변경하여 기존 스타일 유산을 완벽히 보존함.
|
||||
|
||||
### [Instance #2230] - Missing Coordinates Recovery (Pos/Size)
|
||||
- **현상**: 일부 객체가 좌표값 누락으로 인해 (0,0)에 배치되거나 아예 보이지 않음.
|
||||
- **원인**: 복사/붙여넣기 및 엔진 전환 과정에서 X6 표준 좌표 필드가 유실된 데이터 잔재.
|
||||
- **조치**: `json_handler.js`에 `data.pos` 기반 좌표 자동 복구 로직을 주입하여 유실된 개체들을 정상 위치로 소환함.
|
||||
|
||||
### [Instance #2225] - Edge Clipping & Selection Difficulty (Z-Index)
|
||||
- **현상**: 그룹 위에 선을 그으면 그룹 뒤로 숨어서 클릭이 안 됨. 단축키 연결 시에도 동일 현상 반복.
|
||||
- **원인**: 엣지 기본 Z-Index가 5로 설정되어, 레이어 오프셋이 적용된 그룹보다 하단에 배치됨.
|
||||
- **조치**: 전체 계층 구조 재설계 `Group(1~19) < Edge(30) < Node(50)` 및 마우스/단축키 생성 경로 동기화.
|
||||
|
||||
### [Instance #2220] - Accidental Reset of Edge Vertices
|
||||
- **현상**: 새로운 장비를 연결하면 기존에 예쁘게 꺾어 놓았던 선들이 모두 일직선으로 초기화됨.
|
||||
- **원인**: `applyLayerFilters` 함수 내에 모든 엣지의 버텍스를 강제로 비우는 과도한 '자동 복구' 로직이 포함되어 있었음.
|
||||
- **조치**: 해당 파괴적인 초기화 로직(`setVertices([])`)을 삭제하여 사용자 커스텀 경로 보존. (Instance #1480 정정 사항)
|
||||
|
||||
---
|
||||
|
||||
### [Instance #2202] - Label Reverts when Changing Label Position (Select Sync)
|
||||
- **현상**: 라벨 이름을 수정한 직후(아직 저장되기 전) 라벨 위치(`select`)를 변경하면 이름이 이전 상태로 되돌아감.
|
||||
- **원인**: 모든 입력 요소에 동일한 `debounce`(300ms)가 적용되어 있어, 상호작용 간 데이터 경합 발생 및 `renderProperties`에 의한 DOM 덮어쓰기 현상.
|
||||
- **조치**: `select`, `checkbox`, `color` 등 상태 선택형 요소는 `change` 이벤트 발생 시 즉시 저장(`applyChanges`)되도록 변경하여 데이터 동기화 보장.
|
||||
|
||||
### [Instance #2108] - Inconsistent Line Thickness (Style vs Selection)
|
||||
- **현상**: 구성도 작성 시 선 두께가 일정하지 않게 보임.
|
||||
- **원인**:
|
||||
1. 선택 시 강조 효과(3px)와 일반 상태(2px)의 차이.
|
||||
2. '굵은 선' 스타일이 UI에는 있으나 실제 두께(4px) 반영 로직이 누락됨.
|
||||
- **조치**:
|
||||
1. '굵은 선(double)' 선택 시 실제 4px가 적용되도록 매핑 로직 업데이트.
|
||||
2. 속성창에 '선 두께(Width)' 수치 입력 필드를 추가하여 개별 커스터마이징 지원.
|
||||
|
||||
### [Instance #2010] - ID & Label Confusion (Initial Data Setup)
|
||||
- **현상**: 그룹이나 노드 생성 시 이름이 `group_xxxx`와 같은 ID 형식으로 표시되며, 수정 후 특정 상황에서 다시 ID 값으로 되돌아가는 것처럼 보임.
|
||||
- **원인**: `drop.js`에서 노드 생성 시 ID와 Label을 동일한 랜덤 문자열로 초기화했기 때문에 발생한 혼동.
|
||||
- **조치**: 초기 라벨을 '그룹', '사각형' 등 친숙한 한글 명칭(다국어 대응)으로 설정하도록 변경하고, 사이드바에서 ID를 읽기 전용 필드로 명시적으로 분리 노출함.
|
||||
|
||||
### [Instance #1968] - Data Reverted During Move after Rename (Blur vs Drag)
|
||||
- **현상**: 그룹 이름을 수정한 직후 다른 곳을 클릭하지 않고 바로 드래그하여 이동하면 이름이 이전 값으로 되돌아감.
|
||||
- **원인**: 사이드바가 `change`(포커스 해제) 시점에 저장하는데, 드래그 시 발생하는 리렌더링 이벤트가 `change`보다 먼저 발생하여 이전 데이터를 불러옴.
|
||||
- **조치**: 사이드바 텍스트 입력 이벤트를 `input`으로 변경하고 300ms 디바운싱을 적용하여 실시간 동기화 구현.
|
||||
|
||||
### [Instance #1940] - JSON Syntax Error in Locale File (Stray Backticks)
|
||||
- **현상**: 앱 구동 시 `[drawNET:CRITICAL] Failed to load locales` 에러 발생하며 모든 텍스트가 키값으로 표시됨.
|
||||
- **원인**: `ko.json` 수정 과정에서 AI 도구가 파일 끝에 마크다운 기호(```)를 잘못 삽입하여 유효하지 않은 JSON 형식이 됨.
|
||||
- **조치**: `ko.json` 파일 끝의 불필요한 문자를 제거하고 구조 정상화.
|
||||
|
||||
### [Instance #1931] - Property Handler Syntax Error (Accidental Deletion)
|
||||
- **현상**: 노드 속성 수정 시 변경사항이 반영되지 않거나 콘솔에 `SyntaxError` 발생.
|
||||
- **원인**: '에셋 경로' 필드를 제거하는 과정에서 `handlers/node.js` 속성 추출 객체의 괄호 및 인접 필드(color, fill 등)를 실수로 대량 삭제함.
|
||||
- **조치**: 삭제된 모든 필드 로직을 원래대로 복구하고 의도했던 `assetPath` 추출부만 정교하게 제거.
|
||||
|
||||
### [Instance #1860] - Rich Card Sidebar UI Inconsistency
|
||||
- **현상**: 리치 텍스트 카드의 속성창 디자인이 기존 '컴팩트 UI' 표준(토글 스위치, 정렬된 입력창 등)과 다르게 투박하게 표시되고 정보 밀도가 낮음.
|
||||
- **원인**: 신규 객체 전용 템플릿 작성 시 표준 CSS 클래스(`prop-input`, `toggle-switch`) 적용 누락 및 일부 스타일(`input-with-color`) 미정의.
|
||||
- **조치**: `rich_card.js` 템플릿을 표준 컴포넌트 구조로 전면 재작성하고, `properties_sidebar.css`에 부족한 레이아웃 스타일 보강.
|
||||
|
||||
### [Instance #1840] - Rich Card Syntax Error (Duplicate Identifier)
|
||||
- **현상**: 리치 카드 선택 시 콘솔에 `Uncaught SyntaxError: Identifier 'renderRichContent' has already been declared` 발생 및 사이드바 작동 중단.
|
||||
- **원인**: `styles/utils.js`에서 함수를 임포트했음에도 불구하고, 로컬 핸들러 파일에도 동일한 가명 함수가 남아있어 충돌 발생.
|
||||
- **조치**: `handlers/rich_card.js` 하단의 중복된 `renderRichContent` 함수를 제거하고 공용 유틸리티 함수만 사용하도록 수정.
|
||||
|
||||
### [Instance #1692] - 다중 선택 해제 시 시각적 잔상(Focus) 유지
|
||||
- **현상**: `Ctrl+Click`으로 다중 선택 객체 중 일부를 해제해도 캔버스상에 점선 테두리(Focus)가 남아 있음.
|
||||
- **원인**: X6의 `Selection` 또는 `Transform` 플러그인이 추가한 `boundary` 도구가 `unselected` 이벤트 시 자동으로 제거되지 않거나 커스텀 도구 관리에 밀려 잔류함.
|
||||
- **조치**: `selection.js`의 `unselected` 이벤트 핸들러에서 노드/엣지 해제 시 `removeTools()`를 명시적으로 호출하도록 강화.
|
||||
|
||||
### [Instance #1684] - `removeLabel` 런타임 에러
|
||||
- **현상**: 엣지 선택 해제 시 `cell.removeLabel is not a function` 에러 발생.
|
||||
- **원인**: 일부 X6 환경에서 엣지 객체의 단축 함수가 유실되거나 차단되는 문제.
|
||||
- **조치**: `setLabels`와 `filter`를 사용하여 명시적으로 해당 ID의 라벨을 제외한 리스트를 재설정함.
|
||||
|
||||
### [Instance #1640] - 하이라이트 플러그인 의존성 에러
|
||||
- **현상**: 시작/대상 앵커 호버 시 `createExecutionContext` 및 `unhighlight` 함수를 찾을 수 없다는 TypeError 발생.
|
||||
- **원인**: AntV X6의 Highlight 플러그인 의존성 문제.
|
||||
- **조치**: 외부 플러그인 의존성을 제거하고, 노드의 본체(`body`) 속성(`attr`)을 직접 제어하여 강조 효과를 주는 방식으로 로직 선회.
|
||||
|
||||
### [Instance #1628] - `addLabel` 런타임 에러
|
||||
- **현상**: 엣지에 라벨 추가 시 `cell.addLabel is not a function` 에러 발생.
|
||||
- **원인**: X6 특정 버전에서 엣지 객체의 믹스인(Mixin) 상태에 따라 단축 함수가 인식되지 않는 문제.
|
||||
- **조치**: `getLabels()` / `setLabels()` 패턴으로 변경하여 호환성 확보.
|
||||
|
||||
### [Instance #1505] - 직선 라우팅 강제 꺾임 현상
|
||||
- **현상**: 라우터를 제거했음에도 선이 90도로 꺾여 연결됨.
|
||||
- **원인**: X6의 방향성 앵커(`top`, `left` 등)가 경로에 영향을 미침.
|
||||
- **조치**: '직선' 모드일 경우 앵커를 방향성이 없는 `center`로 강제 전환.
|
||||
|
||||
### [Instance #1480] - 레이어 필터링 시 라우팅 설정 유실 (정정됨)
|
||||
- **현상**: 레이어나 줌 변경 시 다시 꺾인 상태로 회귀함.
|
||||
- **원인**: 레이어 'Auto-Repair' 로직이 Vertices를 초기화하지 않음.
|
||||
- **조치**: (구) `setVertices([])` 추가 -> (현) 해당 로직이 사용자 데이터 파괴를 유발하여 최종 삭제 완료 (Instance #2220 참조).
|
||||
|
||||
### [Instance #1466] - Logger 참조 에러
|
||||
- **현상**: `logger is not defined` 발생.
|
||||
- **원인**: `edge.js` 내 모듈 임포트 누락.
|
||||
- **조치**: `logger` 모듈 임포트 추가.
|
||||
|
||||
---
|
||||
*아카이브 관리자: drawNET AI Assistant*
|
||||
@@ -0,0 +1,17 @@
|
||||
# drawNET Bug Report - 2026-03-22 🐞
|
||||
|
||||
이 문서는 2026년 03월 22일 발생한 설계 취약점 보완 및 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #0001] - 연결선(Edge)의 레이어 정보 유추 의존성 해결
|
||||
- **현상**: 연결선 데이터 자체에 레이어 정보가 없어, 특정 연결선이 크로스 레이어인지 판단하려면 반드시 소스/타겟 노드를 그래프에서 검색해야 함. 이는 외부 도구(LLM 등) 연동 시 데이터 독립성을 저하시키고, 대규모 도면에서 필터링 성능 저하를 유발함.
|
||||
- **원인**: 초기 설계 시 "노드 ID가 있으니 나중에 조회하면 된다"는 유추 방식에 의존함. 데이터 아키텍처 관점에서 객체 단독으로는 자신의 상태(Cross-layer 여부 등)를 완벽히 설명하지 못하는 불완전한 상태였음.
|
||||
- **조치**:
|
||||
1. `static/js/modules/graph/interactions/edges.js`: `edge:connected` 이벤트 발생 시 소스/타겟 노드의 `layerId`를 직접 조회하여 연결선 데이터(`source_layer`, `target_layer`, `is_cross_layer`)에 명시적으로 기록하도록 수정.
|
||||
2. `static/js/modules/graph/io/json_handler.js`: 기존 도면(Legacy data) 로드 시 누락된 레이어 메타데이터를 자동으로 계산하여 보정하는 자가 치유(Self-healing) 로직 추가.
|
||||
3. `6개월 뒤의 나`를 위해 각 관련 파일에 작업 배경 및 이유를 주석으로 명시.
|
||||
- **관련 이전 이슈**: 없음.
|
||||
|
||||
모든 항목은 압축하지 말고, 이전 리포트들보다 더 자세하거나 최소한 동일한 상세도로 작성할 것.
|
||||
절대 요약·생략·간략화하지 마. 각 항목에 구체적인 코드 조각, 이벤트 이름, 함수명, 속성명 등을 최대한 포함.
|
||||
@@ -0,0 +1,17 @@
|
||||
# drawNET Bug Report - 2026-03-22 🐞
|
||||
|
||||
이 문서는 2026년 03월 22일 발생한 UI 불일치 문제 해결 및 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #0002] - 파비콘(Favicon)과 서비스 로고 아이콘 불일치 해결
|
||||
- **현상**: 브라우저 탭에 표시되는 파비콘과 서비스 내부 사이드바 상단의 "dN" 로고 아이콘이 서로 달라 사용자 경험(UX)에 일관성이 없으며, 기존 파비콘의 심미성이 떨어짐.
|
||||
- **원인**: 초기 개발 시 기본 제공되는 `favicon.ico`를 그대로 사용하였으나, 서비스 브랜드 아이덴티티가 "dN" 로고(Blue/Indigo Gradient)로 확립된 이후에도 파비콘이 갱신되지 않음.
|
||||
- **조치**:
|
||||
1. **아이콘 생성**: 사이드바 `.logo-icon`의 CSS 스타일(135도 그라데이션, #3b82f6 ~ #6366f1, 흰색 "dN" 텍스트)을 그대로 반영한 고해상도 PNG 이미지를 생성.
|
||||
2. **파일 교체**: `static/favicon.png` 경로에 새로운 파비콘 이미지 저장.
|
||||
3. **코드 반영**: `templates/index.html`의 `<link rel="icon">` 태그를 새로운 PNG 파비콘으로 교체하여 즉시 반영.
|
||||
- **관련 이전 이슈**: 없음.
|
||||
|
||||
모든 항목은 압축하지 말고, 이전 리포트들보다 더 자세하거나 최소한 동일한 상세도로 작성할 것.
|
||||
절대 요약·생략·간략화하지 마. 각 항목에 구체적인 코드 조각, 이벤트 이름, 함수명, 속성명 등을 최대한 포함.
|
||||
@@ -0,0 +1,16 @@
|
||||
# drawNET Bug Report - 2026-03-22 🐞
|
||||
|
||||
이 문서는 2026년 03월 22일 발생한 다크모드 가시성 문제 해결 및 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #0003] - 다크모드에서 도움말(온보딩 가이드) 가시성 불량 해결
|
||||
- **현상**: 다크모드 활성화 시, 도움말 모달 내의 텍스트가 배경색과 비슷한 어두운 색으로 표시되어 읽기가 매우 힘듦. (사용자 제보 이미지 확인됨)
|
||||
- **원인**: `static/js/modules/ui/help_modal.js` 내부의 HTML 템플릿에서 텍스트 색상(`#1e293b`, `#334155` 등)과 배경색을 하드코딩된 인라인 스타일로 정의함. 이로 인해 테마가 바뀌어도 색상이 고정되어 대비(Contrast)가 확보되지 않음.
|
||||
- **조치**:
|
||||
1. **테마 변수 적용**: 하드코딩된 색상을 `base.css`에 정의된 CSS 변수(`var(--text-color)`, `var(--sub-text)`, `var(--panel-border)`, `var(--item-bg)`, `var(--accent-color)`)로 전면 교체.
|
||||
2. **가독성 보정**: 정보 박스(`manual/guide.md` 안내)의 배경을 `var(--item-bg)`로 변경하여 다크모드에서도 자연스럽고 선명하게 보이도록 수정.
|
||||
- **관련 이전 이슈**: 없음.
|
||||
|
||||
모든 항목은 압축하지 말고, 이전 리포트들보다 더 자세하거나 최소한 동일한 상세도로 작성할 것.
|
||||
절대 요약·생략·간략화하지 마. 각 항목에 구체적인 코드 조각, 이벤트 이름, 함수명, 속성명 등을 최대한 포함.
|
||||
@@ -0,0 +1,19 @@
|
||||
# drawNET Bug Report - 2026-03-22 🐞
|
||||
|
||||
이 문서는 2026년 3월 22일 발생한 `help_modal.js` 내의 ReferenceError 해결 및 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #2300] - ReferenceError: t is not defined in help_modal.js
|
||||
- **현상**: 도움말 버튼(`help-btn`) 클릭 시 도움말 모달(Help Modal)이 열리지 않고, 브라우저 콘솔에 `Uncaught (in promise) ReferenceError: t is not defined` 에러가 발생하며 인터페이스가 멈추는 현상.
|
||||
- **원인**:
|
||||
1. 마크다운 렌더러 라이브러리(`marked.js`) 통합을 위한 `help_modal.js` 리팩토링 과정에서 실수로 상단의 `import { t } from '../i18n.js';` 구문을 삭제함.
|
||||
2. 모달 템플릿 코드 내에서 다국어 번역 함수인 `${t('help_center')}` 등을 호출할 때 해당 함수가 정의되지 않아 런타임 에러가 발생함.
|
||||
- **조치**:
|
||||
1. `static/js/modules/ui/help_modal.js` 파일 상단에 누락된 `t` 함수 임포트 구문을 즉시 복구함.
|
||||
2. 모달 내의 모든 `t()` 호출부가 정상적으로 바인딩되었는지 검증하고, 모달이 정상적으로 팝업되는 것을 확인함.
|
||||
3. 향후 리팩토링 시 필수 의존성(Dependency) 누락 여부를 체크하도록 코드 리뷰 프로세스 보강.
|
||||
- **관련 이전 이슈**: 없음.
|
||||
|
||||
---
|
||||
*아카이브 관리자: drawNET AI Assistant*
|
||||
@@ -0,0 +1,19 @@
|
||||
# drawNET Bug Report - 2026-03-22 🐞
|
||||
|
||||
이 문서는 2026년 3월 22일 발생한 오브젝트 스튜디오 404 에러 해결 및 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #2310] - 404 Resource Not Found in Object Studio
|
||||
- **현상**: 오브젝트 스튜디오(Object Studio) 접속 시 다국어 파일(`i18n.js`)과 파비콘(`favicon.ico`)을 찾을 수 없다는 404 에러와 함께 UI의 버튼 글자가 번역되지 않은 상태(Raw Key)로 노출됨.
|
||||
- **원인**:
|
||||
1. **경로 오표기**: `static/js/modules/studio/` 디렉토리 내의 `renderer.js`와 `actions.js`에서 `../../i18n.js` 경로를 사용함. 실제 파일은 `../i18n.js`(`static/js/modules/i18n.js`)에 위치해 있어 상대 경로 계산 오류 발생.
|
||||
2. **파비콘 링크 누락**: `studio.html` 파일에 명시적인 파비콘 링크가 없어 브라우저가 기본값인 `/favicon.ico`를 호출함.
|
||||
- **조치**:
|
||||
1. `renderer.js` 및 `actions.js`의 임포트 경로를 `../i18n.js`로 일괄 수정하여 다국어 모듈 로딩 정상화.
|
||||
2. `studio.html` 상단에 통합 로고(`logo.svg`)를 파비콘으로 사용하는 링크 태그 추가.
|
||||
3. 스튜디오 전체 리소스 로딩 상태를 재점검하여 누락된 정적 파일이 없음을 확인.
|
||||
- **관련 이전 이슈**: Instance #2300 (유사한 Import 문제)
|
||||
|
||||
---
|
||||
*아카이브 관리자: drawNET AI Assistant*
|
||||
@@ -0,0 +1,80 @@
|
||||
# drawNET Bug Report - 2026-03-22 🐞
|
||||
|
||||
이 문서는 2026년 3월 22일 발생한 버그 및 장애와 그에 따른 조치 사항을 기록합니다.
|
||||
|
||||
---
|
||||
|
||||
### [Instance #2310] - 404 Resource Not Found in Object Studio
|
||||
- **현상**: 오브젝트 스튜디오(Object Studio) 접속 시 다국어 파일(`i18n.js`)과 파비콘(`favicon.ico`)을 찾을 수 없다는 404 에러와 함께 UI의 버튼 글자가 번역되지 않은 상태(Raw Key)로 노출됨.
|
||||
- **원인**:
|
||||
1. **경로 오표기**: `static/js/modules/studio/` 디렉토리 내의 `renderer.js`와 `actions.js`에서 `../../i18n.js` 경로를 사용함. 실제 파일은 `../i18n.js`(`static/js/modules/i18n.js`)에 위치해 있어 상대 경로 계산 오류 발생.
|
||||
2. **파비콘 링크 누락**: `studio.html` 파일에 명시적인 파비콘 링크가 없어 브라우저가 기본값인 `/favicon.ico`를 호출함.
|
||||
- **조치**:
|
||||
1. `renderer.js` 및 `actions.js`의 임포트 경로를 `../i18n.js`로 일괄 수정하여 다국어 모듈 로딩 정상화.
|
||||
2. `studio.html` 상단에 통합 로고(`logo.svg`)를 파비콘으로 사용하는 링크 태그 추가.
|
||||
3. 스튜디오 전체 리소스 로딩 상태를 재점검하여 누락된 정적 파일이 없음을 확인.
|
||||
|
||||
### [Instance #2300] - ReferenceError: t is not defined in help_modal.js
|
||||
- **현상**: 도움말 버튼(`help-btn`) 클릭 시 도움말 모달(Help Modal)이 열리지 않고, 브라우저 콘솔에 `Uncaught (in promise) ReferenceError: t is not defined` 에러가 발생하며 인터페이스가 멈추는 현상.
|
||||
- **원인**:
|
||||
1. 마크다운 렌더러 라이브러리(`marked.js`) 통합을 위한 `help_modal.js` 리팩토링 과정에서 실수로 상단의 `import { t } from '../i18n.js';` 구문을 삭제함.
|
||||
2. 모달 템플릿 코드 내에서 다국어 번역 함수인 `${t('help_center')}` 등을 호출할 때 해당 함수가 정의되지 않아 런타임 에러가 발생함.
|
||||
- **조치**:
|
||||
1. `static/js/modules/ui/help_modal.js` 파일 상단에 누락된 `t` 함수 임포트 구문을 즉시 복구함.
|
||||
2. 모달 내의 모든 `t()` 호출부가 정상적으로 바인딩되었는지 검증하고, 모달이 정상적으로 팝업되는 것을 확인함.
|
||||
3. 향후 리팩토링 시 필수 의존성(Dependency) 누락 여부를 체크하도록 코드 리뷰 프로세스 보강.
|
||||
|
||||
### [Instance #2290] - Incorrect Filtering in PPTX Details Slide
|
||||
- **현상**: PPTX 내보내기 시 "객체별 상세 내용 및 주석 목록" 슬라이드에서 실제 노드(오브젝트)는 보이지 않고, UUID 형태의 이름을 가진 선(edge)들만 대거 나열되는 현상.
|
||||
- **원인**:
|
||||
1. 상세 목록 필터가 `description` 속성이 있는 객체만 찾도록 되어 있어, 설명이 없는 일반 노드들은 모두 제외됨.
|
||||
2. 수동 경로 오프셋(`routing_offset`)이 있는 엣지들이 필터에 포함되면서, 라벨이 없는 일반 엣지들이 UUID와 함께 노출됨.
|
||||
- **조치**:
|
||||
1. 상세 목록 필터를 개선하여 **모든 일반 노드**를 포함하도록 수정 (단, 그룹은 설명이 있을 때만 포함).
|
||||
2. 엣지는 **사용자 정의 라벨이나 설명이 있을 때만** 포함하도록 변경하여 무의미한 항목 제거.
|
||||
3. 라벨이 없는 엣지의 경우 UUID 대신 `[시작노드] -> [대상노드]` 형태의 읽기 쉬운 이름을 자동 생성하도록 보완.
|
||||
|
||||
### [Instance #2280] - Asset Filter Modal Invisibility
|
||||
- **현상**: 왼쪽 에셋 라이브러리 상단의 필터(패키지 관리) 아이콘을 클릭해도 아무런 반응이 없는 것처럼 보이는 현상.
|
||||
- **원인**:
|
||||
1. `selector.js`에서 모달 팝업 생성 시 `modal.style.display = 'flex'`만 사용함.
|
||||
2. 공통 CSS(`modal.css`)에서 `.modal-overlay`는 기본적으로 `opacity: 0`이며 `.active` 클래스가 있어야만 화면에 표시되도록 정의되어 있어 시각적으로 숨겨진 상태였음.
|
||||
3. 구형 코드인 `static/js/modules/assets.js` 파일이 잔류하여 디버깅 및 유지보수에 혼선을 줌.
|
||||
- **조치**:
|
||||
1. `selector.js`의 모달 제어 로직을 `classList.add('active')` 및 `remove('active')` 방식으로 변경하여 CSS 애니메이션 및 가시성 확보.
|
||||
2. 사용되지 않는 구형 `assets.js` 파일을 삭제하여 모듈 구조 단순화.
|
||||
|
||||
### [Instance #2275] - Selection Highlight Disappears during Edit
|
||||
- **현상**: 선(edge) 속성창에서 시작/대상 호버 하이라이트가 표시된 상태에서 색상이나 스타일을 변경하면 하이라이트가 즉시 사라짐.
|
||||
- **원인**: `renderProperties()` 시작 부분에 `unhighlight()`가 포함되어 있어, 속성 변경에 따른 리렌더링 발생 시마다 하이라이트가 강제로 초기화됨.
|
||||
- **조치**:
|
||||
1. `renderProperties()` 내부의 상시 `unhighlight()` 호출 제거.
|
||||
2. 선택된 객체가 변경될 때 발생하는 `selection:changed` 이벤트 핸들러에서만 `unhighlight()`를 호출하도록 로직 위치 변경.
|
||||
3. 이를 통해 동일 객체의 속성을 수정하는 동안에는 시각적 하이라이트가 유지되도록 정합성 확보.
|
||||
|
||||
### [Instance #2270] - Infinite Loop in Sidebar Rendering (Selection Loop)
|
||||
- **현상**: 선(edge) 선택 시 브라우저 콘솔에 `renderProperties start` 로그가 무한히 출력되며 성능이 저하되는 현상.
|
||||
- **원인**:
|
||||
1. 선 선택 시 호출되는 `unhighlight()`가 노드의 `attr`을 수정함.
|
||||
2. `attr` 수정이 `cell:change:attrs` 이벤트를 발생시킴.
|
||||
3. 해당 이벤트 리스너가 다시 `renderProperties()`를 호출하여 무한 루프가 발생함.
|
||||
- **조치**:
|
||||
1. `unhighlight` 및 `highlight` 호출 시 모든 속성 변경에 `{ silent: true }` 옵션을 부여하여 불필요한 이벤트 전파 차단.
|
||||
2. `cell:change` 이벤트 리스너에서 `options.silent` 플래그를 확인하여 내부적인 시각 효과 변경 시에는 리렌더링을 건너뛰도록 개선.
|
||||
|
||||
### [Instance #2265] - Sticky Source/Target Highlights in Sidebar
|
||||
- **현상**: 엣지 속성창에서 시작/대상 선택 상자에 마우스를 올렸을 때 나타나는 노드 강조(테두리)가 사이드바를 닫거나 선택을 바꿔도 사라지지 않고 유지됨.
|
||||
- **원인**: 하이라이트 제거 로직(`unhighlight`)이 오직 `mouseleave` 이벤트에만 바인딩되어 있어, 사이드바를 닫거나 다른 객체로 전환 시 이벤트가 트리거되지 않음.
|
||||
- **조치**:
|
||||
1. `unhighlight` 로직을 모듈 레벨 함수로 분리.
|
||||
2. 사이드바 닫기 버튼, 적용 버튼 클릭 시 및 속성창 리렌더링(`renderProperties`) 시작 시점에 항상 `unhighlight`를 호출하도록 보강하여 잔상 방지.
|
||||
|
||||
### [Instance #2260] - Edge Rendered Underneath Groups (Z-Index Hierarchy)
|
||||
- **현상**: 새로 생성된 선(edge)이 기존 그룹의 배경 뒤로 숨어서 보이지 않거나 선택이 어려운 현상.
|
||||
- **원인**: 선 생성 시 레이어 오프셋이 적용되지 않은 기본 z-index(30)가 부여되어, 이미 레이어 가중치(101, 201 등)를 받은 그룹보다 낮게 배치됨.
|
||||
- **조치**:
|
||||
1. `layers.js`에 중앙 집중형 z-index 계산 함수(`calculateCellZIndex`)를 도입하여 레이어 오프셋과 객체 타입별 우선순위(노드>선>그룹)를 통합 관리.
|
||||
2. 선 및 노드 생성 시(`config.js`, 스타일 매핑 모듈) 즉시 해당 함수를 호출하여 초기 z-index를 올바르게 할당하도록 구조 개선.
|
||||
|
||||
---
|
||||
*아카이브 관리자: drawNET AI Assistant*
|
||||
@@ -0,0 +1,155 @@
|
||||
# drawNET 업데이트 로그 (Changelog)
|
||||
|
||||
## [v1.0 Alpha-1] - 2026-03-21
|
||||
### 🎉 Project Milestone: Release Alpha Version
|
||||
오늘로써 drawNET의 모든 핵심 엔진 기능이 구현되어 공식 **v1.0 Alpha-1** 버전으로 명명합니다.
|
||||
|
||||
## [2026-03-21] - High-Fidelity 하이브리드 내보내기 슈트 및 안정성 고도화
|
||||
|
||||
### 🚀 신규 기능 (Added)
|
||||
- **엣지 라우팅 및 앵커 가시성 제어 거버넌스 수립**:
|
||||
- **시작/대상(S/T) 가이드 라벨**: 엣지 선택 시 양 끝에 초록/빨강 라벨을 표시하여 망 구성 식별력 강화.
|
||||
- **인터랙티브 앵커 하이라이트**: 사이드바 앵커 설정 시 캔버스 내 노드 실시간 점멸 피드백 제공.
|
||||
- **직선 라우팅 최우선 순위화**: 앵커 방향 제약 및 전역 기본 설정을 극복한 '완벽한 직선' 모드 구현.
|
||||
- **Format Painter (Style Copy/Paste) 엣지 확장**:
|
||||
- `Ctrl+Shift+C/V`를 통해 선의 색상, 스타일, 라우팅, 화살표 정보를 다른 선으로 즉시 복제.
|
||||
- **UX 편의 기능**:
|
||||
- **ESC 전역 캔슬**: 원터치로 모든 선택 해제 및 사이드바 닫기.
|
||||
- **단축키 도움말(?) 애니메이션 복구**: 누락된 리소스를 보강하여 도움말 모달 가독성 개선.
|
||||
- **객체 메타데이터 및 인벤토리 거버넌스**:
|
||||
- **상세 설명(Description) 및 태그(Tags) 도입**: 모든 노드와 엣지에 설계 의도 및 기술 사양을 기록할 수 있는 전용 필드 추가.
|
||||
- **3중 데이터 무결성 보장 로직**: 구버전 파일 자동 마이그레이션, 복사/붙여넣기(`Ctrl+C/V`) 시 전역 데이터 새니타이저(Sanitizer)를 통한 필수 필드 누락 원천 봉쇄.
|
||||
- **엔터프라이즈급 PPTX 리포팅 고도화**:
|
||||
- **상세 설명 전용 슬라이드**: `autoPage` 기능을 활용하여 대규모 프로젝트의 모든 객체 상세 주석을 표 형태로 자동 생성.
|
||||
- **인벤토리 매핑 강화**: 상세 목록에 '소속 그룹(Parent Group)' 및 '태그' 컬럼을 추가하여 외부 자산 데이터와의 매칭 편의성 제고.
|
||||
- **High-Fidelity 하이브리드 내보내기 슈트 (v2.0)**:
|
||||
- **SVG 내보내기 엔진 완전 재설계**: 전수 이미지 스캔 로직을 통해 상속된 아이콘까지 100% Base64로 임베딩하여 '아이콘 깨짐' 현상 종결.
|
||||
- **절대 좌표 기반 짤림 방지 (Zero-Clip)**: `getCellsBBox`와 명시적 `viewBox` 주입을 통해 화면 줌/위치와 무관하게 120px 안전 여백이 포함된 완벽한 도면 출력.
|
||||
- **전문가용 내보내기 UI**: 내보내기 프로세스 시작 시 "파일 준비 중" 안내 오버레이와 블러 효과를 적용하여 사용자 피드백 및 경험(UX) 고도화.
|
||||
- **적응형 안정화 지연 (1000ms)**: 모델 업데이트 후 DOM 동기화를 위해 1초의 대기 시간을 부여하여 저사양 PC에서도 무결한 캡처 보장.
|
||||
- **전문가용 PPTX 리포트**: 도면은 고해상도 PNG 스냅샷으로, 데이터는 편집 가능한 네이티브 표(Table)로 구성하는 하이브리드 모델 도입.
|
||||
- **레이어별 자동 슬라이드 생성**: 멀티 레이어 프로젝트를 분석하여 레이어별 상세 도면 슬라이드를 자동으로 생성하는 엔진 구축.
|
||||
- **초정밀 클린 캡처 (Clean Capture)**:
|
||||
- 내보내기 시 앵커(포트), 선택 박스, UI 가이드를 자동으로 숨겨 시각적 노이즈를 제거하는 로직 반영.
|
||||
- **2x 해상도 렌더링**: 모든 이미지 기반 내보내기 시 200% 스케일업을 통해 레티나 디스플레이 및 대형 인쇄 대응 수준의 화질 확보.
|
||||
- **사이드바 데이터 정합성 및 실시간 동기화 슈트**:
|
||||
- **재귀적 데이터 전파(Recursive Poke)**: 그룹 이름 변경 시 하위 모든 객체들을 대상으로 동기화 이벤트를 강제 트리거하여 사이드바의 상위 그룹 정보가 실시간으로 갱신되도록 개선 (#2245).
|
||||
- **세이프 렌더(Safe Render) 및 포커스 유실 방지**: 사이드바 입력 중 그래프 변화에 의한 리렌더링을 지능적으로 차단하여 타이핑 연속성 확보 (#2255).
|
||||
- **비동기 데이터 렌더링 타이즈**: `setTimeout(0)`을 적용하여 X6 엔진 데이터와 UI 간의 미세한 타이밍 불일치 완전 소거.
|
||||
- **레이어 격리 및 상호작용 보안 거버넌스**:
|
||||
- **선택 필터링(Selection Filter)**: 활성 레이어가 아닌 객체는 마우스로 선택할 수 없도록 플러그인 레벨에서 격리 구현.
|
||||
- **상호작용 가드**: 비활성 레이어 객체에 대한 더블 클릭 등 파괴적 액션을 원천 차단하여 레이어 간 데이터 오염 방지.
|
||||
- **개발 생산성 도구**:
|
||||
- **`logger.debug` 정식 지원**: 개발 중 임시 로그를 위한 별도의 디버그 레벨과 서식 도입.
|
||||
- **하이엔드 레이어 안정성 및 데이터 거버넌스 수립**:
|
||||
- **논리 전용 레이어(Logical-Only Layer)**: 물리 배치와 논리 연결의 명확한 분리를 위한 레이어 타입 규격 도입 및 지능형 드롭/복제 필터링 엔진 구축.
|
||||
- **레이어 하드-락(Hard-Lock) 시스템**: 중요 레이어의 실수에 의한 삭제나 이름 변경을 원천 차단하는 자물쇠 기능 도입.
|
||||
- **데이터 보호 이중 확인(Double Confirmation)**: 오브젝트가 포함된 레이어 삭제 시 '항목 수 안내'와 '최종 파기 확인'의 2단계 절차를 거치는 안전 로직 적용.
|
||||
- **레이어 전용 휴지통(Trash Bin)**: 드래그 앤 드롭으로 레이어를 명시적으로 버릴 수 있는 직관적인 폐기 워크플로우 구현.
|
||||
- **레이어 패널 UI 최적화**: 가시성과 조작 편의성 개선을 위해 레이어 관리창 전체 크기를 약 25% 확대 (250px x 400px).
|
||||
- **멀티 플랫폼 및 브라우저 호환성 하모니**:
|
||||
- **Mac Command(⌘) 키 완벽 지원**: Mac 환경에서도 Cmd 키를 사용해 복제 및 단축키 기능을 동일하게 사용 가능.
|
||||
- **자기 치유형 키 상태 관리(Self-healing)**: 탭 전환 등으로 인한 키 업/다운 이벤트 유실 시에도 마우스 활동 감지를 통해 시스템 키 상태를 자동 보정.
|
||||
- **ESC 전역 캔슬 확장**: 드래그/복제 도중 `Escape` 키로 즉시 취소 및 고스트 박스 자동 소거 로직 고도화.
|
||||
- **포맷 페인터(Format Painter) 데이터 무결성 수정**:
|
||||
- 선(Edge)의 색상 및 두께 복사 시 UI 기본값보다 클립보드 데이터를 최우선(Strict Prioritization)으로 하여 속성이 누락되던 현상 해결.
|
||||
- **하이엔드 안정성 및 논리 레이어 정책 거버넌스 수립**:
|
||||
- **논리 전용 레이어(Logical-Only Layer)**: 물리 배치와 논리 연결의 명확한 분리를 위한 레이어 타입 규격 도입 및 지능형 드롭/복제 필터링 엔진 구축.
|
||||
- **멀티 플랫폼(Windows/Mac) 하모니**: Cmd/Ctrl 키 통합 지원 및 자기 치유형(Self-healing) 키 상태 관리 로직 적용.
|
||||
- **ESC 드래그 캔슬**: 복제 드래그 중 Escape 키로 즉석 취소 및 고스트 박스 자동 소거 로직 반영.
|
||||
|
||||
### 🛠️ 구조 개선 (Refactored)
|
||||
- **내보내기 서브시스템(Export Subsystem) 모듈화**: `image_exporter.js`, `pptx_exporter.js` 등으로 로직을 분리하여 확장성 강화.
|
||||
- **UI 시각적 가시성 개선**: 라이트 모드(White Mode)에서 플라이아웃 메뉴의 호버 대비(Contrast)를 액센트 컬러로 교체하여 접근성 및 전문성 강화.
|
||||
- **중복 초기화 제거 (Zero Duplication)**: `app.js` 내로 핵심 모듈 초기화 로직을 일원화하여 중복 팝업 및 이벤트 리스너 누수 문제 원천 해결.
|
||||
|
||||
### 🐛 버그 수정 (Fixed)
|
||||
- **레이어 데이터 손실 방지**: 새로고침 시 레이어 정보가 유실되던 데이터 영속성 결함 수정.
|
||||
- **아이콘 매핑 정확도 향상**: `assetId` 기반의 정밀 매핑 및 경로 복제 방지 로직을 통해 PPTX 내 아이콘 404 오류 해결.
|
||||
- **그룹 노드 렌더링 정상화**: PPTX 내에서 그룹 객체가 거대한 이미지로 보이던 현상을 투명도를 가진 네이티브 사각형으로 수정.
|
||||
|
||||
### ✅ 완료된 마일스톤
|
||||
- **Phase 1.50**: High-Fidelity 하이브리드 내보내기 거버넌스 수립 완료
|
||||
- **Phase 1.55**: 시스템 초기화 및 안정성 전수 감사(Full Audit) 완료
|
||||
- **Phase 1.60**: 로컬 독립 실행 및 오프라인 리포팅 환경 구축 완료
|
||||
|
||||
---
|
||||
|
||||
## [2026-03-20] - i18n 거버넌스 및 아키텍처 전략 고도화
|
||||
|
||||
### 🚀 신규 기능 (Added)
|
||||
- **전역 다국어(i18n) 통합 지원 (ko/en)**:
|
||||
- 브라우저 언어 설정 및 사용자 선택에 대응하는 실시간 로케일 전환 엔진 구축.
|
||||
- `en.json` 신설을 통한 영미권 사용자 지원 기반 마련.
|
||||
- **기술 용어 직관화 (Terminology Optimization)**:
|
||||
- 난해한 공학 용어를 직관적인 한국어로 교체: `Manhattan` -> `자동 경로 (장애물 회피)`, `U-Shape` -> `ㄷ자 경로`, `Orthogonal` -> `수직/수평 (일반)`.
|
||||
- **PPTX 아키텍처 리포트 다국어화**:
|
||||
- 생성되는 모든 PPTX 보고서의 헤더, 요약 표, 인벤토리 항목을 설정 언어에 맞춰 동적 렌더링하도록 개선.
|
||||
|
||||
### 🛠️ 구조 개선 (Refactored)
|
||||
- **하드코딩 문자열 제로화 (Hardcoding-Free)**:
|
||||
- `Object Studio`, `Settings`, `Persistence`, `UI Templates` 등 시스템 전반의 텍스트를 로케일 파일로 분리 관리.
|
||||
- **아키텍처 문서(`architecture.md`) 대대적 보강**:
|
||||
- **Section 4 (Multi-Layer Isolation)**: 물리/논리/보안 레이어 간 SSOT(Single Source of Truth) 보장을 위한 데이터 평면 설계 명문화.
|
||||
- **Section 5 (PM Assets & Expansion)**: 외부 자산 연동 및 REST API 확장 전략 구체화.
|
||||
- **Section 8 (AI-Ready Strategy)**: 정규화된 JSON 구조를 통한 AI 분석 및 네트워크 시뮬레이션 가치 강조.
|
||||
- **로케일 데이터 무결성 확보**: JSON 내 중복 키 전수 제거 및 정적 분석 오류 해결.
|
||||
|
||||
### 🚀 기존 Premium UX 업데이트 내역 (이전 작업)
|
||||
- **오브젝트 적층 순서 제어 (Z-Index Control)**: `[` (뒤로 보내기), `]` (앞으로 가져오기) 단축키 지원.
|
||||
- **오브젝트 정밀 잠금 (Full Object Locking)**: `Ctrl + L` 및 시각적 피드백(Red Dashed Boundary) 구현.
|
||||
- **재귀적 오브젝트 선택 (Recursive Selection)**: `Ctrl + 마우스 우클릭`을 통한 Surgical Picker 도입.
|
||||
- **프리미엄 레이어 패널**: 레이어 이름 변경 및 비활성 레이어 투명도 조절 기능.
|
||||
|
||||
### ✅ 완료된 마일스톤
|
||||
- **Phase 1.30**: 전역 다국어 통합 거버넌스 및 하드코딩 제거 완료
|
||||
- **Phase 1.35**: 아키텍처 설계서(architecture.md) 엔지니어링 표준화 완료
|
||||
- **Phase 1.40**: UI/UX 용어 고도화 및 전문가 DX 공식 수립
|
||||
|
||||
---
|
||||
|
||||
## [2026-03-19] - Object Studio & Asset Infrastructure 고도화
|
||||
|
||||
### 🚀 신규 기능 (Added)
|
||||
- **Object Studio 전용 페이지 (`/studio`)**: 독립된 환경에서 자산을 제작하고 관리할 수 있는 전문 도구 세트 구현.
|
||||
- **하이브리드 벡터 변환 엔진**: Potrace-js를 통합하여 PNG 비트맵 이미지를 고품질 SVG `<path>` 데이터로 실시간 변환하는 기능 추가.
|
||||
- **멀티 벤더 패키징 시스템**:
|
||||
- 에셋을 벤더 단위 팩(`package.json`)으로 묶어 물리적 디렉토리에 저장하는 서버 API 구현.
|
||||
- 저장된 패키지가 설계 영역(Designer) 라이브러리에 실시간 로드되는 인프라 구축.
|
||||
- **인제스터(Ingester) 개선**: 폴더 단위 업로드(`webkitdirectory`) 및 드래그 앤 드롭을 통한 대량 자산 일괄 로드 지원.
|
||||
- **리뷰 및 선택 UI**: 원본과 변환본을 나란히 비교하고, 사용자 취향에 따라 포맷을 선택할 수 있는 Side-by-Side 뷰 도입.
|
||||
|
||||
### 🛠️ 구조 개선 (Refactored)
|
||||
- **스튜디오 프론트엔드 모듈화**: `Renderer`, `Actions`, `State`, `Processor` 등으로 로직을 분리하여 확장성 및 유지보수성 확보.
|
||||
- **백엔드 자산 스캔 로직 최적화**: `api_routes.py` 내 멀티 패키지 로딩 엔진 고도화.
|
||||
- **명명 규칙 자동화**: 파일명을 기반으로 슬러그(Slug) 형태의 ID와 라벨을 자동 생성하는 로직 반영.
|
||||
|
||||
### ✅ 완료된 마일스톤
|
||||
- **Phase 1**: 데이터 규격 및 멀티 로더 (Vendor Pack 시스템)
|
||||
- **Phase 2**: 스튜디오 기반 구축 (라우팅, 레이아웃, 인제스천)
|
||||
- **Phase 3**: 핵심 가공 기능 (SVG 트레이싱, 비교 검수)
|
||||
- **Phase 4**: 패키징 및 설계영역 최종 연동 (Build & Save)
|
||||
|
||||
---
|
||||
|
||||
## [2026-03-18] - UX & Precision Tools 고도화
|
||||
|
||||
### 🚀 신규 기능
|
||||
- **단축키 UX 고도화**: 컨텍스트 메뉴 내 단축키 힌트 노출 및 `Alt + 1` 사이드바 토글 등 전문 도구 수준의 단축키 전략 확립.
|
||||
- **신규 객체 '리치 텍스트 카드(Rich Text Card)' 출시**:
|
||||
- 아키텍처 도면의 '구축 내역' 및 '범례(Legend)'를 위한 전문 문서화 객체 추가.
|
||||
- 지능형 리스트 렌더링 (번호 사각형, 불렛 기호 자동 생성).
|
||||
- 범례 모드 지원: `- (도형:색상) 설명` 텍스트 기반 시각화 자동화.
|
||||
- **Format Painter (Style Copy/Paste) 엣지 확장**: `Ctrl+Shift+C/V`를 통해 노드뿐만 아니라 선(Edge)의 라우팅, 색상, 스타일을 일괄 복사/적용 가능.
|
||||
- **ESC 키 전역 캔슬**: `Esc` 키로 선택 해제 및 사이드바 닫기 지원.
|
||||
- **다중 선택 정렬 패널**: 여러 노드 선택 시 사이드바에 즉시 정렬 및 스타일 편집 옵션 표시.
|
||||
|
||||
### 🐛 버그 수정
|
||||
- **캔버스 팬닝 충돌 해결**: Space 키 드래그 시 Rubberband 선택과 겹치는 현상 수정 (인터랙션 명시적 비활성화).
|
||||
|
||||
---
|
||||
|
||||
## [이전 로그] - 프로젝트 초기화 및 핵심 엔진 구축
|
||||
- AntV X6 그래프 엔진 기반 마이그레이션 완료.
|
||||
- DSL(Domain Specific Language) 파싱 및 캔버스 동기화 인프라 구축.
|
||||
- 그룹화, 라우팅, 인벤토리 등 핵심 기능 순차적 도입.
|
||||
@@ -0,0 +1,79 @@
|
||||
# drawNET 기능 명세서 (v1.0 Alpha)
|
||||
|
||||
현재 구현된 주요 기능들의 목록과 상세 설명입니다. "이 문서에 없는 기능은 구현되지 않은 것으로 간주합니다."
|
||||
|
||||
## 1. 프로젝트 관리 (Project Management)
|
||||
- **JSON 기반 SSoT**: `graph.toJSON()`과 `graph.fromJSON()`을 사용하여 프로젝트 상태(노드, 엣지, 위치, 스타일 등)를 완벽하게 보존.
|
||||
- **자동 저장 및 세션 복구**: `persistence.js`를 통해 변경 사항 발생 시 브라우저 LocalStorage에 실시간 자동 저장.
|
||||
- **임포트/익스포트**: `.json` 또는 `.dnet` 확장자로 프로젝트 파일을 내보내고 가져오기 지원.
|
||||
|
||||
## 2. 그래프 캔버스 (Topology Canvas)
|
||||
- **AntV X6 v2.x 엔진**: 엔터프라이즈 레벨의 고성능 그래프 렌더링.
|
||||
- **UUID 아키텍처**: 모든 오브젝트에 고유 ID를 부여하여 라벨 중복과 무관하게 데이터 무결성 보장.
|
||||
- **정밀 직교 라우팅 (Manhattan)**: 선 꼬임 방지 및 직각 연결 유지 알고리즘 적용.
|
||||
- **스마트 앵커 (Smart Anchors)**: 상/하/좌/우 포트 고정을 통한 정교한 경로 제어.
|
||||
|
||||
## 3. 지능형 그룹화 (Smart Grouping)
|
||||
- **컨테이너-자식 관계**: 드래그 앤 드롭을 통한 계층 구조 형성.
|
||||
- **가변 패딩 조절**: 속성 사이드바를 통해 그룹 내부 여백 실시간 조정 가능.
|
||||
- **UUID 계층 구조**: 부모-자식 관계가 UUID로 관리되어 노드 이동 및 이름 변경 시에도 계층 유지.
|
||||
- **최하위 그룹 자동 인식 (Innermost Selection)**: 그룹이 중첩되거나 겹쳐 있는 경우, 시스템이 자동으로 가장 면적이 작은(가장 안쪽의) 그룹을 부모로 선택하여 정밀한 계층 관리 지원.
|
||||
|
||||
## 4. 사이드바 및 속성 제어 (Sidebar & Properties)
|
||||
- **자산 라이브러리**: 카테고리별 자산 트리 및 실시간 검색 필터링.
|
||||
- **상세 속성 편집**:
|
||||
- 노드: 타입, 라벨, 부모(UUID), IP, 상태, 벤더, 커스텀 어셋 경로 등.
|
||||
- 엣지: 타입, 스타일, 색상, 라우팅 방식, 앵커 위치, 터널링 여부 등.
|
||||
- **자동 사이드바 오픈**: 오브젝트 선택 시 해당 속성 창 자동 노출.
|
||||
|
||||
## 5. 정밀 배치 및 협업 도구 (Precision Tools)
|
||||
- **인벤토리 패널**: 타입별 자산 수량 실시간 집계 및 CSV 내보내기 지원 (`Alt + 0`).
|
||||
- **서식 복사 (Format Painter)**: `Ctrl + Shift + C/V`를 통해 노드 및 엣지(선)의 스타일을 일괄 복제.
|
||||
| 구분 | 대상 | 복사/붙여넣기 항목 |
|
||||
| :--- | :--- | :--- |
|
||||
| **노드** | 데이터 & 디자인 | 제조사, 모델, 상태, 프로젝트, 태그, 배경색, 글꼴 크기/색상 등 |
|
||||
| **엣지** | 라우팅 & 스타일 | **직선/직각 모드**, 선 색상, 두께, 점선 여부, 시작/대상 앵커 위치 등 |
|
||||
- **오브젝트 적층 제어 (Stacking Order)**: `[` (Send to Back), `]` (Bring to Front) 단축키를 사용하여 겹친 오브젝트의 상하 순서 조절.
|
||||
- **물리적 객체 잠금 (Object Locking)**: `Ctrl + L` 또는 속성창의 스위치를 통해 이동, 삭제, 회전을 원천 차단. 잠긴 객체는 **빨간색 점선 경계**로 표시됨.
|
||||
- **재귀적 오브젝트 선택 (Recursive Picker)**: `Ctrl + 마우스 우클릭` 시 마우스 포인터 위치에 중첩된 모든 오브젝트 목록을 팝업하여, 복잡한 레이어 구조에서 원하는 항목만 정밀하게 선택 가능.
|
||||
- **비주얼 디프 (Visual Diff)**: JSON 스냅샷 비교를 통해 이전 상태 대비 변경된 위치 및 추가된 노드 하이라이트.
|
||||
- **드래그 복제**: `Ctrl + Drag`를 통한 즉시 노드 복제 (고스트 박스 기반 실시간 프리뷰).
|
||||
- **하이엔드 안정성(Failsafe) 설계**:
|
||||
- **ESC 즉시 취소**: 드래그 또는 복제 중 ESC 키 입력 시 모든 상태 초기화 및 고스트 제거.
|
||||
- **자기 치유형 키 상태(Self-healing)**: 브라우저 탭 전환 등으로 인한 키 업/다운 이벤트 유실 시, 마우스 활동 감지로 실제 키 상태 자동 재동기화.
|
||||
- **멀티 플랫폼(Mac) 지원**: Windows(Ctrl)와 Mac(Command) 키를 통합 지원하여 동일한 복제 워크플로우 제공.
|
||||
|
||||
## 6. 오브젝트 스튜디오 (Object Studio)
|
||||
- **대량 이미지 업로드**: 드래그 앤 드롭으로 다량의 에셋 일괄 처리.
|
||||
- **PNG to SVG 벡터 변환**: Potrace-js 엔진을 활용한 고품질 벡터화.
|
||||
- **실시간 비교 뷰어**: 비트맵과 벡터 결과물의 실시간 품질 대조.
|
||||
- **벤더 패키징**: 가공된 에셋을 라이브러리로 즉시 패키징하여 반영.
|
||||
|
||||
## 7. 단축키 시스템 (Hotkeys - Premium)
|
||||
- **Alt + 0/1**: 인벤토리 / 속성 사이드바 토글.
|
||||
- **Alt + 9**: 레이어 패널 토글.
|
||||
- **Shift + A/D**: 빠른 선 연결 / 끊기.
|
||||
- **Shift + 1~6**: 오브젝트 자동 정렬 (Alignment).
|
||||
- **Shift + 7~8**: 오브젝트 균등 분배 (Distribution).
|
||||
- **F2**: 선택된 오브젝트의 라벨 즉시 편집.
|
||||
- **Directional Keys**: 5px / 그리드 단위(Shift) 정밀 이동.
|
||||
|
||||
## 8. 논리적 계층화 (Multi-Layer Support)
|
||||
- **레이어 기반 가시성 제어**: 무제한 논리적 레이어 생성 및 개별 Visible 토글.
|
||||
- **비활성 레이어 투명도 (Opacity Control)**: 슬라이더를 통해 배경 레이어의 투명도를 0~100%로 조절하여 집중도 향상.
|
||||
- **레이어 리네임 (Rename)**: 편집 아이콘(Pencil)을 사용하여 레이어 이름을 직관적으로 변경하고 영속 저장.
|
||||
- **액티브 레이어 자동 할당**: 현재 선택된 레이어에 신규 오브젝트 자동 귀속.
|
||||
- **논리 전용 레이어 (Logical-Only Layer)**:
|
||||
- 레이어별로 **'장비(Physical)'** 또는 **'연결(Logical)'** 성격 부여 가능.
|
||||
- 논리 레이어에서는 **노드 드롭 차단** 및 **지능형 노드 필터링(복제 시 선만 추출)** 기능을 통해 설계 실수 방지 및 시뮬레이션 효율 극대화.
|
||||
- **지능형 적층 계층 (Z-Index Hierarchy)**: `Group (1) < Edge (30) < Node (50)` 계층을 기본으로 하여, 연결선이 그룹에 가려지지 않고 항상 인터랙션 가능하도록 최적화.
|
||||
|
||||
## 9. 시스템 데이터 무결성 (Data Integrity & Recovery)
|
||||
- **자동 데이터 자가 치유(Self-healing)**: 프로젝트 로드 시 유실된 좌표(`pos`), 크기(`size`), 라벨(`label`) 등을 `data` 필드로부터 추론하여 자동으로 복구 및 동기화.
|
||||
- **명시적 저장 모델 (Explicit Property Apply)**: 사이드바 텍스트 수정 시 실시간 반영 대신 **[적용]** 버튼이나 **Enter** 키를 통한 명시적 확정 방식을 채택하여, 입력 도중의 포커스 유실을 방지하고 데이터 경합 최소화.
|
||||
- **명시적 연결선 메타데이터 (Explicit Edge Layers)**:
|
||||
- 모든 연결선에 `source_layer`, `target_layer`, `is_cross_layer` 정보를 명시적으로 기록.
|
||||
- 이를 통해 전체 도면 데이터 없이도 연결성(Connectivity)을 독립적으로 해석 가능하게 하며, 외부 도구 및 LLM 분석 시의 정밀도를 대폭 향상.
|
||||
|
||||
---
|
||||
- **마지막 업데이트**: 2026-03-22 (명시적 연결선 메타데이터 추가, Z-Index 계층화, 데이터 자가치유 로직)
|
||||
@@ -0,0 +1,90 @@
|
||||
# drawNET Maintenance Guide (AI 개발자 필독)
|
||||
|
||||
이 문서는 drawNET 프로젝트의 연속성을 유지하기 위한 **핵심 기술 규칙 및 유지보수 지침**을 담고 있습니다. 새로운 세션의 AI 개발자는 작업을 시작하기 전 본 문서를 반드시 숙지하여 기존의 설계 철학이 깨지지 않도록 해야 합니다.
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## ⌨️ 3. 단축키 시스템 (Hotkeys)
|
||||
|
||||
- **규칙**:
|
||||
1. `static/hotkeys.json`에서 `undo`와 `redo` 액션은 반드시 **`"alwaysEnabled": true`** 속성을 가져야 합니다.
|
||||
2. `static/js/modules/hotkeys.js`는 `isTyping` 상태(텍스트 입력 중)일지라도 `alwaysEnabled`가 참인 단축키는 차단하지 않고 실행해야 합니다.
|
||||
3. **이유**: 예기치 않게 특정 입력창에 포커스가 머물러 있더라도 그래프의 Undo/Redo 기능은 항상 작동해야 하기 때문입니다.
|
||||
|
||||
## 🎨 4. 오브젝트 스튜디오 (Studio)
|
||||
|
||||
- **규칙**:
|
||||
1. **ID 고유성**: `static/js/modules/studio/state.js`의 `addSource(file)` 함수는 파일명이 중복될 경우(예: `icon.png`, `icon.png`) `id` 뒤에 `_1`, `_2` 등의 접미사를 붙여 반드시 고유한 ID를 생성해야 합니다.
|
||||
2. **ID 생성 방식**: 소문자 영문과 숫자 위주로 변환하며, 공백이나 특수문자는 언더바(`_`)로 치환합니다.
|
||||
|
||||
## 📂 5. 에셋 라이브러리 (Asset Library)
|
||||
|
||||
- **구조**: `Pack (Package) -> Category -> Object` 3단계 계층 구조를 유지합니다.
|
||||
- **필터링**: 사용자가 사이드바의 **'Filter' 아이콘**을 통해 원하는 패키지만 선택적으로 로드할 수 있어야 하며, 이 설정은 `localStorage`의 `selectedPackIds`에 저장됩니다.
|
||||
- **Composite ID (중요)**: 에셋의 `id`가 패키지 간에 중복될 수 있으므로, `state.assetMap`의 키와 드래그 앤 드롭 통신에는 반드시 **`${pack_id}|${asset.id}`** 형식의 조합 키를 사용해야 합니다.
|
||||
|
||||
## 🧼 6. 오브젝트 데이터 정합성 (Object Data Purity)
|
||||
|
||||
- **규칙**:
|
||||
1. **그룹 및 기본 도형(Primitives)**: `group`, `rect`, `circle`, `rounded-rect`, `text-box`, `label` 등 시각적 도형 객체는 에셋 이미지 경로(`assetPath`)를 가져서는 안 됩니다.
|
||||
2. **ID 매칭 주의**: `static/js/modules/graph/styles/mapping.js`의 `getX6NodeConfig` 함수는 객체 타입이 그룹이거나 기본 도형 목록에 포함될 경우 에셋 검색 및 할당 로직을 반드시 건너뛰어야 합니다.
|
||||
3. **라벨 데이터-시각 속성 동기화**: `data.label`은 사이드바와 비즈니스 로직의 원본 소스(SSoT)입니다. `json_handler.js` 및 `handleNodeUpdate`는 항상 `data.label`의 값을 `attrs.label.text`에 강제로 동기화하여 시각적 불일치를 방지해야 합니다.
|
||||
4. **이유**: 그룹 이름이나 도형 라벨이 기존 에셋 명칭을 포함할 경우(예: "Switch Group"), 시스템이 이를 에셋으로 오판하여 잘못된 아이콘을 렌더링하거나 404 에러를 유발할 수 있기 때문입니다.
|
||||
|
||||
## 🔄 7. 부모 그룹 선택 가변 로직 (Parent Selection Heuristic)
|
||||
|
||||
- **원칙**: 노드가 중첩되거나 겹쳐 있는 여러 그룹 영역에 드롭/이동될 경우, 시스템은 항상 **가장 구체적인(Innermost)** 부모를 선택해야 합니다.
|
||||
- **판단 알고리즘**:
|
||||
1. **면적 기반 우선순위**: 드롭 포인트를 포함하는 모든 그룹 후보 중 Bounding Box의 **면적(Area)이 가장 작은 그룹**을 최종 부모로 선택합니다.
|
||||
2. **계층 기반 보완**: 만약 후보 그룹들의 면적이 동일한 경우(예: 기본 사이즈로 중첩된 경우), `getAncestors()`를 확인하여 다른 그룹의 **자손(Descendant)인 그룹**을 우선적으로 선택합니다.
|
||||
- **적용 위치**: `static/js/modules/graph/config.js` (`embedding.findParent`) 및 `static/js/modules/graph/interactions/drop.js`.
|
||||
|
||||
## 🧩 8. 모듈화 및 리팩토링 규칙 (Refactoring & Import Integrity)
|
||||
|
||||
- **규칙**:
|
||||
1. **상대 경로 재계산**: 파일을 하위 디렉토리로 이동(예: `events.js` → `events/index.js`)할 경우, 해당 파일 내의 모든 상대 경로 임포트(`import ... from '../../state.js'`)는 반드시 새로운 디렉토리 깊이에 맞춰 업데이트해야 합니다.
|
||||
2. **공통 참조 체크리스트**:
|
||||
- `state.js`, `constants.js` (보통 `modules/` 최상위)
|
||||
- `graph/styles/utils.js` 등 공용 유틸리티
|
||||
- `ui/`, `persistence.js` 등 외부 모듈 의존성
|
||||
3. **검증 절차**: 모듈화 작업 직후에는 반드시 `grep`이나 IDE 기능을 사용하여 **"지정된 파일을 찾을 수 없습니다"** 또는 **"404 Not Found"** 오류가 없는지 전수 검사해야 합니다.
|
||||
- **이유**: 파일 구조가 깊어짐에 따라 기존의 `./` 또는 `../` 경로가 깨지면서 런타임 오류를 유발하고 개발 흐름을 방해하기 때문입니다.
|
||||
|
||||
## 11. 사이드바 및 실시간 동기화 (Sidebar & Sync)
|
||||
|
||||
- **규칙**:
|
||||
1. **세이프 렌더(Safe Render)**: 사이드바의 `input` 또는 `textarea`에 포커스가 있는 동안에는 그래프 이벤트에 의한 전체 리렌더링을 차단해야 합니다. (`index.js` 내 `safeRender` 함수 참조)
|
||||
2. **비동기 렌더링 튜닝**: X6의 데이터 변경 이벤트(`cell:change:data`) 발생 직후 렌더링할 때는 반드시 `setTimeout(..., 0)`을 사용하여 엔진 내부의 데이터 확정이 완료된 후 UI를 그려야 합니다.
|
||||
3. **명시적 저장(Explicit Apply)**: 라벨, 자산 정보 등 텍스트 기반 속성은 `Enter` 키 또는 **[적용]** 버튼을 통해서만 저장되도록 하여, 입력 중 데이터 유실이나 포커스 탈취를 원천 차단합니다.
|
||||
4. **재귀적 전파(Recursive Poke)**: 그룹의 이름이나 레이아웃 정보를 변경할 경우, 반드시 모든 하위 객체(`getDescendants`)에 `_parent_updated`와 같은 더미 타임스탬프를 `setData`로 주입하여 하위 객체들의 사이드바가 즉각 최신 부모 정보를 반영하게 해야 합니다.
|
||||
- **이유**: 실시간 협업 및 복잡한 계층 구조에서 데이터 정합성과 사용자 입력의 연속성을 동시에 보장하기 위한 필수 장치입니다.
|
||||
|
||||
## 12. 레이어 격리 및 선택 필터링 (Layer Isolation)
|
||||
|
||||
- **규칙**:
|
||||
1. **선택 격리(Selection Filter)**: `plugins.js`의 `Selection` 플러그인 설정에서는 반드시 현재 활성 레이어(`state.activeLayerId`)에 속한 셀만 선택 가능하도록 필터링해야 합니다.
|
||||
2. **상호작용 차단**: 활성 레이어가 아닌 객체에 대한 더블 클릭(더 하위 계층으로 진입 등)은 `nodes.js` 이벤트 핸들러에서 명시적으로 차단 가드를 두어야 합니다.
|
||||
3. **정적 필터링**: `pointer-events: none`과 같은 CSS 기반 차단 대신, 플러그인 레벨의 필터링을 우선하여 고스트 스냅(Ghost Snapping) 등 보조 기능은 유지되도록 관리합니다.
|
||||
- **이유**: 사용자가 편집 중이지 않은 레이어의 객체를 실수로 조작하여 데이터가 오염되는 것을 방지하기 위함입니다.
|
||||
|
||||
## 9. 오브젝트 적층 및 잠금 관리 (Stacking & Locking)
|
||||
|
||||
- **Z-Index 규칙 (2026-03-21 개정)**:
|
||||
- **계층 구조**: `Group/Rack (1~19) < Edge (30) < Node (50)`
|
||||
- 그룹은 하단에, 연결선(Edge)은 그룹 위에, 일반 노드는 최상단에 배치하여 가시성 및 클릭 편의성을 보장합니다.
|
||||
- 사용자 조작(`[`, `]`)에 의한 동적 변경 시에도 이 기본 계층 범위를 크게 벗어나지 않도록 주의합니다.
|
||||
- **잠금(Lock)의 물리적 강제**:
|
||||
- 단순히 `data.locked` 필드만 변경하는 것이 아니라, `cell.setProp`을 통해 `movable`, `deletable`, `rotatable` 속성을 동기화해야 합니다.
|
||||
- `static/js/modules/graph/config.js`의 `interacting` 블록은 반드시 함수형으로 작성되어 각 셀의 `movable` 속성을 실시간으로 체크해야 합니다.
|
||||
|
||||
## 10. 정밀 공간 쿼리 (Spatial Query Integrity)
|
||||
|
||||
- **규칙**:
|
||||
- 특정 좌표(`x, y`)에서 오브젝트를 검색할 때, AntV X6 v2의 실험적/변동성이 큰 API(`findModelsAtPoint` 등)에 의존하지 않습니다.
|
||||
- 대신 `graph.getCells().filter(cell => cell.getBBox().containsPoint(local))`와 같은 **수동 기하학 필터링** 방식을 유지하여 버전 업데이트에 따른 오작동을 방지합니다.
|
||||
- **좌표 변환**: 반드시 브라우저의 클라이언트 좌표를 `graph.clientToLocal(e.clientX, e.clientY)`를 통해 그래프 로컬 좌표로 먼저 변환한 후 계산에 사용해야 합니다.
|
||||
|
||||
---
|
||||
*마지막 업데이트: 2026-03-20*
|
||||
@@ -0,0 +1,86 @@
|
||||
# drawNET 프로젝트 로드맵 및 개발 가이드
|
||||
|
||||
이 문서는 drawNET 프로젝트의 개발 원칙, 완료된 마일스톤, 그리고 향후 발전 방향을 정의합니다.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 개발 원칙 (Development Principles)
|
||||
1. **하드코딩 배제:** 모든 자산과 설정은 `assets.json` 등 외부 파일을 통해 관리합니다.
|
||||
2. **로컬 최적화:** 설치와 실행이 간편해야 하며, 보안 및 폐쇄망 대응을 위해 핵심 라이브러리(AntV X6 등)를 로컬에서 관리합니다.
|
||||
3. **사용자 경험 최선:** 텍스트(DSL)와 시각적 편집(GUI)의 장점을 결합한 하이드리브 워크플로우를 지향합니다.
|
||||
4. **엔진 독립성:** 특정 엔진에 종속된 기능을 지양하되, 현재는 AntV X6의 성능을 극대화하여 구현합니다.
|
||||
|
||||
---
|
||||
|
||||
## 📅 완료된 마일스톤 (Milestones)
|
||||
|
||||
### 1. 전용 그래프 엔진 마이그레이션 (AntV X6)
|
||||
- **엔진 전환:** Cytoscape.js에서 AntV X6로 전체 시스템 이관 완료.
|
||||
- **직교 라우팅:** Manhattan 알고리즘을 통한 완벽한 90도 굴곡 선 지원.
|
||||
- **쉐이프 커스터마이징:** 이미지 및 메타데이터를 포함한 전용 노드 타입 등록.
|
||||
- **로컬화:** 외부 CDN 차단 및 ORB 이슈 해결을 위한 라이브러리 자산 로컬화.
|
||||
- **방향성 고정 라우팅 (Top/Bottom/Left/Right):** 앵커 선택에 따라 해당 방향으로 선이 가장 먼저 뻗어나오도록 강제하는 지능형 Manhattan 라우팅 엔진 구현 완료.
|
||||
|
||||
### 2. 하이브리드 속성 및 인터랙션
|
||||
- **속성 사이드바:** X6 셀 데이터와 실시간 연동되는 속성 편집 패널.
|
||||
- **컨텍스트 메뉴:** 우클릭을 통한 퀵 액션 및 스타일 제어.
|
||||
- **지능형 그룹화:** 컨테이너 드롭 및 노드 드래그 포함을 통한 계층 구조 자동 생성.
|
||||
|
||||
### 3. 영속성 및 환경 관리
|
||||
- **Leaf-Only 복구:** 계층 구조의 좌표 뒤틀림을 방지하는 X6 최적화 좌표 복구 엔진.
|
||||
- **전용 포맷(.dnet):** 메타데이터 헤더를 포함한 X6 JSON 구조 표준화.
|
||||
- **캔버스 환경 저장:** 그리드 스타일, 스냅 설정, 줌 레벨 등 시큐리티 가시성 환경 보존.
|
||||
|
||||
### 4. 인벤토리 및 정밀 배치 시스템
|
||||
- **Inventory UI:** 타입별 수량 집계 및 드래그 가능한 플로팅 패널 구현.
|
||||
- **데이터 기반 단축키 엔진:** `hotkeys.json` 설정을 통한 유연한 키 바인딩 시스템 도입.
|
||||
- **키보드 네비게이션:** 방향키 및 Shift 조합을 통한 그리드 단위 오브젝트 정밀 이동 기능 추가.
|
||||
- **파서 고도화:** 커스텀 포트 이름 및 그룹 멤버십 안정성 강화.
|
||||
|
||||
### 5. 오브젝트 상세 커스터마이징 및 단축키 전략 (New)
|
||||
- **라벨 속성 강화**: 라벨 색상(Color) 및 위치(Top/Bottom/Left/Right/Center)를 속성창에서 즉시 변경 가능한 UI 구현.
|
||||
- **단축키 계통 확립**: `Alt`(패널), `Shift`(액션), `Ctrl`(시스템)로 구분된 전문적인 단축키 설계 원칙 문서화 및 `Alt + 1` 적용.
|
||||
- **실행 취소/다시 실행**: `Ctrl + Z/Y`를 통한 무제한 작업 실행 취소 기능 활성화.
|
||||
|
||||
### 7. Premium UX & 정밀 제어 시스템 (New)
|
||||
- **오브젝트 적층(Z-Index)**: `[` / `]` 단축키를 통한 가역적 레이어링 시스템 구축 완료.
|
||||
- **물리적 잠금(Locking)**: 인터랙션 제한 및 시각적 피드백(Red Boundary)을 결합한 강력한 객체 보호 기능 구현.
|
||||
- **재귀적 선택(Recursive Select)**: 겹친 오브젝트를 정밀하게 골라내는 Surgical Picker(Photoshop Style) 시스템 완성.
|
||||
- **레이어 패널 고도화**: 비활성 레이어 투명도 조절, 레이어 리네임 및 영속성 동기화 완료.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 향후 개발 우선순위 (Future Priorities)
|
||||
|
||||
### 💡 Current Focus: Interaction & Topology Intelligence
|
||||
현재 기본적인 정밀 제어 도구가 완성됨에 따라, **망(Network)의 논리적 연속성**을 보장하는 지능형 인터랙션으로 전환 중입니다.
|
||||
|
||||
### 🎯 주요 목표
|
||||
- [x] **정밀 고정 및 적층:** 오브젝트 잠금 및 Z-Index 제어 완결.
|
||||
- [x] **정밀 선택 도구:** 복잡한 도면에서의 surgical selection 지원.
|
||||
- [x] **고스트 타겟팅 (Ghost Targeting):** 레이어 간 관통 연결 시 하부 레이어 노드에 대한 자석 효과 및 안내선 제공.
|
||||
- [x] **레이어 스패닝 (Spanning):** 여러 레이어에 걸쳐 있는 거대 오브젝트(Backbone 등)의 통합 관리 로직.
|
||||
|
||||
|
||||
### Phase 2: 고급 시각화 및 UX (중기)
|
||||
- [x] **선 교차(Cross) 점프:** 선이 겹칠 때 시각적으로 건너뛰는(Jump/Hop) 브릿지 효과.
|
||||
- [x] **실행 취소/다시 실행:** X6 History 플러그인을 활용한 무제한 Undo/Redo.
|
||||
|
||||
|
||||
### Phase 5: PM 자산 관리 및 인벤토리 (Inventory & Asset Management) [x]
|
||||
- [x] **표준 속성 확장**: 제조사, 모델명, IP, 자산번호, 상태 등 PM용 표준 데이터 스키마 적용.
|
||||
- [x] **지능형 검색 및 이동 (Search & Zoom)**: IP, 자산번호, 모델명 기반 검색 및 해당 노드로 즉시 포커싱.
|
||||
- [x] **속성 복사/붙여넣기 (Format Painter)**: `Ctrl+Shift+C/V`를 통한 스타일 및 관리 데이터 일괄 복제.
|
||||
- [x] **BOM 인벤토리 내보내기 (Excel Export)**: 전체 자산 리스트를 엑셀/CSV로 자동 생성 및 다운로드.
|
||||
- [x] **드래그 복제 (Ctrl+Shift+Drag)**: 마우스 드래그를 이용한 즉시 오브젝트 복제 구현.
|
||||
|
||||
---
|
||||
|
||||
### Phase 7: 멀티 레이어 아키텍처 및 논리적 계층화 (Multi-Layer & Logical Stratification)
|
||||
- [x] **평면 중첩(Flat Overlay) 시스템**: 여러 망(내부, 외부, 폐쇄망)을 독립된 레이어로 분리하고 투명도 기반으로 겹쳐 보기 기능 구현.
|
||||
- [x] **레이어 관통 스냅(Ghost Snapping)**: 다른 레이어의 노드(방화벽 등)에 자석 효과를 적용하여 레이어 간 연결 편의성 극대화.
|
||||
- [ ] **입체 레이어 뷰 (3D Exploded View) [취소/폐기]**: 프레젠테이션용 아코디언 익스플로드 뷰 실험 결과 가독성 저하로 폐기 결정.
|
||||
- [x] **디자인 가이드라인 수립**: [Multi-Layer 설계 지침](file:///c:/project/drawNET/docs/design_multilayer.md) 기반의 데이터 정합성 엔진 개발.
|
||||
|
||||
### Phase 4: 인프라 연동 및 자동화 (Integration & Automation)
|
||||
- [x] **Export 다변화**: SVG, PDF, 고해상도 PNG(투명 배경) 및 전문적인 PPTX 리포트 자동 생성 기능.
|
||||
@@ -0,0 +1,46 @@
|
||||
## 1. 데이터 규격 정의 (package.json)
|
||||
- [x] 패키지 기본 정보(ID, Vendor, Version) 필드 정의 완료
|
||||
- [x] 에셋 개별 정보(ID, Label, Category, Paths) 필드 정의 완료
|
||||
- [x] 전/후면(Front/Back) 뷰 확장을 고려한 데이터 구조 검토 완료
|
||||
|
||||
### [최종 확정 규격]
|
||||
```json
|
||||
{
|
||||
"id": "cisco_nexus_9k",
|
||||
"name": "Cisco Nexus 9000 Series",
|
||||
"vendor": "Cisco",
|
||||
"version": "1.0.0",
|
||||
"description": "Standard Nexus switches for Data Center",
|
||||
"assets": [
|
||||
{
|
||||
"id": "n9k_93180yc",
|
||||
"label": "Nexus 93180YC-EX",
|
||||
"category": "Switch",
|
||||
"views": {
|
||||
"icon": "icon.svg",
|
||||
"front": "front.svg",
|
||||
"back": "back.svg"
|
||||
},
|
||||
"specs": {
|
||||
"u_height": 1,
|
||||
"is_rack_unit": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 2. 설계영역(Draw) 패키지 로더 구현
|
||||
- [x] `assets.js`가 단일 경로가 아닌 `packs/` 내의 모든 하위 패키지를 스캔하도록 수정
|
||||
- [x] 사이드바 라이브러리 영역에 패키지별 섹션(또는 그룹) UI 생성
|
||||
- [x] 개별 에셋을 드래그하여 캔버스 드롭 시 정상 렌더링 확인
|
||||
|
||||
## 3. 샘플 패키지 연동 테스트
|
||||
- [x] `static/assets/packs/sample_cisco/` 수동 생성 및 테스트 데이터 수납
|
||||
- [x] 설계영역 재로드 시 샘플 패키지가 라이브러리에 자동 노출되는지 확인
|
||||
- [x] 언어(ko/en) 파일에 패키지 관련 신규 키 추가 여부 확인
|
||||
|
||||
## 4. 안정성 및 예외 처리
|
||||
- [x] 잘못된 형식의 `package.json` 로드 시 에러 핸들링 및 사용자 알림
|
||||
- [x] 에셋 파일 경로 누락 시 기본(Default) 아이콘 표시 로직 확인
|
||||
- [x] 기존 라이브러리(Fixed Objects 등)와의 UI 충돌 여부 확인
|
||||
@@ -0,0 +1,26 @@
|
||||
# Phase 2 체크리스트: 스튜디오 기반 구축 (Base Setup)
|
||||
|
||||
## 1. 전용 페이지 및 라우팅 설정
|
||||
- [x] `routes/main_routes.py`에 `/studio` 엔드포인트 추가 완료
|
||||
- [x] `templates/studio.html` 기본 구조(HTML5, 필요한 CSS/JS 로드) 생성 완료
|
||||
- [x] 설계영역(Draw)에서 스튜디오로 이동할 수 있는 메뉴/버튼 배치 (예: 상단 툴바)
|
||||
|
||||
## 2. 스튜디오 전용 UI/UX 레이아웃 (3-Panel)
|
||||
- [x] **Source Panel (좌측)**: 업로드된 파일 목록 및 Drag & Drop 영역 구현
|
||||
- [x] **Workspace (중앙)**: 에셋들을 바둑판식(Grid)으로 보여주는 프리뷰 영역 구현
|
||||
- [x] **Property Panel (우측)**: 선택된 에셋의 상세 정보(ID, Label) 입력 영역 스켈레톤 생성
|
||||
- [x] 스튜디오 전용 다크 테마 및 전문 도구 스타일 CSS 적용
|
||||
|
||||
## 3. Ingestion(이미지 수집) 엔진 구현
|
||||
- [x] 브라우저 폴더 선택(`webkitdirectory`) 기능 구현 및 파일 필터링(.svg, .png, .jpg)
|
||||
- [x] 개별 파일 드래그 앤 드롭(Drag & Drop) 업로드 지원
|
||||
- [x] 선택된 이미지들을 중앙 Workspace 그리드에 즉시 렌더링 (Memory URL 사용)
|
||||
|
||||
## 4. 선택 및 상태 서비스 (State Management)
|
||||
- [x] 그리드 내 이미지 개별/다중 선택(Ctrl/Shift 클릭) 로직 구현
|
||||
- [x] 선택된 항목 수 및 파일 정보(해상도, 크기) 하단 상태바 표시
|
||||
- [x] 업로드된 소스 목록 관리 서비스(`studio_state.js`) 초기화
|
||||
|
||||
## 5. 설계영역과의 분리 검증
|
||||
- [x] `/studio` 페이지 로딩 시 설계영역의 X6 인스턴스가 생성되지 않아 리소스가 낭비되지 않는지 확인
|
||||
- [x] 뒤로가기 또는 '설계영역으로 돌아가기' 버튼 정상 작동 확인
|
||||
@@ -0,0 +1,19 @@
|
||||
## 1. PNG to SVG 변환 엔진 (Transformation)
|
||||
- [x] 브라우저 기반 벡터라이징 라이브러리(Potrace) 통합 완료
|
||||
- [x] 소스 리스트의 PNG 파일을 읽어 실제 벡터 `<path>` 데이터로 추출하는 Processor 모듈 구현
|
||||
- [x] 성능 최적화: 대량의 파일 변환 시 순차 처리 로직 구현
|
||||
|
||||
## 2. 변환 품질 검수 및 비교 UI (Review)
|
||||
- [x] **Side-by-Side 뷰**: 원본 PNG와 변환된 SVG를 동일 크기로 나란히 배치하여 시각적 비교 지원
|
||||
- [x] **가변 옵션 조절**: 기본 임계값 적용 및 벡터화 결과 즉시 반영 로직 구현
|
||||
- [x] **최종 채택 토글**: 개별 에셋별로 [PNG 유지] 또는 [SVG 채택] 중 하나를 명시적으로 선택하는 기능
|
||||
|
||||
## 3. 다중 선택 및 벌크 속성 편집 (Bulk Edit)
|
||||
- [x] 그리드 내 여러 에셋 선택 시 우측 패널에 '일괄 편집' 모드 활성화
|
||||
- [x] **공통 속성 적용**: 선택된 모든 에셋에 대해 카테고리 일괄 변경 기능 구현
|
||||
- [x] **명명 규칙(Naming Rule)**: 파일명을 기반으로 ID 및 라벨 자동 생성 로직 반영
|
||||
|
||||
## 4. 메타데이터 및 상태 관리
|
||||
- [x] 가공 중인 에셋들의 실시간 세션 상태 유지 (`studio/state.js`)
|
||||
- [x] 유효성 검사: 필수 값(Label) 실시간 업데이트 반영
|
||||
- [x] 작업 중인 이미지의 프리뷰 및 선택 상태 시각화
|
||||
@@ -0,0 +1,23 @@
|
||||
## 1. 패키지 메타데이터 입력 UI
|
||||
- [x] 상단 툴바에 패키지 ID(영문/숫자/언더바), 이름, 버전 입력 필드 추가
|
||||
- [x] 패키지 전용 벤더(Vendor) 및 아이콘 지정 기능 구현
|
||||
- [x] 필수 값 입력 여부 유효성 검사 로직 추가
|
||||
|
||||
## 2. 서버 측 저장 API (Backend)
|
||||
- [x] `api_routes.py`에 `/api/studio/save-pack` POST 엔드포인트 구현
|
||||
- [x] 서버의 `static/assets/packs/[pack_id]/` 디렉토리를 자동 생성하고 이미지 파일 저장
|
||||
- [x] 가공된 에셋 정보를 바탕으로 최종 `package.json` 파일 생성 및 저장
|
||||
|
||||
## 3. Build & Publish 워크플로우
|
||||
- [x] `[Build Package]` 버튼 클릭 시 가공된 모든 에셋(SVG/PNG 선택본)을 수집하여 서버로 전송
|
||||
- [x] 진행 상태 표시(Progress Bar) 및 성공/실패 알림 모달 구현
|
||||
- [x] 성공 시 생성된 패키지 요약 정보(에셋 개수, 용량 등) 표시
|
||||
|
||||
## 4. 설계영역(Designer) 즉시 반영
|
||||
- [x] 패키지 저장 후 설계영역으로 이동 시 신규 패키지가 라이브러리에 자동 로드되는지 확인
|
||||
- [x] 라이브러리 내 카테고리가 `package.json`의 정의대로 올바르게 그룹화되는지 검증
|
||||
- [x] 새로 추가된 에셋을 캔버스에 드랍했을 때 이미지 경로가 정상적으로 해석되는지 최종 확인
|
||||
|
||||
## 5. 데이터 모델 확장 및 검증 (Future Proof)
|
||||
- [x] 향후 Rack 배치를 고려한 `Front/Back View` 정보가 `package.json`에 포함될 수 있는 구조인지 재확인
|
||||
- [x] 패키지 삭제 또는 덮어쓰기(Overwrite) 시의 안정성 확보
|
||||
@@ -0,0 +1,33 @@
|
||||
# Object Studio 테스트 시나리오 (Verification)
|
||||
|
||||
본 시나리오는 스튜디오의 핵심 가공 기능(Phase 3)을 검증하기 위한 절차입니다.
|
||||
|
||||
## 시나리오: 멀티 벤더 패키지 제작 및 설계영역 연동
|
||||
|
||||
### 1. 이미지 준비 및 수집 (Ingestion)
|
||||
* **파일 로드**: 로컬의 PNG 아이콘 파일 3~5개를 준비하여 워크스페이스로 드래그 앤 드롭함.
|
||||
* **검증**: 좌측 소스 리스트에 파일명이 나타나고, 중앙 그리드에 실시간 프리뷰가 렌더링되는지 확인.
|
||||
|
||||
### 2. 단일 에셋 정밀 가공 (Processing)
|
||||
* **변환 실행**: 그리드에서 하나의 PNG 파일을 선택하고 우측 패널의 `[Convert to SVG]` 버튼을 누름.
|
||||
* **비교 검수**:
|
||||
* 화면에 나타나는 [Original PNG]와 [Vectorized SVG]의 품질을 비교.
|
||||
* 임계값(Threshold) 바를 조절하여 외곽선이 깔끔하게 추출되는지 확인.
|
||||
* `[채택(SVG)]` 버튼을 눌러 결과가 반영되는지 확인.
|
||||
* **속성 입력**: 에셋의 표시 이름을 'Core Router'로 변경하고 카테고리를 'Network'로 지정.
|
||||
|
||||
### 3. 벌크 속성 편집 (Bulk Edit)
|
||||
* **다중 선택**: 나머지 3개의 이미지를 `Ctrl+Click`으로 선택.
|
||||
* **일괄 적용**: 우측 패널에서 제조사(Vendor)를 'Cisco'로 일괄 입력하고 `[Apply]` 클릭.
|
||||
* **검증**: 각 에셋을 개별 클릭했을 때 제조사 정보가 모두 'Cisco'로 동기화되었는지 확인.
|
||||
|
||||
### 4. 패키징 및 최종 발행 (Packaging)
|
||||
* **정보 입력**: 상단 툴바의 패키지 명칭을 'My_Cisco_Pack'으로 입력.
|
||||
* **발행**: `[Build Package]` 버튼을 눌러 서버에 에셋과 `package.json`이 저장되는지 확인.
|
||||
* **연동 확인**: 설계영역(Draw)으로 돌아갔을 때 좌측 라이브러리에 'My_Cisco_Pack' 섹션이 새로 나타나는지 확인.
|
||||
|
||||
---
|
||||
|
||||
## 성공/실패 판정 기준
|
||||
* **Success**: 모든 에셋이 `package.json`에 정의된 대로 라이브러리에 그룹화되어 나타남.
|
||||
* **Failure**: 변환 중 브라우저 멈춤, 데이터 누락, 또는 설계영역에서 아이콘이 깨짐.
|
||||
@@ -0,0 +1,118 @@
|
||||
# DrawNET Object Studio 설계서 (Phase 1)
|
||||
|
||||
**Object Studio**는 단순한 이미지 업로드를 넘어, 인프라 설계에 필요한 전문적인 **에셋 관리 시스템(Asset Management System)**을 지향합니다.
|
||||
|
||||
## 1. 개요
|
||||
* **목적**: 복잡한 인프라 소자(Cisco, Fortinet 등)를 패키지 단위로 관리하고, 전/후면 뷰 및 메타데이터를 정밀하게 가공하여 도면 제작 효율을 극대화함.
|
||||
* **접근 주소**: `/studio` (독립형 페이지)
|
||||
|
||||
---
|
||||
|
||||
## 2. 주요 워크플로우
|
||||
|
||||
### [Ingestion: 소스 로드]
|
||||
1. **벌크 로드**: 사용자가 로컬 폴더를 지정(`webkitdirectory`)하거나 여러 파일을 드래그 앤 드롭하여 소스 목록에 추가.
|
||||
2. **프리뷰 그리드**: 업로드된 이미지들을 썸네일 형태로 시각화하여 확인.
|
||||
|
||||
### [Processing: 에셋 가공 및 속성 정의]
|
||||
1. **개별/벌크 편집**:
|
||||
* 선택된 오브젝트의 이름 변경, 속성 지정(아이콘 타입, 유형 등), 카테고리 매칭.
|
||||
* 다중 선택 시 '제조사(Vendor)', '모델 시리즈', '환경' 등 공통 정보를 일괄 적용.
|
||||
2. **PNG to SVG 하이브리드 변환**:
|
||||
* PNG 소스를 벡터화(SVG Trace)하여 변환 결과 프리뷰 제공.
|
||||
* 사용자가 **[원본 PNG 유지]** 또는 **[벡터 SVG 채택]** 중 선택. (SVG 채택 시 고해상도 무한 확대 및 색상 커스터마이징 가능)
|
||||
|
||||
### [Packaging: 내보내기 및 등록]
|
||||
1. **패키지(Pack) 생성**: 가공 완료된 에셋들을 하나의 논리적 팩(예: `Cisco_Nexus_9000_Pack`)으로 묶음.
|
||||
2. **뷰 매칭 (Front/Back)**: 랙 배치를 고려하여 동일 모델의 전면 아이콘과 후면 아이콘을 하나의 에셋 데이터로 바인딩.
|
||||
3. **최종 발행**: 서버 저장소(`static/assets/packs/`)에 저장하고 메인 에디터의 에셋 라이브러리에 패키지 정보 업데이트.
|
||||
|
||||
---
|
||||
|
||||
## 3. 화면 UI/UX 설계 (안)
|
||||
|
||||
### 레이아웃 구조
|
||||
* **좌측 (Source Panel)**: 업로드된 원본 파일 목록 및 Drag & Drop 영역.
|
||||
* **중앙 (Workspace)**: 바둑판식(Grid) 에셋 프리뷰 영역 및 선택 도구.
|
||||
* **우측 (Property Panel)**: 선택된 에셋(들)의 속성 입력창 (명칭, 제조사, 카테고리 등) 및 SVG 변환 비교 뷰.
|
||||
|
||||
### 주요 기능 버튼
|
||||
* `[Load Folder]`: 폴더 단위 소스 로드.
|
||||
* `[Batch Edit]`: 선택 항목 일괄 속성 적용.
|
||||
* `[Vectorize]`: 벡터 변환 및 품질 검수 모드 진입.
|
||||
* `[Build Pack]`: 최종 패키지 추출 및 서버 등록.
|
||||
|
||||
---
|
||||
|
||||
## 4. 데이터 모델 확장 (Draft)
|
||||
|
||||
```json
|
||||
{
|
||||
"pack_id": "cisco_sw_pack",
|
||||
"vendor": "Cisco",
|
||||
"version": "1.0.0",
|
||||
"assets": [
|
||||
{
|
||||
"id": "c9300L_24T",
|
||||
"label": "Catalyst 9300L 24T",
|
||||
"category": "Switch",
|
||||
"views": {
|
||||
"front": "packs/cisco/9300l_f.svg",
|
||||
"back": "packs/cisco/9300l_b.svg"
|
||||
},
|
||||
"specs": {
|
||||
"u_height": 1,
|
||||
"depth": "350mm"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 구현 단계별 로드맵 (Roadmap)
|
||||
|
||||
안정적인 연동과 품질 관리를 위해 다음 순서로 개발을 진행합니다.
|
||||
|
||||
### Phase 1: 설계영역 수용성 및 인프라 구축 (Infrastructure)
|
||||
* **목표**: 스튜디오에서 만든 패키지를 설계영역에서 즉시 읽어 들일 수 있는 기반 마련.
|
||||
* **주요 작업**:
|
||||
* `package.json` 데이터 규격 확정.
|
||||
* 설계영역 에셋 라이브러리의 '멀티 패키지 로더' 구현.
|
||||
* 샘플 패키지(`Cisco_Sample`)를 통한 연동 테스트.
|
||||
* **체크리스트**: `/docs/studio/phase1_checklist.md`
|
||||
|
||||
### Phase 2: 스튜디오 기반 구축 (Base Setup)
|
||||
* **목표**: 스튜디오 독립 페이지 및 이미지 Ingestion 엔진 구현.
|
||||
* **주요 작업**:
|
||||
* `/studio` 라운팅 및 전용 HTML/CSS 레이아웃 생성.
|
||||
* 폴더 선택 및 드래그 앤 드롭 업로드 구현.
|
||||
* 에셋 프리뷰 그리드 UI 최적화.
|
||||
* **체크리스트**: `/docs/studio/phase2_checklist.md`
|
||||
|
||||
### Phase 3: 스튜디오 핵심 가공 기능 (Core Processing)
|
||||
* **목표**: PNG to SVG 변환 및 벌크 속성 편집 기능 구현.
|
||||
* **주요 작업**:
|
||||
* 벡터라이징(Trace) 엔진 탑재 및 변환 전/후 비교 UI.
|
||||
* 다중 선택 기반 일괄 속성(Vendor, Category 등) 편집기.
|
||||
* **체크리스트**: `/docs/studio/phase3_checklist.md`
|
||||
|
||||
* **체크리스트**: `/docs/studio/phase4_checklist.md` [v] **Completed**
|
||||
|
||||
---
|
||||
|
||||
## 7. 최종 구현 사양 (Final Implementation)
|
||||
|
||||
### 아키텍처 (Architecture)
|
||||
- **프론트엔드 모듈화**: 코드 복잡도를 제어하기 위해 관심사별로 모듈을 분리함.
|
||||
- `index.js`: 엔트리 포인트 및 이벤트 바인딩.
|
||||
- `renderer.js`: 모든 DOM 생성 및 UI 업데이트 담당.
|
||||
- `actions.js`: 빌드, 변환, 벌크 수정 등 비즈니스 로직.
|
||||
- `state.js` / `ingester.js` / `processor.js`: 상태 관리 및 데이터 처리 전담.
|
||||
- **백엔드**: Flask (`api_routes.py`) 기반의 멀티 패키지 스캔 및 저장 엔진 구축.
|
||||
|
||||
### 주요 기술 스택
|
||||
- **Potrace-js**: 클라이언트 사이드 고속 벡터화.
|
||||
- **Flask FormData**: 대용량 이미지 및 메타데이터 일괄 전송.
|
||||
- **X6 Data Integration**: `package.json` 규격을 통한 설계 영역과의 심리스한 연동.
|
||||
@@ -0,0 +1,43 @@
|
||||
# drawNET Development Task List (Updated 2026-03-19)
|
||||
|
||||
## 📋 현재 상태 요약
|
||||
- **완료:** AntV X6 엔진 마이그레이션, DSL 동기화 기초, 정밀 배치 도구, UX 고도화.
|
||||
- **핵심 성과:** **Object Studio(Phase 1-4) 구현 완료**. 이제 독립된 환경에서 자산을 제작하고 패키징하여 도면에 즉시 반영 가능.
|
||||
|
||||
## ✅ 완료된 작업 (Object Studio Milestone)
|
||||
|
||||
### Phase 1: 자산 인프라 및 멀티 로더
|
||||
- [x] `package.json` 데이터 규격 정의 (`vendor`, `pack_id`, `views` 등)
|
||||
- [x] 백엔드 멀티 패키지 스캔 엔진 (`/assets`) 고도화
|
||||
- [x] 설계영역(Designer) 사이드바의 벤더별 패키지 자동 로딩 구현
|
||||
|
||||
### Phase 2: 스튜디오 기반 구축
|
||||
- [x] 독립된 제작 페이지 (`/studio`) 라우팅 및 전용 레이아웃 (3-Panel)
|
||||
- [x] 폴더/파일 단위 대량 이미지 인제스천(Ingestion) 기능
|
||||
- [x] 작업 영역(Grid) 및 실시간 필터링 UI
|
||||
|
||||
### Phase 3: 핵심 가공 및 벡터 변환
|
||||
- [x] Potrace-js 통합을 통한 PNG -> SVG 실시간 벡터라이징
|
||||
- [x] **Side-by-Side 리뷰 UI**: 원본과 변환본 비교 및 최종 포맷 채택 기능
|
||||
- [x] 벌크(Bulk) 속성 편집(Category 일괄 적용 등) 기능
|
||||
|
||||
### Phase 4: 패키징 및 최종 연동
|
||||
- [x] **/api/studio/save-pack**: 가공된 에셋 및 `package.json` 서버 저장 API
|
||||
- [x] 버튼 하나로 빌드부터 설계영역 반영까지 워크플로우 자동화
|
||||
- [x] **코드 모듈화(Refactoring)**: `Renderer`, `Actions` 모듈 분리로 코드 품질 확보
|
||||
- [x] **PPTX 내보내기 (Simple Test)**: PptxGenJS 기반 도면 슬라이드 추출 기능 구현 (설계영역)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 향후 개발 우선순위
|
||||
|
||||
### 1단계: 엔터프라이즈 기능 확장
|
||||
- [ ] **Sub-Graph (Nesting)**: 그룹 내부 진입 및 상세 설계 드릴다운 기능
|
||||
- [ ] **Rack View 가공**: 스튜디오에서 장비의 U-Height 정보를 기반으로 한 랙 실장 뷰 연동
|
||||
|
||||
### 2단계: 분석 및 자동화
|
||||
- [ ] **Live Status Monitoring**: 실시간 Ping 체크를 통한 장애 가시화
|
||||
- [ ] **Compliance Audit**: 설계 보안 가이드 준수 여부 자동 분석
|
||||
|
||||
### 3단계: AI 어시스턴트
|
||||
- [ ] LLM 연동을 통한 자연어 기반 토폴로지 자동 생성 및 최적화 제안
|
||||
Reference in New Issue
Block a user