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

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

Browse Source 
- 어드민 마케팅 페이지: 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:
gahusb
2026-03-22 18:13:44 +09:00
parent de941442ae
commit a7d9af0d35
10 changed files with 1567 additions and 668 deletions
Download Patch File Download Diff File Expand all files Collapse all files

420
app/admin/marketing/page.tsx
View File

@@ -1,16 +1,17 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import { useState, useEffect, useCallback } from 'react';
const ASSETS = [
{
file: '/marketing/thumb-homepage-A.svg',
name: '홈페이지 제작 썸네일 A',
desc: '신뢰형 — 브라우저 목업 포함 다크 테마',
desc: '신뢰형 — 브라우저 목업 + 경력 강조',
size: '1200 × 675',
platform: '크몽 메인',
color: '#2563eb',
service: '홈페이지 제작',
price: '스타터 50만원~',
},
{
file: '/marketing/thumb-homepage-B.svg',
@@ -19,6 +20,8 @@ const ASSETS = [
size: '1200 × 675',
platform: '크몽 서브',
color: '#7c3aed',
service: '홈페이지 제작',
price: '스타터 50만원~',
},
{
file: '/marketing/thumb-automation.svg',
@@ -27,14 +30,18 @@ const ASSETS = [
size: '1200 × 675',
platform: '크몽 메인',
color: '#10b981',
service: '업무 자동화',
price: '33만원~',
},
{
file: '/marketing/thumb-prompt.svg',
name: '프롬프트 엔지니어링 썸네일',
desc: 'Before/After 말풍선 비교형',
desc: 'Before/After 비교형 — AI 최적화 결과 시각화',
size: '1200 × 675',
platform: '크몽 메인',
color: '#7c3aed',
service: '프롬프트 엔지니어링',
price: '10만원~',
},
{
file: '/marketing/thumb-stock.svg',
@@ -43,6 +50,28 @@ const ASSETS = [
size: '1200 × 675',
platform: '크몽 메인',
color: '#22c55e',
service: '주식 자동매매',
price: '9만9천원~',
},
{
file: '/marketing/thumb-lotto.svg',
name: '로또 번호 추천 썸네일',
desc: '빅데이터 분석형 — 번호 통계 시각화',
size: '1200 × 675',
platform: '크몽 메인',
color: '#f59e0b',
service: '로또 번호 추천',
price: '900원~/월',
},
{
file: '/marketing/thumb-saju.svg',
name: 'AI 사주 분석 썸네일',
desc: '사주팔자 + AI 해석 — 전통+현대 비주얼',
size: '1200 × 675',
platform: '크몽 메인',
color: '#8b5cf6',
service: 'AI 사주 분석',
price: '4,900원',
},
{
file: '/marketing/banner-homepage.svg',
@@ -51,12 +80,80 @@ const ASSETS = [
size: '1200 × 400',
platform: '블로그/SNS',
color: '#2563eb',
service: '홈페이지 제작',
price: '스타터 50만원~',
},
];
const CHECKLIST_ITEMS = {
design: [
'시각적 위계가 명확하다 (헤드라인 → 서브 → 기능 → 가격)',
'색상 대비가 가독성 기준을 충족한다 (어두운 배경/밝은 텍스트)',
'브랜드 색상이 사이트와 일관되게 사용되었다',
'정보가 과밀하지 않고 여백이 충분하다',
'폰트 크기가 썸네일 목록에서도 가독성이 있다 (헤드 52px+)',
'오른쪽 비주얼(목업)이 서비스 내용과 직결된다',
],
pm: [
'서비스명이 한눈에 들어온다 (1초 이내 파악)',
'핵심 가치 제안이 1~2줄 이내로 명확히 전달된다',
'가격 또는 플랜이 뱃지 형태로 명확히 표시된다',
'URL 또는 브랜드명이 하단에 포함된다',
'대상 고객의 니즈가 암묵적으로 전달된다',
'파일 사이즈가 플랫폼 요구사항(1200×675)을 충족한다',
],
quality: [
'텍스트에 오탈자·맞춤법 오류가 없다',
'가격 정보가 실제 서비스 가격과 일치한다',
'깨진 이미지나 렌더링 오류가 없다',
'동일 색상/레이아웃을 다른 썸네일과 중복 사용하지 않는다',
'법적 문제(허위광고, 저작권) 소지가 없다',
'PNG 변환 후에도 품질이 유지된다 (벡터 기반)',
],
marketing: [
'타겟 고객의 핵심 페인포인트를 헤드라인에서 직접 해소한다',
'"7년차 대기업 개발자" 등 차별화 신뢰 요소가 포함된다',
'경쟁사 대비 명확한 차별점이 드러난다',
'첫 3초 안에 무슨 서비스인지 파악 가능하다',
'클릭 충동을 자극하는 강력한 헤드라인이다',
'크몽 검색 목록에서 눈에 띄는 디자인이다',
],
};
type CheckKey = string;
export default function MarketingPage() {
const [preview, setPreview] = useState<(typeof ASSETS)[0] | null>(null);
const [preview, setPreview] = useState<typeof ASSETS[0] | null>(null);
const [copied, setCopied] = useState<string | null>(null);
const [checks, setChecks] = useState<Record<CheckKey, boolean>>({});
const [showGuide, setShowGuide] = useState(false);
const [activeTab, setActiveTab] = useState<'design' | 'pm' | 'quality' | 'marketing'>('design');
useEffect(() => {
const saved = localStorage.getItem('marketing_checks');
if (saved) setChecks(JSON.parse(saved));
}, []);
const toggleCheck = useCallback((key: string) => {
setChecks(prev => {
const next = { ...prev, [key]: !prev[key] };
localStorage.setItem('marketing_checks', JSON.stringify(next));
return next;
});
}, []);
const getCheckScore = (assetFile: string, category: keyof typeof CHECKLIST_ITEMS) => {
const items = CHECKLIST_ITEMS[category];
const done = items.filter((_, i) => checks[`${assetFile}_${category}_${i}`]).length;
return { done, total: items.length };
};
const getTotalScore = (assetFile: string) => {
const all = Object.keys(CHECKLIST_ITEMS).flatMap(cat =>
CHECKLIST_ITEMS[cat as keyof typeof CHECKLIST_ITEMS].map((_, i) => checks[`${assetFile}_${cat}_${i}`])
);
return { done: all.filter(Boolean).length, total: all.length };
};
function copyPath(file: string) {
const url = `${window.location.origin}${file}`;
@@ -72,35 +169,117 @@ export default function MarketingPage() {
a.click();
}
const TABS = [
{ key: 'design', label: '디자인', icon: '🎨', color: 'blue' },
{ key: 'pm', label: 'PM', icon: '📋', color: 'violet' },
{ key: 'quality', label: '품질', icon: '✅', color: 'emerald' },
{ key: 'marketing', label: '마케팅', icon: '📣', color: 'amber' },
] as const;
const tabColors: Record<string, string> = {
blue: 'bg-blue-500/20 text-blue-300 border-blue-500/50',
violet: 'bg-violet-500/20 text-violet-300 border-violet-500/50',
emerald: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/50',
amber: 'bg-amber-500/20 text-amber-300 border-amber-500/50',
};
return (
<div className="p-8">
<div className="flex items-center justify-between mb-8">
<div className="p-8 max-w-[1400px]">
{/* 헤더 */}
<div className="mb-8">
<div className="flex items-start justify-between">
<div>
<h1 className="text-2xl font-bold text-white">마케팅 에셋</h1>
<p className="text-slate-400 text-sm mt-1">크몽/숨고 등록용 썸네일 및 배너 — SVG 파일 다운로드 가능</p>
<h1 className="text-2xl font-bold text-white mb-1">마케팅 에셋</h1>
<p className="text-slate-400 text-sm">크몽·숨고 등록용 썸네일 및 배너 — 4대 전문가 품질 체크리스트 포함</p>
</div>
<Link href="/admin/dashboard" className="text-slate-400 hover:text-white text-sm transition-colors">
← 대시보드
</Link>
<button
onClick={() => setShowGuide(v => !v)}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm transition-all"
>
<span>📖</span>
{showGuide ? '가이드 닫기' : '등록 가이드 보기'}
</button>
</div>
{/* 안내 */}
<div className="bg-blue-900/20 border border-blue-500/30 rounded-xl p-4 mb-8 flex items-start gap-3">
<span className="text-blue-400 text-xl mt-0.5">ℹ️</span>
<div>
<p className="text-blue-300 font-semibold text-sm mb-1">SVG → PNG 변환 방법</p>
<p className="text-slate-400 text-sm">브라우저에서 파일 열기 → 우클릭 → "이미지 다른 이름으로 저장" (PNG), 또는 <strong className="text-slate-300">Figma에 SVG 드래그 후 PNG Export</strong>를 추천합니다. 크몽은 JPG/PNG만 허용합니다.</p>
{/* 통계 */}
<div className="grid grid-cols-4 gap-4 mt-6">
{[
{ label: '전체 에셋', value: ASSETS.length, unit: '개', color: 'text-white' },
{ label: '썸네일', value: ASSETS.filter(a => a.size.includes('675')).length, unit: '개', color: 'text-blue-400' },
{ label: '배너', value: ASSETS.filter(a => a.size.includes('400')).length, unit: '개', color: 'text-violet-400' },
{ label: '크몽 등록 가능', value: ASSETS.length, unit: '개', color: 'text-emerald-400' },
].map(stat => (
<div key={stat.label} className="bg-slate-900 rounded-xl border border-slate-800 px-4 py-3">
<p className="text-slate-500 text-xs mb-1">{stat.label}</p>
<p className={`text-2xl font-bold ${stat.color}`}>{stat.value}<span className="text-sm font-normal text-slate-500 ml-1">{stat.unit}</span></p>
</div>
))}
</div>
</div>
{/* 그리드 */}
{/* 크몽 등록 가이드 */}
{showGuide && (
<div className="mb-8 bg-slate-900 rounded-2xl border border-slate-700 overflow-hidden">
<div className="px-6 py-4 border-b border-slate-800 flex items-center gap-2">
<span className="text-yellow-400">⚡</span>
<h2 className="text-white font-bold text-sm">크몽 썸네일 등록 완전 가이드</h2>
</div>
<div className="p-6 grid grid-cols-3 gap-6">
<div>
<h3 className="text-blue-400 font-semibold text-sm mb-3 flex items-center gap-2"><span>1️⃣</span> SVG → PNG 변환</h3>
<ol className="space-y-2 text-slate-400 text-sm">
<li className="flex gap-2"><span className="text-slate-600 shrink-0">①</span>SVG 파일 다운로드</li>
<li className="flex gap-2"><span className="text-slate-600 shrink-0">②</span>브라우저에서 SVG 파일 열기</li>
<li className="flex gap-2"><span className="text-slate-600 shrink-0">③</span>우클릭 → 이미지로 저장 (PNG)</li>
<li className="flex gap-2"><span className="text-slate-600 shrink-0">또는</span><span className="text-slate-300">Figma에 드래그 후 Export</span></li>
</ol>
<div className="mt-3 px-3 py-2 bg-amber-900/20 border border-amber-500/30 rounded-lg text-amber-300 text-xs">
크몽은 JPG/PNG만 허용합니다. SVG 직접 업로드 불가.
</div>
</div>
<div>
<h3 className="text-violet-400 font-semibold text-sm mb-3 flex items-center gap-2"><span>2️⃣</span> 크몽 서비스 등록 체크</h3>
<ul className="space-y-2 text-slate-400 text-sm">
{['썸네일: 1200×675px (권장)', '파일 크기: 10MB 이하', '형식: JPG, PNG', '서비스 카테고리 정확히 선택', '가격 설정: 기본/스탠다드/프리미엄', '패키지 설명 500자 이상'].map(item => (
<li key={item} className="flex gap-2"><span className="text-emerald-400">✓</span>{item}</li>
))}
</ul>
</div>
<div>
<h3 className="text-emerald-400 font-semibold text-sm mb-3 flex items-center gap-2"><span>3️⃣</span> 전문가 검토 순서</h3>
<div className="space-y-2">
{TABS.map(tab => (
<div key={tab.key} className="flex items-center gap-3 text-sm">
<span>{tab.icon}</span>
<div>
<span className="text-white font-medium">{tab.label} 전문가</span>
<p className="text-slate-500 text-xs">
{tab.key === 'design' && '시각 위계·색상·가독성 검토'}
{tab.key === 'pm' && '정보 완전성·CTA·플랫폼 요건'}
{tab.key === 'quality' && '오탈자·가격 정확성·파일 품질'}
{tab.key === 'marketing' && '전환율·차별화·클릭 유도'}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
{/* 에셋 그리드 */}
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
{ASSETS.map((asset) => (
<div key={asset.file} className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-slate-600 transition-all group">
{ASSETS.map((asset) => {
const score = getTotalScore(asset.file);
const pct = score.total > 0 ? Math.round((score.done / score.total) * 100) : 0;
const isReady = pct >= 80;
return (
<div key={asset.file} className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-slate-600 transition-all group flex flex-col">
{/* 미리보기 */}
<button
onClick={() => setPreview(asset)}
className="w-full block relative overflow-hidden bg-slate-950"
className="w-full block relative overflow-hidden bg-slate-950 flex-shrink-0"
style={{ aspectRatio: asset.size.includes('400') ? '3/1' : '16/9' }}
>
<img
@@ -108,72 +287,227 @@ export default function MarketingPage() {
alt={asset.name}
className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
/>
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center">
<span className="opacity-0 group-hover:opacity-100 text-white font-semibold text-sm bg-black/60 px-4 py-2 rounded-full transition-all">
크게 보기
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center">
<span className="opacity-0 group-hover:opacity-100 text-white font-semibold text-sm bg-black/70 px-4 py-2 rounded-full transition-all flex items-center gap-2">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
체크리스트 열기
</span>
</div>
{/* 품질 뱃지 */}
<div className={`absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-bold ${isReady ? 'bg-emerald-500/90 text-white' : pct > 0 ? 'bg-amber-500/90 text-white' : 'bg-slate-700/90 text-slate-300'}`}>
{isReady ? '✓ 등록 준비됨' : pct > 0 ? `${pct}% 완료` : '미검토'}
</div>
</button>
{/* 정보 */}
<div className="p-4">
{/* 카드 정보 */}
<div className="p-4 flex-1 flex flex-col">
<div className="flex items-start justify-between gap-2 mb-2">
<div>
<h3 className="text-white font-semibold text-sm">{asset.name}</h3>
<div className="flex-1 min-w-0">
<h3 className="text-white font-semibold text-sm truncate">{asset.name}</h3>
<p className="text-slate-500 text-xs mt-0.5">{asset.desc}</p>
</div>
<span className="text-xs font-semibold px-2 py-1 rounded-full shrink-0" style={{ background: asset.color + '20', color: asset.color }}>
<span className="text-xs font-semibold px-2 py-1 rounded-full shrink-0 whitespace-nowrap" style={{ background: asset.color + '20', color: asset.color }}>
{asset.platform}
</span>
</div>
<p className="text-slate-600 text-xs mb-3">{asset.size}px</p>
<div className="flex gap-2">
<div className="flex items-center gap-3 mb-3">
<span className="text-slate-600 text-xs">{asset.size}px</span>
<span className="text-slate-700">·</span>
<span className="text-slate-500 text-xs font-medium">{asset.price}</span>
</div>
{/* 체크리스트 진행 바 */}
<div className="mb-3">
<div className="flex items-center justify-between mb-1">
<span className="text-slate-600 text-xs">품질 체크</span>
<span className="text-slate-500 text-xs">{score.done}/{score.total}</span>
</div>
<div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div
className="h-full rounded-full transition-all duration-500"
style={{ width: `${pct}%`, background: isReady ? '#10b981' : pct > 0 ? '#f59e0b' : '#334155' }}
/>
</div>
</div>
{/* 4대 전문가 점수 */}
<div className="grid grid-cols-4 gap-1 mb-3">
{TABS.map(tab => {
const s = getCheckScore(asset.file, tab.key);
const ok = s.done === s.total && s.total > 0;
return (
<div key={tab.key} className={`text-center py-1 rounded-md text-xs ${ok ? 'bg-emerald-900/30 text-emerald-400' : 'bg-slate-800 text-slate-500'}`}>
<div>{tab.icon}</div>
<div className="mt-0.5">{s.done}/{s.total}</div>
</div>
);
})}
</div>
{/* 액션 버튼 */}
<div className="flex gap-2 mt-auto">
<button
onClick={() => download(asset.file, asset.name)}
className="flex-1 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-white transition-all"
className="flex-1 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-white transition-all flex items-center justify-center gap-1.5"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
SVG 다운로드
</button>
<button
onClick={() => copyPath(asset.file)}
className={`px-3 py-2 rounded-lg text-xs font-semibold transition-all ${copied === asset.file ? 'bg-green-900/40 text-green-400 border border-green-500/30' : 'bg-slate-800 hover:bg-slate-700 text-slate-400'}`}
className={`px-3 py-2 rounded-lg text-xs font-semibold transition-all ${copied === asset.file ? 'bg-emerald-900/40 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 hover:bg-slate-700 text-slate-400'}`}
>
{copied === asset.file ? '✓ 복사됨' : 'URL 복사'}
{copied === asset.file ? '✓' : 'URL'}
</button>
</div>
</div>
</div>
))}
);
})}
</div>
{/* 크게 보기 모달 */}
{/* 모달 — 크게 보기 + 체크리스트 */}
{preview && (
<div
className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-6"
className="fixed inset-0 z-50 bg-black/95 flex items-start justify-center overflow-y-auto p-6"
onClick={() => setPreview(null)}
>
<div className="max-w-6xl w-full" onClick={(e) => e.stopPropagation()}>
<div className="max-w-7xl w-full my-4" onClick={(e) => e.stopPropagation()}>
{/* 모달 헤더 */}
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-white font-bold text-lg">{preview.name}</h2>
<p className="text-slate-400 text-sm">{preview.size}px · {preview.desc}</p>
<h2 className="text-white font-bold text-xl">{preview.name}</h2>
<p className="text-slate-400 text-sm mt-0.5">{preview.size}px · {preview.desc}</p>
</div>
<div className="flex gap-3">
<button
onClick={() => download(preview.file, preview.name)}
className="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white transition-all"
className="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white transition-all flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
SVG 다운로드
</button>
<button onClick={() => setPreview(null)} className="text-slate-400 hover:text-white text-2xl leading-none px-2">×</button>
<button onClick={() => setPreview(null)} className="text-slate-400 hover:text-white w-10 h-10 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center transition-all text-xl">
×
</button>
</div>
</div>
<div className="grid grid-cols-1 xl:grid-cols-[1fr_400px] gap-6">
{/* 미리보기 */}
<div>
<img
src={preview.file}
alt={preview.name}
className="w-full rounded-xl border border-slate-700"
/>
<div className="mt-4 grid grid-cols-4 gap-3">
{TABS.map(tab => {
const s = getCheckScore(preview.file, tab.key);
const pct2 = Math.round((s.done / s.total) * 100);
return (
<div key={tab.key} className="bg-slate-900 rounded-xl p-3 text-center">
<div className="text-xl mb-1">{tab.icon}</div>
<div className="text-white font-bold text-sm">{tab.label}</div>
<div className="text-slate-400 text-xs mt-0.5">{s.done}/{s.total} 항목</div>
<div className="mt-2 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div className="h-full rounded-full bg-blue-500 transition-all" style={{ width: `${pct2}%` }} />
</div>
</div>
);
})}
</div>
</div>
{/* 체크리스트 패널 */}
<div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden flex flex-col">
<div className="flex border-b border-slate-800">
{TABS.map(tab => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`flex-1 py-3 text-xs font-semibold transition-all ${
activeTab === tab.key
? 'text-white border-b-2 border-blue-500 bg-slate-800/50'
: 'text-slate-500 hover:text-slate-300'
}`}
>
{tab.icon} {tab.label}
</button>
))}
</div>
<div className="p-4 flex-1 overflow-y-auto">
<div className="mb-3">
<span className={`inline-flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded-full border ${tabColors[TABS.find(t => t.key === activeTab)?.color ?? 'blue']}`}>
{TABS.find(t => t.key === activeTab)?.icon}
{TABS.find(t => t.key === activeTab)?.label} 전문가 관점
</span>
</div>
<ul className="space-y-2.5">
{CHECKLIST_ITEMS[activeTab].map((item, i) => {
const key = `${preview.file}_${activeTab}_${i}`;
const checked = !!checks[key];
return (
<li key={i}>
<label className="flex items-start gap-3 cursor-pointer group/item">
<div className={`w-5 h-5 rounded-md border-2 flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
checked ? 'bg-emerald-500 border-emerald-500' : 'border-slate-700 group-hover/item:border-slate-500'
}`}
onClick={() => toggleCheck(key)}
>
{checked && (
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7"/>
</svg>
)}
</div>
<span
className={`text-sm leading-relaxed transition-all ${checked ? 'text-slate-500 line-through' : 'text-slate-300'}`}
onClick={() => toggleCheck(key)}
>
{item}
</span>
</label>
</li>
);
})}
</ul>
</div>
{/* 전체 점수 */}
<div className="p-4 border-t border-slate-800">
{(() => {
const s = getTotalScore(preview.file);
const pct3 = Math.round((s.done / s.total) * 100);
return (
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-slate-400 text-sm">전체 품질 점수</span>
<span className={`font-bold text-sm ${pct3 >= 80 ? 'text-emerald-400' : pct3 >= 50 ? 'text-amber-400' : 'text-slate-400'}`}>
{pct3}% ({s.done}/{s.total})
</span>
</div>
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
<div
className="h-full rounded-full transition-all duration-500"
style={{ width: `${pct3}%`, background: pct3 >= 80 ? '#10b981' : pct3 >= 50 ? '#f59e0b' : '#64748b' }}
/>
</div>
{pct3 >= 80 && (
<div className="mt-2 text-center text-emerald-400 text-xs font-semibold">🎉 크몽 등록 준비 완료!</div>
)}
{pct3 < 80 && pct3 > 0 && (
<div className="mt-2 text-center text-amber-400 text-xs">추가 검토 후 등록을 권장합니다</div>
)}
</div>
);
})()}
</div>
</div>
</div>
</div>
</div>
)}

11
app/components/Sidebar.tsx
View File

@@ -192,6 +192,17 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
})}
</nav>
{/* 상호명 / 사업자 정보 — 토스페이먼츠 심사 필수 표기 */}
<div className="px-4 pt-3 pb-1 border-t border-[#1a3a7a]/30 flex-shrink-0">
<p className="text-slate-600 text-[10px] leading-relaxed">
<span className="block font-semibold text-slate-500 mb-0.5">상호명 : 쟁승메이드</span>
<span className="block">대표 : 박재오</span>
<span className="block">이메일 : bgg8988@gmail.com</span>
<span className="block">문의 : 010-3907-1392</span>
<span className="block mt-1 text-slate-700">© 2025 쟁승메이드</span>
</p>
</div>
{/* Bottom: 로그인 상태 */}
<div className="p-4 border-t border-[#1a3a7a]/50 flex-shrink-0">
{userEmail ? (

235
public/marketing/banner-homepage.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 11 KiB

259
public/marketing/thumb-automation.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 12 KiB

290
public/marketing/thumb-homepage-A.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 13 KiB

152
public/marketing/thumb-homepage-B.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

206
public/marketing/thumb-lotto.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

168
public/marketing/thumb-prompt.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

227
public/marketing/thumb-saju.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

193
public/marketing/thumb-stock.svg
View File

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

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB