2.Term-Project 쉽게 해보기 - ERD, 상관관계 편
•
지난 실습을 통해 라이언이 만든 ERD/상관관계 대시보드 예시
•
위 ERD/상관관계 대시보드를 그래도 따라해보는 방법
◦
Google DocsAdvertising_Data > 사본 만들고 > 각자 드라이브에 저장◦
데이터 시트를 Data_Lake로 변경 (대소문자 정확히)
◦
아래 두 코드로 Apps Script 생성
▪
Code.gs 복사 & 붙여넣기
Code.gs - 펼쳐보기
// ==========================================
// 🚀 통합 분석 센터 (Server: Code.gs) v4.0 - ERD, 상관관계
// ==========================================
// 1. 설정: Gemini API 키 (스크립트 속성에서 가져옴)
const GEMINI_API_KEY = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
const GEMINI_MODEL = 'gemini-2.5-flash';
// 2. 메뉴 생성 (시트 열릴 때 자동 실행)
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('🚀 통합 분석 센터')
.addItem('📊 대시보드 열기', 'showDashboard')
.addToUi();
}
// 3. HTML 대시보드 띄우기
function showDashboard() {
const html = HtmlService.createTemplateFromFile('Dashboard')
.evaluate()
.setTitle('📊 마케팅 데이터 종합 분석')
.setWidth(1200)
.setHeight(900);
SpreadsheetApp.getUi().showModalDialog(html, ' ');
}
// 4. [API] 데이터 전송 함수 (프론트엔드 요청 시 실행)
function getFullData() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const dataSheet = ss.getSheetByName('Data_Lake');
if (!dataSheet) throw new Error("'Data_Lake' 시트가 없습니다.");
const range = dataSheet.getDataRange();
const rawValues = range.getValues();
if (rawValues.length < 2) throw new Error("데이터가 부족합니다. (헤더 포함 2행 이상)");
const headers = rawValues[0];
const rows = rawValues.slice(1).filter(r => r[0] !== "");
// 기초 통계 계산
const stats = calculateBasicStats(headers, rows);
return {
headers: headers,
rows: rows,
stats: stats
};
}
// 5. 기초 통계 계산 로직
function calculateBasicStats(headers, rows) {
let stats = {};
headers.forEach((col, idx) => {
if (typeof rows[0][idx] === 'number') {
let vals = rows.map(r => r[idx]).filter(v => typeof v === 'number');
if (vals.length > 0) {
let mean = vals.reduce((a, b) => a + b, 0) / vals.length;
let sorted = [...vals].sort((a, b) => a - b);
let min = sorted[0];
let max = sorted[sorted.length - 1];
let median = sorted[Math.floor(sorted.length / 2)];
let variance = vals.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / vals.length;
let std = Math.sqrt(variance);
stats[col] = {
mean: mean.toFixed(2),
median: median,
min: min,
max: max,
std: std.toFixed(2),
count: vals.length
};
}
}
});
return stats;
}
// 6. AI 리포트 생성 함수
function askGeminiInsight(mode, contextData) {
if (!GEMINI_API_KEY) return "⚠️ API 키가 설정되지 않았습니다. [프로젝트 설정 > 스크립트 속성]에서 키를 추가하세요.";
const url = `https://generativelanguage.googleapis.com/v1beta/models/${GEMINI_MODEL}:generateContent?key=${GEMINI_API_KEY}`;
// 데이터 길이 제한 (에러 방지)
const dataString = JSON.stringify(contextData).substring(0, 3000);
const prompt = `
데이터 분석가로서 아래 통계 데이터를 보고 핵심을 요약해주세요.
모드: ${mode}
데이터: ${dataString}
[작성 규칙]
1. 서론/결론 제외, 바로 본론 시작.
2. 다음 4가지 관점에서 각각 1~2줄로 요약:
- 분포 특성
- 이상치(Outlier) 존재 여부
- 변수 간 상관관계 핵심
- 판매량(Target) 영향 요인
3. 마크다운 형식으로 작성.
`;
try {
const payload = { contents: [{ parts: [{ text: prompt }] }] };
const options = { method: 'post', contentType: 'application/json', payload: JSON.stringify(payload), muteHttpExceptions: true };
const response = UrlFetchApp.fetch(url, options);
const json = JSON.parse(response.getContentText());
if (json.error) return "AI 오류: " + json.error.message;
return json.candidates[0].content.parts[0].text;
} catch (e) { return "AI 호출 실패: " + e.toString(); }
}▪
Dashboard.html 생성 > 복사 & 붙여넣기
Dashboard.html - 펼쳐보기
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/@sgratzl/chartjs-chart-boxplot@3.6.0/build/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; background: #f3f4f6; padding: 20px; color: #1f2937; margin: 0; }
/* 헤더 */
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
h1 { margin: 0; font-size: 1.5rem; color: #111827; }
/* 탭 메뉴 */
.tabs { display: flex; gap: 10px; margin-bottom: 20px; background: white; padding: 8px; border-radius: 12px; }
.tab-btn { flex: 1; padding: 12px; border: none; background: transparent; cursor: pointer; font-weight: 600; color: #6b7280; border-radius: 8px; transition: 0.2s; }
.tab-btn:hover { background: #f9fafb; }
.tab-btn.active { background: #3b82f6; color: white; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5); }
/* 컨텐츠 섹션 */
.view-section { display: none; }
.view-section.active { display: block; }
.section-title { font-size: 1.2rem; font-weight: 800; margin: 30px 0 15px 0; border-left: 5px solid #3b82f6; padding-left: 10px; color: #1f2937; }
.card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; position: relative; }
/* 차트 그리드 */
.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.chart-box { height: 250px; position: relative; }
/* 다운로드 버튼 */
.download-btn {
position: absolute; top: 10px; right: 10px;
background: white; border: 1px solid #e5e7eb; border-radius: 6px;
padding: 4px 8px; font-size: 0.75rem; cursor: pointer; color: #6b7280;
z-index: 10;
}
.download-btn:hover { background: #f3f4f6; color: #3b82f6; }
/* 히트맵 테이블 */
.heatmap-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; text-align: center; }
.heatmap-table th, .heatmap-table td { padding: 8px; border: 1px solid #eee; }
.heatmap-table th { background: #f9fafb; font-weight: 600; }
/* AI 박스 */
.ai-box { background: #eff6ff; border: 1px solid #bfdbfe; padding: 20px; border-radius: 12px; line-height: 1.6; margin-bottom: 20px; }
.ai-header { font-weight: bold; color: #1e40af; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
/* 로딩 */
#loading { display: none; text-align: center; padding: 50px; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* 도움말 탭 스타일 */
.guide-box { background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 15px; border-left: 4px solid #10b981; }
.guide-title { font-weight: bold; font-size: 1.1rem; color: #059669; margin-bottom: 5px; }
</style>
</head>
<body>
<header>
<h1>🚀 마케팅 데이터 종합 분석</h1>
<div style="font-size:0.8rem; color:#6b7280;">Live Connected</div>
</header>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('basic')">📋 기초 통계 (종합)</button>
<button class="tab-btn" onclick="switchTab('guide')">📘 분석 가이드 (Help)</button>
</div>
<div id="loading">
<div class="spinner"></div>
<p style="margin-top:10px; color:#6b7280;">데이터를 분석하고 차트를 생성 중입니다...</p>
</div>
<div id="view-basic" class="view-section">
<div class="card">
<div class="ai-box">
<div class="ai-header">🤖 AI 데이터 인사이트</div>
<div id="ai-basic-report">분석 중...</div>
</div>
</div>
<div class="section-title">1. 데이터 분포 (Distributions)</div>
<div class="chart-grid" id="dist-grid"></div>
<div class="section-title">2. 이상치 확인 (Boxplots)</div>
<div class="chart-grid" id="box-grid"></div>
<div class="section-title">3. 판매량과의 관계 (Scatter vs Product_Sold)</div>
<div class="chart-grid" id="scatter-grid"></div>
<div class="section-title">4. 상관관계 히트맵 (Correlation Matrix)</div>
<div class="card" style="overflow-x:auto;">
<table class="heatmap-table" id="heatmap-table"></table>
</div>
</div>
<div id="view-guide" class="view-section">
<div class="guide-box">
<div class="guide-title">📊 히스토그램 (Histogram)</div>
<p>데이터가 어디에 많이 몰려있는지 보여줍니다. 막대가 높은 구간이 가장 흔한 값입니다. 만약 한쪽으로 치우쳐 있다면(비대칭), 평균값 사용에 주의해야 합니다.</p>
</div>
<div class="guide-box">
<div class="guide-title">📦 박스 플롯 (Box Plot)</div>
<p>데이터의 퍼짐 정도와 '이상치(Outlier)'를 찾습니다. 박스 위아래에 점이 찍혀 있다면, 다른 값들과 동떨어진 특이한 데이터가 있다는 뜻입니다.</p>
</div>
<div class="guide-box">
<div class="guide-title">📉 산점도 (Scatter Plot)</div>
<p>두 변수의 관계를 점으로 찍어 보여줍니다. 점들이 우상향하면 '양의 상관관계(비례)', 우하향하면 '음의 상관관계(반비례)'입니다. 점들이 뭉쳐있을수록 관계가 강합니다.</p>
</div>
<div class="guide-box">
<div class="guide-title">🔗 상관계수 (Correlation Coefficient)</div>
<p><strong>+1에 가까울수록:</strong> 아주 강한 양의 관계 (하나가 늘면 다른 것도 확실히 늠)<br>
<strong>0에 가까울수록:</strong> 관계 없음<br>
<strong>-1에 가까울수록:</strong> 아주 강한 음의 관계 (하나가 늘면 다른 건 줄어듦)</p>
</div>
</div>
<script>
let globalData = null;
// 초기 로딩
window.onload = function() {
document.getElementById('loading').style.display = 'block';
google.script.run.withSuccessHandler(initDashboard).getFullData();
};
function initDashboard(data) {
globalData = data;
document.getElementById('loading').style.display = 'none';
switchTab('basic');
}
function switchTab(tabName) {
document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active'));
document.getElementById('view-' + tabName).classList.add('active');
document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
event.target.classList.add('active');
if (tabName === 'basic') renderBasicAnalysis();
}
// === 종합 분석 렌더링 ===
function renderBasicAnalysis() {
const headers = globalData.headers;
const rows = globalData.rows;
const numericHeaders = headers.filter(h => globalData.stats[h]);
const targetVar = 'Product_Sold';
callAI('EDA_SUMMARY', globalData.stats, 'ai-basic-report');
// 1. 분포 (Histograms)
const distGrid = document.getElementById('dist-grid');
distGrid.innerHTML = '';
numericHeaders.forEach(col => {
const div = createChartCard(`dist-${col}`);
distGrid.appendChild(div);
const vals = rows.map(r => r[headers.indexOf(col)]);
drawHistogram(`dist-${col}`, vals, col);
});
// 2. 이상치 (Boxplots)
const boxGrid = document.getElementById('box-grid');
boxGrid.innerHTML = '';
numericHeaders.forEach(col => {
const div = createChartCard(`box-${col}`);
boxGrid.appendChild(div);
const vals = rows.map(r => r[headers.indexOf(col)]);
drawBoxplot(`box-${col}`, vals, col);
});
// 3. 산점도 (Scatter)
const scatterGrid = document.getElementById('scatter-grid');
scatterGrid.innerHTML = '';
numericHeaders.forEach(col => {
if (col === targetVar) return;
const div = createChartCard(`scat-${col}`);
scatterGrid.appendChild(div);
const xVals = rows.map(r => r[headers.indexOf(col)]);
const yVals = rows.map(r => r[headers.indexOf(targetVar)]);
drawScatter(`scat-${col}`, xVals, yVals, col, targetVar);
});
renderHeatmap(numericHeaders, rows, headers);
}
// 차트 카드 생성 (다운로드 버튼 포함)
function createChartCard(canvasId) {
const div = document.createElement('div');
div.className = 'card chart-box';
div.innerHTML = `
<button class="download-btn" onclick="downloadChart('${canvasId}')">📷 저장</button>
<canvas id="${canvasId}"></canvas>
`;
return div;
}
// 차트 이미지 다운로드 함수
function downloadChart(canvasId) {
const link = document.createElement('a');
link.download = canvasId + '.png';
link.href = document.getElementById(canvasId).toDataURL();
link.click();
}
// --- 차트 그리기 헬퍼 함수들 ---
function drawHistogram(canvasId, data, label) {
const ctx = document.getElementById(canvasId).getContext('2d');
const bins = 10;
const min = Math.min(...data);
const max = Math.max(...data);
const step = (max - min) / bins;
let freq = new Array(bins).fill(0);
let labels = [];
for(let i=0; i<bins; i++) labels.push((min + step*i).toFixed(0));
data.forEach(v => {
let bucket = Math.floor((v - min) / step);
if (bucket >= bins) bucket = bins - 1;
freq[bucket]++;
});
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{ label: label, data: freq, backgroundColor: '#3b82f6', borderRadius: 4 }]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: true, text: label } }, scales: { x: { display: false } } }
});
}
function drawBoxplot(canvasId, data, label) {
const ctx = document.getElementById(canvasId).getContext('2d');
new Chart(ctx, {
type: 'boxplot',
data: {
labels: [label],
datasets: [{ label: label, data: [data], backgroundColor: 'rgba(59, 130, 246, 0.5)', borderColor: '#3b82f6', borderWidth: 1 }]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: true, text: label } } }
});
}
function drawScatter(canvasId, xData, yData, xLabel, yLabel) {
const ctx = document.getElementById(canvasId).getContext('2d');
const points = xData.map((x, i) => ({ x: x, y: yData[i] }));
new Chart(ctx, {
type: 'scatter',
data: { datasets: [{ label: `${xLabel} vs Sales`, data: points, backgroundColor: 'rgba(16, 185, 129, 0.6)', pointRadius: 3 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: true, text: `${xLabel} vs Sales` } }, scales: { x: { display: true, title: {display:false} }, y: { display: false } } }
});
}
function renderHeatmap(vars, rows, allHeaders) {
const table = document.getElementById('heatmap-table');
let html = '<thead><tr><th></th>';
vars.forEach(v => html += `<th>${v}</th>`);
html += '</tr></thead><tbody>';
vars.forEach((v1) => {
html += `<tr><th>${v1}</th>`;
vars.forEach((v2) => {
const val1 = rows.map(r => r[allHeaders.indexOf(v1)]);
const val2 = rows.map(r => r[allHeaders.indexOf(v2)]);
const corr = calculateCorr(val1, val2);
const color = corr > 0 ? `rgba(239, 68, 68, ${corr})` : `rgba(59, 130, 246, ${Math.abs(corr)})`;
const textColor = Math.abs(corr) > 0.5 ? 'white' : 'black';
html += `<td style="background:${color}; color:${textColor}">${corr.toFixed(2)}</td>`;
});
html += '</tr>';
});
html += '</tbody>';
table.innerHTML = html;
}
function calculateCorr(x, y) {
let n = x.length;
let sumX = x.reduce((a, b) => a + b, 0);
let sumY = y.reduce((a, b) => a + b, 0);
let sumXY = x.reduce((s, xi, i) => s + xi * y[i], 0);
let sumX2 = x.reduce((s, xi) => s + xi * xi, 0);
let sumY2 = y.reduce((s, yi) => s + yi * yi, 0);
let num = (n * sumXY) - (sumX * sumY);
let den = Math.sqrt((n * sumX2 - sumX*sumX) * (n * sumY2 - sumY*sumY));
return den === 0 ? 0 : num / den;
}
function callAI(mode, context, elementId) {
google.script.run.withSuccessHandler(text => {
document.getElementById(elementId).innerHTML = marked.parse(text);
}).askGeminiInsight(mode, context);
}
</script>
</body>
</html>[본격적 텀플 Tip] 개별 선정한 Data로 위와 같은 대시보드 구현해보기
1.
선정한 data로 새로운 구글 시트를 하나 만든다
a.
데이터는 100행 정도만 남기는 전처리 추천
2.
AI에게 아래 3가지를 알려주고, 이후 진행 단계를 문의한다.
a.
위 라이언이 만든 Code.gs 붙여넣기 or 파일로 첨부 (파일은 아래)
Code.gs - v3 라이언 버전
b.
위 라이언이 만든 Dashboard.html 붙여넣기 or 파일로 첨부
c.
dataset 구조 : 각자 선정한 data의 정보 - 변수(열)들을 알려준다.
3.
프롬프트 예시
(첨부의) v3 코드를 읽고,
- 어떤 기능을 하는지
- 데이터가 어떻게 흐르는지
- 어떤 화면(UI)과 분석이 구현되어 있는지
를 비전공자도 이해할 수 있게 간단히 설명해 주세요. •
라이언이 만든 앱스스크립트-대시보드에 대해서 AI가 파악한 내용을 결과물로 보여주게 됩니다.
•
여러분들의 데이터로 만들 Dashboard의 레퍼런스 용도로서 AI가 파악하도록 하기 위한 단계입니다. 여러분은 그냥 함 주욱 읽어보기
분석할 데이터를 아래처럼 변경해서 그에 맞는 데이터분석을 진행하고, Dashboard를 만들고 싶어.
어떻게 진행하면 좋을 지 단계별로 알려줘
---
Row ID Order ID Order Date Ship Date Ship Mode Customer ID Customer Name Segment Country City State Postal Code Region Product ID Category Sub-Category Product Name Sales Quantity Discount Profit
1 CA-2013-152156 2013-11-09 2013-11-12 Second Class CG-12520 Claire Gute Consumer United States Henderson Kentucky 42420 South FUR-BO-10001798 Furniture Bookcases Bush Somerset Collection Bookcase 261.96 2 0 41.9136
2 CA-2013-152156 2013-11-09 2013-11-12 Second Class CG-12520 Claire Gute Consumer United States Henderson Kentucky 42420 South FUR-CH-10000454 Furniture Chairs Hon Deluxe Fabric Upholstered Stacking Chairs, Rounded Back 731.94 3 0 219.582
3 CA-2013-138688 2013-06-13 2013-06-17 Second Class DV-13045 Darrin Van Huff Corporate United States Los Angeles California 90036 West OFF-LA-10000240 Office Supplies Labels Self-Adhesive Address Labels for Typewriters by Universal 14.62 2 0 6.8714•
라이언이 만든 Dashboard 코드 파일들을 기반하여, 여러분들이 선정한 데이터로 Dashboard 만들기 위한 방법을 묻는 프롬프트 입니다.
•
여러분들이 선정한 데이터 몇 행(예시-3행) 정도를 프롬프트에 포함해 주세요.
◦
위 데이터 3행은 텀플용도로 제가 추천드렸던 Kaggle의 SuperStore 판매 데이터입니다.
▪
Superstore Sales
•
아래는 Superstore 데이터로 (라이언 버전의) 대시보드를 만들 수 있는 방법에 대해서 GPT가 답한 내용입니다.
•
이 중에 하고 싶은 1~2개의 분석 방법론을 우선 진행하셔서, Dashboard 구조를 만들어 보시면 부담이 쉽고 빠르게 구현이 가능하실 겁니다.
•
이후, 원하시는 다른 분석을 대시보드에 add하는 방법으로 자유롭게 디벨럽하실 수 있을 겁니다.
GPT
아래 표처럼 SuperStore 스타일의 판매 데이터로 분석 대시보드를 바꾸고 싶다면,
지금 있는 v3 구조(데이터 읽기 → 통계 계산 → 차트 생성 → AI 분석)를 그대로 활용하면서
컬럼 구성에 맞게 로직을 조정하면 됩니다.
비전공자도 따라 할 수 있게, 전체 과정을 6단계로 정리해 드릴게요.
✅ 단계별로 어떻게 진행하면 되는가?
1단계. 새로운 데이터 구조(컬럼)를 확정하기
당신이 제공한 데이터는 다음과 같은 주요 특징을 가지고 있습니다:
•
주문 단위 데이터
•
날짜 정보: Order Date, Ship Date
•
고객 정보: Customer ID, Name, Segment
•
지역 정보: Country, City, State, Region
•
제품 정보: Category, Sub-Category, Product Name
•
거래 정보: Sales, Quantity, Discount, Profit
👉 이 데이터는 "판매 분석", "지역 분석", "고객 세그먼트 분석"에 적합합니다.
해야 할 일
•
스프레드시트에 해당 표를 그대로 붙여 넣기
•
첫 행이 반드시 컬럼명이어야 함
2단계. Apps Script에서 변경해야 할 부분 파악하기
기존 v3 코드(현재는 마케팅 데이터 중심)에서는 다음을 자동 추출했습니다:
•
숫자형 컬럼(예: 노출수, 광고비, 클릭수…)
•
목표 컬럼: Product_Sold
그러나 새 데이터에서는 이렇게 바뀝니다:
항목 | 변경 전 | 변경 후 |
목표 분석 컬럼(Target) | Product_Sold | Sales 또는 Profit |
숫자형 컬럼 | 광고 데이터 중심 | Sales, Quantity, Discount, Profit |
시간 분석 가능 | 없음 | Order Date 기반 월별/연도별 분석 가능 |
범주형 분석 | 없음 | Segment, Category, Region 등 가능 |
👉 따라서 getFullData()에서 숫자 컬럼 자동 탐지 → Sales/Profit을 중심으로 분석하도록 조정해야 합니다.
3단계. 어떤 분석을 구현할지 정의하기
SuperStore 데이터에서는 일반적으로 아래 분석이 활용됩니다.
📌 핵심 분석 구성안
① 매출(Sales) & 이익(Profit) 기초 통계
•
평균·최대·최소
•
분포 히스토그램
•
이상치 박스플롯
② 할인(Discount)이 Sales/Profit에 미치는 영향
•
Discount vs Sales 산점도
•
Discount vs Profit 산점도
③ 지역 분석
•
Region별 Sales/Profit 총합
•
State/City별 상위 매출
④ 고객 세그먼트 분석
•
Segment별 매출/이익 비교
•
Customer Lifetime Value(고객별 총매출)
⑤ 제품 분석
•
Category/Sub-Category별 매출
•
베스트셀러 제품 Top N
⑥ 시간 분석
•
월별/연도별 매출 추이(Line Chart)
4단계. Dashboard.html을 어떻게 변경할지
기존 구조는 그대로 두되, 다음을 바꿉니다.
✔ 탭 구성(추천)
📊 기초 통계
🛒 제품 분석
👥 고객 분석
🌍 지역 분석
⏱️ 시간 시계열 분석
🤖 AI 인사이트✔ 시각화 구성 예시
① 기초 통계
•
Sales / Profit 히스토그램
•
Sales / Profit 박스플롯
•
Discount vs Profit 산점도
•
숫자형 컬럼 상관관계 히트맵
② 제품 분석
•
Category별 Sales Bar Chart
•
Sub-Category별 Profit Bar Chart
•
제품별 Top 10 매출 테이블
③ 고객 분석
•
Segment별 매출
•
고객별 총매출 Top 10
④ 지역 분석
•
Region별 매출
•
State별 매출 지도(가능하면 Chart.js Geo 플러그인)
⑤ 시간 분석
•
월별 Sales Line Chart
•
연도별 매출 비교
5단계. Apps Script에서 수정해야 할 핵심 포인트
기존 분석 스크립트에서 아래만 고쳐주면 됩니다.
💡 중요 변경 4가지
1) 숫자형 컬럼 자동 탐지 시 Sales/Profit 포함시키기
const numericCols = ['Sales', 'Quantity', 'Discount', 'Profit'];2) 목표 타깃 선택
Product_Sold 대신:
const targetVar = 'Profit'; // 또는 Sales3) 시간 컬럼 변환
시간 분석을 추가하고 싶다면:
const orderDate = new Date(row[orderDateIndex]);
const year = orderDate.getFullYear();
const month = orderDate.getMonth() + 1;4) AI 분석 요청 변경
AI에게 SuperStore 데이터를 위한 분석 지침 제공:
mode = 'SUPERSTORE_ANALYSIS'6단계. 실제 진행 순서 (체크리스트)
✔ Step 1 — 시트에 새 데이터 올리기
•
첫 행은 반드시 컬럼명
•
날짜는 날짜 형식이어야 함
✔ Step 2 — getFullData() 수정하기
•
숫자 컬럼 목록 갱신
•
Sales, Profit 계산 로직 추가
•
날짜 파싱 추가(선택)
✔ Step 3 — Dashboard.html 레이아웃 확장하기
•
새 탭 추가
•
차트 구성 영역 추가
•
기존 renderBasicAnalysis() → 여러 render 함수로 분리
◦
renderSalesStats()
◦
renderProductAnalysis()
◦
renderCustomerAnalysis() 등
✔ Step 4 — Chart.js로 새 그래프 추가
각 데이터 분석에 맞는 캔버스 자동 생성 함수 작성.
✔ Step 5 — AI 분석 텍스트 생성 로직 변경
Gemini에게 다음과 같이 요청:
•
매출/이익 주요 요인
•
할인 정책 효과
•
지역별 매출 패턴
•
제품 카테고리별 특징
•
비즈니스 인사이트 요약
✔ Step 6 — 점검 & 테스트
•
날짜 처리 오류 확인
•
대량 데이터 처리 속도 확인
•
차트 클릭·다운로드 기능 정상 작동 확인
📌 원하면, 제가 전체 코드(v4 → SuperStore 전용 v5) 로 새로 만들어 드릴 수도 있어요.
⬜ 가능한 지원
•
Apps Script (Code.gs) 전체 수정본 제공
•
Dashboard.html 전체 UI 구성 새로 설계
•
SuperStore용 AI 분석 프롬프트 최적화
•
색상·UI 디자인까지 깔끔하게 정리
원하시는 방식은 어떤가요?
1) 완전히 새로운 v5 코드 전체 생성
2) 기존 v3 코드에서 필요한 부분만 수정
3) 기능 추가(시간 분석, 지역별 지도 등)
4) UI 디자인 리뉴얼(더 세련된 Dashboard)
원하시는 옵션을 번호로 알려주시면 바로 작업 들어갈게요!
•
AI와 티키타카 진행
예시. 기초통계 하나만 우선 진행하고 싶어.
Contact : azureguy@empal.com / azureguy@cau.ac.kr