이 블로그의 홈이 지도가 됐다. 노드는 글이고, 선은 글 사이의 실제 연결이다. 이 글도 게시되는 순간 지도에 노드로 추가된다.

문제

글이 쌓이며 서로 링크로 엮이기 시작했다. 용어 카드가 빌드 리포트를 가리키고, 카드끼리도 잇닿는다. 그런데 목록에서는 이 연결이 보이지 않는다. “이 사람의 기록이 어떻게 연결돼 있나”를 한눈에 보여주는 지도가 없었다.

만든 것 / 버린 것

• 만든 것: 블로그 홈 상단의 그래프. 노드 = 글(빌드는 청록, 학습은 보라, 연결이 많을수록 큼), 실선 = 본문 속 실제 링크, 점선 = 태그 공유. 글을 발행하면 지도가 스스로 자란다. 페이지를 만들 때 전체 글의 본문을 읽어 연결을 뽑아내기 때문에, 지도 관리에 드는 손은 0이다.
• 상호작용: 노드에 올리면 이웃만 밝아지고 나머지는 흐려진다. 누르면 그 글로 이동, 끌면 출렁인다.
• 버린 것: 확대/이동, 태그 자체를 노드로 만들기(글이 늘면 재검토), 그래프 라이브러리.

원칙 — 장식 그래프 금지

멋있어 보이려고 아무 점이나 잇는 그래프는 만들지 않기로 했다. 모든 선은 실데이터다. 실제로 인용했거나 실제로 태그를 공유하는 관계만. 그래야 지도가 탐색 도구가 되고, 기록이 쌓일수록 지식의 모양이 정직하게 드러난다.

시험 문제를 먼저 냈다

지난 빌드의 반성이 “평가 질문을 즉석에서 만들었다”는 것이어서, 이번엔 만들기 전에 검증 항목 다섯 개를 먼저 적었다. 노드 수가 글 수와 같은가, 특정 글 사이의 링크가 지도에 있는가, 클릭하면 이동하는가. 만든 직후 스크립트로 채점했고 전부 통과.

그리고 처음으로 막힌 것이 없는 빌드가 됐다. 우연이 아니라고 생각한다. 시험 문제를 먼저 내면 무엇을 만들어야 하는지가 선명해진다. 교육 기획자로서 늘 하던 말인데, 코드에서도 통한다는 걸 확인했다.

Q&A

Q. 글 몇 개짜리 그래프가 의미 있나 — 지도는 지금 크기가 아니라 자라는 구조를 위한 것이다. 빌드마다 용어 카드가 2~3장씩 나오니 노드는 계속 늘고, 자동 생성이라 유지비는 없다. 지금은 작은 마을 지도지만, 지도가 있는 마을과 없는 마을은 다르다.

Q. 그래프 라이브러리를 왜 안 썼나 — 노드 수십 개까지는 단순한 물리(밀어내기 + 당기기 + 중심 인력)로 충분하다. 의존성 없이 캔버스로 직접 그렸다. 도구는 문제 크기에 맞게. 네 번째 빌드에서도 같은 기준이다.

회고

• 늘어난 것: 시험 문제 먼저 내기가 프로세스에 정착했다. 그리고 용어 카드를 쓸 이유가 눈에 보이게 됐다. 카드 한 장이 지도의 점 하나다.
• 다음에 볼 것: 노드가 30개를 넘기 전에 라벨 겹침과 성능을 손봐야 한다. 그날이 빨리 오면 좋겠다.