Sankey 다이어그램: 1시간 만에 흐름 분석

금융 흐름 분석을 위한 산키 다이어그램: 데이터부터 인터랙티브까지

산키 다이어그램은 자원 흐름을 시각화하여 자금의 이동 경로를 소스에서 노드를 거쳐 수신자까지 보여줍니다. 비중만 보여주는 파이 차트와 달리 산키 다이어그램은 자금의 출처, 중간 노드 통과 경로, 최종 분배처까지 전체 체인을 표시합니다.

이를 통해 숨겨진 패턴을 식별할 수 있습니다. 예를 들어, 개별적으로는 작아 보이는 지출들이 모여 예산의 21%를 차지하기도 합니다. 다이어그램은 네 가지 레이어로 구성됩니다: 수입, 총예산, 지출 카테고리, 하위 카테고리.

주요 인사이트:

• 흐름 방향이 명확함: 급여 → 공통 풀 → 식비/교통비.
• 노드(예: 은행)는 자금 집중도를 보여줌.
• 네스팅으로 연결성 유지: T-뱅크 이체 → 추가 상세 정보.

파이 차트와의 비교

파이 차트는 5~7개 카테고리를 초과하면 가독성이 떨어집니다: 세그먼트 비교가 어렵고, 이동 방향이나 네스팅이 없습니다. 산키 다이어그램은 비례하는 선 너비로 흐름의 순서를 표시하여 이를 해결합니다.

| 측면 | 파이 차트 | 산키 |

|--------|-----------|--------|

| 가독성 | 5개 이상 카테고리에서 저하 | 줌 기능으로 확장 가능 |

| 방향 | 없음 | 명시적: 왼쪽에서 오른쪽 |

| 네스팅 | 없음 | 지원됨 |

| 흐름 | 비중만 표시 | 전체 경로 표시 |

산키 다이어그램은 명확한 단계 순서가 있는 작업에 적합합니다.

인터랙티브 산키 제작 단계

스택: React + D3.js 및 커스텀 산키 레이아웃. 설명 기반 코드 생성을 위해 AI(Claude)를 활용해 프로세스를 가속화했습니다.

• 데이터 준비: AI를 통해 PDF 명세서에서 CSV로 변환. 정제, 그룹화, 카테고리 정규화. 1000 루블 미만 금액은 툴팁에 상세 정보를 포함하여 "기타"로 그룹화.
• 구조: 수입 (원천: 급여, 이체) → 총예산 → 지출 → 하위 카테고리.
• 첫 번째 반복: 툴팁이 포함된 기본 렌더링.
• 개선 사항:

- 하위 카테고리 중앙 정렬.

- 흐름 너비 제한.

- 레이블 가독성을 위한 줌 기능.

- 모바일 적응: 툴팁 대신 바텀 시트 사용.

AI를 위한 예시 작업 명세:

"툴팁이 있는 D3.js 기반 산키 다이어그램. 수입 → 예산 → 지출. 1000 루블 미만은 '기타'로 그룹화."

인터랙티브 기능 및 개선 사항

툴팁: 마우스 오버 시 간단한 정보, 길게 누르면 작업 목록, 클릭 시 위치 고정. 화면 경계를 고려하여 위치 지정.

AI 문제 및 해결:

• 툴팁 오프셋: 규칙 추가.
• 결제 카테고리 분류: 모호한 항목 수동 수정 (예: MAPP_SBERBANK → "기타 이체").
• 저축은 지출로 처리하지 않음.

모바일 버전:

• 버튼 + 제스처로 줌 기능.
• 상세 보기를 위한 목록 모드.
• 툴팁을 위한 바텀 시트.

레이블은 숫자와 분리되어 줄 바꿈되지 않음 (₽ 기호 붙임).

개인 금융 외 적용 사례

• 계정/부서 간 자금 이동.
• 중간 노드가 포함된 비용 분석.
• 비즈니스 내 고객 흐름, 요청, 단계.

제한 사항:

• 정밀 분석용 아님 (축에 숫자 없음).
• 흐름이 없거나 네스팅 레벨이 3개 초과일 경우 부적합.
• 데이터 양이 많으면 복잡해짐.

중요한 점

• 개발 속도: 일러스트레이터 정적 다이어그램 — 2일; D3 인터랙티브 — 1시간 + 개선.
• 진입 장벽: 데이터 이해와 AI 작업 명세 능력 필요.
• 가독성 절충: 줌 및 겹치는 레이블 숨김; 툴팁에 상세 정보.
• 도구로서의 AI: 코드 생성은 가능하지만, 반복 작업과 도메인 로직은 개발자 책임.
• 접근 방식 변화: 실험 비용 감소, 인터랙티브성에 집중.

— Editorial Team