Mindmap 보기 상세

Mindmap은 현재 Markdown 문서의 H1~H6 heading을 공간적인 tree로 투영한다. 별도 mindmap 파일이나 숨은 node 데이터베이스가 원본이 아니다. node의 이름·부모·순서를 바꾸면 지원되는 범위의 Markdown heading과 section이 바뀌고, zoom·검색·lens·group·relation처럼 보는 방법은 원문과 분리된다.

이 장은 어떤 Markdown이 node가 되는지부터 구조 편집, 관점 overlay, 출력과 게시 경계까지 설명한다.

1. 가장 빠른 시작

1. Mindmap Lab의 01_product-strategy-map.md를 내려받거나 Binder에 복사한다.
2. Source에서 H1~H4 heading과 각 heading 아래의 본문을 확인한다.
3. 작성 영역의 보기 선택기에서 Mindmap을 선택한다.
4. /를 누르고 출시 준비를 검색한 뒤 일치 node를 선택한다.
5. 튜토리얼 subtree를 제품 경험의 자식 위치로 드래그한다.
6. Source로 돌아와 heading range와 level이 함께 이동했는지 확인한다.

영상은 Source → Mindmap 전환, node 선택과 검색, branch focus, 실제 subtree drag/drop, Source 재확인을 한 흐름으로 보여 준다.

2. 원본 권위와 상태 경계

node가 화면에서 옮겨진 것만으로 편집 성공이 아니다. Markdown의 heading subtree가 새 부모 아래로 이동하고 저장되어야 한다. 반대로 lens를 적용해 node가 숨거나 group 색이 보이지 않아도 원문 heading은 삭제되지 않는다.

3. heading이 node가 되는 규칙

H1부터 H6까지가 node다. heading level은 depth, source 순서는 sibling 순서의 근거다.

# 문서는 자산이다

## 제품 경험

### 보기 경험

#### 구조 탐색

## 출시 준비

heading 사이의 paragraph, list, code fence와 다른 본문은 독립 node가 아니라 바로 앞 heading의 body context다. 정보 영역에서는 plain-text excerpt로 확인하고 Source 위치를 열 수 있다. 현재 full Markdown body renderer는 제공하지 않는다.

H1이 없거나 여러 개이면 synthetic root를 만들 수 있다. 이는 화면용 node이므로 rename, delete, indent 또는 drag 대상이 아니다. level을 건너뛴 heading도 읽을 수 있지만 예측 가능한 이동을 위해 한 단계씩 깊어지게 작성하는 편이 좋다.

4. 배치와 viewport

wheel 또는 zoom control로 확대·축소하고 빈 배경을 drag해 pan한다. 맞춤 또는 0은 map이 viewport에 들어오도록 맞춘다. 선택 node reveal은 화면 밖 node가 보일 만큼만 pan한다.

5. 선택 node와 원문 왕복

node를 클릭하면 선택된다. 선택 node를 다시 클릭하거나 double-click하거나 F2를 누르면 이름을 편집한다. Ctrl/Cmd+클릭 또는 Ctrl/Cmd+Enter는 해당 heading의 Source 위치를 연다.

정보 영역은 heading label·level·source line, child 수, body excerpt, group·relation 요약, branch focus와 Source action을 보여 준다.

6. 이름 변경과 node 추가

실제 node에서 F2, double-click 또는 이름 변경 action을 실행하면 heading marker는 유지되고 text가 바뀐다. Shift+Enter 또는 하위 주제 추가는 한 단계 깊은 heading을 만들며 H6에서는 비활성화된다. Enter 또는 형제 주제 추가는 같은 level의 새 section을 뒤에 만든다.

새 node는 기본 label로 만들어진 뒤 rename할 수 있다. 저장 실패 시 화면에만 남은 node를 성공으로 취급하지 않는다.

7. indent, outdent와 순서 변경

Tab은 선택 node를 앞선 유효 sibling의 child로 들여쓰고 Shift+Tab은 부모의 sibling으로 내어쓴다. descendant의 상대 depth도 함께 유지된다. 위·아래 이동 action은 같은 부모 아래에서 subtree source range를 이동한다. order 이동 전용 Ctrl/Alt+Arrow shortcut은 현재 제공하지 않는다.

H1보다 얕거나 H6보다 깊어지는 이동, synthetic root 변경, 유효한 부모가 없는 indent와 document-local tree 밖으로 나가는 이동은 거절된다.

8. subtree drag/drop

이동 단위는 node label 하나가 아니라 해당 heading에서 다음 같거나 더 얕은 heading 직전까지의 subtree source range다.

1. node를 pointer로 누른다.
2. before·child·after drop guide를 확인한다.
3. preview에서 descendant가 함께 움직이는지 본다.
4. 유효한 guide 위에서 놓는다.
5. Source의 heading 순서와 level을 확인한다.

자기 자신, 자신의 descendant 또는 H6를 더 깊게 만드는 대상에는 drop할 수 없다. 양방향 layout에서는 좌우 방향까지 target 점수에 반영한다.

9. 삭제와 접기

Delete 또는 삭제 action은 선택 heading과 전체 descendant subtree를 제거한다. body도 함께 사라지므로 실행 전 branch를 확인한다.

Space 또는 접기 control은 descendant 표시만 접거나 펼친다. Markdown을 삭제하지 않는다. 초기 펼침 깊이는 Binder 설정으로 저장되고 수동 override와 lens가 현재 관점을 바꿀 수 있다.

10. 검색, filter와 branch focus

/는 검색 입력으로 focus를 옮긴다. query는 heading label을 찾고, 접힌 branch의 match라면 ancestor를 context로 펼친다. filter는 match와 ancestor context, 선택 복구에 필요한 최소 구조를 남긴다.

branch focus는 선택 node를 임시 root처럼 삼는다. 같은 node에서 다시 실행하면 전체 tree로 돌아간다. 검색과 focus는 원문을 바꾸지 않는다.

11. 키보드 탐색과 편집

입력창에서 쓰는 동안 viewport shortcut은 문자 입력을 가로채지 않는다. node와 접기 control은 tree/treeitem 의미와 accessible label을 제공한다.

12. group으로 node 묶기

group은 heading 부모 관계를 바꾸지 않고 여러 node를 색상 hull로 묶는 overlay다. Shift+클릭으로 두 개 이상을 선택해 title과 color를 정한다.

member는 heading label·level·ancestor 경로·line hint를 조합한 reference로 저장된다. heading을 크게 바꾸거나 중복 label이 많아 unresolved가 되면 대상을 다시 지정한다.

13. relation으로 비계층 관계 표현하기

두 node를 선택해 방향성 relation을 만들고 title, color와 type을 정한다.

선택 node와 닿은 relation은 강조된다. label은 active·selected 또는 충분히 확대된 저밀도 화면에서 우선 표시된다. 낮은 zoom이나 edge가 많으면 비활성 edge와 label을 thinning할 수 있다. relation은 current document 안에서만 동작하며 Binder Graph나 Markdown link를 만들지 않는다.

14. lens로 같은 문서를 다르게 보기

lens는 zoom·pan, 선택·focus root, fold, 검색, 강조·표시 group, heading level과 relation type filter를 이름 붙여 저장한 overlay다.

현재 관점을 저장·업데이트·적용·삭제할 수 있다. lens는 Markdown을 바꾸지 않는다. 적용 순서는 branch focus와 fold → 검색 context → level filter → group·relation filter다.

15. 정보 영역과 Binder 설정

정보 영역은 layout, 색상 전략, 초기 펼침 깊이, title 위치·정렬·강조, node 수·visible 수·zoom, 선택 context와 SVG/PNG action을 제공한다.

설정은 .glif/config.yml 또는 .yaml에 저장된다. 고급 간격·padding·text scale·level color도 config 계약에 있지만 현재 UI는 핵심 preset을 우선 노출한다. Binder path가 없는 문서에서는 영구 저장할 수 없다.

16. SVG와 PNG snapshot

Mindmap을 SVG 또는 PNG로 복사·저장할 수 있다. snapshot은 heading 기반 정적 근사이며 Desktop pixel parity, group·relation·lens·fold·pan·culling의 완전한 반영과 Hugo artifact 자동 포함을 보장하지 않는다. 상호작용 증거에는 앱 screenshot과 video를 사용한다.

17. Hugo 게시 결과와 경계

저장된 view가 mindmap이면 Hugo는 heading 기반 basic read-only map을 렌더할 수 있다.

profile overlay나 non-default 설정이 publish에 반영되지 않으면 조용히 같은 결과인 척하지 않고 diagnostic을 남긴다.

18. 큰 map과 성능

node 수가 50을 넘으면 viewport culling이 활성화될 수 있다. 화면 밖 node와 edge를 모두 DOM/SVG에 유지하지 않고 viewport 주변을 우선 렌더하며 선택 node와 필요한 연결은 pinned한다.

대형 구조 예제에서 맞춤, 검색, 보기와 투영 focus, 낮은 zoom과 reveal을 확인한다. culling은 source 삭제가 아니다.

19. 접근성

• viewport는 tree, 실제 heading은 treeitem 의미로 탐색한다.
• level·sibling position·선택·펼침 상태가 화면과 일치해야 한다.
• collapse, rename, drag 대체 action과 Source 열기에 accessible name이 있어야 한다.
• search, 선택, focus와 invalid drop을 색 하나로만 구분하지 않는다.
• pointer drag가 어려우면 action과 Source 편집으로 같은 결과를 만든다.

20. 예제 Binder

21. 문제 해결

Mindmap이 비어 있다

ATX heading(#~######), 현재 view와 Binder hydration을 확인한다. synthetic root는 실제 heading처럼 편집할 수 없다.

drag 뒤 원문이 바뀌지 않았다

invalid drop, 자기 descendant, H6 target 또는 저장 오류를 확인한다. Source subtree가 이동하지 않았다면 완료가 아니다.

다른 branch가 사라졌다

검색 filter와 branch focus를 해제한다. 숨은 branch의 Markdown은 삭제되지 않았다.

group·relation이 게시 결과에 없다

Desktop profile overlay는 현재 Hugo basic Mindmap에 완전히 materialize되지 않는다. publish diagnostic을 확인한다.

layout이 저장되지 않는다

Binder path와 .glif/config.yml 또는 .yaml 쓰기 권한을 확인한다.

22. 완료 체크리스트

• source tree와 node 계층이 일치한다.
• 선택 node body와 Source line을 확인했다.
• rename·삽입 결과가 heading으로 저장됐다.
• drag 뒤 subtree 구조가 보존됐다.
• 검색·focus·collapse가 source를 삭제하지 않는다.
• group·relation·lens의 overlay 경계를 이해했다.
• keyboard와 pointer 탐색을 수행했다.
• snapshot과 Desktop parity 차이를 확인했다.
• Hugo 미반영 overlay diagnostic을 확인했다.

23. 다른 표면과 구분

Mindmap은 freeform whiteboard가 아니라 source-preserving thinking projection이다. 맵에서 생각을 키운 결과가 정직한 Markdown 구조로 남는 것이 기준이다.

24. 기능 ID 근거

• VW-02: 양방향 left/right layout
• VW-03: 아래쪽·오른쪽·왼쪽 single-direction layout
• VW-04: zoom, pan과 fit
• VW-05: node 이름 변경
• VW-06: child node 추가
• VW-07: sibling node 추가
• VW-08: indent와 outdent
• VW-09: subtree drag reparent
• VW-10: 선택 node의 Source 위치 열기
• VW-26: keyboard tree navigation과 편집
• VW-27: 선택 node reveal
• VW-36: 검색, filter와 branch focus
• VW-37: 큰 map의 viewport culling과 정보 밀도 제어