그래프의 노드 제목이 겹치지 않게 놓는 방법

생각 지도에서 노드 사이를 벌려도 긴 제목은 서로 겹친다. 점은 떨어져 있어도 글자가 차지하는 공간까지 확보된 것은 아니기 때문이다. 가든에서는 노드 위치와 제목 배치를 따로 계산하는 방식으로 이 문제를 다뤘다.

노드를 놓은 뒤의 제목 자리

노드 위치는 서로 밀어내고 연결된 노드는 당기는 힘 기반 배치(force-directed layout)로 정한다. 이 계산에는 제목의 폭과 높이가 들어가지 않으므로, 제목은 별도로 자리를 찾아야 한다.

제목이 차지하는 영역을 글자 크기와 줄 수로 계산하고, 노드 주변의 여러 위치를 후보로 삼는다. 다른 제목이나 노드를 가리지 않고 화면 안에 들어오는 자리를 고른다. 제목을 항상 노드 아래에만 두는 것보다 좁은 공간을 활용하기 좋다.

중요한 제목부터 보여준다

화면 안에 모든 제목을 억지로 넣으면 글자가 겹치거나 지도가 빽빽해진다. 선택한 노드와 허브를 먼저 배치하고, 일반 제목은 연결이 많은 순서로 빈자리를 찾는다. 자리가 없는 일반 제목은 숨긴다.

선택하거나 마우스를 올린 제목은 사용자가 읽을 수 있도록 우선 표시한다. 이때 다른 제목까지 다시 배치하면 화면이 흔들리므로, 주변 제목의 위치는 유지한다. 중요한 제목을 표시하는 과정에서는 일부 겹침이 생길 수 있다.

확대와 글자 크기의 분리

지도를 확대할 때 글자까지 함께 커지면 노드 사이가 벌어져도 제목이 차지하는 공간은 그대로 부족하다. 그래서 글자 크기에 확대 배율의 역수인 1 / s를 곱해 화면에서는 같은 크기로 보이게 했다.

노드 간격은 넓어지고 글자 크기는 유지되므로 더 많은 제목을 놓을 수 있다. 그래도 긴 제목이나 밀집 구간에서는 모두 표시하지 못할 수 있다. 숨은 제목은 선택하거나 참조·역참조 목록에서 확인할 수 있게 했다.

이 방식은 한 화면에 모든 제목을 보여주기보다, 연결 구조를 먼저 보고 필요한 제목을 찾아 읽는 지도에 맞는다. 정적 이미지에서는 확대나 호버를 쓸 수 없으므로 표시할 제목을 더 제한해야 한다. 그래프를 공유 이미지에 활용한 방식은 정적 사이트의 OG 카드와 방문 통계에 정리했다.