metadata
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단계 완전 워크플로우
- 문서 입력: 텍스트 문서 업로드 및 전처리
- 토픽 분석: 키워드 추출 및 의도 파악
- 문서 분류: A계열/B계열 25가지 타입 자동 매핑
- SVG 가이드라인: 레이아웃 및 스타일 규칙 적용
- 프롬프트 생성: LLM 최적화 프롬프트 엔지니어링
- 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 워크플로우 교육 시리즈의 일부입니다:
- 📄 상세 교육자료: 전체 워크플로우 가이드 (Markdown)
- 📊 파워포인트 자료: 강의용 슬라이드 (9개 슬라이드)
- 💻 Jupyter Notebook: 코드 실습서 (단계별 구현)
- 🎛️ React 대시보드: 고급 인터랙티브 버전
🤝 기여하기
이 프로젝트에 기여하고 싶으시면:
- 피드백 제공: 개선 사항이나 버그 신고
- 문서 번역: 다국어 지원 확장
- 새 문서 타입: 추가 비즈니스 문서 타입 제안
- 성능 최적화: 로딩 속도 및 사용성 개선
📜 라이선스
Apache License 2.0 - 자유롭게 사용, 수정, 배포 가능합니다.
🔗 연관 프로젝트
Made with ❤️ for the business visualization community
🤗 이 스페이스가 도움이 되셨다면 ⭐️를 눌러주세요!