한국GPT협회 표준교재

804-3. 바이브코딩 — 엑셀 데이터 기반 도서판매 대시보드

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

엑셀 데이터 기반 도서판매 대시보드 만들기

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

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

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

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

Why single-file dashboard

왜 단일 HTML 대시보드인가

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

도서판매 엑셀▸Claude Code/Codex 폴더 연결▸대시보드 생성 지시▸단일 HTML 완성
실습

폴더 준비와 Claude Code/Codex 연결

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

실습 데이터 — 도서판매_Data.xlsx

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

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

2) Claude Code/Codex로 폴더 연결

Claude Code(터미널에서 해당 폴더로 이동) 또는 Codex 데스크탑앱에서 방금 만든 폴더를 작업 폴더로 선택(open folder)합니다. 이제 AI는 폴더 안의 도서판매_Data.xlsx를 직접 읽고, 이 폴더에 파일을 만들 수 있습니다.

핵심. "폴더 연결"이 바이브코딩의 출발점입니다. Claude Code/Codex는 연결된 폴더 안의 파일만 읽고 씁니다 — 데이터(엑셀)와 결과물(HTML)이 한 폴더에 모이는 이유입니다.
데이터컬럼 구성(요약)
일자·식별판매일자 · 주문번호 · 도서고유번호 · 도서명 · 분야
거래 경로유통채널(온라인서점/대형서점/직영몰/도매유통) · 판매지역 · 영업담당부서
수량·금액판매량 · 판매단가 · 할인율 · 금액(=판매량×판매단가×(1−할인율))
실습

데이터 구조 파악시키기

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

① 데이터 파악 프롬프트
이 폴더의 도서판매_Data.xlsx를 열어서 데이터를 분석해 줘. - 컬럼 구성과 각 컬럼의 의미(추정), 데이터 타입(숫자/범주/날짜) - 행 수, 기간, 유통채널·판매지역·영업담당부서·분야 같은 범주형 컬럼의 고유값 - 이 데이터로 만들 수 있는 도서 판매 현황·실적 지표 후보를 목록으로 먼저 분석 결과만 요약해 줘. 대시보드는 다음 단계에서 만든다.
관찰 포인트. AI가 금액(매출), 유통채널, 영업담당부서, 판매지역, 분야 같은 핵심 컬럼을 짚어내는지 확인하십시오. 여기서 잡은 지표 후보가 곧 대시보드의 KPI·차트가 됩니다.
실습

대시보드 생성 지시

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

② 대시보드 생성 프롬프트
도서판매_Data.xlsx의 데이터로 도서 판매 현황·실적 대시보드를 만들어 줘. # 형식 - 단일 HTML 파일 하나로 만들고, 데이터를 파일 안에 포함해 인터넷 없이도 열리게. - 외부 라이브러리 없이 순수 HTML/CSS/JS로, 차트도 직접 그려 깔끔한 블루 톤으로. # 보여줄 지표(다양하게) - 상단 KPI 카드: 총 매출액(금액 합계), 총 판매량, 거래 건수, 평균 할인율, 평균 객단가(매출/건수), 베스트셀러 분야 - 월별 매출 추이(라인/영역 차트) - 유통채널별 매출 비중(도넛), 영업담당부서별 매출, 판매지역별 매출, 분야별 매출(가로 막대) - 도서별 매출 상위 10 표 - 필터 결과 원본 데이터 표 # 상단 필터 - 화면 상단에 필터 바: 기간(시작일·종료일), 유통채널, 판매지역, 영업담당부서, 분야 - 필터를 바꾸면 KPI·차트·표가 모두 즉시 다시 계산되게. - '필터 초기화' 버튼도 추가. # 엑셀 데이터 로딩 버튼 - 우측 상단에 '엑셀 데이터 불러오기' 버튼 — .xlsx 또는 .csv 파일을 올리면 브라우저 안에서 직접 파싱해(서버 전송 없이) 같은 형식이면 대시보드가 그 데이터로 갱신되게. - 컬럼명이 조금 달라도(예: 금액·매출, 판매지역·지역) 알아서 인식하게.

상단 필터와 업로드 버튼을 콕 집어 지시

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

③ 보완 프롬프트(필요 시)
두 가지를 보완해 줘. 1. 우측 상단 '엑셀 데이터 불러오기' 버튼이 없으면 추가하고, 파일을 올리면 KPI·차트·표가 모두 새 데이터로 갱신되게. 2. 화면 상단에 기간·유통채널·판매지역·영업담당부서·분야 필터를 모두 넣고, 값을 바꾸면 즉시 반영되게. 또, 필터 '초기화' 버튼도 추가해 줘.
사례

완성 대시보드 살펴보기

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

▲ 완성된 도서판매 현황 대시보드 — 상단 '엑셀 데이터 불러오기' 버튼 · 5개 상단 필터 · KPI 6종 · 채널 도넛/부서·지역·분야 막대 · 월별 추이 · 도서 매출 TOP10. 아래 링크로 실제 파일을 열어 보세요.

완성 대시보드 열기 (단일 HTML) 실습 데이터 — 도서판매_Data.xlsx

무엇이 만들어졌나

KPI한눈 요약

총 매출 8.1억 · 총 판매량 60,565권 · 거래 900건 · 평균 할인율 11.8% · 평균 객단가 89.6만원 · 베스트 분야 인문.

차트추이·비중·비교

월별 매출 추이, 유통채널별 매출 비중(도넛), 영업담당부서·판매지역·분야별 매출(막대), 도서 매출 상위 10 표.

상단 필터다중 조건

기간(시작·종료일) · 유통채널 · 판매지역 · 영업담당부서 · 분야 — 값을 바꾸면 즉시 재계산.

업로드재사용

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

확인 실습. 대시보드를 열고 ① 유통채널을 '온라인서점'으로 필터 ② 영업담당부서를 하나로 선택 ③ 우측 상단 버튼으로 도서판매_Data.xlsx를 다시 업로드 — 세 가지를 직접 해보며 KPI·차트가 바뀌는지 확인하십시오.
사례

만드는 과정 — 4개의 프롬프트

학습 안내쌓기. 한 번에 완성을 요구하지 않습니다. 골격 → 집계·차트 → 상단 필터·파일 업로드 → 디자인 순으로 대화를 이어가며 쌓습니다.

① 골격 — 무엇을 보여줄지 정의

PROMPT 1 · 골격
# 목표 도서판매 실적 엑셀을 보여주는 단일 HTML 대시보드를 만들어줘. 외부 라이브러리 없이 순수 HTML/CSS/JS로, 파일 하나로 동작해야 한다. # 데이터 컬럼(엑셀 헤더) 판매일자, 주문번호, 도서고유번호, 도서명, 분야, 유통채널, 판매지역, 영업담당부서, 판매량, 판매단가, 할인율, 금액 # 화면 구성 - 상단 KPI 카드 6개: 총 매출액 / 총 판매량 / 거래 건수 / 평균 할인율 / 평균 객단가 / 베스트셀러 분야 - 월별 매출 추이 (라인/영역 차트) - 유통채널별 매출 비중 (도넛) - 영업담당부서별·판매지역별·분야별 매출 (가로 막대) - 도서별 매출 상위 10 (표) # 디자인 밝은 배경의 블루 톤. 카드형 레이아웃. 금액은 억/만 단위로 축약.

② 집계·차트 — 숫자를 어떻게 계산할지

PROMPT 2 · 집계 로직
# 집계 규칙 - 금액 합계, 판매량 합계, 거래 건수, 평균 할인율을 계산해 KPI에 표시 - 평균 객단가 = 금액 합계 ÷ 거래 건수 - 금액이 비어 있으면 (판매량 × 판매단가 × (1−할인율))로 보정 - 월별: 판매일자에서 월을 뽑아 금액 합계로 라인 차트 - 유통채널별: 금액 합계 비중을 도넛으로 - 영업담당부서·판매지역·분야별: 금액 합계 내림차순 막대 - 도서별: 도서명 기준 금액·판매량·건수 표, 금액 내림차순 상위 10

③ 상단 필터·파일 업로드 — 직접 조작하게

PROMPT 3 · 필터와 파일 파싱
# 상단 필터 화면 맨 위에 필터 바를 두고 기간(시작일·종료일), 유통채널, 판매지역, 영업담당부서, 분야를 고를 수 있게 해줘. 값을 바꾸면 KPI·차트·표가 즉시 다시 계산되고, '필터 초기화' 버튼도 둬. # 엑셀 데이터 로딩 버튼 우측 상단에 [엑셀 데이터 불러오기] 버튼을 두고, 사용자가 .xlsx 또는 .csv를 올리면 브라우저 안에서 직접 파싱해 같은 집계 로직으로 즉시 갱신해줘. (서버 전송 없이 클라이언트에서만 처리 — 보안상 데이터가 외부로 안 나가게) - 컬럼명은 유사어도 인식 (예: '금액'·'매출', '판매지역'·'지역') - 처음 화면에는 내장 샘플 데이터를 보여주고, 파일을 올리면 교체 - 잘못된 파일이면 안내 메시지 표시

④ 디자인·반응형 — 마무리

PROMPT 4 · 디자인
# 다듬기 - 카드에 옅은 그림자와 1px 테두리, 숫자는 굵게 강조 - 색상: 네이비·블루 계열의 차분한 톤, 상단 바는 네이비 그라데이션 - 모바일(좁은 화면)에서 KPI는 2~3열, 차트는 세로 적층으로 자동 전환 - 표가 길면 스크롤, 헤더는 고정 - 하단에 "전체 건수 · 필터 결과 건수 · 매출 합계" 요약 한 줄
실습

부록 · 더 해보기

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

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

MISSION 2지표·차트 추가 지시

"분야×유통채널 매출을 히트맵으로 그려줘", "할인율 구간별 평균 객단가를 보여줘", "영업담당부서별 목표 대비 달성률을 추가해줘"처럼 분석 관점을 추가해 대시보드를 키워 보십시오.

MISSION 3웹에 배포하기

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