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

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