GH · DATA VISUALIZATION · 2026.05.21

Claude Code로 만드는
사업 공정 대시보드

GH 데이터 시각화 1일 워크숍 · 17명 · 4직군 분기

WSL2 + Claude Code Plan 모드 MVD 5블록 직군별 4 데이터셋 매주 갱신 사이클

PRESENTER

김혜련 · artetlab

gh.artetlab.com 강의 교안 QR 코드

강의 교안
gh.artetlab.com

SPEAKER

강사 소개

김혜련 (Kyra Kim)

김혜련 Kyra Kim

이노핏파트너스 프로젝트 교수 · artetlab 대표

AI Automation Make.com · n8n Claude Code Agent Engineering

저서

『당신의 첫 AI 직원』

서울경제경영출판사 · 2026.02

커뮤니티

GPTers 스터디장 (16~21기)

AI 자동화 커뮤니티 운영

주요 강의 이력

  • · LG AX Camp for Leaders (임원교육)
  • · LG U+ 리더 AI 업무자동화 심화 교육
  • · 멀티캠퍼스 — n8n AI 자동화 실전
  • · 세계일보 Vibe-coding 코칭
  • · SKT Design Camp · Dify 교육 코칭
  • · 한솔 HCLP AX MBA · KCH그룹 외 다수

OPENING · 1/2

배달 라이더는 30초 안에
3건을 동시에 결정한다.

남은 시간 · 주문 수 · 이동 경로가 지도 위에 실시간으로 그려져 있다. 한 화면의 대시보드.

픽업해야 할 가게 위치, 다음 배달지, 도로 정체 상황, 예상 시간 — 라이더는 이 모든 것을 한 화면에서 확인한다.

Rider Dashboard
LIVE · 30초 결정
남은 시간
14분
픽업 대기
3건
거리
2.1km
주문 #A — 분식
D-3분
주문 #B — 치킨
D-8분
주문 #C — 커피
D-14분

만약 이 정보가 카톡으로 왔다면? 30초 결정은 불가능하다.

OPENING · 2/2

그런데 우리는, 라이더보다 큰 결정을
라이더보다 나쁜 화면으로 한다.

라이더

만 원짜리 결정
실시간 대시보드 한 화면
30초 안에 판단

우리

억대 결정
PDF 보고서 30장
회의 잡혀야 판단

결정이 클수록 화면은 더 조악해진다 — 거꾸로 됐다.
오늘 그 역설을 뒤집는다.

오늘의 흐름

7시간, 5블록 대시보드 1개

1

데이터 시각화 4차 물결

왜 지금 우리 차례인가

2

보고서 vs 대시보드

의사결정 가능한 화면이란

3

오늘 만들 두 가지

Showcase + MVD 미리보기

4

환경 셋업

Codex 한 줄로 WSL2 + Claude Code

5

Plan 모드 기획

던지기 전에 종이에 그린다

6

직군별 데이터셋 4종

내 자리 찾기

7

단계적 빌드

KPI → 진행률 → 알림 → 차트 → 다듬기

8

인사이트 격상

룰 기반 자동 판정

9

운영

저장·공유·매주 갱신

10

마무리

Callback · Action Plan · 질문

CHAPTER 01

데이터 시각화
4차 물결.

60년 동안 진입 장벽이 단계적으로 낮아져 왔다.
이번 차례는 — 보고서만 받던 사람이 직접 만든다.

01. 4 물결 한 장

의사결정용 화면을 누가, 얼마 만에 만드는가

1960

1차 — 종이 보고서

"보고서가 정리됐을 때쯤, 결정 시점은 이미 지나가 있다."

기획실 다수 / 주 1회

1985

2차 — 엑셀

"컴퓨터로 할 일인가? 손으로 계산하면 빠른데."

개인 1인 / 차트는 부속물

2003

3차 — BI 도구

BI = Business Intelligence

"그래봤자 IT부서가 한 달 걸려 만들어주는 거 아닌가."

분석가 전용 / 라이선스 비쌈

2026

4차 — AI 대시보드

"AI가 그렇게 잘 한다고? 결국 사람이 더 빠르지."

1인 / 1일 / 1대시보드

매 물결마다 회의론자가 있었다. 그리고 매번 회의론자가 졌다.

02. 오늘의 가설

4차 물결의 의미는
"분석가가 똑똑해진 것"이 아니라,

지금까지 보고서만 받던 사람이
직접 만들 수 있게 된 것이다.

여러분이 그 첫 세대다. 그리고 오늘 시작한다.

CHAPTER 02

보고서를 보는 사람과
대시보드를 보는 사람은
같은 결정을 내릴 수 없다.

01. 비교표

정보량이 같아도, 배치가 다르면 결정의 속도와 질이 달라진다.

차원보고서 (PDF/HWP)대시보드
읽는 시간15~30분30초
갱신 주기주간/월간실시간 또는 일간
의사결정 시점회의가 잡혀야 함그 자리에서
지연·이슈 발견읽다가 발견적색 배지로 바로 보임
만드는 사람기획실 직원 다수본인이 직접

02. MVD 정의

오늘 우리가 만드는 것 —
MVD

Minimum Viable Dashboard — 최소 의사결정 화면

완전한 BI 시스템이 아니다.
의사결정 1건을 받쳐줄 수 있는 최소 화면 한 장.
5블록(헤더·KPI 4·진행률 5·알림·차트 1)이 다 들어가면 그 자체로 충분하다.

→ 다음 회의에서 "우리 부서 MVD 한 장 만들어봤어요"라고 말할 때, MVD가 곧 워딩 무기가 된다.

03. 흔한 오해

예쁘면 좋은 대시보드인가

❌ 오해

"예쁜 디자인이 좋은 대시보드다"

예쁜 차트 10개를 늘어놓고 만족하기 쉬움.

✓ 진실

"차트 1개당 결정 1개를 못 쓰면 그 차트는 빼라"

예쁨은 부산물, 결정 가능성이 본질.

오늘 만들 차트마다 종이 위에 "이걸 봐서 무슨 결정을 하는가?"를 한 줄로 쓰는 연습을 한다.

CHAPTER 03

오늘 만들 두 가지.
Showcase + MVD.

01. 두 가지를 본다

강사 시연 1개 + 여러분이 만들 1개

① SHOWCASE — 강사 시연 1분

GH 종합사업 대시보드 미니

참고자료(GH 종합사업관리시스템)를 1페이지로 압축한 버전.

의미: "1일에 만들 수 있는 최대치"의 좌표.

② MVD — 여러분 모두가 완성

5블록 미니 대시보드

17명이 동일한 골격을 만들고, 본인 직군 데이터로 채운다.

의미: 오늘의 약속 — 5블록 다 채우고 퇴근한다.

두 화면의 차이가 = 오늘의 학습 곡선

02. Showcase 화면 미리보기

하남교산 공공주택 종합 현황 — 1페이지 압축

예시 링크 ↗
하남교산 공공주택 종합 현황
2026-06-01 기준 · 전체 진행률 65%
총사업비
5,783억
공정률
58.9%
지연사업
2건
총세대수
8,607
토지보상
95%
기반시설
80%
부지조성
49%
주택건설
18%
주택공급
7%
지연 알림 · 남양주왕숙 공공주택 — 계획 25% → 실적 18% (7% 지연) · 즉시 검토 필요

참고3 P.7 — GH 종합사업관리시스템 단순화 버전

03. MVD 5블록

모두 동일한 5블록 골격

1

헤더

이름·기준일·달성률

2

KPI 카드

직군별 핵심 4개

3

진행률 바

5개 단계·부서

4

알림 리스트

임계치 초과

5

메인 차트

간트·막대·도넛·라인

오늘의 약속

모두 1번부터 5번까지 다 채우고 퇴근한다. 시간 남으면 Showcase 블록(분야별 카드·간트·도넛)을 1~2개 얹어 본다.

CHAPTER 04

환경 셋업.
Codex 한 줄로 끝낸다.

설치 6개를 1개씩 하지 않는다. 무료 Codex에게 통합 프롬프트 1번 던지고, 결과만 확인한다.

01. 도구 지도

우리가 깔 6개 도구가 하는 일

Codex 앱 (무료)

설치 명령 대신 실행해 줄 조수. 오늘의 시작점.

WSL2

Windows 안에 미니 리눅스(Ubuntu).

Node.js

Claude Code가 돌아갈 엔진.

Claude Code

대시보드를 시킬 도구. 오늘의 주인공.

VS Code

코드와 결과물을 보는 창.

Claude Code Extension

VS Code 안에서 Claude Code를 바로 실행·연동.

핵심 — WSL2·Ubuntu·Node·Claude Code는 Codex에게 통합 프롬프트 1번으로 맡긴다. 직접 하는 건 ① Codex 가입 ② Claude Code 확장 설치, 둘뿐.

02. Step 1 — Codex 무료 설치

유일하게 손으로 하는 단계

왜: Claude Code는 유료 구독이 필요합니다. Codex는 무료 계정으로 시작 가능하고, 이후 복잡한 설치 명령을 한국어로 시키면 알아서 실행해 줍니다.

  1. 1openai.com에서 무료 계정 생성
  2. 2Windows용 Codex 데스크탑 앱 다운로드
  3. 3설치 → 로그인 → 첫 화면 "준비 완료" 확인

왜 Claude가 아니고 Codex?

Codex (OpenAI) — 무료 계정으로 시작 가능. 오늘은 설치 명령 실행용으로만.

Claude Code (Anthropic) — 유료 구독. 본 게임은 여기서 한다. Codex가 설치를 끝내준 다음 무대.

보안망 주의: 회사 보안팀에 사전 확인. 일반적으로 설치는 되지만 외부 로그인이 막힐 수 있음.

03. Step 2 — Codex에 통합 프롬프트 1회

한 번에 4개를 깐다 — WSL2 + Ubuntu + Node.js + Claude Code

CODEX · 통합 프롬프트
내 Windows 11 PC에 Claude Code를 쓸 수 있는 환경을 한 번에 만들어줘. 다음 순서로 진행하되, 각 단계마다 성공 여부를 확인하고 다음으로 넘어가: 1. WSL을 처음부터 WSL2 + Ubuntu 22.04 LTS로 설치 (PowerShell 관리자 권한) # wsl --install -d Ubuntu-22.04 → 기본이 WSL2 2. 설치 중 재부팅이 필요하면 안내해주고, 재부팅 후 Ubuntu 초기 설정(username·password)까지 대기 3. Ubuntu 안으로 들어가서 nvm을 설치하고 Node.js LTS 설치 # curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # source ~/.bashrc && nvm install --lts 4. npm으로 Claude Code 전역 설치 # npm install -g @anthropic-ai/claude-code 5. 마지막으로 claude --version 실행해서 설치 확인 결과 보여줘 각 단계가 끝날 때마다 "✓ N단계 완료"로 알려주고, 에러 나면 거기서 멈춰서 에러 메시지를 그대로 보여줘.

Codex가 단계별로 명령을 실행하면서 성공·실패를 보고한다. 여러분은 화면을 본다.

04. 진행 확인 — 단계별 성공 표시

Codex가 알려주는 4개 체크포인트

1

WSL2 + Ubuntu 22.04 설치 완료

PowerShell에서 wsl -l -v → VERSION 2 확인

✓
2

Ubuntu 초기 설정 + 재부팅

username·password 설정 (비밀번호 입력 시 화면 안 보임 = 정상)

✓
3

nvm + Node.js LTS 설치

Ubuntu 터미널에서 node -v → v20.x 확인

✓
4

Claude Code 설치 + 로그인

claude --version → 버전 출력 / 첫 claude 실행 시 브라우저 로그인

✓

4개 모두 ✓가 뜨면 본 게임 준비 완료. 다음 단계는 VS Code 설치 — 이것도 터미널로.

05. Step 3 — VS Code + Claude Code 확장 설치

VS Code부터 Claude Code 확장까지 — 터미널에서 끝낸다

왜: Windows에 기본 내장된 winget으로 설치하면 다운로드·실행·동의 클릭이 모두 자동. 확장도 같은 터미널에서 한 줄로.

PowerShell
# 1) VS Code 설치 (Windows 기본 패키지 매니저 winget) winget install -e --id Microsoft.VisualStudioCode # 2) 새 PowerShell 창 열기 (PATH 적용) # 3) 확인 — 버전 code --version # 4) Claude Code 확장 설치 (VS Code 1.98 이상) code --install-extension anthropic.claude-code

확장은 GUI로도 수동 설치:

VS Code에서 Ctrl+Shift+X → "Claude Code" 검색 → Install 클릭.

Codex에 시키는 버전:

"winget으로 VS Code를 설치하고, code --version으로 버전 확인 후, Claude Code 확장(anthropic.claude-code)을 설치해줘."

06. Step 4 — 터미널 기본을 WSL로

VS Code에서 Ctrl+` 누르면 자동으로 Ubuntu가 뜨게

왜: 매번 PowerShell이 뜨고 wsl 입력하는 것을 없앤다. 한 번 설정으로 끝.

GUI 방법

  1. 1. VS Code에서 Ctrl+Shift+P
  2. 2. Terminal: Select Default Profile
  3. 3. Ubuntu (WSL) 선택
  4. 4. Ctrl+`로 확인

settings.json 직접 추가

{ "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", "terminal.integrated.profiles.windows": { "Ubuntu (WSL)": { "path": "wsl.exe", "args": ["-d", "Ubuntu-22.04"] } } }

완료 점검: VS Code 터미널에서 claude --version → 버전이 나오면 셋업 끝. 이제 본격적으로 대시보드를 만들 준비가 됐다.

07. 막힘 대응 — 1순위 규칙

어디서 막히든 Codex에게 한국어로 그대로 물어본다.

CODEX · 막힘 대응
방금 Claude Code 설치하다가 이런 에러가 났어. 원인이 뭐고 어떻게 해결해? [에러 메시지 붙여넣기] 해결 명령을 한 줄씩 알려주고, 각 명령이 뭘 하는지도 한 문장씩 설명해줘.

1순위

Codex에게 한국어로 물어본다 (90% 해결)

2순위

옆자리 짝꿍과 화면 비교 (5% 해결)

3순위

강사에게 손 들기 (나머지 5%)

CHAPTER 05

Plan 모드 기획.
던지기 전에 종이에 그린다.

01. Plan 모드란

"Claude야 대시보드 만들어줘" 한 줄로 망하는 패턴 막기

❌ 일반 모드

"대시보드 만들어줘" → Claude가 바로 코드를 씁니다.

30분 코딩한 후 "내가 원하던 게 아니야"를 발견. 처음부터 다시.

✓ Plan 모드

"대시보드 만들어줘" → Claude가 먼저 계획을 제시하고 여러분 승인을 기다립니다.

잘못된 방향으로 30분 코딩하는 일이 사라집니다.

전환 키: Claude Code 화면에서 Shift+Tab → 하단에 "plan mode on" 표시.

02. Plan 모드 사용 흐름

한 번 켜고, 데이터·목적·사용자 3요소로 던진다

CLAUDE CODE · 첫 프롬프트
# Shift+Tab으로 Plan 모드 ON 후 Docs/dataset_01_progress.csv는 우리 부서 사업 6개의 월별 공정률·집행률 데이터다. 목적: 매주 부서장 회의에서 "지연 사업이 어디고, 다음 결정이 뭔지" 30초에 답하는 것. 사용자: 우리 부서장 (현장 출신, 차트보다 숫자 선호). 원하는 산출물: 단일 HTML 파일로 MVD 5블록(헤더·KPI 4·진행률 5·알림·차트 1) 대시보드. Plan 모드로 먼저 설계를 제안해줘. 코드는 내가 승인한 다음에 작성.
1

Plan 검토

읽어보고 빠진 거 있는지

2

수정 요청 (3~4회)

"이 부분만 바꿔서 다시"

3

승인 → 빌드

Tab 또는 "go"

03. 기획 4질문

Plan 모드 켜기 전, 종이에 답하기

WHO

누가 보는가

사장 / 팀장 / 실무자. 페르소나가 다르면 KPI 밀도와 화면 깊이가 달라진다.

WHAT

무엇을 보는가

핵심 KPI 5개 이내. 후보 10개 적었으면 5개 자른다. 잔여 5개는 별도 페이지.

WHEN

언제·얼마나 자주 보는가

일간(현장 점검) / 주간(공정 회의) / 월간(이사회 보고). 주기가 화면 밀도를 결정.

WHY

어떤 결정을 내리는가

"이 화면을 보고 무슨 결정?"을 한 문장으로 못 쓰면 빼라.

04. Plan → Build 흐름

사용자가 Tab 누르기 전까지 — Claude는 코드 쓰지 않는다

flowchart LR A["① Shift+Tab
Plan 모드 ON"] --> B["② 3요소 프롬프트
데이터·목적·사용자"] B --> C["③ Claude:
progress.csv 읽기"] C --> D["④ Claude:
Plan 제시
(코드 없이)"] D --> E{"⑤ 사용자
검토"} E -->|이 부분만 수정| D E -->|Tab 승인| F["⑥ Claude:
dashboard.html 생성"] F --> G["⑦ 완료
+ 미리보기 안내"]

잘못된 방향으로 30분 코딩하는 일이 사라진다.

장점 — 순차 방식 대비

한 번에 일관된 구조로 나오고, 중간에 색·레이아웃 충돌(예: 라임 vs 블루)을 방지한다. 계획 단계에서 방향을 수정하는 비용이 싸다.

주의 — 빠지면 안 되는 것

요구사항이 빠지면 계획에도 빠진다. 디자인 규칙·검증 가드레일을 처음부터 넣는 것이 핵심 — 시행착오로 얻은 규칙을 미리 박아둔다.

CHAPTER 06

직군별 데이터셋 4종.
내 자리부터 찾는다.

01. 직군별 4종 (총 17명) — CSV 다운로드

강사가 준비한 샘플 CSV — 본인 부서에 가장 가까운 것을 다운로드

데이터셋대상 직군KPI 4종메인 차트다운로드
① 사업 공정형A군 (6명)
사업단·주택건설·주택기획		총사업비·공정률·지연건수·세대수분기 간트⬇ progress.csv
② 인허가·정책형B군 (3명)
도시기획·정비기획·임대주택		진행중·평균처리일·지연·완료율단계별 칸반 막대⬇ permit.csv
③ 품질·안전형C군 (3명)
품질관리·안전관리		점검완료율·무사고일수·미시정·위험등급월별 막대+합격률 라인⬇ safety.csv
④ 조직·운영형D군 (5명)
경영기획·인사·감사		예산집행률·교육이수율·채용·감사시정월별 예산 라인+막대⬇ org_kpi.csv

주택기획부 2명: ① 또는 ② 양쪽 모두 적용 가능. 본인이 더 자주 다루는 데이터 쪽으로 자율 선택. 다운로드한 CSV는 작업 폴더의 Docs/ 안에 원래 파일명(dataset_01_progress.csv 등) 그대로 저장. — 프롬프트가 이 경로를 그대로 참조합니다.

① 작업 폴더 만들기

GH-progress 폴더 생성 → 그 안에 Docs 폴더 생성 → 다운받은 progress.csv를 Docs로 이동

② Claude Code 켜고 /init

GH-progress에서 Claude Code 실행 → /init 입력 → CLAUDE.md 자동 생성

/init이 하는 일: Claude Code가 폴더 전체(파일·구조·데이터)를 훑어 "이 프로젝트가 뭔지" 요약한 CLAUDE.md를 만든다. 이후 모든 대화에서 자동으로 읽혀, 매번 프로젝트를 다시 설명할 필요가 없어진다.

02. 표준화 체크리스트 (5분)

Claude에 던지기 전 데이터 손질

✓

1행은 헤더, 1셀은 1값

병합 셀 풀기, 빈 셀에 0 또는 NA

✓

날짜는 YYYY-MM-DD 통일

"2026년 6월" → "2026-06-01"

✓

금액 단위 통일 (억원으로)

"1,000,000,000원" → 10 (억원)

✓

진행률은 0~100 숫자만

"75%" → 75 (% 기호는 분리)

✓

개인정보·민감 식별번호는 더미로

실명·주민번호·내부 식별자는 익명화

CHAPTER 07

단계적 빌드.
5블록을 한 블록씩 쌓는다.

01. 5단계 개요

한 번에 완성 X — 한 블록씩 확인 → 다음 블록

flowchart LR S1["Step 1
KPI 카드 4종"] --> V1{브라우저
확인} V1 -->|OK| S2["Step 2
진행률 바 5개"] V1 -->|문제| S1 S2 --> V2{확인} V2 -->|OK| S3["Step 3
알림 리스트"] V2 -->|문제| S2 S3 --> V3{확인} V3 -->|OK| S4["Step 4
메인 차트"] V3 -->|문제| S3 S4 --> V4{확인} V4 -->|OK| S5["Step 5
색·폰트·인쇄"] V4 -->|문제| S4 S5 --> DONE["완성
dashboard.html"]

매 Step 끝에 브라우저로 확인 → 다음 Step. "다 만들고 한 번에 확인"은 금지. 무너졌을 때 어디가 깨졌는지 알 수 있어야 한다.

02. ① A군 사업 공정형 (개요)

사업관리 · 공정관리 (강사 라이브 시연 트랙)

예시 링크 ↗

데이터: ⬇ progress.csv · 컬럼: 사업명, 블록명, 공정명, 계획률(%), 실적률(%), 사업비_억원, 집행률(%), 세대수, 기준월

STEP 1 · KPI 4종

① 총사업비 = SUM(사업비_억원)
② 평균 공정률 = AVG(실적률)
③ 지연 사업 = COUNT(계획률-실적률 ≥ 7%)
④ 총 세대수 = SUM(세대수)

STEP 2 · 진행률 바 5개

토지보상 → 기반시설 → 부지조성
→ 주택건설 → 주택공급
각 단계 평균 실적률(%)을 수평 바로

STEP 3 · 알림

(계획률 - 실적률) ≥ 7%
→ "지연 알림" 적색 배지 + 사업명
없으면 "이상 없음" 회색

STEP 4 · 메인 차트 (분기 간트)

레인 3개: 인허가·본단지·광역교통
기간: 2024 1분기 ~ 2027 4분기 (16분기)
막대 GH Medium Blue + 마일스톤 원

STEP 5 · 다듬기

GH CI 컬러 통일
#0091da · #004ea2 · #d8eef9
알림만 #ef4444
A4 가로 인쇄 가능

강사가 이 ① 사업 공정형으로 라이브 시연합니다. 다음 5개 슬라이드(STEP 1~5)의 풀 프롬프트를 함께 따라오세요. 매 Step 끝에 브라우저로 확인 후 다음 단계로.

① A군 사업 공정형 · STEP 1 — KPI 카드 4종

데이터·컬럼·계산식·디자인까지 한 번에 명시

CLAUDE CODE · Step 1
# 데이터: Docs/dataset_01_progress.csv Docs/dataset_01_progress.csv는 우리 부서 사업 6개의 월별 데이터다. 컬럼: 사업명, 블록명, 공정명, 계획률(%), 실적률(%), 사업비_억원, 집행률(%), 세대수, 기준월(YYYY-MM) 이 데이터로 KPI 카드 4종만 먼저 만들어줘. 계산식: ① 총사업비 = SUM(사업비_억원), 표시 "5,783억" ② 평균 공정률 = AVG(실적률), 표시 "58.9%" ③ 지연 사업 수 = COUNT(계획률 - 실적률 ≥ 7%), 표시 "2건" ④ 총 세대수 = SUM(세대수), 표시 "8,607세대" 디자인 (GH CI 컬러): - 단일 HTML 파일, 파일명 dashboard.html - 라이트모드 (배경 #ffffff, 카드 #d8eef9 / Light Blue) - 4열 그리드, 카드별 라벨(상단 #004ea2 Dark Blue 작게) + 숫자(#0091da Medium Blue, 굵게 큼직하게) + 단위 - 헤더·강조 텍스트는 #004ea2 (Dark Blue) - 글꼴 Pretendard, 모바일 반응형 확인 후 다음 단계 진행한다고 알려줘.

① A군 사업 공정형 · STEP 2 — 진행률 바 5개

사업 단계 흐름을 한눈에

CLAUDE CODE · Step 2
좋다. 이제 KPI 카드 아래에 수평 진행률 바 5개를 추가해줘. 단계 (위에서 아래로): 1) 토지보상 2) 기반시설 3) 부지조성 4) 주택건설 5) 주택공급 각 바의 값: 해당 공정명의 평균 실적률(%) 표시 형식 (GH CI 컬러): - 좌측: 단계 라벨 (110px 폭, #004ea2 Dark Blue) - 중앙: 진행률 바 (회색 트랙 #e5e7eb + Medium Blue → Dark Blue 그라데이션 fill linear-gradient(90deg, #0091da, #004ea2)) - 우측: % 숫자 (#0091da Medium Blue, 굵게, 50px 폭) 전체 너비 1 column, 카드들과 동일한 좌우 여백. 기존 KPI 카드 4종은 그대로 두고, 그 아래에 섹션 추가.

① A군 사업 공정형 · STEP 3 — 알림 리스트

지연 사업을 자동으로 적색 표시

CLAUDE CODE · Step 3
진행률 바 아래에 알림 리스트 영역을 추가해줘. 규칙: (계획률 - 실적률) ≥ 7% 인 사업을 자동 추출 해당 행이 1개 이상이면 알림 박스로 표시, 없으면 "이상 없음" 회색 메시지. 알림 박스 디자인 (GH CI 베이스 + 적색 알림): - 배경 #d8eef9 (Light Blue), 좌측 3px 적색(#ef4444) 보더 - 첫 줄: 굵게 "지연 알림" (#ef4444) - 두 번째 줄: 사업명 — 계획 N% → 실적 M% (X% 지연) 본문 텍스트는 #004ea2 (Dark Blue, 가독성) - 강조 숫자(X%)만 #ef4444 여러 건이면 카드 여러 개. 각 카드 사이 8px 간격.

① A군 사업 공정형 · STEP 4 — 메인 차트 (분기 간트)

사업 공정형 ①의 메인 — 분기 간트

CLAUDE CODE · Step 4
하단에 분기 단위 간트차트 1개를 추가해줘. 레인 3개: 1) 인허가 (환경/교통/재해영향평가, 문화재조사) 2) 본단지 (용지보상, 조성공사, 주택공사) 3) 광역교통 (개선대책) 기간: 2024년 1분기 ~ 2027년 4분기 (16분기) 데이터: Docs/dataset_01_progress.csv의 공정명·계획시작·계획종료 컬럼 사용 (없으면 임의 샘플 6개를 분기별로 펼쳐서) 시각화: - 가로 축: 분기 16개 (1/4 1/4 1/4 1/4 형식) - 세로 축: 레인 3개 - 각 막대: 라임 그라데이션, 끝점에 마일스톤 원 - 외부 라이브러리 없이 순수 HTML/CSS/JavaScript로 - 인쇄 시에도 깨지지 않게 기존 모든 요소는 그대로 유지.

① A군 사업 공정형 · STEP 5 — 다듬기 (색상 역할 재정의)

블루는 강조에만, 본문·KPI 숫자는 검정

CLAUDE CODE · Step 5
마무리 다듬기 (재작성). 핵심 원칙: 블루는 강조(accent)에만 쓰고, 기본 본문 텍스트와 KPI 큰 숫자는 검정 계열로. 카드는 흰 배경 + 옅은 보더. (지금처럼 텍스트를 전부 블루로, 카드를 Light Blue로 채우지 말 것.) 1) 색상 역할 재정의 (가장 중요) - 페이지 배경 #f7f9fb (아주 옅은 회색), 카드 배경 #ffffff - 카드: 1px 보더 #e6e9ee + 옅은 그림자 0 1px 3px rgba(0,0,0,0.06), radius 14px - 기본 본문 텍스트 #1a1d21 (거의 검정) - 보조·설명 텍스트 #6b7280 (회색) - KPI 큰 숫자 = #1a1d21 검정 굵게 (파란색 아님) - 블루는 강조 전용: 아이콘 / 게이지 바 fill / 액션 버튼 / 링크 (GH Medium #0091da, GH Dark #004ea2) - Light Blue #d8eef9 = KPI 아이콘 칩 배경 / 배지 배경에만 (카드 전체 채우기 금지) - 적색 #ef4444 · 주황 #f59e0b = 알림 심각도(지연/주의)에만 2) 헤더 구조 추가 - 브레드크럼 "GH 종합사업관리 › 통합 대시보드" (#6b7280 작게) - 제목: 검정 굵게 22~26px + "시연용" 배지(연블루 pill) - 부제목: 회색 메타(기준일·최종 업로드), 날짜만 굵게 강조 3) KPI 카드 4종 리디자인 - 좌상단 아이콘(블루)을 옅은 블루 칩(#d8eef9 배경, radius 10px)에 담기 - 라벨(회색 13px) → 큰 숫자(검정 900, 30~34px) + 단위 - 하단 보조 한 줄(회색, 핵심 수치만 블루) 4) 진행률 바 - 흰 카드 안, 트랙 #eef1f4 / fill 블루 그라데이션 - 라벨·축 텍스트 검정~회색, 격자선 옅은 회색 - (선택) 계획 vs 실적 2중 바: 계획=연블루 #cfe7f7, 실적=#0091da 5) 지연 알림 - 흰 카드 리스트, 항목마다 좌측 심각도 점(적색/주황) - 제목 검정 굵게, 메타 회색, "계획→실적 (N% 지연)"의 지연 수치만 적색 - 우측에 카테고리 배지(회색 pill) + 심각도 배지(적/주황 pill) 6) 간트 - 흰 카드, 막대 블루 그라데이션 + 끝점 마일스톤 원, 텍스트 검정~회색 7) 폰트·반응형·인쇄 (유지) - 숫자 font-weight 900 / 라벨·설명 500, Pretendard CDN - 1024px↓ KPI 2열, 640px↓ 1열 + 간트 가로 스크롤 - A4 가로 1장, 배경색 인쇄 유지(-webkit-print-color-adjust: exact) 최종 dashboard.html 파일로 저장. 주간 보고에 첨부할 수 있는 상태로.

① A군 사업 공정형 · STEP 6 — Plan 모드로 한 방에 (심화)

단계별 빌드를 익혔다면, 이제 처음부터 통합 구현

CLAUDE CODE · Plan 모드
[Plan 모드] GH 사업 진척도 단일 페이지 대시보드를 만들 거야. 구현 전에 먼저 계획을 세워서 보여주고, 내가 승인하면 작성해. ## 목표 / 산출물 - 단일 파일 dashboard.html 하나 (외부 JS 라이브러리·빌드 도구 없이 순수 HTML/CSS/JS) - 주간 보고에 첨부 가능한 상태 (A4 가로 PDF 1장으로 인쇄 가능) ## 입력 데이터 - Docs/dataset_01_progress.csv - 컬럼: 사업명,블록명,공정명,계획률,실적률,사업비_억원,집행률,세대수,기준월 - CSV를 HTML에 내장해서 JS로 자동 계산할 것 (데이터 교체 시 자동 갱신) ## 기능 블록 1) KPI 카드 4종 - 총사업비 = SUM(사업비_억원) "○○억" - 전체 공정률 = AVG(실적률) "○○%" - 지연 사업 수 = COUNT(계획률-실적률 ≥ 7%) "○건" - 총 세대수 = 세대수(사업·블록 단위 1회만 합산) "○세대" 2) 단계별 진행률 바: 토지보상→기반시설→부지조성→주택건설→주택공급 계획 vs 실적 평균, 축 0~100% 3) 지연 알림: 계획-실적 ≥ 7% 행을 지연폭 큰 순으로, 심각도 점/배지 4) 분기별 간트: 인허가/본단지/광역교통 3레인, 2024~2027 16분기 (CSV에 계획시작/종료 컬럼 없으면 샘플 일정 사용) ## 디자인 규칙 (중요: 블루는 강조에만) - 페이지 #f7f9fb / 카드 흰색 + 보더 #e6e9ee + 옅은 그림자 - 본문 #1a1d21(검정) / 보조 #6b7280(회색) / KPI 숫자도 검정 - 블루(#0091da, #004ea2)는 아이콘·게이지·버튼·간트 막대에만 - Light Blue #d8eef9는 아이콘 칩·배지 배경에만 (카드 전체 채우기 금지) - 알림만 적색 #ef4444 / 주황 #f59e0b - Pretendard, 숫자 weight 900 / 라벨·설명 500 ## 제약 - 1024px↓ KPI 2열, 640px↓ 1열 + 간트 가로 스크롤 - 인쇄: A4 가로 1장, -webkit-print-color-adjust: exact로 배경색 유지 ## 완료 기준 / 가드레일 - 모든 KPI·바·알림은 CSV에서 자동 계산 (값 하드코딩 금지) - 내가 준 기대 표시값과 실제 계산값이 다르면, 코드 작성 전에 먼저 차이를 보고할 것 - 작성 후 계산 로직을 node 등으로 한 번 검증해서 결과를 보여줄 것

03. ② B군 인허가·정책형 (개요)

도시기획 · 정비기획 · 임대주택 (3명)

데이터: ⬇ permit.csv · 컬럼: 인허가명, 유형, 접수일, 현재단계, 법정처리일, 담당부서, 보완요청횟수, 예상완료일, 상태

STEP 1 · KPI 4종

① 진행중 = COUNT(상태=진행중)
② 평균 처리일 = AVG(완료일-접수일)
③ 지연 = COUNT(오늘-접수일 > 법정처리일)
④ 완료율 = COUNT(완료)/전체

STEP 2 · 단계별 진행률 바

접수 → 심사 → 보완 → 승인 → 완료
각 단계별 건수와 비율(%)을 수평 바로
(현재단계 컬럼 기준 GROUP BY)

STEP 3 · 알림

법정처리일 D-7 이내 AND 단계=보완
→ "긴급 보완" 적색 배지 + 인허가명
보완요청횟수 3회 이상도 함께 표시

STEP 4 · 메인 차트

단계별 칸반 막대
X축: 접수·심사·보완·승인·완료
각 막대 위에 건수, GH Medium Blue

STEP 5 · 다듬기

GH CI 컬러 통일
#0091da · #004ea2 · #d8eef9
알림만 #ef4444
A4 가로 인쇄 가능

이 개요로 전체 그림을 잡은 뒤, 다음 5개 슬라이드(STEP 1~5)의 풀 프롬프트를 순서대로 Claude Code에 그대로 던지세요. 매 Step 끝에 브라우저로 확인 후 다음 단계로. (5단계 구조는 강사 시연 ① 사업공정형과 동일)

② B군 인허가·정책형 · STEP 1 — KPI 카드 4종

데이터·컬럼·계산식·디자인까지 한 번에 명시

CLAUDE CODE · Step 1
# 데이터: Docs/dataset_02_permit.csv Docs/dataset_02_permit.csv는 우리 부서 인허가 처리 현황 데이터다. 컬럼: 인허가명, 유형, 접수일, 현재단계, 법정처리일, 담당부서, 보완요청횟수, 예상완료일, 상태 이 데이터로 KPI 카드 4종만 먼저 만들어줘. 계산식: ① 진행중 건수 = COUNT(상태 = "진행중"), 표시 "37건" ② 평균 처리일 = AVG(예상완료일 - 접수일), 표시 "62일" ③ 지연 건수 = COUNT(오늘 - 접수일 > 법정처리일), 표시 "5건" ④ 완료율 = COUNT(상태="완료") / 전체, 표시 "48%" 디자인 (GH CI 컬러): - 단일 HTML 파일, 파일명 dashboard.html - 라이트모드 (배경 #ffffff, 카드 #d8eef9 / Light Blue) - 4열 그리드, 카드별 라벨(상단 #004ea2 Dark Blue 작게) + 숫자(#0091da Medium Blue, 굵게 큼직하게) + 단위 - 헤더·강조 텍스트는 #004ea2 (Dark Blue) - 글꼴 Pretendard, 모바일 반응형 확인 후 다음 단계 진행한다고 알려줘.

② B군 인허가·정책형 · STEP 2 — 단계별 진행률 바

인허가 처리 흐름을 한눈에

CLAUDE CODE · Step 2
좋다. 이제 KPI 카드 아래에 수평 진행률 바 5개를 추가해줘. 단계 (위에서 아래로): 현재단계 컬럼 기준 GROUP BY 1) 접수 2) 심사 3) 보완 4) 승인 5) 완료 각 바의 값: 해당 단계 건수의 비율(%) = COUNT(현재단계=X) / 전체 × 100 표시 형식 (GH CI 컬러): - 좌측: 단계 라벨 (110px 폭, #004ea2 Dark Blue) - 중앙: 진행률 바 (회색 트랙 #e5e7eb + Medium Blue → Dark Blue 그라데이션 fill linear-gradient(90deg, #0091da, #004ea2)) - 우측: 건수 + % (#0091da Medium Blue, 굵게, 70px 폭) 전체 너비 1 column, 카드들과 동일한 좌우 여백. 기존 KPI 카드 4종은 그대로 두고, 그 아래에 섹션 추가.

② B군 인허가·정책형 · STEP 3 — 알림 리스트

법정처리일 임박·보완 반복을 자동 적색 표시

CLAUDE CODE · Step 3
진행률 바 아래에 알림 리스트 영역을 추가해줘. 규칙: ⓵ (법정처리일 - 오늘) ≤ 7일 AND 현재단계 = "보완" → "긴급 보완" 으로 자동 추출 ⓶ 보완요청횟수 ≥ 3 인 건도 함께 표시 해당 행이 없으면 "이상 없음" 회색 메시지. 알림 박스 디자인 (GH CI 베이스 + 적색 알림): - 배경 #d8eef9 (Light Blue), 좌측 3px 적색(#ef4444) 보더 - 첫 줄: 굵게 "긴급 보완" (#ef4444) - 두 번째 줄: 인허가명 — 법정처리일 D-N · 보완 N회 본문 텍스트는 #004ea2 (Dark Blue, 가독성) - 강조 숫자(D-N)만 #ef4444 여러 건이면 카드 여러 개. 각 카드 사이 8px 간격.

② B군 인허가·정책형 · STEP 4 — 메인 차트 (단계별 칸반 막대)

인허가·정책형 ②의 메인 — 단계별 칸반 막대

CLAUDE CODE · Step 4
하단에 단계별 칸반 막대차트 1개를 추가해줘. X축 (5개 단계): 접수 · 심사 · 보완 · 승인 · 완료 세로 막대: 각 단계의 현재 건수 = COUNT(현재단계=X) 데이터: Docs/dataset_02_permit.csv의 현재단계 컬럼으로 집계 시각화: - 막대: GH Medium Blue #0091da, 막대 위에 건수 라벨 - "보완" 단계 막대만 적색(#ef4444) 테두리로 병목 강조 - 외부 라이브러리 없이 순수 HTML/CSS/JavaScript로 - 인쇄 시에도 깨지지 않게 기존 모든 요소는 그대로 유지.

② B군 인허가·정책형 · STEP 5 — 다듬기 (색상 역할 재정의)

블루는 강조에만, 본문·KPI 숫자는 검정

CLAUDE CODE · Step 5
마무리 다듬기 (재작성). 핵심 원칙: 블루는 강조(accent)에만 쓰고, 기본 본문 텍스트와 KPI 큰 숫자는 검정 계열로. 카드는 흰 배경 + 옅은 보더. (지금처럼 텍스트를 전부 블루로, 카드를 Light Blue로 채우지 말 것.) 1) 색상 역할 재정의 (가장 중요) - 페이지 배경 #f7f9fb (아주 옅은 회색), 카드 배경 #ffffff - 카드: 1px 보더 #e6e9ee + 옅은 그림자 0 1px 3px rgba(0,0,0,0.06), radius 14px - 기본 본문 텍스트 #1a1d21 (거의 검정) - 보조·설명 텍스트 #6b7280 (회색) - KPI 큰 숫자 = #1a1d21 검정 굵게 (파란색 아님) - 블루는 강조 전용: 아이콘 / 게이지 바 fill / 액션 버튼 / 링크 (GH Medium #0091da, GH Dark #004ea2) - Light Blue #d8eef9 = KPI 아이콘 칩 배경 / 배지 배경에만 (카드 전체 채우기 금지) - 적색 #ef4444 · 주황 #f59e0b = 알림 심각도(긴급 보완/주의)에만 2) 헤더 구조 추가 - 브레드크럼 "GH 인허가관리 › 처리 현황 대시보드" (#6b7280 작게) - 제목: 검정 굵게 22~26px + "시연용" 배지(연블루 pill) - 부제목: 회색 메타(기준일·최종 업로드), 날짜만 굵게 강조 3) KPI 카드 4종 리디자인 - 좌상단 아이콘(블루)을 옅은 블루 칩(#d8eef9 배경, radius 10px)에 담기 - 라벨(회색 13px) → 큰 숫자(검정 900, 30~34px) + 단위 - 하단 보조 한 줄(회색, 핵심 수치만 블루) 4) 단계별 진행률 바 - 흰 카드 안, 트랙 #eef1f4 / fill 블루 그라데이션 - 단계 라벨(접수·심사·보완·승인·완료)·축 텍스트 검정~회색 - 우측 건수·% 는 검정 굵게, 격자선 옅은 회색 5) 긴급 보완 알림 - 흰 카드 리스트, 항목마다 좌측 심각도 점(적색/주황) - 제목 검정 굵게, 메타 회색, "법정처리일 D-N"의 임박 수치만 적색 - 우측에 담당부서 배지(회색 pill) + 심각도 배지(적/주황 pill) 6) 단계별 칸반 막대 - 흰 카드, 막대 블루 그라데이션 + 막대 위 건수(검정) - "보완" 단계만 적색 테두리로 병목 강조, 축 텍스트 검정~회색 7) 폰트·반응형·인쇄 (유지) - 숫자 font-weight 900 / 라벨·설명 500, Pretendard CDN - 1024px↓ KPI 2열, 640px↓ 1열 + 칸반 막대 가로 스크롤 - A4 가로 1장, 배경색 인쇄 유지(-webkit-print-color-adjust: exact) 최종 dashboard.html 파일로 저장. 주간 보고에 첨부할 수 있는 상태로.

② B군 인허가·정책형 · STEP 6 — Plan 모드로 한 방에 (심화)

단계별 빌드를 익혔다면, 이제 처음부터 통합 구현

CLAUDE CODE · Plan 모드
[Plan 모드] GH 인허가 처리 현황 단일 페이지 대시보드를 만들 거야. 구현 전에 먼저 계획을 세워서 보여주고, 내가 승인하면 작성해. ## 목표 / 산출물 - 단일 파일 dashboard.html 하나 (외부 JS 라이브러리·빌드 도구 없이 순수 HTML/CSS/JS) - 주간 보고에 첨부 가능한 상태 (A4 가로 PDF 1장으로 인쇄 가능) ## 입력 데이터 - Docs/dataset_02_permit.csv - 컬럼: 인허가명,유형,접수일,현재단계,법정처리일,담당부서,보완요청횟수,예상완료일,상태 - CSV를 HTML에 내장해서 JS로 자동 계산할 것 (데이터 교체 시 자동 갱신) ## 기능 블록 1) KPI 카드 4종 - 진행중 건수 = COUNT(상태="진행중") "○건" - 평균 처리일 = AVG(예상완료일-접수일) "○일" - 지연 건수 = COUNT(오늘-접수일 > 법정처리일) "○건" - 완료율 = COUNT(상태="완료")/전체 "○○%" 2) 단계별 진행률 바: 접수→심사→보완→승인→완료 현재단계 GROUP BY 건수 비율, 축 0~100% 3) 긴급 보완 알림: (법정처리일-오늘) ≤ 7일 AND 단계="보완", 또는 보완요청횟수 ≥ 3 인 행을 임박 순으로, 심각도 점/배지 4) 단계별 칸반 막대: X축 접수·심사·보완·승인·완료, 막대 위 건수 ("보완" 단계는 병목 강조) ## 디자인 규칙 (중요: 블루는 강조에만) - 페이지 #f7f9fb / 카드 흰색 + 보더 #e6e9ee + 옅은 그림자 - 본문 #1a1d21(검정) / 보조 #6b7280(회색) / KPI 숫자도 검정 - 블루(#0091da, #004ea2)는 아이콘·게이지·버튼·칸반 막대에만 - Light Blue #d8eef9는 아이콘 칩·배지 배경에만 (카드 전체 채우기 금지) - 알림만 적색 #ef4444 / 주황 #f59e0b - Pretendard, 숫자 weight 900 / 라벨·설명 500 ## 제약 - 1024px↓ KPI 2열, 640px↓ 1열 + 칸반 막대 가로 스크롤 - 인쇄: A4 가로 1장, -webkit-print-color-adjust: exact로 배경색 유지 ## 완료 기준 / 가드레일 - 모든 KPI·바·알림은 CSV에서 자동 계산 (값 하드코딩 금지) - 내가 준 기대 표시값과 실제 계산값이 다르면, 코드 작성 전에 먼저 차이를 보고할 것 - 작성 후 계산 로직을 node 등으로 한 번 검증해서 결과를 보여줄 것

04. ③ C군 품질·안전형 (개요)

품질관리 · 안전관리 (3명)

데이터: ⬇ safety.csv · 컬럼: 점검일, 현장명, 공종, 점검항목, 결과, 위험등급, 시정요구일, 시정완료일, 사고여부

STEP 1 · KPI 4종

① 점검완료율 = COUNT(점검완료)/계획건수
② 무사고일수 = TODAY-MAX(사고일)
③ 미시정 = COUNT(시정요구&NOT 시정완료)
④ 위험등급별 = COUNT(BY 위험등급)

STEP 2 · 시정 단계 바

시정요구 → 조치중 → 시정완료 → 재발방지
각 단계별 건수와 비율(%)
중대 등급은 별도 라벨 표시

STEP 3 · 알림 (2종)

⓵ 위험등급 중대 AND 시정 7일 초과
→ "안전 경고" 적색 배지
⓶ 사고여부=있음
→ "사고 발생" 최상단 적색

STEP 4 · 메인 차트 (콤보)

월별 점검 막대(좌축) + 합격률 라인(우축)
X축: 월(YYYY-MM)
막대 GH Medium Blue, 라인 Dark Blue

STEP 5 · 다듬기

GH CI 컬러 통일
#0091da · #004ea2 · #d8eef9
알림만 #ef4444
A4 가로 인쇄 가능

이 개요로 전체 그림을 잡은 뒤, 다음 5개 슬라이드(STEP 1~5)의 풀 프롬프트를 순서대로 Claude Code에 그대로 던지세요. 매 Step 끝에 브라우저로 확인 후 다음 단계로. (5단계 구조는 강사 시연 ① 사업공정형과 동일)

③ C군 품질·안전형 · STEP 1 — KPI 카드 4종

데이터·컬럼·계산식·디자인까지 한 번에 명시

CLAUDE CODE · Step 1
# 데이터: Docs/dataset_03_safety.csv Docs/dataset_03_safety.csv는 우리 현장 품질·안전 점검 데이터다. 컬럼: 점검일, 현장명, 공종, 점검항목, 결과, 위험등급, 시정요구일, 시정완료일, 사고여부 이 데이터로 KPI 카드 4종만 먼저 만들어줘. 계산식: ① 점검 완료율 = COUNT(결과 있음) / 계획 점검건수, 표시 "92%" ② 무사고 일수 = 오늘 - MAX(사고여부="있음"의 점검일), 표시 "47일" ③ 미시정 건수 = COUNT(시정요구일 있음 AND 시정완료일 없음), 표시 "8건" ④ 중대 위험 = COUNT(위험등급="중대"), 표시 "3건" 디자인 (GH CI 컬러): - 단일 HTML 파일, 파일명 dashboard.html - 라이트모드 (배경 #ffffff, 카드 #d8eef9 / Light Blue) - 4열 그리드, 카드별 라벨(상단 #004ea2 Dark Blue 작게) + 숫자(#0091da Medium Blue, 굵게 큼직하게) + 단위 - 헤더·강조 텍스트는 #004ea2 (Dark Blue) - 글꼴 Pretendard, 모바일 반응형 확인 후 다음 단계 진행한다고 알려줘.

③ C군 품질·안전형 · STEP 2 — 시정 단계 진행률 바

시정 조치 흐름을 한눈에

CLAUDE CODE · Step 2
좋다. 이제 KPI 카드 아래에 수평 진행률 바 4개를 추가해줘. 시정 단계 (위에서 아래로): 1) 시정요구 2) 조치중 3) 시정완료 4) 재발방지 각 바의 값: 해당 단계 건수의 비율(%) 표시 형식 (GH CI 컬러): - 좌측: 단계 라벨 (110px 폭, #004ea2 Dark Blue) - 중앙: 진행률 바 (회색 트랙 #e5e7eb + Medium Blue → Dark Blue 그라데이션 fill linear-gradient(90deg, #0091da, #004ea2)) - 우측: 건수 + % (#0091da Medium Blue, 굵게, 70px 폭) - 위험등급 "중대"가 포함된 단계는 라벨 옆 적색(#ef4444) 점 표시 전체 너비 1 column, 카드들과 동일한 좌우 여백. 기존 KPI 카드 4종은 그대로 두고, 그 아래에 섹션 추가.

③ C군 품질·안전형 · STEP 3 — 알림 리스트 (2종)

중대 위험·사고를 자동 적색 표시

CLAUDE CODE · Step 3
진행률 바 아래에 알림 리스트 영역을 추가해줘. (2종) 규칙: ⓵ 위험등급 = "중대" AND (오늘 - 시정요구일) > 7일 AND 시정완료일 없음 → "안전 경고" 적색 배지 ⓶ 사고여부 = "있음" → "사고 발생" 알림을 리스트 최상단에 적색 고정 둘 다 없으면 "이상 없음" 회색 메시지. 알림 박스 디자인 (GH CI 베이스 + 적색 알림): - 배경 #d8eef9 (Light Blue), 좌측 3px 적색(#ef4444) 보더 - 첫 줄: 굵게 "안전 경고" 또는 "사고 발생" (#ef4444) - 두 번째 줄: 현장명 — 공종 · 점검항목 (시정 N일 경과) 본문 텍스트는 #004ea2 (Dark Blue, 가독성) - 강조 숫자(경과일)만 #ef4444 여러 건이면 카드 여러 개. 각 카드 사이 8px 간격.

③ C군 품질·안전형 · STEP 4 — 메인 차트 (월별 콤보)

품질·안전형 ③의 메인 — 막대 + 라인 콤보

CLAUDE CODE · Step 4
하단에 콤보 차트 1개를 추가해줘. (막대 + 라인) X축: 월 (YYYY-MM), 점검일 기준 월별 집계 좌축 막대: 월별 점검 건수 = COUNT(점검) 우축 라인: 월별 합격률 = COUNT(결과="합격") / 점검 건수 × 100 시각화: - 막대: GH Medium Blue #0091da, 막대 위 건수 - 라인: GH Dark Blue #004ea2, 꼭짓점에 % 라벨 - 좌/우 두 개의 Y축 (막대=건수, 라인=%) - 외부 라이브러리 없이 순수 HTML/CSS/JavaScript로 - 인쇄 시에도 깨지지 않게 기존 모든 요소는 그대로 유지.

③ C군 품질·안전형 · STEP 5 — 다듬기 (색상 역할 재정의)

블루는 강조에만, 본문·KPI 숫자는 검정

CLAUDE CODE · Step 5
마무리 다듬기 (재작성). 핵심 원칙: 블루는 강조(accent)에만 쓰고, 기본 본문 텍스트와 KPI 큰 숫자는 검정 계열로. 카드는 흰 배경 + 옅은 보더. (지금처럼 텍스트를 전부 블루로, 카드를 Light Blue로 채우지 말 것.) 1) 색상 역할 재정의 (가장 중요) - 페이지 배경 #f7f9fb (아주 옅은 회색), 카드 배경 #ffffff - 카드: 1px 보더 #e6e9ee + 옅은 그림자 0 1px 3px rgba(0,0,0,0.06), radius 14px - 기본 본문 텍스트 #1a1d21 (거의 검정) - 보조·설명 텍스트 #6b7280 (회색) - KPI 큰 숫자 = #1a1d21 검정 굵게 (파란색 아님) - 블루는 강조 전용: 아이콘 / 게이지 바 fill / 액션 버튼 / 링크 (GH Medium #0091da, GH Dark #004ea2) - Light Blue #d8eef9 = KPI 아이콘 칩 배경 / 배지 배경에만 (카드 전체 채우기 금지) - 적색 #ef4444 · 주황 #f59e0b = 알림 심각도(사고/안전경고)에만 2) 헤더 구조 추가 - 브레드크럼 "GH 품질·안전관리 › 점검 현황 대시보드" (#6b7280 작게) - 제목: 검정 굵게 22~26px + "시연용" 배지(연블루 pill) - 부제목: 회색 메타(기준일·최종 업로드), 날짜만 굵게 강조 3) KPI 카드 4종 리디자인 - 좌상단 아이콘(블루)을 옅은 블루 칩(#d8eef9 배경, radius 10px)에 담기 - 라벨(회색 13px) → 큰 숫자(검정 900, 30~34px) + 단위 - 하단 보조 한 줄(회색, 핵심 수치만 블루) - "무사고 일수"는 안전 강조 맥락이라 숫자 옆 작은 블루 아이콘 허용 4) 시정 단계 진행률 바 - 흰 카드 안, 트랙 #eef1f4 / fill 블루 그라데이션 - 단계 라벨(시정요구·조치중·시정완료·재발방지)·축 텍스트 검정~회색 - "중대" 등급 포함 단계만 라벨 옆 적색 점, 우측 건수·% 검정 굵게 5) 안전 알림 (2종) - 흰 카드 리스트, 항목마다 좌측 심각도 점(사고=적색 / 안전경고=주황) - 제목 검정 굵게, 메타 회색, "시정 N일 경과"의 경과 수치만 적색 - "사고 발생"은 리스트 최상단 고정, 우측 공종 배지(회색 pill) + 심각도 배지 6) 월별 콤보 차트 - 흰 카드, 막대(점검 건수) 블루 그라데이션 + 라인(합격률) GH Dark - 좌/우 2축, 막대 위 건수·라인 꼭짓점 % 는 검정, 격자선 옅은 회색 7) 폰트·반응형·인쇄 (유지) - 숫자 font-weight 900 / 라벨·설명 500, Pretendard CDN - 1024px↓ KPI 2열, 640px↓ 1열 + 콤보 차트 가로 스크롤 - A4 가로 1장, 배경색 인쇄 유지(-webkit-print-color-adjust: exact) 최종 dashboard.html 파일로 저장. 주간 보고에 첨부할 수 있는 상태로.

③ C군 품질·안전형 · STEP 6 — Plan 모드로 한 방에 (심화)

단계별 빌드를 익혔다면, 이제 처음부터 통합 구현

CLAUDE CODE · Plan 모드
[Plan 모드] GH 품질·안전 점검 현황 단일 페이지 대시보드를 만들 거야. 구현 전에 먼저 계획을 세워서 보여주고, 내가 승인하면 작성해. ## 목표 / 산출물 - 단일 파일 dashboard.html 하나 (외부 JS 라이브러리·빌드 도구 없이 순수 HTML/CSS/JS) - 주간 보고에 첨부 가능한 상태 (A4 가로 PDF 1장으로 인쇄 가능) ## 입력 데이터 - Docs/dataset_03_safety.csv - 컬럼: 점검일,현장명,공종,점검항목,결과,위험등급,시정요구일,시정완료일,사고여부 - CSV를 HTML에 내장해서 JS로 자동 계산할 것 (데이터 교체 시 자동 갱신) ## 기능 블록 1) KPI 카드 4종 - 점검 완료율 = COUNT(결과 있음)/계획 점검건수 "○○%" - 무사고 일수 = 오늘-MAX(사고여부="있음" 점검일) "○일" - 미시정 건수 = COUNT(시정요구 AND NOT 시정완료) "○건" - 중대 위험 = COUNT(위험등급="중대") "○건" 2) 시정 단계 진행률 바: 시정요구→조치중→시정완료→재발방지 단계별 건수 비율, 축 0~100% (중대 등급은 별도 라벨) 3) 안전 알림 (2종): ①위험등급="중대" AND 시정 7일 초과 → 안전경고(주황) ②사고여부="있음" → 사고 발생(적색, 최상단 고정) 4) 월별 콤보 차트: 막대=월별 점검 건수, 라인=합격률(%), 좌/우 2축 ## 디자인 규칙 (중요: 블루는 강조에만) - 페이지 #f7f9fb / 카드 흰색 + 보더 #e6e9ee + 옅은 그림자 - 본문 #1a1d21(검정) / 보조 #6b7280(회색) / KPI 숫자도 검정 - 블루(#0091da, #004ea2)는 아이콘·게이지·버튼·차트 막대/라인에만 - Light Blue #d8eef9는 아이콘 칩·배지 배경에만 (카드 전체 채우기 금지) - 알림만 적색 #ef4444(사고) / 주황 #f59e0b(안전경고) - Pretendard, 숫자 weight 900 / 라벨·설명 500 ## 제약 - 1024px↓ KPI 2열, 640px↓ 1열 + 콤보 차트 가로 스크롤 - 인쇄: A4 가로 1장, -webkit-print-color-adjust: exact로 배경색 유지 ## 완료 기준 / 가드레일 - 모든 KPI·바·알림은 CSV에서 자동 계산 (값 하드코딩 금지) - 내가 준 기대 표시값과 실제 계산값이 다르면, 코드 작성 전에 먼저 차이를 보고할 것 - 작성 후 계산 로직을 node 등으로 한 번 검증해서 결과를 보여줄 것

05. ④ D군 조직·운영형 (개요)

경영기획 · 인사 · 감사 (5명)

데이터: ⬇ org_kpi.csv · 컬럼: 부서, KPI명, 월, 계획값, 실적값, 단위, 담당자, 마감일

STEP 1 · KPI 4종

① 예산집행률 = SUM(실적 WHERE KPI=예산)/SUM(계획)
② 교육이수율 (KPI=교육이수율 평균)
③ 채용 진행 = SUM(KPI=신규채용 실적)
④ 감사 시정 = SUM(KPI=감사 시정조치)

STEP 2 · 부서별 달성률 바

부서별 평균 달성률(실적/계획)을
수평 바 5개 (경영기획·인사A·인사B·청렴·…)
각 바 우측에 달성률(%) 표시

STEP 3 · 알림

월말 D-7 이내 AND 달성률 < 70%
→ "KPI 미달 위험" 황색 배지 + KPI명
마감일 지난 KPI는 적색

STEP 4 · 메인 차트 (콤보)

월별 예산 라인(계획·실적 2선) + 집행 막대(실적)
X축: 월(YYYY-MM)
라인 GH Dark Blue, 막대 Medium Blue

STEP 5 · 다듬기

GH CI 컬러 통일
#0091da · #004ea2 · #d8eef9
알림만 #ef4444
A4 가로 인쇄 가능

이 개요로 전체 그림을 잡은 뒤, 다음 5개 슬라이드(STEP 1~5)의 풀 프롬프트를 순서대로 Claude Code에 그대로 던지세요. 매 Step 끝에 브라우저로 확인 후 다음 단계로. (5단계 구조는 강사 시연 ① 사업공정형과 동일)

④ D군 조직·운영형 · STEP 1 — KPI 카드 4종

데이터·컬럼·계산식·디자인까지 한 번에 명시

CLAUDE CODE · Step 1
# 데이터: Docs/dataset_04_org_kpi.csv Docs/dataset_04_org_kpi.csv는 우리 부서들의 월별 KPI 실적 데이터다. 컬럼: 부서, KPI명, 월, 계획값, 실적값, 단위, 담당자, 마감일 이 데이터로 KPI 카드 4종만 먼저 만들어줘. 계산식: ① 예산 집행률 = SUM(실적값 WHERE KPI명="예산집행") / SUM(계획값 WHERE KPI명="예산집행"), 표시 "73%" ② 교육 이수율 = AVG(실적값 WHERE KPI명="교육이수율"), 표시 "81%" ③ 신규 채용 = SUM(실적값 WHERE KPI명="신규채용"), 표시 "12명" ④ 감사 시정 = SUM(실적값 WHERE KPI명="감사시정조치"), 표시 "9건" 디자인 (GH CI 컬러): - 단일 HTML 파일, 파일명 dashboard.html - 라이트모드 (배경 #ffffff, 카드 #d8eef9 / Light Blue) - 4열 그리드, 카드별 라벨(상단 #004ea2 Dark Blue 작게) + 숫자(#0091da Medium Blue, 굵게 큼직하게) + 단위 - 헤더·강조 텍스트는 #004ea2 (Dark Blue) - 글꼴 Pretendard, 모바일 반응형 확인 후 다음 단계 진행한다고 알려줘.

④ D군 조직·운영형 · STEP 2 — 부서별 달성률 바

부서별 KPI 달성도를 한눈에

CLAUDE CODE · Step 2
좋다. 이제 KPI 카드 아래에 수평 달성률 바를 추가해줘. 부서별 (행마다 하나, 부서 컬럼 기준 GROUP BY): 경영기획 · 인사 · 감사 · … (데이터에 있는 부서 전부) 각 바의 값: 부서별 평균 달성률 = AVG(실적값 / 계획값) × 100 표시 형식 (GH CI 컬러): - 좌측: 부서 라벨 (110px 폭, #004ea2 Dark Blue) - 중앙: 진행률 바 (회색 트랙 #e5e7eb + Medium Blue → Dark Blue 그라데이션 fill linear-gradient(90deg, #0091da, #004ea2)) - 우측: 달성률 % (#0091da Medium Blue, 굵게, 50px 폭) - 달성률 70% 미만 부서는 우측 % 를 적색(#ef4444)으로 전체 너비 1 column, 카드들과 동일한 좌우 여백. 기존 KPI 카드 4종은 그대로 두고, 그 아래에 섹션 추가.

④ D군 조직·운영형 · STEP 3 — 알림 리스트

마감 임박·미달 KPI를 자동 표시

CLAUDE CODE · Step 3
달성률 바 아래에 알림 리스트 영역을 추가해줘. 규칙: ⓵ (마감일 - 오늘) ≤ 7일 AND 달성률(실적/계획) < 70% → "KPI 미달 위험" 주황(#f59e0b) 배지 ⓶ 마감일이 오늘보다 지났고 미달성인 KPI → "마감 초과" 적색(#ef4444) 배지 해당 행이 없으면 "이상 없음" 회색 메시지. 알림 박스 디자인 (GH CI 베이스): - 배경 #d8eef9 (Light Blue), 좌측 3px 보더 (위험=#f59e0b 주황 / 마감초과=#ef4444 적색) - 첫 줄: 굵게 "KPI 미달 위험" 또는 "마감 초과" - 두 번째 줄: 부서 · KPI명 — 달성 N% (마감 D-M) 본문 텍스트는 #004ea2 (Dark Blue, 가독성) - 강조 숫자(달성률·D-M)만 배지색과 동일하게 여러 건이면 카드 여러 개. 각 카드 사이 8px 간격.

④ D군 조직·운영형 · STEP 4 — 메인 차트 (예산 콤보)

조직·운영형 ④의 메인 — 라인 + 막대 콤보

CLAUDE CODE · Step 4
하단에 콤보 차트 1개를 추가해줘. (라인 + 막대) X축: 월 (YYYY-MM) 라인 2선: 예산 KPI의 월별 계획값 · 실적값 (계획=점선, 실적=실선) 막대: 월별 예산 실적값 (집행 막대) 시각화: - 라인: GH Dark Blue #004ea2 (계획은 같은 색 점선) - 막대: GH Medium Blue #0091da, 막대 위 값 라벨 - 외부 라이브러리 없이 순수 HTML/CSS/JavaScript로 - 인쇄 시에도 깨지지 않게 기존 모든 요소는 그대로 유지.

④ D군 조직·운영형 · STEP 5 — 다듬기 (색상 역할 재정의)

블루는 강조에만, 본문·KPI 숫자는 검정

CLAUDE CODE · Step 5
마무리 다듬기 (재작성). 핵심 원칙: 블루는 강조(accent)에만 쓰고, 기본 본문 텍스트와 KPI 큰 숫자는 검정 계열로. 카드는 흰 배경 + 옅은 보더. (지금처럼 텍스트를 전부 블루로, 카드를 Light Blue로 채우지 말 것.) 1) 색상 역할 재정의 (가장 중요) - 페이지 배경 #f7f9fb (아주 옅은 회색), 카드 배경 #ffffff - 카드: 1px 보더 #e6e9ee + 옅은 그림자 0 1px 3px rgba(0,0,0,0.06), radius 14px - 기본 본문 텍스트 #1a1d21 (거의 검정) - 보조·설명 텍스트 #6b7280 (회색) - KPI 큰 숫자 = #1a1d21 검정 굵게 (파란색 아님) - 블루는 강조 전용: 아이콘 / 게이지 바 fill / 액션 버튼 / 링크 (GH Medium #0091da, GH Dark #004ea2) - Light Blue #d8eef9 = KPI 아이콘 칩 배경 / 배지 배경에만 (카드 전체 채우기 금지) - 적색 #ef4444(마감 초과) · 주황 #f59e0b(미달 위험) = 알림 심각도에만 (기존 #eab308 황색은 #f59e0b 주황으로 교체) 2) 헤더 구조 추가 - 브레드크럼 "GH 경영관리 › 부서 KPI 대시보드" (#6b7280 작게) - 제목: 검정 굵게 22~26px + "시연용" 배지(연블루 pill) - 부제목: 회색 메타(기준월·최종 업로드), 날짜만 굵게 강조 3) KPI 카드 4종 리디자인 - 좌상단 아이콘(블루)을 옅은 블루 칩(#d8eef9 배경, radius 10px)에 담기 - 라벨(회색 13px) → 큰 숫자(검정 900, 30~34px) + 단위 - 하단 보조 한 줄(회색, 핵심 수치만 블루) 4) 부서별 달성률 바 - 흰 카드 안, 트랙 #eef1f4 / fill 블루 그라데이션 - 부서 라벨·축 텍스트 검정~회색, 우측 달성률 % 검정 굵게 - 달성률 70% 미만 부서는 우측 % 만 적색, 격자선 옅은 회색 - (선택) 계획 vs 실적 2중 바: 계획=연블루 #cfe7f7, 실적=#0091da 5) KPI 미달 알림 - 흰 카드 리스트, 항목마다 좌측 심각도 점(마감초과=적색 / 미달위험=주황) - 제목 검정 굵게, 메타 회색, "달성 N% (마감 D-M)"의 미달·임박 수치만 심각도색 - 우측에 부서 배지(회색 pill) + 심각도 배지(적/주황 pill) 6) 월별 예산 콤보 차트 - 흰 카드, 라인(계획=점선·실적=실선) GH Dark + 막대(집행) 블루 그라데이션 - 막대 위 값·축 텍스트 검정~회색, 격자선 옅은 회색 7) 폰트·반응형·인쇄 (유지) - 숫자 font-weight 900 / 라벨·설명 500, Pretendard CDN - 1024px↓ KPI 2열, 640px↓ 1열 + 콤보 차트 가로 스크롤 - A4 가로 1장, 배경색 인쇄 유지(-webkit-print-color-adjust: exact) 최종 dashboard.html 파일로 저장. 주간 보고에 첨부할 수 있는 상태로.

④ D군 조직·운영형 · STEP 6 — Plan 모드로 한 방에 (심화)

단계별 빌드를 익혔다면, 이제 처음부터 통합 구현

CLAUDE CODE · Plan 모드
[Plan 모드] GH 부서 KPI 현황 단일 페이지 대시보드를 만들 거야. 구현 전에 먼저 계획을 세워서 보여주고, 내가 승인하면 작성해. ## 목표 / 산출물 - 단일 파일 dashboard.html 하나 (외부 JS 라이브러리·빌드 도구 없이 순수 HTML/CSS/JS) - 주간 보고에 첨부 가능한 상태 (A4 가로 PDF 1장으로 인쇄 가능) ## 입력 데이터 - Docs/dataset_04_org_kpi.csv - 컬럼: 부서,KPI명,월,계획값,실적값,단위,담당자,마감일 - CSV를 HTML에 내장해서 JS로 자동 계산할 것 (데이터 교체 시 자동 갱신) ## 기능 블록 1) KPI 카드 4종 - 예산 집행률 = SUM(실적 WHERE KPI="예산집행")/SUM(계획) "○○%" - 교육 이수율 = AVG(실적 WHERE KPI="교육이수율") "○○%" - 신규 채용 = SUM(실적 WHERE KPI="신규채용") "○명" - 감사 시정 = SUM(실적 WHERE KPI="감사시정조치") "○건" 2) 부서별 달성률 바: 부서 GROUP BY, 평균 달성률=AVG(실적/계획) 계획 vs 실적 2중 바, 축 0~100% 3) KPI 미달 알림: (마감일-오늘) ≤ 7일 AND 달성률 < 70% → 미달위험(주황), 마감 지난 미달성 KPI → 마감초과(적색). 임박/미달 순으로 정렬 4) 월별 예산 콤보 차트: 라인=계획·실적(계획 점선), 막대=집행 실적 ## 디자인 규칙 (중요: 블루는 강조에만) - 페이지 #f7f9fb / 카드 흰색 + 보더 #e6e9ee + 옅은 그림자 - 본문 #1a1d21(검정) / 보조 #6b7280(회색) / KPI 숫자도 검정 - 블루(#0091da, #004ea2)는 아이콘·게이지·버튼·차트 막대/라인에만 - Light Blue #d8eef9는 아이콘 칩·배지 배경에만 (카드 전체 채우기 금지) - 알림만 적색 #ef4444(마감초과) / 주황 #f59e0b(미달위험) - Pretendard, 숫자 weight 900 / 라벨·설명 500 ## 제약 - 1024px↓ KPI 2열, 640px↓ 1열 + 콤보 차트 가로 스크롤 - 인쇄: A4 가로 1장, -webkit-print-color-adjust: exact로 배경색 유지 ## 완료 기준 / 가드레일 - 모든 KPI·바·알림은 CSV에서 자동 계산 (값 하드코딩 금지) - 내가 준 기대 표시값과 실제 계산값이 다르면, 코드 작성 전에 먼저 차이를 보고할 것 - 작성 후 계산 로직을 node 등으로 한 번 검증해서 결과를 보여줄 것

CHAPTER 08

현황판 → 의사결정 화면.
룰을 박는다.

01. 직군별 룰 4종

사람이 매번 계산하지 않게, 화면이 직접 결정을 제시

직군룰 (IF)표시 (THEN)
A 사업 공정보상 ≥ 95% AND 문화재 ≥ 90%착공 가능
B 인허가법정처리일 D-7 이내 AND 단계=보완긴급 보완
C 품질·안전위험등급 중대 AND 시정 7일 초과안전 경고
D 조직·운영월말 D-7 AND 달성률 < 70%KPI 미달

Claude에 시키는 법: "위 룰에 해당하면 KPI 카드 또는 알림 영역에 적·황·녹 배지를 자동으로 띄워줘." 한 줄이면 됨.

CHAPTER 09

만든 다음에 살아 있게.
저장·공유·갱신.

01. 저장·공유·매주 갱신

한 번 만들고 끝이 아니다 — 매주 30초로 갱신

저장

  • • dashboard.html로 저장
  • • 더블클릭 → Edge/Chrome에서 실행
  • • 보안망 안에서도 로컬 파일은 작동

공유

  • • HTML + CSV를 zip으로 묶기
  • • 또는 PDF 인쇄 → 주간 보고 첨부
  • • 스크린샷 → 카톡 공유

매주 갱신

  • • 한 번만 이 프롬프트: "csv를 업로드하면 대시보드가 자동 업데이트되도록 코드를 수정해줘"
  • • → 페이지에 CSV 업로드 버튼이 생긴다
  • • 다음 주엔 새 CSV만 올리면 페이지가 즉시 다시 그려짐 (재실행·코딩 0)

보안 주의: 개인정보·내부 식별번호·실제 금액은 익명화·요약 후 업로드. 결과 HTML을 공유할 때는 원본 CSV는 분리해서 보관.

CHAPTER 10

마무리.
다시 라이더 화면 앞에서.

01. CLOSING · CALLBACK

처음 우리는 라이더 화면을 봤다.

↺
"배달 라이더는 만 원짜리 결정을 실시간 대시보드 한 화면으로 한다. 우리는 억대 결정을 PDF 30장으로 한다. 결정이 클수록 화면은 더 조악해진다 — 거꾸로 됐다."

오늘 여러분이 만든 5블록 HTML 하나가, 그 뒤집힌 역설을 바로 세우는 첫 화면입니다.

02. ACTION PLAN

내일 출근해서 할 4가지

  1. 1

    설치하라 — 오늘 셋업한 WSL2 + Claude Code 환경을 회사 PC에 그대로 옮긴다.

    막히면 Codex에게 한국어로 물어본다.

  2. 2

    다운로드하라 — 본인 직군 샘플 CSV 1개를 다시 열어 컬럼·KPI 계산식을 5분간 읽는다.

    그 다음 본인 실데이터 1주일치를 같은 형식으로 정리한다.

  3. 3

    스케치하라 — A4 한 장에 부서장이 보는 5블록 MVD를 손으로 그린다.

    WHO·WHAT·WHEN·WHY 한 문장씩 적어둔다.

  4. 4

    발행하라 — Plan 모드를 켜고 스케치 + CSV를 Claude Code에 던져 첫 HTML을 만든다.

    이번 주 주간 보고에 첨부해 본다.

03. 마무리

세 가지 질문.

?

여러분 부서장이 지금 받는 보고는 라이더 화면입니까, PDF 30장입니까?

?

30초 안에 "다음 공정 진행 가능 여부"를 답할 수 있는 화면을 가지고 있습니까?

?

만약 옆 자리 동료가 그 화면을 먼저 만들어 가져온다면, 어떤 일이 벌어집니까?

04. KEY TAKEAWAYS

오늘 회사로 가져갈 것

MVD

최소 의사결정 화면 — 5블록 한 장. 다음 회의에서 "우리 부서 MVD"로 호출하라.

Plan 모드

Claude Code Shift+Tab. 코드 쓰기 전 설계부터 합의.

Codex 통합 프롬프트

WSL2 + Ubuntu + Node + Claude Code 한 번에. 설치 6번 → 명령 1번.

직군별 데이터셋 4종

A 사업공정 / B 인허가 / C 품질안전 / D 조직운영. 본인 자리부터.

단계적 빌드

KPI → 진행률 → 알림 → 차트 → 다듬기. 한 블록씩, 한 블록씩.

CSV 업로드 = 자동 갱신

"CSV 올리면 자동 갱신" 코드를 한 번 넣으면, 이후엔 새 CSV만 올려도 페이지가 즉시 다시 그려진다.

감사합니다. — 김혜련 · artetlab