gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 견적서 자동화, 마케팅 에셋, 전체 카피 강화

Browse Source 
- 관리자 견적서 CRUD (WBS/항목/향후관리/특이사항 5탭 편집기)
- 고객용 공개 견적서 페이지 (optional 항목 선택 + 실시간 총액 + 수락)
- 마케팅 SVG 에셋 6종 (썸네일 5개 + 배너 1개) + 관리자 에셋 페이지
- 전체 카피 강화: 크레덴셜 제거 → URL증거/환불보장/계약서/납기패널티 중심

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-03-21 10:48:28 +09:00
parent d29cdbcd82
commit 3f53594d3f
20 changed files with 2399 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
public/marketing/banner-homepage.svg Normal file
View File

@@ -0,0 +1,125 @@
<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>
<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>
<radialGradient id="glowBlue" cx="75%" cy="35%" r="40%">
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.25"/>
<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"/>
<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>
<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>
<filter id="badgeShadow">
<feDropShadow dx="0" dy="2" stdDeviation="4" 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>
</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 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>
<!-- 메인 헤드라인 -->
<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="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="17" fill="#94a3b8">코드 품질 · 성능 최적화 · SEO 설정까지 원스톱</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>
<!-- 체크리스트 -->
<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>
<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="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>
<!-- URL -->
<text x="60" y="380" font-family="Arial,sans-serif" font-size="13" fill="#475569">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"/>
<!-- 탭바 -->
<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>
<!-- 내부 콘텐츠 -->
<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"/>
<!-- 히어로 -->
<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"/>
</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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

158
public/marketing/thumb-automation.svg Normal file
View File

@@ -0,0 +1,158 @@
<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>
<linearGradient id="headGrad" 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>
<radialGradient id="glow" cx="60%" cy="50%" r="50%">
<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>
<filter id="arrowGlow">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</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)"/>
<!-- 배경 도트 패턴 -->
<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>
<!-- 헤드라인 -->
<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>
<!-- 시간 절약 수치 뱃지 -->
<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"/>
<!-- 수치 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>
<!-- 서비스 유형 리스트 -->
<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>
<!-- 가격 뱃지 -->
<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>
<!-- URL -->
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">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>
<!-- 노드 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>
<!-- 화살표 -->
<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"/>
<!-- 노드 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>
<!-- 화살표 -->
<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"/>
<!-- 노드 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>
<!-- 화살표 -->
<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"/>
<!-- 알림 노드 -->
<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>
<!-- 우측 정보 패널 -->
<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>
<!-- 기술 스택 -->
<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>
<!-- 전문가 뱃지 -->
<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>
<!-- 하단 바 -->
<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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

186
public/marketing/thumb-homepage-A.svg Normal file
View File

@@ -0,0 +1,186 @@
<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>
<linearGradient id="headGrad" 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%">
<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"/>
<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"/>
<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>
<filter id="glowFilter">
<feGaussianBlur stdDeviation="3" 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>
</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 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>
<!-- 메인 헤드라인 -->
<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="346" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱</text>
<!-- 가격 뱃지 -->
<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>
<!-- URL -->
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">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"/>
<!-- 탭바 -->
<rect x="620" y="60" width="550" height="44" rx="16" fill="#0f172a"/>
<rect x="620" y="92" width="550" height="12" fill="#0f172a"/>
<!-- 창 버튼 -->
<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"/>
<!-- 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>
<!-- 브라우저 내부 -->
<g clip-path="url(#browserClip)">
<rect x="620" y="104" width="550" height="486" 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="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="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>
<!-- 카드 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"/>
<!-- 카드 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"/>
<!-- 카드 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="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>
</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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

88
public/marketing/thumb-homepage-B.svg Normal file
View File

@@ -0,0 +1,88 @@
<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>
<linearGradient id="card2Grad" 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"/>
</filter>
<filter id="card2Shadow">
<feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#7c3aed" flood-opacity="0.25"/>
</filter>
</defs>
<!-- 상단 어두운 배경 -->
<rect width="1200" height="280" fill="url(#topBg)"/>
<!-- 하단 밝은 배경 -->
<rect y="280" width="1200" height="395" fill="#f8fafc"/>
<!-- 상단 로고/브랜드 -->
<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>
<!-- 상단 헤드라인 -->
<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>
<!-- 구분선 -->
<line x1="400" y1="218" x2="800" y2="218" stroke="#334155" 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개 -->
<!-- 카드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>
<!-- 카드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"/>
<!-- 추천 뱃지 -->
<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>
<!-- 카드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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

124
public/marketing/thumb-prompt.svg Normal file
View File

@@ -0,0 +1,124 @@
<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%">
<stop offset="0%" style="stop-color:#1e1b4b"/>
<stop offset="100%" style="stop-color:#0f172a"/>
</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%">
<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>
<linearGradient id="goodGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1e1b4b"/>
<stop offset="100%" style="stop-color:#312e81"/>
</linearGradient>
<radialGradient id="glow" cx="50%" cy="40%" r="55%">
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
<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>
<filter id="badShadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- 배경 -->
<rect width="1200" height="675" fill="url(#bg2)"/>
<rect width="1200" height="675" fill="url(#glow)"/>
<!-- 배경 코드 패턴 -->
<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>
<!-- 상단 뱃지 -->
<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>
<!-- 헤드라인 -->
<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>
<!-- 수치 뱃지들 -->
<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>
<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="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>
<!-- 호환 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>
<!-- URL -->
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
<!-- 오른쪽 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)"/>
<!-- 사용자 메시지 -->
<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>
<!-- 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>
<!-- 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)"/>
<!-- 최적화된 프롬프트 -->
<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>
<!-- 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="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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

151
public/marketing/thumb-stock.svg Normal file
View File

@@ -0,0 +1,151 @@
<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="60%" style="stop-color:#052e16"/>
<stop offset="100%" style="stop-color:#0f172a"/>
</linearGradient>
<linearGradient id="headGrad" 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"/>
<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"/>
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
</linearGradient>
<radialGradient id="glowGreen" cx="70%" cy="50%" r="50%">
<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>
<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>
</defs>
<!-- 배경 -->
<rect width="1200" height="675" fill="url(#bg)"/>
<rect width="1200" height="675" fill="url(#glowGreen)"/>
<!-- 배경 차트 라인 (은은하게) -->
<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"/>
<!-- 왼쪽 콘텐츠 -->
<!-- 뱃지 -->
<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>
<!-- 헤드라인 -->
<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="268" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" fill="#94a3b8">백테스팅 · 실시간 매매 · 손절/익절 자동화</text>
<!-- 기능 뱃지들 -->
<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>
<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>
<!-- 행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="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>
<!-- 가격 -->
<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="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>
<!-- URL -->
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">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"/>
<!-- 노치 -->
<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="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>
<!-- 채팅 메시지들 -->
<!-- 메시지 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>
<!-- 메시지 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>
<!-- 메시지 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="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)"/>
</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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB