Initial commit: drawNET Alpha v1.0 - Professional Topology Designer with Full i18n and Performance Optimizations

This commit is contained in:
leeyj
2026-03-22 22:37:24 +09:00
commit 5cea93e317
192 changed files with 14449 additions and 0 deletions
+79
View File
@@ -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 계층화, 데이터 자가치유 로직)