zerovoids.dev
zerovoids.dev

Ø NEWS

대시보드 복제 · 데이터 정확성

클로드로 복제한 태블로 대시보드, 헤드라인 매출 숫자부터 어긋났다

클로드에게 태블로 대시보드 두 개를 그대로 복제시켜 보니 겉보기엔 손색없이 빨리 완성됐지만, 데이터 범위 선택과 반올림 처리가 스크립트 안에 묻히면서 화면만 봐서는 드러나지 않는 숫자 오류가 남았다.

키워드data-vizmapsai-mlcharting

클로드가 복제한 태블로 대시보드에서 매출 헤드라인 카드는 $745.6K를, 바로 아래 지도는 $733.3K를 보여줬다. 미국과 캐나다를 합친 값과 미국 주만 더한 값의 차이였는데, 화면 어디에도 그 구분을 알리는 표시는 없었다.

한 시간짜리 복제 실험

PolicyViz의 저자는 태블로 퍼블릭에서 잘 만들어졌다고 생각한 대시보드 두 개를 골랐다. 둘 다 Superstore라는 표준 샘플 데이터셋을 쓰고 있었다. 그 대시보드의 스크린샷과 밑바탕이 되는 엑셀 원본 파일을 클로드에 건네고, 원본과 비슷한 인터랙티브 대시보드를 만들어 달라고 시켰다. 각 작업에는 한 시간을 넘기지 않는다는 제한을 뒀다.

만드는 속도 자체는 빨랐다. "지도를 더 크게", "KPI 카드 높이를 맞춰줘", "선 그래프를 인터랙티브하게 만들어줘" 같은 짧은 지시만으로 스파크라인이 들어간 KPI 카드, 게이지 차트, 미국 단위 코로플레스 지도, 육각 그리드 지도, 순위별 막대 목록, 호버 툴팁까지 원본 레이아웃 그대로의 HTML/JavaScript 버전이 나왔다. 필터를 바꿀 때 로딩 스피너가 도는 태블로보다 체감 속도도 빨랐다. 다만 완성도는 균일하지 않았다. 첫 번째 대시보드는 화면 크기를 바꿔도 잘 버텼지만, 두 번째는 하단부에서 요소가 겹치고 데스크톱과 모바일 사이에서 크기 조정이 매끄럽지 않았다. 육각 그리드 지도는 제대로 배치되기까지 여러 차례 다시 시켜야 했고, 그러고도 투영 방식이 어색하게 남았다. 이 실험은 깨끗하게 정리된 데이터셋과 이미 완성된 원본 대시보드를 그대로 베끼는 작업이었다는 점도 전제로 깔려 있다.

겉으로는 안 보이던 오류

첫 번째 대시보드의 헤드라인 Sales 값은 데이터셋에 있는 모든 국가, 즉 미국과 캐나다를 합산한 숫자였다. 반면 같은 화면 바로 아래 있는 주별 지도는 미국 주만 조용히 걸러낸 값을 쓰고 있었다. 어느 쪽이 맞는 범위인지 화면 안에 표시는 없었고, 숫자를 직접 대조해 보고 나서야 $733.3K(미국만)와 $745.6K(미국+캐나다)라는 차이가 드러났다. 이 범위를 가르는 판단은 데이터 처리 스크립트 한가운데 묻혀 있었다.

대시보드 스스로는 앞뒤가 안 맞는 구석이 없었기 때문에, 오히려 문제 없어 보이는 쪽으로 기울었다.

반올림에서도 같은 패턴의 오류가 두 군데서 나왔다. 첫 번째 대시보드에서는 하위 카테고리별 전년 대비 성장률을 파이썬 스크립트가 소수점 첫째 자리까지 반올림했다(33.456741%→33.5%). 그런데 화면에 표시할 때 프런트엔드 자바스크립트가 이미 반올림된 33.5%를 다시 정수로 반올림해 34%로 띄웠다. 33.456741을 곧바로 정수로 반올림하면 33이 맞다. 두 번째 대시보드에서는 임베드할 데이터셋을 가볍게 만들려고 개별 판매 금액을 모두 1달러 단위로 반올림해 저장한 뒤, 브라우저에서 그 반올림된 값들을 그대로 합산했다. 건당 오차는 최대 50센트로 작았지만, 약 3,300건의 거래에 걸쳐 더해지면서 서로 상쇄되지 않고 쌓였다.