소개
2, 3주차에 만든 ECharts 미니 대시보드는 화면과 데이터가 한 파일에 뒤섞여 있어서, 데이터가 바뀔 때마다 HTML과 차트 코드를 같이 손봐야 했다. 이번 실습에서는 이 구조를 정리해서, 데이터 파일만 바꾸면 화면이 그대로 따라오는 템플릿을 만들어 보고자 했다.
목표는 두 가지다. 첫째, 글꼴, 여백, KPI 카드, 반응형 배치처럼 두 대시보 드가 공통으로 쓰는 부분을 common/ 폴더로 분리한다. 둘째, 데이터와 차트 설정은 주제별 폴더에 남겨서, 부동산과 주식을 억지로 하나의 구조로 합치지 않는다.
진행 방법
Claude Code로 4주차 실습용 시작 파일(week4-dashboard-starter.zip)을 먼저 검수하고, 발견한 문제를 고친 다음, 실제로 데이터를 교체하는 순서로 진행했다.
1단계, 시작 파일 검수
압축을 풀어 로컬 서버로 두 화면(real-estate-dashboard.html, stock-dashboard.html)을 직접 띄우고, 콘솔 오류와 렌더링 결과를 브라우저에서 확인하도록 요청했다. 이 과정에서 결함 4 개를 찾았다.
2단계, 결함 수정과 검증
클로드에게 수정과 재검증을 요청했다.
3단계, 데이터만 교체
handout 3장에 있는 프롬프트를 그대로 사용해서, 화면 구조는 건드리지 않고 데이터 파일만 바꾸는 실습을 진행했다.
현재 대시보드의 화면 구조와 차트 설정은 바꾸지 마.
주제별 dashboard-data.json만 수정해줘.
변경할 내용:
- 기준일: 2026-07-07
- 상단 KPI: [KPI와 값]
- 차트와 표에 사용할 데이터: [새 데이터 파일 또는 값]
검증:
- JSON 문법을 확인한다.
- 로컬 서버에서 KPI, 차트, 표가 함께 바뀌었는지 확인한다.
- null, NaN, Infinity, undefined가 화면에 보이지 않는지 확인한다.
- 값이 "-"로 표시되는 칸이 없는지 확인한다.
- 브라우저 콘솔 오류를 확인한다.
완료 후 수정한 파일과 검증 결과를 알려줘.
결과와 배운 점
가장 크게 배운 점은, 템플릿을 만드는 실습에서 진짜 위험한 부분은 화면 레이아웃이 아니라 데이터 타입 처리라는 것이다. JSON에 숫자를 따옴표로 감싸는 실수는 문법 오류도, 콘솔 오류도 내지 않는다. KPI 카드가 조용히 -로 바뀌기 때문에, 수강생이 스스로 원인을 찾기 어렵다.
부동산 쪽 데이터도 같은 방식으로 최신 기준일로 갱신하려고 한다.
ETF 대시보드 - 한국 ETF
