화면은 좁은데 거대한 트리를 그려야 해서 결국 바퀴를 재발명한 개발자

요약 제한된 화면 공간에 거대한 상속 트리(Tree) 구조를 시각화해야 하는 개발자가 기존 라이브러리에 한계를 느끼고 직접 노드 배치 알고리즘을 구현한 개발기입니다. D3 같은 유명 시각화 라이브러리는 트리나 클러스터 계층 구조를 그릴 때 같은 깊이(depth)의 노드나 말단 노드(leaf)들을 일괄적으로 같은 열이나 행에 나란히 배치하는 경향이 있습니다. 하지만 형제 노드가 많아지면 좌우 너비가 비정상적으로 넓어져 작은 화면에서는 가독성이 심각하게 떨어지는 문제가 발생합니다. 트리를 좌에서 우로 뻗어나가게 그리는 방식도 대안이 될 수 있지만, 개발자는 '트리는 본래 아래로 자라야 제맛'이라며 위에서 아래로 뻗는 정석적인 구조를 유지한 채 문제를 해결하고자 했습니다. 알고리즘을 검증하기 위해 먼저 영문 알파벳 빈도 데이터를 활용해 읽기 쉬운 무작위 단어를 생성하고, 이를 바탕으로 '부모 -> 자식' 구조의 텍스트 트리를 파싱해 SVG로 렌더링하는 체계를 구축했습니다. 컴퓨터 공학에서 까다로운 문제 중 하나인 텍스트 중앙 정렬과 사각형 박스 노드 렌더링부터 시작해, 부모와 자식 노드 사이를 꺾은선(step path) 형태로 자연스럽게 연결하는 기초 시각화 과정까지 차근차근 바퀴를 재발명하는 과정을 담았습니다.