1.Term-Project 진행 Flow 가이드 및 실습
1. 프로젝트 목표 (Objective)
Google Sheets + Apps Script + Gemini API를 활용하여
마케팅 데이터를 자동 분석하고 인사이트를 제공하는 대시보드 구축을 목표로 한다.
마케팅 데이터를 자동 분석하고 인사이트를 제공하는 대시보드 구축을 목표로 한다.
이 대시보드는
•
EDA(기초 분석)
•
상관관계 탐색
•
간단 회귀/군집 분석
•
마케팅 인사이트 자동 생성
등을 포함하여,
초보자도 수행 가능하고 실무적 흐름을 경험할 수 있는 수준으로 설계한다.
등을 포함하여,
초보자도 수행 가능하고 실무적 흐름을 경험할 수 있는 수준으로 설계한다.
2. 데이터셋 (Dataset) 선택
선택: Superstore Sales Dataset 이나 개인별 분석을 원하는 데이터셋
(단일 테이블 구조, 마케팅 분석 적용 용이, Google Sheets에 적합)
주요 특징
•
Category, Subcategory
•
Region, Segment
•
Sales, Profit
•
Discount, Quantity
데이터 전처리는 최소화하여 진행하고,
구축을 위해서 약 100~300행 샘플을 Google Sheets에 업로드한다.
(구축 후, 전체 데이터 추가 업로드. 10,000행 넘어가면 시간 많이 걸리거나 down가능)
3. 전체 작업 흐름(Workflow Overview)
1) 데이터셋 선택 및 샘플링
2) Google Sheets에 업로드
3) 기본 EDA 수행 (학생 + Gemini 보조)
4) 분석 범위 확정 (상관관계/회귀/군집 중 선택)
5) Apps Script 대시보드 설계
6) Gemini API 연결
7) 분석 기능(EDA, 상관관계, 인사이트 생성) 구현
8) 대시보드 완성
9) 최종 마케팅 인사이트 보고서 도출4. 프로젝트 구성 요소 (Components)
4-1. 데이터 시트 구성
•
소스 데이터가 있는 시트
•
전처리가 된 데이터 시트(학생에 따라 필요시)
•
분석 요청 시 Apps Script가 Sheets에서 데이터를 읽어 분석 진행토록 함.
4-2. 프로젝트 산출물 (Deliverables) - 아래 예시
1.
Google Sheets 데이터
2.
Apps Script 코드
3.
HTML 대시보드
4.
AI(Gemini API) 기반 분석 기능
5.
최종 마케팅 인사이트 요약 보고서 (5~10개 인사이트)
5. 진행 단계 로드맵 (Phase Plan)
Phase 1 — 데이터 준비
•
Kaggle dataset 다운로드
•
100-300행 샘플링하여 Google Sheets로 업로드
•
데이터 이해 및 변수 설명 정리
Phase 2 — 간단 EDA
•
기초 통계
•
카테고리/지역/세그먼트별 패턴 탐색
•
학생이 직접 EDA + Gemini에게 추가 보조 EDA 요청
Phase 3 — 대시보드 기획
•
화면 구성 요소 스케치
•
버튼/입력UI 확정
•
Apps Script 함수 맵핑
Phase 4 — 기본 기능 구현
•
EDA
•
상관분석
•
LLM 기반 인사이트 기능 구현
Phase 5 — 고급 분석 추가(선택)
•
회귀
•
군집
•
A/B 비교
Phase 6 — 최종 보고서 제작
•
인사이트 정리
•
액션 아이디어 제시
•
대시보드 스크린샷 포함
🎓 [실습 가이드 1단계] Apps Script 프로젝트 생성 및 기본 설정
1️⃣ 구글 시트 준비
1.
2.
좌측 상단 제목을 마케팅 분석 대시보드 실습으로 변경합니다.
3.
시트 하단의 탭 이름을 Data_Lake로 변경합니다. (대소문자 정확히)
2️⃣ 데이터 준비 (실습용)
•
•
데이터 시트를 Data_Lake로 변경 (대소문자 정확히)
•
실습 데이터
텀플용 데이터
•
몇 천행을 넘어가는 데이터는 토큰 제한으로 AI가 버거워할 수 있음
•
따라서, 대시보드 구축할 때에는 100-300행 정도의 데이터로 축소시켜서 진행토록 함
3️⃣ Apps Script 열기
1.
상단 메뉴에서 [확장 프로그램] [Apps Script]를 클릭합니다.
2.
새 탭이 열리면 프로젝트 제목을 Marketing Dashboard App으로 변경합니다.
프로젝트 설정 > 스크립트 속성 에 개인별 Gemini API 키를 입력하고 저장하세요.
🎓 [실습 가이드 2단계] 서버 코드 (Code.gs) 작성
•
데이터를 처리하고 HTML 화면을 띄워줄 서버 코드를 작성합니다.
•
기존에 있는 코드를 모두 지우고, 아래 코드를 복사 & 붙여넣기
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(); }
}🎓 [실습 가이드 3단계] 대시보드 화면 (Dashboard.html) 구현
•
사용자가 실제로 보게 될 **화면(Frontend)**을 구현
•
이 코드에는 Chart.js(차트 그리기), 이미지 다운로드 기능, 그리고 초보자를 위한 통계 가이드가 모두 포함
1️⃣ HTML 파일 생성
◦
Apps Script 편집기 왼쪽 파일 목록에서 + (파일 추가) 버튼을 클릭
◦
HTML을 선택하고, 파일 이름을 Dashboard로 입력(확장자 .html은 자동 입력됨)
•
기존 코드를 모두 지우고, 아래 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>•
시트 사용 방법
◦
메뉴에서 🚀 통합 분석 센터 > 📊대시보드 열기 클릭
◦
📋 기초 통계 (종합) 클릭
◦
팝업(modal) 형태로 대시보드 생성
▪
인사이트 확인 및 이미지 저장 기능과 마우스 오버 인터렉티브 기능 등 확인
개인별로 시작하는 Prompt 가이드
•
위와 같은 결과물을 위해서 라이언도 아주 간단한 프롬프트로 시작했어요.
•
아래와 같이 본인들의 데이터를 가지고 시작해 보세요.
◦
다양한(?) 티키타카가 필요합니다.
•
Gemini 3.0이 아주 영리해져서 Gemini Pro 사용하시는 분은 Gemini 사용도 같이 추천드립니다.
◦
같은 구글 생태계라서 오히려 더 좋은 케미가 있어요
◦
ChatGPT와 Gemini를 교차로 사용해 보시면 일이 줄어 드는 경험을 하실 수~~~ ^^
첨부의 구글 시트 파일을 소스로 Gemini API를 통해 데이터 분석을 진행하는 Apps Script와 Dashboard를 만들려고 해.
일단 EDA 분석만 진행한다고 할때, 어떤 분석들을 진행하고 시각화할 수 있을까?GPT
EDA(탐색적 데이터 분석)를 진행할 때, 데이터의 구조를 파악하고 변수 간의 관계를 이해하기 위해 다음과 같은 단계별 분석과 시각화를 진행할 수 있습니다.
1 기초 통계 분석 (Descriptive Statistics)
데이터의 전반적인 분포와 중심 경향성을 확인합니다.
•
분석 내용: 평균, 표준편차, 최소값, 최대값, 4분위수 등을 확인합니다.
•
결과 요약:
◦
데이터 개수: 300개
◦
각 광고 매체의 평균 지출액은 약 460520 수준입니다.
◦
Product_Sold(판매량)의 평균은 약 7,031건입니다.
2 단변량 분석 (Univariate Analysis)
각 변수가 개별적으로 어떤 분포를 가지는지 확인합니다.
•
히스토그램 (Histogram) & KDE Plot: 각 변수의 데이터가 정규분포를 따르는지, 치우침이 있는지 확인합니다.
[Image of histograms showing distributions of ad spend]
•
박스 플롯 (Boxplot): 데이터의 이상치(Outlier)가 존재하는지 확인합니다.
[Image of boxplots for detecting outliers]
3 이변량 분석 (Bivariate Analysis)
광고비 지출과 판매량 간의 관계를 파악합니다.
•
산점도 (Scatter Plot): 각 광고 채널(TV, Billboards 등)과 Product_Sold 간의 관계를 점으로 찍어 선형 관계가 있는지 확인합니다.
◦
대부분의 변수가 판매량과 양의 상관관계를 보이는 것으로 나타납니다.
4 다변량 분석 (Multivariate Analysis)
변수들 간의 상관관계를 종합적으로 파악합니다.
•
상관관계 히트맵 (Correlation Heatmap): 변수 간의 피어슨 상관계수를 색상으로 표현하여 어떤 채널이 판매량과 가장 강한 관계가 있는지 한눈에 파악합니다.
•
아래와 같은 티키타카 개인별로 진행 with AI
이 시각화 결과물들을 apps script를 통해서 깔끔하고 멋진 대시보드 html로 구현하고 싶어.
어떻게 구조화하면 될까?마우스를 올리면 숫자가 뜨는(Hover) 애니메이션 차트를 구현해주고,
반응형 레이아웃를 사용해서 창 크기에 따라 배치가 예쁘고 적절하게 바뀔 수 있게 해줘.
사용자 경험(UX)을 위해서 엑셀 시트를 스크롤할 필요 없이, 앱처럼 탭 버튼만 누르면 화면이 즉시 전환되면 좋겠어.
html은 팝업(modal) 방식으로 일단 구현하자.Dashboard를 기획하는 가장 효율적인 방법
가장 좋은 방법 :
- "맘에 드는 대시보드 화면을 캡쳐해서 '이렇게 구성해줘'라고 프롬프팅하기"
- "맘에 드는 대시보드 화면을 캡쳐해서 '이렇게 구성해줘'라고 프롬프팅하기"
손 스케치도 가능:
- 예쁜 디자인이 없어도 무방
- A4 용지에 네모, 동그라미로 "여기엔 차트, 여기엔 버튼" 이라고 그려서 사진 찍어 올려도 코드로 짜줌. (이게 진짜 마법!)
- 예쁜 디자인이 없어도 무방
- A4 용지에 네모, 동그라미로 "여기엔 차트, 여기엔 버튼" 이라고 그려서 사진 찍어 올려도 코드로 짜줌. (이게 진짜 마법!)
[ 📸 이미지와 함께 입력하는 메시지 예시 ]
[목표] 첨부한 이미지의 레이아웃과 디자인 스타일을 참고하여, 나의 Dashboard.html 코드를 작성해 주세요.
[디자인 요구사항 예시]
레이아웃: 이미지처럼 좌측 메뉴바 / 상단 카드 / 중앙 차트 배치를 잡아주세요. (이미지에 따라 변경)
색감: 이미지에 사용된 **메인 컬러(파란색 계열 등)**와 폰트 스타일을 비슷하게 적용해 주세요.
반응형: 화면 크기에 따라 배치가 자연스럽게 바뀌도록 해주세요.
[기능 제약 조건 (필수)] 단, 디자인은 이미지를 따르되 기능 구현은 아래 규칙을 지켜야 합니다.
차트는 이미지 그림 대신 Chart.js 라이브러리를 사용해서 구현해주세요.
•
태블로 공유 페이지
◦
다른 사람들이 작업한 태블로 대시보드를 레퍼런스로 삼아서 AI에게 이런 스타일과 구성으로 작업하고 싶다고 얘기하기
대시보드(html) 팝업(modal)으로 우선 구현하기
•
위 라이언의 예시 대시보드는 팝업(modal, 모달) 방식으로 구현되었어요.
•
지난 번에 실습했던 독립된 URL 페이지를 생성하는 웹앱 방식은 코드를 수정할 때마다, 배포를 계속해야 하는 번거로움이 있습니다.
•
팝업(모달) 방식은 코드 수정하고, 페이지 새로고침(F5)만 하면 바로 수정 결과를 팝업으로 확인할 수 있어서, 배포의 번거로움이 없어집니다.
•
팝업(모달) 방식을 위해 아래와 같은 프롬프트 포함하면 됩니다.
html은 팝업(modal) 방식으로 구현해줘•
웹앱을 구현하고 싶으신 분은 팝업으로 개발이 완료된 이후에, 코드를 웹앱으로 변경해 달라고 하면 큰 어려움없이 변경해 줍니다.
단, 변환시에 코드 백업은 꼭 먼저하고, 웹앱 변환 진행!!!
대시보드 작업 중에도 백업 작업 진행해두는 것 추천 (시트 사본을 만들기 or 코드 백업)
구분 | 팝업 (Modal Dialog) | 웹앱 (Web App) |
장점 | "1. 데이터 연동 최적화: 현재 열린 시트 데이터를 즉시 가져올 수 있음. | "1. 전문성(UX): 독립된 URL이 생성되어 진짜 SaaS 소프트웨어처럼 보임 (전체 화면 활용). |
2. 개발 속도: 코드를 저장만 하면 바로 실행 가능 (배포 과정 없음). | 2. 모바일 지원: 스마트폰 브라우저에서도 깔끔하게 볼 수 있음. | |
3. 접근성: 시트 메뉴에서 바로 실행하므로 작업 흐름이 끊기지 않음." | 3. 독립성: 시트를 켜지 않고도 링크만으로 접속하여 데이터 확인 가능." | |
단점 | "1. 화면 제약: 구글 시트 위의 작은 창(Iframe)으로만 떠서 답답할 수 있음. | "1. 연동 복잡성: getActiveSpreadsheet() 사용 불가 (특정 시트 ID를 코드에 고정해야 함). |
2. 휘발성: 창을 닫거나 새로고침하면 모든 상태가 초기화됨. | 2. 배포 번거로움: 코드를 수정할 때마다 **[새 버전 배포]**를 눌러야 사용자에게 반영됨. | |
3. 모바일 불가: 모바일 구글 시트 앱에서는 작동하지 않음." | 3. 권한 설정: 사용자 접근 권한 처리가 조금 더 까다로울 수 있음." |
라이언의 예시 대시보드 구현을 위한 통합 Prompt (펼쳐보기)
**[당신의 역할]**
당신은 데이터 시각화와 웹 개발 능력을 갖춘 **'스마트 연구 보조원'**입니다.
제가 가진 데이터를 분석해서, 연구 논문에 활용할 수 있는 수준의 **'웹 대시보드'**를 만들어 주세요.
**1. [내가 원하는 도구: 무엇을 만드나요?]**
구글 시트에 있는 데이터를 가져와서, 웹 브라우저 팝업창에서 바로 볼 수 있는 **'마케팅 분석 리포트 시스템'**을 구축해 주세요.
`Code.gs`(서버)와 `Dashboard.html`(화면) 두 개의 코드를 작성해 주면 됩니다.
* **기능 1 (화면 구성):**
* 상단에는 `[📋 기초 통계 분석]`, `[📘 분석 가이드]` 두 개의 탭을 만들어 주세요.
* 데이터를 불러오는 동안에는 "분석 중입니다..."라는 로딩 표시를 띄워주세요.
* **기능 2 (기초 통계 탭 - 핵심!):**
* 화면 맨 위에는 **'AI 연구 요약'** 박스를 만들어서, 데이터의 핵심 내용을 글로 정리해 주세요.
* 그 아래에는 **4가지 핵심 분석 차트**를 바둑판 모양(그리드)으로 배치해 주세요.
* ① 데이터 분포 (히스토그램)
* ② 이상치 탐색 (박스 플롯)
* ③ 상관관계 분석 (산점도)
* ④ 상관계수 표 (히트맵)
* **중요:** 논문에 바로 쓸 수 있도록, 각 차트 옆에 **[📷 이미지 저장]** 버튼을 꼭 만들어 주세요.
* **기능 3 (분석 가이드 탭):**
* 통계가 낯선 사람들을 위해 '히스토그램', '박스 플롯' 등이 무엇인지 설명해 주는 도움말 페이지를 만들어 주세요.
**2. [데이터 설명: 어떤 데이터를 쓰나요?]**
* 데이터는 `Data_Lake`라는 시트에 있습니다.
* 첫 번째 줄은 제목(변수명)이고, 두 번째 줄부터 실제 데이터입니다.
* **변수 정보:**
* `TV`, `Billboards`, `Google_Ads` 등 광고비 변수 (숫자)
* `Product_Sold` (판매량, 숫자)
* `Group` (실험군/대조군 구분, 문자 A/B)
**3. [제작 규칙: 이렇게 만들어 주세요]**
* html은 팝업(modal) 방식으로 구현해 주세요.
* 차트는 예쁘고 반응이 빠른 `Chart.js` 라이브러리를 사용해 주세요.
* 디자인은 깔끔하고 현대적인 스타일(CSS Flexbox 활용)로 해주세요.
* AI 기능을 쓸 때 필요한 'API 키'는 코드에 직접 적지 말고, 안전하게 설정(PropertiesService)에서 불러오도록 해주세요.
* 만약 데이터가 없거나 오류가 나면, 그냥 멈추지 말고 "데이터를 확인해 주세요"라고 친절하게 알려주세요.
Contact : azureguy@empal.com / azureguy@cau.ac.kr