chart mmd -> png

This commit is contained in:
merrycoral 2025-10-17 14:57:00 +09:00
parent c1f116c821
commit 9347de60fa
30 changed files with 0 additions and 497 deletions

View File

@ -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)

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

View File

@ -1,4 +0,0 @@
%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#2196F3','primaryTextColor':'#fff'}}}%%
pie title 코로나19 이후 디지털화 증가 현황
"디지털화 증가" : 45.5
"변화 없음/감소" : 54.5

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

View File

@ -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]

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

View File

@ -1,4 +0,0 @@
%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#FF9800','primaryTextColor':'#fff'}}}%%
pie title 소상공인 연령대 분포
"40-60대 (타겟)" : 75
"기타 연령대" : 25

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

View File

@ -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로 변환할 수 있습니다!