1. 개요 (Overview)
EK MindFlow는 2D 무한 캔버스 상에서 노드(Idea Node) 간의 연결관계를 시각적으로 구성하는 사고 정리 도구입니다.
무한 캔버스
10,000 x 10,000 픽셀의 광활한 영역에서 마우스 드래그와 확대/축소로 공간 제약 없이 아이디어를 확장하세요.
실시간 자동 저장
작성 중인 모든 마인드맵 데이터는 브라우저 LocalStorage에 0.5초마다 실시간으로 안전하게 자동 저장됩니다.
다양한 시각적 노드
의사결정, 목표, 주요 강조점, 메모, 입출력 등 6가지 스타일 옵션을 통해 직관적인 도해 작성이 가능합니다.
2. 캔버스 조작법 (Canvas Controls)
캔버스 자유 이동 및 비율 조절을 통해 원하는 영역을 쉽게 탐색하고 조작할 수 있습니다.
| 조작 항목 | 입력 방법 | 설명 |
|---|---|---|
| 캔버스 이동 (Pan) | 마우스 드래그 (배경 클릭 후 이동) | 캔버스 빈 공간을 클릭한 상태로 마우스를 움직여 화면 위치를 자유롭게 이동합니다. |
| 확대 / 축소 (Zoom) | Ctrl + 마우스 휠 Scroll | 최대 0.2배부터 3.0배까지 캔버스를 실시간으로 확대 또는 축소합니다. |
| 노드 위치 이동 | 노드 클릭 & 드래그 | 개별 노드를 마우스로 잡고 원하는 위치로 드래그하여 배치할 수 있습니다. |
화면 이동 팁
노드가 입력 창에 있거나 마우스 포인터가 노드 위에 있을 때는 노드가 이동됩니다. 빈 그리드 배경을 클릭하여 드래그하면 전체 화면이 이동합니다.
3. 노드 추가 및 편집 (Node Editing)
노드의 추가, 내용 작성, 위치 이동 및 삭제 조작법입니다.
텍스트 직접 편집 (Content Editing)
노드 중앙의 텍스트 영역을 클릭하면 즉시 입력 상태로 전환됩니다. 원하는 아이디어나 타이틀을 입력하세요.
자식 노드 추가 (Add Child Node)
임의의 노드 위에 마우스를 올리면 오른쪽 상단에 + 버튼이 나타납니다. 이를 클릭하면 하위 노드가 생성되고 커서가 자동으로 포커스됩니다.
노드 삭제 (Delete Branch)
마우스 호버 시 상단 오른쪽에 나타나는 × 버튼을 클릭하면 해당 노드와 이에 연결된 모든 하위 가지(Child Nodes)가 일괄 삭제됩니다.
4. 노드 유형 & 스타일 (Node Types & Styles)
노드 위에 마우스를 올려놓으면 하단에 스타일 선택 팝오버 메뉴가 표시됩니다. 클릭 한 번으로 노드의 시각적 의미를 다채롭게 지정하세요.
Default Idea
깔끔한 흰색 사각형 라운드 박스로 일반적인 아이디어나 개념을 표현할 때 사용합니다.
Decision (의사결정)
45도 회전된 다이아몬드 형태로, 조건 분기나 선택지, 의사결정 단계를 나타낼 때 유용합니다.
Goal / Result
연초록색 배경과 둥근 캡슐 형태로 프로젝트의 목표, 달성 과제, 최종 결과를 명시합니다.
Critical Point
붉은색 강조 테두리와 진한 텍스트로 핵심 이슈나 주의사항, 높은 우선순위 항목을 표시합니다.
Sticky Note
노란색 스티키 메모지 스타일과 이탈릭체 폰트로 부연 설명이나 주석, 아이디어 메모를 기재합니다.
Data I/O
연보라색 평행사변형 형태로 데이터의 입력, 출력, 시스템 연동 지점을 표현합니다.
5. 파일 관리 & 저장 (File Storage & JSON)
작성한 마인드맵을 안전하게 저장하고 나중에 다시 불러올 수 있는 파일 관리 기능을 제공합니다.
Open File (JSON)
상단 툴바의 Open File (JSON) 버튼을 클릭하여 컴퓨터에 보관 중인 마인드맵 `.json` 파일을 열어 이전에 작업하던 마인드맵을 복원합니다.
Save File (JSON)
상단 툴바의 Save File (JSON) 버튼을 누르면 현재 마인드맵의 모든 구조, 배치 위치, 노드 스타일 데이터가 타임스탬프 파일명으로 저장됩니다.
자동 저장 (Auto-Save) 안내
별도로 저장 버튼을 누르지 않아도 브라우저에 내용이 자동 저장되지만, 브라우저 쿠키/캐시 삭제 시 데이터가 소실될 수 있으므로 중요한 작업은 Save File (JSON)을 통해 다운로드해 두는 것을 권장합니다.
6. 이미지 내보내기 (Export JPG)
작성된 마인드맵 전체 구도를 자동으로 인식하여 고화질 JPG 이미지로 다운로드할 수 있습니다.
Export JPG 버튼 클릭
상단 우측의 보라색 Export JPG 버튼을 클릭합니다.
영역 자동 계산 & 렌더링
현재 캔버스에 배치된 모든 노드의 바운딩 박스(최소/최대 좌표)를 자동으로 계산하고 여백(Padding)을 포함하여 렌더링을 진행합니다.
고화질 JPG 파일 저장
`mindmap-[timestamp].jpg` 파일로 고해상도 이미지가 자동 다운로드되어 보고서나 발표 프레젠테이션에 즉시 삽입할 수 있습니다.
7. 초기화 & 실전 활용 팁 (Reset & Tips)
Reset (초기화)
툴바의 빨간색 Reset 버튼을 클릭하면 확인 창이 표시되며, 승인 시 모든 노드가 초기화되고 중앙의 'Main Idea' 기본 상태로 되돌아갑니다.
효율적인 작성 팁
- 중앙 Root 노드에서 시작하여 주제별 1차 가지를 먼저 뻗어나가세요.
- 의사결정(Decision) 및 목표(Goal) 스타일을 조합하여 로드맵을 작성해 보세요.
- 작업 완료 후 JSON 파일 저장과 JPG 내보내기를 함께 실행하면 완전 보관이 가능합니다.