jeongkee/text-to-svg-workflow-tutorial

📊 Text to SVG 워크플로우 마스터

텍스트 문서를 맥킨지/딜로이트 수준의 전문적인 비즈니스 시각화로 자동 변환하는 완전한 워크플로우를 학습할 수 있는 인터랙티브 교육 플랫폼입니다.

🎯 주요 기능

📚 6단계 완전 워크플로우

1. 1.문서 입력: 텍스트 문서 업로드 및 전처리
2. 2.토픽 분석: 키워드 추출 및 의도 파악
3. 3.문서 분류: A계열/B계열 25가지 타입 자동 매핑
4. 4.SVG 가이드라인: 레이아웃 및 스타일 규칙 적용
5. 5.프롬프트 생성: LLM 최적화 프롬프트 엔지니어링
6. 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. 1.📄 상세 교육자료: 전체 워크플로우 가이드 (Markdown)
2. 2.📊 파워포인트 자료: 강의용 슬라이드 (9개 슬라이드)
3. 3.💻 Jupyter Notebook: 코드 실습서 (단계별 구현)
4. 4.🎛️ React 대시보드: 고급 인터랙티브 버전

🤝 기여하기

이 프로젝트에 기여하고 싶으시면:

1. 1.피드백 제공: 개선 사항이나 버그 신고
2. 2.문서 번역: 다국어 지원 확장
3. 3.새 문서 타입: 추가 비즈니스 문서 타입 제안
4. 4.성능 최적화: 로딩 속도 및 사용성 개선

📜 라이선스

Apache License 2.0 - 자유롭게 사용, 수정, 배포 가능합니다.

🔗 연관 프로젝트

• —Text to SVG 워크플로우 GitHub
• —SVG 가이드라인 시스템
• —비즈니스 시각화 템플릿

Made with ❤️ for the business visualization community

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