docs: 시장성 도식 3종 추가 — 포지셔닝맵, CJM, B2B 네트워크

포지셔닝 맵: 문제풀이 특화도 × 복습 자동화 (ReLoop 독점 영역)
Customer Journey: 인지→탐색→가입→학습→유료전환→충성 6단계
B2B 네트워크 효과: 학원채택→학생유입→학부모리포트→재계약 선순환

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
reloop
2026-04-19 19:55:16 +09:00
parent 711d753fdc
commit ee296bf88e
3 changed files with 226 additions and 0 deletions

View File

@@ -0,0 +1,75 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 460" font-family="'Pretendard','Inter',-apple-system,sans-serif">
<defs>
<marker id="nArrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
<path d="M0,1 L9,5 L0,9 Z" fill="#6366f1"/>
</marker>
<marker id="nArrowGreen" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
<path d="M0,1 L9,5 L0,9 Z" fill="#4ade80"/>
</marker>
</defs>
<rect width="800" height="460" rx="16" fill="#0f0f17"/>
<text x="400" y="36" text-anchor="middle" fill="#e0e7ff" font-size="18" font-weight="700">B2B 네트워크 효과 — 선순환 구조</text>
<text x="400" y="56" text-anchor="middle" fill="#94a3b8" font-size="11">학원 1곳 채택 → 학생 40명 자동 유입 → 졸업 후 Pro 전환</text>
<!-- Center: ReLoop -->
<circle cx="400" cy="230" r="50" fill="rgba(99,102,241,0.2)" stroke="rgba(129,140,248,0.6)" stroke-width="2.5"/>
<text x="400" y="225" text-anchor="middle" fill="#e0e7ff" font-size="18" font-weight="800">ReLoop</text>
<text x="400" y="245" text-anchor="middle" fill="#a5b4fc" font-size="10" font-weight="600">복습 플랫폼</text>
<!-- Node 1: 학원 채택 (top-left) -->
<rect x="80" y="80" width="170" height="80" rx="14" fill="rgba(99,102,241,0.12)" stroke="rgba(99,102,241,0.3)" stroke-width="1.5"/>
<text x="165" y="108" text-anchor="middle" fill="#c7d2fe" font-size="10" font-weight="700">STEP 1</text>
<text x="165" y="128" text-anchor="middle" fill="#e0e7ff" font-size="14" font-weight="700">학원 채택</text>
<text x="165" y="148" text-anchor="middle" fill="#94a3b8" font-size="10">School 플랜 도입</text>
<!-- Arrow 1→2 -->
<path d="M250,140 C300,140 300,160 350,180" stroke="#6366f1" stroke-width="2" fill="none" marker-end="url(#nArrow)"/>
<text x="290" y="148" fill="#a5b4fc" font-size="9" font-weight="600">자동 계정 생성</text>
<!-- Node 2: 학생 유입 (top-right) -->
<rect x="530" y="80" width="170" height="80" rx="14" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.3)" stroke-width="1.5"/>
<text x="615" y="108" text-anchor="middle" fill="#93c5fd" font-size="10" font-weight="700">STEP 2</text>
<text x="615" y="128" text-anchor="middle" fill="#e0e7ff" font-size="14" font-weight="700">학생 40명 유입</text>
<text x="615" y="148" text-anchor="middle" fill="#94a3b8" font-size="10">Pro 기능 무료 체험</text>
<!-- Arrow from center to node 2 -->
<path d="M450,200 C490,180 500,140 530,130" stroke="#6366f1" stroke-width="2" fill="none" marker-end="url(#nArrow)"/>
<!-- Node 3: 학부모 리포트 (bottom-right) -->
<rect x="560" y="290" width="180" height="80" rx="14" fill="rgba(34,197,94,0.12)" stroke="rgba(34,197,94,0.3)" stroke-width="1.5"/>
<text x="650" y="318" text-anchor="middle" fill="#86efac" font-size="10" font-weight="700">STEP 3</text>
<text x="650" y="338" text-anchor="middle" fill="#e0e7ff" font-size="14" font-weight="700">학부모 리포트</text>
<text x="650" y="358" text-anchor="middle" fill="#94a3b8" font-size="10">복습 이행률 + 성적 변화</text>
<!-- Arrow 2→3 -->
<path d="M650,160 C660,200 660,260 650,290" stroke="#60a5fa" stroke-width="2" fill="none" marker-end="url(#nArrow)"/>
<text x="672" y="225" fill="#93c5fd" font-size="9" font-weight="600">데이터 축적</text>
<!-- Node 4: 학원 재계약 + 입소문 (bottom-left) -->
<rect x="60" y="290" width="180" height="80" rx="14" fill="rgba(245,158,11,0.12)" stroke="rgba(245,158,11,0.3)" stroke-width="1.5"/>
<text x="150" y="318" text-anchor="middle" fill="#fcd34d" font-size="10" font-weight="700">STEP 4</text>
<text x="150" y="338" text-anchor="middle" fill="#e0e7ff" font-size="14" font-weight="700">학원 재계약 + 입소문</text>
<text x="150" y="358" text-anchor="middle" fill="#94a3b8" font-size="10">학부모 만족 → 다른 학원 추천</text>
<!-- Arrow 3→4 -->
<path d="M560,330 C450,340 350,340 240,330" stroke="#4ade80" stroke-width="2" fill="none" marker-end="url(#nArrowGreen)"/>
<text x="400" y="355" text-anchor="middle" fill="#86efac" font-size="9" font-weight="600">만족도 확산</text>
<!-- Arrow 4→1 (loop) -->
<path d="M150,290 C140,220 130,180 150,160" stroke="#fbbf24" stroke-width="2" fill="none" marker-end="url(#nArrow)"/>
<text x="118" y="225" fill="#fcd34d" font-size="9" font-weight="600">네트워크 효과</text>
<!-- Node 5: 졸업 후 Pro 전환 (bottom center) -->
<rect x="280" y="390" width="240" height="50" rx="12" fill="rgba(99,102,241,0.15)" stroke="rgba(129,140,248,0.4)" stroke-width="1.5"/>
<text x="400" y="413" text-anchor="middle" fill="#c7d2fe" font-size="11" font-weight="700">졸업 후 → 개인 Pro 구독 전환</text>
<text x="400" y="430" text-anchor="middle" fill="#94a3b8" font-size="10">B2B가 B2C 성장을 견인하는 선순환</text>
<!-- Arrow from node 2 to graduation -->
<path d="M615,160 C620,300 520,400 520,415" stroke="rgba(99,102,241,0.4)" stroke-width="1.5" stroke-dasharray="5,4" fill="none" marker-end="url(#nArrow)"/>
<text x="590" y="390" fill="#a5b4fc" font-size="9">졸업</text>
<!-- Stats boxes -->
<rect x="300" y="68" width="200" height="28" rx="8" fill="rgba(34,197,94,0.1)" stroke="rgba(34,197,94,0.2)"/>
<text x="400" y="87" text-anchor="middle" fill="#86efac" font-size="11" font-weight="700">학원 10곳 = 학생 400명 = 월 116만 원</text>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@@ -0,0 +1,85 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 400" font-family="'Pretendard','Inter',-apple-system,sans-serif">
<defs>
<marker id="jArrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M0,1 L7,4 L0,7 Z" fill="#6366f1"/>
</marker>
</defs>
<rect width="960" height="400" rx="16" fill="#0f0f17"/>
<text x="480" y="32" text-anchor="middle" fill="#e0e7ff" font-size="18" font-weight="700">Customer Journey Map — 수능 수학 학습자</text>
<!-- Phase labels -->
<text x="105" y="68" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="700" letter-spacing="0.08em">인지</text>
<text x="270" y="68" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="700" letter-spacing="0.08em">탐색</text>
<text x="440" y="68" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="700" letter-spacing="0.08em">가입</text>
<text x="610" y="68" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="700" letter-spacing="0.08em">활성 학습</text>
<text x="780" y="68" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="700" letter-spacing="0.08em">유료 전환</text>
<text x="900" y="68" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="700" letter-spacing="0.08em">충성</text>
<!-- Timeline -->
<line x1="40" y1="85" x2="930" y2="85" stroke="rgba(99,102,241,0.3)" stroke-width="2"/>
<circle cx="105" cy="85" r="6" fill="#4338ca" stroke="#818cf8" stroke-width="2"/>
<circle cx="270" cy="85" r="6" fill="#4338ca" stroke="#818cf8" stroke-width="2"/>
<circle cx="440" cy="85" r="6" fill="#4338ca" stroke="#818cf8" stroke-width="2"/>
<circle cx="610" cy="85" r="6" fill="#6366f1" stroke="#a5b4fc" stroke-width="2"/>
<circle cx="780" cy="85" r="6" fill="#818cf8" stroke="#c7d2fe" stroke-width="2"/>
<circle cx="900" cy="85" r="6" fill="#a5b4fc" stroke="#e0e7ff" stroke-width="2"/>
<!-- Row: 사용자 행동 -->
<rect x="20" y="100" width="920" height="60" rx="8" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.05)"/>
<text x="35" y="120" fill="#a5b4fc" font-size="9" font-weight="700">사용자 행동</text>
<text x="105" y="145" text-anchor="middle" fill="#cbd5e1" font-size="10">"틀린 문제</text>
<text x="105" y="155" text-anchor="middle" fill="#cbd5e1" font-size="10">언제 다시 풀지?"</text>
<text x="270" y="145" text-anchor="middle" fill="#cbd5e1" font-size="10">오르비/수만휘에서</text>
<text x="270" y="155" text-anchor="middle" fill="#cbd5e1" font-size="10">ReLoop 발견</text>
<text x="440" y="145" text-anchor="middle" fill="#cbd5e1" font-size="10">Free 가입</text>
<text x="440" y="155" text-anchor="middle" fill="#cbd5e1" font-size="10">페르소나 설정</text>
<text x="610" y="145" text-anchor="middle" fill="#cbd5e1" font-size="10">PDF 모의고사 업로드</text>
<text x="610" y="155" text-anchor="middle" fill="#cbd5e1" font-size="10">문제풀이 + 복습</text>
<text x="780" y="145" text-anchor="middle" fill="#cbd5e1" font-size="10">복습 큐 10개 제한</text>
<text x="780" y="155" text-anchor="middle" fill="#cbd5e1" font-size="10">→ Pro 구독</text>
<text x="900" y="145" text-anchor="middle" fill="#cbd5e1" font-size="10">꾸준한 복습</text>
<text x="900" y="155" text-anchor="middle" fill="#cbd5e1" font-size="10">성적 향상 체감</text>
<!-- Row: 감정 곡선 -->
<rect x="20" y="168" width="920" height="60" rx="8" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.05)"/>
<text x="35" y="188" fill="#fcd34d" font-size="9" font-weight="700">감정</text>
<text x="105" y="213" text-anchor="middle" fill="#fca5a5" font-size="10">답답함 😤</text>
<text x="270" y="213" text-anchor="middle" fill="#fcd34d" font-size="10">호기심 🤔</text>
<text x="440" y="213" text-anchor="middle" fill="#86efac" font-size="10">기대감 😊</text>
<text x="610" y="213" text-anchor="middle" fill="#4ade80" font-size="10">만족 😍</text>
<text x="780" y="213" text-anchor="middle" fill="#fcd34d" font-size="10">아쉬움 → 결제 💳</text>
<text x="900" y="213" text-anchor="middle" fill="#4ade80" font-size="10">신뢰 🎯</text>
<!-- Row: ReLoop 터치포인트 -->
<rect x="20" y="236" width="920" height="75" rx="8" fill="rgba(99,102,241,0.06)" stroke="rgba(99,102,241,0.15)"/>
<text x="35" y="256" fill="#818cf8" font-size="9" font-weight="700">ReLoop 개입</text>
<rect x="55" y="265" width="100" height="35" rx="6" fill="rgba(99,102,241,0.12)" stroke="rgba(99,102,241,0.25)"/>
<text x="105" y="287" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">커뮤니티 후기</text>
<rect x="220" y="265" width="100" height="35" rx="6" fill="rgba(99,102,241,0.12)" stroke="rgba(99,102,241,0.25)"/>
<text x="270" y="280" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">무료 기출문제</text>
<text x="270" y="293" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">+ 캘린더 미리보기</text>
<rect x="390" y="265" width="100" height="35" rx="6" fill="rgba(99,102,241,0.12)" stroke="rgba(99,102,241,0.25)"/>
<text x="440" y="280" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">온보딩 가이드</text>
<text x="440" y="293" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">+ 샘플 문제집</text>
<rect x="555" y="265" width="110" height="35" rx="6" fill="rgba(99,102,241,0.15)" stroke="rgba(99,102,241,0.3)"/>
<text x="610" y="280" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">복습 알림 + 캘린더</text>
<text x="610" y="293" text-anchor="middle" fill="#c7d2fe" font-size="9" font-weight="600">Quick Add + 타이머</text>
<rect x="725" y="265" width="110" height="35" rx="6" fill="rgba(99,102,241,0.2)" stroke="rgba(99,102,241,0.4)"/>
<text x="780" y="280" text-anchor="middle" fill="#e0e7ff" font-size="9" font-weight="700">마스터리 경로 블러</text>
<text x="780" y="293" text-anchor="middle" fill="#e0e7ff" font-size="9" font-weight="700">→ "Pro로 확인"</text>
<rect x="850" y="265" width="80" height="35" rx="6" fill="rgba(34,197,94,0.12)" stroke="rgba(34,197,94,0.25)"/>
<text x="890" y="280" text-anchor="middle" fill="#86efac" font-size="9" font-weight="600">학습 리포트</text>
<text x="890" y="293" text-anchor="middle" fill="#86efac" font-size="9" font-weight="600">+ 연간 결제</text>
<!-- Row: 핵심 지표 -->
<rect x="20" y="320" width="920" height="55" rx="8" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.05)"/>
<text x="35" y="340" fill="#86efac" font-size="9" font-weight="700">핵심 KPI</text>
<text x="105" y="362" text-anchor="middle" fill="#94a3b8" font-size="10">노출 수</text>
<text x="270" y="362" text-anchor="middle" fill="#94a3b8" font-size="10">클릭률 CTR</text>
<text x="440" y="362" text-anchor="middle" fill="#94a3b8" font-size="10">가입 전환율</text>
<text x="610" y="362" text-anchor="middle" fill="#94a3b8" font-size="10">DAU / 복습 이행률</text>
<text x="780" y="362" text-anchor="middle" fill="#e0e7ff" font-size="10" font-weight="700">유료 전환율 5~7%</text>
<text x="900" y="362" text-anchor="middle" fill="#94a3b8" font-size="10">LTV / Churn</text>
<text x="480" y="395" text-anchor="middle" fill="#475569" font-size="10">Customer Journey Map | 수능 수학 학습자 → Free → Pro 전환 경로</text>
</svg>

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@@ -0,0 +1,66 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 520" font-family="'Pretendard','Inter',-apple-system,sans-serif">
<rect width="720" height="520" rx="16" fill="#0f0f17"/>
<text x="360" y="36" text-anchor="middle" fill="#e0e7ff" font-size="18" font-weight="700">포지셔닝 맵 — 경쟁사 배치</text>
<!-- Axes -->
<line x1="100" y1="460" x2="680" y2="460" stroke="rgba(255,255,255,0.15)" stroke-width="1.5"/>
<line x1="100" y1="460" x2="100" y2="70" stroke="rgba(255,255,255,0.15)" stroke-width="1.5"/>
<!-- Arrow heads -->
<polygon points="680,455 680,465 695,460" fill="rgba(255,255,255,0.15)"/>
<polygon points="95,70 105,70 100,55" fill="rgba(255,255,255,0.15)"/>
<!-- Axis labels -->
<text x="400" y="495" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="600">문제풀이 학습 특화도 →</text>
<text x="55" y="265" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="600" transform="rotate(-90, 55, 265)">복습 자동화 수준 →</text>
<!-- Low/High labels -->
<text x="130" y="480" fill="#64748b" font-size="10">낮음</text>
<text x="650" y="480" fill="#64748b" font-size="10">높음</text>
<text x="70" y="450" fill="#64748b" font-size="10">낮음</text>
<text x="70" y="85" fill="#64748b" font-size="10">높음</text>
<!-- Quadrant labels -->
<text x="250" y="150" text-anchor="middle" fill="rgba(255,255,255,0.06)" font-size="28" font-weight="800">암기형 SRS</text>
<text x="520" y="150" text-anchor="middle" fill="rgba(99,102,241,0.1)" font-size="28" font-weight="800">ReLoop 영역</text>
<text x="250" y="380" text-anchor="middle" fill="rgba(255,255,255,0.04)" font-size="28" font-weight="800">일반 학습</text>
<text x="520" y="380" text-anchor="middle" fill="rgba(255,255,255,0.04)" font-size="28" font-weight="800">문제풀이 도구</text>
<!-- Anki: high review, low problem-solving -->
<circle cx="220" cy="130" r="28" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.4)" stroke-width="1.5"/>
<text x="220" y="135" text-anchor="middle" fill="#fcd34d" font-size="12" font-weight="700">Anki</text>
<text x="220" y="175" text-anchor="middle" fill="#94a3b8" font-size="9">SRS 1위 · 의대생 86%</text>
<text x="220" y="188" text-anchor="middle" fill="#94a3b8" font-size="9">플래시카드 암기 전용</text>
<!-- Quizlet: medium review, low-medium problem -->
<circle cx="300" cy="280" r="32" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.3)" stroke-width="1.5"/>
<text x="300" y="285" text-anchor="middle" fill="#93c5fd" font-size="12" font-weight="700">Quizlet</text>
<text x="300" y="325" text-anchor="middle" fill="#94a3b8" font-size="9">MAU 6,000만</text>
<text x="300" y="338" text-anchor="middle" fill="#94a3b8" font-size="9">AI 추천 있으나 복습 최적화 없음</text>
<!-- 콴다: no review, high problem -->
<circle cx="550" cy="380" r="30" fill="rgba(168,85,247,0.12)" stroke="rgba(168,85,247,0.3)" stroke-width="1.5"/>
<text x="550" y="385" text-anchor="middle" fill="#c4b5fd" font-size="12" font-weight="700">콴다</text>
<text x="550" y="425" text-anchor="middle" fill="#94a3b8" font-size="9">누적 1억 · AI 해설 특화</text>
<text x="550" y="438" text-anchor="middle" fill="#94a3b8" font-size="9">복습 관리 기능 없음</text>
<!-- 매쓰플랫: no review, high problem -->
<circle cx="480" cy="420" r="22" fill="rgba(236,72,153,0.12)" stroke="rgba(236,72,153,0.3)" stroke-width="1.5"/>
<text x="480" y="425" text-anchor="middle" fill="#f9a8d4" font-size="11" font-weight="700">매쓰플랫</text>
<!-- SuperMemo: high review, low problem -->
<circle cx="170" cy="180" r="18" fill="rgba(100,116,139,0.12)" stroke="rgba(100,116,139,0.3)" stroke-width="1.5"/>
<text x="170" y="185" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="600">SM</text>
<!-- ReLoop: HIGH both -->
<circle cx="580" cy="110" r="40" fill="rgba(99,102,241,0.2)" stroke="rgba(129,140,248,0.6)" stroke-width="2.5">
<animate attributeName="r" values="38;42;38" dur="3s" repeatCount="indefinite"/>
</circle>
<text x="580" y="105" text-anchor="middle" fill="#e0e7ff" font-size="16" font-weight="800">ReLoop</text>
<text x="580" y="123" text-anchor="middle" fill="#a5b4fc" font-size="10" font-weight="600">월 2,900원</text>
<!-- ReLoop description -->
<rect x="490" y="60" width="180" height="22" rx="11" fill="rgba(99,102,241,0.15)" stroke="rgba(99,102,241,0.3)"/>
<text x="580" y="75" text-anchor="middle" fill="#c7d2fe" font-size="10" font-weight="700">유일한 문제풀이 복습 최적화</text>
<text x="360" y="510" text-anchor="middle" fill="#475569" font-size="10">Positioning Map | X: 문제풀이 특화도 / Y: 복습 자동화 수준</text>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB