#Next.js#React Flow#MDX#Whiteboard#DevLog#Mindmap

타이핑은 드로잉보다 빠르다

빈 화면의 공포 (The Blank Page Syndrome)

기술 블로그를 쓰려고 마음먹고 에디터를 켜면, 깜빡이는 커서만 하염없이 바라보다 끄는 일이 많았습니다. 머릿속에는 "시스템 디자인", "트랜잭션 흐름", "비동기 처리" 같은 키워드들이 둥둥 떠다니는데, 이걸 문장으로 풀어내려니 순서가 잡히지 않았기 때문입니다.

우리의 생각은 비선형적(Network)인데, 글은 선형적(Linear)이거든요.

타이핑은 드로잉보다 빠르다

학창 시절, 아이디어가 막힐 때면 빈 A4 용지 위에 마인드맵을 끄적이곤 했습니다. 위에서 아래로 내려가는 선형적인 글쓰기보다 훨씬 자유롭고, 생각의 조각들을 시각적으로 연결하며 구조를 잡기에 최적이었기 때문입니다.

하지만 작업 환경이 디지털로 넘어오면서 이 자유로움은 오히려 불편함이 되었습니다. 화면 속에서 마인드맵을 그리려니 마우스로 노드를 만들고, 선을 잇고, 위치를 조정하는 과정이 생각의 흐름을 끊어놓기 일쑤였습니다.

생각은 쏟아지는데, 손은 마우스 커서를 찾고 있었으니까요. 개발자인 우리에게 가장 익숙하고, 생각의 속도만큼 빠른 도구는 결국 키보드입니다.

"그냥 마크다운을 작성하면, 알아서 마인드맵으로 그려지면 안되나?"

단순하게 이런 고민이 들었습니다. 여기에 마인드맵의 시각화에 가장 좋은 표현 방법인 그래프, 차트, 테이블등도 추가할 수 있으면 좋겠다고 생각했습니다. 결론적으로 마크다운에 javascript 컴포넌트를 추가할 수 있는 MDX를 사용하는 Interactive Whiteboard 프로젝트를 구현해보기로 결정했습니다.

텍스트가 공간이 되다 (Technical Approach)

이 기능의 핵심은 MDX를 파싱하여 그래프 데이터로 변환하는 것입니다.

1. MDX Parsing (Source of Truth)

사용자가 입력하는 MDX 텍스트가 유일한 진실 공급원(Source of Truth)입니다. unified, remark-parse를 사용하여 MDX를 추상 구문 트리(AST)로 변환합니다.

TypeScript
1// 목록(List) 아이템을 노드로 변환하는 로직의 단순화된 형태
2export function parseMdxToGraph(mdx: string) {
3    const tree = unified().use(remarkParse).parse(mdx);
4    // AST 순회하며 Nodes & Edges 생성...
5}

2. Auto Layout (Structure)

키보드로 빠르게 관계를 표현하고 기록하면 알아서 마인드맵 노드로 계층을 만들고 싶었기에, 노드의 위치를 일일이 지정하지 않는 방식을 쓰고 싶었습니다. dagre 알고리즘을 사용하여 계층 구조(Hierarchy)를 분석하고, 자동으로 보기 좋은 위치에 배치합니다.

  • Headings (#): 큰 가지(Branch)가 됩니다.
  • Lists (-): 세부 노드(Leaf)가 됩니다.
  • Plain Text : 일반 텍스트도 노드가 됩니다.
  • Code Blocks : 코드 블록은 노드가 됩니다.
  • React Components : React 컴포넌트도 노드가 됩니다.

3. Visualization (View)

React Flow를 사용하여 계산된 위치에 노드를 렌더링합니다. 단순한 텍스트 상자가 아니라, 우리가 리스트에 적은 내용이 즉시 시각적인 카드가 되어 캔버스에 나타납니다.

아래의 다이어그램은 이미지가 아닙니다. 아래는 이 블로그 포스트의 MDX 원본 코드를 그대로 렌더링한 실제 컴포넌트입니다.

위 컴포넌트는 MindmapViewer라는 이름으로 MDX 내에서 직접 사용할 수 있도록 구현되었습니다.

써보니 어떤가요?

지금 보고 계신 이 글의 초안도 화이트보드 위에서 작성되었습니다.

  1. Brainstorming: 생각나는 키워드를 마구잡이로 리스트(-)로 적습니다.
  2. Structuring: 화이트보드 뷰를 보며 들여쓰기(Tab)로 계층을 잡습니다.
  3. Writing: 구조가 잡히면 그대로 살을 붙여 문장으로 만듭니다.

"학습"할 때도 유용합니다. 복잡한 라이브러리의 구조나 아키텍처 문서를 읽을 때, 화이트보드에 요약하면서 읽으면 머릿속에 지도가 그려집니다.

지금 읽고 계신 이 포스트도 화이트보드 모드로 전환하여 볼 수 있습니다. 화면 왼쪽 사이드바에 있는 아이콘을 눌러보세요. 지금 보고 계신 텍스트들이 순식간에 마인드맵으로 변환되는 것을 확인하실 수 있습니다. (해보면 레이아웃이 겹치고 맘에 들지 않을 수 있습니다 😅)

마치며

아직은 초기 단계의 프로토타입입니다. (리스트 중첩이 깊어지면 어떻게 표현할지 고민중입니다.) 하지만 "생각하는 도구"로서의 가능성은 충분히 확인했습니다.

앞으로 이 블로그의 모든 글은 이 화이트보드를 거쳐 탄생할 것입니다. 단순히 "보여주는" 블로그가 아니라, "함께 생각하는" 공간이 되도록 작성해보려고 합니다.

Comments