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

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