[Claude Code] 이미 만든 대시보드에 '시각화 원칙' 체크리스트를 들이댔더니, 차트 15개 중 14개가 걸렸다

📝 한줄 요약

AI로 만든 부동산 대시보드에 데이터 시각화 검수 체크리스트 16항목을 적용했더니, 통과는 1개뿐이었습니다. 이중축·파이차트를 걷어내고 제목을 결론형으로 바꾸는 과정에서, 기존 대시보드가 데이터와 어긋난 설명을 하고 있었다는 것까지 발견했습니다.

바쁘시면 이것만 읽어도 돼요:

• 차트를 "예쁘게" 만드는 것과 "정확하게" 만드는 건 완전히 다른 작업이었습니다

• AI에게 판단 기준(체크리스트)을 먼저 주면 자기 결과물을 스스로 진단합니다

• 이중축 3개 → 위아래 패널, 파이차트 1개 → 100% 누적 막대로 교체

• 제목을 "월별 매매가격 중앙값"에서 "매매가 중앙값 5.71억 → 6.40억 (+12.0%)" 로 바꿨습니다

• 분포와 표본 수를 공개하자 기존 설명이 틀렸다는 게 드러났습니다 (표본 1건짜리 구간이 섞여 있었음)

• 완성 후 실제로 브라우저에 띄워 확인시켰더니 라벨 잘림·겹침 4건이 추가로 나왔습니다

🎯 이런 분들께 도움돼요

• AI로 대시보드나 리포트는 만들어봤는데, 이게 잘 만든 건지 판단이 안 서는 분

• 엑셀·BI 도구로 차트는 그리는데 이중축·파이차트가 왜 문제인지 모르셨던 분

• AI 결과물의 품질을 한 단계 올리는 방법을 찾는 분

😫 문제 상황 (Before)

앞선 실습에서 노원구 아파트 실거래가와 KB 시장지표를 모아 대시보드를 만들었습니다. 차트 15개짜리 HTML 한 장이 나왔고, 열어보니 그럴듯했습니다. 색도 깔끔하고 인터랙티브하게 움직이고.

그런데 "이게 잘 만든 대시보드인가?" 라는 질문에는 답을 못 하겠더군요. 보기에 좋은 것과 제대로 읽히는 것이 같은 말인지 확신이 없었습니다.

마침 데이터 시각화 원칙 가이드 문서가 있었습니다. 좋은 예·나쁜 예 비교와 배포 직전 검수 체크리스트 16항목이 정리된 자료였습니다. 이걸 그냥 읽고 넘기는 대신, 이미 만든 대시보드에 직접 들이대보기로 했습니다.

🛠️ 사용한 도구

• Claude Code (모델: Claude Opus) — 진단·개선·검증 작업 전반

• 헤르메스(와퍼) — 개인 반려 에이전트. 텔레그램으로 작업을 띄우고 진행 상황을 받아보는 창구로 사용

• 특이사항: 기존 파일을 덮어쓰지 않고 개선본을 별도 파일로 만들도록 지시

🔧 작업 과정

채점부터 시켰다 — "고쳐줘"가 아니라 "진단해줘"

바로 고쳐달라고 하지 않았습니다. 먼저 가이드 문서를 읽고, 그 기준으로 현재 대시보드를 채점하게 했습니다.

현재 부동산 대시보드를 데이터 시각화 원칙에 맞게 개선해줘.

진행 순서:
1. 기존 코드와 대시보드를 먼저 분석한다.
2. 시각화 가이드의 최종 검수 체크리스트를 기준으로
   현재 차트의 통과·개선 필요 항목을 표로 보여준다.
3. 어떤 차트를 어떻게 바꿀지 짧은 수정 계획을 먼저 제시한다.
4. 기존 파일은 덮어쓰지 말고 개선본을 별도 파일로 생성한다.
5. 수정 후 코드를 실제로 실행하고 HTML을 검증한다.

결과는 예상보다 처참했습니다. 16항목 중 통과 1개, 확인 필요 7개, 개선 필요 8개.

더 인상적이었던 건, AI가 감으로 판단하지 않고 완성된 HTML 파일을 직접 뜯어서 세어봤다는 점입니다.

"그럴듯해 보였던" 이유가 여기 있었습니다. 문제가 없어서가 아니라, 문제를 알아볼 기준이 없었기 때문이었습니다.

이중축은 왜 문제일까 — 눈속임이 가능하기 때문

가장 많이 걸린 게 이중축이었습니다. 거래량(건)과 가격(억원)처럼 단위가 다른 값을 한 차트에 겹쳐 그리고, 축을 왼쪽·오른쪽 두 개 쓰는 방식입니다. 엑셀에서도 흔히 쓰죠.

문제는 두 축의 범위를 어떻게 잡느냐에 따라 두 선이 붙어 보이기도, 벌어져 보이기도 한다는 겁니다. 같은 데이터인데 "관계가 강해 보이는 정도"를 만드는 사람이 임의로 조절할 수 있습니다.

바꾼 방식은 위아래 패널 분리입니다. 가로축(평형대)은 공유하고, 위 칸에는 가격, 아래 칸에는 거래량을 각자의 축으로 그립니다. 크기를 겹쳐 비교하는 대신 변화 방향과 시점을 나란히 보게 됩니다.

파이차트도 같은 이유로 걷어냈습니다. 전세 57.3% vs 월세 42.7%를 원의 각도로 비교하는 것보다, 길이가 같은 기준선에서 시작하는 가로 막대 하나가 훨씬 정확합니다.

제목이 주제를 말하면 안 된다

가장 크게 바뀐 건 제목이었습니다. 원래 제목들은 이랬습니다.

• "월별 매매가격 중앙값"

• "평형대별 매매가격 중앙값과 거래량"

• "서울·노원구 KB 매매가격지수 추이"

전부 "무엇에 관한 차트인지"만 말하고 있습니다. 독자가 결론을 직접 계산해야 하죠. 원칙은 "차트를 보고 알아야 할 결론을 제목에 쓰라" 였습니다.

여기서 AI가 알아서 잘한 부분이 있습니다. 제목의 숫자를 글자로 박아넣지 않고 계산 결과가 자동으로 들어가게 만들었습니다. 데이터가 바뀌면 제목의 숫자도 같이 바뀌니, 제목과 차트가 어긋날 수가 없습니다.

여기에 차트마다 "질문 · 이 차트가 답하는 것" 을 한 줄 붙였습니다. "매매가격 중앙값은 18개월 동안 어느 방향으로 얼마나 변했나?" 처럼요. 질문 → 결론(제목) → 차트 순으로 읽힙니다.

평균 뒤에 숨은 것을 꺼냈더니, 틀린 설명이 나왔다

"중앙값만 보여주지 말고 분포와 표본 수를 함께 보여라"는 원칙을 적용한 순간, 예상 못한 게 나왔습니다.

기존 대시보드는 이렇게 설명하고 있었습니다.

"평형대가 커질수록 매매가 중앙값이 대체로 상승합니다."

그런데 표본 수를 표시하자 60평대의 거래가 딱 1건이라는 게 드러났습니다. 그 1건의 가격은 8.45억으로, 50평대(10.76억)보다 오히려 낮았습니다. 거래 1건으로 만든 값을 4,981건으로 만든 값과 나란히 놓고 "경향"을 말하고 있었던 겁니다.

연식 차트에서도 비슷한 게 나왔습니다. 새 아파트가 비싼 건 맞는데(5년 이하 9.00억 vs 30년 초과 5.55억), 거래의 60%가 30년 초과 단지였습니다. 가격 경향만 말하면 이 지역에서 실제로 무슨 일이 일어나는지 절반을 놓치게 됩니다.

차트를 정직하게 그리려고 했더니, 데이터 해석의 오류가 따라 나왔습니다. 이게 이번 작업에서 제일 인상적이었습니다.

만든 걸로 끝내지 않고, 실제로 띄워서 보게 했다

코드가 돌아가고 HTML이 만들어졌다고 끝이 아니었습니다. AI에게 완성된 페이지를 실제 브라우저로 열어 눈으로 확인하게 했더니 4가지가 더 나왔습니다.

1. 위아래 패널의 소제목이 위쪽에 잘려 안 보임

2. 가로 막대 끝의 숫자 라벨이 화면 밖으로 잘림

3. 서울(105.8)과 노원구(106.2) 라벨이 값이 비슷해서 글자끼리 겹침

4. 지역 비교 차트에서 17개 지역이 한 점에 뭉쳐 구분 불가

특히 4번이 재미있었습니다. "막대차트 축은 0에서 시작하라"는 원칙을 그대로 적용했더니, 값이 전부 100 안팎인 지수 데이터가 0~130 축 위에서 전부 한 덩어리로 보였습니다. 원칙을 지켰는데 더 안 읽히는 상황이었죠.

AI의 해법은 기준점(지수 100) 대비 편차로 바꾸는 것이었습니다. 0이 "기준시점과 같음"이라는 실제 의미를 갖게 되니, 축은 0에서 시작하면서도 지역별 차이가 선명하게 보였습니다.

여기서 배운 건, 원칙은 기계적으로 적용하는 게 아니라 왜 그 원칙이 있는지 이해하고 상황에 맞게 판단해야 한다는 것이었습니다.

✅ 결과 (After)

Before vs After

차트를 줄이지 않았다는 게 중요합니다. 없앤 게 아니라 같은 질문에 더 적합한 형태로 바꿨습니다.

안전장치

기존 파일은 그대로 두고 개선본만 새로 만들도록 지시했는데, AI가 이걸 검증까지 했습니다. 원본 데이터 6개 테이블의 행 수를 작업 전후로 대조해 전부 동일함을 확인했고, 기존 대시보드 파일이 손대지지 않았음을 파일 지문(해시)으로 증명했습니다.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. "고쳐줘"보다 "채점해줘"를 먼저. 판단 기준을 주고 진단부터 시키면, 무엇을 왜 고치는지가 명확해집니다. 결과물의 품질보다 기준의 유무가 더 중요했습니다.

2. 원칙 문서를 통째로 물려주기. 요약해서 전달하는 것보다 가이드 파일 경로를 그대로 주는 게 나았습니다. 체크리스트 16항목을 알아서 뽑아내 판정표를 만들었습니다.

3. "기존 파일 덮어쓰지 말고 별도 파일로"를 명시. 개선이 마음에 안 들면 언제든 되돌릴 수 있다는 안정감이 컸습니다. 비교도 쉬웠고요.

4. 만든 결과를 실제로 열어보게 하기. "코드가 돌아간다"와 "화면이 제대로 보인다"는 다릅니다. 라벨 겹침 같은 건 실행 로그로는 절대 안 잡힙니다.

5. 숫자를 글자로 박지 말고 계산되게. 제목의 수치가 데이터에서 자동으로 나오게 하면, 나중에 데이터가 바뀌어도 제목이 거짓말을 하지 않습니다.

이렇게 하면 안 돼요

1. "예쁘게 만들어줘"라고 하기. 기준 없는 요청은 기준 없는 결과를 낳습니다. 처음 만든 대시보드가 딱 그랬습니다.

2. 원칙을 기계적으로 강요하기. "무조건 0부터 시작"을 밀어붙였다면 17개 지역이 뭉친 차트를 그대로 뒀을 겁니다. 원칙이 안 맞는 상황이 오면 왜 그 원칙이 있는지 되짚어야 합니다.

3. 평균이나 중앙값 하나만 믿기. 표본이 1건인 구간과 5천 건인 구간이 같은 굵기로 그려져 있으면, 없는 경향을 만들어냅니다.

🌍 다른 업무에 적용한다면?

이 방식은 부동산 데이터와 아무 상관이 없습니다. "기준 문서 + 기존 결과물 → 채점 → 개선" 구조 자체가 재사용됩니다.

• 보고서·기획서: 회사의 문서 작성 가이드를 주고 기존 보고서를 채점시키기

• 영업 자료: 브랜드 가이드라인 기준으로 기존 제안서 진단

• 업무 매뉴얼: 신입이 읽고 따라할 수 있는지를 기준으로 기존 문서 점검

• 월간 리포트: 매달 만드는 차트에 같은 체크리스트를 반복 적용

기준이 되는 문서가 이미 있다면, 그 문서를 AI에게 판단 기준으로 넘기는 것만으로 검수자가 한 명 생깁니다.

🚀 앞으로의 계획

• 지금은 노원구 한 곳인데, 서울 전체로 넓힐 때 이 체크리스트를 그대로 다시 적용할 예정입니다

• 개선본 코드에 "이 프로젝트의 차트는 이 원칙을 따른다" 는 규칙을 문서로 남겨두어, 다음에 차트를 추가할 때 자동으로 같은 기준이 적용되게 했습니다

• 색각 다양성 관점의 실제 검증(색 없이도 읽히는지)은 아직 코드 수준 대응만 했고, 실사용자 확인은 남아 있습니다

📋 재사용 가능한 프롬프트

프롬프트 1: 기존 결과물 채점시키기

[기준 문서 경로]를 읽고, 아래 결과물을 그 기준으로 진단해줘.

대상: [결과물 파일 경로]

1. 결과물을 먼저 분석한다.

2. 기준 문서의 체크리스트 항목별로 통과·개선 필요를 표로 보여준다.

3. 무엇을 어떻게 바꿀지 짧은 계획을 먼저 제시한다.

4. 기존 파일은 덮어쓰지 말고 개선본을 별도 파일로 만든다.

5. 수정 후 실제로 실행해서 결과를 검증한다.

[대괄호] 안은 본인 상황에 맞게 바꾸세요. 기준 문서가 없으면 "일반적인 OO 작성 원칙"으로 대체해도 됩니다.

프롬프트 2: 차트 제목을 결론형으로 바꾸기

이 차트들의 제목을 주제형에서 결론형으로 바꿔줘.

• 각 차트가 답하는 분석 질문을 한 문장으로 먼저 정한다.

• 제목에는 실제 데이터에서 검증된 핵심 결론을 쓴다.

• 제목의 수치는 코드에서 계산된 값이 들어가게 해서, 데이터가 바뀌면 제목도 같이 바뀌게 한다.

• 차트가 직접 보여주는 사실(관찰)과 추가 맥락에 기반한 설명(해석)을 구분해서 표시한다.

프롬프트 3: 만든 화면 실제로 확인시키기

방금 만든 결과물을 실제로 브라우저에서 열어서 눈으로 확인해줘.

• 글자가 잘리거나 겹치는 곳이 있는지

• 좁은 화면에서도 가로 스크롤 없이 읽히는지

• 축·제목·라벨이 의도대로 나오는지

문제가 있으면 고치고 다시 확인해줘.