그래프와 시각화 화면 사용하기

문서가 많아지면 파일 목록과 편집 화면만으로 전체 구조를 파악하기 어렵습니다. Glif는 문서 연결과 Markdown 문서 구조를 다른 방식으로 볼 수 있는 Visual views를 제공합니다.

이 문서에서 할 일

Visual views가 필요한 상황을 이해합니다.
BinderGraph, Linkmap, Mindmap, Page, Timeline, Accordion, Gallery의 역할을 구분합니다.
Markdown 원본을 유지하면서 문서를 다른 모양으로 보는 방식을 확인합니다.
문서 구조를 보고 다시 편집 흐름으로 돌아갑니다.

Visual views란?

Visual views는 문서와 링크, 아이디어 구조를 시각적으로 확인하는 화면 묶음입니다. 어떤 화면은 여러 문서의 관계를 보여주고, 어떤 화면은 하나의 Markdown 문서를 Page, Timeline, Accordion, Gallery처럼 다른 표현으로 보여줍니다.

대표 화면:

BinderGraph
Linkmap
Mindmap
Page
Timeline
Accordion
Gallery
Canvas
Diagram
Blueprint

문서 원본과 프로젝션

Page, Timeline, Accordion, Gallery는 Markdown 문서를 다른 모양으로 보여주는 프로젝션 뷰입니다. 원본은 계속 .md 파일이고, Glif가 별도의 page-builder JSON이나 숨겨진 block 데이터를 만들지 않습니다.

프로젝션 뷰에서 지원되는 직접 수정은 Markdown 원문을 다시 쓰는 방식으로 처리됩니다. 원문이 다른 곳에서 먼저 바뀐 경우에는 잘못된 줄을 덮어쓰지 않도록 수정을 거절하고, 원문 편집 화면으로 돌아가 확인할 수 있게 합니다.

Page

Page는 H1/H2 구조의 문서를 한 장짜리 브리핑 페이지처럼 보여줍니다. # H1은 hero 제목이 되고, ## H2는 카드 제목이 됩니다. H2 아래의 bullet, task, paragraph, H3 heading은 카드 내용으로 들어갑니다. task는 카드 안에서 체크박스로 표시되고, 토글하면 Markdown의 [ ] / [x] 마커만 다시 씁니다.

H2 제목 앞의 이모지는 카드 아이콘으로 표시할 수 있고, H2 아래 첫 standalone Markdown 이미지는 카드의 대표 이미지로 표시할 수 있습니다. 제목 위치, 정렬, 굵게/밑줄/강조색/크게를 조합하는 제목 스타일, 카드 아이콘, 카드 개수, 간격, 배경 타입, accent color 같은 설정은 표현 설정이며, 카드 내용 자체는 Markdown 밖에 저장하지 않습니다.

Timeline

Timeline은 H2 섹션을 세로 흐름으로 보여줍니다. H2 제목이 version이나 date 형식이면 history처럼 보이고, 그런 패턴이 없으면 같은 H2 섹션을 steps처럼 번호가 붙은 흐름으로 보여줍니다. 번호는 시각 표현일 뿐 Markdown에 없는 값을 새로 저장하지 않습니다.

지원되는 heading과 content line은 뷰 안에서 직접 수정할 수 있고, 인접한 H2 entry는 위아래로 이동할 수 있습니다.

Accordion

Accordion은 H2 섹션을 접고 펼칠 수 있는 panel로 보여줍니다. FAQ 전용이 아니라 troubleshooting, policy, glossary, meeting notes처럼 긴 섹션을 빠르게 훑어야 하는 문서에도 쓸 수 있습니다.

지원되는 수정은 panel title 변경, 지원되는 body line 수정, subheading 수정, 인접 panel 이동입니다. fenced code와 복잡한 nested Markdown은 원문 편집 화면에서 수정합니다.

Gallery

Gallery는 여러 standalone Markdown 이미지가 있는 H2 섹션을 album처럼 보여줍니다. main viewer에서 선택된 이미지를 크게 보고, 아래 thumbnail 목록에서 이미지를 고를 수 있습니다. previous/next 버튼으로 같은 album 안에서 이동할 수도 있습니다.

Markdown 안의 이미지 순서가 album 순서입니다. 대표 이미지로 지정하면 해당 이미지를 album의 첫 이미지 위치로 이동합니다. Gallery는 이미지를 업로드하거나 gallery JSON을 저장하지 않고, Markdown image link를 그대로 사용합니다.

직접 수정할 수 있는 것

프로젝션 뷰는 자유형 page editor가 아닙니다. 지원되는 직접 수정은 결과가 명확한 Markdown rewrite에 한정됩니다.

Page, Timeline, Accordion의 heading과 지원되는 본문 line 수정
Timeline과 Accordion의 인접 H2 섹션 이동
Gallery 이미지 순서, alt text, 대표 이미지 변경

임의 block type 변환, 복잡한 nested block 이동, renderer 전용 block JSON 저장은 지원하지 않습니다. 이런 구조는 Markdown 원문에서 수정합니다.

BinderGraph

BinderGraph는 Binder를 중심으로 문서 연결을 그래프 형태로 보여줍니다. 어떤 문서가 중심에 있는지, 어떤 문서가 고립되어 있는지 확인할 때 사용합니다.

이미지 슬롯 위치/크기: BinderGraph 섹션 아래, 본문 폭 760px 기준 16:9. 내용: 문서 노드와 연결선, 선택한 노드의 정보 패널이 보이는 BinderGraph 화면을 캡처합니다.

Linkmap

Linkmap은 링크 관계를 지도처럼 훑어보는 화면입니다. 문서 사이의 연결 흐름을 빠르게 확인할 때 사용합니다.

이미지 슬롯 위치/크기: Linkmap 섹션 아래, 본문 폭 760px 기준 16:9. 내용: 문서 링크 관계가 지도 형태로 펼쳐지고, 연결이 많은 문서와 고립된 문서가 구분되어 보이는 화면입니다.

사용 예:

Binder 안 문서들이 얼마나 연결되어 있는지 빠르게 확인
inbound link가 없는 고립된 문서 찾기
특정 문서 주변의 관련 문서 흐름 확인

Mindmap

Mindmap은 문서나 아이디어를 가지 형태로 정리해 봅니다. 기획서나 설명서의 구조를 잡을 때 유용합니다.

이미지 슬롯 위치/크기: Mindmap 섹션 아래, 본문 폭 760px 기준 16:9. 내용: 중심 주제에서 여러 문서와 아이디어가 가지 형태로 펼쳐지는 화면입니다.

Canvas

Canvas는 여러 문서, 메모, 자료를 자유 배치로 놓고 보는 화면입니다. 아직 선형 문서로 정리하기 전의 생각을 배치할 때 적합합니다.

이미지 슬롯 위치/크기: Canvas 섹션 아래, 본문 폭 760px 기준 16:9. 내용: 문서 카드, 메모, 자료가 자유 배치로 놓여 있고 연결선이나 그룹이 보이는 화면입니다.

Diagram과 Blueprint

Diagram은 구조나 흐름을 도식화해 확인하는 화면입니다. Blueprint는 문서나 프로젝트의 전체 설계를 더 큰 단위로 볼 때 사용합니다.

이미지 슬롯 위치/크기: Diagram과 Blueprint 섹션 아래, 본문 폭 760px 기준 16:9. 내용: 문서 구조와 배포 흐름이 설계도처럼 정리된 화면입니다. 실제 화면이 준비되기 전에는 간단한 diagram 캡처를 우선 사용합니다.

확인 방법

Visual view에서 문서 노드 또는 항목을 선택할 수 있습니다.
선택한 문서의 제목이나 위치를 확인할 수 있습니다.
Page, Timeline, Accordion, Gallery에서는 지원되는 항목을 뷰 안에서 직접 수정할 수 있습니다.
필요한 경우 해당 문서 편집 화면으로 돌아갈 수 있습니다.

문제가 생겼다면

연결선이 적으면 문서 링크가 충분히 만들어져 있는지 확인합니다.
Page나 Timeline이 비어 있으면 문서에 H1/H2 heading이 있는지 확인합니다.
Gallery가 비어 있으면 H2 섹션 아래에 standalone Markdown 이미지가 있는지 확인합니다.
Binder 밖 문서가 보이면 Scope 전체 관계를 함께 보여주는 상태일 수 있습니다.
화면이 복잡하면 현재 Binder를 더 좁은 폴더로 바꿔 확인합니다.