---
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**

🤗 이 스페이스가 도움이 되셨다면 ⭐️를 눌러주세요!