|
|
--- |
|
|
title: Text to SVG 워크플로우 마스터 |
|
|
emoji: 📊 |
|
|
colorFrom: blue |
|
|
colorTo: purple |
|
|
sdk: static |
|
|
pinned: false |
|
|
app_file: index.html |
|
|
license: apache-2.0 |
|
|
tags: |
|
|
- text-to-svg |
|
|
- workflow |
|
|
- business-visualization |
|
|
- education |
|
|
- tutorial |
|
|
- korean |
|
|
--- |
|
|
|
|
|
# 📊 Text to SVG 워크플로우 마스터 |
|
|
|
|
|
텍스트 문서를 **맥킨지/딜로이트 수준의 전문적인 비즈니스 시각화**로 자동 변환하는 완전한 워크플로우를 학습할 수 있는 인터랙티브 교육 플랫폼입니다. |
|
|
|
|
|
## 🎯 주요 기능 |
|
|
|
|
|
### 📚 **6단계 완전 워크플로우** |
|
|
1. **문서 입력**: 텍스트 문서 업로드 및 전처리 |
|
|
2. **토픽 분석**: 키워드 추출 및 의도 파악 |
|
|
3. **문서 분류**: A계열/B계열 25가지 타입 자동 매핑 |
|
|
4. **SVG 가이드라인**: 레이아웃 및 스타일 규칙 적용 |
|
|
5. **프롬프트 생성**: LLM 최적화 프롬프트 엔지니어링 |
|
|
6. **SVG 출력**: 최종 시각화 생성 및 검증 |
|
|
|
|
|
### 🎨 **전문적인 디자인 시스템** |
|
|
- **글로벌 레이아웃**: 1600×900 캔버스, 12-컬럼 그리드 |
|
|
- **타이포그래피**: H1(48px)~Caption(12px) 6단계 스케일 |
|
|
- **컬러 시스템**: 의미색 4톤 + 중립 팔레트 제한 |
|
|
- **접근성**: WCAG 4.5:1 명도 대비, 색 독립성 지원 |
|
|
|
|
|
### 📋 **25가지 문서 타입 지원** |
|
|
|
|
|
#### **A계열: 대시보드형** (실시간 모니터링) |
|
|
- **A1**: 경영진 보고 (KPI, 재무성과, 전략요약, 이사회) |
|
|
- **A2**: 운영진 관리 (업무보고, 프로젝트현황, 품질안전, HR) |
|
|
- **A3**: 투자자 소통 (IR요약, 투자성과) |
|
|
- **A4**: 회의 지원 (경영회의, 부서회의) |
|
|
|
|
|
#### **B계열: 상세문서형** (분석 및 설득) |
|
|
- **B1**: 기획서 (사업계획, 마케팅전략, 신사업, 예산) |
|
|
- **B2**: 제안서 (영업제안, 프로젝트제안, 입찰, 컨설팅) |
|
|
- **B3**: 피치/IR (피치덱, IR상세, 투자제안) |
|
|
- **B4**: 교육자료 (직무교육, 워크숍) |
|
|
- **B5**: 회사소개 (회사소개서, 기술사양서) |
|
|
|
|
|
## 🚀 사용 방법 |
|
|
|
|
|
### **1. 즉시 체험** |
|
|
스페이스를 열면 바로 인터랙티브 튜토리얼이 시작됩니다. 6단계를 순서대로 진행하며 전체 워크플로우를 체험해보세요. |
|
|
|
|
|
### **2. 실제 문서로 실습** |
|
|
제공된 예시 문서를 수정하거나 본인의 문서를 입력하여 실제 분류 과정을 확인할 수 있습니다. |
|
|
|
|
|
### **3. 각 단계별 학습** |
|
|
- 키보드 화살표키로 단계 이동 |
|
|
- 각 단계 클릭으로 직접 이동 |
|
|
- 모바일 터치 지원 |
|
|
|
|
|
## 📊 실습 예제: A1-1 경영진 KPI 대시보드 |
|
|
|
|
|
### **입력 문서** |
|
|
``` |
|
|
2024년 3분기 경영 성과 요약 |
|
|
|
|
|
주요 KPI: |
|
|
- 매출액: 12.3조원 (목표: 11.5조, YoY +8.2%) |
|
|
- 영업이익: 1.8조원 (목표: 1.6조, YoY +12.5%) |
|
|
- 순이익: 1.2조원 (목표: 1.1조, YoY +9.1%) |
|
|
|
|
|
월별 실적 추이: |
|
|
7월: 매출 4.1조, 영업이익 0.6조 |
|
|
8월: 매출 4.0조, 영업이익 0.5조 |
|
|
9월: 매출 4.2조, 영업이익 0.7조 |
|
|
|
|
|
핵심 인사이트: |
|
|
- 프리미엄 제품 판매 증가로 수익성 개선 |
|
|
- 디지털 채널 매출 비중 35% 달성 |
|
|
``` |
|
|
|
|
|
### **분류 결과** |
|
|
- **문서 타입**: A1-1 (경영진 KPI 대시보드) |
|
|
- **매칭 점수**: 95% |
|
|
- **권장 레이아웃**: 좌측 KPI 카드 2×2, 우측 콤보차트, 하단 인사이트 |
|
|
|
|
|
## 🎓 학습 목표 |
|
|
|
|
|
이 튜토리얼을 완료하면 다음을 마스터하게 됩니다: |
|
|
|
|
|
✅ **25가지 문서 타입** 자동 분류 |
|
|
✅ **맥킨지/딜로이트 수준** 시각화 생성 |
|
|
✅ **30초 내** 전문 대시보드 완성 |
|
|
✅ **파워포인트** 완벽 호환 |
|
|
✅ **프롬프트 엔지니어링** 기법 |
|
|
✅ **품질 검증 시스템** 구축 |
|
|
|
|
|
## 🔧 기술 스택 |
|
|
|
|
|
- **Frontend**: HTML5, CSS3, Vanilla JavaScript |
|
|
- **Design**: 반응형 디자인, 다크모드 지원 |
|
|
- **Accessibility**: WCAG 2.1 AA 준수 |
|
|
- **Performance**: 최적화된 애니메이션, 모바일 친화적 |
|
|
|
|
|
## 📱 지원 환경 |
|
|
|
|
|
- **데스크톱**: Chrome, Firefox, Safari, Edge (최신 버전) |
|
|
- **모바일**: iOS Safari, Android Chrome |
|
|
- **태블릿**: 터치 인터페이스 최적화 |
|
|
- **키보드 네비게이션**: 화살표키 지원 |
|
|
|
|
|
## 🌐 다국어 지원 |
|
|
|
|
|
현재 한국어로 제공되며, 향후 영어, 일본어, 중국어 지원 예정입니다. |
|
|
|
|
|
## 📄 추가 리소스 |
|
|
|
|
|
이 스페이스는 포괄적인 Text to SVG 워크플로우 교육 시리즈의 일부입니다: |
|
|
|
|
|
1. **📄 상세 교육자료**: 전체 워크플로우 가이드 (Markdown) |
|
|
2. **📊 파워포인트 자료**: 강의용 슬라이드 (9개 슬라이드) |
|
|
3. **💻 Jupyter Notebook**: 코드 실습서 (단계별 구현) |
|
|
4. **🎛️ React 대시보드**: 고급 인터랙티브 버전 |
|
|
|
|
|
## 🤝 기여하기 |
|
|
|
|
|
이 프로젝트에 기여하고 싶으시면: |
|
|
|
|
|
1. **피드백 제공**: 개선 사항이나 버그 신고 |
|
|
2. **문서 번역**: 다국어 지원 확장 |
|
|
3. **새 문서 타입**: 추가 비즈니스 문서 타입 제안 |
|
|
4. **성능 최적화**: 로딩 속도 및 사용성 개선 |
|
|
|
|
|
## 📜 라이선스 |
|
|
|
|
|
Apache License 2.0 - 자유롭게 사용, 수정, 배포 가능합니다. |
|
|
|
|
|
## 🔗 연관 프로젝트 |
|
|
|
|
|
- [Text to SVG 워크플로우 GitHub](https://github.com/your-username/text-to-svg-workflow) |
|
|
- [SVG 가이드라인 시스템](https://github.com/your-username/svg-guidelines) |
|
|
- [비즈니스 시각화 템플릿](https://github.com/your-username/business-viz-templates) |
|
|
|
|
|
--- |
|
|
|
|
|
**Made with ❤️ for the business visualization community** |
|
|
|
|
|
🤗 이 스페이스가 도움이 되셨다면 ⭐️를 눌러주세요! |
