|
|
<!DOCTYPE html> |
|
|
<html lang="ko"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Text to SVG 워크플로우 마스터 - 허깅페이스 스페이스</title> |
|
|
<meta name="description" content="텍스트 문서를 맥킨지/딜로이트 수준의 전문적인 비즈니스 시각화로 자동 변환하는 완전 가이드"> |
|
|
<meta name="keywords" content="Text to SVG, 워크플로우, 비즈니스 시각화, 교육, 튜토리얼"> |
|
|
|
|
|
|
|
|
<meta property="og:title" content="Text to SVG 워크플로우 마스터"> |
|
|
<meta property="og:description" content="텍스트 문서를 전문적인 비즈니스 시각화로 자동 변환하는 인터랙티브 학습 플랫폼"> |
|
|
<meta property="og:type" content="website"> |
|
|
|
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
color: white; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: clamp(2rem, 5vw, 3rem); |
|
|
font-weight: 700; |
|
|
margin-bottom: 10px; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: clamp(1rem, 3vw, 1.2rem); |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.huggingface-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
background: rgba(255,255,255,0.1); |
|
|
color: white; |
|
|
padding: 8px 16px; |
|
|
border-radius: 20px; |
|
|
margin-top: 20px; |
|
|
font-size: 0.9rem; |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.workflow-container { |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
padding: 40px; |
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2); |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.workflow-steps { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
|
|
gap: 20px; |
|
|
align-items: center; |
|
|
margin-bottom: 60px; |
|
|
} |
|
|
|
|
|
.step { |
|
|
text-align: center; |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
padding: 20px 10px; |
|
|
} |
|
|
|
|
|
.step:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.step.active { |
|
|
background: linear-gradient(145deg, #f0f9ff, #e0f2fe); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15); |
|
|
} |
|
|
|
|
|
.step-number { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(145deg, #3b82f6, #1d4ed8); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
margin: 0 auto 15px; |
|
|
position: relative; |
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.step.completed .step-number { |
|
|
background: linear-gradient(145deg, #22c55e, #16a34a); |
|
|
} |
|
|
|
|
|
.step.active .step-number { |
|
|
background: linear-gradient(145deg, #f59e0b, #d97706); |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } |
|
|
50% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.6); } |
|
|
100% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } |
|
|
} |
|
|
|
|
|
.step-title { |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
color: #1f2937; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.step-desc { |
|
|
font-size: 0.875rem; |
|
|
color: #6b7280; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
.content-area { |
|
|
background: #f8fafc; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
min-height: 500px; |
|
|
} |
|
|
|
|
|
.step-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.step-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.demo-input { |
|
|
background: white; |
|
|
border: 2px solid #e5e7eb; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
font-family: 'Monaco', 'Courier New', monospace; |
|
|
font-size: 14px; |
|
|
line-height: 1.6; |
|
|
white-space: pre-wrap; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.demo-output { |
|
|
background: #111827; |
|
|
color: #f9fafb; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
margin-top: 20px; |
|
|
font-family: 'Monaco', 'Courier New', monospace; |
|
|
font-size: 12px; |
|
|
line-height: 1.5; |
|
|
overflow-x: auto; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
|
|
|
.analysis-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.analysis-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
border-left: 4px solid #3b82f6; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.analysis-card h4 { |
|
|
color: #1f2937; |
|
|
margin-bottom: 10px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.analysis-card ul { |
|
|
list-style: none; |
|
|
color: #6b7280; |
|
|
} |
|
|
|
|
|
.analysis-card li { |
|
|
padding: 5px 0; |
|
|
position: relative; |
|
|
padding-left: 20px; |
|
|
} |
|
|
|
|
|
.analysis-card li:before { |
|
|
content: "•"; |
|
|
color: #3b82f6; |
|
|
font-weight: bold; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.doc-type-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.doc-type-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
border: 2px solid #e5e7eb; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.doc-type-card:hover { |
|
|
border-color: #3b82f6; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15); |
|
|
} |
|
|
|
|
|
.doc-type-card.selected { |
|
|
border-color: #22c55e; |
|
|
background: #f0fdf4; |
|
|
} |
|
|
|
|
|
.doc-type-title { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 600; |
|
|
color: #1f2937; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.doc-type-desc { |
|
|
color: #6b7280; |
|
|
font-size: 0.9rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.svg-preview { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
margin-top: 20px; |
|
|
border: 2px solid #e5e7eb; |
|
|
min-height: 300px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-top: 30px; |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 12px 24px; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
font-size: 1rem; |
|
|
text-decoration: none; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(145deg, #3b82f6, #1d4ed8); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: #f3f4f6; |
|
|
color: #374151; |
|
|
border: 2px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: #e5e7eb; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background: #e5e7eb; |
|
|
border-radius: 3px; |
|
|
margin: 20px 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, #3b82f6, #22c55e); |
|
|
transition: width 0.5s ease; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.feature-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(145deg, #f3f4f6, #e5e7eb); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto 15px; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.footer-info { |
|
|
background: rgba(255,255,255,0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
color: white; |
|
|
text-align: center; |
|
|
margin-top: 40px; |
|
|
} |
|
|
|
|
|
.footer-links { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.footer-link { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
padding: 8px 16px; |
|
|
border-radius: 20px; |
|
|
background: rgba(255,255,255,0.1); |
|
|
transition: all 0.3s ease; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.footer-link:hover { |
|
|
background: rgba(255,255,255,0.2); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
.workflow-container { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
width: 100%; |
|
|
max-width: 200px; |
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
|
.workflow-container { |
|
|
background: #1f2937; |
|
|
color: #f9fafb; |
|
|
} |
|
|
|
|
|
.content-area { |
|
|
background: #374151; |
|
|
} |
|
|
|
|
|
.step-title { |
|
|
color: #f9fafb; |
|
|
} |
|
|
|
|
|
.analysis-card { |
|
|
background: #374151; |
|
|
color: #f9fafb; |
|
|
} |
|
|
|
|
|
.doc-type-card { |
|
|
background: #374151; |
|
|
color: #f9fafb; |
|
|
border-color: #4b5563; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>📊 Text to SVG 워크플로우 마스터</h1> |
|
|
<p>텍스트 문서를 맥킨지/딜로이트 수준의 전문적인 비즈니스 시각화로 자동 변환하는 완전 가이드</p> |
|
|
<div class="huggingface-badge"> |
|
|
🤗 Hugging Face Space에서 호스팅 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="workflow-container"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="progressBar" style="width: 16.67%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="workflow-steps"> |
|
|
<div class="step active" data-step="1"> |
|
|
<div class="step-number">1</div> |
|
|
<div class="step-title">문서 입력</div> |
|
|
<div class="step-desc">텍스트 문서 업로드 및 전처리</div> |
|
|
</div> |
|
|
<div class="step" data-step="2"> |
|
|
<div class="step-number">2</div> |
|
|
<div class="step-title">토픽 분석</div> |
|
|
<div class="step-desc">키워드 추출 및 의도 파악</div> |
|
|
</div> |
|
|
<div class="step" data-step="3"> |
|
|
<div class="step-number">3</div> |
|
|
<div class="step-title">문서 분류</div> |
|
|
<div class="step-desc">A계열/B계열 타입 매핑</div> |
|
|
</div> |
|
|
<div class="step" data-step="4"> |
|
|
<div class="step-number">4</div> |
|
|
<div class="step-title">SVG 가이드라인</div> |
|
|
<div class="step-desc">레이아웃 및 스타일 규칙</div> |
|
|
</div> |
|
|
<div class="step" data-step="5"> |
|
|
<div class="step-number">5</div> |
|
|
<div class="step-title">프롬프트 생성</div> |
|
|
<div class="step-desc">LLM 최적화 프롬프트</div> |
|
|
</div> |
|
|
<div class="step" data-step="6"> |
|
|
<div class="step-number">6</div> |
|
|
<div class="step-title">SVG 출력</div> |
|
|
<div class="step-desc">최종 시각화 생성</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content-area"> |
|
|
|
|
|
<div class="step-content active" id="step1"> |
|
|
<h2>🔄 STEP 1: 문서 입력 및 전처리</h2> |
|
|
<p>다양한 형태의 텍스트 문서를 입력받아 분석 가능한 형태로 전처리합니다.</p> |
|
|
|
|
|
<h3>📄 예시 입력 문서</h3> |
|
|
<div class="demo-input" id="sampleInput">2024년 3분기 경영 성과 요약 |
|
|
|
|
|
주요 KPI: |
|
|
- 매출액: 12.3조원 (목표: 11.5조, YoY +8.2%) |
|
|
- 영업이익: 1.8조원 (목표: 1.6조, YoY +12.5%) |
|
|
- 순이익: 1.2조원 (목표: 1.1조, YoY +9.1%) |
|
|
- ROE: 14.2% (목표: 13.0%, YoY +1.8%p) |
|
|
|
|
|
월별 실적 추이: |
|
|
7월: 매출 4.1조, 영업이익 0.6조 |
|
|
8월: 매출 4.0조, 영업이익 0.5조 |
|
|
9월: 매출 4.2조, 영업이익 0.7조 |
|
|
|
|
|
핵심 인사이트: |
|
|
- 프리미엄 제품 판매 증가로 수익성 개선 |
|
|
- 디지털 채널 매출 비중 35% 달성 |
|
|
- 해외 사업 확장으로 신규 고객 확보</div> |
|
|
|
|
|
<div class="feature-grid"> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">📝</div> |
|
|
<h4>지원 포맷</h4> |
|
|
<p>.txt, .docx, .pdf, .md</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">🔍</div> |
|
|
<h4>자동 인식</h4> |
|
|
<p>제목, 리스트, 데이터 패턴</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">⚡</div> |
|
|
<h4>실시간 처리</h4> |
|
|
<p>즉시 분석 및 피드백</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-content" id="step2"> |
|
|
<h2>🧠 STEP 2: 토픽 분석 및 키워드 추출</h2> |
|
|
<p>문서 내용을 분석하여 핵심 키워드와 의도를 파악합니다.</p> |
|
|
|
|
|
<div class="analysis-grid"> |
|
|
<div class="analysis-card"> |
|
|
<h4>🔑 추출된 키워드</h4> |
|
|
<ul> |
|
|
<li>KPI, 경영, 성과</li> |
|
|
<li>목표, 실적, YoY</li> |
|
|
<li>매출, 영업이익</li> |
|
|
<li>디지털, 해외사업</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>📊 데이터 패턴</h4> |
|
|
<ul> |
|
|
<li>금액: 조원 단위</li> |
|
|
<li>비율: 백분율</li> |
|
|
<li>증감: YoY 비교</li> |
|
|
<li>시계열: 월별 추이</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>👥 타겟 청중</h4> |
|
|
<ul> |
|
|
<li>경영진 대상</li> |
|
|
<li>의사결정 지원</li> |
|
|
<li>요약 보고 형태</li> |
|
|
<li>액션 아이템 필요</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>⏰ 시간 특성</h4> |
|
|
<ul> |
|
|
<li>분기별 정기 보고</li> |
|
|
<li>실시간 모니터링</li> |
|
|
<li>목표 대비 추적</li> |
|
|
<li>트렌드 분석</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-content" id="step3"> |
|
|
<h2>🎯 STEP 3: 문서 타입 분류</h2> |
|
|
<p>분석 결과를 바탕으로 최적의 문서 타입을 선택합니다.</p> |
|
|
|
|
|
<div class="doc-type-grid"> |
|
|
<div class="doc-type-card selected"> |
|
|
<div class="doc-type-title">A1-1: 경영진 KPI 대시보드</div> |
|
|
<div class="doc-type-desc"> |
|
|
<strong>매칭 점수: 95%</strong><br> |
|
|
• KPI 중심 구성<br> |
|
|
• 목표 대비 실적<br> |
|
|
• 경영진 타겟<br> |
|
|
• 의사결정 지원 |
|
|
</div> |
|
|
</div> |
|
|
<div class="doc-type-card"> |
|
|
<div class="doc-type-title">A1-2: 재무 성과 대시보드</div> |
|
|
<div class="doc-type-desc"> |
|
|
<strong>매칭 점수: 78%</strong><br> |
|
|
• 재무 지표 포함<br> |
|
|
• 수익성 분석<br> |
|
|
• 폭포차트 적합<br> |
|
|
• 비용 구조 누락 |
|
|
</div> |
|
|
</div> |
|
|
<div class="doc-type-card"> |
|
|
<div class="doc-type-title">A3-1: IR 요약 자료</div> |
|
|
<div class="doc-type-desc"> |
|
|
<strong>매칭 점수: 65%</strong><br> |
|
|
• 성장 지표 있음<br> |
|
|
• 투자자 관점 부족<br> |
|
|
• 전망 정보 없음<br> |
|
|
• 스토리 부족 |
|
|
</div> |
|
|
</div> |
|
|
<div class="doc-type-card"> |
|
|
<div class="doc-type-title">B1-1: 사업계획서</div> |
|
|
<div class="doc-type-desc"> |
|
|
<strong>매칭 점수: 35%</strong><br> |
|
|
• 현황 보고 형태<br> |
|
|
• 계획 요소 없음<br> |
|
|
• 전략 내용 부족<br> |
|
|
• 실행 계획 없음 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="demo-output">분류 결과: A1-1 (경영진 KPI 대시보드) |
|
|
|
|
|
매칭 이유: |
|
|
✓ KPI 키워드 다수 발견 (매출, 영업이익, ROE) |
|
|
✓ 목표 대비 실적 비교 구조 |
|
|
✓ 경영진 대상 요약 보고 형태 |
|
|
✓ YoY 증감 분석 포함 |
|
|
✓ 액션 가능한 인사이트 제시 |
|
|
|
|
|
레이아웃 권장사항: |
|
|
→ 좌측: KPI 카드 2×2 배치 |
|
|
→ 우측: 월별 콤보차트 |
|
|
→ 하단: 인사이트 콜아웃</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-content" id="step4"> |
|
|
<h2>🎨 STEP 4: SVG 가이드라인 적용</h2> |
|
|
<p>A1-1 타입에 최적화된 레이아웃과 스타일 규칙을 적용합니다.</p> |
|
|
|
|
|
<div class="analysis-grid"> |
|
|
<div class="analysis-card"> |
|
|
<h4>📐 레이아웃 스펙</h4> |
|
|
<ul> |
|
|
<li>캔버스: 1600×900px</li> |
|
|
<li>안전여백: 상하60, 좌우80</li> |
|
|
<li>12-컬럼 그리드</li> |
|
|
<li>헤더 120px 고정</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>🎯 구성 요소</h4> |
|
|
<ul> |
|
|
<li>KPI 카드: 280×140px</li> |
|
|
<li>콤보차트: 860×520px</li> |
|
|
<li>콜아웃: 260×80px</li> |
|
|
<li>푸터: 100px</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>📝 타이포그래피</h4> |
|
|
<ul> |
|
|
<li>H1: 48px (제목)</li> |
|
|
<li>H2: 32px (KPI 값)</li> |
|
|
<li>Body: 18px (설명)</li> |
|
|
<li>Label: 14px (라벨)</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>🎨 컬러 시스템</h4> |
|
|
<ul> |
|
|
<li>Positive: #22C55E</li> |
|
|
<li>Neutral: #3B82F6</li> |
|
|
<li>Warning: #F59E0B</li> |
|
|
<li>Negative: #EF4444</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="svg-preview"> |
|
|
<svg viewBox="0 0 800 450" style="border: 1px solid #e5e7eb; width: 100%; max-width: 800px;"> |
|
|
|
|
|
<text x="40" y="50" font-size="24" font-weight="bold" fill="#111827">2024년 3분기 경영 성과 대시보드</text> |
|
|
<text x="40" y="70" font-size="12" fill="#6b7280">2024년 9월 기준</text> |
|
|
|
|
|
|
|
|
<g transform="translate(40, 90)"> |
|
|
<rect width="140" height="70" rx="4" fill="#f9fafb" stroke="#e5e7eb"/> |
|
|
<text x="8" y="16" font-size="8" fill="#6b7280">매출액</text> |
|
|
<text x="8" y="34" font-size="16" font-weight="bold" fill="#111827">₩12.3조</text> |
|
|
<text x="8" y="46" font-size="8" fill="#22c55e">▲ 8.2% YoY</text> |
|
|
</g> |
|
|
|
|
|
<g transform="translate(190, 90)"> |
|
|
<rect width="140" height="70" rx="4" fill="#f9fafb" stroke="#e5e7eb"/> |
|
|
<text x="8" y="16" font-size="8" fill="#6b7280">영업이익</text> |
|
|
<text x="8" y="34" font-size="16" font-weight="bold" fill="#111827">₩1.8조</text> |
|
|
<text x="8" y="46" font-size="8" fill="#22c55e">▲ 12.5% YoY</text> |
|
|
</g> |
|
|
|
|
|
|
|
|
<g transform="translate(350, 90)"> |
|
|
<rect width="400" height="250" rx="4" fill="#f8fafc" stroke="#e5e7eb"/> |
|
|
<text x="200" y="20" font-size="12" font-weight="bold" text-anchor="middle" fill="#111827">월별 실적 추이</text> |
|
|
|
|
|
|
|
|
<rect x="50" y="180" width="30" height="60" fill="#3b82f6"/> |
|
|
<rect x="120" y="190" width="30" height="50" fill="#3b82f6"/> |
|
|
<rect x="190" y="170" width="30" height="70" fill="#3b82f6"/> |
|
|
|
|
|
|
|
|
<text x="65" y="255" font-size="8" text-anchor="middle" fill="#6b7280">7월</text> |
|
|
<text x="135" y="255" font-size="8" text-anchor="middle" fill="#6b7280">8월</text> |
|
|
<text x="205" y="255" font-size="8" text-anchor="middle" fill="#6b7280">9월</text> |
|
|
</g> |
|
|
|
|
|
|
|
|
<g transform="translate(40, 370)"> |
|
|
<rect width="240" height="30" rx="4" fill="#f0fdf4" stroke="#22c55e"/> |
|
|
<text x="8" y="12" font-size="7" fill="#15803d">주요 성과</text> |
|
|
<text x="8" y="22" font-size="8" fill="#111827">프리미엄 제품 판매 증가로 수익성 개선</text> |
|
|
</g> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-content" id="step5"> |
|
|
<h2>⚡ STEP 5: 프롬프트 엔지니어링</h2> |
|
|
<p>LLM이 최적의 SVG를 생성할 수 있도록 정교한 프롬프트를 구성합니다.</p> |
|
|
|
|
|
<div class="demo-output">다음 데이터로 경영진 KPI 대시보드(A1-1)를 생성하세요: |
|
|
|
|
|
**레이아웃 요구사항:** |
|
|
- viewBox: 0 0 1600 900 |
|
|
- 헤더(120px): 제목 "2024년 3분기 경영 성과 대시보드" + "2024년 9월 기준" |
|
|
- 좌측 L4: KPI 카드 2×2 (각 280×140px) |
|
|
- 우측 L8: 월별 콤보차트 (860×520px) |
|
|
- 하단: 인사이트 콜아웃 3개 |
|
|
|
|
|
**KPI 카드 스펙:** |
|
|
1. 매출액: ₩12.3조, 목표 대비 +7%, YoY +8.2% (녹색 ▲) |
|
|
2. 영업이익: ₩1.8조, 목표 대비 +13%, YoY +12.5% (녹색 ▲) |
|
|
3. 순이익: ₩1.2조, 목표 대비 +9%, YoY +9.1% (녹색 ▲) |
|
|
4. ROE: 14.2%, 목표 대비 +1.2%p, YoY +1.8%p (녹색 ▲) |
|
|
|
|
|
**콤보차트 데이터:** |
|
|
- 7월: 매출 ₩4.1조, 영업이익 ₩0.6조 |
|
|
- 8월: 매출 ₩4.0조, 영업이익 ₩0.5조 |
|
|
- 9월: 매출 ₩4.2조, 영업이익 ₩0.7조 |
|
|
|
|
|
**색상 가이드라인:** |
|
|
- 양수/목표초과: #22C55E (녹색) |
|
|
- 중립/기본: #3B82F6 (파랑) |
|
|
- 배경/테두리: #F9FAFB/#E5E7EB |
|
|
|
|
|
SVG를 생성하세요.</div> |
|
|
|
|
|
<div class="analysis-grid"> |
|
|
<div class="analysis-card"> |
|
|
<h4>🎯 프롬프트 최적화</h4> |
|
|
<ul> |
|
|
<li>구체적 픽셀 값 명시</li> |
|
|
<li>색상 코드 정확 지정</li> |
|
|
<li>데이터 구조화</li> |
|
|
<li>검증 규칙 포함</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>🔍 Few-Shot Learning</h4> |
|
|
<ul> |
|
|
<li>우수 사례 예제</li> |
|
|
<li>실패 사례 방지</li> |
|
|
<li>단계별 사고과정</li> |
|
|
<li>반복 개선 로직</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step-content" id="step6"> |
|
|
<h2>🎉 STEP 6: 최종 SVG 생성 및 검증</h2> |
|
|
<p>LLM이 생성한 SVG를 검증하고 파워포인트로 변환합니다.</p> |
|
|
|
|
|
<div class="analysis-grid"> |
|
|
<div class="analysis-card"> |
|
|
<h4>✅ 품질 검증</h4> |
|
|
<ul> |
|
|
<li>XML 구문 유효성</li> |
|
|
<li>viewBox 형식 확인</li> |
|
|
<li>그리드 정렬 검사</li> |
|
|
<li>색상 준수 확인</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>🔄 자동 수정</h4> |
|
|
<ul> |
|
|
<li>접근성 개선</li> |
|
|
<li>브랜드 가이드 적용</li> |
|
|
<li>데이터 무결성 검증</li> |
|
|
<li>반복 개선</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>📊 파워포인트 변환</h4> |
|
|
<ul> |
|
|
<li>고해상도 PNG 변환</li> |
|
|
<li>편집 가능 요소 추출</li> |
|
|
<li>스피커 노트 생성</li> |
|
|
<li>애니메이션 추가</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="analysis-card"> |
|
|
<h4>🚀 배포 준비</h4> |
|
|
<ul> |
|
|
<li>템플릿 저장</li> |
|
|
<li>데이터 연동 설정</li> |
|
|
<li>자동화 스크립트</li> |
|
|
<li>품질 모니터링</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="svg-preview"> |
|
|
<div style="text-align: center; color: #22c55e; font-size: 3rem; margin: 50px 0;"> |
|
|
✅ |
|
|
</div> |
|
|
<div style="text-align: center;"> |
|
|
<h3 style="color: #1f2937; margin-bottom: 10px;">SVG 생성 완료!</h3> |
|
|
<p style="color: #6b7280;">맥킨지/딜로이트 수준의 전문적인 대시보드가 생성되었습니다.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="controls"> |
|
|
<button class="btn btn-secondary" id="prevBtn" onclick="previousStep()">← 이전</button> |
|
|
<button class="btn btn-primary" id="nextBtn" onclick="nextStep()">다음 →</button> |
|
|
<button class="btn btn-primary" id="startOver" onclick="startOver()" style="display: none;">🔄 처음부터</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="workflow-container"> |
|
|
<div class="feature-grid"> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">🎯</div> |
|
|
<h4>정확한 분류</h4> |
|
|
<p>25가지 문서 타입 자동 매핑</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">⚡</div> |
|
|
<h4>빠른 생성</h4> |
|
|
<p>30초 내 전문 시각화 완성</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">🎨</div> |
|
|
<h4>일관된 디자인</h4> |
|
|
<p>맥킨지/딜로이트 수준 품질</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon">🔧</div> |
|
|
<h4>편집 용이</h4> |
|
|
<p>파워포인트 완벽 호환</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="footer-info"> |
|
|
<h3>🚀 추가 리소스</h3> |
|
|
<p>Text to SVG 워크플로우를 완전히 마스터하는 데 필요한 모든 자료들</p> |
|
|
|
|
|
<div class="footer-links"> |
|
|
<a href="#" class="footer-link">📄 상세 교육자료</a> |
|
|
<a href="#" class="footer-link">💻 Jupyter Notebook</a> |
|
|
<a href="#" class="footer-link">📊 파워포인트 자료</a> |
|
|
<a href="#" class="footer-link">🤗 GitHub 저장소</a> |
|
|
</div> |
|
|
|
|
|
<p style="margin-top: 20px; font-size: 0.9rem; opacity: 0.8;"> |
|
|
© 2024 Text to SVG 워크플로우 마스터 | Hugging Face Space에서 호스팅 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let currentStep = 1; |
|
|
const totalSteps = 6; |
|
|
|
|
|
function updateProgress() { |
|
|
const progressPercent = (currentStep / totalSteps) * 100; |
|
|
document.getElementById('progressBar').style.width = progressPercent + '%'; |
|
|
} |
|
|
|
|
|
function updateStepDisplay() { |
|
|
|
|
|
document.querySelectorAll('.step').forEach(step => { |
|
|
step.classList.remove('active', 'completed'); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.step-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector(`[data-step="${currentStep}"]`).classList.add('active'); |
|
|
document.getElementById(`step${currentStep}`).classList.add('active'); |
|
|
|
|
|
|
|
|
for (let i = 1; i < currentStep; i++) { |
|
|
document.querySelector(`[data-step="${i}"]`).classList.add('completed'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('prevBtn').style.display = currentStep === 1 ? 'none' : 'inline-flex'; |
|
|
document.getElementById('nextBtn').style.display = currentStep === totalSteps ? 'none' : 'inline-flex'; |
|
|
document.getElementById('startOver').style.display = currentStep === totalSteps ? 'inline-flex' : 'none'; |
|
|
|
|
|
updateProgress(); |
|
|
} |
|
|
|
|
|
function nextStep() { |
|
|
if (currentStep < totalSteps) { |
|
|
currentStep++; |
|
|
updateStepDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
function previousStep() { |
|
|
if (currentStep > 1) { |
|
|
currentStep--; |
|
|
updateStepDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
function startOver() { |
|
|
currentStep = 1; |
|
|
updateStepDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.step').forEach(step => { |
|
|
step.addEventListener('click', function() { |
|
|
const stepNumber = parseInt(this.getAttribute('data-step')); |
|
|
if (stepNumber <= currentStep + 1) { |
|
|
currentStep = stepNumber; |
|
|
updateStepDisplay(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(event) { |
|
|
if (event.key === 'ArrowRight' && currentStep < totalSteps) { |
|
|
nextStep(); |
|
|
} else if (event.key === 'ArrowLeft' && currentStep > 1) { |
|
|
previousStep(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
updateStepDisplay(); |
|
|
|
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
console.log('🤗 Hugging Face Space에서 Text to SVG 워크플로우 마스터를 시작합니다!'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
