한국GPT협회 표준교재

804. 바이브코딩 — 엑셀 데이터 기반 제조 대시보드

Codex로 폴더를 연결하고, 엑셀 한 개로 KPI·차트·필터·업로드가 있는 단일 HTML 대시보드를 만든다

엑셀 데이터 기반 제조 대시보드 만들기

Learning Objectives

Codex 데스크탑앱으로 작업 폴더를 연결하고, 폴더 안의 엑셀 파일을 데이터 소스로 쓰는 흐름을 익힌다.
자연어 지시만으로 KPI·차트·필터·엑셀 업로드 버튼이 있는 단일 HTML 대시보드를 만든다.
"무엇을 보여줄지(지표)"와 "어떻게 조작할지(필터·업로드)"를 프롬프트로 명확히 지시하는 법을 익힌다.

이해

바이브코딩 데이터 대시보드

학습 안내읽기. 이 장은 Ch8(801)에서 익힌 Codex 사용법을 "내 엑셀 데이터"에 적용합니다. 코드를 직접 쓰지 않고, 무엇을 만들지 말로 설명하는 것이 핵심입니다.

엑셀로 매일 쌓이는 생산 데이터는 그대로 두면 "행의 더미"일 뿐입니다. 바이브코딩을 쓰면, 그 엑셀을 대시보드로 바꾸는 데 코딩 지식이 필요 없습니다. Codex에게 작업 폴더를 연결하고 "이 엑셀로 대시보드를 만들어줘"라고 지시하면, AI가 데이터를 읽고 HTML 대시보드를 직접 작성합니다.

Why single-file dashboard

왜 단일 HTML 대시보드인가

결과물을 하나의 .html 파일로 만들면 설치·서버 없이 더블클릭으로 열리고, 데이터까지 파일 안에 포함돼 오프라인·사내망에서도 동작합니다. 여기에 엑셀 업로드 버튼을 더하면, 매달 새 데이터를 올려 같은 대시보드를 재사용할 수 있습니다.

엑셀 데이터▸Codex 폴더 연결▸대시보드 생성 지시▸단일 HTML 완성

실습

폴더 준비와 Codex 연결

학습 안내직접 실행. 실습용 데이터 Production_Data.xlsx를 내려받아 빈 폴더에 넣고, 그 폴더를 Codex에 연결하는 것부터 시작합니다.

실습 데이터 — Production_Data.xlsx

1) 작업 폴더 만들고 엑셀 넣기

바탕화면에 제조-대시보드 같은 새 폴더를 만들고, 내려받은 Production_Data.xlsx를 그 안에 넣습니다. 대시보드 결과 파일도 이 폴더에 함께 생성됩니다.

2) Codex로 폴더 연결

Codex 데스크탑앱을 열고 방금 만든 폴더를 작업 폴더로 선택(open folder)합니다. 이제 Codex는 폴더 안의 Production_Data.xlsx를 직접 읽고, 이 폴더에 파일을 만들 수 있습니다.

핵심. "폴더 연결"이 바이브코딩의 출발점입니다. Codex는 연결된 폴더 안의 파일만 읽고 씁니다 — 데이터(엑셀)와 결과물(HTML)이 한 폴더에 모이는 이유입니다.

데이터	컬럼 구성(요약)
식별·일자	`ProductionDate`(생산일) · `DailySeq` · `SerialNo`(일련번호)
치수	`Width` · `Depth` · `Height` · `Length` · `Gap`
공정 변수	`Direction`(Up/Down) · `Speed_P` · `Temp_P` · `Torque_P` · `Speed_Q` · `Angle_Q`
실적·품질	`Team`(L/M/N) · `Weight` · `SurfaceDefects`(표면결함 수) · `Error`(오차) · `Quality`(Good/Bad)

실습

데이터 구조 파악시키기

대시보드를 만들기 전에, AI가 데이터를 먼저 이해하게 합니다. 어떤 컬럼이 있고 어떤 지표를 만들 수 있는지 스스로 정리하게 하면, 이어지는 지시가 정확해집니다.

① 데이터 파악 프롬프트

이 폴더의 Production_Data.xlsx를 열어서 데이터를 분석해 줘. - 컬럼 구성과 각 컬럼의 의미(추정), 데이터 타입(숫자/범주/날짜) - 행 수, 기간, 팀 같은 범주형 컬럼의 고유값 - 이 데이터로 만들 수 있는 제조 현황·품질 지표 후보를 목록으로 먼저 분석 결과만 요약해 줘. 대시보드는 다음 단계에서 만든다.

관찰 포인트. AI가 Quality(Good/Bad), Team(L/M/N), SurfaceDefects 같은 핵심 컬럼을 짚어내는지 확인하십시오. 여기서 잡은 지표 후보가 곧 대시보드의 KPI·차트가 됩니다.

실습

대시보드 생성 지시

이제 본 지시입니다. ① 무엇을 보여줄지(지표) ② 어떻게 조작할지(업로드·필터) ③ 어떤 형식으로(단일 HTML)를 한 번에 명확히 적습니다. 요구사항을 구체적으로 적을수록 한 번에 원하는 결과가 나옵니다.

② 대시보드 생성 프롬프트

Production_Data.xlsx의 데이터로 제조 생산 현황·실적 대시보드를 만들어 줘. # 형식 - 단일 HTML 파일 하나로 만들고, 데이터를 파일 안에 포함해 인터넷 없이도 열리게. - 차트는 Chart.js, 디자인은 깔끔한 블루 톤. # 보여줄 지표(다양하게) - 상단 KPI 카드: 총 생산량, 양품률, 불량 건수, 평균 표면결함, 평균 오차, 가동일수 - 일자별 생산량 추이, 일자별 불량률(%) 추이 - 팀(L/M/N)별 양품·불량 비교 - 품질(Good/Bad) 분포, 표면결함 수 분포 - 필터 결과를 표로도 표시 # 조작 기능 - 우측 상단에 '엑셀 파일 업로드' 버튼 — 새 엑셀을 올리면 같은 형식이면 대시보드가 그 데이터로 갱신되게. - 여러 컬럼으로 필터: 생산일(기간), 팀, 품질, 방향(Direction), 표면결함 유무 - 필터를 바꾸면 KPI와 모든 차트가 즉시 다시 계산되게.

업로드 버튼과 필터를 콕 집어 지시

"업로드 버튼"과 "필터"는 빠지기 쉬운 요구라, 위 프롬프트처럼 위치(우측 상단)·동작(갱신)·대상 컬럼까지 못 박아 적습니다. 결과가 일부 빠졌다면 다음처럼 보완 지시합니다.

③ 보완 프롬프트(필요 시)

두 가지를 보완해 줘. 1. 우측 상단 엑셀 업로드 버튼이 없으면 추가하고, 업로드하면 KPI·차트·표가 모두 새 데이터로 갱신되게. 2. 생산일·팀·품질·방향·표면결함 필터를 모두 넣고, 값을 바꾸면 즉시 반영되게. 또, 필터 '초기화' 버튼도 추가해 줘.

사례

완성 대시보드 살펴보기

위 프롬프트로 만들어진 완성본입니다. KPI 6종 · 차트 5종 · 5개 필터 · 엑셀 업로드 버튼이 한 파일에 들어 있고, 데이터(900건)가 포함돼 더블클릭만으로 열립니다.

완성된 제조 생산 현황 대시보드 — KPI 카드, 차트, 필터, 엑셀 업로드 버튼 — 완성된 제조 생산 현황 대시보드 — 우측 상단 업로드 버튼 · 5개 필터 · KPI 6종 · 차트 5종 · 데이터 표

완성 대시보드 열기 (단일 HTML) 실습 데이터 — Production_Data.xlsx

무엇이 만들어졌나

KPI한눈 요약

총 생산량 900건 · 양품률 80.0% · 불량 180건 · 평균 표면결함 1.01개 · 평균 오차 0.514 · 가동 30일.

차트추이·비교·분포

일자별 생산량/불량률 추이, 팀별 양품·불량, 품질 분포(도넛), 표면결함 수 분포.

필터다중 조건

생산일 기간 · 팀(L/M/N) · 품질(Good/Bad) · 방향(Up/Down) · 표면결함 유무 — 즉시 재계산.

업로드재사용

우측 상단 버튼으로 같은 형식의 새 엑셀을 올리면 전체 대시보드가 그 데이터로 갱신.

확인 실습. 대시보드를 열고 ① 팀 칩을 하나만 켜 보기 ② 품질을 'Bad'로 필터 ③ 우측 상단 버튼으로 Production_Data.xlsx를 다시 업로드 — 세 가지를 직접 해보며 KPI·차트가 바뀌는지 확인하십시오.

실습

부록 · 더 해보기

MISSION 1내 업무 데이터로 바꾸기

회사의 실제 엑셀(생산·품질·영업 실적 등)을 같은 폴더에 넣고, "이 데이터로 같은 대시보드를 만들어줘"라고 지시해 보십시오. 컬럼이 다르면 AI가 알아서 지표를 재구성합니다. 민감 데이터는 가명화 후 사용합니다.

MISSION 2지표·차트 추가 지시

"공정 변수(Speed_P·Temp_P)와 불량의 관계를 산점도로 보여줘", "치수(Width·Length)의 표준편차와 관리 상·하한선을 표시해줘"처럼 분석 관점을 추가해 대시보드를 키워 보십시오.

MISSION 3웹에 배포하기

완성한 단일 HTML을 803에서 배운 방식으로 GitHub + Render에 배포하면, 팀원이 링크로 접속하는 공유 대시보드가 됩니다.