01 · 대시보드 만들기

1. 실습 목표

재무 업무 효율화하기에서 사용한 분개장 엑셀로 손익을 집계하고, KPI 카드 → 월별 차트 → 계정과목 → 거래처 → 실제 분개 라인까지 클릭으로 파고드는 단일 HTML Dashboard를 만듭니다. 화면은 template.html, 집계는 build_dashboard.py로 나누어 데이터와 화면을 따로 고칠 수 있게 합니다.

아래 프롬프트를 순서대로 하나씩 붙여 넣습니다. 한 번에 모아서 넣지 않습니다. 각 단계가 끝날 때마다 결과를 확인하고 다음으로 넘어갑니다.

2. 강의 자료

Download

Journal_Data.zip 다운로드

분개장 2개년(분개장_2020년.xlsx 54,673행, 분개장_2021년.xlsx 73,210행)과 시산표 2개년, 재무제표가 들어 있습니다. 압축을 풀어 실습 폴더의 input 안에 넣고 시작합니다.

실습 준비에서 만든 폴더 안에 web-dashboard 작업 폴더를 만들고 앱에서 엽니다. input 폴더에는 제공된 분개장만 넣습니다. 기존에 다른 자료로 만든 대시보드 파일을 덮어쓰지 않도록 현재 폴더를 확인합니다.

실습 준비에서 만든 .venv에는 openpyxl이 설치되어 있습니다. web-dashboard 폴더에서 Python 스크립트를 실행할 때는 상위 폴더의 ..\.venv\Scripts\python.exe를 사용합니다.

3. 시작 지점

• 입력: input/분개장_2020년.xlsx, input/분개장_2021년.xlsx
• 출력: build_dashboard.py, template.html, data/2020.json, data/2021.json, index.html
• 기술 범위: Python 표준 라이브러리 + openpyxl, 외부 라이브러리 없는 HTML/CSS/JavaScript
• 제외: 외부 CDN, 서버, 데이터베이스, 새 패키지 설치

원본 엑셀은 읽기만 하고 수정하지 않습니다. index.html은 완성 후 배포 실습에서 파일 하나만 올립니다. 분개 상세도 이 파일 안에 포함되므로 공개 가능한 제공 자료만 사용합니다.

4. 만들어지는 구조

flowchart TB
  X["input/*.xlsx<br/>분개장 원본"] --> P["build_dashboard.py<br/>연도별 집계"]
  P --> J["data/2020.json<br/>data/2021.json"]
  T["template.html<br/>화면·자리표시자"] --> B["주입"]
  J --> B
  B --> D["index.html<br/>단일 HTML"]
  class X,T source
  class D output

• build_dashboard.py는 집계와 주입만 담당합니다.
• template.html은 화면만 담당하며 /*__DASHBOARD_DATA__*/[] 같은 자리표시자를 가집니다.
• 화면만 바뀌는 요청이면 template.html만 고치고 다시 빌드합니다.

5. 실습 프롬프트

0단계 · 작업 규칙 정하기

먼저 세션 규칙을 정해 두면 이후 단계에서 불필요한 재작업이 줄어듭니다.

0단계 프롬프트

이 세션은 실습입니다. 아래를 세션 내내 지켜 주세요.
 
- 마무리 설명은 5줄 이내. 표는 쓰지 마세요.
- 파일은 편집 도구로만 수정하고, 문자열 치환 스크립트로 패치하지 마세요.
- 인접한 수정은 한 번에 묶으세요.
- 화면만 바뀌는 요청이면 template.html만 고치고 build_dashboard.py는 건드리지 마세요.
- 각 단계가 끝나면 그 단계의 파일이나 화면에서 확인할 결과를 알려 주세요. 로컬 서버와 스크린샷은 필요 없습니다.
- data/*.json이 최신이면 재집계하지 말고 HTML만 다시 만드세요.
- 새 데이터 필드가 필요한 요청이면 먼저 한 줄로 알리고 진행하세요.
- 요청하지 않은 개선은 하지 마세요.
- Python 실행에는 상위 폴더의 ..\.venv\Scripts\python.exe를 사용하세요.
 
이 메시지에는 "확인" 한 줄만 답하세요.

1단계 · 데이터 구조 파악

1단계 프롬프트

input 폴더에 있는 분개장 엑셀 파일의 구조를 빠르게 파악해 주세요.
컬럼 이름, 행 수, 데이터 기간, 계정코드 체계, 전표번호 형식을 알려 주세요.
파일은 아직 만들지 말고, 파악한 내용만 설명해 주세요.

Note

이 단계에서 헤더 위치가 파일마다 다르다는 점(2021년 파일은 첫 행이 비어 있음)을 미리 확인해 두면 다음 단계 코드가 한 번에 통과합니다.

확인: 두 파일의 기간·행 수와 헤더 위치를 직접 확인합니다. 결과가 다르면 집계를 시작하기 전에 파일 경로와 헤더 행을 다시 살펴봅니다.

2단계 · 집계 스크립트 만들기

2단계 프롬프트

분개장 엑셀을 읽어 연도별로 집계한 JSON을 만드는 파이썬 스크립트 build_dashboard.py를 만들어 주세요.
input 폴더에 있는 분개장 엑셀을 모두 찾아, 연도마다 data/2021.json 같은 파일로 저장해 주세요.
연도는 파일명이 아니라 데이터의 일자에서 읽어 주세요.
계정코드 앞 2자리로 손익 항목을 분류합니다. 63은 매출, 53은 매출원가, 71과 72는 판관비입니다.
매출은 대변 금액을, 나머지는 차변 금액을 양수로 잡아 주세요.
영업이익은 매출에서 매출원가와 판관비를 뺀 값으로 계산해 주세요.
연도별 합계와 월별 합계를 모두 구하고, 처리 결과를 콘솔에 출력해 주세요.
엑셀이 JSON보다 새로울 때만 다시 집계하고, 그렇지 않으면 건너뛰게 해 주세요.
새 패키지는 설치하지 말고 openpyxl만 사용해 주세요.

확인: ..\.venv\Scripts\python.exe build_dashboard.py를 실행해 data/2020.json과 data/2021.json이 생기는지 봅니다. 콘솔의 연도별 합계에서 영업이익 = 매출 − 매출원가 − 판관비가 성립해야 합니다. 이때 화면 파일은 아직 없어도 됩니다.

3단계 · 화면 만들기

3단계 프롬프트

data 폴더의 연도별 JSON을 모두 합쳐서 단일 HTML 대시보드를 만들어 주세요.
화면은 template.html에 만들고, build_dashboard.py가 그 안에 표시해 둔 자리에 JSON을 채워 넣어 index.html을 생성하는 구조로 해 주세요.
연도 선택 버튼은 JSON 개수에 맞춰 자동으로 늘어나게 해 주세요.
KPI 카드 4개(매출, 매출원가, 판관비, 영업이익)에 전기 대비 증감률을 함께 표시하고,
그 아래에 월별 추이 선 차트를 두어 연도끼리 비교할 수 있게 해 주세요.
차트는 외부 라이브러리 없이 SVG로 직접 그려 주세요.

확인: 스크립트를 다시 실행해 index.html을 브라우저에서 엽니다. 두 연도 선택 버튼, KPI 카드 4개, 12개월 차트가 보이는지 확인합니다. 파일을 더블클릭해 열어도 동작해야 합니다.

4단계 · 클릭으로 파고들기

4단계 프롬프트

KPI 카드를 클릭하면 차트와 아래 상세 테이블이 그 항목 기준으로 바뀌도록 해 주세요.
상세 테이블에는 그 항목에 속한 계정과목별 금액, 비중, 전기 대비 증감률을 보여 주세요.
차트에서 월을 클릭하면 그 달만 강조되고, 다시 클릭하면 연간 전체로 돌아오게 해 주세요.
월을 선택해도 12개월 선은 그대로 두고 선택한 달만 강조해 주세요.

확인: KPI를 바꾸면 차트와 계정과목 표가 함께 바뀌는지 봅니다. 월을 두 번 클릭하면 선택과 해제가 되고, 12개월 선은 계속 보여야 합니다.

5단계 · 거래처까지 펼치기

5단계 프롬프트

상세 테이블의 계정 행을 클릭하면 그 아래로 거래처 상위 10개사가 펼쳐지도록 해 주세요.
순위, 거래처명, 금액, 비중을 보여 주고, 11위 이하는 "기타 N개사"로 묶어 주세요.
월이 선택된 상태라면 거래처 목록도 그 달 기준으로 바뀌어야 합니다.

확인: 한 계정에서 거래처 상위 10개사와 기타를 합친 금액이 계정 금액과 맞는지 봅니다. 월을 선택하면 같은 계정의 거래처 금액도 달라져야 합니다.

6단계 · 실제 분개 라인까지 펼치기

6단계 프롬프트

거래처를 클릭하면 그 거래처의 실제 분개 라인(일자, 적요, 금액, 전표번호)이 열리도록 해 주세요.
분개 라인을 전부 HTML에 넣으면 파일이 지나치게 커지니,
거래처마다 월별로 금액 상위 5건씩만 저장해 주세요.
저장 건수는 스크립트 위쪽에 상수로 두어 조절할 수 있게 해 주세요.

Warning

이 단계부터 파일이 커집니다. 상수를 올리면 index.html이 수 MB 단위로 늘어나므로, 화면에 뜰 수 있는 거래처의 라인만 저장하도록 범위를 좁히는 것이 중요합니다.

확인: 계정 → 거래처 → 분개 라인을 차례로 열고, 표시된 전표번호·금액 한 건을 원본 분개장에서 찾습니다. index.html 크기도 확인합니다.

7단계 · 이상징후 점검 카드

7단계 프롬프트

KPI 카드 아래에 이상징후 점검 카드를 추가해 주세요. 다음 세 가지를 판정합니다.
1) 주말(토, 일)에 계상된 전표 비중이 5%를 넘는지
2) 선택한 항목의 월별 금액이 평월(중앙값)의 1.5배를 넘는 달이 있는지
3) 매출 상위 1개사 비중이 20%를, 상위 10개사 비중이 75%를 넘는지
판정 기준값은 상수 한 곳에 모아 주시고,
각 항목은 아이콘과 "정상 / 주의" 문구를 함께 표시해 주세요.
급증한 달은 차트에도 표시해 주세요.

확인: 이상징후 카드 3개와 정상 / 주의 문구가 보이는지 확인합니다. 선택한 KPI와 월을 바꿔도 판정 대상이 무엇인지 알 수 있어야 합니다.

8단계 · 판정 근거 전표 보여 주기

8단계 프롬프트

점검 항목을 클릭하면 그 판정의 근거가 된 실제 전표가 펼쳐지도록 해 주세요.
주말 항목은 표본이 아니라 전체 주말 라인에서 금액 상위 50건을 뽑아,
일자, 요일, 거래처, 계정과목, 적요, 금액, 차대, 전표번호를 보여 주세요.
급증 항목과 집중 항목은 이미 저장해 둔 분개 라인에서 뽑고,
표본에서 뽑은 결과라는 점을 화면에 함께 표시해 주세요.

Note

“표본에서 뽑았다”는 표시는 실무에서 중요합니다. 전수 결과와 표본 결과를 화면에서 구분하지 않으면 검토자가 근거를 과신하게 됩니다.

확인: 주말 근거의 요일이 모두 토·일인지 원본에서 몇 건을 대조합니다. 급증·집중 근거에는 표본이라는 표시가 보여야 합니다.

9단계 · 디자인 입히기

9단계 프롬프트

현재 대시보드를 재무 검토 화면으로 읽기 쉽게 다듬어 주세요.
- 흰색 또는 밝은 배경, 진한 글자, 차분한 강조색을 사용해 주세요.
- 금액과 증감률의 숫자 정렬을 통일하고, 표의 행과 카드 사이에 충분한 간격을 주세요.
- 정상·주의는 색뿐 아니라 문구로도 구분해 주세요.
- 390px 너비와 데스크톱에서 표와 버튼이 잘리지 않게 해 주세요.
- 기존 집계값과 클릭 동작은 바꾸지 마세요.

확인: 브라우저에서 숫자가 읽히는지, 버튼을 키보드로 사용할 수 있는지, 390px 너비에서 내용이 잘리지 않는지 확인합니다. 앞 단계의 KPI 값과 클릭 동작은 그대로여야 합니다.

6. 확인 절차

2단계 이후에는 코드가 바뀔 때마다 아래를 실행합니다. 3단계 이후에는 생성된 화면도 새로고침합니다.

..\.venv\Scripts\python.exe build_dashboard.py

• 콘솔에 연도별 행 수와 매출·매출원가·판관비·영업이익이 출력됩니다.
• JSON이 엑셀보다 최신이면 재집계를 건너뜁니다 문구가 나오고 HTML만 다시 만들어집니다.
• index.html을 탐색기에서 더블클릭해 브라우저로 엽니다.

Warning

편집기에 내장된 미리보기 창은 스크립트를 실행하지 않는 정적 스냅샷인 경우가 많습니다. 클릭이 동작하지 않으면 파일 문제가 아니라 미리보기 환경 문제일 수 있으므로, 반드시 실제 브라우저에서 확인합니다.

7. 검증 기준

Success

• data/2020.json, data/2021.json이 생기고 연도는 파일명이 아니라 일자에서 읽힘
• 각 연도에서 월별 12개월 합계가 연간 합계와 일치함
• 영업이익 = 매출 − 매출원가 − 판관비가 화면과 JSON에서 모두 성립함
• 계정과목별 금액의 합이 항목 합계와 일치하고, 거래처 상위 10개사 + 기타가 계정 금액과 일치함
• KPI 카드를 클릭하면 차트와 상세 테이블이 같은 항목으로 바뀜
• 월을 클릭하면 그 달이 강조되고 12개월 선은 그대로 남으며, 다시 클릭하면 연간으로 돌아옴
• 계정 → 거래처 → 분개 라인까지 세 단계가 순서대로 펼쳐짐
• 이상징후 3개 항목이 기준값 상수 하나로 판정되고, 근거 전표에 전수/표본 구분이 표시됨
• 저장된 주말 라인이 모두 실제 토·일이고 요일·차대 표기가 유효함
• index.html 하나만 열어도 외부 요청 없이 전부 동작함

8. 자주 막히는 지점

• 헤더 위치가 파일마다 다름: 첫 행이 비어 있는 파일이 있으므로 헤더 행을 찾아 그 아래부터 읽습니다.
• JSON 스키마가 바뀌었는데 재집계를 건너뜀: 새 필드를 추가한 단계에서는 “필드가 없으면 다시 집계”하는 조건을 함께 넣습니다.
• 파일 크기 급증: 분개 라인 저장 상수를 3–5 사이로 두고, 화면에 뜰 수 있는 거래처로 범위를 좁힙니다.
• 클릭이 안 됨: 미리보기 창이 아니라 실제 브라우저에서 엽니다.
• 선이 사라짐: 월 선택 시 선을 지우지 말고 선택한 달만 강조하도록 요청합니다.

9. 다음 단계

기본 대시보드를 완성했다면 02 · 대시보드 배포하기로 이어갑니다. 전표·발주·승인 자료를 연결해 월말 집행을 판단하려면 A · 월말 예산 집행 보고를 선택합니다.