소개
지난 1주차엔 공공 API를 직접 때려서 데이터를 DuckDB에 쌓는 것까지 했어요. 그런데 막상 DB에 데이터가 들어가 있어도, 그걸 눈으로 보는 일은 여전히 남의 얘기 같았습니다. 테이블에 숫자가 6만 줄 들어있다 한들, 그래서 노원구 집값이 오르는 건지 내리는 건지는 쿼리를 매번 쳐봐야 알았거든요.
이번 2주차 주제가 마침 "1주차에 쌓은 그 DB로 대시보드를 만드는 것" 이라, "이제 진짜 내 데이터를 화면으로 본다"는 마음으로 시작했습니다. 강의에서 강사님이 계속 못을 박으신 한마디가 있었어요 — "처음 나온 결과물은 완성이 아니다." AI한테 "대시보드 만들어줘" 하면 뭔가 뜨긴 뜨는데, 그게 잘 만든 건지는 사람이 기준을 대봐야 안다는 거였죠. 이 말이 2주차 내내 저를 따라다녔습니다.
목표는 이렇게 잡았어요. 내가 사는 노원구 아파트 실거래 + KB 통계를, 남한테 보여줘도 되는 한 장짜리 대시보드로 만든다.
진행 방법
쓴 도구는 이렇게 됩니다.
Claude Code (실습 파트너 겸 코드 작성)
1주차에 쌓아둔
data/study23.duckdb(읽기 전용으로만 열기 — 원본 안 건드림)Streamlit (동적 대시보드 2개 먼저) → 최종은 ECharts(오픈소스 JS 차트)로 정적 대시보드 조합
강사님이 준 재사용 핸드아웃 프롬프트 (그대로 붙여넣으면 일단 돌아감)
강의는 크게 두 갈래였어요. ① Streamlit으로 실거래가 대시보드(가격·거래량) 랑 KB 통계 대시보드를 먼저 만들어보고, ② 그걸 ECharts 차트로 하나씩 뜯어서 HTML 한 장으로 조합하는 것. 저는 최종 산출물을 ECharts 정적 대시보드로 잡았습니다. "수치가 바뀌어도 JSON만 갈아끼우면 되는" 구조가 나중에 자동화랑 붙기 좋겠더라고요.
1주차랑 똑같이, 그냥 "만들어줘" 하면 저도 뭘 한 건지 안 남을 것 같아서 핸드아웃의 방식 그대로 갔습니다. 강사님이 강조한 순서가 있었어요 — 한 번에 다 그리지 말고, 데이터 계약 → 차트 1개 → 검증 → 전체 조합을 반복하라. 그래서 먼저 차트마다 "제목/질문/출처/단위/기준기간/표본수"를 못 박은 데이터 계약(dashboard.json) 을 만들고, 거기서 차트를 하나씩 뽑았습니다.
실제로 넣었던 조합 단계 프롬프트는 이거였어요.
개별로 PASS한 ECharts 차트 컴포넌트를 하나의 지역 정적 대시보드로 조합해줘.
상단 진단 → KPI → 가격·거래량 → 지역 비교 → 단지 비교 → 해석 범위 순서
공통 dashboard.json을 한 번만 fetch, 각 차트 로직은 독립 함수로 유지
원본 숫자와 대시보드 숫자를 비교하는 QA 표 생성
수치가 바뀌면 HTML을 수정하지 않고 JSON만 교체할 수 있게 구성
투자 추천이 아닌 데이터 분석 산출물로 작성
마지막 두 줄이 개인적으로 제일 중요했어요. "HTML은 껍데기, 숫자는 JSON" 으로 분리해두면 매달 데이터가 바뀌어도 화면을 다시 안 만들어도 되고, "투자 추천 아님"을 박아두니 AI가 괜히 "여기 사세요" 같은 말을 안 붙이더라고요.
데이터 계약(dashboard.json)은 이런 식이었습니다. 차트 하나가 딱 이 한 덩어리예요.
{
"chart_id": "price_median",
"title": "노원구 월별 중위 거래가격",
"question": "매매가와 전세보증금의 월별 중위값은 어떻게 움직였나?",
"source": "국토부 실거래가(raw_apt_trade/rent) · 전처리모듈",
"unit": "억원",
"categories": ["2025-01", "...", "2026-06"],
"series": [{ "name": "매매 중위가", "type": "line", "data": [5.77, "...", 6.4] }],
"sample_count": { "매매": 9718, "전세": 16219 },
"base_period": "2025-01 ~ 2026-06",
"note": "취소·직거래 제외 매매, 전세(월세=0)만. 결측월은 null."
}
최종적으로 노원구 대시보드에는 KPI 6장 + 차트 7개가 들어갔어요.
KPI: 서울 매매가격지수 전년동월대비 +14.33%, 전세가격지수 +7.87%, 전세가율 50.28%, 노원 매매거래량 652건(2026-06), 매매 중위가 6.4억, 전세 중위 보증금 3.0억
차트: 월별 중위가(매매·전세) · 월별 거래량 · 동별 매매중위가/거래량 · 평형대 포지셔닝 산점도 · 매매 상위 12개 단지 · KB 매매지수(서울·수도권·전국) · KB 전세가율
분석 대상은 노원구 아파트 실거래 매매 9,718건 / 전세 16,219건(2025-01~2026-06)이었습니다.
📸 캡처 넣을 자리 ① — Streamlit 실거래가 대시보드에서 노원구 월별 중위가/거래량이 뜬 화면
📸 캡처 넣을 자리 ② — ECharts로 조합한 노원구 정적 대시보드 상단(KPI 6장 + 진단 문장)
📸 캡처 넣을 자리 ③ — 원본 재계산 vs 대시보드 숫자를 대조한 QA 표(전부 PASS)
결과와 배운 점
막상 해보니, 1주차에 "노원구만" 수집했던 게 2주차 발목을 잡았어요. 정리하면 깨달음이 세 개였는데,
데이터 수집 범위가 시각화 가능 범위를 그대로 정한다. 강의 예시 화면은 서울 25개 자치구를 색칠한 예쁜 지도였는데, 저는 1주차에 노원구 하나만 긁었으니 자치구 지도가 애초에 안 됐어요. 게다가 KB 통계는 시/도·권역 단위(서울=1덩어리)라, KB만으로는 "노원구 색칠"이 원천적으로 불가 능하더라고요. 25개 자치구 지도를 하려면 공통 CSV를 따로 써야 했는데, 저는 욕심 안 내고 "노원구 단독 롱폼 대시보드"로 방향을 틀었습니다. 남의 데이터로 넓게 가느니 내 데이터로 깊게 가자는 쪽으로요. (다음에 전국 지도를 하고 싶으면 1주차 수집부터 넓혀야 한다는 걸 몸으로 배웠습니다.)
"작동하는 대시보드 ≠ 잘 전달되는 대시보드." 이게 이번 강의 최고의 문장이었어요. 발표하신 한 수강생분이 자기 차트 15개에 시각화 원칙을 대봤더니 14개가 개선 대상이었다고 하더라고요. 저도 첫 결과물은 그냥 "선이 그려지네" 수준이었는데, 기준을 대보니 손볼 게 많았습니다. 그래서 ▲차트 제목에 결론을 박고(예: "노원 매매 중위가 5.77억→6.4억"), ▲강조색은 1개만, ▲선차트는 실선/파선으로 매매·전세 구분, ▲단위·기준월·출처를 화면에 항상 표시하는 식으로 고쳤어요. "숫자를 보여주는 것"과 "메시지를 전하는 것"은 다른 일이더군요.
숫자를 못 믿으면 대시보드는 예쁜 거짓말이다. 그래서 대시보드 안에 QA 표를 넣어서 "원본을 다시 계산한 값 vs 화면에 뜬 값"을 나란히 붙였어요. 매매 월별거래량 합계 9,718 = 표본수 9,718, 매매 중위가 2025-01 재계산 5.77 = 화면 5.77 … 이런 식으로 전부 PASS를 확인하고서야 마음이 놓였습니다. 1주차의 "가짜 데이터 만들지 마"가 2주차엔 "화면 숫자를 원본으로 검산해"로 이어진 셈이에요.
나만의 꿀팁 두 개.
차트를 한 번에 다 그리지 말 것.
데이터 계약(JSON) → 차트 1개 → 검증 → 조합순서로 가니까, 어디서 숫자가 틀어졌는지 바로 잡혔어요. 한 방에 "완성 대시보드 만들어줘" 하면 뭐가 틀렸는지 찾다가 하루 다 갑니다.차트 라이브러리는 오픈소스 ECharts. 예쁜 걸로 유명한 HighCharts는 상업용 제약이 있어서, 회사에서 쓸 걸 생각하면 제약 없는 ECharts가 마음 편했어요. 그리고 의외로 시각화는 무거운 최고급 모델이 필요 없더라고요 — 복잡도가 낮아서 낮은 모델로도 충분했습니다. (돈 굳는 팁)
그리고 이번에 만든 "JSON은 숫자, HTML은 껍데기" 구조가 진짜 마음에 들었어요. 1주차에 곁다리로 붙여본 온비드 공매 자동수집 파이프라인이 매일 데이터를 새로 쌓는데, 거기에 이 대시보드 틀을 붙이면 "매일 갱신되는 공매 대시보드" 가 되겠더라고요. 수집(1주차)과 시각화(2주차)가 하나로 이어지는 그림이 이제야 보입니다.
다음 3주차는 주식 대시보드라고 하네요. 이번 부동산 실습의 흐름(계약→차트→검증→조합)을 그대로 재사용하되, "내가 뭘 보고 싶은지"를 먼저 정하고 가라는 게 강사님 숙제였습니다. 저는 ETF 포트폴리오 쪽으로 목표를 잡아볼 생각이에요.
