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:
@@ -1,125 +1,182 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a;stop-opacity:1"/>
|
||||
<stop offset="60%" style="stop-color:#1e1b4b;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1"/>
|
||||
<linearGradient id="bgBn" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#04102b"/>
|
||||
<stop offset="55%" style="stop-color:#0d1f4f"/>
|
||||
<stop offset="100%" style="stop-color:#1e1b4b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#a78bfa;stop-opacity:1"/>
|
||||
<linearGradient id="textBn" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#60a5fa"/>
|
||||
<stop offset="100%" style="stop-color:#a78bfa"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glowBlue" cx="75%" cy="35%" r="40%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.25"/>
|
||||
<linearGradient id="btnBn" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#2563eb"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="priceBn" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1d4ed8"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glowBn1" cx="25%" cy="40%" r="45%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.2"/>
|
||||
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="glowViolet" cx="85%" cy="70%" r="30%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
|
||||
<radialGradient id="glowBn2" cx="85%" cy="60%" r="35%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.15"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<clipPath id="browserClip">
|
||||
<rect x="650" y="40" width="510" height="320" rx="12"/>
|
||||
<clipPath id="brClipBn">
|
||||
<rect x="660" y="28" width="508" height="320" rx="14"/>
|
||||
</clipPath>
|
||||
<filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000000" flood-opacity="0.5"/>
|
||||
<filter id="shadowBn">
|
||||
<feDropShadow dx="0" dy="10" stdDeviation="18" flood-color="#000" flood-opacity="0.55"/>
|
||||
</filter>
|
||||
<filter id="badgeShadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#2563eb" flood-opacity="0.4"/>
|
||||
<filter id="badgeShadBn">
|
||||
<feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="#2563eb" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
<filter id="priceShadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#7c3aed" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="20" cy="20" r="1" fill="#334155" opacity="0.5"/>
|
||||
<pattern id="dotsBn" width="36" height="36" patternUnits="userSpaceOnUse">
|
||||
<circle cx="18" cy="18" r="1" fill="#1a3a7a" opacity="0.4"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- 배경 -->
|
||||
<rect width="1200" height="400" fill="url(#bgGrad)"/>
|
||||
<rect width="1200" height="400" fill="url(#glowBlue)"/>
|
||||
<rect width="1200" height="400" fill="url(#glowViolet)"/>
|
||||
<rect width="1200" height="400" fill="url(#dots)"/>
|
||||
<rect width="1200" height="400" fill="url(#bgBn)"/>
|
||||
<rect width="1200" height="400" fill="url(#glowBn1)"/>
|
||||
<rect width="1200" height="400" fill="url(#glowBn2)"/>
|
||||
<rect width="1200" height="400" fill="url(#dotsBn)"/>
|
||||
|
||||
<!-- 신뢰 뱃지 -->
|
||||
<rect x="60" y="48" width="260" height="34" rx="17" fill="#1d4ed8" filter="url(#badgeShadow)"/>
|
||||
<text x="190" y="70" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="13" font-weight="700" fill="#ffffff">★ 100% 만족보장 · 로켓 납품</text>
|
||||
<!-- 왼쪽 콘텐츠 -->
|
||||
<!-- 뱃지 -->
|
||||
<rect x="52" y="42" width="282" height="36" rx="18" fill="#1d4ed8" filter="url(#badgeShadBn)" opacity="0.9"/>
|
||||
<circle cx="74" cy="60" r="6" fill="#fbbf24"/>
|
||||
<text x="90" y="65" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="14" font-weight="700" fill="#ffffff">7년차 대기업 현직 개발자 직접 제작</text>
|
||||
|
||||
<!-- 메인 헤드라인 -->
|
||||
<text x="60" y="130" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="40" font-weight="800" fill="#ffffff">7년차 대기업 개발자가</text>
|
||||
<text x="60" y="182" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="40" font-weight="800" fill="url(#textGrad)">직접 만드는 홈페이지</text>
|
||||
<text x="52" y="128" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="42" font-weight="900" fill="#ffffff">7년차 대기업 개발자가</text>
|
||||
<text x="52" y="180" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="42" font-weight="900" fill="url(#textBn)">직접 만드는 홈페이지</text>
|
||||
|
||||
<!-- 서브텍스트 -->
|
||||
<text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="17" fill="#94a3b8">코드 품질 · 성능 최적화 · SEO 설정까지 원스톱</text>
|
||||
<text x="52" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="17" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱 · 납기 보장</text>
|
||||
|
||||
<!-- 가격 뱃지 -->
|
||||
<rect x="60" y="255" width="200" height="48" rx="12" fill="#7c3aed" filter="url(#priceShadow)"/>
|
||||
<text x="160" y="274" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="12" font-weight="600" fill="#ddd6fe">시작 가격</text>
|
||||
<text x="160" y="294" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="22" font-weight="800" fill="#ffffff">스타터 50만원~</text>
|
||||
<!-- 가격 + 체크리스트 -->
|
||||
<rect x="52" y="245" width="194" height="50" rx="12" fill="url(#priceBn)"/>
|
||||
<text x="149" y="265" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="12" font-weight="600" fill="#ddd6fe">스타터 시작가</text>
|
||||
<text x="149" y="286" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="22" font-weight="900" fill="#ffffff">50만원~</text>
|
||||
|
||||
<!-- 체크리스트 -->
|
||||
<circle cx="74" cy="334" r="9" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="74" y="339" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="92" y="339" font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">반응형 디자인</text>
|
||||
<g font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">
|
||||
<circle cx="62" cy="326" r="9" fill="#22c55e" opacity="0.15"/>
|
||||
<text x="62" y="331" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="80" y="331">반응형 디자인</text>
|
||||
|
||||
<circle cx="224" cy="334" r="9" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="224" y="339" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="242" y="339" font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">SEO 최적화</text>
|
||||
<circle cx="208" cy="326" r="9" fill="#22c55e" opacity="0.15"/>
|
||||
<text x="208" y="331" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="226" y="331">SEO 최적화</text>
|
||||
|
||||
<circle cx="364" cy="334" r="9" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="364" y="339" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="382" y="339" font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">무료 A/S</text>
|
||||
<circle cx="348" cy="326" r="9" fill="#22c55e" opacity="0.15"/>
|
||||
<text x="348" y="331" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="366" y="331">납기 보장</text>
|
||||
|
||||
<circle cx="62" cy="358" r="9" fill="#22c55e" opacity="0.15"/>
|
||||
<text x="62" y="363" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="80" y="363">무료 AS</text>
|
||||
|
||||
<circle cx="208" cy="358" r="9" fill="#22c55e" opacity="0.15"/>
|
||||
<text x="208" y="363" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||
<text x="226" y="363">Next.js 풀스택</text>
|
||||
</g>
|
||||
|
||||
<!-- URL -->
|
||||
<text x="60" y="380" font-family="Arial,sans-serif" font-size="13" fill="#475569">jaengseung-made.com</text>
|
||||
<text x="52" y="390" font-family="Arial,sans-serif" font-size="13" fill="#3b5998">jaengseung-made.com</text>
|
||||
|
||||
<!-- 브라우저 목업 -->
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="650" y="40" width="510" height="320" rx="12" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<!-- 오른쪽 브라우저 목업 -->
|
||||
<g filter="url(#shadowBn)">
|
||||
<rect x="660" y="28" width="508" height="320" rx="14" fill="#0f172a" stroke="#1e3a8a" stroke-width="1.5"/>
|
||||
<!-- 탭바 -->
|
||||
<rect x="650" y="40" width="510" height="36" rx="12" fill="#0f172a"/>
|
||||
<rect x="650" y="64" width="510" height="12" fill="#0f172a"/>
|
||||
<circle cx="676" cy="58" r="6" fill="#ef4444"/>
|
||||
<circle cx="698" cy="58" r="6" fill="#f59e0b"/>
|
||||
<circle cx="720" cy="58" r="6" fill="#22c55e"/>
|
||||
<rect x="740" y="48" width="360" height="20" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="920" y="62" text-anchor="middle" font-family="Arial,sans-serif" font-size="10" fill="#64748b">jaengseung-made.com</text>
|
||||
<rect x="660" y="28" width="508" height="38" rx="14" fill="#040e28"/>
|
||||
<rect x="660" y="52" width="508" height="14" fill="#040e28"/>
|
||||
<!-- 창 버튼 -->
|
||||
<circle cx="684" cy="47" r="6" fill="#ef4444"/>
|
||||
<circle cx="706" cy="47" r="6" fill="#f59e0b"/>
|
||||
<circle cx="728" cy="47" r="6" fill="#22c55e"/>
|
||||
<!-- URL 바 -->
|
||||
<rect x="748" y="36" width="368" height="22" rx="11" fill="#0d1f4f" stroke="#1a3a7a" stroke-width="1"/>
|
||||
<text x="932" y="51" text-anchor="middle" font-family="Arial,sans-serif" font-size="10" fill="#475569">jaengseung-made.com</text>
|
||||
|
||||
<!-- 내부 콘텐츠 -->
|
||||
<g clip-path="url(#browserClip)">
|
||||
<rect x="650" y="76" width="510" height="284" fill="#f8fafc"/>
|
||||
<!-- 네비 -->
|
||||
<rect x="650" y="76" width="510" height="40" fill="#1d4ed8"/>
|
||||
<rect x="668" y="88" width="60" height="16" rx="8" fill="#ffffff" opacity="0.3"/>
|
||||
<rect x="870" y="88" width="40" height="16" rx="8" fill="#ffffff" opacity="0.2"/>
|
||||
<rect x="918" y="88" width="40" height="16" rx="8" fill="#ffffff" opacity="0.2"/>
|
||||
<rect x="966" y="88" width="40" height="16" rx="8" fill="#ffffff" opacity="0.2"/>
|
||||
<rect x="1080" y="84" width="64" height="24" rx="12" fill="#7c3aed"/>
|
||||
<g clip-path="url(#brClipBn)">
|
||||
<rect x="660" y="66" width="508" height="282" fill="#f8fafc"/>
|
||||
|
||||
<!-- 사이드바 -->
|
||||
<rect x="660" y="66" width="124" height="282" fill="#04102b"/>
|
||||
<!-- 사이드바 로고 -->
|
||||
<rect x="672" y="80" width="26" height="26" rx="7" fill="#2563eb"/>
|
||||
<text x="685" y="98" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="800" fill="#fff">쟁</text>
|
||||
<!-- 메뉴 항목들 -->
|
||||
<rect x="668" y="118" width="100" height="24" rx="7" fill="#2563eb" opacity="0.9"/>
|
||||
<rect x="676" y="124" width="8" height="10" rx="2" fill="#60a5fa" opacity="0.5"/>
|
||||
<rect x="690" y="126" width="48" height="6" rx="3" fill="#fff" opacity="0.8"/>
|
||||
<rect x="668" y="148" width="100" height="22" rx="6" fill="#0d1f4f"/>
|
||||
<rect x="676" y="154" width="8" height="8" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="690" y="156" width="38" height="5" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="668" y="176" width="100" height="22" rx="6" fill="#0d1f4f"/>
|
||||
<rect x="676" y="182" width="8" height="8" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="690" y="184" width="44" height="5" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="668" y="204" width="100" height="22" rx="6" fill="#0d1f4f"/>
|
||||
<rect x="676" y="210" width="8" height="8" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="690" y="212" width="36" height="5" rx="2" fill="#1e3a8a"/>
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<!-- 상단 네비 -->
|
||||
<rect x="784" y="66" width="384" height="36" fill="#fff" stroke="#e2e8f0" stroke-width="0.5"/>
|
||||
<rect x="800" y="76" width="100" height="14" rx="7" fill="#e2e8f0"/>
|
||||
<rect x="1094" y="72" width="56" height="20" rx="10" fill="#2563eb"/>
|
||||
<text x="1122" y="86" text-anchor="middle" font-family="sans-serif" font-size="9" font-weight="700" fill="#fff">문의하기</text>
|
||||
|
||||
<!-- 히어로 -->
|
||||
<rect x="650" y="116" width="510" height="110" fill="#eff6ff"/>
|
||||
<rect x="695" y="134" width="200" height="18" rx="9" fill="#bfdbfe"/>
|
||||
<rect x="695" y="160" width="160" height="18" rx="9" fill="#93c5fd"/>
|
||||
<rect x="695" y="186" width="100" height="28" rx="14" fill="#2563eb"/>
|
||||
<rect x="980" y="122" width="160" height="96" rx="8" fill="#dbeafe"/>
|
||||
<rect x="996" y="138" width="80" height="10" rx="5" fill="#93c5fd"/>
|
||||
<rect x="996" y="154" width="120" height="10" rx="5" fill="#bfdbfe"/>
|
||||
<rect x="996" y="170" width="100" height="10" rx="5" fill="#bfdbfe"/>
|
||||
<!-- 카드들 -->
|
||||
<rect x="668" y="242" width="148" height="90" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="668" y="242" width="148" height="6" rx="3" fill="#2563eb"/>
|
||||
<rect x="680" y="258" width="60" height="10" rx="5" fill="#e2e8f0"/>
|
||||
<rect x="680" y="276" width="100" height="8" rx="4" fill="#f1f5f9"/>
|
||||
<rect x="680" y="292" width="80" height="8" rx="4" fill="#f1f5f9"/>
|
||||
<rect x="826" y="242" width="148" height="90" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="826" y="242" width="148" height="6" rx="3" fill="#7c3aed"/>
|
||||
<rect x="838" y="258" width="60" height="10" rx="5" fill="#ddd6fe"/>
|
||||
<rect x="838" y="276" width="100" height="8" rx="4" fill="#ede9fe"/>
|
||||
<rect x="984" y="242" width="148" height="90" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="984" y="242" width="148" height="6" rx="3" fill="#059669"/>
|
||||
<rect x="996" y="258" width="60" height="10" rx="5" fill="#d1fae5"/>
|
||||
<rect x="996" y="276" width="100" height="8" rx="4" fill="#ecfdf5"/>
|
||||
<rect x="784" y="102" width="384" height="100" fill="#eff6ff"/>
|
||||
<rect x="800" y="118" width="50" height="14" rx="7" fill="#bfdbfe"/>
|
||||
<rect x="800" y="140" width="150" height="16" rx="8" fill="#93c5fd"/>
|
||||
<rect x="800" y="164" width="110" height="12" rx="6" fill="#bfdbfe"/>
|
||||
<rect x="800" y="184" width="70" height="22" rx="11" fill="#2563eb"/>
|
||||
<text x="835" y="199" text-anchor="middle" font-family="sans-serif" font-size="8" fill="#fff">문의하기</text>
|
||||
<rect x="1040" y="110" width="108" height="80" rx="8" fill="#dbeafe"/>
|
||||
<rect x="1050" y="124" width="70" height="8" rx="4" fill="#93c5fd"/>
|
||||
<rect x="1050" y="138" width="85" height="8" rx="4" fill="#bfdbfe"/>
|
||||
<rect x="1050" y="152" width="76" height="8" rx="4" fill="#bfdbfe"/>
|
||||
|
||||
<!-- 서비스 카드 행 -->
|
||||
<rect x="784" y="202" width="126" height="82" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="784" y="202" width="126" height="5" rx="2" fill="#2563eb"/>
|
||||
<rect x="796" y="216" width="30" height="30" rx="7" fill="#eff6ff"/>
|
||||
<text x="811" y="237" text-anchor="middle" font-size="13">🏢</text>
|
||||
<rect x="796" y="254" width="60" height="8" rx="4" fill="#e2e8f0"/>
|
||||
<rect x="796" y="268" width="80" height="6" rx="3" fill="#f1f5f9"/>
|
||||
|
||||
<rect x="918" y="202" width="126" height="82" rx="8" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
|
||||
<rect x="918" y="202" width="126" height="5" rx="2" fill="#7c3aed"/>
|
||||
<rect x="930" y="216" width="30" height="30" rx="7" fill="#ede9fe"/>
|
||||
<text x="945" y="237" text-anchor="middle" font-size="13">⚡</text>
|
||||
<rect x="930" y="254" width="60" height="8" rx="4" fill="#ddd6fe"/>
|
||||
<rect x="930" y="268" width="80" height="6" rx="3" fill="#ede9fe"/>
|
||||
|
||||
<rect x="1052" y="202" width="116" height="82" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="1052" y="202" width="116" height="5" rx="2" fill="#059669"/>
|
||||
<rect x="1064" y="216" width="30" height="30" rx="7" fill="#ecfdf5"/>
|
||||
<text x="1079" y="237" text-anchor="middle" font-size="13">🚀</text>
|
||||
<rect x="1064" y="254" width="60" height="8" rx="4" fill="#d1fae5"/>
|
||||
<rect x="1064" y="268" width="76" height="6" rx="3" fill="#ecfdf5"/>
|
||||
|
||||
<!-- 하단 푸터 -->
|
||||
<rect x="784" y="284" width="384" height="64" fill="#04102b"/>
|
||||
<rect x="800" y="296" width="60" height="10" rx="5" fill="#1e3a8a"/>
|
||||
<rect x="800" y="312" width="90" height="7" rx="3" fill="#0d1f4f"/>
|
||||
<rect x="1088" y="293" width="64" height="26" rx="8" fill="#2563eb"/>
|
||||
<text x="1120" y="310" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#fff">상담 신청</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="368" width="1200" height="32" fill="#1d4ed8"/>
|
||||
<text x="600" y="389" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="13" font-weight="600" fill="#ffffff">7년차 대기업 백엔드 개발자 박재오 | 기획부터 런칭까지 원스톱 | jaengseung-made.com</text>
|
||||
<rect x="0" y="368" width="1200" height="32" fill="url(#btnBn)"/>
|
||||
<text x="600" y="389" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="13" font-weight="600" fill="#ffffff">7년차 대기업 백엔드 개발자 박재오 · 기획부터 런칭까지 원스톱 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 11 KiB |
@@ -1,158 +1,189 @@
|
||||
<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"/>
|
||||
<stop offset="50%" style="stop-color:#064e3b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
<linearGradient id="bgAu" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#04102b"/>
|
||||
<stop offset="50%" style="stop-color:#052e1c"/>
|
||||
<stop offset="100%" style="stop-color:#04102b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<linearGradient id="headAu" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#34d399"/>
|
||||
<stop offset="100%" style="stop-color:#60a5fa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="timeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
<linearGradient id="timeGradAu" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#059669"/>
|
||||
<stop offset="100%" style="stop-color:#10b981"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glow" cx="60%" cy="50%" r="50%">
|
||||
<linearGradient id="barRed" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#dc2626"/>
|
||||
<stop offset="100%" style="stop-color:#ef4444"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glowAu" cx="65%" cy="50%" r="55%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.18"/>
|
||||
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="glowBlue" cx="85%" cy="70%" r="35%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.14"/>
|
||||
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<filter id="nodeShadow">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#10b981" flood-opacity="0.4"/>
|
||||
<filter id="nodeShadAu">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#10b981" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
<filter id="arrowGlow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
<filter id="boxShadAu">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<pattern id="dotsAu" width="32" height="32" patternUnits="userSpaceOnUse">
|
||||
<circle cx="16" cy="16" r="1" fill="#0d2a1a" opacity="0.9"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- 배경 -->
|
||||
<rect width="1200" height="675" fill="url(#bg)"/>
|
||||
<rect width="1200" height="675" fill="url(#glow)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowBlue)"/>
|
||||
<rect width="1200" height="675" fill="url(#bgAu)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowAu)"/>
|
||||
<rect width="1200" height="675" fill="url(#dotsAu)"/>
|
||||
|
||||
<!-- 배경 도트 패턴 -->
|
||||
<defs>
|
||||
<pattern id="dots" width="36" height="36" patternUnits="userSpaceOnUse">
|
||||
<circle cx="18" cy="18" r="1.2" fill="#1e293b" opacity="0.8"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="1200" height="675" fill="url(#dots)"/>
|
||||
|
||||
<!-- 왼쪽 텍스트 영역 -->
|
||||
<!-- 상단 뱃지 -->
|
||||
<rect x="60" y="72" width="230" height="36" rx="18" fill="#065f46"/>
|
||||
<text x="78" y="95" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">⚡ 반복 업무 완전 자동화</text>
|
||||
<!-- 왼쪽 텍스트 -->
|
||||
<!-- 뱃지 -->
|
||||
<rect x="60" y="64" width="250" height="38" rx="19" fill="#052e1c" stroke="#10b981" stroke-width="1.5"/>
|
||||
<text x="84" y="88" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#34d399">⚡ 반복 업무 완전 자동화</text>
|
||||
|
||||
<!-- 헤드라인 -->
|
||||
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="#ffffff">하루 3시간을</text>
|
||||
<text x="60" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="url(#headGrad)">되찾아 드립니다</text>
|
||||
<text x="60" y="280" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#94a3b8">7년차 대기업 개발자의 자동화 솔루션</text>
|
||||
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="#ffffff">하루 3시간을</text>
|
||||
<text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="url(#headAu)">되찾아 드립니다</text>
|
||||
<text x="60" y="276" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">7년차 대기업 개발자의 업무 자동화 솔루션</text>
|
||||
|
||||
<!-- 시간 절약 수치 뱃지 -->
|
||||
<rect x="60" y="310" width="490" height="80" rx="14" fill="#0f172a" opacity="0.7"/>
|
||||
<rect x="60" y="310" width="490" height="80" rx="14" stroke="#10b981" stroke-width="1" opacity="0.4"/>
|
||||
<!-- 수치 대비 패널 -->
|
||||
<rect x="60" y="304" width="510" height="88" rx="16" fill="#040e1c" stroke="#10b981" stroke-width="1" opacity="0.95"/>
|
||||
|
||||
<!-- 수동 -->
|
||||
<text x="95" y="332" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">수동 작업</text>
|
||||
<rect x="90" y="340" width="170" height="28" rx="7" fill="url(#barRed)" opacity="0.85"/>
|
||||
<text x="175" y="359" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#fff">3시간 / 일</text>
|
||||
|
||||
<!-- 수치 1 -->
|
||||
<text x="152" y="344" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#34d399">주 15h</text>
|
||||
<text x="152" y="368" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">절약</text>
|
||||
<!-- 구분선 -->
|
||||
<line x1="218" y1="322" x2="218" y2="378" stroke="#1e293b" stroke-width="1.5"/>
|
||||
<!-- 수치 2 -->
|
||||
<text x="310" y="344" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#60a5fa">0%</text>
|
||||
<text x="310" y="368" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">오류율</text>
|
||||
<!-- 구분선 -->
|
||||
<line x1="380" y1="322" x2="380" y2="378" stroke="#1e293b" stroke-width="1.5"/>
|
||||
<!-- 수치 3 -->
|
||||
<text x="468" y="344" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="20" font-weight="900" fill="#fbbf24">즉시 실행</text>
|
||||
<text x="468" y="368" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">배포 완료</text>
|
||||
<line x1="278" y1="316" x2="278" y2="380" stroke="#0d2a1a" stroke-width="1.5"/>
|
||||
|
||||
<!-- 서비스 유형 리스트 -->
|
||||
<text x="60" y="428" font-family="'Malgun Gothic',sans-serif" font-size="15" fill="#94a3b8">📊 엑셀 자동화 · 📧 이메일 자동발송 · 🕸️ 웹 크롤링</text>
|
||||
<text x="60" y="460" font-family="'Malgun Gothic',sans-serif" font-size="15" fill="#94a3b8">🖥️ RPA · 📁 파일 자동 정리 · 🔔 텔레그램 알림 연동</text>
|
||||
<!-- 자동화 후 -->
|
||||
<text x="298" y="332" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">자동화 후</text>
|
||||
<rect x="290" y="340" width="26" height="28" rx="7" fill="#10b981"/>
|
||||
<text x="326" y="359" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#34d399">5분!</text>
|
||||
|
||||
<!-- 절약 수치 -->
|
||||
<text x="430" y="340" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#fbbf24">97%</text>
|
||||
<text x="430" y="362" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">시간 단축</text>
|
||||
<text x="510" y="340" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="20" font-weight="900" fill="#34d399">0건</text>
|
||||
<text x="510" y="362" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">수작업 오류</text>
|
||||
|
||||
<!-- 서비스 종류 -->
|
||||
<g font-family="'Malgun Gothic',sans-serif" font-size="15" fill="#94a3b8">
|
||||
<text x="60" y="424">📊 엑셀 자동화 · 📧 이메일 자동발송 · 🕸️ 웹 크롤링</text>
|
||||
<text x="60" y="455">🖥️ RPA · 📁 파일 자동 정리 · 🔔 텔레그램 알림</text>
|
||||
</g>
|
||||
|
||||
<!-- 가격 뱃지 -->
|
||||
<rect x="60" y="486" width="220" height="58" rx="14" fill="url(#timeGrad)"/>
|
||||
<text x="170" y="510" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#d1fae5">시작 가격</text>
|
||||
<text x="170" y="534" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="26" font-weight="800" fill="#ffffff">33만원~</text>
|
||||
<rect x="60" y="478" width="236" height="70" rx="16" fill="url(#timeGradAu)"/>
|
||||
<text x="178" y="505" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#d1fae5">시작 가격</text>
|
||||
<text x="178" y="534" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="900" fill="#ffffff">33만원~</text>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<g font-family="sans-serif" font-size="11" font-weight="700">
|
||||
<rect x="60" y="564" width="68" height="26" rx="8" fill="#1e3a8a"/>
|
||||
<text x="94" y="581" text-anchor="middle" fill="#60a5fa">Python</text>
|
||||
<rect x="138" y="564" width="46" height="26" rx="8" fill="#052e1c"/>
|
||||
<text x="161" y="581" text-anchor="middle" fill="#34d399">VBA</text>
|
||||
<rect x="194" y="564" width="76" height="26" rx="8" fill="#1c1917"/>
|
||||
<text x="232" y="581" text-anchor="middle" fill="#d6d3d1">Selenium</text>
|
||||
<rect x="280" y="564" width="44" height="26" rx="8" fill="#1e1b4b"/>
|
||||
<text x="302" y="581" text-anchor="middle" fill="#a78bfa">RPA</text>
|
||||
</g>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 오른쪽 자동화 플로우 다이어그램 -->
|
||||
<!-- 플로우 배경 박스 -->
|
||||
<rect x="620" y="60" width="550" height="540" rx="20" fill="#0a0f1e" stroke="#10b981" stroke-width="1" opacity="0.9"/>
|
||||
<rect x="640" y="74" width="200" height="22" rx="4" fill="#0f2a20"/>
|
||||
<text x="648" y="90" font-family="sans-serif" font-size="11" fill="#10b981">● 자동화 실행 중...</text>
|
||||
<rect x="614" y="52" width="558" height="552" rx="22" fill="#040e1c" stroke="#10b981" stroke-width="1.2" filter="url(#boxShadAu)"/>
|
||||
<!-- 터미널 헤더 -->
|
||||
<rect x="614" y="52" width="558" height="44" rx="22" fill="#030b17"/>
|
||||
<rect x="614" y="74" width="558" height="22" fill="#030b17"/>
|
||||
<circle cx="644" cy="74" r="7" fill="#ef4444"/>
|
||||
<circle cx="668" cy="74" r="7" fill="#f59e0b"/>
|
||||
<circle cx="692" cy="74" r="7" fill="#22c55e"/>
|
||||
<text x="893" y="79" text-anchor="middle" font-family="monospace" font-size="11" fill="#475569">automation.py — 실행 중</text>
|
||||
|
||||
<!-- 노드 1: 입력 -->
|
||||
<rect x="688" y="120" width="160" height="70" rx="12" fill="#0f172a" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
||||
<text x="768" y="148" text-anchor="middle" font-size="20">📊</text>
|
||||
<text x="768" y="172" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">엑셀 파일 입력</text>
|
||||
<!-- 실행 상태 표시 -->
|
||||
<rect x="636" y="110" width="220" height="22" rx="6" fill="#052e1c"/>
|
||||
<circle cx="650" cy="121" r="5" fill="#10b981"/>
|
||||
<text x="664" y="125" font-family="monospace" font-size="11" fill="#34d399">● 자동화 실행 중... (9:14 AM)</text>
|
||||
|
||||
<!-- 화살표 -->
|
||||
<line x1="768" y1="190" x2="768" y2="228" stroke="#10b981" stroke-width="2" filter="url(#arrowGlow)"/>
|
||||
<polygon points="758,224 768,240 778,224" fill="#10b981"/>
|
||||
<!-- 노드 1: 트리거 -->
|
||||
<rect x="712" y="148" width="178" height="72" rx="14" fill="#0a1f10" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadAu)"/>
|
||||
<text x="801" y="172" text-anchor="middle" font-size="22">📊</text>
|
||||
<text x="801" y="196" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">엑셀 파일 감지</text>
|
||||
<text x="801" y="212" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">트리거: 파일 변경 시 자동 실행</text>
|
||||
|
||||
<!-- 화살표 1 -->
|
||||
<line x1="801" y1="220" x2="801" y2="254" stroke="#10b981" stroke-width="2.5"/>
|
||||
<polygon points="791,250 801,266 811,250" fill="#10b981"/>
|
||||
|
||||
<!-- 노드 2: 처리 -->
|
||||
<rect x="658" y="242" width="220" height="70" rx="12" fill="#1a3a2a" stroke="#34d399" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
||||
<text x="768" y="270" text-anchor="middle" font-size="20">⚙️</text>
|
||||
<text x="768" y="294" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#ffffff">Python 스크립트 실행</text>
|
||||
<rect x="682" y="268" width="238" height="72" rx="14" fill="#112a1a" stroke="#34d399" stroke-width="1.5" filter="url(#nodeShadAu)"/>
|
||||
<text x="801" y="292" text-anchor="middle" font-size="22">⚙️</text>
|
||||
<text x="801" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#ffffff">Python 스크립트 처리</text>
|
||||
<text x="801" y="330" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">데이터 정제 · 계산 · 분류</text>
|
||||
|
||||
<!-- 화살표 -->
|
||||
<line x1="768" y1="312" x2="768" y2="350" stroke="#10b981" stroke-width="2" filter="url(#arrowGlow)"/>
|
||||
<polygon points="758,346 768,362 778,346" fill="#10b981"/>
|
||||
<!-- 화살표 2 -->
|
||||
<line x1="801" y1="340" x2="801" y2="374" stroke="#10b981" stroke-width="2.5"/>
|
||||
<polygon points="791,370 801,386 811,370" fill="#10b981"/>
|
||||
|
||||
<!-- 노드 3: 출력 -->
|
||||
<rect x="688" y="364" width="160" height="70" rx="12" fill="#0f172a" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
||||
<text x="768" y="392" text-anchor="middle" font-size="20">📋</text>
|
||||
<text x="768" y="416" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">리포트 자동 생성</text>
|
||||
<rect x="712" y="388" width="178" height="72" rx="14" fill="#0a1f10" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadAu)"/>
|
||||
<text x="801" y="412" text-anchor="middle" font-size="22">📋</text>
|
||||
<text x="801" y="436" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">리포트 자동 생성</text>
|
||||
<text x="801" y="452" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">Excel · PDF 자동 저장</text>
|
||||
|
||||
<!-- 화살표 -->
|
||||
<line x1="768" y1="434" x2="768" y2="472" stroke="#10b981" stroke-width="2" filter="url(#arrowGlow)"/>
|
||||
<polygon points="758,468 768,484 778,468" fill="#10b981"/>
|
||||
<!-- 화살표 3 -->
|
||||
<line x1="801" y1="460" x2="801" y2="494" stroke="#10b981" stroke-width="2.5"/>
|
||||
<polygon points="791,490 801,506 811,490" fill="#10b981"/>
|
||||
|
||||
<!-- 알림 노드 -->
|
||||
<rect x="648" y="484" width="240" height="70" rx="12" fill="#0a1628" stroke="#60a5fa" stroke-width="1.5"/>
|
||||
<text x="768" y="512" text-anchor="middle" font-size="20">📱</text>
|
||||
<text x="768" y="538" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#60a5fa">텔레그램 알림 전송</text>
|
||||
<!-- 노드 4: 알림 -->
|
||||
<rect x="672" y="508" width="258" height="72" rx="14" fill="#061428" stroke="#60a5fa" stroke-width="1.5"/>
|
||||
<text x="801" y="532" text-anchor="middle" font-size="22">📱</text>
|
||||
<text x="801" y="556" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#60a5fa">텔레그램 알림 전송</text>
|
||||
<text x="801" y="572" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">담당자에게 즉시 완료 알림</text>
|
||||
|
||||
<!-- 우측 정보 패널 -->
|
||||
<rect x="920" y="120" width="220" height="434" rx="16" fill="#0f172a" stroke="#1e293b" stroke-width="1"/>
|
||||
<text x="1030" y="150" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#64748b">절약 시간 계산</text>
|
||||
<!-- 막대 그래프 -->
|
||||
<!-- 이전 -->
|
||||
<text x="960" y="186" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">수동 작업</text>
|
||||
<rect x="950" y="194" width="140" height="28" rx="6" fill="#1e293b"/>
|
||||
<rect x="950" y="194" width="140" height="28" rx="6" fill="#ef4444" opacity="0.7"/>
|
||||
<text x="1030" y="213" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">3시간/일</text>
|
||||
<!-- 이후 -->
|
||||
<text x="960" y="244" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">자동화 후</text>
|
||||
<rect x="950" y="252" width="140" height="28" rx="6" fill="#1e293b"/>
|
||||
<rect x="950" y="252" width="22" height="28" rx="6" fill="#10b981"/>
|
||||
<text x="970" y="271" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">5분</text>
|
||||
<rect x="950" y="148" width="200" height="432" rx="16" fill="#040e1c" stroke="#0d2a1a" stroke-width="1"/>
|
||||
<text x="1050" y="178" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#475569">절약 효과 시뮬레이션</text>
|
||||
|
||||
<!-- 기술 스택 -->
|
||||
<text x="1030" y="312" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">사용 기술</text>
|
||||
<rect x="960" y="320" width="60" height="26" rx="8" fill="#1e3a8a"/>
|
||||
<text x="990" y="338" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#60a5fa">Python</text>
|
||||
<rect x="1030" y="320" width="50" height="26" rx="8" fill="#065f46"/>
|
||||
<text x="1055" y="338" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#34d399">VBA</text>
|
||||
<rect x="960" y="356" width="70" height="26" rx="8" fill="#1c1917"/>
|
||||
<text x="995" y="374" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#d6d3d1">Selenium</text>
|
||||
<rect x="1040" y="356" width="50" height="26" rx="8" fill="#1e1b4b"/>
|
||||
<text x="1065" y="374" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#a78bfa">RPA</text>
|
||||
<!-- 막대 그래프 (더 세련되게) -->
|
||||
<text x="970" y="210" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">도입 전</text>
|
||||
<rect x="960" y="216" width="170" height="30" rx="8" fill="url(#barRed)" opacity="0.8"/>
|
||||
<text x="1045" y="236" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#fff">3시간 / 일</text>
|
||||
|
||||
<!-- 전문가 뱃지 -->
|
||||
<rect x="950" y="404" width="140" height="50" rx="12" fill="#1e3a8a"/>
|
||||
<text x="1020" y="424" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#bfdbfe">7년차 개발자</text>
|
||||
<text x="1020" y="444" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#ffffff">직접 분석 · 구현</text>
|
||||
<text x="970" y="270" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">도입 후</text>
|
||||
<rect x="960" y="276" width="170" height="30" rx="8" fill="#0a1f10"/>
|
||||
<rect x="960" y="276" width="26" height="30" rx="8" fill="#10b981"/>
|
||||
<text x="1000" y="296" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#34d399">5분</text>
|
||||
|
||||
<!-- 절약 계산 -->
|
||||
<rect x="960" y="324" width="170" height="60" rx="10" fill="#052e1c"/>
|
||||
<text x="1045" y="348" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#94a3b8">연간 절약 시간</text>
|
||||
<text x="1045" y="372" text-anchor="middle" font-family="sans-serif" font-size="24" font-weight="900" fill="#34d399">780h</text>
|
||||
|
||||
<!-- 사용 기술 -->
|
||||
<text x="1050" y="412" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">사용 기술 스택</text>
|
||||
<g font-family="sans-serif" font-size="10" font-weight="700">
|
||||
<rect x="966" y="420" width="60" height="24" rx="7" fill="#1e3a8a"/>
|
||||
<text x="996" y="436" text-anchor="middle" fill="#60a5fa">Python</text>
|
||||
<rect x="1034" y="420" width="44" height="24" rx="7" fill="#052e1c"/>
|
||||
<text x="1056" y="436" text-anchor="middle" fill="#34d399">VBA</text>
|
||||
<rect x="966" y="452" width="72" height="24" rx="7" fill="#1c1917"/>
|
||||
<text x="1002" y="468" text-anchor="middle" fill="#d6d3d1">Selenium</text>
|
||||
<rect x="1046" y="452" width="44" height="24" rx="7" fill="#1e1b4b"/>
|
||||
<text x="1068" y="468" text-anchor="middle" fill="#a78bfa">RPA</text>
|
||||
</g>
|
||||
|
||||
<!-- 전문가 배지 -->
|
||||
<rect x="960" y="492" width="170" height="56" rx="12" fill="#1e3a8a"/>
|
||||
<text x="1045" y="516" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#bfdbfe">7년차 대기업 개발자</text>
|
||||
<text x="1045" y="538" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#ffffff">직접 분석 · 구현</text>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="635" width="1200" height="40" fill="#065f46"/>
|
||||
<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">엑셀 · 이메일 · RPA · 크롤링 · 7년차 대기업 개발자 직접 구축 · jaengseung-made.com</text>
|
||||
<rect x="0" y="638" width="1200" height="37" fill="#052e1c"/>
|
||||
<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">엑셀 · 이메일 · RPA · 크롤링 · 7년차 대기업 개발자 직접 구축 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 12 KiB |
@@ -1,186 +1,204 @@
|
||||
<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"/>
|
||||
<stop offset="55%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#1e3a8a"/>
|
||||
<linearGradient id="bgA" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#04102b"/>
|
||||
<stop offset="50%" style="stop-color:#0d1f4f"/>
|
||||
<stop offset="100%" style="stop-color:#0a1840"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<linearGradient id="headA" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#60a5fa"/>
|
||||
<stop offset="100%" style="stop-color:#a78bfa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="priceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed"/>
|
||||
<stop offset="100%" style="stop-color:#6d28d9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<linearGradient id="btnA" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#2563eb"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glow1" cx="70%" cy="30%" r="45%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.22"/>
|
||||
<linearGradient id="priceA" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1d4ed8"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glowA1" cx="20%" cy="30%" r="50%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.18"/>
|
||||
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="glow2" cx="85%" cy="75%" r="35%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.18"/>
|
||||
<radialGradient id="glowA2" cx="80%" cy="70%" r="40%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.15"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<filter id="shadow">
|
||||
<feDropShadow dx="0" dy="12" stdDeviation="20" flood-color="#000" flood-opacity="0.55"/>
|
||||
<filter id="shadowA">
|
||||
<feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#000" flood-opacity="0.6"/>
|
||||
</filter>
|
||||
<filter id="glowFilter">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<filter id="glowFilterA">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<clipPath id="browserClip">
|
||||
<rect x="620" y="60" width="550" height="530" rx="16"/>
|
||||
<clipPath id="brClipA">
|
||||
<rect x="620" y="55" width="548" height="540" rx="18"/>
|
||||
</clipPath>
|
||||
<pattern id="gridA" width="44" height="44" patternUnits="userSpaceOnUse">
|
||||
<path d="M 44 0 L 0 0 0 44" fill="none" stroke="#1a3a7a" stroke-width="0.4" opacity="0.5"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- 배경 -->
|
||||
<rect width="1200" height="675" fill="url(#bg)"/>
|
||||
<rect width="1200" height="675" fill="url(#glow1)"/>
|
||||
<rect width="1200" height="675" fill="url(#glow2)"/>
|
||||
|
||||
<!-- 격자 패턴 -->
|
||||
<defs>
|
||||
<pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
|
||||
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="#334155" stroke-width="0.5" opacity="0.4"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="1200" height="675" fill="url(#grid)"/>
|
||||
<rect width="1200" height="675" fill="url(#bgA)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowA1)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowA2)"/>
|
||||
<rect width="1200" height="675" fill="url(#gridA)"/>
|
||||
|
||||
<!-- 왼쪽 콘텐츠 -->
|
||||
<!-- 상단 뱃지 -->
|
||||
<rect x="60" y="72" width="296" height="38" rx="19" fill="#1d4ed8" opacity="0.9"/>
|
||||
<circle cx="82" cy="91" r="5" fill="#fbbf24"/>
|
||||
<text x="98" y="96" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" font-weight="700" fill="#ffffff">대기업 현직 개발자 직접 제작</text>
|
||||
<!-- 뱃지 -->
|
||||
<rect x="60" y="64" width="308" height="38" rx="19" fill="#1d4ed8" opacity="0.95"/>
|
||||
<circle cx="84" cy="83" r="6" fill="#fbbf24"/>
|
||||
<text x="100" y="88" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" font-weight="700" fill="#ffffff">대기업 현직 개발자 직접 제작</text>
|
||||
|
||||
<!-- 메인 헤드라인 -->
|
||||
<text x="60" y="170" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="#ffffff">7년차 대기업</text>
|
||||
<text x="60" y="232" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="#ffffff">개발자가 직접</text>
|
||||
<text x="60" y="294" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="url(#headGrad)">만드는 홈페이지</text>
|
||||
<text x="60" y="166" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="56" font-weight="900" fill="#ffffff">연락 끊기는</text>
|
||||
<text x="60" y="234" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="56" font-weight="900" fill="#ffffff">외주, 이제</text>
|
||||
<text x="60" y="302" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="56" font-weight="900" fill="url(#headA)">그만하세요.</text>
|
||||
|
||||
<!-- 서브텍스트 -->
|
||||
<text x="60" y="346" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱</text>
|
||||
<text x="60" y="348" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱 — 7년차 대기업</text>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<line x1="60" y1="372" x2="280" y2="372" stroke="#1a3a7a" stroke-width="1.5"/>
|
||||
|
||||
<!-- 핵심 특징 리스트 -->
|
||||
<g font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">
|
||||
<rect x="60" y="386" width="12" height="12" rx="3" fill="#22c55e"/>
|
||||
<text x="82" y="398">납기일 100% 준수</text>
|
||||
<rect x="60" y="414" width="12" height="12" rx="3" fill="#22c55e"/>
|
||||
<text x="82" y="426">납품 후 무료 AS 포함</text>
|
||||
<rect x="60" y="442" width="12" height="12" rx="3" fill="#22c55e"/>
|
||||
<text x="82" y="454">반응형 + SEO 최적화 기본</text>
|
||||
<rect x="60" y="470" width="12" height="12" rx="3" fill="#22c55e"/>
|
||||
<text x="82" y="482">Next.js 풀스택 개발</text>
|
||||
</g>
|
||||
|
||||
<!-- 가격 뱃지 -->
|
||||
<rect x="60" y="376" width="230" height="62" rx="14" fill="url(#priceGrad)" filter="url(#glowFilter)"/>
|
||||
<text x="175" y="400" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#ddd6fe">시작 가격</text>
|
||||
<text x="175" y="428" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="26" font-weight="800" fill="#ffffff">스타터 50만원~</text>
|
||||
|
||||
<!-- 체크리스트 -->
|
||||
<rect x="60" y="462" width="490" height="50" rx="10" fill="#0f172a" opacity="0.6"/>
|
||||
<!-- 체크1 -->
|
||||
<circle cx="84" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="84" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||
<text x="100" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">반응형</text>
|
||||
<!-- 체크2 -->
|
||||
<circle cx="198" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="198" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||
<text x="214" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">SEO 최적화</text>
|
||||
<!-- 체크3 -->
|
||||
<circle cx="328" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="328" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||
<text x="344" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">납기 보장</text>
|
||||
<!-- 체크4 -->
|
||||
<circle cx="440" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="440" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||
<text x="456" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">무료 AS</text>
|
||||
|
||||
<!-- 문의 버튼 -->
|
||||
<rect x="60" y="534" width="200" height="52" rx="13" fill="url(#btnGrad)"/>
|
||||
<text x="160" y="566" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="17" font-weight="700" fill="#ffffff">무료 상담 신청 →</text>
|
||||
<rect x="60" y="506" width="260" height="68" rx="16" fill="url(#priceA)" filter="url(#glowFilterA)"/>
|
||||
<text x="190" y="533" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#bfdbfe">스타터 시작 가격</text>
|
||||
<text x="190" y="562" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="30" font-weight="900" fill="#ffffff">50만원~</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="'Malgun Gothic',sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
|
||||
|
||||
<!-- 오른쪽 브라우저 목업 -->
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="620" y="60" width="550" height="530" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
|
||||
<g filter="url(#shadowA)">
|
||||
<rect x="620" y="55" width="548" height="540" rx="18" fill="#0f172a" stroke="#1e3a8a" stroke-width="1.5"/>
|
||||
<!-- 탭바 -->
|
||||
<rect x="620" y="60" width="550" height="44" rx="16" fill="#0f172a"/>
|
||||
<rect x="620" y="92" width="550" height="12" fill="#0f172a"/>
|
||||
<rect x="620" y="55" width="548" height="46" rx="18" fill="#040e28"/>
|
||||
<rect x="620" y="82" width="548" height="19" fill="#040e28"/>
|
||||
<!-- 창 버튼 -->
|
||||
<circle cx="650" cy="82" r="7" fill="#ef4444"/>
|
||||
<circle cx="674" cy="82" r="7" fill="#f59e0b"/>
|
||||
<circle cx="698" cy="82" r="7" fill="#22c55e"/>
|
||||
<circle cx="650" cy="78" r="7" fill="#ef4444"/>
|
||||
<circle cx="675" cy="78" r="7" fill="#f59e0b"/>
|
||||
<circle cx="700" cy="78" r="7" fill="#22c55e"/>
|
||||
<!-- URL 바 -->
|
||||
<rect x="724" y="70" width="380" height="24" rx="12" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
||||
<text x="914" y="87" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">jaengseung-made.com</text>
|
||||
<rect x="726" y="65" width="400" height="26" rx="13" fill="#0d1f4f" stroke="#1a3a7a" stroke-width="1"/>
|
||||
<circle cx="746" cy="78" r="5" fill="#1a3a7a" opacity="0.6"/>
|
||||
<text x="910" y="82" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#475569">jaengseung-made.com</text>
|
||||
|
||||
<!-- 브라우저 내부 -->
|
||||
<g clip-path="url(#browserClip)">
|
||||
<rect x="620" y="104" width="550" height="486" fill="#f8fafc"/>
|
||||
<g clip-path="url(#brClipA)">
|
||||
<rect x="620" y="101" width="548" height="494" fill="#f8fafc"/>
|
||||
|
||||
<!-- 네비 -->
|
||||
<rect x="620" y="104" width="550" height="48" fill="#1d4ed8"/>
|
||||
<rect x="638" y="118" width="70" height="20" rx="10" fill="#fff" opacity="0.25"/>
|
||||
<rect x="900" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
||||
<rect x="952" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
||||
<rect x="1004" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
||||
<rect x="1100" y="114" width="56" height="28" rx="14" fill="#7c3aed"/>
|
||||
<text x="1128" y="133" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#fff">문의</text>
|
||||
<!-- 왼쪽 사이드바 (대시보드 스타일) -->
|
||||
<rect x="620" y="101" width="136" height="494" fill="#04102b"/>
|
||||
<!-- 사이드바 로고 -->
|
||||
<rect x="634" y="116" width="30" height="30" rx="8" fill="#2563eb"/>
|
||||
<text x="649" y="136" text-anchor="middle" font-family="sans-serif" font-size="13" font-weight="800" fill="#fff">쟁</text>
|
||||
<rect x="672" y="120" width="70" height="10" rx="5" fill="#1e3a8a"/>
|
||||
<rect x="672" y="136" width="50" height="8" rx="4" fill="#0d1f4f"/>
|
||||
<!-- 사이드바 메뉴 -->
|
||||
<rect x="630" y="164" width="108" height="28" rx="8" fill="#2563eb" opacity="0.9"/>
|
||||
<rect x="638" y="172" width="12" height="12" rx="3" fill="#60a5fa" opacity="0.5"/>
|
||||
<rect x="658" y="174" width="55" height="8" rx="4" fill="#fff" opacity="0.8"/>
|
||||
<rect x="630" y="200" width="108" height="26" rx="7" fill="#0d1f4f"/>
|
||||
<rect x="638" y="208" width="12" height="10" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="658" y="210" width="45" height="7" rx="3" fill="#1e3a8a"/>
|
||||
<rect x="630" y="234" width="108" height="26" rx="7" fill="#0d1f4f"/>
|
||||
<rect x="638" y="242" width="12" height="10" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="658" y="244" width="55" height="7" rx="3" fill="#1e3a8a"/>
|
||||
<rect x="630" y="268" width="108" height="26" rx="7" fill="#0d1f4f"/>
|
||||
<rect x="638" y="276" width="12" height="10" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="658" y="278" width="40" height="7" rx="3" fill="#1e3a8a"/>
|
||||
<rect x="630" y="302" width="108" height="26" rx="7" fill="#0d1f4f"/>
|
||||
<rect x="638" y="310" width="12" height="10" rx="2" fill="#1e3a8a"/>
|
||||
<rect x="658" y="312" width="50" height="7" rx="3" fill="#1e3a8a"/>
|
||||
|
||||
<!-- 메인 콘텐츠 영역 -->
|
||||
<!-- 상단 네비 -->
|
||||
<rect x="756" y="101" width="412" height="44" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="776" y="116" width="120" height="14" rx="7" fill="#e2e8f0"/>
|
||||
<rect x="1090" y="112" width="64" height="22" rx="11" fill="#2563eb"/>
|
||||
<text x="1122" y="127" text-anchor="middle" font-family="sans-serif" font-size="10" font-weight="700" fill="#fff">문의하기</text>
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<rect x="620" y="152" width="550" height="160" fill="#eff6ff"/>
|
||||
<!-- 히어로 텍스트 블록 -->
|
||||
<rect x="642" y="174" width="180" height="18" rx="9" fill="#bfdbfe"/>
|
||||
<rect x="642" y="200" width="240" height="22" rx="11" fill="#93c5fd"/>
|
||||
<rect x="642" y="230" width="200" height="18" rx="9" fill="#bfdbfe"/>
|
||||
<rect x="642" y="260" width="110" height="34" rx="17" fill="#2563eb"/>
|
||||
<text x="697" y="283" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#fff">문의하기</text>
|
||||
<!-- 히어로 이미지 -->
|
||||
<rect x="950" y="164" width="196" height="134" rx="10" fill="#dbeafe"/>
|
||||
<rect x="970" y="184" width="100" height="12" rx="6" fill="#93c5fd"/>
|
||||
<rect x="970" y="204" width="140" height="12" rx="6" fill="#bfdbfe"/>
|
||||
<rect x="970" y="224" width="120" height="12" rx="6" fill="#bfdbfe"/>
|
||||
<rect x="970" y="254" width="80" height="26" rx="13" fill="#2563eb"/>
|
||||
<rect x="756" y="145" width="412" height="148" fill="#eff6ff"/>
|
||||
<rect x="776" y="164" width="60" height="18" rx="9" fill="#bfdbfe"/>
|
||||
<text x="806" y="178" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#1d4ed8">⭐ 7년차</text>
|
||||
<rect x="776" y="190" width="180" height="20" rx="10" fill="#93c5fd"/>
|
||||
<rect x="776" y="218" width="140" height="16" rx="8" fill="#bfdbfe"/>
|
||||
<rect x="776" y="242" width="80" height="28" rx="14" fill="#2563eb"/>
|
||||
<text x="816" y="261" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fff">문의하기</text>
|
||||
<!-- 히어로 이미지 placeholder -->
|
||||
<rect x="1010" y="156" width="140" height="120" rx="10" fill="#dbeafe"/>
|
||||
<rect x="1026" y="174" width="80" height="10" rx="5" fill="#93c5fd"/>
|
||||
<rect x="1026" y="192" width="108" height="10" rx="5" fill="#bfdbfe"/>
|
||||
<rect x="1026" y="210" width="90" height="10" rx="5" fill="#bfdbfe"/>
|
||||
<rect x="1026" y="234" width="60" height="22" rx="11" fill="#2563eb"/>
|
||||
|
||||
<!-- 서비스 카드 영역 -->
|
||||
<rect x="620" y="312" width="550" height="20" fill="#f1f5f9"/>
|
||||
<text x="895" y="327" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#94a3b8">주요 서비스</text>
|
||||
<!-- 서비스 섹션 -->
|
||||
<rect x="756" y="293" width="412" height="24" fill="#f1f5f9"/>
|
||||
<text x="962" y="309" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">✦ 제공 서비스 ✦</text>
|
||||
|
||||
<!-- 카드 1 -->
|
||||
<rect x="634" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="634" y="344" width="162" height="5" rx="2" fill="#2563eb"/>
|
||||
<rect x="648" y="362" width="50" height="50" rx="10" fill="#eff6ff"/>
|
||||
<text x="673" y="394" text-anchor="middle" font-size="22">🏢</text>
|
||||
<rect x="648" y="424" width="90" height="12" rx="6" fill="#e2e8f0"/>
|
||||
<rect x="648" y="444" width="120" height="10" rx="5" fill="#f1f5f9"/>
|
||||
<rect x="648" y="458" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
||||
<!-- 카드 행 1 -->
|
||||
<rect x="762" y="325" width="122" height="108" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="762" y="325" width="122" height="5" rx="2" fill="#2563eb"/>
|
||||
<rect x="776" y="342" width="36" height="36" rx="8" fill="#eff6ff"/>
|
||||
<text x="794" y="366" text-anchor="middle" font-size="16">🏢</text>
|
||||
<rect x="776" y="386" width="72" height="10" rx="5" fill="#e2e8f0"/>
|
||||
<rect x="776" y="404" width="90" height="8" rx="4" fill="#f1f5f9"/>
|
||||
<rect x="776" y="418" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
||||
|
||||
<!-- 카드 2 -->
|
||||
<rect x="808" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
|
||||
<rect x="808" y="344" width="162" height="5" rx="2" fill="#7c3aed"/>
|
||||
<rect x="820" y="338" width="50" height="20" rx="10" fill="#7c3aed"/>
|
||||
<text x="845" y="353" text-anchor="middle" font-family="sans-serif" font-size="10" font-weight="700" fill="#fff">추천</text>
|
||||
<rect x="822" y="362" width="50" height="50" rx="10" fill="#ede9fe"/>
|
||||
<text x="847" y="394" text-anchor="middle" font-size="22">⚡</text>
|
||||
<rect x="822" y="424" width="90" height="12" rx="6" fill="#ddd6fe"/>
|
||||
<rect x="822" y="444" width="120" height="10" rx="5" fill="#ede9fe"/>
|
||||
<rect x="822" y="458" width="60" height="8" rx="4" fill="#f5f3ff"/>
|
||||
<rect x="894" y="325" width="122" height="108" rx="10" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
|
||||
<rect x="894" y="325" width="122" height="5" rx="2" fill="#7c3aed"/>
|
||||
<rect x="910" y="342" width="36" height="36" rx="8" fill="#ede9fe"/>
|
||||
<text x="928" y="366" text-anchor="middle" font-size="16">⚡</text>
|
||||
<rect x="910" y="386" width="72" height="10" rx="5" fill="#ddd6fe"/>
|
||||
<rect x="910" y="404" width="90" height="8" rx="4" fill="#ede9fe"/>
|
||||
<rect x="910" y="418" width="60" height="8" rx="4" fill="#f5f3ff"/>
|
||||
|
||||
<!-- 카드 3 -->
|
||||
<rect x="982" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="982" y="344" width="162" height="5" rx="2" fill="#059669"/>
|
||||
<rect x="996" y="362" width="50" height="50" rx="10" fill="#ecfdf5"/>
|
||||
<text x="1021" y="394" text-anchor="middle" font-size="22">🚀</text>
|
||||
<rect x="996" y="424" width="90" height="12" rx="6" fill="#e2e8f0"/>
|
||||
<rect x="996" y="444" width="120" height="10" rx="5" fill="#f1f5f9"/>
|
||||
<rect x="996" y="458" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
||||
<rect x="1026" y="325" width="122" height="108" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<rect x="1026" y="325" width="122" height="5" rx="2" fill="#059669"/>
|
||||
<rect x="1042" y="342" width="36" height="36" rx="8" fill="#ecfdf5"/>
|
||||
<text x="1060" y="366" text-anchor="middle" font-size="16">🚀</text>
|
||||
<rect x="1042" y="386" width="72" height="10" rx="5" fill="#d1fae5"/>
|
||||
<rect x="1042" y="404" width="90" height="8" rx="4" fill="#ecfdf5"/>
|
||||
<rect x="1042" y="418" width="60" height="8" rx="4" fill="#ecfdf5"/>
|
||||
|
||||
<!-- 하단 푸터 영역 -->
|
||||
<rect x="620" y="486" width="550" height="104" fill="#0f172a"/>
|
||||
<rect x="642" y="502" width="80" height="14" rx="7" fill="#334155"/>
|
||||
<rect x="642" y="524" width="120" height="10" rx="5" fill="#1e293b"/>
|
||||
<rect x="642" y="540" width="100" height="10" rx="5" fill="#1e293b"/>
|
||||
<rect x="1050" y="502" width="96" height="34" rx="8" fill="#2563eb"/>
|
||||
<text x="1098" y="524" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#fff">상담 신청</text>
|
||||
<!-- 실적 수치 행 -->
|
||||
<rect x="756" y="441" width="412" height="60" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="840" y="476" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#0f172a">7년</text>
|
||||
<text x="840" y="491" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="9" fill="#64748b">개발 경력</text>
|
||||
<line x1="899" y1="455" x2="899" y2="491" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="962" y="476" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#2563eb">100%</text>
|
||||
<text x="962" y="491" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="9" fill="#64748b">납기 준수</text>
|
||||
<line x1="1025" y1="455" x2="1025" y2="491" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="1087" y="476" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#7c3aed">무료</text>
|
||||
<text x="1087" y="491" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="9" fill="#64748b">AS 포함</text>
|
||||
|
||||
<!-- 하단 푸터 -->
|
||||
<rect x="756" y="501" width="412" height="94" fill="#04102b"/>
|
||||
<rect x="780" y="518" width="60" height="12" rx="6" fill="#1e3a8a"/>
|
||||
<rect x="780" y="538" width="100" height="9" rx="4" fill="#0d1f4f"/>
|
||||
<rect x="780" y="554" width="80" height="9" rx="4" fill="#0d1f4f"/>
|
||||
<rect x="1080" y="518" width="74" height="30" rx="8" fill="#2563eb"/>
|
||||
<text x="1117" y="538" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fff">상담 신청</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="635" width="1200" height="40" fill="#1d4ed8"/>
|
||||
<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">7년차 대기업 백엔드 개발자 박재오 · 기획부터 배포까지 원스톱 · jaengseung-made.com</text>
|
||||
<rect x="0" y="638" width="1200" height="37" fill="url(#btnA)"/>
|
||||
<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">7년차 대기업 백엔드 개발자 박재오 · 기획부터 배포까지 원스톱 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
@@ -1,88 +1,110 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||
<defs>
|
||||
<linearGradient id="topBg" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e3a8a"/>
|
||||
<linearGradient id="bgB" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#04102b"/>
|
||||
<stop offset="100%" style="stop-color:#1e1b4b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="card2Grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<linearGradient id="topBarB" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#04102b"/>
|
||||
<stop offset="100%" style="stop-color:#1e1b4b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="card2GradB" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#eff6ff"/>
|
||||
<stop offset="100%" style="stop-color:#ede9fe"/>
|
||||
</linearGradient>
|
||||
<filter id="cardShadow">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="12" flood-color="#000" flood-opacity="0.15"/>
|
||||
<linearGradient id="headB" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#60a5fa"/>
|
||||
<stop offset="100%" style="stop-color:#a78bfa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="btnB" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#2563eb"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||
</linearGradient>
|
||||
<filter id="cardShadowB">
|
||||
<feDropShadow dx="0" dy="6" stdDeviation="14" flood-color="#000" flood-opacity="0.2"/>
|
||||
</filter>
|
||||
<filter id="card2Shadow">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#7c3aed" flood-opacity="0.25"/>
|
||||
<filter id="card2ShadowB">
|
||||
<feDropShadow dx="0" dy="12" stdDeviation="24" flood-color="#7c3aed" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
<radialGradient id="glowB" cx="50%" cy="60%" r="60%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.12"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 상단 어두운 배경 -->
|
||||
<rect width="1200" height="280" fill="url(#topBg)"/>
|
||||
<!-- 하단 밝은 배경 -->
|
||||
<rect y="280" width="1200" height="395" fill="#f8fafc"/>
|
||||
<!-- 배경: 상단 어두운 영역 -->
|
||||
<rect width="1200" height="300" fill="url(#topBarB)"/>
|
||||
<!-- 하단 밝은 영역 -->
|
||||
<rect y="300" width="1200" height="375" fill="#f8fafc"/>
|
||||
<rect width="1200" height="675" fill="url(#glowB)"/>
|
||||
|
||||
<!-- 상단 로고/브랜드 -->
|
||||
<rect x="60" y="36" width="44" height="44" rx="12" fill="#2563eb"/>
|
||||
<text x="82" y="64" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#fff">쟁</text>
|
||||
<text x="116" y="52" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="700" fill="#60a5fa">쟁승메이드</text>
|
||||
<text x="116" y="70" font-family="sans-serif" font-size="12" fill="#475569">홈페이지 제작 전문</text>
|
||||
<!-- 상단: 브랜드 + 헤드라인 -->
|
||||
<!-- 로고 -->
|
||||
<rect x="60" y="38" width="42" height="42" rx="12" fill="#2563eb"/>
|
||||
<text x="81" y="65" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#fff">쟁</text>
|
||||
<text x="114" y="52" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="700" fill="#60a5fa">쟁승메이드</text>
|
||||
<text x="114" y="70" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">홈페이지 제작 전문</text>
|
||||
|
||||
<!-- 상단 헤드라인 -->
|
||||
<text x="600" y="128" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="800" fill="#ffffff">기업급 품질, 합리적 가격</text>
|
||||
<text x="600" y="180" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#94a3b8">7년차 대기업 현직 개발자 · Next.js 풀스택 · SEO 최적화</text>
|
||||
<!-- 헤드라인 -->
|
||||
<text x="600" y="130" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="900" fill="#ffffff">기업급 품질, 합리적 가격</text>
|
||||
<text x="600" y="180" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="21" fill="#94a3b8">7년차 대기업 현직 개발자 · Next.js 풀스택 · SEO 최적화</text>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<line x1="400" y1="218" x2="800" y2="218" stroke="#334155" stroke-width="1"/>
|
||||
<line x1="380" y1="218" x2="820" y2="218" stroke="#1a3a7a" stroke-width="1"/>
|
||||
|
||||
<!-- 아이콘 지표 3개 -->
|
||||
<text x="340" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#60a5fa">⚡ 최단 7일 납품</text>
|
||||
<text x="600" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#a78bfa">🔒 코드 품질 보장</text>
|
||||
<text x="860" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#34d399">✓ 납품 후 AS 포함</text>
|
||||
<!-- 강점 3개 -->
|
||||
<text x="330" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="600" fill="#60a5fa">⚡ 최단 7일 납품</text>
|
||||
<text x="600" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="600" fill="#a78bfa">🔒 코드 품질 보증</text>
|
||||
<text x="870" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="600" fill="#34d399">✓ 납품 후 AS 포함</text>
|
||||
|
||||
<!-- 플랜 카드 3개 -->
|
||||
<!-- 카드1: 스타터 -->
|
||||
<rect x="60" y="304" width="330" height="320" rx="20" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#cardShadow)"/>
|
||||
<rect x="60" y="304" width="330" height="8" rx="4" fill="#2563eb"/>
|
||||
<text x="225" y="350" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#2563eb">STARTER</text>
|
||||
<text x="225" y="410" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="52" font-weight="900" fill="#0f172a">50만원</text>
|
||||
<text x="225" y="438" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">~부터 시작</text>
|
||||
<line x1="84" y1="454" x2="366" y2="454" stroke="#f1f5f9" stroke-width="1.5"/>
|
||||
<text x="100" y="480" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ 5페이지 이내</text>
|
||||
<text x="100" y="504" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ 반응형 디자인</text>
|
||||
<text x="100" y="528" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ SEO 기본 설정</text>
|
||||
<text x="100" y="552" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ 납기 7일</text>
|
||||
<rect x="84" y="574" width="262" height="40" rx="10" fill="#eff6ff"/>
|
||||
<text x="215" y="599" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#2563eb">상담 신청</text>
|
||||
<rect x="50" y="308" width="330" height="326" rx="20" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#cardShadowB)"/>
|
||||
<rect x="50" y="308" width="330" height="8" rx="4" fill="#2563eb"/>
|
||||
<text x="215" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#2563eb">STARTER</text>
|
||||
<text x="215" y="422" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="56" font-weight="900" fill="#0f172a">50만원</text>
|
||||
<text x="215" y="448" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">부터 시작</text>
|
||||
<line x1="74" y1="466" x2="356" y2="466" stroke="#f1f5f9" stroke-width="1.5"/>
|
||||
<text x="90" y="492" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓ 5페이지 이내</text>
|
||||
<text x="90" y="516" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓ 반응형 디자인</text>
|
||||
<text x="90" y="540" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓ SEO 기본 설정</text>
|
||||
<text x="90" y="564" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓ 납기 7일</text>
|
||||
<rect x="74" y="584" width="262" height="40" rx="10" fill="#eff6ff"/>
|
||||
<text x="205" y="609" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#2563eb">상담 신청하기</text>
|
||||
|
||||
<!-- 카드2: 비즈니스 (추천) -->
|
||||
<rect x="430" y="284" width="340" height="360" rx="20" fill="url(#card2Grad)" stroke="#7c3aed" stroke-width="2" filter="url(#card2Shadow)"/>
|
||||
<rect x="430" y="284" width="340" height="8" rx="4" fill="#7c3aed"/>
|
||||
<!-- 카드2: 비즈니스 (추천, 크고 돌출) -->
|
||||
<rect x="425" y="286" width="348" height="370" rx="20" fill="url(#card2GradB)" stroke="#7c3aed" stroke-width="2.5" filter="url(#card2ShadowB)"/>
|
||||
<rect x="425" y="286" width="348" height="8" rx="4" fill="#7c3aed"/>
|
||||
<!-- 추천 뱃지 -->
|
||||
<rect x="672" y="274" width="76" height="28" rx="14" fill="#7c3aed"/>
|
||||
<text x="710" y="293" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#fff">⭐ 추천</text>
|
||||
<text x="600" y="334" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#7c3aed">BUSINESS</text>
|
||||
<text x="600" y="400" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="52" font-weight="900" fill="#0f172a">150만원</text>
|
||||
<text x="600" y="428" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">~부터 시작</text>
|
||||
<line x1="450" y1="444" x2="750" y2="444" stroke="#ddd6fe" stroke-width="1.5"/>
|
||||
<text x="470" y="470" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 10페이지 이내</text>
|
||||
<text x="470" y="494" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 커스텀 디자인</text>
|
||||
<text x="470" y="518" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 관리자 페이지</text>
|
||||
<text x="470" y="542" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ SEO 최적화</text>
|
||||
<text x="470" y="566" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 납기 14일</text>
|
||||
<rect x="450" y="590" width="300" height="44" rx="12" fill="#7c3aed"/>
|
||||
<text x="600" y="617" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="16" font-weight="700" fill="#fff">상담 신청 →</text>
|
||||
<rect x="671" y="274" width="80" height="28" rx="14" fill="#7c3aed"/>
|
||||
<text x="711" y="293" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#fff">⭐ 추천</text>
|
||||
<text x="599" y="338" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#7c3aed">BUSINESS</text>
|
||||
<text x="599" y="410" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="56" font-weight="900" fill="#0f172a">150만원</text>
|
||||
<text x="599" y="436" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">부터 시작</text>
|
||||
<line x1="447" y1="454" x2="751" y2="454" stroke="#ddd6fe" stroke-width="1.5"/>
|
||||
<text x="465" y="480" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓ 10페이지 이내</text>
|
||||
<text x="465" y="504" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓ 커스텀 디자인</text>
|
||||
<text x="465" y="528" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓ 관리자 페이지</text>
|
||||
<text x="465" y="552" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓ SEO 완전 최적화</text>
|
||||
<text x="465" y="576" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓ 납기 14일</text>
|
||||
<rect x="447" y="598" width="304" height="46" rx="13" fill="#7c3aed"/>
|
||||
<text x="599" y="626" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="16" font-weight="700" fill="#fff">지금 상담 신청 →</text>
|
||||
|
||||
<!-- 카드3: 프리미엄 -->
|
||||
<rect x="810" y="304" width="330" height="320" rx="20" fill="#0f172a" stroke="#334155" stroke-width="1.5" filter="url(#cardShadow)"/>
|
||||
<rect x="810" y="304" width="330" height="8" rx="4" fill="#f59e0b"/>
|
||||
<text x="975" y="350" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#fbbf24">PREMIUM</text>
|
||||
<text x="975" y="410" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="52" font-weight="900" fill="#ffffff">300만원</text>
|
||||
<text x="975" y="438" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">~부터 시작</text>
|
||||
<line x1="830" y1="454" x2="1120" y2="454" stroke="#1e293b" stroke-width="1.5"/>
|
||||
<text x="850" y="480" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ 페이지 수 무제한</text>
|
||||
<text x="850" y="504" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ 결제/회원 시스템</text>
|
||||
<text x="850" y="528" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ DB 연동</text>
|
||||
<text x="850" y="552" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ 6개월 유지보수</text>
|
||||
<rect x="830" y="574" width="262" height="40" rx="10" fill="#1e293b"/>
|
||||
<text x="961" y="599" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fbbf24">프리미엄 상담</text>
|
||||
<rect x="820" y="308" width="330" height="326" rx="20" fill="#0f172a" stroke="#1e293b" stroke-width="1.5" filter="url(#cardShadowB)"/>
|
||||
<rect x="820" y="308" width="330" height="8" rx="4" fill="#f59e0b"/>
|
||||
<text x="985" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#fbbf24">PREMIUM</text>
|
||||
<text x="985" y="422" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="56" font-weight="900" fill="#ffffff">300만원</text>
|
||||
<text x="985" y="448" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">부터 시작</text>
|
||||
<line x1="842" y1="466" x2="1128" y2="466" stroke="#1e293b" stroke-width="1.5"/>
|
||||
<text x="860" y="492" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓ 페이지 수 무제한</text>
|
||||
<text x="860" y="516" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓ 결제/회원 시스템</text>
|
||||
<text x="860" y="540" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓ DB 연동</text>
|
||||
<text x="860" y="564" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓ 6개월 유지보수</text>
|
||||
<rect x="842" y="584" width="262" height="40" rx="10" fill="#1e293b"/>
|
||||
<text x="973" y="609" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fbbf24">프리미엄 상담</text>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="638" width="1200" height="37" fill="url(#btnB)"/>
|
||||
<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">7년차 대기업 백엔드 개발자 박재오 · 기획부터 배포까지 원스톱 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 8.5 KiB |
206
public/marketing/thumb-lotto.svg
Normal file
206
public/marketing/thumb-lotto.svg
Normal file
@@ -0,0 +1,206 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||
<defs>
|
||||
<linearGradient id="bgLt" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1c1200"/>
|
||||
<stop offset="50%" style="stop-color:#1a0e00"/>
|
||||
<stop offset="100%" style="stop-color:#04102b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headLt" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#fbbf24"/>
|
||||
<stop offset="100%" style="stop-color:#f59e0b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="priceLt" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#92400e"/>
|
||||
<stop offset="100%" style="stop-color:#b45309"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="goldBall" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fde68a"/>
|
||||
<stop offset="100%" style="stop-color:#f59e0b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="redBall" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fca5a5"/>
|
||||
<stop offset="100%" style="stop-color:#ef4444"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="blueBall" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#93c5fd"/>
|
||||
<stop offset="100%" style="stop-color:#3b82f6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="greenBall" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#86efac"/>
|
||||
<stop offset="100%" style="stop-color:#22c55e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grayBall" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#e2e8f0"/>
|
||||
<stop offset="100%" style="stop-color:#94a3b8"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glowLt" cx="70%" cy="50%" r="55%">
|
||||
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.18"/>
|
||||
<stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<filter id="ballShadLt">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
<filter id="panelShadLt">
|
||||
<feDropShadow dx="0" dy="10" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- 배경 -->
|
||||
<rect width="1200" height="675" fill="url(#bgLt)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowLt)"/>
|
||||
|
||||
<!-- 배경 숫자 패턴 (은은하게) -->
|
||||
<text x="620" y="88" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.7">7 12 23 34 41 45 [BONUS: 16]</text>
|
||||
<text x="620" y="108" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.5">1 8 17 29 36 44 [BONUS: 3]</text>
|
||||
<text x="620" y="590" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.4">FREQUENCY ANALYSIS | PATTERN: 연속번호 출현율 34.2%</text>
|
||||
<text x="620" y="610" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.3">HOT: 3,7,14,23,32 | COLD: 5,19,28,38,42</text>
|
||||
|
||||
<!-- 왼쪽 콘텐츠 -->
|
||||
<!-- 뱃지 -->
|
||||
<rect x="60" y="62" width="272" height="40" rx="20" fill="#92400e" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<text x="82" y="87" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fde68a">🎯 빅데이터 통계 기반 분석</text>
|
||||
|
||||
<!-- 헤드라인 -->
|
||||
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="#ffffff">운이 아닌</text>
|
||||
<text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="url(#headLt)">데이터로 고릅니다</text>
|
||||
<text x="60" y="276" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">1~45회차 전수 분석 · 출현 패턴 · 구간별 최적화</text>
|
||||
|
||||
<!-- 수치 뱃지 3개 -->
|
||||
<rect x="60" y="300" width="156" height="70" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<text x="138" y="332" text-anchor="middle" font-family="sans-serif" font-size="30" font-weight="900" fill="#fbbf24">1,115</text>
|
||||
<text x="138" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">회차 전수 분석</text>
|
||||
|
||||
<rect x="228" y="300" width="156" height="70" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<text x="306" y="332" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="28" font-weight="900" fill="#60a5fa">매주</text>
|
||||
<text x="306" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">번호 업데이트</text>
|
||||
|
||||
<rect x="396" y="300" width="172" height="70" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<text x="482" y="326" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">월 구독 시작</text>
|
||||
<text x="482" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="30" font-weight="900" fill="#fbbf24">900원</text>
|
||||
|
||||
<!-- 플랜 설명 -->
|
||||
<g font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#e2e8f0">
|
||||
<rect x="60" y="388" width="12" height="12" rx="3" fill="#fbbf24"/>
|
||||
<text x="82" y="400">골드 — 매주 1회 번호 추천 · 900원/월</text>
|
||||
<rect x="60" y="416" width="12" height="12" rx="3" fill="#94a3b8"/>
|
||||
<text x="82" y="428">플래티넘 — 주 3회 + 텔레그램 · 2,900원/월</text>
|
||||
<rect x="60" y="444" width="12" height="12" rx="3" fill="#fbbf24"/>
|
||||
<text x="82" y="456">다이아 — 무제한 + 연간 리포트 · 9,900원/월</text>
|
||||
</g>
|
||||
|
||||
<!-- 가격 뱃지 -->
|
||||
<rect x="60" y="476" width="248" height="72" rx="16" fill="url(#priceLt)"/>
|
||||
<text x="184" y="503" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#fde68a">골드 플랜 시작 가격</text>
|
||||
<text x="184" y="534" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="900" fill="#ffffff">월 900원~</text>
|
||||
|
||||
<!-- 안내 문구 -->
|
||||
<rect x="60" y="562" width="510" height="34" rx="8" fill="#1c1200" opacity="0.85"/>
|
||||
<text x="80" y="583" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#78716c">⚠️ 당첨을 보장하지 않습니다. 통계 기반 번호 추천 서비스입니다.</text>
|
||||
|
||||
<!-- URL -->
|
||||
<text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
|
||||
|
||||
<!-- 오른쪽 로또 공 + 분석 패널 -->
|
||||
<rect x="614" y="52" width="558" height="558" rx="22" fill="#100a00" stroke="#2a1a00" stroke-width="1.5" filter="url(#panelShadLt)"/>
|
||||
|
||||
<!-- 패널 헤더 -->
|
||||
<rect x="614" y="52" width="558" height="46" rx="22" fill="#0c0800"/>
|
||||
<rect x="614" y="76" width="558" height="22" fill="#0c0800"/>
|
||||
<text x="893" y="82" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#f59e0b">🎱 이번주 추천 번호</text>
|
||||
|
||||
<!-- 로또 공 6개 (메인) -->
|
||||
<!-- 공 1: 7 (파랑) -->
|
||||
<circle cx="690" cy="160" r="46" fill="url(#blueBall)" filter="url(#ballShadLt)"/>
|
||||
<circle cx="690" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
|
||||
<text x="690" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">7</text>
|
||||
|
||||
<!-- 공 2: 14 (빨강) -->
|
||||
<circle cx="788" cy="160" r="46" fill="url(#redBall)" filter="url(#ballShadLt)"/>
|
||||
<circle cx="788" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
|
||||
<text x="788" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">14</text>
|
||||
|
||||
<!-- 공 3: 23 (금) -->
|
||||
<circle cx="886" cy="160" r="46" fill="url(#goldBall)" filter="url(#ballShadLt)"/>
|
||||
<circle cx="886" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
|
||||
<text x="886" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#7c3200">23</text>
|
||||
|
||||
<!-- 공 4: 31 (초록) -->
|
||||
<circle cx="984" cy="160" r="46" fill="url(#greenBall)" filter="url(#ballShadLt)"/>
|
||||
<circle cx="984" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
|
||||
<text x="984" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">31</text>
|
||||
|
||||
<!-- 공 5: 38 (파랑) -->
|
||||
<circle cx="1082" cy="160" r="46" fill="url(#blueBall)" filter="url(#ballShadLt)"/>
|
||||
<circle cx="1082" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
|
||||
<text x="1082" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">38</text>
|
||||
|
||||
<!-- 보너스 공: 45 (회색) -->
|
||||
<text x="893" y="228" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#475569">BONUS</text>
|
||||
<circle cx="1140" cy="218" r="30" fill="url(#grayBall)" filter="url(#ballShadLt)"/>
|
||||
<circle cx="1140" cy="215" r="8" fill="rgba(255,255,255,0.3)"/>
|
||||
<text x="1140" y="225" text-anchor="middle" font-family="sans-serif" font-size="20" font-weight="900" fill="#0f172a">45</text>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<line x1="634" y1="252" x2="1152" y2="252" stroke="#1e0e00" stroke-width="1.5"/>
|
||||
|
||||
<!-- 통계 그래프 영역 -->
|
||||
<text x="893" y="280" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#94a3b8">번호별 출현 빈도 (최근 100회)</text>
|
||||
|
||||
<!-- 빈도 바 그래프 (간소화) -->
|
||||
<g>
|
||||
<!-- 1~10 구간 -->
|
||||
<rect x="640" y="392" width="54" height="70" rx="0" fill="#3b82f6" opacity="0.7"/>
|
||||
<rect x="640" y="362" width="54" height="30" rx="0" fill="#3b82f6" opacity="0.9"/>
|
||||
<text x="667" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">1~10</text>
|
||||
<!-- 11~20 구간 -->
|
||||
<rect x="704" y="342" width="54" height="120" rx="0" fill="#22c55e" opacity="0.7"/>
|
||||
<rect x="704" y="302" width="54" height="40" rx="0" fill="#22c55e" opacity="0.9"/>
|
||||
<text x="731" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">11~20</text>
|
||||
<!-- 21~30 구간 -->
|
||||
<rect x="768" y="372" width="54" height="90" rx="0" fill="#f59e0b" opacity="0.7"/>
|
||||
<rect x="768" y="352" width="54" height="20" rx="0" fill="#f59e0b" opacity="0.9"/>
|
||||
<text x="795" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">21~30</text>
|
||||
<!-- 31~40 구간 -->
|
||||
<rect x="832" y="332" width="54" height="130" rx="0" fill="#ef4444" opacity="0.7"/>
|
||||
<rect x="832" y="302" width="54" height="30" rx="0" fill="#ef4444" opacity="0.9"/>
|
||||
<text x="859" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">31~40</text>
|
||||
<!-- 41~45 구간 -->
|
||||
<rect x="896" y="382" width="54" height="80" rx="0" fill="#a78bfa" opacity="0.7"/>
|
||||
<rect x="896" y="362" width="54" height="20" rx="0" fill="#a78bfa" opacity="0.9"/>
|
||||
<text x="923" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">41~45</text>
|
||||
</g>
|
||||
<!-- 기준선 -->
|
||||
<line x1="634" y1="462" x2="966" y2="462" stroke="#1e0e00" stroke-width="1"/>
|
||||
|
||||
<!-- 우측 통계 텍스트 -->
|
||||
<rect x="980" y="290" width="190" height="172" rx="14" fill="#0c0800" stroke="#2a1a00" stroke-width="1"/>
|
||||
<text x="1075" y="316" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#94a3b8">HOT 번호</text>
|
||||
<text x="1075" y="340" text-anchor="middle" font-family="sans-serif" font-size="14" font-weight="700" fill="#ef4444">3, 7, 14, 23, 32</text>
|
||||
<line x1="990" y1="354" x2="1160" y2="354" stroke="#1e0e00" stroke-width="1"/>
|
||||
<text x="1075" y="374" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#94a3b8">COLD 번호</text>
|
||||
<text x="1075" y="398" text-anchor="middle" font-family="sans-serif" font-size="14" font-weight="700" fill="#60a5fa">5, 19, 28, 38, 42</text>
|
||||
<line x1="990" y1="412" x2="1160" y2="412" stroke="#1e0e00" stroke-width="1"/>
|
||||
<text x="1075" y="432" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#94a3b8">평균 출현 간격</text>
|
||||
<text x="1075" y="454" text-anchor="middle" font-family="sans-serif" font-size="18" font-weight="900" fill="#fbbf24">7.8회</text>
|
||||
|
||||
<!-- AI 분석 태그 -->
|
||||
<rect x="634" y="492" width="526" height="96" rx="14" fill="#1a0e00" stroke="#2a1a00" stroke-width="1"/>
|
||||
<text x="650" y="516" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#f59e0b">분석 기법</text>
|
||||
<g font-family="sans-serif" font-size="11" font-weight="700">
|
||||
<rect x="650" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="694" y="540" text-anchor="middle" fill="#fbbf24">빈도 분석</text>
|
||||
<rect x="746" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="790" y="540" text-anchor="middle" fill="#fbbf24">구간 패턴</text>
|
||||
<rect x="842" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="886" y="540" text-anchor="middle" fill="#fbbf24">홀짝 비율</text>
|
||||
<rect x="938" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="982" y="540" text-anchor="middle" fill="#fbbf24">연속번호</text>
|
||||
<rect x="1034" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="1078" y="540" text-anchor="middle" fill="#fbbf24">출현 주기</text>
|
||||
</g>
|
||||
<text x="650" y="575" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">7년차 개발자가 직접 설계한 통계 알고리즘으로 매주 번호를 선별합니다.</text>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="638" width="1200" height="37" fill="#92400e"/>
|
||||
<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="#fde68a">빅데이터 통계 기반 로또 번호 추천 · 1,115회차 전수 분석 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -1,124 +1,122 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="135deg" x2="100%" y2="100%">
|
||||
<linearGradient id="bgPr" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#04102b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<linearGradient id="headPr" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#a78bfa"/>
|
||||
<stop offset="100%" style="stop-color:#60a5fa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="badGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#374151"/>
|
||||
<stop offset="100%" style="stop-color:#1f2937"/>
|
||||
<linearGradient id="badGradPr" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1f2937"/>
|
||||
<stop offset="100%" style="stop-color:#111827"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="goodGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<linearGradient id="goodGradPr" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#312e81"/>
|
||||
<stop offset="100%" style="stop-color:#2d2b69"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glow" cx="50%" cy="40%" r="55%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
|
||||
<radialGradient id="glowPr" cx="50%" cy="40%" r="55%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.18"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<filter id="bubbleShadow">
|
||||
<feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#7c3aed" flood-opacity="0.3"/>
|
||||
<filter id="bubbleShadPr">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#7c3aed" flood-opacity="0.25"/>
|
||||
</filter>
|
||||
<filter id="badShadow">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.3"/>
|
||||
<filter id="panelShadPr">
|
||||
<feDropShadow dx="0" dy="10" stdDeviation="20" flood-color="#000" flood-opacity="0.45"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- 배경 -->
|
||||
<rect width="1200" height="675" fill="url(#bg2)"/>
|
||||
<rect width="1200" height="675" fill="url(#glow)"/>
|
||||
<rect width="1200" height="675" fill="url(#bgPr)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowPr)"/>
|
||||
|
||||
<!-- 배경 코드 패턴 -->
|
||||
<text x="40" y="100" font-family="monospace" font-size="13" fill="#312e81" opacity="0.6">system: You are an expert...</text>
|
||||
<text x="40" y="140" font-family="monospace" font-size="13" fill="#312e81" opacity="0.4">role: assistant</text>
|
||||
<text x="40" y="580" font-family="monospace" font-size="13" fill="#312e81" opacity="0.4">temperature: 0.7</text>
|
||||
<text x="40" y="610" font-family="monospace" font-size="13" fill="#312e81" opacity="0.3">max_tokens: 2048</text>
|
||||
<text x="900" y="80" font-family="monospace" font-size="13" fill="#312e81" opacity="0.4">{"role": "user",</text>
|
||||
<text x="900" y="110" font-family="monospace" font-size="13" fill="#312e81" opacity="0.3"> "content": "..."}</text>
|
||||
<!-- 배경 코드 텍스트 (은은하게) -->
|
||||
<text x="30" y="92" font-family="monospace" font-size="12" fill="#312e81" opacity="0.55">system: You are an expert business analyst with 10 years of experience...</text>
|
||||
<text x="30" y="118" font-family="monospace" font-size="12" fill="#312e81" opacity="0.4">role: assistant | temperature: 0.3 | max_tokens: 4096</text>
|
||||
<text x="30" y="590" font-family="monospace" font-size="12" fill="#312e81" opacity="0.35">{"output_format": "structured", "language": "ko", "tone": "professional"}</text>
|
||||
<text x="30" y="614" font-family="monospace" font-size="12" fill="#312e81" opacity="0.25">chain_of_thought: true | few_shot_examples: 3</text>
|
||||
|
||||
<!-- 상단 뱃지 -->
|
||||
<rect x="60" y="66" width="270" height="38" rx="19" fill="#3b0764" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="84" y="90" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#c4b5fd">🧠 AI 프롬프트 전문 설계</text>
|
||||
<!-- 왼쪽 텍스트 -->
|
||||
<!-- 뱃지 -->
|
||||
<rect x="60" y="60" width="290" height="40" rx="20" fill="#3b0764" stroke="#7c3aed" stroke-width="1.5"/>
|
||||
<text x="84" y="86" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#c4b5fd">🧠 AI 프롬프트 전문 설계</text>
|
||||
|
||||
<!-- 헤드라인 -->
|
||||
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="800" fill="#ffffff">AI를 제대로</text>
|
||||
<text x="60" y="220" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="800" fill="url(#headGrad)">써본 적 있으신가요?</text>
|
||||
<text x="60" y="272" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="#94a3b8">업무 특화 프롬프트로 생산성 극대화</text>
|
||||
<text x="60" y="164" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="900" fill="#ffffff">AI를 제대로</text>
|
||||
<text x="60" y="224" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="900" fill="url(#headPr)">써본 적 있으신가요?</text>
|
||||
<text x="60" y="272" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">업무 특화 프롬프트로 생산성 10배 향상</text>
|
||||
|
||||
<!-- 수치 뱃지들 -->
|
||||
<rect x="60" y="300" width="140" height="64" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="130" y="328" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#a78bfa">10x</text>
|
||||
<text x="130" y="352" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">생산성 향상</text>
|
||||
<!-- 수치 뱃지 3개 -->
|
||||
<rect x="60" y="298" width="142" height="68" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
|
||||
<text x="131" y="330" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#a78bfa">10x</text>
|
||||
<text x="131" y="354" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">생산성 향상</text>
|
||||
|
||||
<rect x="212" y="300" width="140" height="64" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="282" y="328" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="22" font-weight="900" fill="#60a5fa">3일</text>
|
||||
<text x="282" y="352" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">납품 (베이직)</text>
|
||||
<rect x="214" y="298" width="142" height="68" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
|
||||
<text x="285" y="330" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="28" font-weight="900" fill="#60a5fa">3일</text>
|
||||
<text x="285" y="354" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">납품 (베이직)</text>
|
||||
|
||||
<rect x="364" y="300" width="140" height="64" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="434" y="328" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="22" font-weight="900" fill="#34d399">10만원~</text>
|
||||
<text x="434" y="352" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">시작 가격</text>
|
||||
<rect x="368" y="298" width="156" height="68" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
|
||||
<text x="446" y="326" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">시작 가격</text>
|
||||
<text x="446" y="354" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="26" font-weight="900" fill="#34d399">10만원~</text>
|
||||
|
||||
<!-- 호환 AI 뱃지 -->
|
||||
<text x="60" y="398" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#64748b">지원 AI:</text>
|
||||
<rect x="130" y="381" width="100" height="28" rx="8" fill="#10a37f" opacity="0.9"/>
|
||||
<text x="180" y="400" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">ChatGPT</text>
|
||||
<rect x="240" y="381" width="70" height="28" rx="8" fill="#CC785C" opacity="0.9"/>
|
||||
<text x="275" y="400" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Claude</text>
|
||||
<rect x="320" y="381" width="80" height="28" rx="8" fill="#1a73e8" opacity="0.9"/>
|
||||
<text x="360" y="400" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Gemini</text>
|
||||
<!-- 지원 AI 플랫폼 -->
|
||||
<text x="60" y="402" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#64748b">지원 AI 플랫폼 :</text>
|
||||
<rect x="168" y="385" width="106" height="30" rx="9" fill="#10a37f" opacity="0.9"/>
|
||||
<text x="221" y="404" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">ChatGPT</text>
|
||||
<rect x="284" y="385" width="80" height="30" rx="9" fill="#c35a38" opacity="0.9"/>
|
||||
<text x="324" y="404" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Claude</text>
|
||||
<rect x="374" y="385" width="84" height="30" rx="9" fill="#1a73e8" opacity="0.9"/>
|
||||
<text x="416" y="404" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Gemini</text>
|
||||
|
||||
<!-- 적용 분야 -->
|
||||
<g font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">
|
||||
<text x="60" y="448">📝 보고서·기획서 · 📊 데이터 분석 · 📧 이메일 작성</text>
|
||||
<text x="60" y="476">💡 아이디어 발굴 · 🎯 마케팅 카피 · 💬 고객 응대</text>
|
||||
</g>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 오른쪽 Before/After 말풍선 -->
|
||||
<!-- 오른쪽 Before/After 패널 -->
|
||||
<!-- Before 영역 -->
|
||||
<text x="638" y="90" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#ef4444">❌ BEFORE — 일반 프롬프트</text>
|
||||
<rect x="630" y="104" width="530" height="220" rx="16" fill="url(#badGrad)" stroke="#4b5563" stroke-width="1" filter="url(#badShadow)"/>
|
||||
<text x="634" y="86" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#ef4444">❌ BEFORE — 일반 프롬프트</text>
|
||||
<rect x="626" y="100" width="546" height="226" rx="18" fill="url(#badGradPr)" stroke="#374151" stroke-width="1" filter="url(#panelShadPr)"/>
|
||||
|
||||
<!-- 사용자 메시지 -->
|
||||
<rect x="848" y="120" width="290" height="44" rx="12" fill="#4b5563"/>
|
||||
<text x="868" y="140" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#e5e7eb">보고서 써줘</text>
|
||||
<text x="868" y="158" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#9ca3af">(프롬프트 7글자)</text>
|
||||
<!-- 사용자 메시지 (오른쪽 말풍선) -->
|
||||
<rect x="862" y="118" width="288" height="48" rx="12" fill="#374151"/>
|
||||
<text x="878" y="138" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#e5e7eb">보고서 써줘</text>
|
||||
<text x="878" y="158" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#9ca3af">(프롬프트 7글자)</text>
|
||||
|
||||
<!-- AI 응답 -->
|
||||
<rect x="648" y="176" width="320" height="130" rx="12" fill="#374151"/>
|
||||
<rect x="648" y="176" width="320" height="130" rx="12" fill="#374151"/>
|
||||
<text x="668" y="198" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#9ca3af">보고서를 작성해 드리겠습니다.</text>
|
||||
<text x="668" y="218" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#9ca3af">제목: 보고서</text>
|
||||
<text x="668" y="238" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#9ca3af">내용: [내용을 입력해주세요]</text>
|
||||
<text x="668" y="258" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#6b7280">결론: [결론을 입력해주세요]</text>
|
||||
<text x="668" y="278" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#6b7280">...</text>
|
||||
<text x="668" y="296" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#ef4444">→ 쓸모없는 템플릿 반환</text>
|
||||
<!-- AI 응답 (왼쪽 말풍선) -->
|
||||
<rect x="640" y="182" width="334" height="126" rx="12" fill="#1f2937"/>
|
||||
<text x="660" y="204" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#9ca3af">보고서를 작성해 드리겠습니다.</text>
|
||||
<text x="660" y="226" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#9ca3af">제목: 보고서</text>
|
||||
<text x="660" y="248" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#9ca3af">내용: [내용을 입력해주세요]</text>
|
||||
<text x="660" y="270" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#6b7280">결론: [결론을 입력해주세요]</text>
|
||||
<text x="660" y="294" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#ef4444">→ 쓸모없는 빈 템플릿 반환</text>
|
||||
|
||||
<!-- After 영역 -->
|
||||
<text x="638" y="358" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#34d399">✅ AFTER — 최적화 프롬프트</text>
|
||||
<rect x="630" y="372" width="530" height="240" rx="16" fill="url(#goodGrad)" stroke="#7c3aed" stroke-width="1.5" filter="url(#bubbleShadow)"/>
|
||||
<text x="634" y="358" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#34d399">✅ AFTER — 최적화 프롬프트</text>
|
||||
<rect x="626" y="374" width="546" height="256" rx="18" fill="url(#goodGradPr)" stroke="#7c3aed" stroke-width="2" filter="url(#bubbleShadPr)"/>
|
||||
|
||||
<!-- 최적화된 프롬프트 -->
|
||||
<rect x="820" y="388" width="318" height="90" rx="12" fill="#312e81"/>
|
||||
<text x="840" y="408" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[역할] 당신은 5년 경력 경영분석가</text>
|
||||
<text x="840" y="424" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[배경] 임원 보고용, 3분 이내 읽기</text>
|
||||
<text x="840" y="440" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[형식] 요약→현황→제언 구조</text>
|
||||
<text x="840" y="456" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[제약] 불필요한 미사여구 제거</text>
|
||||
<text x="840" y="472" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#a78bfa">(최적화 프롬프트)</text>
|
||||
<!-- 최적화 프롬프트 박스 -->
|
||||
<rect x="832" y="390" width="322" height="110" rx="14" fill="#312e81"/>
|
||||
<text x="852" y="412" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[역할] 5년 경력 경영분석가</text>
|
||||
<text x="852" y="432" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[배경] 임원 보고용, 3분 이내</text>
|
||||
<text x="852" y="452" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[형식] 요약→현황→제언</text>
|
||||
<text x="852" y="472" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[제약] 불필요한 미사여구 제거</text>
|
||||
<text x="852" y="492" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#7c3aed">← 최적화 프롬프트 (118글자)</text>
|
||||
|
||||
<!-- AI 응답 (좋은 버전) -->
|
||||
<rect x="648" y="492" width="330" height="104" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="668" y="514" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">📋 [임원 보고 요약]</text>
|
||||
<text x="668" y="532" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">▶ 핵심 수치: 매출 12% 성장</text>
|
||||
<text x="668" y="550" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">▶ 리스크 요인: 원가 상승 3건</text>
|
||||
<text x="668" y="568" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">▶ 즉시 조치 사항: ...</text>
|
||||
<text x="668" y="584" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#34d399">→ 즉시 활용 가능한 보고서 완성!</text>
|
||||
<rect x="640" y="516" width="352" height="100" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
|
||||
<text x="660" y="540" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">📋 [임원 보고 요약]</text>
|
||||
<text x="660" y="560" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#c4b5fd">▶ 핵심 수치: 매출 12% 성장</text>
|
||||
<text x="660" y="580" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#c4b5fd">▶ 리스크: 원가 상승 3건 확인</text>
|
||||
<text x="660" y="600" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#34d399">→ 즉시 활용 가능한 임원 보고서 완성!</text>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="635" width="1200" height="40" fill="#4c1d95"/>
|
||||
<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">ChatGPT · Claude · Gemini 업무 특화 프롬프트 설계 · jaengseung-made.com</text>
|
||||
<rect x="0" y="638" width="1200" height="37" fill="#3b0764"/>
|
||||
<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">ChatGPT · Claude · Gemini 업무 특화 프롬프트 설계 · 7년차 개발자 직접 제작 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.1 KiB |
227
public/marketing/thumb-saju.svg
Normal file
227
public/marketing/thumb-saju.svg
Normal file
@@ -0,0 +1,227 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||
<defs>
|
||||
<linearGradient id="bgSj" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0e0720"/>
|
||||
<stop offset="50%" style="stop-color:#1a0a3a"/>
|
||||
<stop offset="100%" style="stop-color:#04102b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headSj" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#c4b5fd"/>
|
||||
<stop offset="100%" style="stop-color:#a78bfa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="goldSj" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#fde68a"/>
|
||||
<stop offset="100%" style="stop-color:#f59e0b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="priceSj" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4c1d95"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pillarGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#0e0720"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glowSj" cx="70%" cy="50%" r="55%">
|
||||
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
|
||||
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="orb" cx="40%" cy="35%" r="60%">
|
||||
<stop offset="0%" style="stop-color:#312e81"/>
|
||||
<stop offset="100%" style="stop-color:#0e0720"/>
|
||||
</radialGradient>
|
||||
<filter id="glowSjF">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="panelShadSj">
|
||||
<feDropShadow dx="0" dy="12" stdDeviation="22" flood-color="#000" flood-opacity="0.55"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- 배경 -->
|
||||
<rect width="1200" height="675" fill="url(#bgSj)"/>
|
||||
<rect width="1200" height="675" fill="url(#glowSj)"/>
|
||||
|
||||
<!-- 별 배경 효과 -->
|
||||
<circle cx="680" cy="120" r="1.5" fill="#c4b5fd" opacity="0.6"/>
|
||||
<circle cx="720" cy="80" r="1" fill="#a78bfa" opacity="0.5"/>
|
||||
<circle cx="760" cy="140" r="1.5" fill="#c4b5fd" opacity="0.4"/>
|
||||
<circle cx="800" cy="100" r="1" fill="#ddd6fe" opacity="0.6"/>
|
||||
<circle cx="840" cy="60" r="2" fill="#a78bfa" opacity="0.3"/>
|
||||
<circle cx="900" cy="120" r="1.5" fill="#c4b5fd" opacity="0.5"/>
|
||||
<circle cx="950" cy="70" r="1" fill="#ddd6fe" opacity="0.4"/>
|
||||
<circle cx="1000" cy="100" r="1.5" fill="#a78bfa" opacity="0.6"/>
|
||||
<circle cx="1050" cy="50" r="1" fill="#c4b5fd" opacity="0.5"/>
|
||||
<circle cx="1100" cy="90" r="2" fill="#ddd6fe" opacity="0.3"/>
|
||||
<circle cx="650" cy="200" r="1" fill="#a78bfa" opacity="0.5"/>
|
||||
<circle cx="700" cy="240" r="1.5" fill="#c4b5fd" opacity="0.4"/>
|
||||
<circle cx="730" cy="580" r="1" fill="#a78bfa" opacity="0.5"/>
|
||||
<circle cx="780" cy="560" r="1.5" fill="#c4b5fd" opacity="0.4"/>
|
||||
<circle cx="820" cy="600" r="1" fill="#ddd6fe" opacity="0.5"/>
|
||||
|
||||
<!-- 배경 한자 장식 (은은하게) -->
|
||||
<text x="80" y="580" font-family="'Malgun Gothic',sans-serif" font-size="80" fill="#1a0a3a" opacity="0.6">天</text>
|
||||
<text x="400" y="620" font-family="'Malgun Gothic',sans-serif" font-size="60" fill="#1a0a3a" opacity="0.4">命</text>
|
||||
|
||||
<!-- 왼쪽 콘텐츠 -->
|
||||
<!-- 뱃지 -->
|
||||
<rect x="60" y="62" width="290" height="40" rx="20" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
|
||||
<text x="82" y="87" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#c4b5fd">✨ 전통 사주 × AI 딥러닝 분석</text>
|
||||
|
||||
<!-- 헤드라인 -->
|
||||
<text x="60" y="164" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="#ffffff">타고난 운명을</text>
|
||||
<text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="url(#headSj)">AI가 읽어드립니다</text>
|
||||
<text x="60" y="274" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">사주팔자 완전 해석 · 12가지 인생 항목 분석</text>
|
||||
|
||||
<!-- 12항목 분석 목록 -->
|
||||
<g font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">
|
||||
<text x="60" y="310">🔮 성격·적성 · 💼 직업운 · 💰 재물운 · ❤️ 애정운</text>
|
||||
<text x="60" y="340">🏠 가정운 · ⚕️ 건강운 · 📅 연간운 · ✨ 용신·기신</text>
|
||||
<text x="60" y="370">🌟 대운 흐름 · 🤝 인연 분석 · ⚠️ 주의 시기 · 💡 조언</text>
|
||||
</g>
|
||||
|
||||
<!-- 차별화 포인트 -->
|
||||
<rect x="60" y="392" width="520" height="80" rx="14" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<g font-family="'Malgun Gothic',sans-serif">
|
||||
<circle cx="88" cy="420" r="16" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="88" y="426" text-anchor="middle" font-size="14">🤖</text>
|
||||
<text x="114" y="416" font-size="14" font-weight="700" fill="#e2e8f0">Gemini AI 해석 엔진</text>
|
||||
<text x="114" y="434" font-size="12" fill="#64748b">단순 운세가 아닌 근거 있는 해석</text>
|
||||
|
||||
<circle cx="88" cy="460" r="16" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="88" y="466" text-anchor="middle" font-size="14">📜</text>
|
||||
<text x="114" y="456" font-size="14" font-weight="700" fill="#e2e8f0">전통 사주 학문 기반</text>
|
||||
<text x="114" y="474" font-size="12" fill="#64748b">오행·천간지지·신살 완전 적용</text>
|
||||
</g>
|
||||
|
||||
<!-- 가격 뱃지 -->
|
||||
<rect x="60" y="488" width="256" height="72" rx="16" fill="url(#priceSj)"/>
|
||||
<text x="188" y="515" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#ddd6fe">AI 상세 리포트</text>
|
||||
<text x="188" y="545" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="900" fill="#ffffff">4,900원</text>
|
||||
|
||||
<!-- 무료 기본 분석 안내 -->
|
||||
<rect x="60" y="574" width="520" height="36" rx="10" fill="#1e1b4b" opacity="0.85"/>
|
||||
<text x="80" y="597" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#a78bfa">🎁 기본 사주팔자 계산·오행 분석은 무료 제공</text>
|
||||
|
||||
<!-- URL -->
|
||||
<text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
|
||||
|
||||
<!-- 오른쪽 사주팔자 패널 -->
|
||||
<rect x="614" y="52" width="558" height="558" rx="22" fill="#0a0618" stroke="#1e1b4b" stroke-width="1.5" filter="url(#panelShadSj)"/>
|
||||
<!-- 상단 장식선 -->
|
||||
<line x1="634" y1="104" x2="1152" y2="104" stroke="#1e1b4b" stroke-width="1"/>
|
||||
|
||||
<!-- 패널 타이틀 -->
|
||||
<text x="893" y="84" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="700" fill="url(#goldSj)">✦ 사주 분석 결과 ✦</text>
|
||||
|
||||
<!-- 사주 팔자 표 (4기둥) -->
|
||||
<!-- 헤더 -->
|
||||
<text x="680" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">시주(時柱)</text>
|
||||
<text x="790" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">일주(日柱)</text>
|
||||
<text x="900" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">월주(月柱)</text>
|
||||
<text x="1010" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">년주(年柱)</text>
|
||||
|
||||
<!-- 기둥 1: 시주 -->
|
||||
<rect x="642" y="144" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
|
||||
<text x="680" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#60a5fa">庚</text>
|
||||
<text x="680" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">경(庚)</text>
|
||||
<rect x="642" y="248" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
|
||||
<text x="680" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#60a5fa">申</text>
|
||||
<text x="680" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">신(申) · 금(金)</text>
|
||||
|
||||
<!-- 기둥 2: 일주 (하이라이트) -->
|
||||
<rect x="752" y="144" width="76" height="90" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="2"/>
|
||||
<text x="790" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#c4b5fd">癸</text>
|
||||
<text x="790" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#a78bfa">계(癸)</text>
|
||||
<rect x="752" y="248" width="76" height="90" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="2"/>
|
||||
<text x="790" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#c4b5fd">酉</text>
|
||||
<text x="790" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#a78bfa">유(酉) · 금(金)</text>
|
||||
<!-- 일주 뱃지 -->
|
||||
<rect x="740" y="130" width="100" height="20" rx="10" fill="#7c3aed"/>
|
||||
<text x="790" y="144" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" font-weight="700" fill="#fff">나의 일주</text>
|
||||
|
||||
<!-- 기둥 3: 월주 -->
|
||||
<rect x="862" y="144" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
|
||||
<text x="900" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#34d399">壬</text>
|
||||
<text x="900" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">임(壬)</text>
|
||||
<rect x="862" y="248" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
|
||||
<text x="900" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#34d399">子</text>
|
||||
<text x="900" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">자(子) · 수(水)</text>
|
||||
|
||||
<!-- 기둥 4: 년주 -->
|
||||
<rect x="972" y="144" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
|
||||
<text x="1010" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#fbbf24">壬</text>
|
||||
<text x="1010" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">임(壬)</text>
|
||||
<rect x="972" y="248" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
|
||||
<text x="1010" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#fbbf24">申</text>
|
||||
<text x="1010" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">신(申) · 금(金)</text>
|
||||
|
||||
<!-- 오행 그래프 -->
|
||||
<line x1="634" y1="356" x2="1152" y2="356" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<text x="893" y="380" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#64748b">오행(五行) 분포</text>
|
||||
|
||||
<g font-family="'Malgun Gothic',sans-serif" font-size="11">
|
||||
<!-- 목(木) -->
|
||||
<text x="654" y="406" fill="#64748b">목(木)</text>
|
||||
<rect x="654" y="412" width="80" height="14" rx="4" fill="#0a2010"/>
|
||||
<rect x="654" y="412" width="8" height="14" rx="4" fill="#22c55e"/>
|
||||
<text x="666" y="424" fill="#22c55e">▪</text>
|
||||
|
||||
<!-- 화(火) -->
|
||||
<text x="754" y="406" fill="#64748b">화(火)</text>
|
||||
<rect x="754" y="412" width="80" height="14" rx="4" fill="#2a0a00"/>
|
||||
<rect x="754" y="412" width="6" height="14" rx="4" fill="#ef4444"/>
|
||||
|
||||
<!-- 토(土) -->
|
||||
<text x="854" y="406" fill="#64748b">토(土)</text>
|
||||
<rect x="854" y="412" width="80" height="14" rx="4" fill="#1c1200"/>
|
||||
<rect x="854" y="412" width="10" height="14" rx="4" fill="#f59e0b"/>
|
||||
|
||||
<!-- 금(金) -->
|
||||
<text x="954" y="406" fill="#64748b">금(金)</text>
|
||||
<rect x="954" y="412" width="80" height="14" rx="4" fill="#1a1800"/>
|
||||
<rect x="954" y="412" width="72" height="14" rx="4" fill="#e2e8f0"/>
|
||||
<text x="1022" y="424" text-anchor="end" fill="#0f172a" font-weight="700">强</text>
|
||||
|
||||
<!-- 수(水) -->
|
||||
<text x="1054" y="406" fill="#64748b">수(水)</text>
|
||||
<rect x="1054" y="412" width="80" height="14" rx="4" fill="#061428"/>
|
||||
<rect x="1054" y="412" width="56" height="14" rx="4" fill="#3b82f6"/>
|
||||
</g>
|
||||
|
||||
<!-- AI 분석 항목 그리드 -->
|
||||
<line x1="634" y1="444" x2="1152" y2="444" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<text x="893" y="466" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#64748b">AI 해석 12항목</text>
|
||||
|
||||
<g font-family="'Malgun Gothic',sans-serif" font-size="12">
|
||||
<rect x="640" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="694" y="496" text-anchor="middle" fill="#c4b5fd">🎭 성격·적성</text>
|
||||
<rect x="756" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="810" y="496" text-anchor="middle" fill="#c4b5fd">💼 직업운</text>
|
||||
<rect x="872" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="926" y="496" text-anchor="middle" fill="#c4b5fd">💰 재물운</text>
|
||||
<rect x="988" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||
<text x="1042" y="496" text-anchor="middle" fill="#c4b5fd">❤️ 애정운</text>
|
||||
<rect x="1104" y="476" width="40" height="30" rx="8" fill="#1e1b4b"/>
|
||||
<text x="1124" y="496" text-anchor="middle" fill="#475569">+8</text>
|
||||
|
||||
<rect x="640" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<text x="694" y="534" text-anchor="middle" fill="#64748b">📅 연간운</text>
|
||||
<rect x="756" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<text x="810" y="534" text-anchor="middle" fill="#64748b">⚕️ 건강운</text>
|
||||
<rect x="872" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<text x="926" y="534" text-anchor="middle" fill="#64748b">✨ 용신</text>
|
||||
<rect x="988" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
|
||||
<text x="1042" y="534" text-anchor="middle" fill="#64748b">🌟 대운</text>
|
||||
<rect x="1104" y="514" width="40" height="30" rx="8" fill="#0e0720"/>
|
||||
<text x="1124" y="534" text-anchor="middle" fill="#1e1b4b">...</text>
|
||||
</g>
|
||||
|
||||
<!-- 결제 후 잠금 해제 표시 -->
|
||||
<rect x="634" y="552" width="518" height="44" rx="12" fill="url(#priceSj)" opacity="0.9"/>
|
||||
<text x="893" y="579" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fff">🔓 4,900원으로 12항목 전체 리포트 잠금 해제</text>
|
||||
|
||||
<!-- 하단 바 -->
|
||||
<rect x="0" y="638" width="1200" height="37" fill="#4c1d95"/>
|
||||
<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="#ddd6fe">전통 사주팔자 + AI 딥러닝 해석 · 12항목 상세 분석 · jaengseung-made.com</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
@@ -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 |
Reference in New Issue
Block a user