kt-event-marketing/define/charts

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가 설치되어 있다면:

# 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 사용 시 고해상도 이미지:

mmdc -i input.mmd -o output.png -w 2000 -H 1500 -b transparent

• -w: 너비 (픽셀)
• -H: 높이 (픽셀)
• -b: 배경색 (transparent, white, #HEX)

테마 커스터마이징

각 차트 파일 맨 위에 테마 설정이 포함되어 있습니다:

%%{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 설치 문제

# Node.js 버전 확인 (14 이상 필요)
node --version

# Puppeteer 의존성 문제 시
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
npm install -g @mermaid-js/mermaid-cli

📚 추가 자료

• Mermaid 공식 문서
• Mermaid Syntax Guide
• Mermaid Live Editor
• GitHub: mermaid-js