/* Workflow — 4-step linear wizard for media planners Step 1: 시작 (brand name OR seed leaf) Step 2: AI 분석 (animated) Step 3: 결과 확인 (KPI + recommended personas + 3D map mini) Step 4: 실행 가이드 (GFA settings export) */ const { useState: useWFState, useEffect: useWFEffect, useMemo: useWFMemo } = React; /* ── 결과 스냅샷 폴백: HTML 스냅샷을 새 탭(인쇄/PDF) 또는 파일 다운로드 ── html2canvas가 oklch 색상 파싱에 실패하거나(특히 iOS) 미가용일 때 공통 호출. 화면 그대로의 DOM을 클론해 인라인 스타일과 함께 새 탭으로 띄워 Cmd/Ctrl+P 저장 가능. */ function gfaSnapshotExport(el, label, btnEl) { if (!el) return; if (btnEl) { btnEl.textContent = '여는 중…'; btnEl.disabled = true; } try { let cssText = ''; try { cssText = Array.from(document.styleSheets).map(sheet => { try { return Array.from(sheet.cssRules || []).map(r => r.cssText).join('\n'); } catch (e) { return ''; } }).join('\n'); } catch (_) {} const clone = el.cloneNode(true); clone.querySelectorAll('.no-print, .wf-result-actions').forEach(e => e.remove()); const safe = String(label || 'GFA').replace(/\s+/g, '_'); const snapshotHtml = ` GFA 결과 — ${label}
결과 스냅샷 — ${label}
${clone.outerHTML}
페르소나 매트릭스 · 결과 스냅샷 · ${new Date().toLocaleString('ko-KR')}   |   상단 버튼 또는 Ctrl/Cmd+P 로 PDF 저장
`; const blob = new Blob([snapshotHtml], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const win = window.open(url, '_blank'); if (!win) { // 팝업 차단(iOS Safari 흔함) → HTML 파일로 다운로드 const a = document.createElement('a'); a.href = url; a.download = `GFA_결과_${safe}.html`; document.body.appendChild(a); a.click(); a.remove(); } setTimeout(() => URL.revokeObjectURL(url), 20000); } catch (err) { console.error('스냅샷 실패:', err); alert('내보내기에 실패했습니다. 브라우저 팝업 차단을 해제한 뒤 다시 시도하거나, 화면을 스크린샷으로 저장해 주세요.'); } finally { if (btnEl) { btnEl.textContent = '⬇ PNG·PDF 저장'; btnEl.disabled = false; } } } function Workflow({ onGotoAdvanced, taxonomy }) { const [step, setStep] = useWFState(1); const [input, setInput] = useWFState({ brand: '', category: '', seed: null, keywords: '', }); const [analysis, setAnalysis] = useWFState(null); const [analyzing, setAnalyzing] = useWFState(false); const [progress, setProgress] = useWFState({ phase: '', pct: 0 }); const [chosenPersona, setChosenPersona] = useWFState(null); // AI 어시스턴트 컨텍스트 발행 — analysis/선택 변화에 반응(신규 분석·localStorage 복원 모두 커버) useWFEffect(() => { if (!analysis) { window.__gfaContext = null; return; } try { const chosen = (analysis.personas || []).find(p => p.id === chosenPersona) || (analysis.personas || [])[0]; window.__gfaContext = { label: analysis.label, archetype: analysis.archetype && analysis.archetype.label, measured: !!analysis.measuredProfile, confidence: analysis.confidence, awareness: analysis.mode === 'brand' && !analysis.measuredProfile && !analysis.salesProfile ? '저인지' : undefined, personas: (analysis.personas || []).map(p => ({ name: p.name, tier: p.tier, reach: p.result ? (window.SimEngine?.fmtN?.(p.result.finalReach) || p.result.finalReach) : '-', fit: p.result ? (p.result.conversionFitness || 0) : '-', })), chosen: chosen && chosen.name, }; } catch (e) {} }, [analysis, chosenPersona]); async function runAnalysis(override) { if (override) setInput(override); setStep(2); setAnalyzing(true); const phases = [ { p: '브랜드 컨텍스트 파싱', pct: 14 }, { p: '560종 카테고리 매칭', pct: 32 }, { p: '시드 기반 최적 조합 계산', pct: 56 }, { p: '시뮬레이션 매트릭스 생성', pct: 78 }, { p: '페르소나 결과 통합', pct: 100 }, ]; for (const ph of phases) { setProgress(ph); await new Promise(r => setTimeout(r, 550 + Math.random() * 300)); } // Generate const result = runAnalysisCompute(override || input); setAnalysis(result); try { recordCategoryPrediction(result, override || input); } catch (e) {} // Improve-2: 예측-실측 대사 로그(비차단·best-effort) setAnalyzing(false); setChosenPersona(result.personas[0]?.id || null); setStep(3); } function reset() { setInput({ brand: '', category: '', seed: null, keywords: '' }); setAnalysis(null); setChosenPersona(null); setStep(1); } return (
analysis && n <= 3 && setStep(n)} onAdvanced={onGotoAdvanced} />
{step === 1 && } {step === 2 && } {step === 3 && analysis && ( setStep(4)} onReset={reset} /> )} {step === 4 && analysis && ( setStep(3)} onReset={reset} /> )}
); } /* === Steps progress bar === */ function WFTopBar({ step, onJump, onAdvanced }) { const steps = [ { n: 1, label: '시작', sub: '브랜드 또는 시드 입력' }, { n: 2, label: 'AI 분석', sub: '자동 페르소나 생성' }, { n: 3, label: '결과 확인', sub: '매트릭스 + 추천' }, { n: 4, label: '실행 가이드', sub: 'GFA 설정 적용' }, ]; return (
{steps.map((s, i) => (
s.n ? ' is-done' : '')} onClick={() => onJump?.(s.n)}>
{step > s.n ? '✓' : s.n}
{s.label}
{s.sub}
{i < steps.length - 1 &&
}
))}
); } /* === Step 1: 시작 === */ /* RawDiagnose — 첫 화면: 관리 브랜드의 GFA RAW 데이터 적재 → 진단 → 내부 DB 저장(표본 자동 환원, 선순환) */ // v3.28: 브랜드사 자체 1st-party 데이터 적재 + 맞춤 시나리오 제안은 첼로 대시보드(브랜드별 // Supabase RLS로 격리된 안전한 파이프라인, persona-profile-lens.ts)에서만 제공한다. // 랩(이 파일)의 "관리 브랜드 진단" 패널은 브라우저 localStorage 공유 저장소라 같은 URL을 // 여는 누구나 다른 브랜드의 적재 데이터를 보고 새로 얹을 수 있어 브랜드 간 데이터 격리를 // 보장하지 못한다 — 그래서 신규 적재 입력은 비활성화하고, 이미 로드된 항목의 조회·삭제(정리)만 남긴다. const RAW_INGEST_ENABLED = false; function RawDiagnose({ onUse }) { const BP = window.BrandProfiles; const [open, setOpen] = useWFState(false); const [f, setF] = useWFState({ brand: '', category: '', keywords: '', competitors: '', female: '', aov: '', repurchase: '', gmvMonthly: '', age: { '20대': '', '30대': '', '40대': '', '50대': '', '60대+': '' } }); const [loaded, setLoaded] = useWFState(() => (BP ? BP.listUserBrands() : [])); const [diag, setDiag] = useWFState(null); const [proxy, setProxy] = useWFState(() => (window.DATALAB_CONFIG && window.DATALAB_CONFIG.proxyUrl) || ''); const [dlMsg, setDlMsg] = useWFState(''); const [metaPrice, setMetaPrice] = useWFState(null); // Firecrawl 추정 가격대 — AOV 자동입력 안 함(옵트인) // v3.28 fix: 자동조회(데이터랩/스마트스토어/Firecrawl)로 채워진 필드인지 사용자가 직접 타이핑한 // 필드인지 구분. 브랜드명을 바꿨는데 자동채움 잔존값이 남아있으면 "타 브랜드 데이터가 새 // 브랜드에 실측(tier-A)으로 잘못 귀속 → localStorage 영구 저장 → reference()로 제3의 브랜드까지 // 오염"되는 심각한 데이터 격리 위반이 발생하므로, 브랜드명 변경 시 자동채움 필드만 초기화한다. const [autoFilled, setAutoFilled] = useWFState({ category: false, keywords: false, competitors: false, female: false, age: false, aov: false }); const set = (k, v) => setF(p => ({ ...p, [k]: v })); const setManual = (k, v) => { setF(p => ({ ...p, [k]: v })); setAutoFilled(a => ({ ...a, [k]: false })); }; const setAge = (k, v) => setF(p => ({ ...p, age: { ...p.age, [k]: v } })); const setAgeManual = (k, v) => { setF(p => ({ ...p, age: { ...p.age, [k]: v } })); setAutoFilled(a => ({ ...a, age: false })); }; function setBrand(v) { setF(p => { const next = { ...p, brand: v }; if (autoFilled.category) next.category = ''; if (autoFilled.keywords) next.keywords = ''; if (autoFilled.competitors) next.competitors = ''; if (autoFilled.female) next.female = ''; if (autoFilled.aov) next.aov = ''; if (autoFilled.age) next.age = { '20대': '', '30대': '', '40대': '', '50대': '', '60대+': '' }; return next; }); setAutoFilled({ category: false, keywords: false, competitors: false, female: false, age: false, aov: false }); } function saveProxy() { if (window.DataLab) { window.DataLab.setProxy(proxy.trim()); setDlMsg(proxy.trim() ? '✓ 데이터랩 연결됨 (실 API)' : '해제됨 (mock 모드)'); } } async function checkHealth() { if (!window.DataLab || !window.DataLab.health) return; setDlMsg('연결 점검 중…'); try { const h = await window.DataLab.health(); if (h.mode === 'mock') { setDlMsg('● mock 모드 — 프록시 URL 저장 시 실 API 점검'); return; } if (h.mode === 'error') { setDlMsg('✗ 연결 실패: ' + (h.reason || '프록시 응답 없음')); return; } const parts = []; parts.push(h.ok ? '✓ 프록시 연결됨 (실 API)' : '△ 프록시 응답 이상'); parts.push('네이버 키 ' + (h.hasNaverKey ? '✓' : '✗')); parts.push('Firecrawl ' + (h.hasFirecrawl ? '✓' : '✗')); setDlMsg(parts.join(' · ')); } catch (e) { setDlMsg('점검 실패: ' + (e.message || e)); } } async function autofill() { if (!window.DataLab) return; const kw = (f.keywords.split(',')[0] || f.brand || '').trim(); if (!kw) { setDlMsg('브랜드명 또는 키워드를 먼저 입력하세요'); return; } setDlMsg('데이터랩 조회 중…'); try { const d = await window.DataLab.demographics({ keyword: kw }); const fem = d.gender ? d.gender.female : null; const age = d.age || {}; setF(p => ({ ...p, female: fem != null ? String(fem) : p.female, age: { ...p.age, '20대': age['20s'] != null ? String(age['20s']) : p.age['20대'], '30대': age['30s'] != null ? String(age['30s']) : p.age['30대'], '40대': age['40s'] != null ? String(age['40s']) : p.age['40대'], '50대': age['50s'] != null ? String(age['50s']) : p.age['50대'], '60대+': age['60s_plus'] != null ? String(age['60s_plus']) : p.age['60대+'], }, })); setAutoFilled(a => ({ ...a, female: true, age: true })); setDlMsg((window.DataLab.isReal() ? '데이터랩 실 API' : '데이터랩 mock') + ' 신호로 채움 — tier B 추정값, 검토·수정 후 적재하세요'); } catch (e) { setDlMsg('조회 실패: ' + (e.message || e)); } } async function detectStore() { if (!window.DataLab) return; const q = (f.brand || f.keywords.split(',')[0] || '').trim(); if (!q) { setDlMsg('브랜드명 또는 키워드를 먼저 입력하세요'); return; } setDlMsg('스마트스토어 탐지 중…'); try { const r = await window.DataLab.shopSearch({ query: q, display: 20 }); const items = r.items || []; if (!items.length) { setDlMsg('상품 없음'); return; } // 키워드·경쟁사·가격은 KeywordEngine.analyzeShopItems로 정제 추출 // (경쟁사는 competitorsFromShop = 채널/셀러/몰 노이즈 제거 + 제목 브랜드 추출 + DF 일반어 판별) const an = (window.KeywordEngine && window.KeywordEngine.analyzeShopItems) ? window.KeywordEngine.analyzeShopItems(items) : null; const cat = (an && an.realCategory) || [items[0].category2, items[0].category3].filter(Boolean).join('/') || items[0].category1 || ''; const kw = an && an.topTerms ? an.topTerms.slice(0, 8).map(t => t.term).join(', ') : [...new Set(items.slice(0, 8).flatMap(i => i.title.split(/\s+/).filter(w => w.length > 1)))].slice(0, 8).join(', '); const comps = an && an.competitors ? an.competitors.join(', ') : ''; const med = an && an.priceMedian != null ? an.priceMedian : (() => { const ps = items.map(i => i.lprice).filter(Boolean).sort((a, b) => a - b); return ps.length ? ps[Math.floor(ps.length / 2)] : ''; })(); // 탐지는 명시적 조회 액션 → 자동파생 필드(카테고리·키워드·경쟁사)는 새 결과 우선(비면 기존 유지). // AOV만 옵트인 유지(p.aov 우선 — 거짓 정밀 방지). setF(p => ({ ...p, category: cat || p.category, keywords: kw || p.keywords, competitors: comps || p.competitors, aov: p.aov || (med ? String(med) : '') })); setAutoFilled(a => ({ ...a, category: cat ? true : a.category, keywords: kw ? true : a.keywords, competitors: comps ? true : a.competitors, aov: (!f.aov && med) ? true : a.aov })); setDlMsg((window.DataLab.isReal() ? '쇼핑 검색 실 API' : '쇼핑 검색 mock') + ` ${items.length}건 — 카테고리·키워드·경쟁사·가격대(중앙값 ₩${med ? med.toLocaleString() : '-'}) 프리필 (tier C 웹 추정)`); } catch (e) { setDlMsg('탐지 실패: ' + (e.message || e)); } } async function fetchMeta() { if (!window.DataLab) return; const b = (f.brand || '').trim(); if (!b) { setDlMsg('브랜드명을 먼저 입력하세요'); return; } setDlMsg('Firecrawl 브랜드 메타 수집 중…'); try { const m = await window.DataLab.brandMeta({ brand: b }); if (m.error) { setDlMsg('메타 실패: ' + m.error); return; } const kw = (m.keywords || []).slice(0, 6).join(', '); const comps = (m.competitors || []).join(', '); // tier C 웹 추정 — 빈 칸만 채우고, 측정값(여성/연령/재구매/AOV)은 건드리지 않음(거짓 정밀 금지) setF(p => ({ ...p, category: p.category || m.category || '', keywords: p.keywords || kw, competitors: p.competitors || comps, })); setAutoFilled(a => ({ ...a, category: (!f.category && m.category) ? true : a.category, keywords: (!f.keywords && kw) ? true : a.keywords, competitors: (!f.competitors && comps) ? true : a.competitors, })); setMetaPrice(m.priceMedian ? { med: m.priceMedian, range: m.priceRange || null } : null); setDlMsg((window.DataLab.isReal() ? 'Firecrawl' : 'Firecrawl mock') + ` 메타 수집 — 카테고리·키워드·경쟁사 초안 (tier C 웹 추정, 측정값 아님${m.sourceUrl ? ' · ' + m.sourceUrl.replace(/^https?:\/\//, '').slice(0, 28) : ''})`); } catch (e) { setDlMsg('메타 실패: ' + (e.message || e)); } } function submit() { if (!BP || !f.brand.trim()) return; const p = BP.buildUserProfile(f); if (!p) return; BP.addUserProfile(p); setLoaded(BP.listUserBrands()); setDiag({ brand: p.meta.brand, lines: BP.diagnose(p), category: p.meta.categoryLabel }); } function useBrand(name) { const p = BP.match(name); if (!p) return; onUse({ brand: p.meta.brand, category: (p.meta.categoryLabel || '').replace(/\s*>\s*/g, '/'), keywords: (p.signatureKeywords || []).slice(0, 6).join(', ') }); } function remove(name) { BP.removeUserProfile(name); setLoaded(BP.listUserBrands()); if (diag && diag.brand === name) setDiag(null); } if (!BP) return null; return (
{open && (
{RAW_INGEST_ENABLED ? ( <>
관리 중인 브랜드의 GFA·스토어 실측값을 적재하면 → 즉시 진단 + 내부 DB 저장. 동일 브랜드 분석엔 실측으로, 동일 카테고리 신규 브랜드엔 표본 prior로 자동 환원됩니다(선순환).
setProxy(e.target.value)} placeholder="데이터랩 프록시 URL (Apps Script 웹앱 주소 · docs/datalab-proxy.gs)" />
{dlMsg &&
{dlMsg}
} {metaPrice && (
추정값 — 실측 AOV 있으면 직접 입력 권장
)}
연령 분포 % (선택) {['20대', '30대', '40대', '50대', '60대+'].map(k => ( ))}
) : (
브랜드 1st-party 데이터 적재와 그 브랜드만을 위한 맞춤 시나리오 제안은 첼로 대시보드의 브랜드별 격리 저장소(Supabase, brand_id 스코핑)에서만 제공됩니다. 이 랩은 같은 화면을 여는 누구나 볼 수 있는 브라우저 저장소를 쓰기 때문에 신규 적재는 지원하지 않습니다. 아래는 이미 적재된 항목의 조회·정리(삭제)만 가능합니다. (현재 첼로는 네이버 SA 연동 브랜드에 한해 광고 노출·ROAS 데이터가 자동 동기화되며, 브랜드가 즉석에서 직접 입력하는 셀프서비스 폼은 아직 없습니다.)
)} {RAW_INGEST_ENABLED && diag && (
✓ {diag.brand} 적재 완료 {diag.category}
{diag.lines.map((l, i) => {l})}
)} {loaded.length > 0 && (
내부 DB 적재 브랜드 (표본 자동 활용)
{loaded.map(n => ( ))}
)}
)}
); } function Step1({ input, setInput, taxonomy, onNext }) { const [pickMode, setPickMode] = useWFState(input.seed ? 'seed' : 'brand'); // brand | seed const allLeaves = useWFMemo(() => window.SimEngine.collectLeaves(taxonomy), [taxonomy]); const [seedSearch, setSeedSearch] = useWFState(''); const [history, setHistory] = useWFState(() => loadBrandHistory()); const [dragIdx, setDragIdx] = useWFState(null); const [mapped, setMapped] = useWFState(false); // 자동 매핑 적용 표시 const [resolving, setResolving] = useWFState(false); // v3.17 라이브 검색(shopSearch) 진행 표시 const [mapMsg, setMapMsg] = useWFState(''); // v3.17 정직 피드백(미매칭/실검색 추정 라벨) // v3.28 fix: 카테고리/키워드가 "자동 채움"인지 "사용자 직접 입력"인지 구분. // 자동채움 상태에서 브랜드명만 바꾸면(onBlur, force=false) 이전 브랜드(예: 사평/식품)의 // 카테고리가 새 브랜드(예: 샥즈)에 남아 매트릭스에 엉뚱한 업종 데이터가 섞이는 오류 방지. const [autoFilled, setAutoFilled] = useWFState({ category: false, keywords: false }); // 브랜드명 → 하위값 자동 매핑 (실측 프로파일 > 검색 기반 사전 > 시노님 추정 > 라이브 shopSearch tier-B) // v3.17: 위저드도 이지/노멀(resolveCategory)과 동일하게 로컬 미스 시 shopSearch 폴백 + 항상 피드백(무반응 제거). async function autoMap(rawName, force) { const name = (rawName || '').trim(); if (!name) return; let cat = '', kw = '', tier = ''; const prof = window.BrandProfiles && window.BrandProfiles.match(name); if (prof) { cat = (prof.meta.categoryLabel || '').replace(/\s*>\s*/g, '/'); kw = (prof.signatureKeywords && prof.signatureKeywords.length) ? prof.signatureKeywords.slice(0, 6).join(', ') : (prof.meta.taxoHints || []).filter(t => t.length > 1).slice(0, 4).join(', '); tier = 'A'; } else if (BRAND_AUTOMAP[name]) { cat = BRAND_AUTOMAP[name].category; kw = BRAND_AUTOMAP[name].keywords; tier = 'dict'; } else { // 시노님 사전에서 이름 토큰이 카테고리 문맥어와 겹치면 추정 const syn = window.SYNONYMS || {}; for (const key in syn) { if (name.includes(key)) { cat = key; kw = syn[key].slice(0, 4).join(', '); tier = 'dict'; break; } } } // v3.17: 로컬 사전 미스 → 라이브 shopSearch(tier-B) 폴백. force(버튼/Enter)에서만 호출 — onBlur는 네트워크 안 침(놀람 방지). if (!cat && !kw && force && window.DataLab && window.DataLab.shopSearch) { setMapMsg(''); setResolving(true); try { const sr = await window.DataLab.shopSearch({ query: name, display: 40 }); const items = (sr && sr.items) || []; if (items.length) { const own = items.find(it => it.brand === name || (it.mallName || '').includes(name)) || items[0]; // 브랜드명 하나(own.brand)만 뽑던 한계 → 고급 detectStore와 동일한 // KeywordEngine.analyzeShopItems 경로로 상품 제목 DF 상위 텀즈(헤나·염색약· // 천연염색약 등 네이버 쇼핑 SERP 핵심 키워드)까지 정제 추출(무중단 가산, tier-B 추정 유지). const an = (window.KeywordEngine && window.KeywordEngine.analyzeShopItems) ? window.KeywordEngine.analyzeShopItems(items) : null; cat = (an && an.realCategory ? an.realCategory.replace(/\s*>\s*/g, '/') : '') || [own.category1, own.category2, own.category3].filter(Boolean).join('/'); kw = (an && an.topTerms && an.topTerms.length) ? an.topTerms.slice(0, 8).map(t => t.term).join(', ') : (own.brand || ''); tier = sr.__source === 'real' ? 'B' : 'B-mock'; } } catch (e) {} setResolving(false); } if (!cat && !kw) { setMapped(false); setMapMsg('미매칭 — 카테고리를 직접 입력해 주세요.'); // 정직: 조용한 무반응 제거 return; } // v3.28 fix: prev.category/keywords가 "이전 브랜드의 자동채움 잔존값"이면(autoFilled=true) 새 결과로 갱신. // 사용자가 직접 타이핑해 넣은 값(autoFilled=false)만 onBlur(force=false)에서 보존한다. setInput(prev => ({ ...prev, category: (cat && (force || autoFilled.category || !prev.category)) ? cat : prev.category, keywords: (kw && (force || autoFilled.keywords || !prev.keywords)) ? kw : prev.keywords, seed: null, })); setAutoFilled(a => ({ category: cat ? true : a.category, keywords: kw ? true : a.keywords, })); setMapped(true); setMapMsg(tier === 'B' ? '실검색 추정(tier-B) — 확인 후 조정하세요.' : tier === 'B-mock' ? '실검색 미연결 — 추정(mock). 확인 후 조정하세요.' : ''); } function persistHistory(h) { setHistory(h); try { localStorage.setItem('gfa-pm-history', JSON.stringify(h)); } catch (e) {} } function pushHistory() { if (pickMode !== 'brand' || !input.brand.trim()) return; const entry = { brand: input.brand.trim(), category: input.category.trim(), keywords: input.keywords.trim(), ts: Date.now() }; persistHistory([entry, ...history.filter(h => h.brand !== entry.brand)].slice(0, 14)); } function loadEntry(h) { setInput({ brand: h.brand, category: h.category, keywords: h.keywords, seed: null }); setMapped(false); setAutoFilled({ category: true, keywords: true }); } function removeEntry(i) { persistHistory(history.filter((_, j) => j !== i)); } function onDropAt(i) { if (dragIdx == null || dragIdx === i) { setDragIdx(null); return; } const arr = [...history]; const [m] = arr.splice(dragIdx, 1); arr.splice(i, 0, m); persistHistory(arr); setDragIdx(null); } function handleNext() { pushHistory(); onNext(); } const filteredLeaves = useWFMemo(() => { if (!seedSearch.trim()) return []; const q = seedSearch.toLowerCase(); return allLeaves.filter(l => l.toLowerCase().includes(q)).slice(0, 30); }, [seedSearch, allLeaves]); const canProceed = pickMode === 'brand' ? !!input.brand.trim() : !!input.seed; return (

광고 페르소나 매트릭스를
3단계로 자동 생성합니다

브랜드명을 입력하거나, 핵심 카테고리 1개만 선택하면 AI가 나머지를 계산합니다.

{pickMode === 'brand' ? (
) : (
{input.seed && (
선택됨: {window.SimEngine.shortLabel(input.seed)}
)} {filteredLeaves.length > 0 && !input.seed && (
{filteredLeaves.map(l => (
{ setInput({ ...input, seed: l }); setSeedSearch(''); }}> {l.startsWith('구매의도') ? '구매의도' : l.startsWith('관심사') ? '관심사' : '모바일'} {l.split(' > ').slice(-3).join(' › ')}
))}
)}
)}
{/* Sample brand chips */} {pickMode === 'brand' && (
또는 샘플 브랜드로 빠른 체험 → {SAMPLE_BRANDS.map(s => ( ))}
)} {/* 입력 이력 — 누적 저장 · 클릭 불러오기 · 드래그 정렬 */} {pickMode === 'brand' && ( { const ni = { brand: d.brand, category: d.category, keywords: d.keywords, seed: null }; setInput(ni); setMapped(true); onNext(ni); }} /> )} {pickMode === 'brand' && history.length > 0 && (
최근 입력 이력 — 클릭하면 불러오기 · 드래그로 정렬
{history.map((h, i) => (
setDragIdx(i)} onDragOver={e => e.preventDefault()} onDrop={() => onDropAt(i)} onDragEnd={() => setDragIdx(null)} onClick={() => loadEntry(h)}> ⠿
{h.brand} {h.category || '업종 미지정'}{h.keywords ? ' · ' + h.keywords : ''}
))}
)}
); } const SAMPLE_BRANDS = [ { name: '라네즈', category: '화장품', keywords: '스킨케어, 수분, 메이크업' }, { name: '토스', category: '핀테크', keywords: '송금, 신용, 투자' }, { name: '마켓컬리', category: '신선식품', keywords: '새벽배송, 식품, 쇼핑' }, { name: '쿠팡플레이', category: '동영상 스트리밍', keywords: '드라마, 영화, OTT' }, ]; // 검색 기반 자동 매핑 사전 — 브랜드명 → 업종/키워드 (실측 프로파일이 없을 때의 추정 출발점) const BRAND_AUTOMAP = { '라네즈': { category: '화장품/스킨케어', keywords: '수분크림, 스킨케어, 메이크업, K뷰티' }, '토스': { category: '핀테크/금융', keywords: '송금, 간편결제, 신용, 투자' }, '마켓컬리': { category: '신선식품/새벽배송', keywords: '신선식품, 새벽배송, 식품, 쇼핑' }, '쿠팡플레이': { category: 'OTT/동영상', keywords: '드라마, 영화, OTT, 스포츠중계' }, '무신사': { category: '패션/의류', keywords: '패션, 스트릿, 남성의류, 스니커즈' }, '올리브영': { category: '헬스앤뷰티', keywords: '화장품, 스킨케어, 뷰티, 헬스' }, '배달의민족': { category: '배달/푸드테크', keywords: '배달, 음식, 외식, 치킨' }, '오늘의집': { category: '홈인테리어', keywords: '인테리어, 가구, 생활용품, 집꾸미기' }, '야놀자': { category: '여행/숙박', keywords: '숙박, 호텔, 여행, 펜션' }, '삼성전자': { category: '가전/디지털', keywords: '스마트폰, 갤럭시, 가전, TV' }, '나이키': { category: '스포츠/패션', keywords: '운동화, 스니커즈, 스포츠웨어, 러닝' }, '스타벅스': { category: '카페/음료', keywords: '커피, 카페, 음료, 디저트' }, }; function loadBrandHistory() { try { return JSON.parse(localStorage.getItem('gfa-pm-history') || '[]'); } catch (e) { return []; } } /* === Step 2: AI 분석 === */ function Step2({ progress }) { return (
{progress.phase}
{progress.pct}%
알고 계셨나요?
{ANALYZE_TIPS[Math.floor(progress.pct / 22)] || ANALYZE_TIPS[4]}
); } const ANALYZE_TIPS = [ '네이버 GFA는 관심사·구매의도 총 560종 카테고리를 합·교집합으로 조합할 수 있습니다.', '시작 카테고리 1개만 있어도 AI가 행동 패턴이 비슷한 인접 카테고리를 자동으로 찾아줍니다.', '관심사(흥미 단계) × 구매의도(전환 단계)를 교집합하면 정밀 타겟이 됩니다.', '도달 인원이 너무 좁으면 OR 확장, 너무 넓으면 AND 결합으로 균형을 잡으세요.', '성별·연령 비해당자 포함 옵션을 활용하면 GFA 데이터 매칭 외 사용자도 도달 가능합니다.', ]; /* === Step 3: 결과 확인 === */ function Step3({ analysis, chosenId, setChosen, onNext, onReset }) { const chosen = analysis.personas.find(p => p.id === chosenId) || analysis.personas[0]; // 방어: 페르소나가 0개면(시노님 미매칭 + 카테고리/키워드 미입력) chosen이 undefined → 크래시 대신 안내. if (!chosen) { return (
분석 대상

{analysis.label}

매칭된 카테고리가 없어 페르소나를 생성하지 못했습니다
○

{analysis.label}의 키워드가 560 카테고리와 매칭되지 않았습니다.

아래 중 하나를 입력하면 페르소나가 생성됩니다 — 카테고리(예: 디지털/가전 > 음향가전), 또는 대표 키워드(예: 골전도 이어폰, 러닝, 수영). ‘스마트스토어 탐지’로 자동 채울 수도 있습니다.

); } return (
분석 대상

{analysis.label}

{analysis.personas.length}개 페르소나 생성 완료 · 적용 가능
{/* v3 의사결정 밴드 (무중단 가산 — 결정 먼저, 근거는 아래) */} {window.DecisionBand && } {/* 브랜드 실측 데이터 연동 패널 (1st-party 데이터 보유 시 — 풀 tier-A 또는 판매/채널/퍼널 부분 실측) */} {(analysis.measuredProfile || analysis.salesProfile) && window.MeasuredProfilePanel && ( )} {/* 표본 참고 추정 패널 (실측 없음 + 동일 카테고리 표본 존재 시 — 렌즈/prior) */} {!analysis.measuredProfile && !analysis.salesProfile && analysis.referenceProfile && window.ReferencePriorPanel && ( )} {/* 콜드스타트 초기 로드맵 (브랜드 모드 + 실측/판매 실측 모두 없음 — 신규/자체몰만 브랜드) */} {analysis.mode === 'brand' && !analysis.measuredProfile && !analysis.salesProfile && window.ColdStartRoadmap && ( )} {/* 공식몰 제품 메타 렌즈 (tier-B) — 성/연령 실측 미적재 브랜드(예: 샥즈) */} {analysis.brandMetaProfile && ( )}
{analysis.personas.map(p => ( setChosen(p.id)} /> ))}
{/* Detail of chosen persona */}

{chosen.name} {chosen.angle}

{window.ProvSummary && window.personaProvenance && ( )} 카테고리 {chosen.query.flatMap(g => g.leaves).length}개 · {chosen.query.map(g => g.op).join('+')}
{chosen.result && (
60 ? 'plant' : 'signal'} hint="입력하신 조건이 카테고리와 얼마나 명확히 맞는지 나타내는 예측 점수입니다. 실제 네이버 데이터와 비교한 결과는 '시장 일치율' 탭에서 확인하세요." /> 65 ? 'plant' : 'signal'} />
)}
); } function PrecisionBanner({ analysis }) { const conf = analysis.confidence || 0; const confTone = conf >= 75 ? 'plant' : conf >= 55 ? 'signal' : 'alert'; const confLabel = conf >= 75 ? '높음' : conf >= 55 ? '보통' : '낮음'; // average confidence of personas const avgPersonaConf = analysis.personas.reduce((s, p) => s + (p.result?.confidence || 0), 0) / Math.max(1, analysis.personas.length); const avgReachLo = analysis.personas.reduce((s, p) => s + (p.result?.reachLo || 0), 0); const avgReachHi = analysis.personas.reduce((s, p) => s + (p.result?.reachHi || 0), 0); return (
카테고리 매칭 정확도
{conf}점 {confLabel}
{analysis.archetype && (
브랜드 유형
{analysis.archetype.label}
{analysis.archetype.target} · 평균 구매금액 {analysis.archetype.aov || 'mid'} 추정
)}
매칭된 카테고리 수
{analysis.scoredLeaves || 0}개
관심사·구매의도 560개 카테고리 중 자동으로 찾아낸 연관 카테고리
예상 도달 범위
{window.SimEngine.fmtN(avgReachLo)} ~ {window.SimEngine.fmtN(avgReachHi)}
오차를 반영한 예상 범위 · 페르소나 평균
분석 방식 키워드 4가지 기준으로 매칭 · 동의어·유사어까지 확장 검색 · 비슷한 관심사끼리 자동으로 묶어서 분석 · 예상 범위는 통계적으로 반복 검증
); } function PersonaTile({ p, active, onClick }) { if (!p.result) return null; const tone = p.tier === 'intent' ? 'plant' : p.tier === 'interest' ? 'signal' : 'cyan'; return (
{p.name}
{p.angle}
{window.SimEngine.fmtN(p.result.finalReach)}명 {p.result.validity}점 {p.result.ctr}%
); } function BigKPI({ label, v, sub, tone, prov, hint }) { return (
{label} {prov && window.ProvBadge && }
{v}{sub}
); } // v3.28 — AI 타겟 일치율 보정(참고) · NVIDIA NIM(Nemotron), tier-C 옵트인·비동기. // 결정론 전환적합도(fitnessParts/naverGenuineScore)를 대체하지 않는다 — 브랜드 맥락 의미적 재해석만 병기. // 키워드 롱테일(keyword-sets-panel.jsx)과 동일 UX 원칙: 수동 트리거, 콜드스타트 실패는 정직 표기. // v3.29 — fitnessParts(6축 세부)·measuredProfile(브랜드 자신의 tier-A 실측, 있으면)을 RAG 근거로 함께 전달. function PersonaFitAI({ brand, leaves, refScore, fitnessParts, measuredProfile }) { const [fit, setFit] = useWFState({ loading: false, score: null, reason: '', note: '', tried: false, grounded: false, groundedEvidence: false }); function request() { if (!brand || !leaves.length || !(window.SimEngine && window.SimEngine.fetchPersonaFit)) return; setFit(f => ({ ...f, loading: true, tried: true })); window.SimEngine.fetchPersonaFit(brand, leaves, refScore, fitnessParts, measuredProfile).then(res => { setFit({ loading: false, score: res.score, reason: res.reason || '', note: res.ok ? '' : (res.note || '생성 실패'), tried: true, grounded: !!res.grounded, groundedEvidence: !!res.groundedEvidence }); }); } if (!brand || !leaves.length) return null; const delta = fit.score != null ? fit.score - (refScore || 0) : null; return (
✦ AI 타겟 일치율 보정 tier-C 참고
{!fit.tried ? ( <>
위 결정론 적합도({refScore || 0}점)를 LLM이 브랜드 맥락에서 다시 해석합니다{measuredProfile ? ' · 이 브랜드의 실측(tier-A) 데이터를 근거로 함께 전달합니다' : ''}. 10~15초 정도 걸리고, 드물게 실패할 수 있습니다.
) : fit.loading ? (
AI 평가 중… (최대 20초)
) : fit.note ? ( <>
평가 실패: {fit.note} — 위 결정론 점수만 사용해도 무방합니다.
) : fit.score == null ? (
평가 결과 없음
) : (
{fit.score}/100 결정론 {refScore || 0}점 대비 {delta >= 0 ? '+' : ''}{delta}
{fit.reason &&

{fit.reason}

}

근거: {fit.groundedEvidence ? '브랜드 실측 데이터 + ' : ''}결정론 6축 세부{!fit.grounded ? ' (실측 없이 카테고리명만으로 추정 — 참고용)' : ''}

)}
); } function PersonaInspector({ chosen, analysisLabel, analysis }) { const [tab, setTab] = useWFState('overview'); const r = chosen.result; const leaves = chosen.query.flatMap(g => g.leaves); function exportJSON() { const payload = { persona: chosen.name, angle: chosen.angle, brand: analysisLabel, query: chosen.query, result: r, categories: leaves, exportedAt: new Date().toISOString(), }; const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${chosen.name.replace(/\s+/g, '_')}.json`; a.click(); URL.revokeObjectURL(url); } function copyShare() { const s = `[${chosen.name}] ${analysisLabel} | 도달 ${window.SimEngine.fmtN(r.finalReach)}명 · CTR ${r.ctr}% · CVR ${r.conv}% · 적합도 ${r.conversionFitness || 0}점 · CPM ₩${r.cpm.toLocaleString()}`; window.safeCopy(s); } const TAB_GROUPS = [ { group: '진단', tabs: [ { id: 'overview', label: '핵심 진단', icon: '◎' }, { id: 'market', label: '시장 일치율', icon: '✓' }, ] }, { group: '키워드', tabs: [ { id: 'keywords', label: '맞춤타겟 키워드', icon: '#' }, ] }, { group: '전략 · 실행', tabs: [ { id: 'sa', label: '매체 매트릭스', icon: '⊞' }, { id: 'sastruct', label: 'SA 캠페인·그룹·소재', icon: '⊟' }, { id: 'integrated', label: 'SA·GFA 통합', icon: '⇄' }, { id: 'roas', label: '입찰·ROAS', icon: '$' }, { id: 'plan', label: '집행 계획', icon: '▶' }, ] }, ]; const TABS = TAB_GROUPS.flatMap(g => g.tabs); return (
{TAB_GROUPS.map(grp => (
{grp.group}
{grp.tabs.map(t => ( ))}
))}
{tab === 'overview' && ( <> {window.TrustPrinciple &&
} {r.fitnessParts && ( {window.CausalPath &&
} )} {r.deviceDist && ( )} {window.TrustBadge &&
— 서술형 해석(비결정). 수치는 위 결정론 계산값 근거.
}

{r.recommendation || generateNarrative(r)}

 )} {tab === 'market' && ( )} {tab === 'keywords' && ( {window.KeywordSetsPanel ? : null} )} {tab === 'scenario' && ( {window.ScenarioStudy ? : null} )} {tab === 'buildup' && ( {window.KeywordBuildup ? : null} )} {tab === 'analytics' && ( {analysis.measuredProfile && window.BrandAnalytics ? :
실측(tier-A) 적재 브랜드에서 풀 대시보드가 열립니다.
스토어센터 통계(성/연령·채널·퍼널·매출)를 적재한 브랜드 — 예: 샥즈·티블레스
} )} {tab === 'sa' && ( {window.MediaMatrixHub ? : (window.SAMatrix ? : null)} )} {tab === 'sastruct' && ( {window.SAStructurePanel ? : null} )} {tab === 'integrated' && ( {window.SynergyPanel ? : null} )} {tab === 'criteo' && ( )} {tab === 'roas' && ( {window.CausalPath &&
} )} {tab === 'insights' && ( {window.NasInsightPanel ? : null} )} {tab === 'plan' && ( <> g.op).join('+')} 결합 — 이 카테고리 축을 SA는 캠페인·그룹·소재 구조 매트릭스로, GFA는 오디언스 세그먼트로 각각 번역`}>
{leaves.map((l, i) => (
{String(i+1).padStart(2,'0')} {l}
))}
  • 입찰: oCPM · 일 예산 {window.SimEngine.fmtKRW(Math.round((r.budget||0)/30))}
  • 주력 시간대: {topTimeLabel(r.timeDist)} 집중 노출
  • 주력 지면: {topPlaceLabel(r.placeNorm)}
  • 경쟁도 {r.compete}점 — {r.compete >= 75 ? 'CPM 한도 보수적 설정' : '입찰 여유 있음'}
 {window.PlaybookPrompts && ( )} )}
); } function Block({ title, hint, children }) { return (
{title} {hint && {hint}}
{children}
); } function topTimeLabel(timeDist) { if (!timeDist) return '저녁(18-24)'; const labels = ['새벽(00-06)', '아침(06-12)', '낮(12-18)', '저녁(18-24)']; let max = -1, idx = 3; timeDist.forEach((v, i) => { if (v > max) { max = v; idx = i; } }); return labels[idx]; } function topPlaceLabel(placeNorm) { if (!placeNorm) return '메인 피드'; const labels = window.SimEngine.PLACEMENTS.map(p => p.label); let max = -1, idx = 0; placeNorm.forEach((v, i) => { if (v > max) { max = v; idx = i; } }); return labels[idx]; } function NaverGenuineBlock({ query }) { const score = window.SimEngine.naverGenuineScore(query); if (!score) return null; const axes = [ { k: 'search', label: '검색 진입', icon: '🔍' }, { k: 'price', label: '가격 비교', icon: '⚖' }, { k: 'review', label: '리뷰 의존', icon: '★' }, { k: 'loyalty', label: '멤버십 충성', icon: '◈' }, { k: 'repeat', label: '재구매 주기', icon: '⟳' }, ]; const gradeTone = score.total >= 70 ? 'plant' : score.total >= 55 ? 'signal' : 'alert'; return (
{score.grade}
{score.total}/100
{score.gradeDesc}
{axes.map(a => { const v = score.axes[a.k] || 0; const t = v >= 75 ? 'plant' : v >= 55 ? 'signal' : 'alert'; return (
{a.icon} {a.label}
{v}
); })}
); } // 옛 배포 스텁 응답(성별 50/50·연령 50대=100%)을 실측처럼 비교하지 않기 위한 가드. // categoryDemographics()의 동일 판정을 그대로 따름 — 실측 라벨은 "정말 실측일 때만" 붙인다(거짓 정밀 금지). function isDegenerateInsight(r) { if (!r) return true; if (r.ok === false) return true; const g = r.gender || {}, a = r.age || {}; return g.female === 50 && g.male === 50 && a['50s'] === 100; } function RealityCheck({ query, result, brandName }) { const [data, setData] = useWFState(null); const [loading, setLoading] = useWFState(true); const [err, setErr] = useWFState(null); useWFEffect(() => { let cancelled = false; async function fetch() { if (!query || !window.DataLab) { setErr('DataLab 미로드'); setLoading(false); return; } setLoading(true); setErr(null); const allPaths = query.flatMap(g => g.leaves); const keywords = allPaths.slice(0, 3).map(p => p.split(' > ').slice(-1)[0]); try { const [trend, shop, ugc] = await Promise.all([ window.DataLab.searchTrend({ keywords, startDate: '2025-05-01', endDate: '2026-05-01', timeUnit: 'month' }), window.DataLab.shopSearch({ query: brandName || keywords[0] || '', display: 5 }), window.DataLab.searchUgc({ query: brandName || keywords[0] || '', display: 5 }), ]); // 쇼핑인사이트는 분야 코드(cid)가 필요 — shopSearch가 돌려준 실제 네이버 쇼핑 카테고리명을 // 시드로 넘겨 워커가 SerpApi(engine=naver_shopping 검색결과의 cat_id)로 실시간 해석하게 한다. // shopSearch 결과가 없으면 브랜드명/키워드로 최소 폴백(워커가 SerpApi로 재시도 후 없으면 정직 미제공). const topItem = (shop && shop.items && shop.items[0]) || null; const topCategory = (topItem && (topItem.category2 || topItem.category1)) || ''; const ins = await window.DataLab.shoppingInsight({ categoryName: topCategory, keyword: keywords[0] || brandName || '' }); if (!cancelled) { setData({ trend, insight: ins, ugc, keywords }); setLoading(false); } } catch (e) { console.error('[RealityCheck]', e); if (!cancelled) { setErr(e.message || 'fetch failed'); setLoading(false); } } } fetch(); return () => { cancelled = true; }; }, [JSON.stringify(query.flatMap(g => g.leaves))]); if (err) return
데이터랩 조회 실패: {err}
; if (loading) return
데이터랩 조회 중…
; if (!data) return null; // 이 화면의 "일치율" 점수는 오직 shoppingInsight(연령·성별·디바이스) 응답에서만 나온다. // 그 응답이 실측이 아니거나(mock) 깨진 스텁이면, 점수를 계산해서 보여주는 것 자체가 거짓 정밀이므로 // 아예 숫자를 만들지 않는다(0점이 아니라 "비교 불가"로 처리). const insightSrc = data.insight && data.insight.__source; const insightDegenerate = isDegenerateInsight(data.insight); const insightReliable = insightSrc === 'real' && !insightDegenerate; if (insightSrc === 'real' && insightDegenerate) { console.warn('[RealityCheck] 실 프록시 응답이 옛 스텁 신호(성별50/50·50대100%) — 재배포 필요 가능성'); } const trendReliable = data.trend && data.trend.__source === 'real'; const ugcReliable = data.ugc && data.ugc.__source === 'real'; const ins = insightReliable ? (data.insight || {}) : {}; const ourAges = result.ageDist || []; const ourAgeMapped = { '10s': (ourAges[0] || 0) * 100, '20s': ((ourAges[1] || 0) + (ourAges[2] || 0)) * 100, '30s': ((ourAges[3] || 0) + (ourAges[4] || 0)) * 100, '40s': ((ourAges[5] || 0) + (ourAges[6] || 0)) * 100, '50s': ((ourAges[7] || 0) + (ourAges[8] || 0)) * 100, '60s_plus': (ourAges[9] || 0) * 100, }; function cosSim(a, b) { const keys = Object.keys(a); let dot = 0, na = 0, nb = 0; for (const k of keys) { dot += (a[k]||0)*(b[k]||0); na += (a[k]||0)**2; nb += (b[k]||0)**2; } return dot / (Math.sqrt(na) * Math.sqrt(nb) + 1e-9); } // 데이터랩 인사이트는 차원이 누락될 수 있음(쇼핑인사이트엔 device 없음) → 있는 축만 비교 const ageSync = ins.age ? Math.round(cosSim(ourAgeMapped, ins.age) * 100) : null; const ourFemale = Math.round((result.skew || 0.5) * 100); const dlFemale = ins.gender && ins.gender.female != null ? ins.gender.female : null; const genderSync = dlFemale != null ? Math.max(0, Math.round(100 - Math.abs(ourFemale - dlFemale) * 2)) : null; const ourMobile = Math.round((result.deviceDist?.mobile || 0.78) * 100); const dlMobile = ins.device && ins.device.mobile != null ? ins.device.mobile : null; const deviceSync = dlMobile != null ? Math.max(0, Math.round(100 - Math.abs(ourMobile - dlMobile) * 1.5)) : null; const syncParts = [['연령대', ageSync], ['성별', genderSync], ['기기(모바일/PC)', deviceSync]].filter(p => p[1] != null); const hasSync = syncParts.length > 0; const totalSync = hasSync ? Math.round(syncParts.reduce((s, p) => s + p[1], 0) / syncParts.length) : null; const tone = !hasSync ? 'mute' : totalSync >= 75 ? 'plant' : totalSync >= 55 ? 'signal' : 'alert'; const trendData = data.trend.results[0]?.data || []; const trendMax = Math.max(...trendData.map(p => p.ratio), 1); const ts = trendData[0]?.ratio || 0; const te = trendData[trendData.length - 1]?.ratio || 0; const trendDir = te > ts * 1.1 ? '↑ 상승' : te < ts * 0.9 ? '↓ 하락' : '→ 안정'; const trendTone = te > ts * 1.1 ? 'plant' : te < ts * 0.9 ? 'alert' : 'signal'; return (
{hasSync ? totalSync : '–'}/100
시장 일치율 — 이 숫자가 높을수록 우리 예측이 네이버 실제 데이터와 비슷하다는 뜻
{hasSync ? '네이버 실측 데이터로 검증됨' : '아직 이 브랜드는 네이버 실측 데이터와 비교할 수 없어요 — 아래 예측치는 참고용입니다'}
{hasSync ? '실측 비교 완료' : '비교 불가'}
{syncParts.map(([label, v]) => )} {!hasSync &&
이 브랜드·카테고리는 아직 네이버 실측 연령·성별·기기 데이터가 연결되지 않았습니다.
}
12개월 검색 관심도 — {data.keywords.join(', ')}{!trendReliable && (예시 데이터)} {trendDir}
`${(i/(trendData.length-1))*320},${60-(p.ratio/trendMax)*50}`).join(' ') + ' 320,60 0,60'} /> `${(i/(trendData.length-1))*320},${60-(p.ratio/trendMax)*50}`).join(' ')} />
블로그·카페 언급량{!ugcReliable && (예시 데이터)} {data.ugc.total.toLocaleString()}건 {data.ugc.total > 100000 ? '활성 시장' : data.ugc.total > 10000 ? '일반' : '저조'}
); } function RCAxis({ label, v }) { const tone = v >= 75 ? 'plant' : v >= 55 ? 'signal' : 'alert'; return (
{label}
{v}%
); } function FitnessBreakdown({ parts }) { const axes = [ { k: 'gender', label: '성별 명확도', tone: 'signal' }, { k: 'age', label: '연령 집중도', tone: 'signal' }, { k: 'time', label: '시간대 집중도', tone: 'cyan' }, { k: 'device', label: '디바이스 정합', tone: 'cyan' }, { k: 'place', label: '지면 집중도', tone: 'cyan' }, { k: 'intent', label: '구매의도 비중', tone: 'plant' }, ]; return (
{axes.map(a => (
{a.label}
{parts[a.k] || 0}
))}
); } function FunnelRFMBlock({ query }) { const f = window.SimEngine.aggregateFunnel(query); const rfm = window.SimEngine.rfmFor(query); if (!f) return null; const STAGES = [ { k: 'awareness', label: '인지', tone: 'cyan' }, { k: 'consideration', label: '고려', tone: 'signal' }, { k: 'decision', label: '결정', tone: 'plant' }, { k: 'retention', label: '유지', tone: 'alert' }, ]; const STATES = { in_market: { label: 'In-Market', desc: '최근 30일 구매 검색 활성' }, cart_abandoner: { label: 'Cart Abandoner', desc: '장바구니 이탈' }, lapsed: { label: 'Lapsed', desc: '비활성 이전 구매자' }, past_buyer: { label: 'Past Buyer', desc: '과거 구매자 (재참여)' }, loyalist: { label: 'Loyalist', desc: '반복 구매 충성도층' }, consideration_pool: { label: 'Consideration', desc: '비교·탐색 단계' }, broad_pool: { label: 'Broad Reach', desc: '광범위 인지층' }, }; const state = STATES[f.dominantState] || STATES.broad_pool; return (
{STAGES.map(s => { const pct = Math.round((f.stages[s.k] || 0) * 100); if (pct === 0) return null; return (
{pct}% {s.label}
); })}
퍼널: {STAGES.find(s => s.k === f.dominantStage)?.label || '-'} 단계 우세
주 Shopper State
{state.label} {state.desc}
RFM 세그먼트: {rfm.label}
); } function RFMDot({ label, v, hint }) { const tone = v >= 70 ? 'plant' : v >= 50 ? 'signal' : 'alert'; return (
{label} {v}
); } function PredictiveCurve({ result, query }) { const data = window.SimEngine.predictiveRevenueCurve(result, query); if (!data?.length) return null; const optIdx = data.reduce((best, p, i) => p.roas > data[best].roas ? i : best, 0); const opt = data[optIdx]; const W = 480, H = 160, PAD = { t: 14, r: 24, b: 24, l: 40 }; const innerW = W - PAD.l - PAD.r; const innerH = H - PAD.t - PAD.b; const maxRoas = Math.max(...data.map(p => p.roas)); const maxRev = Math.max(...data.map(p => p.revenue)); const minBid = Math.min(...data.map(p => p.bidMul)); const maxBid = Math.max(...data.map(p => p.bidMul)); const xOf = bid => PAD.l + (bid - minBid) / (maxBid - minBid) * innerW; const yRoas = r => PAD.t + innerH - (r / maxRoas) * innerH; const yRev = r => PAD.t + innerH - (r / maxRev) * innerH; const roasPath = data.map((p, i) => (i ? 'L' : 'M') + xOf(p.bidMul) + ',' + yRoas(p.roas)).join(' '); const revPath = data.map((p, i) => (i ? 'L' : 'M') + xOf(p.bidMul) + ',' + yRev(p.revenue)).join(' '); const revArea = revPath + ` L${xOf(maxBid)},${PAD.t+innerH} L${xOf(minBid)},${PAD.t+innerH} Z`; return (
{[0.25, 0.5, 0.75].map(t => ( ))} {data.map((p, i) => ( ))} 0.4× 1.0× {maxBid}× ROAS 매출 ◆ 최적
ROAS 1K 노출당 매출 최적 {opt.bidMul}× · ROAS {(opt.roas * 100).toFixed(1)}% · CPM ₩{opt.cpm.toLocaleString()}
); } function DeviceSplit({ dist }) { const mPct = Math.round(dist.mobile * 100); const pPct = 100 - mPct; return (
📱 MO {mPct}%
💻 PC {pPct}%
{mPct >= 75 ? '모바일 중심 — 짧고 강한 비주얼·세로 영상 적합' : mPct >= 50 ? '모바일 우세 + PC 보조 — 크로스 디바이스 트래픽 검토' : '모바일·PC 균형 — 양쪽 소재 모두 준비'}
); } // Improve-2(예측-실측 대사 로그) UI — categoryPriors 추정을 예측으로 기록해뒀다가(recordCategoryPrediction), // tier-A 실측 브랜드를 분석할 때 그 브랜드 자신의 값으로 같은 카테고리의 과거 예측을 대사한다. // PRD §8 KPI "추천 정밀도↑(신뢰구간 폭 축소)"를 처음으로 실측 가능하게 만드는 지점 — 검출·표시만, 자동 수정 없음. function PredictionReconcilePanel({ categoryLabel, measuredProfile }) { const [stats, setStats] = React.useState(() => (window.SampleLedger ? window.SampleLedger.reconciliationStats() : [])); const [msg, setMsg] = React.useState(''); function doReconcile() { if (!window.SampleLedger || !measuredProfile || !categoryLabel) return; let matched = 0; const push = (metric, value) => { if (value == null) return; const r = window.SampleLedger.reconcile({ cat: categoryLabel, metric, value }); matched += r.matched || 0; }; if (measuredProfile.gender && measuredProfile.gender['여성'] != null) push('femaleSkew', measuredProfile.gender['여성'] / 100); if (measuredProfile.economics && measuredProfile.economics.aov) push('aov', measuredProfile.economics.aov); if (measuredProfile.device && measuredProfile.device.mobile != null) push('mobilePct', measuredProfile.device.mobile); setMsg(matched ? `${matched}건 대사 완료` : '대사할 미확정 예측 없음(이 카테고리 예측 기록이 아직 없거나 이미 대사됨)'); setStats(window.SampleLedger.reconciliationStats()); } if (!window.SampleLedger) return null; return (
{stats.length > 0 && ( {stats.map(s => ( ))}
지표 대사 n 평균절대오차 신뢰구간 적중률
{s.metric} {s.n} {s.meanAbsError} {s.stdHitRatePct != null ? s.stdHitRatePct + '%' : '—'}
)} {measuredProfile && categoryLabel && ( )} {msg &&
{msg}
} {!stats.length && !measuredProfile && (
아직 대사된 예측 없음 — tier-C 추정으로 분석하면 예측이 자동 기록되고, tier-A 실측 브랜드 분석 시 대사할 수 있습니다.
)}
); } /* === Step 4: 실행 가이드 === */ const CAMPAIGN_KPIS = [ { id: 'reach', label: '리치 (인지)', icon: '◯', desc: '광역 도달·브랜드 인지', bid: 'CPM', optimization: '노출 최대화', targetMode: '포함 (합집합)', budgetMul: 1.0, ctrFactor: 1.0, cvrFactor: 0.85, materials: ['이미지 1:1', '동영상 6초', '카피 25자 이내'], tips: ['빈도 캡 일 3회 권장', '광역 시간대 균등 배분', '크리에이티브 3종 이상 A/B'], }, { id: 'traffic', label: '트래픽 (방문)', icon: '➤', desc: '랜딩 페이지 방문 유도', bid: 'CPC', optimization: '클릭 최대화', targetMode: '포함 (합집합)', budgetMul: 1.05, ctrFactor: 1.25, cvrFactor: 0.92, materials: ['이미지 1:1·16:9', '동영상 15초', '카피 35자', '클릭 유도 CTA'], tips: ['랜딩 페이지 로딩 < 2초', 'UTM 파라미터 자동 부여', '저녁·여가 시간대 가중 입찰'], }, { id: 'conversion', label: '전환', icon: '$', desc: '구매·가입·앱설치 등 액션 유도', bid: 'oCPM', optimization: '전환 최적화 (학습 주 40전환 필요)', targetMode: '일치 (관심사 ∩ 구매의도)', budgetMul: 1.30, ctrFactor: 0.85, cvrFactor: 1.45, materials: ['상품 정사각 + 가격', '동영상 15초', '리뷰·평점 노출', '딥링크'], tips: ['GFA 픽셀·CAPI 동시 설치', '최근 1주 40전환 달성 전까지 입찰 변경 금지(러닝 페이즈)', '리타겟팅 그룹 분리 운영'], }, { id: 'shopping', label: '쇼핑 프로모션', icon: '🛒', desc: '카탈로그 동적 광고·할인 노출', bid: 'oCPM', optimization: '카탈로그 동적 (DPA)', targetMode: '일치 (관심사 ∩ 구매의도) + 카탈로그', budgetMul: 1.40, ctrFactor: 1.10, cvrFactor: 1.65, materials: ['상품 피드 (XML/CSV)', '동적 가격·재고 갱신', '컬렉션 카드'], tips: ['상품 피드 24h마다 자동 갱신', '카트 이탈자 리타겟팅 별도 그룹', '할인율 표기는 메인 이미지'], }, { id: 'app', label: '앱 설치', icon: '◇', desc: '앱 설치·실행·인앱 이벤트', bid: 'oCPI', optimization: '앱 이벤트 최적화', targetMode: '포함 + 디바이스 OS 분리', budgetMul: 1.20, ctrFactor: 0.95, cvrFactor: 1.25, materials: ['앱 스토어 스크린샷', '동영상 15초', '인앱 보상 카피', 'iOS/AOS 분리 소재'], tips: ['SDK·MMP(Adjust/Appsflyer) 연동 필수', 'iOS는 SKAN, AOS는 GAID 분리', '튜토리얼 완료를 KPI로 설정'], }, { id: 'video', label: '동영상 조회', icon: '▶', desc: '브랜드 영상 노출·조회 시간', bid: 'CPV', optimization: '동영상 조회 최대화', targetMode: '포함 (합집합)', budgetMul: 0.85, ctrFactor: 1.50, cvrFactor: 0.70, materials: ['세로 9:16', '6/15/30초 3종', '자막 필수', '인트로 첫 3초 임팩트'], tips: ['3초·15초 완청률 분리 측정', '저녁·여가 시간대 집중', '음소거 시청 가정 자막'], }, ]; /* TargetingLever — 관심사↔구매의도 비중 레버 (반응형) + 일예산 레버. 드래그하면 상위 배분·키워드·예상성과가 실시간 반응. 추천값은 마커로 노출(강제 아님). */ function TargetingLever({ intentShare, recoShare, manual, onShare, onSnap, dailyBudget, onBudget, confidence, fitLabel, funnelLabel, nInterest, nIntent }) { const interestShare = 100 - intentShare; const pos = s => ((Math.max(10, Math.min(90, s)) - 10) / 80 * 100); // range 10~90 → 0~100% 트랙 좌표 return (
타게팅 믹스 레버 신뢰도 {confidence}
관심사 {interestShare}% · {nInterest}건 구매의도 {intentShare}% · {nIntent}건
onShare(+e.target.value)} className="tlv-range" aria-label="구매의도 비중" />
퍼널 {funnelLabel} · 브랜드핏 {fitLabel} · 일예산 ₩{dailyBudget.toLocaleString()} → 추천 구매의도 {recoShare}%
{manual && }
onBudget(+e.target.value)} className="tlv-brange" aria-label="일 예산" /> ₩{dailyBudget.toLocaleString()}/일 · 월 ₩{(dailyBudget * 30).toLocaleString()}
); } /* RationaleLedger — 섹션8: 추천·산출 근거 원장. 모든 수치의 입력→산출과 데이터 등급을 투명 공개. */ /* ABMixTest — 관심사:구매의도 비중이 다른 두 버전을 레버로 맞춰 예측 성과 비교 */ function ABMixTest({ evalShare, recoShare, shareA, shareB, onA, onB, onReset, manual, budget }) { const fmtN = window.SimEngine.fmtN; const A = evalShare(shareA), B = evalShare(shareB); const convWin = A.convs === B.convs ? null : (A.convs > B.convs ? 'A' : 'B'); const reachWin = A.reach === B.reach ? null : (A.reach > B.reach ? 'A' : 'B'); const dpct = (a, b) => (b ? Math.round((a - b) / b * 100) : 0); const pos = s => ((Math.max(10, Math.min(90, s)) - 10) / 80 * 100); const card = (tag, m, setter, win) => (
버전 {tag} {win && ★ 예측 우위} 구매의도 {m.share}%
관심사 {100 - m.share}%구매의도 {m.share}%
setter(+e.target.value)} className="abm-range" aria-label={'버전 ' + tag + ' 구매의도 비중'} />
관심사 {m.nInterest} · 구매의도 {m.nIntent} leaf
예상 도달{fmtN(m.reach)}
예상 클릭{fmtN(m.clicks)}
예상 전환{fmtN(m.convs)}
); return (
{card('A', A, onA, convWin === 'A')} {card('B', B, onB, convWin === 'B')}
전환 예측 A {fmtN(A.convs)} vs B {fmtN(B.convs)} {convWin ? `버전 ${convWin} 우위 (+${Math.abs(dpct(convWin === 'A' ? A.convs : B.convs, convWin === 'A' ? B.convs : A.convs))}%)` : '동률'}
도달 예측 A {fmtN(A.reach)} vs B {fmtN(B.reach)} {reachWin ? `버전 ${reachWin} 넓음 (+${Math.abs(dpct(reachWin === 'A' ? A.reach : B.reach, reachWin === 'A' ? B.reach : A.reach))}%)` : '동률'}
{manual && }
{A.nInterest === B.nInterest && A.nIntent === B.nIntent && (
ℹ 두 버전의 leaf 수가 같음(가용 한도) — 차이는 예산·입찰 비중으로 반영됩니다(동일 leaf, 다른 가중).
)} 예측 가정: 구매의도 비중↑ → 전환율 보정↑·도달↓ (추정 트레이드오프). 실제 우열은 동일 일예산(₩{budget.toLocaleString()})으로 동시 집행해 검증해야 확정됩니다 — 이 비교는 출발 가설.
); } function RationaleLedger(props) { const { kpi, funnelLabel, funnelBase, fitLabel, fitAdj, budgetAdj, dailyBudget, recoShare, intentShare, manual, mixConfidence, measured, reference, nInterest, nIntent, totalAvail, reachFactor, baseCvr, baseR, adjReach, adjImpr, adjClicks, adjConvs, adjCtr, adjCvr, adjBudget } = props; const fmtN = window.SimEngine.fmtN, fmtKRW = window.SimEngine.fmtKRW; const sgn = v => (v >= 0 ? '+' : '') + v; const reachMul = kpi.id === 'shopping' ? 0.78 : kpi.id === 'reach' ? 1.20 : 1; const imprMul = kpi.id === 'video' ? 0.65 : kpi.id === 'reach' ? 1.45 : 1; const grade = measured ? 'A' : reference ? 'C' : 'D'; const gradeLabel = measured ? '실측 (1st-party)' : reference ? '표본 참고 (prior)' : '카테고리 추정'; return (
{/* 1. 타게팅 믹스 추천 */}
① 타게팅 믹스 추천 구매의도 {recoShare}%
퍼널 {funnelLabel} {funnelBase} + 브랜드핏 {fitLabel} {sgn(fitAdj)} + 일예산 ₩{dailyBudget.toLocaleString()} {sgn(budgetAdj)} = {recoShare}%
현재 레버 구매의도 {intentShare}% {manual ? '(수동 조정)' : '(추천값 추종)'} → 관심사 {nInterest} / 구매의도 {nIntent} leaf 배분 (가용 {totalAvail}). 고정 정답 없음 — 입력 변하면 추천도 반응.
{/* 2. 예상 성과 산식 */}
② 예상 성과 산식 {kpi.label}
도달기준 {fmtN(baseR.finalReach || 0)} × KPI {reachMul} × 비중계수 {reachFactor}{fmtN(adjReach)}명
월 노출기준 {fmtN(baseR.impressions || 0)} × {imprMul} × {reachFactor}{fmtN(adjImpr)}회
클릭노출 × CTR {adjCtr}% (기준 {baseR.ctr || 0}% × {kpi.ctrFactor} × 비중보정){fmtN(adjClicks)}
전환클릭 × CVR {adjCvr}% (기준 {baseCvr}% × 비중보정){fmtN(adjConvs)}
월 예산기준 × 예산배수 {kpi.budgetMul}{fmtKRW(adjBudget)}
비중계수 = 구매의도 비중↑ → 도달↓·CVR↑ (정밀), 비중↓ → 도달↑·CVR↓ (광역). leaf 수가 가용 한도에 묶여도 예산·입찰 가중으로 차등 반영.
{/* 3. 데이터 등급 */}
③ 데이터 등급 (provenance) tier {grade} · {gradeLabel}
{measured && (
{measured.sourceLabel} · {measured.period} 실측 → 존재하는 차원만 측정값으로 override. ({[ measured.gender && measured.gender['여성'] != null ? '여성 ' + measured.gender['여성'] + '%' : null, measured.economics && measured.economics.aov ? 'AOV ₩' + measured.economics.aov.toLocaleString() : null, measured.repurchase && measured.repurchase.monthlyRatePct != null ? '재구매 ' + measured.repurchase.monthlyRatePct + '%' : null, measured.device && measured.device.mobile != null ? '모바일 ' + measured.device.mobile + '%' : null, ].filter(Boolean).join(' · ')})
{measured.dataShape === 'summary' ? '집계 리포트 — 결합분포·시간대 등 미제공 차원은 추정으로 채우지 않음.' : '시간대·요일·시즌성·카테고리·베스트셀러도 동일 실측.'} 이 브랜드에만 적용 (다른 브랜드로 복제 안 함).
)} {!measured && reference && (
동일 카테고리 표본 {reference.sampleCount}개 기준 참고 추정치 — 실측 대체 아님. ({[ reference.femaleSkew != null ? '여성 ' + (reference.femaleSkew * 100).toFixed(1) + '%' : null, reference.aov != null ? 'AOV ₩' + reference.aov.toLocaleString() : null, reference.repurchasePct != null ? '재구매 ' + reference.repurchasePct + '%' : null, ].filter(Boolean).join(' · ')} · 참고)
⚠ {reference.caution}
)} {!measured && !reference && (
실측·표본 없음 → 카테고리 통계(leaf-stats) 기반 추정. 측정처럼 단정하지 않음. 실데이터 적재 시 tier A로 확정.
)}
{/* 4. 키워드 발굴 근거 */}
④ 맞춤타겟 키워드 근거
각 leaf 고유 변주 키워드(형제 카테고리 중복 방지) + 퍼널 톤({funnelLabel}: {funnelLabel === '전환' ? '구매·최저가·할인' : funnelLabel === '인지' ? '추천·브랜드·신상' : '비교·후기'}) + 부모 시드 풀 순으로 구성. 560 카테고리 100% 커버.
{/* 5. 불확실성 */}
⑤ 불확실성 · 신뢰도 {mixConfidence}
{measured ? '실측 보유 — 본 브랜드 추천 신뢰 높음.' : reference ? `표본 ${reference.sampleCount}개 · 분산 ${reference.femaleSkewStd == null ? '미상(참고용)' : '산출됨'}.` : '추정 단계 — 신뢰 보통.'} {' '}표본이 늘수록 카테고리 prior의 분산·신뢰가 실증적으로 수렴 → 추정 강도 상향. 요청 근거: 위 산식·등급이 곧 개발·운용 판단의 기준점.
); } /* LeverageConsole — 브랜드 · 캠페인 KPI · 일예산을 하나의 레버식 컨트롤로 통합. 세 입력이 변하면 추천 구매의도 비중·예상 성과가 실시간 반응 (Step4 상태를 공유). */ function LeverageConsole({ brand, fitLabel, mixConfidence, dataTier, kpis, kpiId, onKpi, dailyBudget, onBudget, recoShare, intentShare, mainEval }) { const fmtN = window.SimEngine.fmtN; return (
레버리지 콘솔 {brand || '브랜드'} {fitLabel} · 신뢰도 {mixConfidence}
{kpis.map(k => ( ))}
onBudget(+e.target.value)} className="lvc-range" aria-label="일 예산" /> ₩{dailyBudget.toLocaleString()}/일 · 월 ₩{(dailyBudget * 30).toLocaleString()}
추천 구매의도{recoShare}%
현재 비중{intentShare}%
예상 도달{fmtN(mainEval.reach)}
예상 전환{fmtN(mainEval.convs)}
); } /* BidGuide — 자동입찰 vs 수동입찰 안내 + 유효 CPC/CPM 한도 산출 */ function BidGuide({ aov, ctr, cvr, monthlyConvs, kpi, result }) { const beCpc = Math.round(aov * (cvr / 100)); // 손익분기 CPC (ROAS 100%) const cpc300 = Math.round(beCpc / 3); // 목표 ROAS 300% const cpmCap = Math.round(cpc300 * (ctr / 100) * 1000); // 대응 입찰가 CPM 한도 const weeklyConvs = Math.round(monthlyConvs / 4.345); const autoOk = weeklyConvs >= 40; // === DimMatrix: 지면×타겟 조합별 유효 CPC 산출 === // 동일 카테고리도 캠페인×지면×성별×연령 조합에 따라 CPC가 3~10× 차이남. const dimCpcs = React.useMemo(() => { if (!window.DimMatrix || !result) return []; try { const lp = window.DimMatrix.extractLeafProfile(result); const campMap = { reach:'awareness', traffic:'traffic', conversion:'conversion', shopping:'shopping', app:'app', video:'video' }; const campaign = campMap[kpi.id] || 'traffic'; const combos = window.DimMatrix.topByObjective(result, lp, campaign, 5); return combos.map(c => { const adjCPM = c.result.cpm || 0; const adjCTR = parseFloat(c.result.ctr) || 0; const effCpc = adjCTR > 0 ? Math.round(adjCPM / (adjCTR * 10)) : null; const effCvr = parseFloat(c.result.conv) || 0; const beCpcAdj = aov > 0 && effCvr > 0 ? Math.round(aov * effCvr / 100) : null; return { label: window.DimMatrix.dimLabel(c.dims), effCpc, adjCPM, adjCTR, effCvr, beCpcAdj, campaign: c.dims.campaign, placement: c.dims.placement, }; }); } catch (e) { return []; } }, [result, kpi.id, aov]); return (
자동입찰{autoOk && 권장}
{kpi.bid} · {kpi.optimization}

{autoOk ? `주 예상 전환 ${weeklyConvs}건 ≥ 40 — 학습 가능, 시스템 최적화 권장.` : `주 예상 전환 ${weeklyConvs}건 < 40 — 최근 1주 40전환 미달, 초기엔 수동 권장.`}

수동입찰{!autoOk && 권장}
입찰가·CPC 한도 직접 설정
손익분기 CPC (ROAS 100%)₩{beCpc.toLocaleString()}
유효 CPC 한도 (ROAS 300%)₩{cpc300.toLocaleString()}
대응 입찰가 CPM 한도₩{cpmCap.toLocaleString()}
유효 CPC 한도 = 객단가 ₩{aov.toLocaleString()} × CVR {cvr}% ÷ 목표 ROAS. 목표 ROAS를 높일수록 한도↓(보수적), 낮출수록 한도↑(공격적).
{dimCpcs.length > 0 && (
📐 지면 × 타겟 조합별 유효 CPC — (매체 × 캠페인 × 지면 × 성별 × 연령) 7차원 추정
지면 × 타겟
유효 CPC
CTR
CVR
BE-CPC
{dimCpcs.map((d, i) => (
{d.label}
{d.effCpc != null ? '₩'+d.effCpc.toLocaleString() : '—'}
{d.adjCTR.toFixed(3)}%
{d.effCvr.toFixed(3)}%
{d.beCpcAdj != null ? '₩'+d.beCpcAdj.toLocaleString() : '—'}
 ))}
유효 CPC = 지면별 조정 CPM ÷ (조정 CTR × 10). 동일 카테고리라도 지면·타겟에 따라 3~10× 차이. BE-CPC = 객단가 × 조정 CVR ÷ 100 (ROAS 100% 손익분기).
)}
); } /* DemoTimeMatrix — 연령대 × MO/PC 필수 시간대 매트릭스 (캠페인 KPI 가중 반영) */ const AGE_TIME = { '20대': { mo: '22–02시 (심야)', pc: '13–18시' }, '30대': { mo: '21–24시', pc: '12–17시' }, '40대': { mo: '20–23시', pc: '10–15시' }, '50대': { mo: '19–22시', pc: '09–13시' }, '60대+': { mo: '08–11시', pc: '09–12시' }, }; function normAge(a) { if (AGE_TIME[a]) return a; if (/1[0-9]|10대|20|2[0-5]/.test(a)) return '20대'; if (/3[0-9]|30/.test(a)) return '30대'; if (/4[0-9]|40/.test(a)) return '40대'; if (/5[0-9]|50/.test(a)) return '50대'; return '60대+'; } function DemoTimeMatrix({ profile, kpiLabel, kpiId, chosenResult }) { const ages = (profile && profile.ageRaw) ? Object.keys(profile.ageRaw).filter(a => /대/.test(a) || /\d/.test(a)) : ['20대', '30대', '40대', '50대', '60대+']; const seen = new Set(); const rows = []; ages.forEach(a => { const n = normAge(a); if (!seen.has(n)) { seen.add(n); rows.push({ label: a, key: n, share: profile && profile.ageRaw ? profile.ageRaw[a] : null }); } }); const topShare = Math.max(0, ...rows.map(r => r.share || 0)); // 추천 연령 — chosenResult.ageDist에서 상위 3개 bracket → normAge로 매핑 const recKeys = React.useMemo(() => { if (!chosenResult) return new Set(); try { return new Set(recommendedAges(chosenResult).split(/,\s*/).map(normAge)); } catch { return new Set(); } }, [chosenResult]); const recLabel = chosenResult ? (function(){ try { return recommendedAges(chosenResult); } catch { return null; } })() : null; const kpiHint = (kpiId === 'conversion' || kpiId === 'shopping') ? '저녁·주말 집중 (구매 결정 시간대 가중)' : (kpiId === 'reach' || kpiId === 'video') ? '종일 균등 + 저녁 프라임 가중' : (kpiId === 'app') ? '출퇴근·심야 (앱 실행 패턴)' : '점심·저녁 피크'; return (
연령대
📱 MO 필수 시간대
💻 PC 필수 시간대
{rows.map(r => { const t = AGE_TIME[r.key]; const core = r.share != null && r.share >= topShare * 0.8; const rec = recKeys.has(r.key); return (
{r.label}{rec && 추천}{r.share != null ? {r.share}% : ''}
{t ? t.mo : '—'}
{t ? t.pc : '—'}
 ); })}
{recLabel &&
★ 분석 추천 타겟 연령: {recLabel} — 위 추천 행이 집중 집행 대상
}
캠페인 «{kpiLabel}» 시간대 가중: {kpiHint}. {profile && profile.hourly ? '※ MO/PC 분리 — 실측 시간대 곡선은 실측 패널 참고.' : '※ 연령·디바이스 일반 패턴 추정 (실측 적재 시 정밀화).'}
); } /* ConversionBudgetGuide — 전환/쇼핑 KPI에서 클릭최대화 vs 전환수최대화 분리. 전환수최대화 선택 시에만, 브랜드 스펙(규모·매출)을 반영한 최소 학습 적정 일예산 산출. */ function ConversionBudgetGuide({ kpi, baseR, adjCtr, adjCvr, profile, brand }) { const [mode, setMode] = useWFState('maxconv'); // maxclick | maxconv const won = n => '₩' + Math.round(n).toLocaleString(); const effCpc = (baseR.cpm || 0) / Math.max(0.05, 10 * adjCtr); // 유효 CPC const cpa = adjCvr > 0 ? effCpc / (adjCvr / 100) : 0; // 전환단가 const LEARN_CONV = 40, LEARN_DAYS = 7; // GFA 학습: 최근 1주(7일) 내 40전환 권장 const dailyConv = LEARN_CONV / LEARN_DAYS; const learnDaily = Math.round(dailyConv * cpa); // 브랜드 스펙 — 월매출 추정 → 규모 tier + 현실성 점검 const eco = (profile && profile.economics) || {}; const months = (profile && profile.meta && profile.meta.months) || 6; let monthlyRev = null; if (eco.gmv2025) monthlyRev = eco.gmv2025 / 12; else if (eco.gmv) monthlyRev = eco.gmv / months; const tier = monthlyRev == null ? null : monthlyRev < 10e6 ? '소형' : monthlyRev < 50e6 ? '중형' : '대형'; const monthlyLearn = learnDaily * 30; const revRatio = monthlyRev ? monthlyLearn / monthlyRev : null; // 매출 대비 과도하면 단계적 시작 예산 제안 (월매출의 ~25% 상한 가이드) const capDaily = monthlyRev ? Math.round(monthlyRev * 0.25 / 30) : null; const overBudget = revRatio != null && revRatio > 0.25; const phasedDaily = overBudget ? capDaily : learnDaily; return (
전환 최적화 모드
{mode === 'maxclick' ? (

클릭(유입) 최적화 — 학습 부담이 작아 전환 데이터가 부족한 초기에 적합. 전환 픽셀로 데이터를 축적한 뒤 전환수 최대화로 전환하세요.

) : (
예상 전환단가 (CPA){won(cpa)}
최소 학습 기준{LEARN_DAYS}일 내 {LEARN_CONV}전환
적정 일예산 (학습){won(learnDaily)}/일
학습기 월 환산{won(monthlyLearn)}
브랜드 스펙 점검 {brand ? `· ${brand}` : ''} {monthlyRev != null ? (
추정 월매출 · 규모{won(monthlyRev)} · {tier}
학습예산 / 월매출{Math.round(revRatio * 100)}%
{overBudget &&
단계적 시작 일예산{won(phasedDaily)}/일
}
) : (

실측 매출 미적재 — 규모 점검 불가. 적정 일예산은 카테고리 CPA 추정 기준(참고).

)}

{monthlyRev == null ? '실데이터 적재 시 브랜드 규모 대비 현실 예산으로 정밀화됩니다.' : overBudget ? `학습예산이 월매출의 ${Math.round(revRatio * 100)}%로 과도 — 월매출 25% 상한(${won(capDaily)}/일)으로 시작해 전환 누적 후 증액 권장.` : `월매출 대비 ${Math.round(revRatio * 100)}%로 감내 가능 — 적정 일예산 ${won(learnDaily)}로 학습 진입 권장.`}

)}
); } function Step4({ analysis, chosenId, onBack, onReset }) { const chosen = analysis.personas.find(p => p.id === chosenId) || analysis.personas[0]; const [kpiTab, setKpiTab] = useWFState('conversion'); const [dailyBudget, setDailyBudget] = useWFState(50000); // 일 예산(₩) const [manualShare, setManualShare] = useWFState(null); // null = 추천 추종, 숫자 = 수동 레버 const [abShareA, setAbShareA] = useWFState(null); // A/B 비중 테스트 — 버전 A 구매의도% const [abShareB, setAbShareB] = useWFState(null); // 버전 B 구매의도% const [copiedCol, setCopiedCol] = useWFState(null); // 관심사/구매의도 leaf 복사 피드백 const scoreMap = useWFMemo(() => { const m = {}; (analysis.scored || []).forEach(s => { m[s.path] = s.score; }); return m; }, [analysis]); if (!chosen) return null; const kpi = CAMPAIGN_KPIS.find(k => k.id === kpiTab) || CAMPAIGN_KPIS[2]; function copyJSON() { const out = { brand: analysis.label, persona: chosen.name, campaign: kpi.label, bid: kpi.bid, optimization: kpi.optimization, targetMode: kpi.targetMode, query: chosen.query, result: chosen.result, generatedAt: new Date().toISOString(), }; window.safeCopy(JSON.stringify(out, null, 2)); } const leaves = chosen.query.flatMap(g => g.leaves); const baseR = chosen.result || {}; // 캠페인 KPI = 퍼널 단계별 타게팅 재구성 // 인지/동영상(상단) → 관심사 중심으로 넓게 / 구매의도 최소 // 트래픽(중단) → 균형 // 전환/쇼핑/앱(하단) → 구매의도 전체 + 관심사 핵심만 (정밀) const FUNNEL_BY_KPI = { reach: 'awareness', video: 'awareness', traffic: 'consideration', conversion: 'action', shopping: 'action', app: 'action' }; const funnel = FUNNEL_BY_KPI[kpi.id] || 'consideration'; // v3.13 — 믹스 전제: 각 objective의 퍼널 역할·보완 대상·예산 분배 비중(단독선택 X). // 상단=수요창출 / 중단=유입 / 하단=수확 / 병렬=확장. complement = 믹스에서 서로 받쳐주는 짝. const FUNNEL_ROLE = { reach: { stage: '상단', role: '수요 창출', sub: '광역 인지로 관심 모수를 키움', complement: ['conversion', 'shopping'], budgetTier: 'top' }, video: { stage: '상단', role: '수요 창출', sub: '영상 몰입으로 브랜드 각인', complement: ['traffic', 'conversion'], budgetTier: 'top' }, traffic: { stage: '중단', role: '유입', sub: '관심 모수를 사이트로 유입', complement: ['reach', 'conversion'], budgetTier: 'mid' }, conversion: { stage: '하단', role: '수확', sub: '키운 수요를 액션으로 전환', complement: ['reach', 'traffic'], budgetTier: 'bottom' }, shopping: { stage: '하단', role: '수확', sub: '카탈로그로 구매 직결', complement: ['reach', 'conversion'], budgetTier: 'bottom' }, app: { stage: '병렬', role: '확장', sub: '앱 설치·인앱 이벤트 별도 트랙', complement: ['traffic', 'conversion'], budgetTier: 'parallel' }, }; const fRole = FUNNEL_ROLE[kpi.id] || FUNNEL_ROLE.conversion; // 예산 퍼널 분배(권장 %) — 의도비중↑(하단 수확 우세)일수록 하단으로 기운다(고정 정답 아님·추천). const eMix = Math.max(10, Math.min(90, intentShare)) / 100; const funnelSplit = { top: Math.round((0.45 - 0.25 * eMix) * 100), // 의도↑ → 상단 축소 mid: 25, bottom: Math.round((0.30 + 0.25 * eMix) * 100), // 의도↑ → 하단(수확) 확대 }; const relOf = (p) => scoreMap[p] || 0; const allInterest = leaves.filter(l => l.startsWith('관심사')).slice().sort((a, b) => relOf(b) - relOf(a)); const allMobile = leaves.filter(l => l.startsWith('모바일')).slice().sort((a, b) => relOf(b) - relOf(a)); const allIntent = leaves.filter(l => l.startsWith('구매의도')).slice().sort((a, b) => relOf(b) - relOf(a)); const totalAvail = allInterest.length + allIntent.length; // 키워드 연관도 Depth 1~4 (브랜드 직접 연관 강도) — 1=직접, 4=확장/약함 const maxRel = Math.max(0.0001, ...allInterest.map(relOf), ...allIntent.map(relOf), ...allMobile.map(relOf)); const depthOf = (p) => { const v = relOf(p); if (v <= 0) return 4; const r = v / maxRel; return r >= 0.66 ? 1 : r >= 0.4 ? 2 : 3; }; // === 관심사/구매의도 비중 = 예측 추천 (고정 정답 없음) === // ① 퍼널 단계(prior) ② 브랜드 핏(실측>표본>기본) ③ 가용 일예산 을 매핑한 추천값. // 레버로 수동 조정 가능(manualShare). 추천은 마커로만 노출. const measured = analysis.measuredProfile, reference = analysis.referenceProfile; const funnelBase = funnel === 'awareness' ? 30 : funnel === 'action' ? 70 : 50; // 구매의도 비중 % const fitAdj = measured ? 12 : reference ? 5 : 0; // 구매자 또렷할수록 구매의도 쪽 const budgetAdj = dailyBudget < 30000 ? 15 : dailyBudget > 200000 ? -15 : 0; // 저예산→정밀, 고예산→광역 여유 const recoShare = Math.max(10, Math.min(90, Math.round(funnelBase + fitAdj + budgetAdj))); const intentShare = manualShare == null ? recoShare : manualShare; const fitLabel = measured ? '실측' : reference ? '표본 참고' : '기본'; const funnelLabel = funnel === 'awareness' ? '인지' : funnel === 'action' ? '전환' : '트래픽'; const mixConfidence = measured ? '높음' : reference ? '참고' : '보통'; // 비중 → leaf 배분 (가용 범위 내에서, 점수 상위부터) let nIntent = Math.min(allIntent.length, Math.round(intentShare / 100 * totalAvail)); if (allIntent.length && nIntent === 0) nIntent = 1; let nInterest = Math.min(allInterest.length, totalAvail - nIntent); if (allInterest.length && nInterest === 0) nInterest = 1; const kInterest = allInterest.slice(0, nInterest); const kIntent = allIntent.slice(0, nIntent); const kpiQuery = [ { name: '관심사', leaves: kInterest }, { name: '구매의도', leaves: kIntent }, ...(allMobile.length ? [{ name: '모바일', leaves: allMobile }] : []), ]; // 타게팅 폭/비중에 따른 도달·전환 보정 const reachMul = kpi.id === 'shopping' ? 0.78 : kpi.id === 'reach' ? 1.20 : 1; const imprMul = kpi.id === 'video' ? 0.65 : kpi.id === 'reach' ? 1.45 : 1; const baseCtr = +((baseR.ctr || 0) * kpi.ctrFactor).toFixed(2); const baseCvr = +((baseR.conv || 0) * kpi.cvrFactor).toFixed(2); const adjBudget = Math.round((baseR.budget || 0) * kpi.budgetMul); // 구매의도 비중(share)이 성과를 *연속적으로* 결정 — leaf 수가 가용 한도에 묶여도(capped) // 예산·입찰 가중으로 차등이 생기게 한다. // 의도↑ → 도달·노출↓(정밀) · CTR↑(관련성↑) · CVR↑ → 전환 효율 우위 // 의도↓ → 도달↑(광역) · CTR↓ · CVR↓ → 도달·인지 우위 function evalShare(share) { const e = Math.max(10, Math.min(90, share)) / 100; // 구매의도 emphasis 0.1~0.9 let ni = Math.min(allIntent.length, Math.round(e * totalAvail)); if (allIntent.length && ni === 0) ni = 1; let nt = Math.min(allInterest.length, totalAvail - ni); if (allInterest.length && nt === 0) nt = 1; const reachFactor = +(1.20 - 0.50 * e).toFixed(3); // e=0.1→1.15, e=0.9→0.75 (광역↔정밀) const ctrEff = +(baseCtr * (0.80 + 0.40 * e)).toFixed(2); // 광역=관련성↓ CTR↓ / 정밀=CTR↑ const cvrEff = +(baseCvr * (0.78 + 0.44 * e)).toFixed(2); // 의도↑ → 전환율↑ const reach = Math.round((baseR.finalReach || 0) * reachMul * reachFactor); const impr = Math.round((baseR.impressions || 0) * imprMul * reachFactor); const clicks = Math.round(impr * ctrEff / 100); const convs = Math.round(clicks * cvrEff / 100); return { share, nInterest: nt, nIntent: ni, reach, impr, clicks, convs, ctrEff, cvrEff, reachFactor }; } const mainEval = evalShare(intentShare); const adjReach = mainEval.reach, adjImpr = mainEval.impr, adjClicks = mainEval.clicks, adjConvs = mainEval.convs; const adjCtr = mainEval.ctrEff; // 비중 반영 유효 CTR const adjCvr = mainEval.cvrEff; // 비중 반영 유효 CVR const reachFactor = mainEval.reachFactor; // A/B 기본 비중 (추천 기준 좌우로 벌림) const abA = abShareA == null ? Math.max(15, recoShare - 20) : abShareA; const abB = abShareB == null ? Math.min(85, recoShare + 20) : abShareB; return (
실행 단계 (4/4)

네이버 GFA에 적용하기

캠페인은 단독이 아니라 퍼널 믹스로 작동합니다 — 각 KPI의 역할·보완·예산 분배를 함께 봅니다.
{/* v3.13 — 믹스 내 역할·보완 대상 + 퍼널 예산 분배(단독선택 X). GFA = 노출 ON·예산 share(입찰% 미표기). */}
{fRole.stage} · {fRole.role}
{kpi.label} 는 믹스에서 {fRole.stage} {fRole.role} — {fRole.sub}. 보완: {fRole.complement.map(id => (CAMPAIGN_KPIS.find(k => k.id === id) || {}).label || id).join(' · ')}
예산 분배 권장 상단 {funnelSplit.top}% · 중단 {funnelSplit.mid}% · 하단 {funnelSplit.bottom}%
{/* 레버리지 콘솔 — 브랜드 · 캠페인 KPI · 예산을 하나의 레버식 컨트롤로 통합 */}
{chosen.name} - {kpi.label} setManualShare(v)} onSnap={() => setManualShare(null)} dailyBudget={dailyBudget} onBudget={setDailyBudget} confidence={mixConfidence} fitLabel={fitLabel} funnelLabel={funnelLabel} nInterest={nInterest} nIntent={nIntent} /> {(() => { const interest = kInterest; const intent = kIntent; const DEPTH_LBL = { 1: '직접', 2: '근접', 3: '연관', 4: '확장' }; const flat = (arr, key) => { window.safeCopy(arr.map(l => l.split(' > ').pop()).join('\n')); setCopiedCol(key); setTimeout(() => setCopiedCol(null), 1600); }; const grp = (colKey, items, kind) => { const cls = kind === 'intent' ? ' wf-guide-leaf-intent' : kind === 'mobile' ? ' wf-guide-leaf-mobile' : ''; const buckets = [1, 2, 3, 4].map(d => ({ d, list: items.filter(l => depthOf(l) === d) })).filter(b => b.list.length); return buckets.map(b => { const k = colKey + '-d' + b.d; return (
D{b.d} {DEPTH_LBL[b.d]} · {b.list.length}
{b.list.map((l, i) => (
{kind === 'intent' ? l : l.replace(/^모바일/, '[NEW] 모바일')}
))}
); }); }; return (
관심사 {interest.length}건{allInterest.length !== interest.length ? ` / ${allInterest.length}` : ''} {interest.length > 0 && ( )}
{interest.length === 0 &&
선택된 관심사 없음
} {grp('interest', interest, 'interest')}
구매의도 {intent.length}건{allIntent.length !== intent.length ? ` / ${allIntent.length}` : ''} {intent.length > 0 && ( )}
{intent.length === 0 &&
⚠ 구매의도 미지정 — {kpi.id === 'conversion' || kpi.id === 'shopping' ? '본 캠페인 KPI에서는 1건 이상 필수' : '필요 시 추가'}
} {grp('intent', intent, 'intent')}
{allMobile.length > 0 && (
모바일 신규NEW {allMobile.length}건
모바일 네이티브 축 · MO 비중↑ · 연령 낮음 · 신규 트렌드 (PC와 시대·페르소나 상이)
{grp('mobile', allMobile, 'mobile')}
)}
); })()}
타겟 설정 방식 {kpi.targetMode} · {kpi.id === 'conversion' || kpi.id === 'shopping' ? '정밀 타겟 우선' : '도달 우선'}
{ setAbShareA(null); setAbShareB(null); }} manual={abShareA != null || abShareB != null} budget={dailyBudget} />
성별전체 (성별 비해당자 포함)
연령{chosen.result ? recommendedAges(chosen.result) : '25-34세'}
{kpi.id === 'app' &&
OSiOS / Android 분리 운영
}
연령 × 디바이스 필수 시간대
입찰 방식{kpi.bid}
최적화 목표{kpi.optimization}
월 예산{window.SimEngine.fmtKRW(adjBudget)}
예상 CPM₩{(baseR.cpm || 0).toLocaleString()}
{(kpi.id === 'conversion' || kpi.id === 'shopping') && ( )}
도달{window.SimEngine.fmtN(adjReach)}명
월 노출{window.SimEngine.fmtN(adjImpr)}회
예상 클릭{window.SimEngine.fmtN(adjClicks)}회 ({adjCtr}%)
예상 전환{window.SimEngine.fmtN(adjConvs)}건 ({adjCvr}%)
준비 소재
    {kpi.materials.map((m, i) =>
  • {m}
    • )}
운영 체크포인트
    {kpi.tips.map((t, i) =>
  • {t}
    • )}
); } function GuideKeywordList({ query, funnel, brand, profile }) { const [perSet, setPerSet] = useWFState(100); const sets = useWFMemo(() => { if (!window.KeywordEngine) return []; return window.KeywordEngine.generateKeywordSets(query, { perSet, maxTotal: 2000, funnel, profile }); }, [JSON.stringify(query), perSet, funnel, profile && profile.meta && profile.meta.categoryLabel]); const brandSet = useWFMemo(() => window.KeywordEngine ? window.KeywordEngine.brandOwnKeywords(brand, profile) : [], [brand, profile]); const compSet = useWFMemo(() => window.KeywordEngine ? window.KeywordEngine.competitorKeywords(profile) : [], [profile]); const [copied, setCopied] = useWFState(false); const total = sets.reduce((s, x) => s + x.count, 0); function flash(key) { setCopied(key); setTimeout(() => setCopied(false), 1600); } function copy(mode) { window.safeCopy(window.KeywordEngine.format(sets, mode)); flash(mode); } function copyList(keywords, key) { window.safeCopy([...new Set(keywords)].join('\n')); flash(key); } if (!sets.length && !brandSet.length && !compSet.length) { return
카테고리가 키워드 시드에 매칭되지 않음 — 키워드 풀 확장 필요
; } return (
{sets.length}개 세트 · 총 {total.toLocaleString()}개 키워드
세트당 최대 {perSet}개 · 무중복 정렬
{sets.map((s, i) => (
{ e.preventDefault(); e.stopPropagation(); copyList([s.label], 'title-' + i); }}>■ {s.label}{copied === 'title-' + i ? ' ✓' : ''} {s.count}개
{s.keywords.map((k, ki) => {k})}
))} {brandSet.length > 0 && (
◆ 브랜드 고유 키워드 {brandSet.length}개
{brandSet.map((k, ki) => {k})}
)} {compSet.length > 0 && (
⚔ 경쟁사 키워드 {compSet.length}개
{compSet.map((k, ki) => {k})}
동종 카테고리·유사 규모 브랜드 — 맞춤타겟 제외(브랜드 보호) 또는 경쟁 타겟팅에 활용
)}
); } function GuideStep({ n, title, desc, children, hl, wide }) { return (
{n}
{title}
{desc &&
{desc}
}
{children}
); } /* === Compute analysis === */ // Improve-2(예측-실측 대사 로그): 이 브랜드가 이미 tier-A 실측(measuredProfile)이면 정답을 이미 아는 것이라 // 기록 의미가 없어 스킵한다 — categoryPriors 풀링 추정(tier-C)에 의존하는 분석에서만 "지금 우리가 믿는 값"을 // 예측으로 남겨, 나중에 그 카테고리에 실측이 들어오면 대사(PredictionReconcilePanel)할 수 있게 한다. function recordCategoryPrediction(result, input) { if (!window.SampleLedger || !window.BrandProfiles || result.measuredProfile) return; const cat = (result.brandMetaProfile && result.brandMetaProfile.category) || result.brandCategory || null; if (!cat) return; const priors = window.BrandProfiles.categoryPriors()[cat]; if (!priors || !priors.dims) return; ['femaleSkew', 'aov', 'mobilePct', 'repurchasePct'].forEach(metric => { const d = priors.dims[metric]; if (!d || d.mu == null) return; window.SampleLedger.recordPrediction({ cat, metric, predictedValue: d.mu, predictedStd: d.sigma, source: 'categoryPriors', brand: input.brand || null, seed: input.seed || null, }); }); } function runAnalysisCompute(input) { // If brand, use the high-fidelity precision pipeline (returns archetype + confidence) if (input.brand) { if (window.runBrandPipeline) { const brandObj = { name: input.brand, category: input.category, keywords: input.keywords, description: input.description || '' }; const pipe = window.runBrandPipeline(brandObj); return { label: input.brand, mode: 'brand', personas: pipe.personas, archetype: pipe.archetype, confidence: pipe.confidence, measuredProfile: pipe.measuredProfile || null, salesProfile: pipe.salesProfile || null, referenceProfile: pipe.referenceProfile || null, brandMetaProfile: pipe.brandMetaProfile || null, scoredLeaves: pipe.scored?.length || 0, scored: pipe.scored || [], brandCategory: input.category || '', brandKeywords: input.keywords || '', }; } const personas = window.generatePersonas ? window.generatePersonas(input, window.TAXONOMY) : []; return { label: input.brand, mode: 'brand', personas }; } else if (input.seed) { const rec = window.SimEngine.recommendFromSeed(input.seed, window.TAXONOMY); const personas = rec.suggestions.map((s, i) => ({ id: 'sp' + i, name: s.label, angle: s.tag, tier: s.leaves[0]?.startsWith('구매의도') ? 'intent' : s.leaves[0]?.startsWith('관심사') ? 'interest' : 'mobile', query: [{ op: s.op, leaves: s.leaves }], result: s.result, })); return { label: window.SimEngine.shortLabel(input.seed), mode: 'seed', personas }; } return { label: '', mode: 'none', personas: [] }; } function generateNarrative(r) { const reach = window.SimEngine.fmtN(r.finalReach); const v = r.validity >= 70 ? '우수' : r.validity >= 50 ? '양호' : '개선 필요'; const c = r.compete >= 70 ? '경합' : '여유'; return `예상 ${reach}명 도달, 클릭률 ${r.ctr}%, 전환율 ${r.conv}%. 타겟 정확도는 ${r.validity}점(${v}), 경쟁도 ${r.compete}점(${c}). 월 ${window.SimEngine.fmtKRW(r.budget)} 수준의 예산 사용이 예상됩니다.`; } function recommendedAges(r) { // pick top-3 age buckets const ages = window.SimEngine.AGES; const idx = r.ageDist .map((v, i) => ({ v, i, l: ages[i] })) .filter(x => x.l !== '비해당') .sort((a, b) => b.v - a.v) .slice(0, 3); const set = new Set(idx.map(x => x.i)); return [...set].sort((a, b) => a - b).map(i => ages[i]).join(', '); } /* === Styles === */ function WFStyles() { return ; } Object.assign(window, { Workflow });