gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
441bf00b95ff2f49c93fdfdff9fb23f0f073aaed
jaengseung-made/public/marketing/thumb-prompt.svg
gahusb 3ed2e60dc6 feat: 프롬프트 패키지 3종 추가 + 마케팅 SVG 에셋 전면 재작성 
- 프롬프트 엔지니어링 페이지에 비즈니스 이메일/마케팅 카피/업무 보고서 패키지 3종 추가
- 각 상품 할인가(10,900~12,900원), 7가지 기능 설명, 프롬프트 미리보기 포함
- 마케팅 SVG 에셋 8개 전면 재작성:
  - 이모지 제거 → SVG path 기반 아이콘으로 교체
  - 배경에 유기적 bezier 곡선 블롭 형태 추가
  - 자동화 플로우 직선 연결 → 곡선 bezier path로 교체
  - 로또 공 3D 하이라이트/그림자 강화
  - 주식 차트 polyline → smooth bezier 곡선 개선
  - 말풍선 꼬리 path 추가로 자연스러운 대화 표현

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-25 04:17:24 +09:00

175 lines
13 KiB
XML
Raw Blame History

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
<defs>
<linearGradient id="pr-bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1e1b4b"/>
<stop offset="100%" stop-color="#04102b"/>
</linearGradient>
<radialGradient id="pr-glow1" cx="20%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7c3aed" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
</radialGradient>
<radialGradient id="pr-glow2" cx="80%" cy="40%" r="45%">
<stop offset="0%" stop-color="#2563eb" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
</radialGradient>
<linearGradient id="pr-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#7c3aed"/>
<stop offset="100%" stop-color="#2563eb"/>
</linearGradient>
<linearGradient id="pr-headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#a78bfa"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>
<linearGradient id="pr-afterBg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1e1b4b"/>
<stop offset="100%" stop-color="#312e81"/>
</linearGradient>
<filter id="pr-panelShadow">
<feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- 배경 -->
<rect width="1200" height="675" fill="url(#pr-bg)"/>
<rect width="1200" height="675" fill="url(#pr-glow1)"/>
<rect width="1200" height="675" fill="url(#pr-glow2)"/>
<!-- 유기적 배경 곡선 -->
<path d="M 600 675 C 700 620 900 660 1200 600 L 1200 675 Z" fill="rgba(124,58,237,0.06)"/>
<path d="M 0 0 C 200 60 350 -10 520 40 L 520 0 Z" fill="rgba(124,58,237,0.04)"/>
<path d="M 650 0 C 820 80 1000 20 1200 60 L 1200 0 Z" fill="rgba(37,99,235,0.04)"/>
<!-- ===== 왼쪽 콘텐츠 ===== -->
<!-- 뱃지 -->
<rect x="48" y="68" width="210" height="32" rx="16" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="1"/>
<text x="153" y="89" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#a78bfa">AI 프롬프트 전문 설계</text>
<!-- 헤드라인 -->
<text x="48" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="700" fill="white">AI를 제대로</text>
<text x="48" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="700" fill="url(#pr-headGrad)">써본 적 있으신가요?</text>
<!-- 서브텍스트 -->
<text x="48" y="264" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="#94a3b8">업무 특화 AI 프롬프트 설계로 생산성을 극대화하세요</text>
<!-- 수치 3개 -->
<rect x="48" y="286" width="440" height="76" rx="14" fill="rgba(0,0,0,0.25)" stroke="rgba(124,58,237,0.2)" stroke-width="1"/>
<!-- 수치 1 -->
<text x="116" y="318" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="url(#pr-headGrad)">10x</text>
<text x="116" y="340" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">생산성 향상</text>
<line x1="195" y1="296" x2="195" y2="352" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
<!-- 수치 2 -->
<text x="272" y="318" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#34d399">3일</text>
<text x="272" y="340" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">납품</text>
<line x1="352" y1="296" x2="352" y2="352" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
<!-- 수치 3 -->
<text x="416" y="318" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#fbbf24">10만<tspan font-size="16">원~</tspan></text>
<text x="416" y="340" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">시작 가격</text>
<!-- AI 플랫폼 뱃지 -->
<text x="48" y="398" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b">지원 AI 플랫폼</text>
<!-- ChatGPT -->
<rect x="48" y="410" width="96" height="30" rx="15" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1"/>
<text x="96" y="429" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">ChatGPT</text>
<!-- Claude -->
<rect x="152" y="410" width="76" height="30" rx="15" fill="rgba(239,68,68,0.1)" stroke="#f87171" stroke-width="1"/>
<text x="190" y="429" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#f87171">Claude</text>
<!-- Gemini -->
<rect x="236" y="410" width="76" height="30" rx="15" fill="rgba(37,99,235,0.1)" stroke="#60a5fa" stroke-width="1"/>
<text x="274" y="429" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#60a5fa">Gemini</text>
<!-- 적용 분야 목록 -->
<text x="48" y="474" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b">적용 분야</text>
<text x="48" y="498" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 임원 보고서 자동화</text>
<text x="48" y="520" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 고객 이메일 초안 작성</text>
<text x="48" y="542" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 데이터 분석 리포트 생성</text>
<text x="48" y="564" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 코드 리뷰 및 문서화</text>
<!-- ===== 오른쪽 Before/After 패널 ===== -->
<g filter="url(#pr-panelShadow)">
<!-- 패널 외곽 -->
<rect x="590" y="48" width="582" height="578" rx="16" fill="#111827" stroke="#374151" stroke-width="1.5"/>
<!-- BEFORE 영역 -->
<rect x="590" y="48" width="582" height="290" rx="16" fill="#1f2937"/>
<rect x="590" y="290" width="582" height="20" fill="#1f2937"/>
<!-- BEFORE 레이블 -->
<text x="618" y="82" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" font-weight="700" fill="#ef4444" letter-spacing="1">BEFORE</text>
<text x="666" y="82" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#6b7280">— 일반 프롬프트</text>
<!-- 사용자 말풍선 (오른쪽) -->
<rect x="1002" y="96" width="148" height="64" rx="12" fill="#374151"/>
<!-- 말풍선 꼬리 -->
<path d="M 1150 148 L 1162 154 L 1150 160 Z" fill="#374151"/>
<text x="1076" y="118" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#f9fafb">보고서 써줘</text>
<text x="1076" y="136" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#9ca3af">막연한 요청</text>
<text x="1076" y="150" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#9ca3af">단 4글자</text>
<!-- AI 응답 말풍선 (왼쪽) -->
<rect x="618" y="180" width="360" height="90" rx="12" fill="#111827" stroke="#374151" stroke-width="1"/>
<!-- AI 레이블 -->
<text x="630" y="200" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#6b7280">AI 응답</text>
<rect x="642" y="208" width="180" height="8" rx="4" fill="#374151"/>
<rect x="642" y="222" width="220" height="8" rx="4" fill="#374151"/>
<rect x="642" y="236" width="160" height="8" rx="4" fill="#374151"/>
<rect x="642" y="250" width="200" height="8" rx="4" fill="#374151"/>
<!-- 구분 레이블 -->
<text x="1050" y="196" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#ef4444">빈 템플릿 반환</text>
<text x="1050" y="214" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#6b7280">어색한 문체</text>
<text x="1050" y="230" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#6b7280">활용 불가</text>
<!-- 시각적 구분선 (BEFORE→AFTER) -->
<path d="M 626 338 C 700 332 1000 348 1172 340" stroke="#374151" stroke-width="1" fill="none"/>
<rect x="800" y="328" width="84" height="22" rx="11" fill="#374151"/>
<text x="842" y="343" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" font-weight="600" fill="#9ca3af">VS</text>
<!-- AFTER 영역 -->
<rect x="590" y="360" width="582" height="266" rx="16" fill="url(#pr-afterBg)"/>
<rect x="590" y="360" width="582" height="20" fill="url(#pr-afterBg)"/>
<!-- AFTER 레이블 -->
<text x="618" y="394" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" font-weight="700" fill="#22c55e" letter-spacing="1">AFTER</text>
<text x="666" y="394" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">— 최적화 프롬프트</text>
<!-- 최적화 프롬프트 박스 -->
<rect x="618" y="404" width="300" height="120" rx="10" fill="rgba(124,58,237,0.15)" stroke="#7c3aed" stroke-width="1"/>
<text x="630" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[역할]</text>
<text x="668" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">당신은 10년 경력 기획자입니다</text>
<text x="630" y="440" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[배경]</text>
<text x="668" y="440" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">Q3 매출 현황 임원 보고 목적</text>
<text x="630" y="458" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[형식]</text>
<text x="668" y="458" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">3단 구조: 현황·분석·제언</text>
<text x="630" y="476" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[제약]</text>
<text x="668" y="476" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">500자 이내, 전문 용어 최소화</text>
<text x="630" y="494" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[톤]</text>
<text x="668" y="494" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">간결하고 데이터 중심</text>
<!-- 말풍선 꼬리 -->
<path d="M 618 462 L 606 468 L 618 474 Z" fill="rgba(124,58,237,0.15)"/>
<!-- AI 응답 말풍선 (오른쪽, 구조화된 출력) -->
<rect x="930" y="404" width="228" height="138" rx="12" fill="rgba(37,99,235,0.15)" stroke="#2563eb" stroke-width="1"/>
<!-- 말풍선 꼬리 -->
<path d="M 1154 504 L 1165 510 L 1154 516 Z" fill="rgba(37,99,235,0.15)"/>
<text x="942" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#60a5fa" font-weight="600">AI 구조화 응답</text>
<!-- 구조화된 내용 시뮬레이션 -->
<rect x="942" y="430" width="90" height="7" rx="3" fill="rgba(96,165,250,0.6)"/>
<rect x="942" y="444" width="168" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
<rect x="942" y="456" width="148" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
<rect x="942" y="468" width="158" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
<rect x="942" y="482" width="90" height="7" rx="3" fill="rgba(96,165,250,0.6)"/>
<rect x="942" y="496" width="148" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
<rect x="942" y="508" width="120" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
<text x="942" y="534" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e">즉시 활용 가능</text>
<!-- 성과 뱃지 -->
<rect x="618" y="560" width="530" height="40" rx="10" fill="rgba(34,197,94,0.08)" stroke="rgba(34,197,94,0.2)" stroke-width="1"/>
<text x="883" y="585" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#22c55e">업무 시간 90% 단축 · 품질 일관성 100% 확보</text>
</g>
<!-- 하단 바 -->
<rect x="0" y="638" width="1200" height="37" fill="url(#pr-bottomBar)"/>
<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="white">jaengseung-made.vercel.app — AI 프롬프트 전문 설계</text>
</svg>
Reference in New Issue View Git Blame Copy Permalink