feat: 마케팅 에셋 전면 재설계 + 어드민 체크리스트 추가

- 어드민 마케팅 페이지: 4대 전문가 체크리스트(디자인/PM/품질/마케팅) 추가, localStorage 저장, 크몽 등록 가이드 패널, 품질 점수 바
- SVG 썸네일 6개 전면 재설계: 헤드라인 강화, 목업 세밀화, 실제 제품가 반영
- 신규 썸네일 2개 제작: thumb-lotto.svg (로또 번호 추천), thumb-saju.svg (AI 사주 분석)
- 사이드바 상호명 추가 (토스페이먼츠 심사 준비)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-22 18:13:44 +09:00
parent de941442ae
commit a7d9af0d35
10 changed files with 1567 additions and 668 deletions

View File

@@ -1,151 +1,146 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0f172a"/>
<linearGradient id="bgSt" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#04102b"/>
<stop offset="60%" style="stop-color:#052e16"/>
<stop offset="100%" style="stop-color:#0f172a"/>
<stop offset="100%" style="stop-color:#04102b"/>
</linearGradient>
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<linearGradient id="headSt" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#22c55e"/>
<stop offset="100%" style="stop-color:#86efac"/>
</linearGradient>
<linearGradient id="chartLine" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.4"/>
<linearGradient id="chartLineSt" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.5"/>
<stop offset="100%" style="stop-color:#22c55e"/>
</linearGradient>
<linearGradient id="chartFill" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.25"/>
<linearGradient id="chartFillSt" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.3"/>
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
</linearGradient>
<radialGradient id="glowGreen" cx="70%" cy="50%" r="50%">
<linearGradient id="priceSt" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#052e16"/>
<stop offset="100%" style="stop-color:#10b981"/>
</linearGradient>
<radialGradient id="glowSt" cx="70%" cy="50%" r="55%">
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
</radialGradient>
<filter id="chartShadow">
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000" flood-opacity="0.5"/>
<filter id="phoneShadSt">
<feDropShadow dx="0" dy="20" stdDeviation="28" flood-color="#22c55e" flood-opacity="0.22"/>
</filter>
<filter id="phoneShadow">
<feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#22c55e" flood-opacity="0.2"/>
</filter>
<clipPath id="phoneClip">
<rect x="860" y="80" width="280" height="530" rx="28"/>
<clipPath id="phoneClipSt">
<rect x="848" y="66" width="296" height="558" rx="30"/>
</clipPath>
<pattern id="gridSt" width="48" height="48" patternUnits="userSpaceOnUse">
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="#0a2a18" stroke-width="0.6"/>
</pattern>
</defs>
<!-- 배경 -->
<rect width="1200" height="675" fill="url(#bg)"/>
<rect width="1200" height="675" fill="url(#glowGreen)"/>
<rect width="1200" height="675" fill="url(#bgSt)"/>
<rect width="1200" height="675" fill="url(#glowSt)"/>
<rect width="1200" height="675" fill="url(#gridSt)" opacity="0.6"/>
<!-- 배경 차트 라인 (은은하게) -->
<polyline points="0,500 120,420 240,460 360,380 480,400 600,300 720,340 840,260 960,220 1200,180"
fill="none" stroke="#22c55e" stroke-width="1" opacity="0.08"/>
<!-- 배경 격자 -->
<defs>
<pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="#1e3a2a" stroke-width="0.6"/>
</pattern>
</defs>
<rect width="1200" height="675" fill="url(#grid)" opacity="0.5"/>
<polyline points="0,520 140,440 280,470 400,390 520,410 640,310 760,350 880,270 1000,230 1200,185"
fill="none" stroke="#22c55e" stroke-width="1.2" opacity="0.07"/>
<!-- 왼쪽 콘텐츠 -->
<!-- 뱃지 -->
<rect x="60" y="66" width="240" height="38" rx="19" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="80" y="90" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#22c55e">📈 텔레그램 실시간 알림</text>
<rect x="60" y="62" width="256" height="40" rx="20" fill="#052e16" stroke="#22c55e" stroke-width="1.5"/>
<text x="82" y="87" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#22c55e">📈 텔레그램 실시간 연동</text>
<!-- 헤드라인 -->
<text x="60" y="160" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="#ffffff">잠자는 동안에도</text>
<text x="60" y="218" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="url(#headGrad)">자동으로 매매</text>
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="#ffffff">잠자는 동안에도</text>
<text x="60" y="224" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="url(#headSt)">자동으로 매매</text>
<text x="60" y="270" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" fill="#94a3b8">백테스팅 · 실시간 매매 · 손절/익절 자동화</text>
<!-- 서브텍스트 -->
<text x="60" y="268" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" fill="#94a3b8">백테스팅 · 실시간 매매 · 손절/익절 자동화</text>
<!-- 기능 패널 -->
<rect x="60" y="295" width="510" height="108" rx="16" fill="#040e1c" stroke="#22c55e" stroke-width="1" opacity="0.95"/>
<!-- 기능 뱃지들 -->
<rect x="60" y="294" width="490" height="100" rx="14" fill="#0a1a10" stroke="#22c55e" stroke-width="1" opacity="0.9"/>
<!-- 행1 -->
<circle cx="88" cy="322" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="88" y="328" text-anchor="middle" font-size="14">⚙️</text>
<text x="116" y="320" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">KIS API 연동</text>
<text x="116" y="336" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">한국투자증권 공식 API</text>
<!-- 기능 2×2 그리드 -->
<circle cx="92" cy="325" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="92" y="331" text-anchor="middle" font-size="14">⚙️</text>
<text x="122" y="321" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">KIS API 연동</text>
<text x="122" y="339" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">한국투자증권 공식 API</text>
<circle cx="290" cy="322" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="290" y="328" text-anchor="middle" font-size="14">📊</text>
<text x="318" y="320" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">백테스팅</text>
<text x="318" y="336" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">전략 사전 검증</text>
<circle cx="310" cy="325" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="310" y="331" text-anchor="middle" font-size="14">📊</text>
<text x="340" y="321" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">백테스팅</text>
<text x="340" y="339" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">전략 사전 검증</text>
<!-- 행2 -->
<circle cx="88" cy="368" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="88" y="374" text-anchor="middle" font-size="14">🔔</text>
<text x="116" y="366" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">텔레그램 알림</text>
<text x="116" y="382" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">매수/매도 실시간 알림</text>
<circle cx="92" cy="374" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="92" y="380" text-anchor="middle" font-size="14">🔔</text>
<text x="122" y="370" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">텔레그램 알림</text>
<text x="122" y="388" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">매수/매도 실시간 알림</text>
<circle cx="290" cy="368" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="290" y="374" text-anchor="middle" font-size="14">🛡️</text>
<text x="318" y="366" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">리스크 관리</text>
<text x="318" y="382" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">손절/익절 자동 설정</text>
<circle cx="310" cy="374" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
<text x="310" y="380" text-anchor="middle" font-size="14">🛡️</text>
<text x="340" y="370" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">리스크 관리</text>
<text x="340" y="388" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">손절/익절 자동 설정</text>
<!-- 가격 -->
<rect x="60" y="420" width="200" height="60" rx="14" fill="#052e16" stroke="#22c55e" stroke-width="1.5"/>
<text x="160" y="444" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#86efac">기본 세팅 가격</text>
<text x="160" y="468" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="26" font-weight="800" fill="#22c55e">55만원~</text>
<!-- 가격 옵션 -->
<rect x="60" y="422" width="228" height="76" rx="16" fill="#052e16" stroke="#22c55e" stroke-width="1.5"/>
<text x="174" y="448" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#86efac">스타터 설치 가격</text>
<text x="174" y="478" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="34" font-weight="900" fill="#22c55e">9만9천원</text>
<rect x="300" y="422" width="228" height="76" rx="16" fill="#040e1c" stroke="#1e293b" stroke-width="1"/>
<text x="414" y="448" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">프로 설치 가격</text>
<text x="414" y="478" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="34" font-weight="900" fill="#94a3b8">19만9천원</text>
<!-- 면책 문구 -->
<rect x="60" y="494" width="490" height="36" rx="8" fill="#1c1917" opacity="0.8"/>
<text x="80" y="516" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#6b7280">⚠️ 수익을 보장하지 않습니다. 자동화 도구 제공 서비스입니다.</text>
<rect x="60" y="514" width="510" height="38" rx="10" fill="#1c1917" opacity="0.85"/>
<text x="80" y="538" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#78716c">⚠️ 수익을 보장하지 않습니다. 자동화 도구 제공 서비스입니다.</text>
<!-- URL -->
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
<text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
<!-- 오른쪽 폰 목업 -->
<g filter="url(#phoneShadow)">
<!-- 폰 외곽 -->
<rect x="860" y="80" width="280" height="530" rx="28" fill="#0f172a" stroke="#1e293b" stroke-width="2"/>
<g filter="url(#phoneShadSt)">
<rect x="848" y="66" width="296" height="558" rx="30" fill="#0a0f18" stroke="#1e293b" stroke-width="2.5"/>
<!-- 노치 -->
<rect x="960" y="88" width="80" height="16" rx="8" fill="#0a0f18"/>
<!-- 화면 내부 -->
<g clip-path="url(#phoneClip)">
<rect x="860" y="80" width="280" height="530" fill="#111827"/>
<rect x="958" y="78" width="76" height="18" rx="9" fill="#040a12"/>
<!-- 화면 -->
<g clip-path="url(#phoneClipSt)">
<rect x="848" y="66" width="296" height="558" fill="#111827"/>
<!-- 텔레그램 헤더 -->
<rect x="860" y="110" width="280" height="56" fill="#1d4ed8"/>
<circle cx="892" cy="138" r="16" fill="#3b82f6"/>
<text x="892" y="144" text-anchor="middle" font-size="16">✈️</text>
<text x="920" y="132" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fff">주식 자동매매 봇</text>
<text x="920" y="150" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">● 온라인</text>
<rect x="848" y="108" width="296" height="60" fill="#1d4ed8"/>
<circle cx="882" cy="138" r="18" fill="#3b82f6"/>
<text x="882" y="144" text-anchor="middle" font-size="18">✈️</text>
<text x="914" y="130" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fff">주식 자동매매 봇</text>
<text x="914" y="150" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#93c5fd">● 온라인</text>
<!-- 채팅 메시지들 -->
<!-- 메시지 1: 매수 -->
<rect x="876" y="180" width="230" height="66" rx="12" fill="#1e3a8a"/>
<text x="892" y="200" font-family="'Malgun Gothic',sans-serif" font-size="11" font-weight="700" fill="#22c55e">✅ 매수 체결</text>
<text x="892" y="218" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">삼성전자 10주</text>
<text x="892" y="236" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">₩73,400 × 10 = ₩734,000</text>
<rect x="864" y="184" width="250" height="72" rx="14" fill="#1e3a8a"/>
<text x="882" y="206" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#22c55e">✅ 매수 체결</text>
<text x="882" y="226" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">삼성전자 10주</text>
<text x="882" y="246" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">₩73,400 × 10 = ₩734,000</text>
<!-- 메시지 2: 수익 -->
<rect x="876" y="260" width="230" height="66" rx="12" fill="#0f2a20"/>
<text x="892" y="280" font-family="'Malgun Gothic',sans-serif" font-size="11" font-weight="700" fill="#fbbf24">💰 목표가 도달</text>
<text x="892" y="298" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">수익률 +3.2%</text>
<text x="892" y="316" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#34d399">매도 주문 실행 중...</text>
<!-- 메시지 2: 목표가 도달 -->
<rect x="864" y="270" width="250" height="72" rx="14" fill="#0f2a20"/>
<text x="882" y="292" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#fbbf24">💰 목표가 도달</text>
<text x="882" y="312" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">수익률 +3.2%</text>
<text x="882" y="332" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#34d399">매도 주문 실행 중...</text>
<!-- 메시지 3: 매도 완료 -->
<rect x="876" y="340" width="230" height="66" rx="12" fill="#1e3a8a"/>
<text x="892" y="360" font-family="'Malgun Gothic',sans-serif" font-size="11" font-weight="700" fill="#22c55e">✅ 매도 체결 완료</text>
<text x="892" y="378" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">실현 수익: +₩23,480</text>
<text x="892" y="396" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">09:32:14</text>
<rect x="864" y="356" width="250" height="72" rx="14" fill="#1e3a8a"/>
<text x="882" y="378" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#22c55e">✅ 매도 체결 완료</text>
<text x="882" y="398" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">실현 수익: +₩23,480</text>
<text x="882" y="418" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">09:32:14</text>
<!-- 차트 영역 -->
<rect x="876" y="422" width="248" height="140" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="1"/>
<text x="886" y="440" font-family="sans-serif" font-size="10" fill="#64748b">오늘의 수익</text>
<text x="886" y="458" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="800" fill="#22c55e">+₩47,250</text>
<!-- 미니 차트 -->
<polyline points="886,540 910,530 934,534 958,520 982,524 1006,510 1030,506 1054,496 1078,488 1102,480"
fill="none" stroke="#22c55e" stroke-width="2"/>
<polygon points="886,560 886,540 910,530 934,534 958,520 982,524 1006,510 1030,506 1054,496 1078,488 1102,480 1102,560"
fill="url(#chartFill)"/>
<rect x="864" y="444" width="264" height="148" rx="14" fill="#0f172a" stroke="#1e293b" stroke-width="1"/>
<text x="876" y="464" font-family="sans-serif" font-size="10" fill="#64748b">오늘의 누적 수익</text>
<text x="876" y="486" font-family="'Malgun Gothic',sans-serif" font-size="20" font-weight="800" fill="#22c55e">+₩47,250</text>
<!-- 차트 -->
<polyline points="876,572 904,558 930,562 956,546 982,550 1008,534 1034,529 1060,518 1086,508 1112,498"
fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/>
<polygon points="876,580 876,572 904,558 930,562 956,546 982,550 1008,534 1034,529 1060,518 1086,508 1112,498 1112,580"
fill="url(#chartFillSt)"/>
</g>
</g>
<!-- 하단 바 -->
<rect x="0" y="635" width="1200" height="40" fill="#052e16"/>
<text x="600" y="660" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">텔레그램 연동 국내주식 자동매매 봇 · KIS API · 7년차 개발자 직접 구축 · jaengseung-made.com</text>
<rect x="0" y="638" width="1200" height="37" fill="#052e16"/>
<text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">텔레그램 연동 국내주식 자동매매 봇 · KIS API · 7년차 개발자 직접 구축 · jaengseung-made.com</text>
</svg>

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB