트리맵은 계층과 크기를 한 화면에서 어떻게 함께 보여 줄까?

프로젝트별 사용량과 문서 종류를 동시에 본다

한 달 동안 LLM 지식베이스가 처리한 20,000개 문서를 프로젝트와 자료 종류별로 보고 싶다. 표는 정확하지만 큰 범주와 세부 범주를 한눈에 훑기 어렵다. 트리맵은 전체 직사각형을 상위 범주에 나누고, 각 상위 사각형을 다시 하위 범주로 나눠 계층과 양을 같은 공간에 놓는다.

D3의 트리맵은 계층을 값에 따라 재귀적으로 직사각형으로 분할한다. 각 잎 사각형 면적은 연결된 값에 비례하고, 포함 관계는 부모와 자식의 소속을 뜻한다. 아래 그림은 교육용 사용량이며 실제 서비스 측정이 아니다. 넓이는 문서 수, 색은 자료 유형을 구분한다.

사각형의 포함·면적·색을 나눠 읽는다

부모 사각형 안에 들어간 자식은 그 부모에 속한다. 잎의 면적은 문서 수나 비용처럼 하나의 비음수 수치에 비례한다. 색은 부서, 상태, 증가율 등 두 번째 정보를 담을 수 있지만 면적과 같은 값을 색으로 반복하면 정보가 늘지 않는다. 범주색과 연속색 범례를 혼동하지 않는다.

레이아웃은 x0, y0, x1, y1 경계로 각 사각형을 배치한다. 사각형의 폭이나 높이만 값으로 읽으면 안 되고 넓이를 봐야 한다. 가늘고 긴 사각형은 실제 면적 비교가 어려워질 수 있어 정사각형에 가까운 타일링을 고려한다. 정확한 수치는 라벨이나 표로 보완한다.

부모 값은 자식 합계와 맞아야 한다

프로젝트 A의 문서 수가 8,400이고 그 안의 정책 3,000, 기술 4,200, 회의 1,200을 더해 8,400이 되는지 확인한다. 부모와 자식에 각각 독립 집계값을 넣어 합이 다르면 빈 공간이나 겹침처럼 보일 수 있다. 보통 잎에 값을 두고 root.sum으로 부모 합을 계산한다.

0은 면적이 없고 음수는 면적 의미가 없으므로 증감량 −20 같은 값은 그대로 트리맵 크기에 쓰지 않는다. 현재량을 면적으로 두고 증감 방향은 색이나 기호로 표시한다. 결측을 0으로 바꾸면 ‘측정하지 않음’이 ‘없음’으로 바뀐다. NA를 별도 목록에 남긴다.

타일링 방식과 정렬은 모양을 바꾼다

같은 값이라도 slice-and-dice 방식은 길고 얇은 띠를 만들 수 있고, squarify는 사각형의 종횡비를 개선해 면적 비교와 라벨 배치를 돕는다. 그러나 타일링을 바꾸면 위치와 모양이 달라진다. 알고리즘 이름과 정렬 기준을 기록하고 전후 비교에서는 같은 설정을 사용한다.

값순 정렬은 큰 항목을 모아 빠르게 찾게 하지만 원래 업무 순서를 잃을 수 있다. 이름순은 항목을 찾기 쉽지만 크기 패턴이 흩어진다. 사용자가 위치를 기억해 기간을 비교해야 한다면 resquarify 같은 안정적 배치를 검토한다. 위치 안정성과 정사각형에 가까운 모양 사이의 절충을 설명한다.

작은 사각형은 확대·묶기·표로 보완한다

전체의 0.1%인 범주가 수백 개 있으면 라벨이 겹치고 클릭 대상이 너무 작아진다. 글자를 8px로 줄여 억지로 넣지 않는다. 상위 항목만 라벨하고 나머지는 ‘기타’로 묶되 기타의 기준과 구성 목록을 제공하거나, 상위 범주를 선택해 확대하는 두 단계 화면을 만든다.

키보드 사용자는 사각형마다 초점을 이동할 수 있어야 하고 초점 순서는 계층과 읽기 순서를 따른다. 화면 읽기 프로그램에는 ‘프로젝트 A / 정책 / 3,000건 / 전체 15%’처럼 경로와 값을 제공한다. 모바일에서는 전체 너비를 유지한 채 확대하거나 목록 보기로 바꾼다.

막대그래프·선버스트·트리와 쓰임을 구분한다

막대그래프는 공통 기준선에서 길이를 비교해 정확한 순위에 강하지만 계층을 여러 단계 담기 어렵다. 트리맵은 제한된 공간에 많은 잎을 넣는 데 강하지만 비슷한 면적을 정확히 비교하기 어렵다. 선버스트도 계층과 크기를 함께 보이나 깊이를 동심 고리로 보여 주어 경로를 따라가기 좋다.

노드–링크 트리는 부모와 자식의 연결 구조를 명확히 보여 주지만 공간을 많이 쓴다. 조직의 보고선이 핵심이면 트리, 저장 공간 배분이 핵심이면 트리맵을 고른다. 항목이 열 개뿐이고 순위가 중요하다면 계층형 막대나 작은 다중 막대가 더 낫다.

LLM에는 경로와 잎 값을 분리해 준다

자료를 ‘프로젝트/유형/문서 수’의 경로표로 준비하고 각 행이 잎인지 부모인지 표시한다. 중복 경로, 고아 노드, 순환, 부모 합 불일치, 음수, NA를 먼저 검사하게 한다. 부모 값을 모델이 추정하지 않게 하고 잎 값에서 합산한다. 면적 지표와 색 지표의 단위도 분리한다.

결과에는 타일링 방식, 정렬, 최소 라벨 면적, 기타 묶기 기준과 접근 가능한 대체 표를 포함시킨다. 실제 값이 없으면 샘플 숫자를 채우지 않는다. 렌더링 뒤에는 면적 합이 전체와 일치하는지, 같은 ID가 표와 도표에서 같은 값을 갖는지 다시 확인한다.

잘못된 트리맵은 면적과 색의 뜻을 바꾼다

수정 전 그림은 부모 값과 자식 값을 모두 합쳐 이중 집계했다. 비용의 음수 증감을 면적으로 쓰고, 프로젝트마다 다른 색 눈금을 적용했다. 작은 항목 라벨을 9px로 줄였으며 기간이 바뀔 때마다 위치를 재정렬해 같은 항목을 찾기 어려웠다. “기타” 안에 무엇이 있는지도 밝히지 않았다.

수정 후 잎 값만 합산하고 현재 비용을 면적, 증감률을 공통 발산색으로 분리했다. 최소 라벨 면적 아래 항목은 키보드로 열 수 있는 확대와 표에서 제공했다. 정렬·타일링을 고정하고 기타의 포함 목록과 합계를 표시했다. 정확한 비교가 필요한 상위 10개는 막대그래프로 보완했다.

직접 실습은 계층 합계부터 시작한다

교육 자료에서 전체 100은 문서 63, 생성 22, 검증 10, 기타 5로 나뉜다. 문서 범주 안의 정책 42와 기술 21도 63이 된다. 실습에서는 정책 값을 바꾸어 부모 합과 전체 합이 동시에 맞는지 검사한다. 값이 바뀌면 면적뿐 아니라 라벨의 퍼센트도 다시 계산해야 한다.

실제 프로젝트에서는 중복 문서가 여러 폴더에 속할 수 있다. 트리맵은 보통 하나의 부모를 갖는 계층을 가정하므로 중복 배치를 허용하면 같은 문서가 두 번 집계된다. 주 분류 하나를 정하거나 ‘문서–폴더 관계’ 네트워크로 문제를 바꾼다. 데이터 구조가 트리가 아닌데 트리맵으로 억지로 만들지 않는다.

복사해서 쓸 수 있는 LLM 요청문

아래 요청문은 교육용 예시다. 원문을 함께 제공하고, 모델이 빈칸을 추측하지 않도록 금지 조건을 넣었다. 결과를 받으면 원문 문장과 노드·선의 대응을 사람이 다시 확인한다.

다음 계층형 사용량 표를 트리맵용으로 검산해 줘.
1. 각 행을 루트부터 잎까지의 경로와 잎 값으로 정리한다.
2. 고아 노드, 순환, 중복 경로, 부모가 둘인 항목을 찾는다.
3. 부모 값은 잎 값에서 합산하고 이중 집계하지 않는다.
4. 음수와 결측은 면적에 넣지 말고 처리 목록에 둔다.
5. 면적 지표와 색 지표의 정의·단위·범례를 분리한다.
6. 타일링 방식, 정렬, 최소 라벨 면적, 기타 묶기 기준을 기록한다.
7. 전체 합과 부모별 자식 합을 표로 검산한다.
8. 트리맵과 같은 내용을 담은 접근 가능한 표를 함께 준다.

[계층형 표] …

직접 실습하고 결과를 읽기

이 실습은 브라우저 안에 준비한 교육용 자료만 사용한다. 외부 LLM을 호출하거나 실제 기관 자료를 조회하지 않는다. 입력을 바꾸어 결과가 어떻게 달라지는지 보고, 설명과 맞지 않는 결과가 나오면 어떤 정보가 빠졌는지 적어 본다.

자료와 출처

아래 자료는 이번 글의 정의와 표기법을 확인하는 데 사용했다. 생각그림과 사례 문장은 원자료를 복제하지 않고 이 글의 교육 목적에 맞게 새로 구성했다.

• D3 Hierarchies: Treemap, Observable
• Ben Shneiderman, Tree visualization with tree-maps (1992)