mySUNI AI Camp · Day 2
mySUNI AI Camp · 2일차 · 2026. 10. 14

자료 파일 하나로
웹 화면을 만들고
인터넷 주소로 보내기

태양광 발전소 다섯 곳의 실적 대시보드를 만들면서
계획 → 기준 → 시안 → 순서 → 고치기 → DB → 배포까지 갑니다.
김혜련 · Artetlab · 수송스퀘어 5층 중강의장2 · 09:00-18:00
오늘 만들어 인터넷 주소로 올릴 대시보드
김혜련
Speaker
김혜련 Kyra Kim
아르테랩(Artetlab) 대표 · AI 업무 자동화 · 기업 AX 교육
10년+대기업 웹·앱 구축
PM · PL
18곳기업 · 공공기관 · 대학
AI 교육 · 코칭
40회+강의 · 웨비나
워크숍
9기수4주 과정
커뮤니티 스터디
학력서울시립대학교 수학과
전직2008년부터 삼성 · 현대자동차 · 한화 · 롯데 · KCC · KB국민은행 웹·앱 구축 PM · PL
지금2024년부터 아르테랩 대표. 기업 업무 자동화를 만들고, 그 방식을 임직원 교육으로 가르칩니다
저서『당신의 첫 AI 직원』 서울경제경영출판사 · 2026
운영100X.MONSTER 공동창업 · GPTers 스터디장 5기수
교육한 분야
바이브코딩 · 사내툴 만들기충북대학교 · SK바이오팜 · 헥토 · KCH그룹 · 세계일보 · SKT
업무 자동화 (Make · n8n)멀티캠퍼스 · SK Design Camp · GPTers 스터디
AI 에이전트 설계LG U+ Enterprise TF · SK온 (Dify) · 100X.MONSTER
임원 · 관리자 AI 교육한솔그룹 HCLP · LG U+ 임원 · LG AX Camp · 국민건강보험공단
AI 실무 활용 (보고서 · 데이터 정리)인천광역시체육회 · 경기주택도시공사
함께한 곳
한솔그룹LG U+LGSK텔레콤SK바이오팜SK온국민건강보험공단경기주택도시공사충북대학교충북대학교헥토KCH그룹세계일보멀티캠퍼스인천광역시체육회
Today · 오늘 하는 일

대시보드 하나를 만들고,
마지막 두 시간은 내 업무를 꺼냅니다

09:00
계획 · 오류 · 고치기
파일 하나로 화면 한 장. 만들기 전에 기준부터 정합니다
1-3부
13:00
Claude Code 고급 기능
플러그인 · 커넥터 · 스킬 · 서브에이전트
4부
14:30
데이터베이스와 배포
숫자는 DB로, 화면은 인터넷 주소로
5부
16:00
병목 발굴 · 문제정의
반복하는 일 열 개 중 도구로 만들 것 하나
6부
17:00
바이브코딩 기획
작게 한 번 돌려 보고 중간과제 기획서까지
7부
What you learn

만드는 것은 대시보드,
익히는 것은 만드는 순서

파일을 받아서 그냥 만들지 않습니다. 만들기 전에 무엇을 만들지 정하고, 만들면서 오류를 잡고, 다 만든 다음 조금씩 고쳐 나갑니다. 아무것도 모르는 상태에서 돌아가는 무언가를 만들어 내는 순서입니다.
Prep · 준비물

노트북, 브라우저, GitHub 계정,
그리고 실습 파일 두 개

노트북, 브라우저, GitHub
파일무엇인가언제
발전량.csv발전소 다섯 곳의 2025년 1-12월 발전량 60줄1절부터
2026-1분기.csv현장에서 온 모양 그대로인 2026년 1-3월 자료9절
버튼을 누르면 바로 받아집니다. 받은 파일은 1절에서 만들 Docs 폴더에 넣습니다.
화면에 나오는 답

같은 그림이 아니라
같은 순서가 목표입니다

여기 실린 화면과 답은 제가 미리 한 번 돌려 본 것입니다. 여러분 노트북에서는 문장과 숫자가 조금씩 다르게 나옵니다.
Warning · 회사 자료를 쓰실 때

오후에 인터넷에 올리니,
이름과 숫자는 가짜로 바꿔 넣으세요

그대로 넣으면
  • 실제 회사명 · 거래처명
  • 실제 프로젝트명
  • 실제 매출 · 실적 숫자
이렇게 바꿔서
  • 회사명은 A사
  • 프로젝트명은 Project A
  • 숫자는 같은 모양의 가짜 숫자
오전에는 나눠 드린 파일로만 합니다. 자기 자료로 해 보는 것은 오후 6-7부입니다.
Part 01 · 09:00

계획을 보고
만들기

시키면 바로 만들어 줍니다.
그런데 바로 만들게 하면,
틀린 것도 다 만든 뒤에야 보입니다.
오늘은 만들기 전에 기준을 정합니다.
Morning map · 오전에 지나갈 길

전체를 먼저 봅니다.
여섯 단계마다 파일이 하나씩 남습니다

01
자료 넣기
폴더 안 Docs에 받은 파일을 넣습니다
Docs/발전량.csv
02
계획 먼저 보기
"어떻게 만들 건지 먼저 보여줘"
PLAN.md
03
기준 정하기
목표 · 넘으면 안 되는 것 · 볼 기준
spec.md
04
화면 시안 받기
세 개를 나란히 보고 골라서 내려받기
시안A.html
05
순서 나눠 만들기
내가 확인하는 단계에서 멈추게 합니다
tasks.json · index.html
06
오류 잡고 고치기
한 번에 한 가지씩, 고치기 전에 저장
커밋 기록
Your own data

만들고 싶은 것이 있으면
그걸로 하셔도 됩니다

자료만 바뀌고 순서는 똑같습니다. 다만 오후에 인터넷에 올리니, 숫자와 이름은 가짜로 바꿔서 넣어 주세요.
01 · 폴더 만들고 자료 넣기

받은 원본은 Docs에 따로 두고
손대지 않습니다

폴더 모양
solar-dashboard/
└── Docs/
    └── 발전량.csv
발전량.csv 안 · 60줄 중 3줄
발전소,지역,설비용량_kW,월,발전량_kWh,이용률_%
해남 1호,전남,998,2025-01,85392,11.5
해남 1호,전남,998,2025-02,81515,12.2
해남 1호,전남,998,2025-03,125174,16.9
만든 것과 받은 것이 섞이면 "이게 원본인가" 헷갈립니다. 폴더 이름은 영문 소문자와 하이픈으로 짓습니다. 한글이나 띄어쓰기가 들어가면 나중에 번거롭습니다.
01 · Claude 앱에서 시작하기

오늘은 터미널 없이
Claude 앱의 Code 탭에서 다 합니다

왼쪽 위Code 탭 아이콘과 새로 생성
Claude 앱
로그인된 상태로 엽니다
</> 아이콘
맨 위 아이콘 두 개 중 오른쪽. 누르면 Code 탭
+ 새로 생성
검색창 바로 아래. 가운데 아래에 입력창이 나옵니다
입력창과 그 위아래 칸Code 탭 입력창
Claude 앱의 Code 탭이 Claude Code입니다. 입력창 위 칸은 어디서 일할지(로컬 · 폴더), 아래 칸은 어떻게 일할지(모드)입니다.
01 · 일할 폴더 고르기

클라우드 → 로컬로 바꾸고,
폴더 칸 → 폴더 열기… → solar-dashboard

로컬로 바꾼 뒤 폴더 칸을 누르면폴더 메뉴
1 · 맨 왼쪽 칸처음에는 클라우드입니다. 눌러서 로컬로 바꿔야 내 노트북 폴더를 고를 수 있습니다
2 · 폴더 칸로컬로 바꾸면 생깁니다. 누르고 맨 아래 폴더 열기…에서 solar-dashboard
3 · 워크트리체크하지 않습니다
맨 왼쪽 칸이 로컬인가. 폴더 칸에 solar-dashboard가 보이는가.
02 · Note · 개념

계획 모드란

계획표와 안경
파일을 읽기만 하고 고치지 않는 상태입니다. 무엇을 어떻게 만들지 적어서 보여 주고, 제가 좋다고 해야 그때부터 만듭니다.
켜기입력창 아래 "자동"을 눌러 "계획"을 고릅니다. 영어로는 Plan 모드
고치기계획이 마음에 안 들면 그냥 다시 말하면 됩니다
이유폴더에 아무것도 안 만들어 놨으니 지울 것도, 되돌릴 것도 없습니다
02 · 계획 모드 켜기

입력창 아래 "자동"을 누르고
네 번째 "계획"을 고릅니다

모드 메뉴모드 메뉴
자동기본값. 지금 모드가 자동이라는 뜻입니다
계획변경하기 전에 계획 세우기. 파일을 읽기만 하고 고치지 않습니다
바뀐 걸 확인입력창 아래 글자가 "계획"으로 바뀌면 됩니다
02 · 바로 만들지 말고 계획부터

계획 모드를 켜고 이렇게 칩니다

Docs/발전량.csv 보고 대시보드 만들 건데, 바로 만들지 말고 계획부터 보여줘. 계획은 PLAN.md로 저장해줘. 발전소별 월별 발전량 한눈에 보이게 할 거야.
먼저입력창 아래 "자동" → "계획"
핵심"바로 만들지 말고 계획부터"
1분쯤 뒤파일은 하나도 안 만들고 계획을 보여 줍니다
02 · 계획에 온 답

만들기 전에 자료를 다 읽고,
이상한 숫자부터 알려 줍니다

데이터 확인 결과 · 발전소 5곳 × 12개월 = 60줄, 빠진 달 없음
1. 설비용량이 5배 차이납니다 (998 kW - 4,950 kW). 발전량 숫자만 보면 당진 4호가
   항상 1등이라 비교가 안 됩니다. 크기를 맞춘 이용률로 보면 제일 작은 해남 1호가
   1등입니다. 그래서 두 그래프를 다 넣습니다.
2. 당진 4호 8월 이용률이 7.5%입니다. 7월 11.7%, 9월 16.6% 사이에서 혼자 떨어졌고,
   같은 8월에 나머지 네 곳은 오히려 올랐습니다. 보는 사람이 제일 먼저 물어볼
   숫자라 화면에 표시해 둡니다.
(화면 구성과 만드는 방식은 줄임)
당진 4호 8월이 이상하다는 것을 화면을 만들기도 전에 알려 줬습니다. 이 한 줄이 13절에서 다시 나옵니다.
02 · 진행을 고르면

진행을 고르는 순간
PLAN.md가 첫 작업으로 생깁니다

계획을 보여 주는 동안 · 답 맨 아래
지금은 계획 세우는 중이라 프로젝트 폴더에
파일을 못 만듭니다. 진행하라고 하시면
첫 작업으로 PLAN.md를 프로젝트 폴더에 저장하고
대시보드를 만들겠습니다.
화면 아래 창에서 진행 · 칸에 한 줄
좋아. 그대로 진행해.
그 창의 글 칸에 "그래프는 두 개만 해줘"처럼 고칠 것을 적어도 됩니다. "자동"으로 다시 바꿀 필요는 없습니다. 진행을 고르면 계획 모드가 같이 풀립니다.
계획을 보여 줄 때까지 폴더에 새 파일이 없는가. 진행 뒤 PLAN.md가 생겼는가.
03 · Note · 개념

spec.md란

기준 문서
무엇을 만드는지, 넘으면 안 되는 것, 잘 만들었는지 볼 기준을 적은 한 장짜리 문서입니다. 앞으로 모든 작업이 이 파일을 보고 갑니다.
PLAN"이렇게 만들겠습니다". 한 번 하고 지나갑니다
SPEC"이게 기준입니다". 오늘 하루 내내 다시 읽힙니다. 새 대화도 이 파일부터 읽습니다
그래서제가 잘못 시키면 그대로 따르지 않고 되묻습니다. 13절에서 실제로 일어납니다
03 · 계획을 기준으로 확정하기

먼저 물어보라고 하면,
평소 말로 짧게 답합니다

① 시키는 말
좋아. PLAN.md 보고 spec.md 한 장으로 남겨줘. 목표, 넘으면 안 되는 것, 잘 만들었는지 볼 기준 세 개. 궁금한 거 있으면 먼저 물어봐.
② 되물은 세 가지에 답하는 말
태양광 발전소 다섯 곳 운영 실적이야. 화면은 간단하게 해줘. 발전소별 월별 표 하나랑 월별 합계 막대 하나면 돼. index.html 파일 하나로. 나중에 인터넷에 올릴 거야. 이대로 spec.md 써줘.
바로 쓰지 않고 결과물 · 그래프 · 저장 위치를 다시 물었습니다. 답을 정해 줘야 "넘으면 안 되는 것"을 쓸 수 있어서입니다.
03 · 30초 뒤 생긴 spec.md

"넘으면 안 되는 것"이
나중에 제 지시를 막습니다

spec.md · 목표와 넘으면 안 되는 것
## 목표
태양광 발전소 다섯 곳의 2025년 운영 실적을 한 화면에서 본다.
1. 발전소별 월별 표   2. 월별 합계 막대그래프

## 넘으면 안 되는 것
- 화면은 표 하나, 막대그래프 하나까지만 둔다.
- 파일은 index.html 하나로 끝낸다. CSV 내용은 파일 안에 넣는다.
- 외부 그래프 도구를 쓰지 않는다.
- CSV에 없는 숫자는 만들지 않는다. 합계 말고 다른 계산은 넣지 않는다.
- Docs/발전량.csv는 수정하지 않는다.
- 인터넷에 올리기 전에 외부에 공개해도 되는지 먼저 확인한다.
표 하나, 막대 하나시안 셋이 이 조건을 지켜서 고를 수 있게 됩니다 (4절)
합계 말고 계산 없음13절에서 제가 틀린 기준을 줬을 때 이 줄 때문에 먼저 되묻습니다
공개해도 되는지제가 말하지 않은 줄. "나중에 인터넷에 올릴 거야"를 듣고 넣었습니다
03 · 잘 만들었는지 볼 기준

CSV에서 직접 더한 합계 열세 개가
대조의 기준이 됩니다

월합계월합계
1월981,5287월1,016,505
2월944,9468월972,091
3월1,402,6999월1,379,385
4월1,579,81410월1,263,000
5월1,663,07311월891,465
6월1,416,69612월875,032
연간 총합 (kWh)14,386,234
1 · 숫자가 CSV와 맞는다지금은 쓸데없어 보여도, 숫자가 틀어졌을 때 무엇과 비교할지 이 표가 알려 줍니다 (11절)
2 · 5초 안에 답한다가장 많은 달은 5월, 가장 적은 달은 12월
3 · 어디서 열어도 같다다른 폴더로 옮겨도, 휴대폰 폭에서도
기준에 눈으로 확인할 수 있는 것이 적혀 있는가. "사용성이 좋다" 같은 줄만 있으면 다시 시킵니다.
04 · Note · 개념

/design이란

시안 세 장
Claude Code에 처음부터 들어 있는 명령입니다. 치면 내 폴더가 아니라 claude.ai에 도화지가 하나 생기고, 시안이 한 칸씩 나란히 놓입니다.
설치따로 깔 것 없음. Code 탭 입력창에 /design부터 그대로 칩니다
공유주소는 비공개로 시작합니다. 남에게는 공유 메뉴에서 권한을 줍니다
주의폴더로 가져오는 것은 한 번 더 말해야 합니다. 이 절 뒤쪽에서 합니다
04 · 화면 시안 세 개를 한꺼번에

spec.md는 글이니,
만들기 전에 눈으로 봅니다

/design spec.md 보고 발전량 대시보드 화면 시안 3개 만들어줘. Docs/발전량.csv 숫자 그대로 쓰고. 표 하나랑 월별 합계 막대 하나. 데스크탑 기준 반응형으로.
시안 3개한 캔버스에 나란히 놓고 고릅니다
숫자 그대로가짜 숫자를 넣지 않게 합니다
반응형이 한 마디로 휴대폰 폭까지 한 번에 그립니다
몇 분 뒤 주소가 하나 나옵니다. 열면 큰 도화지 위에 시안 세 개가 놓여 있습니다.
04 · 캔버스

셋 다 숫자는 같고, 다른 것은
무엇을 먼저 보여 주는가

claude.ai 디자인 캔버스 · 시안 A · B · C시안 세 개
04 · 답에 온 표

5초 보고 넘길 자료면 B,
숫자를 짚어 가며 볼 자료면 A

시안성격배치색 · 글꼴
A · 보고서형인쇄해서 돌려도 무리 없는 문서표 위 · 막대 아래아이보리, 명조 제목, 주황빛 막대
B · 편집형막대를 먼저, 숫자로 확인막대 위 · 표 아래회백, 굵은 제목, 남색 막대
C · 어두운 화면모니터에 계속 띄워 두는 용도표 위 · 가로 막대 12줄어두운 바탕, 고정폭 숫자
저는 A로 갔습니다. 셋 중에 회의나 보고에 그대로 들고 가기 가장 알맞은 모양이라서입니다. 캔버스 오른쪽 Tweaks에서 막대 색도 바꿔 볼 수 있습니다.
04 · 프롬프트의 "반응형"

"반응형" 한 줄이면
휴대폰 화면까지 한 번에

안 넣으면
데스크탑 폭 하나로만
  • 넓은 화면 기준으로만 그립니다
  • 휴대폰 대응을 나중에 따로 붙여야 합니다
넣으면 · 답에서
1440px 기준. 화면 폭이 860px 아래로
내려가면 표가 발전소별 카드로 접혀서
옆으로 밀지 않고 읽힙니다
(각 칸에 월 이름이 붙습니다)
폭마다 시안을 따로 그리라고 하지 않습니다. 그러면 시안 3개가 6장이 됩니다.
04 · Important · 시안을 고칠 때

"좀 더 깔끔하게 해줘"로는
화면이 안 바뀝니다

몇 번을 시켜도 비슷한 것이 나오는 말
  • 좀 더 깔끔하게 해줘
  • 세련되게 해줘
  • 예쁘게 만들어줘
그대로 바뀌는 말 · 대상과 방향
글자
제목 글자 좀 키워줘
색
막대 색을 더 진하게 해줘
배치
표를 막대 위로 올려줘
그래서
세 개를 만들어 보고 고른다
깔끔하다는 말이 사람마다 달라서, 무엇을 어떻게 바꾸라는 것인지가 말 안에 없습니다.
04 · 고른 시안을 내 폴더로

고르면 캔버스에만 두지 말고
내 폴더로 가져옵니다

치는 말
A로 갈게. 이 시안 내 폴더에 시안A.html로 내려받아줘. 브라우저에서 바로 열리게.
답
시안 A를 `시안A.html`로 저장했고, 기본 브라우저로
한 번 열어 뒀습니다.
- 들어간 내용: 제목, 발전소 5곳 월별 표, 월별 합계 막대
- 캔버스에서 쓰던 편집용 코드는 뺐습니다. 막대 색은
  기본색인 갈색(#B4530A)으로 고정했습니다.
- 글꼴은 구글 폰트에서 받아 옵니다. 인터넷이 끊겨
  있으면 기본 글꼴로 보입니다.
캔버스 주소가 나왔는가. 시안 셋이 확실히 다른가. 시안A.html이 폴더에 생겼고 열리는가.
04 · 내려받은 시안은 무엇인가

내려받은 파일은
모양만 있는 한 장입니다

시안A.html
  • 숫자가 글자로 박혀 있습니다
  • Docs/발전량.csv를 고쳐도 화면은 그대로
  • 지우지 말고 모양 기준으로 옆에 둡니다
오늘 만들 index.html
  • 모양은 시안에서 가져옵니다
  • 숫자는 CSV에서 계산해 채웁니다
  • 자료가 바뀌면 화면이 따라 바뀝니다
보고용 PDF만 필요하면 캔버스 페이지 오른쪽 위 공유 → 내보내기에서 HTML이나 PDF로 바로 받아도 됩니다.
05 · Note · 개념

tasks.json이란

순서 카드
만드는 순서를 단계로 나눠 적은 파일입니다. 체크리스트와 업무일지를 한 파일에 둔 것이라고 보면 됩니다.
칸할 일 · 담당(Claude인지 나인지) · 먼저 끝나야 할 단계 · 끝난 걸 확인하는 법 · 상태
진행상태가 "할 일"에서 "끝남"으로 바뀝니다
기록단계가 끝날 때마다 맨 아래에 한 줄씩 붙습니다
05 · 만드는 순서 나누기

spec.md와 시안A.html을
둘 다 보라고 합니다

spec.md랑 시안A.html 보고 만드는 순서를 tasks.json으로 나눠줘. 화면 다 만든 다음 내가 확인하는 단계는 담당을 나로 해줘. 아직 만들지는 말고.
spec.md지켜야 할 조건
시안A.html화면 모양. 하나만 주면 나머지는 그때그때 정해집니다
내 차례확인 단계를 넣어야 Claude가 거기서 멈추고 기다립니다
05 · 단계 여덟 개

시안을 같이 줘서
2번 "시안 A 모양으로 틀 잡기"가 생겼습니다

번호작업담당먼저 끝나야 할
1CSV 데이터를 index.html 안에 넣기Claude없음
2시안 A 모양으로 화면 틀 잡기Claude없음
3발전소별 월별 표 만들기Claude1, 2
4월별 합계 막대그래프 만들기Claude1, 2
5휴대폰 폭에서 보기 좋게 다듬기Claude3, 4
6숫자 대조와 파일 옮겨 열기Claude5
7화면 최종 확인나6
8인터넷 공개 가능 여부 확인나없음
제 담당으로 해 달라고 한 것은 7번 하나입니다. 8번은 제가 말하지 않았는데 Claude가 넣었습니다. spec.md에 "올리기 전에 공개해도 되는지 확인한다"는 줄이 있고, 이건 사람이 정할 일이라 담당을 저로 한 것입니다.
05 · 답에 붙어 온 것

시안과 spec.md가
서로 안 맞는 곳을 먼저 알려 줍니다

시안 A는spec.md는그래서
글꼴구글 폰트를 인터넷에서 불러옴옆에 다른 파일 없이 열려야 함컴퓨터 기본 글꼴. 제목이 조금 달라 보임
휴대폰 막대 숫자좁은 폭에서 막대 위 숫자를 숨김5초 안에 가장 많은·적은 달좁은 화면에서도 숫자를 보이게
"이대로 만들어줘"라고 던졌으면, 인터넷이 없는 회의실에서 열었을 때야 알았을 것입니다.
05 · 단계 하나의 생김새

중요한 칸은
끝난걸확인하는법입니다

tasks.json · 3번
{
  "번호": 3,
  "이름": "발전소별 월별 표 만들기",
  "할일": "1번 데이터로 발전소 5줄 × 1-12월 12칸 표를 채운다.
     맨 오른쪽에 발전소별 연간 합계, 맨 아래에 월별 합계.
     시안 A는 숫자가 직접 적혀 있지만, 여기서는
     데이터에서 계산해 넣는다.",
  "담당": "Claude",
  "먼저끝나야할작업": [1, 2],
  "끝난걸확인하는법": "표 맨 아래 줄 합계가 spec.md의
     월별 합계와 같고, 오른쪽 아래 칸이 14,386,234다.",
  "상태": "할 일"
}
끝난걸확인하는법없으면 "다 됐습니다"라는 말만 믿게 됩니다. 있으면 그 한 가지만 확인하면 됩니다
할일 마지막 줄모양은 시안에서, 숫자는 CSV에서 새로 계산
담당이 내 이름인 단계가 있는가. 없으면 "7번 담당을 나로 바꿔줘".
06 · 순서대로 만들고 내 차례에서 멈추기

한 줄 치면 6번까지 하고
7번(내 차례)에서 멈춥니다

치는 말
좋아, tasks.json 순서대로 해줘. 단계 하나 끝날 때마다 상태 바꾸고 기록 한 줄 남겨. 내 차례 오면 멈춰.
4분 뒤 답
제 담당인 1-6번을 모두 끝냈고, 7번(화면 최종 확인)이
대표님 차례라 여기서 멈췄습니다.

확인한 것
- 발전소별 칸 60개, 합계 13개, 막대 위 숫자 24개를 CSV와
  대조. 연간 총합은 14,386,234입니다.
- 가장 긴 막대는 5월, 가장 짧은 막대는 12월입니다.
- index.html만 다른 폴더로 옮겨 열어도 그대로 나옵니다.
- 320px부터 1728px까지 12가지 폭에서 옆으로 안 밀림.
06 · 답의 뒷부분

시안과 달라진 곳을
이유를 붙여서 네 개 적어 왔습니다

01
1100px 이하 → 카드
시안은 860px였는데 1100px에서 연간 합계 칸이 잘려서 기준을 올림
02
1000px 이하 → 가로 막대
좁은 화면엔 숫자 넣을 공간이 없어서. 데스크탑은 시안대로 세로
03
휴대폰: 막대가 카드 아래
답이 아니라 질문. "5초 안에 찾기"로 보면 막대를 위로 올리는 게 나을 수 있다
→ 12절
04
설명 문구 바꿈
"막대 최대 1,800,000 kWh". 가로 막대에도 맞게
06 · tasks.json 맨 아래

바꾼 이유가 기록에 한 줄씩 남습니다

기록 · 2번과 5번
2026-09-28 23:09 2번 끝남: 시안 A의 색·제목 줄·표 위 막대 아래 순서를 옮겼다.
                 구글 폰트 대신 컴퓨터 기본 명조·고딕을 쓴다. 1440px 캡처에서
                 제목 줄이 시안과 같게 보인다. 외부 주소 0개.
2026-09-28 23:11 5번 끝남: 1100px 이하에서 표를 발전소별 카드로 바꾸고, 1000px
                 이하에서는 막대를 가로로 눕혀 숫자 12개가 막대 옆에 보이게 했다.
                 1100px에서 연간 합계 칸이 잘려 1101-1300px 칸 여백을 줄여 고쳤다.
대화창은 닫으면 사라지지만 기록은 파일에 남습니다. "왜 휴대폰에서는 막대가 가로지?" 싶을 때 이 파일을 봅니다.
06 · 더블클릭해서 열기

시안 A 그대로이고,
제목 글꼴 하나만 다릅니다

4절 · 시안A.html시안 A
구글 폰트 · 모양만 있는 한 장
6절 · index.html만든 index.html
컴퓨터 기본 글꼴 · 숫자는 CSV에서 계산
오른쪽 아래 14,386,234인가. 5월이 가장 길고 12월이 가장 짧은가. 창을 좁히면 카드로 바뀌는가.
07 · Note · 개념

HTML · CSS · JavaScript란

웹 화면 세 겹
CSS
꾸미는 부분
색 · 글자 크기 · 간격. 무엇이 있는지는 없고 어떻게 보일지만 적혀 있습니다
HTML
화면에 놓는 부분
무엇을 어떤 순서로 놓을지. 집으로 치면 방 배치도
JavaScript
계산해 채우는 부분
페이지를 열 때 브라우저가 실행해서 빈 표와 빈 막대를 채웁니다
오늘 만든 것은 207줄짜리 파일 하나에 셋이 다 들어 있습니다. 한 장짜리는 나누면 올릴 파일만 늘어납니다.
07 · 만들어진 파일 안 보기

오후에 고칠 파일이니,
어디에 무엇이 있는지만 압니다

치는 말
index.html 안에 뭐가 들어 있는지 세 부분으로 나눠서 설명해줘. 몇 줄부터 몇 줄인지랑 같이. 웹 처음 보는 사람한테 설명하듯이.
줄부분무엇 · 답을 줄 지도로
7-74CSS색 이름(8-13) · 넓은 화면 · 좁아질 때 규칙
76-96HTML제목 · 빈 표 · 빈 막대
98-160자료발전량.csv 원본 그대로 60줄
161-205JavaScript합계 계산 · 표와 막대 채우기
07 · 97-160줄 실물

자료는
98-160줄에 따로 모여 있습니다

index.html · 자료 부분
<!-- 발전량.csv 원본 그대로 (60줄 + 머리줄) -->
<script type="text/csv" id="csv">
발전소,지역,설비용량_kW,월,발전량_kWh,이용률_%
해남 1호,전남,998,2025-01,85392,11.5
해남 1호,전남,998,2025-02,81515,12.2
(… 56줄 …)
제주 5호,제주,1200,2025-11,90527,10.5
제주 5호,제주,1200,2025-12,82366,9.2
</script>
그대로받은 CSV를 한 글자도 바꾸지 않고 붙여 넣었습니다. spec.md의 "CSV 내용은 파일 안에 넣는다"
다음 달이 구간만 새 자료로 바꾸면 표와 막대가 같이 바뀝니다
오후 22절이 구간을 통째로 들어내고 DB에서 읽어 오게 바꿉니다
내 파일에서 자료가 몇 줄부터 몇 줄까지인지 아는가.
08 · 고치기 전에 한 번 저장하기

이제부터 고칩니다.
고치기 전에 지금 상태를 저장합니다

① 저장
지금 상태 커밋해줘. "1-6번: 표와 막대까지"로.
② 확인도 말로
커밋 기록 보여줘.
47d5f81 1-6번: 표와 막대까지
되돌아갈 수 있는 곳은 커밋해 둔 곳까지입니다. 커밋 기록의 앞 7자리가 이 저장의 번호, 뒤가 붙인 이름입니다.
Part 02

오류 수정 &
디버깅 실전

화면이 안 뜨는 것보다 무서운 것은,
화면이 멀쩡한데 숫자가 틀린 경우입니다.
둘 다 오늘 한 번씩 보고 넘어갑니다.
09 · 현장에서 온 자료

현장에서 온 파일은
모양부터 다릅니다

오전 · 발전량.csv
발전소,지역,설비용량_kW,월,발전량_kWh,이용률_%
해남 1호,전남,998,2025-01,85392,11.5
해남 1호,전남,998,2025-02,81515,12.2
해남 1호,전남,998,2025-03,125174,16.9
현장 · 2026-1분기.csv
사업소,월,발전량,이용률
해남1호,2026-01,"88,120",11.9
해남1호,2026-02,"79,430",11.8
해남 1호,2026-03,"131,005",17.7
영암2호,2026-01,"96,540",
...
새만금5호,2026-01,"210,440",11.4
버튼을 눌러 받고 Docs 폴더에 넣습니다. 엑셀로 주고받다 보면 늘 이렇게 옵니다.
09 · 이어서 붙이기

모양이 네 군데 달라도
처리 방법은 말하지 않고 한 줄만 칩니다

01
열 이름
발전소가 아니라 사업소. 지역과 설비용량 열은 아예 없습니다
사업소
02
숫자 모양
천 단위 쉼표와 따옴표가 붙었습니다
"88,120"
03
이름 표기
붙여 쓴 이름과 띄어 쓴 이름이 섞여 있습니다
해남1호 · 해남 1호
04
빈칸
영암 2호 1월 이용률이 비어 있습니다
96,540,
치는 말
현장에서 2026년 1분기 자료 받았어. Docs/2026-1분기.csv. 지금 대시보드에 이어서 붙여줘.
쉼표 · 띄어쓰기 · 빈칸을 어떻게 할지 말하지 않았는데, 바로 붙이지 않고 먼저 물어 왔습니다.
09 · 붙이기 전에 온 답

쉼표는 알아서 맞추고,
발전소가 바뀐 것은 저에게 넘깁니다

답 · 표는 줄임
아직 붙이지 않았습니다. 새 자료의 발전소 한 곳이 기존 자료와
달라서, 붙이는 방식을 먼저 정해 주셔야 합니다.

이름 띄어쓰기와 쉼표는 제가 읽을 때 맞추면 됩니다.

정해 주셔야 하는 건 제주 5호와 새만금 5호의 관계입니다.
새만금 5호 발전량이 제주 5호의 두 배쯤이라 이름만 바뀐
같은 발전소로 보기 어렵습니다.

1. 다른 발전소로 보고 둘 다 넣기: 표가 6줄이 됩니다.
2. 같은 발전소로 보고 한 줄로 합치기
3. 현장에 다시 확인하기 (추천)
알아서 한 것 · 자료 고치기
  • "88,120" 쉼표 벗기기
  • 해남1호 · 해남 1호 맞추기
넘긴 것 · 업무 판단
  • 새만금 5호가 제주 5호를 대신하는 곳인가
  • 이건 현장만 압니다
09 · 두 번째 줄

붙이라고만 하지 않고
한 줄을 더 붙입니다

치는 말
1번으로 해줘. 다른 발전소로 보고 둘 다 넣어. 그리고 새로 붙인 자료가 기존 자료랑 앞뒤가 맞는지 확인해 봐.
첫 줄만 쳤을 때
새만금 5호 하나만 물음
"앞뒤가 맞는지 확인해 봐"를 붙이자
세 곳이 더 나옴
몇 분 뒤 화면에 2026년 1-3월이 붙은 채로 뜹니다. 쉼표도 벗겨졌고 이름 표기도 맞춰졌습니다. 오류는 하나도 안 났습니다.
09 · 붙인 뒤에 온 답 · 맨 위

오류는 안 났는데,
5곳 중 3곳이 앞뒤가 안 맞습니다

답 맨 위 세 줄
2026년 1-3월을 대시보드에 붙였습니다. 다만 새 자료를 기존 자료와 맞춰 보니 5곳 중
3곳의 숫자가 앞뒤가 맞지 않습니다. 대시보드를 밖에 보여 주기 전에 현장에 확인이
필요합니다.

확인 방법: 2025년 자료 60줄은 "이용률 = 발전량 ÷ (설비용량 × 그달 시간)" 식으로
계산하면 60줄 모두 파일의 이용률과 같게 나옵니다. 같은 식을 2026년 자료에 적용했습니다.
여기가 오늘 오전에서 제일 중요합니다. 시킨 일이 잘 됐다는 말보다, 이 문단을 먼저 읽습니다.
09 · 앞뒤가 맞는지 확인한 결과

작년 60줄로 식을 먼저 확인하고,
같은 식에 올해를 넣었습니다

발전소작년 같은 달 대비 발전량파일에 적힌 이용률2025년 설비용량으로 계산한 이용률판단
해남 1호-3% - +5%11.8 - 17.7%같음맞음
영암 2호-56 - -64%12.4 - 18.1% (1월은 빈칸)4.4 - 6.5%안 맞음
고창 3호-12 - -22%12.1 - 18.4%9.1 - 13.6%안 맞음
당진 4호석 달 모두 약 -20%11.6 - 16.9%9.6 - 13.5%안 맞음
새만금 5호비교할 작년 자료 없음11.3 - 16.6%설비용량 모름거꾸로 계산하면 약 2,500kW
이용률로 거꾸로 계산하면 영암 2호 설비용량은 2,970kW가 아니라 약 1,060kW입니다. 숫자가 다 그럴듯하게 생겨서 표를 눈으로 봐서는 못 찾습니다.
09 · 이제 제 차례

제 할 일이 생겼습니다:
현장에 물어볼 것 세 가지

01
영암 · 고창 · 당진
1-3월 설비용량이 2025년과 같은지, 발전량 숫자가 맞는지
02
새만금 5호
설비용량
03
제주 5호
2026년 1-3월 자료가 따로 있는지
답이 오기 전까지는 받은 숫자를 그대로 둡니다. 마음대로 고쳐서 그럴듯하게 만들면 나중에 아무도 문제를 못 찾습니다. tasks.json에도 10번 "현장 확인"이 제 담당으로 들어갔습니다.
09 · spec.md에 바뀐 것

자료가 늘면
대조할 기준도 같이 늘어납니다

잘 만들었는지 볼 기준 · 늘어난 줄
2026년 월별 합계: 1월 849,040 · 2월 772,170
· 3월 1,229,185 / 1-3월 총합: 2,850,395 kWh
넘으면 안 되는 것 · 넓어진 줄
- `발전량.csv`와 `2026-1분기.csv`는 수정하지
  않는다. 2026년 파일의 이름 띄어쓰기(`해남1호`)와
  숫자 쉼표(`"88,120"`)는 화면에서 읽을 때만
  맞춘다.
답에 "확인이 필요합니다" 같은 문단이 있는가. 있으면 그 문단부터 읽었는가.
09 · Tip · 자료를 받으면

자료를 받으면 끝에
"앞뒤가 맞는지 확인해 봐"

"붙여줘"만
  • 붙이는 일만 합니다
  • 붙인 숫자가 원래 숫자와 말이 되는지는 안 볼 때가 있습니다
처음부터 한 번에
이어서 붙이고, 기존 자료랑 앞뒤가 맞는지도 확인해 봐
자료를 받을 때마다 이 한 줄을 붙이는 것이 오늘 익힐 습관입니다.
10 · 화면이 안 뜰 때

표와 막대가 통째로 없으면
F12부터 누릅니다

자료를 한 줄 고쳤다가, 또는 시키고 새로고침했다가표와 막대가 비어 있는 화면
F12는 브라우저의 개발자 도구를 여는 키입니다. 화면이 왜 멈췄는지가 거기 Console 칸에 빨간 글씨로 적힙니다.
10 · F12 → Console

빨간 줄을 읽지 말고
통째로 복사해서 붙입니다

F12 → 맨 위 칸에서 Console → 빨간 줄F12 Console에 뜬 빨간 줄
치는 말 · 빨간 줄을 긁어서 아래에 붙여넣기
화면이 비어서 F12 봤더니 이거 떴어.
---
<붙여넣기>
영어는 읽지 않아도 됩니다. 제 경우에는 105줄에서 쉼표 하나가 빠져 있다는 답이 왔습니다.
11 · 오류는 없는데

더 무서운 것은
화면은 멀쩡한데 숫자가 틀린 경우

3월 합계 칸
0125,174322432172690625458156945
더한 것이 아니라 다섯 발전소의 3월 숫자를 순서대로 이어 붙였습니다.
그런데 겉으로는
  • 표도 뜨고 막대도 뜹니다
  • F12 Console에 빨간 줄이 없습니다
  • 3월 막대만 사라졌습니다
  • 나머지 열한 달은 숫자도 막대도 멀쩡합니다
엑셀에서 천 단위 쉼표 서식 그대로 CSV로 저장하면 숫자가 "125,174" 같은 글자로 들어옵니다. 글자는 더하지 않고 이어 붙입니다.
11 · 대조를 시킨다

숫자는 눈으로 보지 말고
대조를 시킵니다

화면 숫자가 csv 합계랑 맞는지 대조해줘.
기준3절 spec.md에 적어 둔 합계 열세 개. 처음에 쓸데없어 보이던 그 표를 여기서 씁니다
기준이 없으면무엇과 비교할지부터 정해야 하고, 대조하는 쪽이 자기가 만든 숫자를 자기가 옳다고 합니다
대조 결과에 "맞다"만 있지 않고, 어느 숫자를 무엇과 비교했는지가 같이 적혀 있는가.
Part 03

점진적 개선
워크플로우

다 만든 다음부터가 더 깁니다.
한 번에 한 가지씩,
고치기 전에 저장하고,
고친 뒤에 확인합니다.
12 · Note · 개념

저장소 · 커밋 · 푸시

저장 상자와 구름
Repository
저장소
프로젝트 폴더 하나를 통째로 관리하는 단위. 폴더 안의 .git 폴더가 바뀐 기록을 들고 있습니다. 오늘은 Claude가 첫 커밋 때 같이 만들어 뒀습니다
Commit
커밋
지금 상태에 이름을 붙여 저장. 게임 세이브 포인트와 같습니다. 내 노트북 안에만 저장됩니다
Push
푸시
노트북에 쌓인 커밋을 인터넷 보관함(GitHub)으로 보내기. 오늘은 오후 24절에서 처음 합니다
순서는 항상 같습니다. 고친다 → 커밋한다 → (인터넷에 올릴 때) 푸시한다. 오전에는 커밋까지만 합니다.
12 · 고치는 순서

무엇을 고치든
이 네 단계를 반복합니다

01
저장
잘못되면 여기로 돌아옵니다
커밋 한 번
02
한 가지
두 개를 한 번에 시키면 어느 쪽이 화면을 망가뜨렸는지 모릅니다
고칠 것 하나만
03
확인
"고쳤습니다"라는 말과 화면이 다를 때가 있습니다
새로고침 · 대조
04
저장
다음에 고치다 잘못되면 여기로 돌아옵니다
커밋 한 번 더
12 · 7번 · 내 차례

6절 답에 남아 있던 질문 하나,
한 가지만 말합니다

화면 봤어. 휴대폰으로 열어 보니까 진짜 그렇네. 막대가 표 아래에 있어서 제일 많은 달 보려면 끝까지 내려가야 돼. 휴대폰에서만 막대를 표 위로 올려줘.
6절 답의 3번"5초 안에 찾기"로 보면 막대를 위로 올리는 게 나을 수 있다
직접 확인휴대폰으로 열어 보니 정말 그렇습니다
휴대폰에서만어디를 고치는지까지 말합니다
12 · 답과 휴대폰 화면

"휴대폰에서만"이라고 붙여서
컴퓨터 화면은 그대로입니다

답 · 바꾼 것과 확인한 것
- 화면 폭 760px 이하(휴대폰)에서만 막대를 표 위로
  올렸습니다. 표시 순서만 바꿨고 숫자와 계산은
  그대로입니다 (index.html 5줄 추가).
- spec.md에 "휴대폰에서는 막대가 위"라는 내용과
  이유를 한 줄 적었습니다. tasks.json에는 11번 작업과
  기록을 추가했습니다.

- 폭 320·390·430·600·760px: 제목, 막대, 표 순서로
  나옵니다.
- 폭 761·1000·1440px: 전과 같이 제목, 표, 막대
  순서입니다.
- 모든 폭에서 페이지가 옆으로 밀리지 않습니다.
390px · 휴대폰휴대폰 화면
12 · 답에서 볼 것

고친 것 말고도
두 가지를 더 해 왔습니다

여덟 가지 폭에서 열어 봄
한 곳을 고치면 다른 곳이 틀어지는 일이 잦습니다
  • 답에 이 확인이 없으면 "다른 폭에서 안 깨지는지 확인해 봐"를 한 번 더 시킵니다
순서 하나 바꾼 것도 spec.md에
휴대폰에서 막대가 위인 이유까지
  • 나중에 누가 "왜 휴대폰만 순서가 다르지?" 하고 되돌려 놓는 일이 안 생깁니다
창을 좁혔을 때 막대가 표 위로 올라오는가. 다시 넓히면 표가 위로 돌아오는가. 맞으면 커밋합니다.
12 · Tip · 고쳤다는데 화면이 그대로면

파일을 고쳐도 화면은 그대로,
새로고침해야 다시 읽습니다

브라우저는
이미 읽어 둔 것을 보여 주고 있습니다
  • "고쳤다는데 화면이 그대로예요"의 절반은 이것입니다
누를 것
F5
  • 눌렀는데도 안 바뀌면 Ctrl+F5
12 · 심화 · 오늘은 안 씁니다. 궁금한 분만

브랜치와 병합

브랜치 · branch
따로 고치는 길을 하나 더
  • main은 그대로 두고 upload-button 같은 이름으로 만들어 거기서 고칩니다
  • 해 보고 아니면 그 길을 버립니다
병합 · merge
잘 됐으면 main으로 합치기
  • 같은 줄을 두 사람이 다르게 고쳤으면 어느 쪽으로 할지 물어봅니다
  • 그걸 충돌(conflict)이라고 합니다
시킬 때
upload-button이라는 브랜치 만들어서 거기서 작업해줘.
13 · 요구가 커지면

당진 4호 8월이
표에서 눈에 안 띕니다

지금 표 · 당진 4호 2025년 8월 276,469빨간 칸이 없는 표
치는 말
8월에 당진 4호만 27만으로 뚝 떨어졌는데 표에서는 눈에 안 띄어. 지난달보다 20% 넘게 떨어진 칸은 빨갛게 해줘. spec.md부터 고치고 tasks.json에 단계 추가해서 이어서 해줘.
13 · 시키는 대로 하지 않은 답

그 규칙이면 빨간 칸이 13개라
만들기 전에 먼저 물어봤습니다

비교하려고 제가 준 규칙대로도 만들어 본 화면 · 13칸빨간 칸이 13개인 표
답에서 (줄임)
말씀하신 규칙대로 하면 빨간 칸이 13개가 되어, 당진 8월이 다른 칸들 사이에 묻힙니다.
1. 말씀하신 규칙 그대로 (13칸 빨강)
2. 제안드린 규칙 (2칸 빨강, 추천)
spec.md에 "합계 말고 다른 계산은 넣지 않는다"가 적혀 있어서, 바로 만들지 않고 물어본 것입니다.
13 · 2번으로

2번으로 고르면
빨간 칸이 두 개입니다

당진 4호 2025년 8월 · 영암 2호 2026년 1월빨간 칸 두 개
치는 말
2번으로 해줘.
영암 2호 1월은 9절에서 현장에 물어보기로 한 그 숫자입니다. 확인했으면 커밋합니다.
13 · Important

고쳐 달라고 할 때
"spec.md부터 고치고"를 붙입니다

"빨갛게 해줘"만 치면
  • 화면만 고쳐집니다
  • 왜 그 기준인지는 대화창에만 남습니다
  • 다음 달에 새 대화를 열면 또 다르게 만듭니다
spec.md · 목표 3번에 남은 것 (줄임)
3. 혼자 크게 줄어든 칸은 빨갛게
   - 지난달보다 발전량이 줄었다.
   - 줄어든 비율이 같은 달 다른 발전소들의
     평균 변화율보다 20%p 넘게 나쁘다.
   - 장마·겨울처럼 모든 발전소가 같이 줄어든
     달은 빨갛게 하지 않는다. 이 문제 때문에
     "지난달보다 20% 넘게 줄면 빨강" 규칙은
     쓰지 않았다.
빨간 칸이 두 개인가. spec.md에 처음 규칙을 왜 안 썼는지까지 적혀 있는가.
14 · 색을 바꿔 봤더니

막대 색과 헷갈리는지 보려고
파란색으로 바꿔 봤습니다

치는 말
빨간 칸을 파란색으로 바꿔 봐.
바꿔 놓고 보니
갈색 막대 옆에서 파란색이 오히려 더 안 보입니다
  • 13절 답 맨 아래 "빨강이 막대 색과 헷갈리지 않는지"를 확인해 본 것
14 · 저장해 둔 곳으로

손으로 되돌리지 않고
마지막 커밋으로 갑니다

치는 말
막대 옆에 두니까 파란색이 오히려 더 안 보여. 방금 고친 게 마음에 안 들어. 마지막 커밋 상태로 되돌려줘.
답
마지막 커밋(aaf6346 12-13번: 혼자 크게 줄어든 칸
빨갛게) 상태로 되돌렸습니다. 두 칸이 다시 빨간색입니다.

- 되돌린 것: 파란색으로 바꾸면서 고친 파일 세 개
  (index.html, spec.md, tasks.json)의 변경을 모두
  지웠습니다. 파일 안에 "파란"이나 "파랗게"는 한 곳도
  남아 있지 않고, 빨간색이 그대로 들어 있는 것을
  확인했습니다. tasks.json에 추가했던 15번 작업과
  기록도 같이 없어졌습니다.
14 · 무엇이 되돌아갔나

화면만이 아니라
spec.md와 tasks.json까지 같이

손으로 되돌렸으면
  • 화면 색만 고칩니다
  • spec.md에는 "파랗게"가 적힌 채로 남습니다
  • 순서표에 15번이 남습니다
커밋으로 되돌리면
  • 고친 파일 세 개가 한꺼번에
  • 15번 작업과 기록까지 없어집니다
  • Claude가 안에서 친 명령은 git restore . 한 줄. 외울 필요는 없습니다
새로고침했을 때 빨간 칸 두 개짜리 화면으로 돌아왔는가. spec.md에 "파랗게"가 남아 있지 않은가.
Morning wrap · 오전 마무리

커밋하고 점심,
폴더에 이만큼 남습니다

치는 말
오전에 한 것 전부 커밋해줘. "오전: 계획, 기준, 시안, 표와 막대, 1분기 추가, 빨간 칸"으로.
파일무엇
Docs/ CSV 두 개받은 원본. 오후에 DB로 올립니다
PLAN.md처음 세운 계획
spec.md무엇을 만드는지, 넘으면 안 되는 것, 볼 기준
시안A.html캔버스에서 내려받은 시안. 모양 기준
tasks.json단계와 기록
index.html화면 한 장. 오후에 인터넷 주소가 됩니다
Morning FAQ · 오전에 자주 나오는 질문

매번 다 해야 하나요?
기준은 "다음 달에 또 할 일인가"

계획 모드를 매번 써야 하나요
아닙니다. 처음 만들 때, 여러 파일을 한꺼번에 고칠 때, 어떻게 할지 짐작이 안 될 때
spec.md · tasks.json을 매번 만드나요
몇 시간짜리 일에는 만들고 5분짜리 일에는 안 만듭니다
답이 너무 길어요
맨 위 두세 줄과 "확인한 것"만 읽습니다
자꾸 되물어요
근거를 읽고, 맞으면 바꾸고 아니면 "그래도 그대로 해줘"
완전히 꼬였어요
마지막 커밋으로 되돌리고 그 단계부터 다시. 처음부터 할 필요 없음
Part 04 · 13:00

Claude Code
고급 기능

오전에는 Claude Code 하나만 썼습니다.
오후에는 여기에 도구를 붙이고,
일하는 방식을 파일로 남겨서
다음 달에도 같게 나오게 합니다.
Afternoon map · 오후에 지나갈 길

1-5번은 다 같이 따라 하고,
6번부터 각자 자기 업무로

오후 여섯 단계
01
도구 붙이기
Supabase와 Vercel을 알려 주고 제 계정에 직접 붙입니다
플러그인 · 커넥터
02
내 방식 고정
오전에 만든 방식을 남기고, 다른 대화에 검토시킵니다
스킬 · 서브에이전트
03
데이터베이스
파일 안에 들어 있던 숫자를 밖으로 뺍니다
Supabase
04
새 자료 올리는 버튼
다음 달 자료는 파일을 고치지 않고 화면에서 올립니다
CSV 올리기
05
주소 만들기
팀장님께 주소 하나만 보내면 됩니다
GitHub · Vercel
06
내 업무에서 고르기
대시보드를 내려놓고 본인 업무를 꺼냅니다
6-7부
15 · Note · 개념

플러그인이란

설명서와 플러그가 든 상자
어떤 서비스를 다룰 때 지켜야 할 규칙이 적힌 설명서와, 그 서비스에 직접 붙는 통로를 묶어 한 번에 설치하는 것입니다. 스마트폰에 앱을 까는 것과 비슷합니다.
설명서"DB에 표를 만들 때 보안 설정을 빼먹지 말 것" 같은 규칙
통로그 서비스에 직접 붙는 연결 (16절 커넥터)
그래서쓸 때마다 "이렇게 저렇게 해줘"를 다시 설명하지 않아도 됩니다
15 · 플러그인 설치

Code 탭에 붙여 넣고
명령 세 줄을 실행해 달라고 합니다

아래 세 줄 차례로 실행해줘.
claude plugin marketplace add anthropics/claude-plugins-official
claude plugin install supabase@claude-plugins-official
claude plugin install vercel@claude-plugins-official
첫 줄"어디서 받아 올지" 등록. 처음 한 번만 합니다
나머지 두 줄supabase와 vercel 설치
허용실행해도 되는지 묻는 창이 뜨면 허용을 누릅니다
오늘 오후에 Supabase와 Vercel을 씁니다. Claude Code에 이 둘을 먼저 알려 둡니다.
15 · 설치 결과

Successfully 세 번,
목록에 enabled 두 개

세 줄 실행 결과
✔ Successfully added marketplace:
  claude-plugins-official
✔ Successfully installed plugin:
  supabase@claude-plugins-official (scope: user)
✔ Successfully installed plugin:
  vercel@claude-plugins-official (scope: user)
"설치된 플러그인 목록 보여줘."
Installed plugins:

  ❯ supabase@claude-plugins-official
    Version: 0.1.15
    Status: ✔ enabled

  ❯ vercel@claude-plugins-official
    Version: 0.49.2
    Status: ✔ enabled
두 개가 enabled인가. 플러그인은 대화를 시작할 때 읽으니, 새 대화를 열고 폴더는 solar-dashboard를 골랐는가.
15 · 설명서가 하는 일

깔아 둔 설명서 때문에
시키지 않은 설정이 붙어 나옵니다

supabase 플러그인 안
설명서 두 개 + 연결 통로 하나
  • "DB에 표를 만들 때 보안 설정을 빼먹지 말 것"
  • "열 이름은 영문 소문자로", "날짜는 date 자료형으로"
21절에서 보게 될 것
안 시켰는데 붙어 나오는 것
  • 한글 열 이름이 영문으로
  • 2025-01이 2025-01-01 날짜로
  • 읽기만 허용하는 보안 설정(RLS)
터미널을 쓰시는 분은 세 줄을 터미널에 직접 쳐도 결과가 똑같습니다. 오늘은 같은 화면을 보려고 Code 탭에서 시킵니다.
16 · Note · 개념

커넥터(MCP)란

노트북과 구름을 잇는 케이블
Claude Code가 바깥 서비스에 직접 말을 거는 통로입니다. 지메일, 노션, 슬랙도 같은 방식으로 붙습니다. MCP는 이 통로들의 공통 규격 이름입니다.
없으면Claude가 만든 것을 제가 복사해서 그 서비스 웹 화면에 붙여 넣습니다
있으면Claude가 그 서비스에 바로 넣습니다
지금플러그인을 깔았어도 아직 내 계정과는 연결이 안 됐습니다
16 · 로그인 1 · supabase.com

오후에 쓸 두 곳에 먼저 로그인,
Continue with GitHub

Supabase 로그인
맨 위 버튼Continue with GitHub
만들지 말 것이메일과 비밀번호를 따로 만들지 마세요
처음이면조직 이름은 그대로, Free를 골라 넘어갑니다
여기까지만프로젝트 만들기는 20절에서 합니다
16 · 로그인 2 · vercel.com/new

새 탭에서 Vercel도
같은 GitHub 계정으로

Vercel 새 프로젝트
왼쪽Import Git Repository → Continue with GitHub
처음이면이름과 용도를 묻는 화면에서 개인용(Hobby)으로 고르고 넘어갑니다
여기까지만저장소 목록이 나오면 멈춥니다. 올릴 저장소는 24절에서 만듭니다
브라우저 탭 두 개에 Supabase 첫 화면과 Vercel 저장소 목록이 떠 있는가.
16 · 내 계정에 붙이기

/mcp에서 supabase와 vercel을
하나씩 Authenticate

Code 탭 입력창에
/mcp
목록
연결할 수 있는 목록이 뜹니다
supabase
고르고 Authenticate, 브라우저에서 허용
vercel
똑같이 Authenticate, 허용
두 줄이 뜨면 된 것
Authentication successful.
Connected to plugin:supabase:supabase.

Authentication successful.
Connected to plugin:vercel:vercel.
뒤에서 표를 만들고 자료를 올릴 때, 웹 화면에 들어가서 손으로 넣는 일이 없어집니다.
/mcp 목록에서 supabase와 vercel이 둘 다 connected로 보이는가.
16 · Warning · 커넥터를 붙이면

그 계정에 실제로
자료를 넣고 고칠 수 있습니다

회사 계정에 붙이기 전에
  • 무엇을 할 수 있는 권한인지 먼저 봅니다
오늘은
  • 오늘 새로 만든 개인 계정에만 붙입니다
vercel 커넥터로는 배포 목록과 배포 기록을 보는 것까지 됩니다. 주소를 처음 만드는 일은 25절에서 Vercel 웹 화면에서 합니다.
17 · Note · 개념

스킬이란

설명서, 틀 파일, 검사 목록이 든 폴더
내가 일하는 방식을 적어 둔 폴더입니다. 다음에 비슷한 말을 하면 Claude가 이 폴더를 읽고 그 방식대로 합니다. 신입에게 건네는 업무 인수인계서에 가깝습니다.
글언제 쓰는지, 어떤 순서로 하는지, 쓰면 안 되는 것은 무엇인지
파일필요하면 틀 파일과 검사 스크립트가 같이 들어갑니다
부르기스킬 이름을 몰라도, 평소 하던 말로 부릅니다
17 · 무엇을 남기나

남길 것은 결과물이 아니라
만든 방식입니다

결과물을 남기면
  • 그 파일 하나만 다시 씁니다
  • 다음 달 자료가 오면 또 처음부터
방식을 남기면
  • 자료가 바뀌어도, 발전소가 늘어도, 열 이름이 달라져도 같은 모양
  • 넣을 것: 화면 모양 틀 · 숫자 대조 검사 · 넘으면 안 되는 것
17 · /skill-creator

오전에 쓰던 폴더에서
방식을 스킬로 만들어 달라고 합니다

/skill-creator 오전에 대시보드 만든 방식을 스킬로 만들어줘. 다음 달 발전량 CSV 오면 똑같은 모양으로 나오고 숫자 대조도 자동으로 붙게.
오전에 쓰던 폴더spec.md · tasks.json · index.html을 읽고 만듭니다
똑같은 모양 · 숫자 대조다음 달에 원하는 결과를 말합니다
안 뜨면"claude plugin install skill-creator@claude-plugins-official 실행해줘" 하고 새 대화
17 · 만들기 전에 묻는 네 가지 중 하나

9절에서 겪은 일이
그대로 규칙이 됩니다

답 · 4번 질문
4. CSV 모양이 달라지면 어떻게 할까요?
- 추천: 지난번 2026년 파일처럼 열 이름이 다르거나(사업소),
  숫자에 쉼표가 있거나("88,120"), 이름 띄어쓰기가 다른 것
  (해남1호)은 알아서 맞춥니다.
- 아래 경우에는 멈추고 물어봅니다: 처음 보는 발전소가
  나올 때(새만금 5호처럼), 있던 발전소가 빠질 때, 같은 달
  숫자가 두 번 들어올 때, 이미 있는 달의 숫자가 바뀌어
  올 때.
추천이 마음에 들면 짧게
추천대로 해줘. 이름은 solar-dashboard로.
이름은 영문 소문자와 하이픈만 됩니다. 그다음은 혼자 갑니다. 15분쯤 걸리니 시작해 두고 다음 절로 넘어갔다가 돌아옵니다.
17 · 생기는 것

오전에 매번 치던 "숫자 맞는지 확인해 봐"가
verify.py로 들어갑니다

~/.claude/skills/solar-dashboard/
SKILL.md              언제 쓰고 어떤 순서로 하는지
assets/template.html  오전 화면 모양을 그대로 뜬 틀
scripts/build.py      CSV를 틀에 넣어 index.html 하나로
scripts/verify.py     화면 숫자를 CSV와 한 칸씩 대조해
                      대조표.md로 남김
scripts/common.py     두 스크립트가 같이 쓰는 CSV 읽기
template.html화면 모양 틀
verify.py만들 때마다 대조가 저절로 붙고, 결과가 대조표.md로 남습니다
홈 폴더어느 폴더를 골라 새 대화를 열어도 씁니다. 윈도우는 C:\Users\<이름>\.claude\skills\
17 · SKILL.md 맨 위

제가 평소 쓸 말과
언제 쓰지 않는지까지 적혀 있습니다

description · 다음 달에 스킬을 고르는 기준
description: 태양광 발전량 CSV로 발전 실적 대시보드(index.html 한 파일, 발전소별 월별
  표 + 월별 합계 막대 + 혼자 크게 줄어든 칸 빨강)를 만들거나 새 달 자료를 이어 붙이고,
  화면 숫자를 CSV와 자동 대조해 대조표.md까지 남기는 스킬. "발전량 CSV 왔어", "이번 달
  자료 붙여줘", "대시보드 업데이트", "4월치 들어왔어", "발전 실적 화면 다시 만들어줘",
  "숫자 대조해줘"처럼 발전량·발전소·kWh·이용률 CSV와 대시보드가 같이 나오면 파일
  이름을 말하지 않아도 이 스킬을 쓴다. 발전량이 아닌 일반 매출·KPI 보고서는 이 스킬이
  아니다.
description에 내가 실제로 할 말이 들어 있는가. 대조 스크립트(verify.py)가 생겼는가.
18 · Note · 개념

시험(evals)이란

답안지를 단 저울
스킬이 제대로 되는지 보려고 미리 만들어 두는 문제집입니다. "이런 말이 들어오면 이런 결과가 나와야 한다"를 몇 개 적어 둡니다.
비교스킬을 쓴 쪽과 안 쓴 쪽에 같은 문제를 풀게 합니다
채점사람이 아니라 Claude가 채점합니다
고치기떨어진 문제가 있으면 스킬을 고쳐 다시 돌립니다
18 · 시키지 않아도

스킬을 다 쓰면
시험까지 혼자 돌립니다

스스로 만든 문제 1
멀쩡한 4월 자료
4월 발전량 CSV 왔어. 2026-04.csv 이거 대시보드에 붙이고 숫자 대조도 해줘.
스스로 만든 문제 2 · 일부러 문제를 심음
4월 수정본
  • 처음 보는 발전소 무안 6호
  • 새만금 5호가 빠짐
  • 해남 1호 3월 131,005 → 131,500
스킬을 쓴 Claude와 안 쓴 Claude에게 각각 풀게 하고, 문제마다 세 번씩 돌립니다. 제가 하는 일은 돌아와서 결과를 읽는 것뿐입니다.
18 · 시험 결과

숫자는 둘 다 맞았고, 다른 것은
시간 · 휴대폰 폭 · 다음 달

스킬 있이스킬 없이
채점 항목 통과 (26개)전부전부
걸린 시간 (평균)58초147초 (4월 붙이기만 3분 31초)
휴대폰 폭(320·390px) 확인함못 함 ("500px보다 좁은 폭을 열지 못했다")
대조 스크립트스킬에 들어 있는 것을 씀매번 새로 짬
달이 늘 때 표가 카드로 바뀌는 폭폭을 재서 알아서 정함1320px을 1380px로 직접 고침. 다음 달에 또
문제가 있는 CSV에서는 둘 다 붙이지 않고 멈췄고, 세 가지를 모두 물었습니다. 매달 하는 일이면 마지막 줄이 제일 큽니다.
18 · 결과 뒷부분

스킬 없는 쪽이 더 잘한 것을
숨기지 않고 적어 왔습니다

답 · 스킬에 넣으려는 것
1. 고창 3호 4월이 빨개진 이유를 한 번 더 따졌습니다.
   영암 2호는 3월 142,880에서 4월 401,220으로 2.8배가
   됐고, 1분기 숫자가 아직 현장 확인 전입니다. 그래서
   영암을 빼고 다시 계산해도 빨간지 봤습니다.
2. 설비용량을 모르는 새만금 5호는 이용률로 거꾸로
   계산해 추정했습니다(약 2,500-2,670kW).
(...)
4. spec.md의 "가장 적은 달은 12월" 기준이 이미 맞지
   않습니다. 2026년 2월(772,170)이 더 적습니다.
시험이 하는 일스킬이 잘됐다고 확인하는 데서 끝나지 않고, 고칠 거리를 찾아 줍니다
4번오전에 적은 기준이 1분기를 붙인 뒤로 틀린 말이 됐는데, 저는 몰랐습니다
시험이 끝나면 결과 화면(http://127.0.0.1:3117)이 열립니다. 문제마다 의견을 적고 Submit All Reviews를 누르면 그 의견까지 넣어 스킬을 한 번 더 고칩니다.
19 · Note · 개념

서브에이전트란

문서를 보는 돋보기
지금 대화 안에서 새 일꾼을 하나 띄우는 것입니다. 지금까지의 대화 내용을 물려받지 않고, 시킨 일만 보고 처음부터 다시 봅니다.
비유같은 팀 사람이 아니라 옆 팀 사람에게 검토를 부탁하는 것
왜만든 사람은 자기 실수를 못 보는데, 안 본 사람은 봅니다
쓰는 곳검토 · 조사 · 비교처럼 선입견 없이 봐야 하는 일
19 · 다른 대화에 검토

만든 당사자 말고
새 일꾼에게 파일만 주고 묻습니다

서브에이전트 하나 띄워서 index.html이 발전량 자료 숫자랑 맞는지 검토하게 해줘. 틀린 데 있으면 알려주고, 고치지는 마.
지금 대화이 파일들을 만든 당사자. 자기가 만든 것은 자기 눈에 맞아 보입니다
고치지는 마검토와 수정을 섞지 않습니다
19 · 검토 답 · 앞부분

틀린 곳은 없고,
무엇을 몇 개 봤는지가 같이 옵니다

답
index.html의 숫자는 원본 발전량 자료와 전부 맞았습니다. 틀린 곳은 없고, 파일은 고치지 않았습니다.

- index.html 안에 넣어 둔 CSV 두 개는 원본과 한 글자도 다르지 않습니다.
- 발전소별 월 값 75칸이 모두 같습니다. 자료가 없는 15칸도 "-"로 제대로 나옵니다.
- "해남1호"와 "해남 1호"처럼 띄어쓰기만 다른 이름은 한 줄로 합쳐졌습니다.
- 합계 29개가 모두 맞습니다. 2025년 총합 14,386,234kWh, 2026년 1-3월 총합 2,850,395kWh.
- 휴대폰 화면과 넓은 화면의 막대 숫자·길이가 모두 월별 합계와 같습니다.
- 빨간 칸은 기준대로 두 칸만 칠해졌습니다.
검토 결과에 "맞다"만 있지 않고, 무엇을 몇 개 확인했는지가 같이 적혀 있는가.
19 · 검토 답 · 뒷부분

9절 대화를 모르는데
같은 세 곳을 따로 찾아왔습니다

9절 · 만든 대화
이용률에서 거꾸로 계산한 설비용량은
영암 약 1,060kW(원래 2,970),
고창 약 1,120kW(원래 1,500),
당진 약 4,050kW(원래 4,950)입니다.
19절 · 서브에이전트
확인이 필요한 부분
(index.html이 아니라 원본 2026년 파일 문제)
- 영암 2호: 약 1,060kW. 2025년 자료는 2,970kW
- 고창 3호: 약 1,120kW. 2025년 자료는 1,500kW
- 당진 4호: 약 4,000kW. 2025년 자료는 4,950kW
따로 계산해서 같은 결론이 나왔으니 현장에 전화해서 물어볼 만합니다. 그리고 화면을 고칠 일이 아니라 자료를 보낸 쪽에 물을 일이라고 적었습니다.
19 · 비교용으로 하나 더

계획 없이 한 줄로 만든 화면에 똑같이 검토를 시켰더니
틀린 곳 5건

비교용: 오전 순서 없이 이 한 줄로만 만든 화면 (437줄)
발전량.csv로 대시보드 만들어줘. 발전소별 월별 발전량이 한눈에 보이게.
검토 결과: 틀린 곳 5건 중 3건
1. 설명이 숫자와 안 맞음 · 410, 414-415행
   8월 당진 4호 경고 문구에 "다른 발전소 평균 12.7%보다
   5.2%포인트 낮다"고 적혀 있는데, 당진을 뺀 4곳 평균은
   14.0%, 차이는 6.5%포인트입니다. 평균 낼 때 분모에
   당진 자신을 넣었습니다.
3. 설비용량 요약 숫자 반올림 · 272행
   12 MW로 표시되지만 실제는 11.618MW입니다.
5. 이용률 정의가 섞임 · 314-315행
   월별 12칸은 단순 평균(14.2), "연평균" 칸은
   발전량÷설비용량 기준(14.1)입니다.
합계는 그쪽에서도 맞았습니다. 틀린 것은 화면의 문장과 숫자가 서로 안 맞는 곳이고, 만든 대화는 하나도 못 봤습니다.
19 · 두 결과의 차이

0건과 5건의 차이는
오전에 한 두 가지입니다

계획 없이 한 줄로 만든 화면
검토에서 5건
  • 대조할 기준이 없었습니다
  • 1번은 팀장님이 물어봤으면 곤란했을 것입니다
오전 순서대로 만든 것
검토에서 0건
  • spec.md "볼 기준"에 CSV에서 직접 더한 합계
  • tasks.json에 "숫자 대조" 단계
  • 만드는 쪽이 그 단계에서 스스로 대조했습니다
고칠 때는 검토 결과를 복사해서 원래 만든 대화에 붙이고 "1번이랑 3번 고쳐줘"라고 합니다. 검토는 새 일꾼에게, 고치기는 만든 대화에서 합니다.
Part 05 · 14:30

데이터베이스와
배포

지금까지 만든 것은 제 노트북 안에 있습니다.
여기서부터는 자료를 인터넷 DB에 두고,
화면을 주소 하나로 만들어 남에게 보냅니다.
20 · Note · 개념

데이터베이스란

표와 데이터베이스
숫자와 글자를 표 모양으로 쌓아 두고, 필요할 때 꺼내 보는 창고입니다. 엑셀 시트와 비슷하게 생겼는데 다른 점이 셋 있습니다. Supabase는 그걸 웹에서 만들어 쓰게 해 주는 서비스입니다. 앞으로는 원래 이름인 데이터베이스, 줄여서 DB로 부르겠습니다.
다른 점 1여러 사람이 동시에 봐도 안 깨집니다
다른 점 2줄이 백만 개가 되어도 원하는 줄만 빠르게 꺼냅니다
다른 점 3누가 무엇을 읽고 쓸 수 있는지 권한을 정합니다
20 · 왜 DB에

숫자를 보여 주려고
파일을 보내지 않게 합니다

지금 · 노트북 안 CSV
  • 남에게 보여 주려면 파일을 보내야 합니다
  • 숫자를 고치면 또 보내야 합니다
인터넷에 있는 DB
  • 파일을 안 보내도 됩니다
  • 숫자는 DB에서 고치고, 보는 사람은 같은 주소를 씁니다 (26절)
20 · 16절에서 열어 둔 Supabase 탭 · New project

새 프로젝트는
세 칸만 채웁니다

칸넣을 것
Project namesolar-dashboard 처럼 영문 소문자와 하이픈으로
Database passwordGenerate a password를 눌러 자동으로 받습니다
RegionNortheast Asia (Seoul). 기본값으로 두면 인도 서버에 만들어져서 조금 느립니다
Create new project 뒤 2분쯤. 프로젝트 화면이 뜨고 위쪽 STATUS가 초록으로 바뀌었는가.
20 · Warning · Tip

비밀번호는 다시 안 보여 주니
어딘가에 붙여 두세요

Warning · 비밀번호
  • Generate a password로 받은 값은 다시 안 보여 줍니다
  • 오늘은 안 쓰지만 나중에 DB에 직접 붙을 때 필요합니다
Tip · 무료 계정
  • 프로젝트는 두 개까지 동시에 켜 둘 수 있습니다
  • 한동안 안 쓰면 저절로 멈춥니다. 3일차에 안 열리면 Supabase 화면에서 한 번 깨웁니다
21 · 자료를 표로 올리기

웹 화면에서 넣지 않고
Code 탭에 시킵니다

Docs/발전량.csv를 supabase에 올려줘. 표 하나 만들고 60줄 다 넣어줘.
커넥터 덕16절에서 연결해 뒀기 때문에 됩니다
오전 폴더solar-dashboard를 고른 대화에서 칩니다
1분기 파일아직 안 올립니다. 확인 중이고, 23절에서 버튼으로 올립니다
21 · 1분쯤 뒤 답

60줄 전부 들어갔고
확인까지 마쳤습니다

칸자료형CSV 원래 이름
plant_nametext발전소
regiontext지역
capacity_kwinteger설비용량_kW
monthdate월 (2025-01 → 2025-01-01)
generation_kwhinteger발전량_kWh
utilization_ratenumeric(4,1)이용률_%
답에서
올린 곳: solar-dashboard 프로젝트
→ public.solar_generation

- 발전소 이름 + 월 조합은 중복
  못 넣게 걸어 뒀습니다.
- 읽기 권한은 열어 뒀습니다 (RLS
  켜고 select만 허용). 쓰기는
  막혀 있습니다.

확인 결과: 60줄 / 발전소 5곳 /
총 발전량 14,386,234 kWh
Supabase 화면 왼쪽 Table Editor에 표가 보이고 줄 수가 CSV와 같은가.
21 · 시키지 않은 것

열 이름이 영문으로, 월이 날짜로:
플러그인 설명서대로입니다

CSV
발전소,지역,설비용량_kW,월,발전량_kWh,이용률_%
해남 1호,전남,998,2025-01,85392,11.5
Supabase 표
plant_name, region, capacity_kw, month,
generation_kwh, utilization_rate
해남 1호, 전남, 998, 2025-01-01, 85392, 11.5
"DB의 열 이름은 영문 소문자로", "날짜는 date 자료형으로" 같은 규칙이 15절에서 깐 플러그인에 들어 있습니다.
21 · Important · RLS

RLS를 켜라는 말이 나오면
켜세요

안내를 그냥 닫으면
  • 주소를 아는 아무나 그 표를 고칠 수 있습니다
기본 · Row Level Security
  • 읽기만 허용합니다
  • 쓰기는 막습니다
22 · 화면이 DB에서 읽게

곧 남이 볼 화면이니
확인 안 된 1분기는 빼고 바꿉니다

1분기는 현장 답 올 때까지 화면에서 빼줘. 그리고 대시보드가 파일 안 데이터 대신 supabase에서 읽게 고쳐줘. 읽기만 되고 아무나 못 고치게 해줘.
1분기를 빼는 이유확인 안 된 숫자를 올려 두면 누가 그 숫자를 보고 보고서를 씁니다
다시 넣는 때현장 답이 오면 23절 버튼으로
22 · 2분 뒤 답

못 고치는지
실제로 해 보고 확인했습니다

답 · Supabase 쪽과 페이지 쪽
Supabase 쪽
- solar_generation 테이블 60줄이 발전량.csv와 글자 하나까지 같았습니다.
- 페이지에 넣은 공개용 키로 추가·수정·삭제를 실제로 시도해 봤습니다. 세 가지 모두
  "권한 없음"으로 거절됐고, 시도한 뒤에도 데이터는 60줄, 총합 14,386,234로 그대로입니다.

페이지 쪽 (index.html)
- 파일 안에 있던 데이터 60줄을 지웠습니다. 이제 페이지를 열 때마다 Supabase에서 읽어 옵니다.
- 인터넷이 끊기거나 Supabase를 못 읽으면 빈 화면 대신 "데이터를 불러오지 못했습니다.
  인터넷 연결을 확인한 뒤 새로고침해 주세요." 문구가 뜹니다.
답에 이 확인이 없으면 "아무나 못 고치는지 실제로 해 보고 확인해 봐"라고 한 번 더 시킵니다.
22 · 알아 두실 것

파일은 짧아지고,
대신 인터넷이 있어야 열립니다

오전 · 7절에서 본 index.html
  • 자료 부분이 파일 안에 따로 있었습니다
  • 파일만 있으면 어디서든 열렸습니다
지금
  • 자료 부분이 통째로 없어지고 DB에서 읽어 오는 몇 줄이 들어갔습니다
  • 인터넷이 없으면 안 열립니다
  • 묻기 전에 먼저 알려 주고, spec.md에도 적었습니다
브라우저에서 index.html을 열었을 때 숫자가 그대로 나오는가.
22 · Warning · 화면 코드에 키가 들어갑니다

공개용 키는 괜찮지만,
읽기는 표 전체가 열립니다

sb_publishable_ · 오늘 쓴 것
  • HTML에 그대로 박혀도 되는 공개용 키
  • 읽기만 허용해 뒀으니 이 키로는 못 고칩니다
  • 화면에 안 보이는 열까지 읽힙니다. 보이면 안 되는 열은 표에 넣지 않습니다
sb_secret_ · 비밀 키
  • 절대 화면 코드에 넣지 않습니다
  • 서버에서만 씁니다
23 · 왜 버튼이 필요한가

매달 제가 시키면,
제가 휴가인 달은 아무도 못 넣습니다

지금
  • 자료를 넣을 때마다 Claude Code를 켜서 시킵니다
  • 매달 하는 일이면 그것도 귀찮습니다
버튼을 달면
  • 새 CSV를 올리면 DB에 쌓이고 화면이 바로 바뀝니다
  • 여기까지 해야 대시보드가 저 없이도 돌아갑니다
23 · 버튼 달기

아무나 못 올리게
조건도 같이 줍니다

다음 달 자료 올 때마다 파일 고치기 싫어. 대시보드에 새 CSV 올리는 버튼 달아줘. 올리면 supabase에 쌓이고 화면이 바로 바뀌게. 아무나 못 올리게 로그인한 사람만.
버튼새 CSV 올리기
결과DB에 쌓이고 화면이 바로 바뀌게
조건로그인한 사람만
23 · 몇 분 뒤 답

막는 일은 화면이 아니라
Supabase가 합니다

답 · 앞부분
화면 오른쪽 위에 로그인 칸이 생기고, 로그인하면
새 자료 올리기 버튼이 나옵니다. CSV를 고르면 몇 곳·
어느 달·몇 줄인지 한 번 묻고, 확인하면 Supabase에
쌓이고 새로고침 없이 표와 막대가 다시 그려집니다.

버튼을 숨기는 것만으로는 못 막습니다. DB에
uploader_allowlist 명단 표를 만들고, 거기 적힌
계정만 추가·수정이 되게 걸었습니다.
해 본 것결과
로그인 없이 추가거절 (401)
로그인했지만 명단에 없는 계정거절 (403)
명단에 있는 계정으로 추가됨
로그인한 계정으로 지우기거절 (403)
막았다고 말만 하지 않고 네 가지를 실제로 해 봤습니다. 버튼을 감추는 것과 실제로 막히는 것은 다른 일입니다.
23 · 시킨 것보다 한 칸 더

로그인한 사람 전부가 아니라
명단에 적힌 사람만

제가 한 말
로그인한 사람만
  • 로그인은 누구나 만들 수 있으니 이것만으로는 조건이 안 된다고 봤습니다
만든 것
uploader_allowlist 명단
  • 지금은 제 계정 하나
  • 담당자가 한 번 가입하면, 그다음 한 줄로 추가
uploader_allowlist에 담당자 메일 추가해줘
자료 담당자 계정을 명단에 넣어야 제가 없을 때도 이 버튼을 쓸 수 있습니다.
23 · Warning · 남은 구멍

묻지 않은 남은 구멍까지
먼저 알려 줍니다

답 · 하나 남은 것
Supabase 가입이 열려 있습니다. 명단 때문에
남이 올리지는 못하지만 계정은 만들 수 있습니다.
대시보드 Authentication → Sign In / Providers
→ Email에서 "Allow new users to sign up"을
꺼 두시는 게 좋습니다.
오늘 안에 하나 더 잠그고 가세요
  • Supabase 화면 Authentication
  • Sign In / Providers → Email
  • Allow new users to sign up 끄기
제가 물어보지 않은 내용입니다. 이런 줄이 답에 있으면 그날 안에 처리하세요.
23 · 버튼 · 읽기 · 올리기

코드는 세 줄만
무엇을 하는지 알면 됩니다

01
버튼
"CSV 올리기" 글자 안에 파일 고르는 칸을 숨겨 뒀습니다. 누르면 파일 고르는 창이 뜨고 CSV만 보입니다
<input type="file" hidden>
02
읽기
한 파일 안에 같은 발전소 · 같은 달이 두 번 있으면 몇 번째 줄인지 알려 주고, DB에 넣기 전에 멈춥니다
seen.has(key)
03
올리기
같은 달 자료를 또 올리면 줄이 하나 더 생기지 않고 기존 줄을 덮어씁니다. 그래서 두 번 올려도 숫자가 두 배가 되지 않습니다
merge-duplicates
엑셀(.xlsx)은 다른 이름으로 저장에서 CSV로 바꿔서 올립니다.
23 · 올려 보기

이미 올라가 있는 발전량.csv를
한 번 더 올려 봅니다

01
로그인
로그아웃 상태에서는 CSV 올리기 버튼이 안 보입니다
오른쪽 위
02
CSV 올리기
파일 고르는 창에서 발전량.csv를 고릅니다
발전량.csv
03
확인 창
몇 줄인지, 이미 있는 값 중 몇 칸이 바뀌는지 묻습니다
확인
04
결과
"60줄을 올렸습니다 (60칸은 새 값으로 바뀜)". 연간 총합은 그대로
14,386,234
로그아웃 상태에서 버튼이 안 보이는가. "60칸은 새 값으로 바뀜"이 뜨는가. 총합이 14,386,234 그대로인가.
23 · Tip · 여기서 더 가고 싶으면

오늘은 사람이 버튼을 누르는 데까지,
더 가면 두 방향

방향 1
정해진 폴더에 파일이 들어오면 알아서 올라가게
방향 2
메일에 온 첨부를 바로 읽어 오게
둘 다 오늘 만든 것 위에 더하는 것이라, DB와 규칙을 먼저 만들어 두는 것이 순서입니다.
24 · Note · 개념

GitHub이란

커밋 기록까지 통째로 보관해 주는 인터넷 보관함입니다. 내 노트북의 .git 폴더와 같은 것을 인터넷에도 하나 두는 셈입니다.
남는다노트북이 고장 나도 남습니다
보인다언제 무엇을 바꿨는지 웹에서 볼 수 있습니다
오늘주소를 만들어 주는 Vercel이 여기서 파일을 가져다 씁니다. 그래서 먼저 올립니다
24 · GitHub에 올리기

노트북 안에 쌓인 커밋을
인터넷 보관함으로 보냅니다

치는 말
이 폴더 깃허브에 올려줘. 비공개로.
40초 뒤 답
비공개 저장소로 올렸습니다.

- 주소: https://github.com/<내계정>/solar-dashboard
- 공개 범위: PRIVATE
- 브랜치: main (커밋 5개 전부 올라감)
- 올라간 파일: index.html, spec.md, tasks.json, PLAN.md,
  Docs/발전량.csv

Supabase 키는 sb_publishable_... 형태라 브라우저에
노출되는 것을 전제로 만든 키입니다.
방금 한 것이 푸시입니다. 오전의 커밋은 노트북 안에만 있었고, 이제 GitHub에도 있습니다. 키 이야기는 묻지 않았는데 먼저 했습니다. sb_secret_이 들어 있으면 올리면 안 됩니다.
24 · 심화 · 오늘은 안 씁니다. 궁금한 분만

비밀 키를 쓸 때는
소스에 두지 않습니다

01
.env
키를 이름과 값으로 한 줄씩. SUPABASE_SECRET=sb_secret_...
02
.gitignore
.env 한 줄을 넣으면 커밋에도 푸시에도 안 들어갑니다
03
Vercel
Settings → Environment Variables에 같은 이름으로 값을 넣습니다
시킬 때
키는 .env로 빼고 .gitignore에 넣어줘. 배포는 Vercel 환경변수 쓰게 해줘
HTML 한 장짜리에는 바로 안 붙습니다. 브라우저가 파일을 통째로 받아 읽기 때문입니다. 서버 역할(Vercel Functions)이 필요하고, 오늘 범위를 넘습니다.
24 · Warning

처음에는
비공개로 만드세요

공개로 만들면
  • 인터넷의 누구나 파일 내용을 다 봅니다
  • 회사 자료가 한 줄이라도 있으면 문제가 됩니다
비공개로 만들면
  • 나중에 공개로 바꾸는 것은 언제든 됩니다
  • Vercel로 주소를 만드는 데 아무 지장이 없습니다
25 · Note · 개념

배포란

노트북에서 인터넷으로 올라가 휴대폰과 모니터에서 열리는 그림
내 노트북에 있는 파일을 인터넷 어딘가의 컴퓨터에 올려서, 주소만 알면 누구나 열 수 있게 하는 것입니다.
예전서버를 빌리고 설정을 하는 일
지금저장소를 고르고 버튼 하나
그다음git push만 하면 Vercel이 알아서 다시 올립니다. Deploy를 다시 누를 일이 없습니다
25 · Import · Deploy

아무것도 고치지 않고
Deploy

Vercel 새 프로젝트 화면. 설정은 그대로 두고 Deploy
누르는 것
  • 16절에서 열어 둔 Vercel 탭을 새로고침
  • 방금 올린 저장소 옆 Import
  • 목록에 없으면 Adjust GitHub App Permissions에서 허용
  • 설정 화면은 그대로 두고 Deploy
  • HTML 파일 하나뿐이라 따로 조립할 것이 없습니다
파일 이름을 index.html로 지은 덕
  • 주소는 폴더를 열면 index.html을 먼저 찾습니다
  • 이름이 달랐으면 주소 뒤에 파일 이름을 붙여야 열립니다
25 · 2초 뒤

초록 체크와 함께
주소가 나옵니다

제 것
https://solar-dashboard-<계정>.vercel.app
노트북에서 보던 대시보드가 그대로 뜹니다. 연간 총 발전량 14,386,234 kWh. 휴대폰으로도 열어 보세요.
인터넷 주소로 연 화면배포된 대시보드
받은 주소를 휴대폰에서 열었을 때 대시보드가 보이는가.
25 · Warning · 로그인 화면이 뜨면

배포는 됐는데 Vercel이
"팀원만 보게" 잠가 둔 것입니다

Vercel 로그인 잠금 풀기
Settings
Deployment Protection → Vercel Authentication
Require Log In
끄고 Save
확인창
disable vercel authentication을 그대로 치고 아래 버튼
26 · 자료를 고치면

Supabase 숫자만 고쳐도
화면이 바뀌는지 봅니다

치는 말
supabase 표에서 당진 4호 2025-08 발전량을 600000으로 바꿔줘. 파일은 건드리지 마.
답
Supabase public.solar_generation 한 행만 바꿨습니다.
파일은 그대로입니다.

발전량(generation_kwh)     276,469 → 600,000
이용률(utilization_rate)   7.5 → 7.5 (안 건드림)

확인 하나 부탁드립니다. 이용률이 예전 발전량 기준
값이라 지금은 맞지 않습니다. 600,000kWh를 8월
기준으로 계산하면 16.3%입니다. 이용률도 16.3으로
바꿀까요?
시킨 것은 발전량 하나인데, 그 값에 딸린 이용률이 안 맞게 됐다고 먼저 말합니다. 표에 두 값이 같이 있으면 하나만 고칠 때 이런 일이 생깁니다.
26 · 주소를 새로고침

파일도 배포도 그대로인데
주소의 숫자가 바뀝니다

바꾸기 전
276,469
  • 당진 4호 2025년 8월
  • 연간 총 발전량 14,386,234 kWh
새로고침한 뒤
600,000
  • 당진 4호 2025년 8월
  • 연간 총 발전량 14,709,765 kWh
확인했으면 되돌리기
아까 바꾼 당진 4호 8월 다시 276469로 돌려줘.
표에서 바꾼 숫자가 인터넷 주소에서도 바뀌어 보이는가.
26 · Tip · 반대로 화면 모양을 고치면

숫자는 DB에서, 화면은 파일에서
따로 고칩니다

숫자는 DB에서, 화면 모양은 파일에서 따로 고치는 그림
숫자가 바뀌면
DB만 고칩니다
  • 매달 현장 숫자는 DB에 넣으면 됩니다
  • 보는 사람은 같은 주소를 계속 씁니다
화면 모양을 바꾸면
파일을 고칩니다
  • 고쳐서 커밋하고 git push
  • 올리면 Vercel이 알아서 다시 배포합니다
숫자와 화면을 따로 고칠 수 있게 만든 것이 오후에 한 일입니다.
Part 06 · 16:00

업무 병목지점 발굴
& 문제정의

여기서부터는 발전량 자료를 내려놓습니다.
각자 자기 책상 위의 업무를 꺼냅니다.
코드가 한 줄도 없습니다. 종이하고 머리로 합니다.
Part 06 · 재료가 바뀝니다

재료는 본인이 매주·매달 하는 일,
결과물은 종이 한 장

지금까지
  • 모두 같은 자료로 연습했습니다
  • 결과물은 대시보드
여기부터
  • 옆 사람과 답이 다른 것이 정상입니다
  • 결과물은 "내가 무엇을, 어떻게 만들지"가 적힌 한 장
  • 이 한 장이 7부의 출발점입니다
27 · 자동화가 미뤄지는 이유

자동화는 왜 늘
다음 주로 넘어가는가

처음 막히는 곳
"어디부터 손대야 할지 모르겠다"
  • 코드가 아닙니다
  • 업무가 머릿속에서 뒤섞여 있어서 시키려고 해도 한 문장이 안 나옵니다
두 번째 이유
급한 일에 치입니다
  • 매주 반복되는 취합은 지금 터지는 불이 아니라서 항상 다음 주가 됩니다
  • 그렇게 1년이 지나도 그대로입니다
그래서 무엇부터 만들지 고르는 눈이 먼저입니다.
27 · Note · 개념

아이젠하워 매트릭스란

급한 정도와 중요한 정도, 두 잣대로 일을 네 칸에 나누는 우선순위 도구입니다.
자동화 1순위는 대부분 ②번 칸에 있습니다
아이젠하워 매트릭스
원래②번 칸(중요한데 안 급한 일)을 먼저 하라는 시간 관리 방법
요즘③번 칸의 "남에게 넘긴다"가 사람이 아니라 도구를 뜻하는 쪽으로 바뀌고 있습니다
예예전에는 후배에게 넘기던 반복 업무를 이제 직접 만든 도구에 넘깁니다
가로는 "급한가", 세로는 "중요한가". 일마다 이 두 가지만 묻고 칸에 넣습니다.
27 · 칸마다

칸마다 하는 일이
다릅니다

①
급하고 중요
고객 이슈, 오늘 마감, 갑자기 터진 일. 사람이 직접 처리합니다
지금 한다
②
중요한데 안 급함
매주 돌아오는 취합, 정리, 집계. 쌓이면 시간을 크게 먹습니다
자동화 1순위
③
급한데 안 중요
남이 부탁한 자잘한 요청, 형식적인 회신. 먼저 안 하기, 줄이기
줄이고 일부만
④
둘 다 아님
습관적으로 열어 보는 것들
멈춘다
27 · 같은 담당자의 세 가지 일

"급한 일"과 "자동화하기 좋은 일"은
다른 칸에 있습니다

①
"30분 뒤 회의에 이 숫자 들고 와라"
매번 내용이 다릅니다. 다만 같은 자료에서 나온다면 그 자료를 정리하는 단계는 ②번으로 뗄 수 있습니다
②
"매주 월요일 부서별 진행 현황 취합"
입력은 엑셀, 규칙은 명확, 주기는 매주, 사람 판단은 거의 없음. 매주 한 시간씩 없어집니다
③
"이 과제 예산 좀 알려줘"
급해 보여서 바로 답하는데 성과와는 거리가 멉니다. 공유 폴더로 바꿔서 물어보는 일 자체를 줄이기
28 · 반복하는 일 적기

매주·매달 반복하는 일을
열 개 이상, 한 문장으로

한 단어로 적으면
  • 보고
  • 취합
급한지 중요한지 판단이 안 됩니다.
한 문장으로 풀어서
매주 월요일 부서별 진행 현황 엑셀을 받아 한 시트로 합쳐서 돌리기
다섯 개만 적으면 네 칸 중 한 칸에 몰려서 후보가 안 보입니다. 많이 펼칠수록 고르기가 쉬워집니다.
28 · 안 나오면

열 개가 안 나오면
이렇게 물어 봅니다

이렇게 물어보면이런 게 떠오릅니다
매주 월요일 오전에 뭘 하시나요주간 보고, 회의 자료 정리
매달 말에 뭘 하시나요월간 리포트, 진행률 집계
메일함에 같은 모양의 파일이 자주 오나요부서별 엑셀 받아서 합치기
PDF에서 숫자를 옮겨 적는 일이 있나요외부 자료, 경쟁사 자료 정리
같은 양식 문서를 반복해서 만드나요임원 보고, 부서 공유 자료
남이 자주 물어봐서 매번 답해 주는 게 있나요현황 문의, 예산 문의 회신
28 · 그래도 안 나오면

새 대화를 열고
질문을 받아 가며 꺼냅니다

나는 <SK 계열사에서 발전소 운영 실적을 관리하는 비개발자>야. 내가 매주·매달 반복하는 일을 열 개 이상 찾고 싶어. 내 하루랑 한 주를 떠올릴 수 있게 질문을 다섯 개씩 던져줘. 내가 답하면 그걸로 목록을 한 줄씩 정리해줘. 한 번에 다 묻지 말고 대화로 해줘.
대괄호 안본인 것으로 바꿉니다
잘 적으려 하지 말 것떠오르는 대로 다 적고 나중에 다듬습니다. 두 번째 줄부터 빨라집니다
목록에 "이건 진짜 매번 한다" 싶은 줄이 일곱 개 이상 있는가.
29 · 네 칸에 올리기

줄마다 두 가지만 묻고
빈 칸에 채웁니다

하나오늘 안 하면 문제 생기나?
둘성과에 영향이 있나?
급함안 급함
중요함①②
안 중요함③④
29 · 애매하면 맡기기

나누기 전에
나한테 한 번씩 묻게 합니다

아래가 내 반복 업무 목록이야. 급한 정도랑 중요한 정도로 네 칸에 나눠줘. 나누기 전에 줄마다 "이거 급해요? 중요해요?"를 나한테 한 번씩 물어보고, 내 답을 반영해서 표로 정리해줘. 중요한데 안 급하면서 매주·매달 반복되고 규칙이 글로 적히는 일에는 별표 달아줘.

<여기에 목록 붙여넣기>
먼저 묻게회사 사정은 제가 압니다
별표자동화 후보를 표시하게 합니다
29 · Important · Tip

나눠 준 결과는 초안,
마지막 배치는 본인이 합니다

Important
  • Claude는 여러분 회사 사정을 모릅니다
  • "이건 우리 팀에선 더 중요해"는 본인만 판단합니다
Tip · ②번 칸이 텅 비면
  • 업무를 너무 크게 묶은 것입니다
  • "월간 보고"를 자료 받기 / 합치기 / 단위 맞추기 / 이상한 숫자 찾기 / 장표 만들기로 쪼개면 반복되는 단계가 ②번에 들어옵니다
적은 일이 전부 한 칸에 들어갔는가. "중요한데 안 급함" 칸에 세 개 이상 있는가.
30 · 오늘 만들 것 하나

②번 칸에서 고르고,
네 질문이 모두 "예"인지 봅니다

질문예 (자동화 좋음)아니오 (사람이 해야 함)
들어오는 자료가 파일 형태인가엑셀, CSV, PDF, 메일 본문종이, 손글씨, 회의 중에 나온 말
규칙이 글로 적힐 만큼 명확한가"A열 합계를 B시트에 붙이기""센스 있게 정리해 주세요"
같은 모양으로 자주 반복하는가매주, 매달1년에 한 번, 매번 다른 양식
판단이 규칙으로 적히는가규칙대로 처리하면 끝임원 취향, 부서 간 조율, 보기 좋게
30 · 네 번째 질문

"이것도 되겠지?"를 막는
네 번째 질문이 가장 중요합니다

자동화 대상이 아닌 것
  • 임원 보고서 디자인
  • 부서 간 조율
  • 글의 톤 잡기
자동화는 그 앞 단계까지
  • 자료 정리
  • 후보 추리기
  • 판단은 사람이 하더라도 그 앞의 준비는 넘길 수 있습니다
30 · 크기로 거르기

첫 도구는
너무 크지도 작지도 않게

기준후보로 남긴다후보에서 뺀다
한 번 할 때 걸리는 시간30분 이상5분 이하
주기매주에서 매달 사이분기, 1년에 한 번
만드는 데 걸릴 시간3일차 안에 끝낼 만큼며칠 걸릴 듯
틀렸을 때 생기는 일내가 확인할 수 있고 충격이 작다임원 보고로 바로 나간다
동그라미 친 것이 하나인가. 그것의 입력이 지금 내 노트북이나 메일함에 있는 파일인가.
31 · 세 칸으로 그리기

자동화 도구는 결국
입력 · 규칙 · 결과물입니다

입력, 규칙, 결과물
Input
입력
무엇이 들어오나. 부서별 엑셀 3개 / 현장 다섯 곳 엑셀 / 메일 본문
Rule
규칙
어떤 순서로 처리하나. "코드로 합치고, 중복 빼고, 정렬"
Output
결과물
무엇이 나오나. 통합 엑셀 / 숫자 표 / 요약 보고서
31 · 규칙 칸

규칙 칸은
단계로 쪼갤수록 좋습니다

너무 큰 규칙
  • 합쳐서 정리
쪼갠 규칙
  • ① 엑셀 세 개 읽기
  • ② 코드로 합치기
  • ③ 중복 빼기
  • ④ 정렬
  • ⑤ 저장
이렇게 쪼개면 그대로 7부에서 칠 프롬프트가 됩니다.
31 · 잘 안 채워지면

코드는 시키지 않고
설계만 같이 정리합니다

물어보는 말
내가 자동화하고 싶은 일이야. <후보 업무를 한 문단으로 설명>. 이걸 도구로 만든다고 할 때 입력·규칙·결과물 세 칸을 표로 정리해줘. 아직 코드는 필요 없고, 내가 빠뜨린 단계가 있으면 물어봐줘.
마지막에 적을 한 문장 · 7부의 출발점
나는 ____________을 만든다.
입력은 __________, 규칙은 __________,
결과물은 __________이다.
예나는 월간 발전실적 통합 도구를 만든다. 입력은 현장 다섯 곳에서 메일로 오는 엑셀, 규칙은 하나로 합치기 → 단위 맞추기 → 지난달과 비교해 이상한 숫자 표시, 결과물은 통합 엑셀과 요약 표이다.
세 칸이 다 채워졌는가. 규칙 칸이 단계로 쪼개져 있는가. 사진이나 파일로 저장해 두었는가.
Part 07 · 17:00

바이브코딩
기획

종이에 그린 것을 오늘 안에 한 번 돌려 봅니다.
완성이 아니라
한 번 돌아가는 것이 목표입니다.
32 · 새 폴더에서

새 폴더 내업무를 고르고
새 대화를 엽니다

01
폴더 만들기
문서 폴더 아래에 새 폴더
내업무
02
새 대화
Code 탭 왼쪽 위 + 새로 생성
+ 새로 생성
03
폴더 고르기
맨 왼쪽 칸이 로컬인지 보고, 폴더 칸 → 폴더 열기…에서 방금 만든 폴더
내업무
32 · 받아 적게 하기

정리해서 말하지 말고
생각나는 대로 말합니다

월간 발전실적 얘기할게. 듣고 순서대로 정리해줘. 중간에 빠진 게 있으면 물어봐. 업무흐름.md로 저장해줘.

매달 1일에 현장 다섯 군데서 엑셀을 메일로 보내. 양식이 다 달라서 내가 하나로 합쳐. 합치면서 단위 확인하고, 지난달 거랑 비교해서 이상한 숫자 있으면 현장에 다시 물어봐. 다 맞으면 요약 장표 만들어서 팀장님한테 올려.
위 세 줄어떻게 정리할지
아래 문단제가 예로 든 이야기입니다. 여러분은 6부에서 고른 자기 일을 넣습니다
32 · 1분 뒤 답

네 문장으로 말한 것이
6단계가 됐습니다

흐름
내업무/업무흐름.md에 6단계로 정리했습니다.

1. 매달 1일 현장 5곳 엑셀 메일 수신
2. 양식이 다른 파일을 하나로 합치기
3. 합치면서 단위 맞추기
4. 지난달과 비교해 튀는 숫자 찾기
5. 튀는 숫자는 현장에 다시 묻고 고치기
   (맞을 때까지 4-5 반복)
6. 요약 장표 만들어 팀장 보고
물어볼 것 · 10개 중 급한 4개
- 팀장 보고 기한이 매달 며칠인가요
- "이상한 숫자" 판단 기준이 있나요, 아니면
  눈으로 보고 판단하시나요
  (예: 지난달 대비 20% 이상 차이)
- 현장 답이 기한까지 안 오면 빼고 보고하나요,
  보고를 미루나요
- 요약 장표는 엑셀인가요 PPT인가요

특히 2번(판단 기준)은 정해 두면 그 부분부터
자동화가 됩니다.
32 · 아직 안 정한 것

제가 말 안 한 것 열 개가
오늘의 진짜 수확입니다

업무흐름.md 아래쪽
## 아직 안 정한 것 (다음에 채우기)

아래는 말로만 하고 있어서 문서에 적히지 않은 것들이다.
채워 두면 다른 사람이 대신 해도 돌아간다.

1. 보고 기한: 팀장 보고를 매달 며칠까지 해야 하는가
2. 현장 목록: 다섯 곳의 이름과 각 현장 담당자, 메일 주소
3. 메일이 안 올 때: 며칠까지 안 오면 독촉하는가
4. 합치는 방법: 통합 양식 파일이 따로 있는가
5. 단위: 무엇을 무엇으로 맞추는가
6. 이상한 숫자 기준: 지난달 대비 몇 퍼센트 넘게
   차이 나면 물어보는가
(...)
답할 수 있는 항목도구에 넘길 수 있는 일
"그때그때 달라요"그 단계는 사람이 계속 해야 합니다
5분답을 채워 넣으세요. 회사 이름은 A사, Project A로
업무흐름.md가 생겼는가. "아직 안 정한 것"에 내가 답할 수 있는 것이 반 이상인가.
33 · 작게 한 번 돌려 보기

회사 파일을
안 가져오셨어도 됩니다

하나 · 모양만 말하고 샘플 만들기
부서별 진행현황 엑셀이 이렇게 생겼어. 열은 부서, 과제명, 담당자, 진행률, 마감일이야. 부서 3개에 과제 12개짜리 샘플 CSV 만들어줘. 다음 달에 진짜 파일로 바꿔 쓸 거야.
둘 · 몇 줄만 옮겨 적기
열 이름 한 줄 + 자료 세 줄
  • 숫자와 회사 이름은 가짜로 바꿔서 적습니다
도구가 보는 것은 열 이름과 줄 모양이지 그 안의 숫자가 아닙니다. 다음 달에 진짜 파일을 같은 이름으로 넣으면 그대로 돌아갑니다.
33 · 제 예

4번 단계
"지난달과 비교해 튀는 숫자 찾기"

좋아, 시작해. 내업무 폴더에 발전량.csv 넣어놨어. 기준 20%로 한 번 돌려서 결과 보여줘.
재료마침 오전에 쓰던 발전량 자료가 있어서 내업무 폴더에 복사해 넣었습니다
여러분은앞 장의 두 가지 중 하나로 만든 파일을 넣습니다
같은 대화32절에서 이어서 칩니다
33 · 1분 뒤

이상치확인.py가 생기고
돌린 결과가 같이 옵니다

결과: 2025-12 vs 2025-11
현장        항목            지난달     이번달     차이   판정
고창 3호    발전량_kWh     129,983   102,446   -21.2%  확인
고창 3호    이용률_%          12.0       9.2   -23.3%  확인
당진 4호    발전량_kWh     368,822   401,263    +8.8%
영암 2호    발전량_kWh     224,102   217,520    -2.9%
(...)
확인 필요 2건 / 전체 10건
33 · 답의 뒷부분

"20%로 한 번"이었는데
12개월을 다 돌려 봤습니다

달확인 건수성격
03월9건5곳 전부 +30-66%. 봄이라 다 같이 오른 것
07월9건5곳 전부 -21-36%. 장마라 다 같이 내린 것
08월7건넷은 +20%대인데 당진만 -36%
04·06·12월1-2건한 곳만 튐
확인된 문제 · 다음 스텝
"지난달 대비 20%"만 보면 3·7·11월에는
다섯 곳이 전부 확인 대상으로 잡힙니다.
실제로 물어봐야 할 건 8월 당진처럼
다른 넷과 반대로 움직인 곳입니다.

"다섯 곳 평균 변화와 20% 이상
벌어졌는가"를 하나 더 봅니다.
스크립트 10줄 추가로 됩니다.
33 · 한 줄이 없어졌다

"아직 안 정한 것" 한 줄에
답이 생겼습니다

32절
"이상한 숫자 기준이 있나요"
  • 저는 답이 없었습니다
33절
지난달 대비 20%, 단 다섯 곳이 같이 움직인 달은 빼고
  • 한 번 돌려 보고 생긴 답입니다
이렇게 하나씩 없애는 것이 3일차까지 할 일입니다.
33 · 돌아가면

여기서 멈추지 말고
스킬로 남깁니다

/skill-creator 이거 스킬로 만들어줘. 다음 달에도 똑같이 쓸 거야.
왜다음 달에 또 쓸 것이기 때문입니다
17-18절오후에 한 것을 내 업무에 그대로 한 번 더
결과 파일이나 결과 표가 생겼는가. "아직 안 정한 것" 중 하나가 답이 생겼는가.
33 · Important · Tip

안 돌아가도
어디서 막혔는지가 남습니다

Important · 안 되면 그것도 결과
  • 막힌 화면을 그대로 두거나 오류 메시지를 복사해 둡니다
  • 3일차에 그것부터 보시면 됩니다
Tip · 여기서 손 드세요
  • 각자 만들면서 저를 부르는 시간입니다
  • "이게 되는 일인지", "어디서부터 시켜야 할지", "회사 자료를 어디까지 쓸 수 있나"도 물어보세요
34 · 중간과제 기획서

프롬프트는 안내 페이지에,
새 대화에서 붙여 넣습니다

01
안내 페이지
과제 작성 가이드 → 1. 중간과제 기획서 만들기 → 프롬프트 복사
복사
02
새 대화
지금 대화에 붙이면 오후 대화가 다 딸려 들어가 느려집니다. 폴더는 내업무
붙여넣기
03
답만 하기
폴더를 훑고, 파악한 것을 보여 주고, 빈 곳만 물어봅니다
중간과제_이름.md
34 · 들어가는 것

들어가는 세 가지는
오늘 이미 만들었습니다

항목오늘 어디서 나왔나
과제 배경6부에서 네 칸에 올려 고른 일
지금 방식 (As-Is)32절에서 받아 적은 6단계와 "아직 안 정한 것"
AI로 바꿀 것 (To-Be)6부에서 그린 입력·규칙·결과물 세 칸, 33절에서 돌려 본 결과
중간과제_이름.md가 생겼는가. 세 항목에 오늘 실제로 한 것이 들어가 있는가. 제출처와 마감은 운영진이 안내합니다.
Afternoon FAQ · 오후에 자주 나오는 질문

회사에서 쓰려면
어느 망, 어떤 자료부터 정합니다

사내망에서도 되나요
Claude Code는 인터넷으로 나갑니다. 사내망에서 막히면 안 돌아갑니다. 3일차 코칭 때 어느 망에서 쓸지부터 정하시면 됩니다
회사 데이터를 올려도 되나요
오늘은 가짜 데이터로 합니다. Supabase와 Vercel은 인터넷에 열려 있는 곳입니다
엑셀이 너무 커요
"첫 20줄만 보고 열 이름 알려줘"처럼 범위를 주고, 나눠 시킵니다
오전 것을 또 만드나요
아닙니다. 오전 폴더를 그대로 쓰고, 스킬로 만들어 뒀으면 한 줄로 부릅니다
Supabase 프로젝트 개수
두 개까지 동시에. 한동안 안 쓰면 멈추니 3일차에 한 번 깨워 주세요
Done · 끝나면

커밋하고 올린 뒤,
여섯 가지를 가져갑니다

solar-dashboard 폴더를 고른 대화에서
오늘 한 것 전부 커밋하고 GitHub에 올려줘. "2일차: DB 연결, 업로드 버튼, 배포, 내 업무 정리"로.
1 · 대시보드
인터넷 주소로 열립니다
2 · Supabase 표
그 뒤에 있는 DB
3 · 올리기 버튼
화면에서 새 자료를 올립니다
4 · 스킬
홈 폴더 .claude/skills/ 아래
5 · 업무흐름.md
"아직 안 정한 것" 목록. 3일차에 제일 먼저 봅니다
6 · 중간과제_이름.md
기획서
Day 2 · Done

오늘은 대시보드 하나와 내 업무 한 장,
3일차는 그 한 장에서 시작합니다

Today · 10/14
대시보드 · DB · 인터넷 주소
계획 → 기준 → 시안 → 순서 → 고치기 → DB → 배포, 그리고 스킬
Day 3
중간과제 기획서
"아직 안 정한 것"부터 채웁니다
문의
김혜련
kyra@artetlab.com
수고하셨습니다.오늘 만든 폴더와 주소는 그대로 두세요.