GH · DATA VISUALIZATION · 2026.05.21

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

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

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

PRESENTER

김혜련 · artetlab

강의 교안
gh.artetlab.com

SPEAKER

강사 소개

김혜련 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개

데이터 시각화 4차 물결

왜 지금 우리 차례인가

보고서 vs 대시보드

의사결정 가능한 화면이란

오늘 만들 두 가지

Showcase + MVD 미리보기

환경 셋업 & 기초 다지기

Codex 한 줄 설치 + 터미널·마크다운·프롬프트

Plan 모드 기획

던지기 전에 종이에 그린다

직군별 데이터셋 4종

내 자리 찾기

단계적 빌드

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

인사이트 격상

룰 기반 자동 판정

운영

저장·공유·매주 갱신

마무리

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%

주택공급

지연 알림 · 남양주왕숙 공공주택 — 계획 25% → 실적 18% (7% 지연) · 즉시 검토 필요

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

03. MVD 5블록

모두 동일한 5블록 골격

헤더

이름·기준일·달성률

KPI 카드

직군별 핵심 4개

진행률 바

5개 단계·부서

알림 리스트

임계치 초과

메인 차트

간트·막대·도넛·라인

오늘의 약속

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

CHAPTER 04

환경 셋업
& 기초 다지기.

설치 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를 바로 실행·연동.

02. Step 1 — Codex 무료 설치

유일하게 손으로 하는 단계

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

1openai.com에서 무료 계정 생성
2Windows용 Codex 데스크탑 앱 다운로드
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개 체크포인트

WSL2 + Ubuntu 22.04 설치 완료

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

✓

Ubuntu 초기 설정 + 재부팅

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

✓

nvm + Node.js LTS 설치

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

✓

Claude Code 설치 + 로그인

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

✓

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. VS Code에서 Ctrl+Shift+P
2. Terminal: Select Default Profile
3. Ubuntu (WSL) 선택
4. Ctrl+`로 확인

settings.json 직접 추가

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

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

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

CODEX · 막힘 대응

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

1순위

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

2순위

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

3순위

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

08. 기초 다지기 — 터미널·경로

터미널은 무서운 게 아니다 — 단어 4개면 충분하다

터미널은 폴더 사이를 글자로 돌아다니는 곳일 뿐입니다. 마우스로 폴더를 더블클릭하는 걸 글자로 한다고 생각하면 됩니다.

pwd

지금 내가 어느 폴더에 있나? — 길 잃으면 제일 먼저.

ls

이 폴더 안에 뭐가 있나? 파일·폴더 목록 보기.

cd 폴더명

그 폴더 안으로 들어가기 (더블클릭).

cd ..

한 칸 위 폴더로 나가기 (뒤로가기).

경로 = 파일의 주소

~ 는 내 홈 폴더 (집 주소). 모든 길의 출발점.

예: ~/projects/dashboard/index.html = 홈 → projects → dashboard 안의 그 파일.

막히면 그냥 물어본다

"지금 내가 어느 폴더에 있는지, 만든 HTML 파일이 어디 저장됐는지 한국어로 알려줘" — Claude/Codex에게 그대로.

09. 기초 다지기 — 마크다운

마크다운 — 기호로 쓰는 글쓰기 언어

<h1>제목</h1> 대신 그냥 # 제목. Claude Code·Notion·Ghost·GitHub 등 거의 모든 도구가 마크다운을 씁니다. AI와 글을 주고받는 공용어입니다. 아래 8개만 알면 90%는 해결됩니다.

① 제목

# 가장 큰 제목 ## 중간 제목 ### 작은 제목

#가 많을수록 작아짐 (최대 6개).

② 강조

**굵게** *기울임* `코드 한 줄`

→ 굵게, 기울임, 코드.

③ 목록

- 항목 1 - 항목 2 - 하위 (스페이스 2칸) 1. 순서 있는 목록

-는 순서 없음, 1.은 순서 있음.

④ 링크 · 이미지

[링크](https://주소.com) ![설명](이미지.jpg)

이미지는 앞에 ! 하나 추가가 전부.

⑤ 코드 블록

```javascript const x = "world"; ```

백틱(`) 3개로 감싸고 언어 명시.

⑥ 표

| 이름 | 직업 | |------|------| | 카이라 | CEO |

|로 열 구분, 둘째 줄 ---이 헤더선.

⑦ 인용문

> 인용문은 이렇게. > 여러 줄도 가능.

줄 앞에 > → 강조 인용 박스.

⑧ 구분선

위 단락 --- 아래 단락

--- 3개 이상 → 가로 구분선.

10. 기초 다지기 — 잘 쓰는 법 & AI에게 잘 시키기

잘 쓰는 팁 5가지, 그리고 AI에게 잘 받아내는 4요소

마크다운 잘 쓰는 팁 5

1. 빈 줄을 습관화 — 단락 사이 빈 줄이 없으면 줄바꿈이 무시됨.

2. 제목 계층 지키기 — # → ## → ### 순서, 건너뛰지 않기.

3. 코드엔 언어 명시 — 언어를 써야 문법 강조가 제대로 됨.

4. 나열은 표보다 목록 — 표는 비교할 때만, 단순 나열은 목록이 읽기 좋음.

5. 결과 확인 — VS Code 미리보기로 렌더링 결과를 보며 작성.

AI에게 잘 받아내는 4요소

❌ 막연하게: "마크다운으로 글 써줘" → 구조·길이·톤을 AI가 멋대로 결정.

① 플랫폼 — "Ghost 블로그에 올릴 마크다운으로"

② 구조 — "## 제목, ### 소제목 3개, 각 아래 bullet 3줄"

③ 대상·톤 — "비개발자 직장인 대상, 친근하고 실용적으로"

④ 포함 요소 — "코드 블록 1개와 비교 표 넣어줘"

마크다운은 기호로 쓰는 글쓰기 언어, AI에게 시킬 땐 플랫폼 + 구조 + 대상 + 톤을 함께 적으면 원하는 결과를 정확히 받습니다.

11. 안전하게 일 시키기 — 안전 울타리

Claude Code를 지정한 한 폴더 안에만 가둔다

왜: AI에게 일을 시키다 보면 "이 폴더 말고 저기도 봐줘"가 됩니다. 하지만 실수로 개인 문서·회사 파일·비밀번호·시스템 파일을 읽거나 바꾸면 안 됩니다. 그래서 작업할 폴더 하나만 정해 두고, 그 밖은 막습니다.

1겹 — 진짜 샌드박스 /sandbox

OS 레벨로 가두는 울타리. bash 명령과 거기서 깔리는 도구(npm 등)까지 전부 작업 폴더 밖으로 못 나가게 막습니다. WSL2에서는 bubblewrap이 담당.

2겹 — 권한 차단 permissions.deny

샌드박스가 못 막는 Claude의 파일 도구(Read·Edit·Write)를 막습니다. 위험 경로를 deny에 적으면 묻지도 않고 차단 — deny는 허용보다 먼저 적용돼 항상 이깁니다.

WSL에서 꼭 막아야 할 폴더

경로	무엇	왜 막나
/mnt/c/**	⭐ 윈도우 C드라이브 전체	WSL에선 바탕화면·문서·다운로드가 전부 여기에 보입니다. (샌드박스는 이미 자동 차단)
/etc/ · /usr/	리눅스 시스템 파일	건드리면 우분투(OS) 자체가 고장날 수 있음.
~/.ssh/ · ~/.aws/	서버 접속키·클라우드 인증정보	유출되면 보안 사고. 읽기조차 막습니다.
~/.claude/**	Claude 로그인 정보	내 계정 인증 토큰 보호.

12. 안전하게 일 시키기 — 폴더 먼저 만들고 설치

설치도 샌드박스답게 — 집(폴더)부터 정하고, 시스템은 안 건드린다

핵심 원칙 2가지

① 작업 폴더부터 만든다
일을 시작하기 전에 "집" 폴더를 먼저 만들고, 모든 작업을 그 안에서 합니다.

② 시스템 전역이 아니라 내 계정에 설치
Claude Code는 시스템 폴더(/usr, sudo 필요)가 아니라 내 홈(~) 아래에 설치됩니다. 시스템을 더럽히지 않고, 지울 땐 내 폴더만 지우면 끝.

순서

Ubuntu (WSL)

# 1) 작업 폴더(집) 만들고 들어가기 mkdir ~/gh-dashboard cd ~/gh-dashboard # 2) Claude Code가 내 계정 영역에 깔렸는지 확인 which claude # → ~/.nvm/... 또는 ~/.local/bin 이면 OK (시스템 /usr 아님) # 3) 이 폴더에서 실행 → 여기가 작업 기준점 claude

전역(시스템) 설치와 뭐가 다른가

	시스템 전역	우리 방식 (사용자)
위치	/usr/...	~(내 홈) 아래
권한	sudo 필요	불필요
지울 때	시스템에 흔적	내 폴더만 삭제
영향 범위	PC 전체	내 계정에 한정

"-g면 전역 아니에요?" — 셋업 때 쓴 npm install -g의 -g는 '시스템 전체'가 아니라 nvm 안에서의 공용이라, 실제로는 내 계정 폴더(~) 안에 설치됩니다. 그래서 sudo가 필요 없었습니다.

13. 안전하게 일 시키기 — 진짜 샌드박스 /sandbox

WSL2를 OS 레벨로 가둔다 — /sandbox

권한(deny)은 Claude의 파일 도구만 막습니다. bash로 깔리는 도구·스크립트까지 통째로 가두려면 OS 레벨 샌드박스가 필요하고, 그게 /sandbox입니다. WSL2에서는 bubblewrap이 실제 울타리 역할을 합니다.

1필수 패키지 설치 (WSL2에서 한 번)
sudo apt-get install bubblewrap socat
→ WSL1은 불가. WSL2 필수.
2Claude Code에서 /sandbox 입력
메뉴에서 모드 선택 (Auto-allow / Regular)
→ 의존성이 없으면 설치 안내가 뜸
3기본 동작
쓰기는 작업 폴더와 하위만, 그 밖을 건드리면 차단·알림
→ 모든 하위 프로세스(npm 등)에 적용

.claude/settings.json · sandbox

{ "sandbox": { "enabled": true, "filesystem": { "denyRead": ["~/"], "allowRead": ["."] } } } # 홈 전체 읽기 차단 + 이 프로젝트(.)만 허용 # allowRead가 denyRead보다 우선

WSL 포인트: WSL2에선 /mnt/c(윈도우 드라이브)와 윈도우 프로그램 호출을 샌드박스가 자동 차단합니다. Ubuntu 24.04 이상은 bwrap용 AppArmor 프로파일을 1회 추가해야 할 수 있어요(막히면 Codex에게 그대로 물어보기).

14. 안전하게 일 시키기 — 권한 deny로 파일 도구까지

마지막 한 겹 — Read·Edit·Write 차단

/sandbox는 bash를 가두고, 이 permissions.deny는 Claude의 파일 도구(Read·Edit·Write)를 막습니다. 둘을 합쳐야 빈틈이 없습니다.

1같은 설정 파일에 deny 추가
같은 .claude/settings.json의 permissions.deny에 작성
→ 또는 아래 프롬프트로 Codex/Claude에게 시키기
2deny = 바깥 위험 경로 차단
윈도우 드라이브·시스템·비밀 폴더를 묻지도 않고 막음
→ deny는 허용보다 먼저 적용돼 항상 이김
3울타리 확인
"바탕화면 파일 하나 열어봐"라고 시켰을 때 거부하면 성공

주의: ~/**(홈 전체)처럼 너무 넓게 막으면 작업 폴더까지 같이 막혀버립니다. 바깥의 위험한 곳만 콕 집어 막으세요.

.claude/settings.json

{ "permissions": { "deny": [ "Read(/mnt/c/**)", "Edit(/mnt/c/**)", "Read(/etc/**)", "Edit(/etc/**)", "Read(/usr/**)", "Read(~/.ssh/**)", "Read(~/.aws/**)", "Read(~/.claude/**)" ] } }

CODEX/CLAUDE · 시키는 버전

지금 이 폴더(~/gh-dashboard) 안에서만 작업하도록 .claude/settings.json을 만들어줘. 윈도우 드라이브(/mnt/c), 시스템 폴더(/etc, /usr), 그리고 ~/.ssh ~/.aws ~/.claude 같은 비밀·인증 폴더는 deny로 막아줘. 단, 이 작업 폴더 자체는 막지 마.

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 모드로 먼저 설계를 제안해줘. 코드는 내가 승인한 다음에 작성.

Plan 검토

읽어보고 빠진 거 있는지

수정 요청 (3~4회)

"이 부분만 바꿔서 다시"

승인 → 빌드

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

① 작업 폴더 만들기

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

② Claude Code 켜고 /init

GH-progress에서 Claude Code 실행 → /init 입력 → 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 가로 인쇄 가능

① 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 가로 인쇄 가능

② 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 가로 인쇄 가능

③ 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 가로 인쇄 가능

④ 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 미달

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
설치하라 — 오늘 셋업한 WSL2 + Claude Code 환경을 회사 PC에 그대로 옮긴다.
막히면 Codex에게 한국어로 물어본다.
2
다운로드하라 — 본인 직군 샘플 CSV 1개를 다시 열어 컬럼·KPI 계산식을 5분간 읽는다.
그 다음 본인 실데이터 1주일치를 같은 형식으로 정리한다.
3
스케치하라 — A4 한 장에 부서장이 보는 5블록 MVD를 손으로 그린다.
WHO·WHAT·WHEN·WHY 한 문장씩 적어둔다.
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

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

강사 소개

김혜련 Kyra Kim

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

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

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

데이터 시각화 4차 물결

보고서 vs 대시보드

오늘 만들 두 가지

환경 셋업 & 기초 다지기

Plan 모드 기획

직군별 데이터셋 4종

단계적 빌드

인사이트 격상

운영

마무리

데이터 시각화4차 물결.

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

1차 — 종이 보고서

2차 — 엑셀

3차 — BI 도구

4차 — AI 대시보드

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

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

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

오늘 우리가 만드는 것 —MVD

예쁘면 좋은 대시보드인가

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

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

GH 종합사업 대시보드 미니

5블록 미니 대시보드

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

모두 동일한 5블록 골격

헤더

KPI 카드

진행률 바

알림 리스트

메인 차트

환경 셋업& 기초 다지기.

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

Codex 앱 (무료)

WSL2

Node.js

Claude Code

VS Code

Claude Code Extension

유일하게 손으로 하는 단계

왜 Claude가 아니고 Codex?

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

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

WSL2 + Ubuntu 22.04 설치 완료

Ubuntu 초기 설정 + 재부팅

nvm + Node.js LTS 설치

Claude Code 설치 + 로그인

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

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

GUI 방법

settings.json 직접 추가

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

1순위

2순위

3순위

터미널은 무서운 게 아니다 — 단어 4개면 충분하다

pwd

ls

cd 폴더명

cd ..

마크다운 — 기호로 쓰는 글쓰기 언어

① 제목

② 강조

③ 목록

④ 링크 · 이미지

⑤ 코드 블록

⑥ 표

⑦ 인용문

⑧ 구분선

잘 쓰는 팁 5가지, 그리고 AI에게 잘 받아내는 4요소

Claude Code를 지정한 한 폴더 안에만 가둔다

1겹 — 진짜 샌드박스 /sandbox

2겹 — 권한 차단 permissions.deny

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

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

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

데이터 시각화
4차 물결.

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

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

오늘 우리가 만드는 것 —
MVD

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

환경 셋업
& 기초 다지기.

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

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

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

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

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

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