- 어드민 마케팅 페이지: 4대 전문가 체크리스트(디자인/PM/품질/마케팅) 추가, localStorage 저장, 크몽 등록 가이드 패널, 품질 점수 바 - SVG 썸네일 6개 전면 재설계: 헤드라인 강화, 목업 세밀화, 실제 제품가 반영 - 신규 썸네일 2개 제작: thumb-lotto.svg (로또 번호 추천), thumb-saju.svg (AI 사주 분석) - 사이드바 상호명 추가 (토스페이먼츠 심사 준비) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
183 lines
11 KiB
XML
183 lines
11 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400">
|
|
<defs>
|
|
<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="textBn" 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="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="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="brClipBn">
|
|
<rect x="660" y="28" width="508" height="320" rx="14"/>
|
|
</clipPath>
|
|
<filter id="shadowBn">
|
|
<feDropShadow dx="0" dy="10" stdDeviation="18" flood-color="#000" flood-opacity="0.55"/>
|
|
</filter>
|
|
<filter id="badgeShadBn">
|
|
<feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="#2563eb" flood-opacity="0.4"/>
|
|
</filter>
|
|
<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(#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="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="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="52" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="17" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱 · 납기 보장</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>
|
|
|
|
<!-- 체크리스트 -->
|
|
<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="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="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="52" y="390" font-family="Arial,sans-serif" font-size="13" fill="#3b5998">jaengseung-made.com</text>
|
|
|
|
<!-- 오른쪽 브라우저 목업 -->
|
|
<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="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(#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="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="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>
|