chart mmd -> png
@ -1,151 +0,0 @@
|
|||||||
# Mermaid 차트 이미지 변환 가이드
|
|
||||||
|
|
||||||
이 디렉토리에는 시장조사 보고서의 Mermaid 차트 파일들이 있습니다.
|
|
||||||
|
|
||||||
## 📊 차트 목록
|
|
||||||
|
|
||||||
총 **14개의 차트**가 포함되어 있습니다:
|
|
||||||
|
|
||||||
1. 소상공인 업종별 분포 (Pie Chart)
|
|
||||||
2. 1차 타겟 세그먼트 규모 비교 (Flow Diagram)
|
|
||||||
3. 디지털 전환 현황 (Pie Chart)
|
|
||||||
4. 소상공인 주요 스트레스 요인 (Bar Chart)
|
|
||||||
5. 카카오톡 채널 마케팅 효과 (Flow Chart)
|
|
||||||
6. 마케팅 자동화 시장 성장 전망 (Timeline)
|
|
||||||
7. 경쟁 우위 비교 매트릭스 (Grouped Chart)
|
|
||||||
8. AI 자동화 도입 효과 (Before/After)
|
|
||||||
9. KT 서비스 단계별 성장 전략 (Roadmap)
|
|
||||||
10. ROI 분석 - 연간 매출 전망 (Bar Chart)
|
|
||||||
11. Pain Point 해결 맵핑 (Flow Mapping)
|
|
||||||
12. 타겟 고객 페르소나 분포 (Pie Chart)
|
|
||||||
13. KT 차별화 포인트 (Hierarchy)
|
|
||||||
14. 서비스 가치 제안 구조 (Layered Architecture)
|
|
||||||
|
|
||||||
## 🎨 PNG/SVG 이미지로 변환하는 방법
|
|
||||||
|
|
||||||
### 방법 1: Mermaid Live Editor (추천)
|
|
||||||
|
|
||||||
**가장 쉽고 빠른 방법입니다!**
|
|
||||||
|
|
||||||
1. **Mermaid Live Editor 접속**: https://mermaid.live/
|
|
||||||
2. 왼쪽 편집기에 `.mmd` 파일 내용을 복사-붙여넣기
|
|
||||||
3. 오른쪽에서 차트 미리보기 확인
|
|
||||||
4. 상단 메뉴에서 **Actions** → **Export PNG** 또는 **Export SVG** 클릭
|
|
||||||
5. 이미지 파일 다운로드
|
|
||||||
|
|
||||||
### 방법 2: VS Code Extension
|
|
||||||
|
|
||||||
VS Code를 사용하는 경우:
|
|
||||||
|
|
||||||
1. **Mermaid Preview** 확장 설치
|
|
||||||
- 확장 ID: `bierner.markdown-mermaid`
|
|
||||||
2. `.mmd` 파일을 VS Code에서 열기
|
|
||||||
3. 미리보기 창에서 우클릭 → **Export to PNG/SVG**
|
|
||||||
|
|
||||||
### 방법 3: Mermaid CLI (고급 사용자용)
|
|
||||||
|
|
||||||
Node.js가 설치되어 있다면:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Mermaid CLI 설치
|
|
||||||
npm install -g @mermaid-js/mermaid-cli
|
|
||||||
|
|
||||||
# PNG로 변환
|
|
||||||
mmdc -i chart01_소상공인_업종별_분포.mmd -o chart01_소상공인_업종별_분포.png
|
|
||||||
|
|
||||||
# SVG로 변환
|
|
||||||
mmdc -i chart01_소상공인_업종별_분포.mmd -o chart01_소상공인_업종별_분포.svg
|
|
||||||
|
|
||||||
# 전체 차트 일괄 변환
|
|
||||||
for file in *.mmd; do
|
|
||||||
mmdc -i "$file" -o "${file%.mmd}.png"
|
|
||||||
done
|
|
||||||
```
|
|
||||||
|
|
||||||
### 방법 4: 온라인 변환 도구
|
|
||||||
|
|
||||||
- **Mermaid Chart**: https://www.mermaidchart.com/
|
|
||||||
- **Kroki**: https://kroki.io/
|
|
||||||
- **Diagram.codes**: https://diagram.codes/d/mermaid
|
|
||||||
|
|
||||||
## 📝 사용 팁
|
|
||||||
|
|
||||||
### 이미지 품질 설정
|
|
||||||
|
|
||||||
Mermaid CLI 사용 시 고해상도 이미지:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
mmdc -i input.mmd -o output.png -w 2000 -H 1500 -b transparent
|
|
||||||
```
|
|
||||||
|
|
||||||
- `-w`: 너비 (픽셀)
|
|
||||||
- `-H`: 높이 (픽셀)
|
|
||||||
- `-b`: 배경색 (`transparent`, `white`, `#HEX`)
|
|
||||||
|
|
||||||
### 테마 커스터마이징
|
|
||||||
|
|
||||||
각 차트 파일 맨 위에 테마 설정이 포함되어 있습니다:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
%%{init: {'theme':'base', 'themeVariables': {...}}}%%
|
|
||||||
```
|
|
||||||
|
|
||||||
필요시 색상을 조정할 수 있습니다.
|
|
||||||
|
|
||||||
## 📂 파일 구조
|
|
||||||
|
|
||||||
```
|
|
||||||
define/charts/
|
|
||||||
├── README.md (이 파일)
|
|
||||||
├── chart01_소상공인_업종별_분포.mmd
|
|
||||||
├── chart02_1차_타겟_세그먼트_규모_비교.mmd
|
|
||||||
├── chart03_디지털_전환_현황.mmd
|
|
||||||
├── chart04_소상공인_주요_스트레스_요인.mmd
|
|
||||||
├── chart05_카카오톡_채널_마케팅_효과.mmd
|
|
||||||
├── chart06_마케팅_자동화_시장_성장_전망.mmd
|
|
||||||
├── chart07_경쟁_우위_비교_매트릭스.mmd
|
|
||||||
├── chart08_AI_자동화_도입_효과.mmd
|
|
||||||
├── chart09_KT_서비스_단계별_성장_전략.mmd
|
|
||||||
├── chart10_ROI_분석_연간_매출_전망.mmd
|
|
||||||
├── chart11_Pain_Point_해결_맵핑.mmd
|
|
||||||
├── chart12_타겟_고객_페르소나_분포.mmd
|
|
||||||
├── chart13_KT_차별화_포인트.mmd
|
|
||||||
└── chart14_서비스_가치_제안_구조.mmd
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🎯 빠른 시작
|
|
||||||
|
|
||||||
**5분 안에 모든 차트를 이미지로 변환하기:**
|
|
||||||
|
|
||||||
1. https://mermaid.live/ 접속
|
|
||||||
2. 각 `.mmd` 파일을 하나씩 열어서 복사
|
|
||||||
3. Mermaid Live Editor에 붙여넣기
|
|
||||||
4. **Actions** → **Export PNG** 클릭
|
|
||||||
5. 파일명을 `chartXX_이름.png`로 저장
|
|
||||||
6. 14개 차트 반복
|
|
||||||
|
|
||||||
## ❓ 문제 해결
|
|
||||||
|
|
||||||
### 차트가 제대로 렌더링되지 않을 때
|
|
||||||
|
|
||||||
1. **Mermaid 버전 확인**: 최신 버전의 Mermaid Live Editor 사용
|
|
||||||
2. **문법 검증**: https://mermaid.live/에서 에러 메시지 확인
|
|
||||||
3. **특수문자 처리**: 한글이 포함된 경우 UTF-8 인코딩 확인
|
|
||||||
|
|
||||||
### CLI 설치 문제
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Node.js 버전 확인 (14 이상 필요)
|
|
||||||
node --version
|
|
||||||
|
|
||||||
# Puppeteer 의존성 문제 시
|
|
||||||
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
|
|
||||||
npm install -g @mermaid-js/mermaid-cli
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📚 추가 자료
|
|
||||||
|
|
||||||
- [Mermaid 공식 문서](https://mermaid.js.org/)
|
|
||||||
- [Mermaid Syntax Guide](https://mermaid.js.org/intro/syntax-reference.html)
|
|
||||||
- [Mermaid Live Editor](https://mermaid.live/)
|
|
||||||
- [GitHub: mermaid-js](https://github.com/mermaid-js/mermaid)
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#4CAF50','primaryTextColor':'#fff','primaryBorderColor':'#388E3C','lineColor':'#F57C00','secondaryColor':'#FFC107','tertiaryColor':'#fff'}}}%%
|
|
||||||
pie title 한국 소상공인 업종별 분포 (596만 개 업체)
|
|
||||||
"도소매업" : 33.6
|
|
||||||
"부동산/임대업" : 14.3
|
|
||||||
"외식업" : 13.3
|
|
||||||
"기타 서비스업" : 38.8
|
|
||||||
BIN
define/charts/chart01_한국 소상공인 업종별 분포.png
Normal file
|
After Width: | Height: | Size: 256 KiB |
@ -1,21 +0,0 @@
|
|||||||
graph TB
|
|
||||||
A[전체 소상공인<br/>596만 개]
|
|
||||||
B[1차 타겟: 외식업/카페<br/>79만 개 - 13.3%]
|
|
||||||
C[2차 타겟: 도소매업<br/>200만 개 - 33.6%]
|
|
||||||
D[3차 타겟: 숙박/부동산<br/>85만 개 - 14.3%]
|
|
||||||
|
|
||||||
A --> B
|
|
||||||
A --> C
|
|
||||||
A --> D
|
|
||||||
|
|
||||||
B --> B1[고용인원<br/>140만 명]
|
|
||||||
B --> B2[시장규모<br/>100조 원]
|
|
||||||
|
|
||||||
C --> C1[하이브리드<br/>매장 증가]
|
|
||||||
|
|
||||||
D --> D1[지역 관광<br/>활성화]
|
|
||||||
|
|
||||||
style A fill:#2196F3,stroke:#1976D2,color:#fff
|
|
||||||
style B fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style C fill:#FF9800,stroke:#F57C00,color:#fff
|
|
||||||
style D fill:#9C27B0,stroke:#7B1FA2,color:#fff
|
|
||||||
BIN
define/charts/chart02_1차_타겟_세그먼트_규모_비교.png
Normal file
|
After Width: | Height: | Size: 221 KiB |
@ -1,4 +0,0 @@
|
|||||||
%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#2196F3','primaryTextColor':'#fff'}}}%%
|
|
||||||
pie title 코로나19 이후 디지털화 증가 현황
|
|
||||||
"디지털화 증가" : 45.5
|
|
||||||
"변화 없음/감소" : 54.5
|
|
||||||
BIN
define/charts/chart03_디지털_전환_현황.png
Normal file
|
After Width: | Height: | Size: 223 KiB |
@ -1,6 +0,0 @@
|
|||||||
%%{init: {'theme':'base', 'themeVariables': {'xyChart': {'plotColorPalette': '#2196F3'}}}}%%
|
|
||||||
xychart-beta
|
|
||||||
title "소상공인 업무별 스트레스 비율"
|
|
||||||
x-axis ["직원관리", "비용관리", "매장홍보", "기타"]
|
|
||||||
y-axis "응답 비율 (%)" 0 --> 70
|
|
||||||
bar [65.1, 50.5, 20.2, 15]
|
|
||||||
BIN
define/charts/chart04_소상공인_주요_스트레스_요인.png
Normal file
|
After Width: | Height: | Size: 150 KiB |
@ -1,9 +0,0 @@
|
|||||||
graph LR
|
|
||||||
A[카카오톡 채널<br/>메시지 발송] --> B[열람률<br/>75%+]
|
|
||||||
A --> C[구매전환율<br/>40%]
|
|
||||||
A --> D[발송당일<br/>매출 2.4배]
|
|
||||||
|
|
||||||
style A fill:#FEE500,stroke:#F9E000,color:#000
|
|
||||||
style B fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style C fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style D fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
BIN
define/charts/chart05_카카오톡_채널_마케팅_효과chart05_카카오톡_채널_마케팅_효과.png
Normal file
|
After Width: | Height: | Size: 122 KiB |
@ -1,12 +0,0 @@
|
|||||||
graph LR
|
|
||||||
A[2024년<br/>4억 달러] --> B[2027년<br/>5.3억 달러]
|
|
||||||
B --> C[2030년<br/>7억 달러]
|
|
||||||
C --> D[2033년<br/>9억 달러]
|
|
||||||
|
|
||||||
E[연평균 성장률<br/>10%]
|
|
||||||
|
|
||||||
style A fill:#90CAF9,stroke:#1976D2,color:#000
|
|
||||||
style B fill:#64B5F6,stroke:#1976D2,color:#fff
|
|
||||||
style C fill:#42A5F5,stroke:#1565C0,color:#fff
|
|
||||||
style D fill:#2196F3,stroke:#0D47A1,color:#fff
|
|
||||||
style E fill:#FFC107,stroke:#F57C00,color:#000
|
|
||||||
BIN
define/charts/chart06_마케팅_자동화_시장_성장_전망.png
Normal file
|
After Width: | Height: | Size: 144 KiB |
@ -1,20 +0,0 @@
|
|||||||
graph TB
|
|
||||||
subgraph "높은 통합성"
|
|
||||||
KT[KT AI 서비스<br/>가성비 + 통합]
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph "중간 통합성"
|
|
||||||
HS[HubSpot<br/>고가 + 기능]
|
|
||||||
MC[Mailchimp<br/>중가 + 이메일]
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph "낮은 통합성"
|
|
||||||
KK[카카오톡 채널<br/>저가 + 단순]
|
|
||||||
GA[가제트AI<br/>중저가 + 콘텐츠]
|
|
||||||
end
|
|
||||||
|
|
||||||
style KT fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style HS fill:#9E9E9E,stroke:#616161,color:#fff
|
|
||||||
style MC fill:#9E9E9E,stroke:#616161,color:#fff
|
|
||||||
style KK fill:#BDBDBD,stroke:#757575,color:#000
|
|
||||||
style GA fill:#BDBDBD,stroke:#757575,color:#000
|
|
||||||
BIN
define/charts/chart07_경쟁_우위_비교_매트릭스.png
Normal file
|
After Width: | Height: | Size: 161 KiB |
@ -1,11 +0,0 @@
|
|||||||
graph LR
|
|
||||||
A1[도입 전<br/>홍보 시간 주당 5시간] -->|60% 단축| B1[도입 후<br/>주당 2시간]
|
|
||||||
A2[도입 전<br/>매출 100%] -->|15-30% 증가| B2[도입 후<br/>매출 115-130%]
|
|
||||||
A3[도입 전<br/>고객 유지율 기준] -->|30% 증가| B3[도입 후<br/>단골 고객 증가]
|
|
||||||
|
|
||||||
style A1 fill:#E0E0E0,stroke:#9E9E9E,color:#000
|
|
||||||
style A2 fill:#E0E0E0,stroke:#9E9E9E,color:#000
|
|
||||||
style A3 fill:#E0E0E0,stroke:#9E9E9E,color:#000
|
|
||||||
style B1 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style B2 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style B3 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
BIN
define/charts/chart08_AI_자동화_도입_효과.png
Normal file
|
After Width: | Height: | Size: 195 KiB |
@ -1,7 +0,0 @@
|
|||||||
graph LR
|
|
||||||
P1[Phase 1 - 6개월<br/>MVP 출시<br/>외식업/카페 1만 개<br/>월 9,900-19,800원] --> P2[Phase 2 - 12개월<br/>기능 확장<br/>소매/뷰티 확대<br/>5만 개 업체<br/>AI 이미지 생성]
|
|
||||||
P2 --> P3[Phase 3 - 18-24개월<br/>생태계 구축<br/>전 업종 20만 개<br/>AI 어시스턴트<br/>파트너십 확장]
|
|
||||||
|
|
||||||
style P1 fill:#90CAF9,stroke:#1976D2,color:#000
|
|
||||||
style P2 fill:#42A5F5,stroke:#1565C0,color:#fff
|
|
||||||
style P3 fill:#1976D2,stroke:#0D47A1,color:#fff
|
|
||||||
BIN
define/charts/chart09_KT_서비스_단계별_성장_전략.png
Normal file
|
After Width: | Height: | Size: 206 KiB |
@ -1,11 +0,0 @@
|
|||||||
graph TB
|
|
||||||
P1[Phase 1 - 6개월<br/>연간 매출 24억 원<br/>가입자 1만 개]
|
|
||||||
P2[Phase 2 - 12개월<br/>연간 매출 120억 원<br/>가입자 5만 개]
|
|
||||||
P3[Phase 3 - 24개월<br/>연간 매출 480억 원<br/>가입자 20만 개]
|
|
||||||
|
|
||||||
P1 --> P2
|
|
||||||
P2 --> P3
|
|
||||||
|
|
||||||
style P1 fill:#81C784,stroke:#388E3C,color:#000
|
|
||||||
style P2 fill:#4CAF50,stroke:#2E7D32,color:#fff
|
|
||||||
style P3 fill:#2E7D32,stroke:#1B5E20,color:#fff
|
|
||||||
BIN
define/charts/chart10_ROI_분석_연간_매출_전망.png
Normal file
|
After Width: | Height: | Size: 171 KiB |
@ -1,18 +0,0 @@
|
|||||||
graph LR
|
|
||||||
P1[Pain Point 1<br/>시간 부족] --> S1[Solution<br/>원클릭 자동화]
|
|
||||||
P2[Pain Point 2<br/>전문지식 부족] --> S2[Solution<br/>AI 템플릿 추천]
|
|
||||||
P3[Pain Point 3<br/>높은 광고비] --> S3[Solution<br/>무료/저가 메시지]
|
|
||||||
P4[Pain Point 4<br/>효과 측정 어려움] --> S4[Solution<br/>자동 리포트 분석]
|
|
||||||
P5[Pain Point 5<br/>일관성 부족] --> S5[Solution<br/>정기 발송 스케줄링]
|
|
||||||
|
|
||||||
style P1 fill:#F44336,stroke:#C62828,color:#fff
|
|
||||||
style P2 fill:#F44336,stroke:#C62828,color:#fff
|
|
||||||
style P3 fill:#F44336,stroke:#C62828,color:#fff
|
|
||||||
style P4 fill:#F44336,stroke:#C62828,color:#fff
|
|
||||||
style P5 fill:#F44336,stroke:#C62828,color:#fff
|
|
||||||
|
|
||||||
style S1 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style S2 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style S3 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style S4 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style S5 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
BIN
define/charts/chart11_Pain_Point_해결_맵핑.png
Normal file
|
After Width: | Height: | Size: 190 KiB |
@ -1,4 +0,0 @@
|
|||||||
%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#FF9800','primaryTextColor':'#fff'}}}%%
|
|
||||||
pie title 소상공인 연령대 분포
|
|
||||||
"40-60대 (타겟)" : 75
|
|
||||||
"기타 연령대" : 25
|
|
||||||
BIN
define/charts/chart12_타겟_고객_페르소나_분포.png
Normal file
|
After Width: | Height: | Size: 199 KiB |
@ -1,30 +0,0 @@
|
|||||||
graph TB
|
|
||||||
ROOT[KT AI 이벤트 서비스<br/>핵심 차별화 포인트]
|
|
||||||
|
|
||||||
ROOT --> A1[1. 통신 인프라]
|
|
||||||
ROOT --> A2[2. 데이터 자산]
|
|
||||||
ROOT --> A3[3. AI 기술]
|
|
||||||
ROOT --> A4[4. 생태계 통합]
|
|
||||||
ROOT --> A5[5. 정부 지원]
|
|
||||||
|
|
||||||
A1 --> A1_SUB["• 으랏차차패키지<br/>• AI 전화<br/>• SMS/MMS"]
|
|
||||||
|
|
||||||
A2 --> A2_SUB["• 114 정보 420만 사업자<br/>• 업종별 분석<br/>• 지역별 분석"]
|
|
||||||
|
|
||||||
A3 --> A3_SUB["• Mi:dm LLM<br/>• 한국어 최적화<br/>• 문화 맥락 이해"]
|
|
||||||
|
|
||||||
A4 --> A4_SUB["• 카카오톡<br/>• 네이버<br/>• 배달앱"]
|
|
||||||
|
|
||||||
A5 --> A5_SUB["• 디지털 전환 지원금<br/>• 인증 솔루션"]
|
|
||||||
|
|
||||||
style ROOT fill:#1976D2,stroke:#0D47A1,color:#fff
|
|
||||||
style A1 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style A2 fill:#FF9800,stroke:#F57C00,color:#fff
|
|
||||||
style A3 fill:#9C27B0,stroke:#7B1FA2,color:#fff
|
|
||||||
style A4 fill:#F44336,stroke:#C62828,color:#fff
|
|
||||||
style A5 fill:#FFC107,stroke:#FFA000,color:#000
|
|
||||||
style A1_SUB fill:#E8F5E9,stroke:#4CAF50,color:#000
|
|
||||||
style A2_SUB fill:#FFF3E0,stroke:#FF9800,color:#000
|
|
||||||
style A3_SUB fill:#F3E5F5,stroke:#9C27B0,color:#000
|
|
||||||
style A4_SUB fill:#FFEBEE,stroke:#F44336,color:#000
|
|
||||||
style A5_SUB fill:#FFFDE7,stroke:#FFC107,color:#000
|
|
||||||
BIN
define/charts/chart13_KT_차별화_포인트.png
Normal file
|
After Width: | Height: | Size: 229 KiB |
@ -1,39 +0,0 @@
|
|||||||
graph TB
|
|
||||||
T1[기술 기반: KT Mi:dm LLM]
|
|
||||||
T2[기술 기반: 통신 인프라]
|
|
||||||
T3[기술 기반: 빅데이터 분석]
|
|
||||||
|
|
||||||
F1[핵심 기능: Zero-Click Marketing]
|
|
||||||
F2[핵심 기능: AI 이벤트 자동 생성]
|
|
||||||
F3[핵심 기능: 멀티채널 자동 발송]
|
|
||||||
F4[핵심 기능: 성과 분석 리포트]
|
|
||||||
|
|
||||||
V1[사업 가치: 소상공인 매출 15-30% 증가]
|
|
||||||
V2[사업 가치: KT 연 480억 원 매출]
|
|
||||||
V3[사업 가치: 사회적 디지털 격차 해소]
|
|
||||||
|
|
||||||
T1 --> F1
|
|
||||||
T1 --> F2
|
|
||||||
T2 --> F3
|
|
||||||
T3 --> F4
|
|
||||||
|
|
||||||
F1 --> V1
|
|
||||||
F2 --> V1
|
|
||||||
F3 --> V1
|
|
||||||
F4 --> V1
|
|
||||||
|
|
||||||
V1 --> V2
|
|
||||||
V1 --> V3
|
|
||||||
|
|
||||||
style T1 fill:#9E9E9E,stroke:#616161,color:#fff
|
|
||||||
style T2 fill:#9E9E9E,stroke:#616161,color:#fff
|
|
||||||
style T3 fill:#9E9E9E,stroke:#616161,color:#fff
|
|
||||||
|
|
||||||
style F1 fill:#64B5F6,stroke:#1976D2,color:#fff
|
|
||||||
style F2 fill:#64B5F6,stroke:#1976D2,color:#fff
|
|
||||||
style F3 fill:#64B5F6,stroke:#1976D2,color:#fff
|
|
||||||
style F4 fill:#64B5F6,stroke:#1976D2,color:#fff
|
|
||||||
|
|
||||||
style V1 fill:#4CAF50,stroke:#388E3C,color:#fff
|
|
||||||
style V2 fill:#2196F3,stroke:#1976D2,color:#fff
|
|
||||||
style V3 fill:#9C27B0,stroke:#7B1FA2,color:#fff
|
|
||||||
BIN
define/charts/chart14_서비스_가치_제안_구조.png
Normal file
|
After Width: | Height: | Size: 220 KiB |
@ -1,148 +0,0 @@
|
|||||||
# 🎨 시장조사 차트 이미지 변환 완료 가이드
|
|
||||||
|
|
||||||
## ✅ 생성된 파일 목록
|
|
||||||
|
|
||||||
총 **14개의 Mermaid 차트 파일** (.mmd)이 생성되었습니다:
|
|
||||||
|
|
||||||
```
|
|
||||||
define/charts/
|
|
||||||
├── chart01_소상공인_업종별_분포.mmd
|
|
||||||
├── chart02_1차_타겟_세그먼트_규모_비교.mmd
|
|
||||||
├── chart03_디지털_전환_현황.mmd
|
|
||||||
├── chart04_소상공인_주요_스트레스_요인.mmd
|
|
||||||
├── chart05_카카오톡_채널_마케팅_효과.mmd
|
|
||||||
├── chart06_마케팅_자동화_시장_성장_전망.mmd
|
|
||||||
├── chart07_경쟁_우위_비교_매트릭스.mmd
|
|
||||||
├── chart08_AI_자동화_도입_효과.mmd
|
|
||||||
├── chart09_KT_서비스_단계별_성장_전략.mmd
|
|
||||||
├── chart10_ROI_분석_연간_매출_전망.mmd
|
|
||||||
├── chart11_Pain_Point_해결_맵핑.mmd
|
|
||||||
├── chart12_타겟_고객_페르소나_분포.mmd
|
|
||||||
├── chart13_KT_차별화_포인트.mmd
|
|
||||||
└── chart14_서비스_가치_제안_구조.mmd
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🚀 빠른 변환 방법 (5분 완성)
|
|
||||||
|
|
||||||
### 방법 1: Mermaid Live Editor (가장 쉬움) ⭐
|
|
||||||
|
|
||||||
1. **https://mermaid.live/** 접속
|
|
||||||
2. 각 `.mmd` 파일을 메모장으로 열기
|
|
||||||
3. 내용 전체 복사 (Ctrl+A → Ctrl+C)
|
|
||||||
4. Mermaid Live Editor 왼쪽 창에 붙여넣기 (Ctrl+V)
|
|
||||||
5. 오른쪽에서 차트 미리보기 확인
|
|
||||||
6. 상단 **Actions** → **Export PNG** 클릭
|
|
||||||
7. 파일명을 동일하게 `chartXX_이름.png`로 저장
|
|
||||||
8. 14개 차트 모두 반복
|
|
||||||
|
|
||||||
### 방법 2: VS Code Extension
|
|
||||||
|
|
||||||
VS Code가 있다면:
|
|
||||||
|
|
||||||
1. **Markdown Preview Mermaid Support** 확장 설치
|
|
||||||
2. `.mmd` 파일을 `.md`로 임시 변경
|
|
||||||
3. 파일 내용 전후에 ` ```mermaid ` 태그 추가
|
|
||||||
4. 미리보기에서 우클릭 → 이미지 저장
|
|
||||||
|
|
||||||
### 방법 3: 온라인 일괄 변환
|
|
||||||
|
|
||||||
- **Kroki**: https://kroki.io/
|
|
||||||
- 각 .mmd 파일 업로드 → PNG/SVG 다운로드
|
|
||||||
|
|
||||||
## 📏 추천 이미지 설정
|
|
||||||
|
|
||||||
### PNG 변환 시
|
|
||||||
- **해상도**: 1920x1080 이상
|
|
||||||
- **배경**: 투명 (Transparent) 또는 흰색
|
|
||||||
- **포맷**: PNG (프레젠테이션용)
|
|
||||||
|
|
||||||
### SVG 변환 시
|
|
||||||
- **용도**: 인쇄물, 확대 필요 시
|
|
||||||
- **장점**: 무한 확대 가능, 파일 크기 작음
|
|
||||||
|
|
||||||
## 🎯 각 차트별 추천 용도
|
|
||||||
|
|
||||||
| 차트 번호 | 차트 이름 | 활용 시나리오 |
|
|
||||||
|---------|---------|------------|
|
|
||||||
| 01 | 업종별 분포 | 시장 규모 설명, 타겟 정의 |
|
|
||||||
| 02 | 타겟 세그먼트 | 1/2/3차 타겟 전략 발표 |
|
|
||||||
| 03 | 디지털 전환 현황 | 시장 기회 강조 |
|
|
||||||
| 04 | 스트레스 요인 | Pain Point 설명 |
|
|
||||||
| 05 | 카카오톡 효과 | 핵심 채널 정당화 |
|
|
||||||
| 06 | 시장 성장 전망 | 시장 타이밍 증명 |
|
|
||||||
| 07 | 경쟁 포지셔닝 | 차별화 전략 시각화 |
|
|
||||||
| 08 | 도입 효과 | ROI 설득 |
|
|
||||||
| 09 | 성장 전략 | 로드맵 공유 |
|
|
||||||
| 10 | 매출 전망 | 사업성 검증 |
|
|
||||||
| 11 | Pain Point 해결 | 솔루션 적합성 |
|
|
||||||
| 12 | 페르소나 분포 | 타겟 고객 집중도 |
|
|
||||||
| 13 | KT 차별화 | 경쟁 우위 강조 |
|
|
||||||
| 14 | 가치 제안 | 전체 사업 논리 |
|
|
||||||
|
|
||||||
## 🎨 프레젠테이션 조합 추천
|
|
||||||
|
|
||||||
### 경영진 보고용 (5개)
|
|
||||||
- chart01 (시장 규모)
|
|
||||||
- chart06 (시장 성장)
|
|
||||||
- chart10 (매출 전망)
|
|
||||||
- chart13 (KT 강점)
|
|
||||||
- chart14 (가치 제안)
|
|
||||||
|
|
||||||
### 기획 회의용 (6개)
|
|
||||||
- chart02 (타겟 세그먼트)
|
|
||||||
- chart04 (Pain Point)
|
|
||||||
- chart07 (경쟁 분석)
|
|
||||||
- chart09 (로드맵)
|
|
||||||
- chart11 (솔루션 매핑)
|
|
||||||
- chart13 (차별화)
|
|
||||||
|
|
||||||
### 고객 제안용 (4개)
|
|
||||||
- chart05 (카카오톡 효과)
|
|
||||||
- chart08 (도입 효과)
|
|
||||||
- chart11 (Pain Point 해결)
|
|
||||||
- chart14 (가치 제안)
|
|
||||||
|
|
||||||
### 투자 유치용 (5개)
|
|
||||||
- chart01 (시장 규모)
|
|
||||||
- chart06 (시장 성장)
|
|
||||||
- chart10 (매출 전망)
|
|
||||||
- chart13 (KT 강점)
|
|
||||||
- chart14 (사업 가치)
|
|
||||||
|
|
||||||
## 💡 색상 테마 정보
|
|
||||||
|
|
||||||
각 차트는 다음 색상 체계를 사용합니다:
|
|
||||||
|
|
||||||
- **파란색 계열** (#2196F3): 메인, 통신 인프라
|
|
||||||
- **초록색 계열** (#4CAF50): 성장, 긍정적 효과
|
|
||||||
- **주황색 계열** (#FF9800): 데이터, 중요 정보
|
|
||||||
- **보라색 계열** (#9C27B0): AI 기술, 혁신
|
|
||||||
- **빨간색 계열** (#F44336): Pain Point, 문제점
|
|
||||||
- **노란색 계열** (#FFC107): 정부 지원, 특별 항목
|
|
||||||
|
|
||||||
## ❓ 문제 해결
|
|
||||||
|
|
||||||
### 한글이 깨질 때
|
|
||||||
- Mermaid Live Editor 사용 (한글 완벽 지원)
|
|
||||||
- 파일을 UTF-8로 저장했는지 확인
|
|
||||||
|
|
||||||
### 차트가 너무 작게 나올 때
|
|
||||||
- Mermaid Live Editor에서 확대 후 Export
|
|
||||||
- PNG 해상도를 2000x1500 이상으로 설정
|
|
||||||
|
|
||||||
### 색상을 변경하고 싶을 때
|
|
||||||
- `.mmd` 파일 내 `style` 부분의 `fill` 값 수정
|
|
||||||
- 예: `fill:#4CAF50` → `fill:#FF5722`
|
|
||||||
|
|
||||||
## 📚 참고 자료
|
|
||||||
|
|
||||||
- **Mermaid Live Editor**: https://mermaid.live/
|
|
||||||
- **Mermaid 문법 가이드**: https://mermaid.js.org/
|
|
||||||
- **색상 코드 참조**: https://www.color-hex.com/
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**작업 완료!** 🎉
|
|
||||||
|
|
||||||
모든 차트 파일이 `define/charts/` 디렉토리에 준비되었습니다.
|
|
||||||
Mermaid Live Editor를 사용하면 5분 안에 모든 차트를 PNG로 변환할 수 있습니다!
|
|
||||||