한국GPT협회 표준교재

805. 바이브코딩 — 엑셀 데이터 기반 금융 영업 대시보드

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

엑셀 데이터 기반 영업 대시보드 만들기

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

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

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

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

Why single-file dashboard

왜 단일 HTML 대시보드인가

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

영업 엑셀▸Codex 폴더 연결▸대시보드 생성 지시▸단일 HTML 완성
실습

폴더 준비와 Codex 연결

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

실습 데이터 — 금융_영업데이터_대시보드.xlsx

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

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

2) Codex로 폴더 연결

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

핵심. "폴더 연결"이 바이브코딩의 출발점입니다. Codex는 연결된 폴더 안의 파일만 읽고 씁니다 — 데이터(엑셀)와 결과물(HTML)이 한 폴더에 모이는 이유입니다.
데이터컬럼 구성(요약)
일자날짜(거래일) · 월 · 납기일
거래·고객지역 · 거래처명 · 담당자 · 주소
제품제품군 · 제품코드 · 수량 · 단가
금액·상태매출액 · 할인율 · 최종매출 · 납품상태
실습

데이터 구조 파악시키기

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

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

대시보드 생성 지시

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

② 대시보드 생성 프롬프트
금융_영업데이터_대시보드.xlsx의 데이터로 금융 영업 현황·실적 대시보드를 만들어 줘. # 형식 - 단일 HTML 파일 하나로 만들고, 데이터를 파일 안에 포함해 인터넷 없이도 열리게. - 차트는 Chart.js, 디자인은 깔끔한 블루 톤. # 보여줄 지표(다양하게) - 상단 KPI 카드: 총 매출(최종매출 합계), 거래 건수, 평균 거래액, 평균 할인율, 최다 제품군 - 월별 매출 추이 - 지역별 매출, 제품군별 매출 - 담당자별 실적, 거래처별 매출 상위 - 납품상태(계약완료·진행 등) 분포 - 필터 결과를 표로도 표시 # 조작 기능 - 우측 상단에 '엑셀 파일 업로드' 버튼 — 새 엑셀을 올리면 같은 형식이면 대시보드가 그 데이터로 갱신되게. - 여러 컬럼으로 필터: 기간(날짜), 지역, 제품군, 담당자, 납품상태 - 필터를 바꾸면 KPI와 모든 차트가 즉시 다시 계산되게.

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

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

③ 보완 프롬프트(필요 시)
두 가지를 보완해 줘. 1. 우측 상단 엑셀 업로드 버튼이 없으면 추가하고, 업로드하면 KPI·차트·표가 모두 새 데이터로 갱신되게. 2. 기간·지역·제품군·담당자·납품상태 필터를 모두 넣고, 값을 바꾸면 즉시 반영되게. 또, 필터 '초기화' 버튼도 추가해 줘.
사례

완성 대시보드 살펴보기

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

완성된 금융 영업 현황 대시보드 — KPI 카드, 차트, 필터, 엑셀 업로드 버튼
완성된 금융 영업 현황 대시보드 — 우측 상단 업로드 버튼 · 월별 추이 · 지역/제품군/담당자별 실적 · 납품상태 분포
완성 대시보드 열기 (단일 HTML) 실습 데이터 — 금융_영업데이터_대시보드.xlsx

무엇이 만들어졌나

KPI한눈 요약

총 매출(최종매출 합계) · 거래 건수 · 평균 거래액 · 평균 할인율 · 최다 제품군을 상단 카드로.

차트추이·비교·분포

월별 매출 추이, 지역별·제품군별·담당자별 실적, 납품상태(도넛), 거래처별 매출 상위 표.

필터다중 조건

기간(날짜) · 지역 · 제품군 · 담당자 · 납품상태 — 즉시 재계산.

업로드재사용

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

확인 실습. 대시보드를 열고 ① 특정 지역만 필터 ② 제품군을 하나로 선택 ③ 우측 상단 버튼으로 금융_영업데이터_대시보드.xlsx를 다시 업로드 — 세 가지를 직접 해보며 KPI·차트가 바뀌는지 확인하십시오.
사례

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

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

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

PROMPT 1 · 골격
# 목표 영업 실적 엑셀을 보여주는 단일 HTML 대시보드를 만들어줘. 외부 라이브러리 없이 순수 HTML/CSS/JS로, 파일 하나로 동작해야 한다. # 데이터 컬럼(엑셀 헤더) 날짜, 지역, 거래처명, 제품군, 수량, 단가, 매출액, 할인율, 최종매출, 납품상태, 담당자 # 화면 구성 - 상단 KPI 카드 5개: 최종매출 / 판매수량 / 평균 주문금액 / 평균 할인율 / 주력 제품군 - 월별 최종매출 추이 (라인 차트) - 지역별 매출, 제품군별 매출 (가로 막대) - 납품상태 비중 (도넛) - 담당자 성과, 거래처 매출 상위 10 (표) # 디자인 밝은 배경의 금융 대시보드 톤. 카드형 레이아웃. 숫자는 억/만 단위로 축약.

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

PROMPT 2 · 집계 로직
# 집계 규칙 - 최종매출 합계, 수량 합계, 거래 건수, 평균 할인율을 계산해 KPI에 표시 - 매출액이 비어 있으면 (수량 × 단가)로, 최종매출이 비면 매출액×(1−할인율)로 보정 - 월별: 날짜에서 월을 뽑아 최종매출 합계로 라인 차트 - 지역별/제품군별: 최종매출 합계 내림차순 막대 - 납품상태: 건수 비중 도넛 (완료/처리중/지연/철회 색 구분) - 담당자·거래처: 건수·수량·최종매출 표, 최종매출 내림차순 정렬

③ 파일 업로드 — 엑셀을 직접 읽게

PROMPT 3 · 파일 파싱
# 파일 업로드 기능 상단에 [파일 선택] 버튼을 두고, 사용자가 .xlsx 또는 .csv를 올리면 브라우저 안에서 직접 파싱해 같은 집계 로직으로 즉시 갱신해줘. (서버 전송 없이 클라이언트에서만 처리 — 보안상 데이터가 외부로 안 나가게) - 컬럼명은 유사어도 인식 (예: '최종매출'·'순매출'·'실매출') - 처음 화면에는 내장 샘플 요약을 보여주고, 파일을 올리면 교체 - 잘못된 파일이면 안내 메시지 표시

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

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

부록 · 더 해보기

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

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

MISSION 2지표·차트 추가 지시

"담당자별 목표 대비 달성률을 보여줘", "지역×제품군 매출을 히트맵으로 그려줘"처럼 분석 관점을 추가해 대시보드를 키워 보십시오.

MISSION 3웹에 배포하기

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