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

feat: 프로젝트 API Bearer 토큰 인증 + E2E 테스트 스크립트 + 크몽 마케팅 이미지

Browse Source 
- app/api/projects, link/route: Cookie + Bearer 토큰 이중 인증 지원 (E2E 테스트 대응)
- app/mypage: 로또 기록 탭 제거, 구독 빈 상태 프롬프트 서비스로 변경
- scripts/test-flow.mjs: 견적서 발송→연결→마일스톤 진행 E2E 테스트 스크립트
- supabase/migrations/003: quotes RLS 비활성화 (관리자 서버 전용 접근)
- marketing/kmong-images: 크몽 서비스 A 상세 이미지 5장 (HTML 스크린샷용)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-04-02 04:15:47 +09:00
parent 19b09e3b90
commit 2c9af41631
10 changed files with 1589 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
marketing/kmong-images/01-services-overview.html Normal file
View File

@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 652px; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; background: #0f172a; }
.hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 48px 40px 36px;
text-align: center;
border-bottom: 1px solid #1e3a5f;
}
.badge {
display: inline-block;
background: #1e3a5f;
color: #60a5fa;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.hero h1 {
font-size: 26px;
font-weight: 800;
color: #ffffff;
line-height: 1.4;
margin-bottom: 10px;
}
.hero h1 span { color: #60a5fa; }
.hero p {
font-size: 13px;
color: #94a3b8;
line-height: 1.6;
}
.section { padding: 36px 40px; }
.section-title {
font-size: 11px;
font-weight: 700;
color: #60a5fa;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 20px;
}
.service-card {
background: #1e293b;
border: 1px solid #2d3f55;
border-radius: 14px;
padding: 24px;
margin-bottom: 14px;
}
.service-card:last-child { margin-bottom: 0; }
.card-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-right: 14px;
flex-shrink: 0;
}
.icon-blue { background: #1e3a5f; }
.icon-violet { background: #2d1b69; }
.icon-teal { background: #0f3460; }
.card-title {
font-size: 15px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 2px;
}
.card-sub {
font-size: 11px;
color: #64748b;
}
.card-desc {
font-size: 12.5px;
color: #94a3b8;
line-height: 1.7;
margin-bottom: 14px;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
background: #0f172a;
border: 1px solid #334155;
color: #94a3b8;
font-size: 11px;
padding: 3px 10px;
border-radius: 6px;
}
.footer {
background: #1e293b;
padding: 20px 40px;
text-align: center;
}
.footer-row {
display: flex;
justify-content: center;
gap: 32px;
}
.footer-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.footer-value {
font-size: 15px;
font-weight: 700;
color: #60a5fa;
}
.footer-label {
font-size: 10px;
color: #64748b;
}
</style>
</head>
<body>
<div class="hero">
<div class="badge">쟁승메이드 · 7년 경력 백엔드 개발자</div>
<h1>아이디어를 <span>실제 서비스</span>로<br>직접 만들어 드립니다</h1>
<p>웹·앱 개발부터 업무 자동화, AI 프롬프트까지<br>기획-개발-배포 원스톱으로 진행합니다</p>
</div>
<div class="section">
<div class="section-title">제공 서비스</div>
<div class="service-card">
<div class="card-header">
<div class="card-icon icon-blue">🌐</div>
<div>
<div class="card-title">웹 서비스 / MVP 개발</div>
<div class="card-sub">홈페이지 · 서비스 플랫폼 · 관리자 대시보드</div>
</div>
</div>
<div class="card-desc">
아이디어를 실제로 작동하는 서비스로 만들어 드립니다.<br>
기획부터 디자인, 개발, 배포까지 혼자 맡겨도 됩니다.
</div>
<div class="tag-list">
<span class="tag">Next.js</span>
<span class="tag">React</span>
<span class="tag">FastAPI</span>
<span class="tag">PostgreSQL</span>
<span class="tag">Supabase</span>
<span class="tag">Vercel 배포</span>
</div>
</div>
<div class="service-card">
<div class="card-header">
<div class="card-icon icon-teal">⚙️</div>
<div>
<div class="card-title">업무 자동화 개발</div>
<div class="card-sub">반복 업무 제거 · 엑셀·이메일·크롤링 자동화</div>
</div>
</div>
<div class="card-desc">
매일 반복하는 업무를 자동화해 시간을 되돌려 드립니다.<br>
주문 수집, 알림 발송, 데이터 정리 등 모두 가능합니다.
</div>
<div class="tag-list">
<span class="tag">Python</span>
<span class="tag">Selenium</span>
<span class="tag">Playwright</span>
<span class="tag">API 연동</span>
<span class="tag">카카오 알림톡</span>
</div>
</div>
<div class="service-card">
<div class="card-header">
<div class="card-icon icon-violet">🤖</div>
<div>
<div class="card-title">AI 프롬프트 엔지니어링</div>
<div class="card-sub">업무 특화 AI 활용 · GPT API 연동 챗봇</div>
</div>
</div>
<div class="card-desc">
ChatGPT·Claude를 실무에 제대로 활용하도록 설계해 드립니다.<br>
업종별 맞춤 프롬프트 패키지와 API 연동 자동화까지 가능합니다.
</div>
<div class="tag-list">
<span class="tag">GPT-4o</span>
<span class="tag">Claude</span>
<span class="tag">Gemini</span>
<span class="tag">API 챗봇</span>
<span class="tag">프롬프트 패키지</span>
</div>
</div>
</div>
<div class="footer">
<div class="footer-row">
<div class="footer-item">
<div class="footer-value">7년</div>
<div class="footer-label">개발 경력</div>
</div>
<div class="footer-item">
<div class="footer-value">직접 개발</div>
<div class="footer-label">재하청 없음</div>
</div>
<div class="footer-item">
<div class="footer-value">소스코드</div>
<div class="footer-label">전체 제공</div>
</div>
<div class="footer-item">
<div class="footer-value">실운영</div>
<div class="footer-label">포트폴리오</div>
</div>
</div>
</div>
</body>
</html>

187
marketing/kmong-images/02-why-us.html Normal file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 652px; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; background: #0f172a; }
.hero {
padding: 40px 40px 28px;
text-align: center;
}
.badge {
display: inline-block;
background: #1e3a5f;
color: #60a5fa;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 16px;
}
.hero h1 {
font-size: 24px;
font-weight: 800;
color: #ffffff;
line-height: 1.4;
margin-bottom: 8px;
}
.hero h1 span { color: #f59e0b; }
.hero p { font-size: 13px; color: #64748b; }
.grid { padding: 8px 40px 40px; display: flex; flex-direction: column; gap: 12px; }
.diff-card {
background: #1e293b;
border: 1px solid #2d3f55;
border-radius: 14px;
padding: 20px 22px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.diff-num {
width: 36px;
height: 36px;
border-radius: 10px;
background: #0f172a;
border: 1.5px solid #334155;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: #60a5fa;
flex-shrink: 0;
margin-top: 2px;
}
.diff-body {}
.diff-title {
font-size: 14px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 6px;
}
.diff-desc {
font-size: 12.5px;
color: #94a3b8;
line-height: 1.7;
}
.diff-desc strong { color: #60a5fa; font-weight: 600; }
.compare {
margin: 0 40px 32px;
background: #1e293b;
border-radius: 14px;
overflow: hidden;
border: 1px solid #2d3f55;
}
.compare-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: #0f172a;
border-bottom: 1px solid #2d3f55;
}
.compare-header div {
padding: 12px;
font-size: 11px;
font-weight: 700;
text-align: center;
}
.compare-header .col-label { color: #475569; }
.compare-header .col-bad { color: #f87171; }
.compare-header .col-good { color: #34d399; }
.compare-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 1px solid #1e293b;
}
.compare-row:last-child { border-bottom: none; }
.compare-row div {
padding: 11px 12px;
font-size: 11.5px;
text-align: center;
line-height: 1.5;
}
.col-label { color: #94a3b8; background: #131f2e; }
.col-bad { color: #fca5a5; background: #1e293b; }
.col-good { color: #6ee7b7; background: #0d2318; }
.col-good strong { color: #34d399; }
</style>
</head>
<body>
<div class="hero">
<div class="badge">왜 쟁승메이드인가</div>
<h1>외주 개발, 한 번이라도<br><span>실망한 적 있으신가요?</span></h1>
<p>자주 들리는 불만을 직접 해소하는 방식으로 운영합니다</p>
</div>
<div class="compare">
<div class="compare-header">
<div class="col-label">항목</div>
<div class="col-bad">일반 외주</div>
<div class="col-good">쟁승메이드</div>
</div>
<div class="compare-row">
<div class="col-label">개발 주체</div>
<div class="col-bad">재하청 가능</div>
<div class="col-good"><strong>대표가 직접</strong></div>
</div>
<div class="compare-row">
<div class="col-label">중간 연락</div>
<div class="col-bad">답변 지연 잦음</div>
<div class="col-good"><strong>매일 현황 공유</strong></div>
</div>
<div class="compare-row">
<div class="col-label">소스코드</div>
<div class="col-bad">미제공 / 일부만</div>
<div class="col-good"><strong>전체 인도</strong></div>
</div>
<div class="compare-row">
<div class="col-label">포트폴리오</div>
<div class="col-bad">예시만 제공</div>
<div class="col-good"><strong>실운영 서비스</strong></div>
</div>
<div class="compare-row">
<div class="col-label">납품 이후</div>
<div class="col-bad">연락 두절</div>
<div class="col-good"><strong>유지보수 포함</strong></div>
</div>
</div>
<div class="grid">
<div class="diff-card">
<div class="diff-num">1</div>
<div class="diff-body">
<div class="diff-title">직접 개발, 재하청 없음</div>
<div class="diff-desc">외주를 또 외주 주는 구조 없이 <strong>제가 직접 개발</strong>합니다. 소통 단절과 품질 저하 문제가 발생하지 않습니다.</div>
</div>
</div>
<div class="diff-card">
<div class="diff-num">2</div>
<div class="diff-body">
<div class="diff-title">실제 운영 서비스 보유</div>
<div class="diff-desc">현재 운영 중인 AI 분석 시스템·자동화 솔루션을 포트폴리오로 확인하실 수 있습니다. <strong>"만들어만 주고 끝"이 아닌 운영자의 시각</strong>으로 개발합니다.</div>
</div>
</div>
<div class="diff-card">
<div class="diff-num">3</div>
<div class="diff-body">
<div class="diff-title">소스코드 전체 인도</div>
<div class="diff-desc">납품 후 소스코드 전량을 제공합니다. <strong>유지보수 종속 없이</strong> 자유롭게 활용하거나 다른 개발자에게 이어서 맡길 수 있습니다.</div>
</div>
</div>
<div class="diff-card">
<div class="diff-num">4</div>
<div class="diff-body">
<div class="diff-title">투명한 일일 커뮤니케이션</div>
<div class="diff-desc">작업 진행 현황을 <strong>매일 카카오톡으로 공유</strong>합니다. 중간에 연락이 끊기는 일은 없습니다.</div>
</div>
</div>
</div>
</body>
</html>

235
marketing/kmong-images/03-process.html Normal file
View File

@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 652px; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; background: #0f172a; }
.hero {
padding: 40px 40px 28px;
text-align: center;
}
.badge {
display: inline-block;
background: #1e3a5f;
color: #60a5fa;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 16px;
}
.hero h1 {
font-size: 24px;
font-weight: 800;
color: #ffffff;
line-height: 1.4;
margin-bottom: 8px;
}
.hero p { font-size: 13px; color: #64748b; }
.steps { padding: 8px 40px 40px; }
.step {
display: flex;
gap: 0;
margin-bottom: 0;
}
.step-left {
display: flex;
flex-direction: column;
align-items: center;
width: 48px;
flex-shrink: 0;
}
.step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
z-index: 1;
}
.step-line {
width: 2px;
flex: 1;
min-height: 20px;
margin: 0 auto;
}
.step-right {
flex: 1;
padding-bottom: 24px;
padding-top: 6px;
padding-left: 12px;
}
.step:last-child .step-right { padding-bottom: 0; }
.step-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.step-title {
font-size: 14px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 6px;
}
.step-desc {
font-size: 12px;
color: #94a3b8;
line-height: 1.7;
}
.step-desc strong { color: #60a5fa; }
/* Step colors */
.s1 .step-circle { background: #1e3a5f; color: #60a5fa; }
.s1 .step-line { background: linear-gradient(#1e3a5f, #1a2d4a); }
.s1 .step-label { color: #60a5fa; }
.s2 .step-circle { background: #1a2d4a; color: #93c5fd; }
.s2 .step-line { background: linear-gradient(#1a2d4a, #1e2d42); }
.s2 .step-label { color: #93c5fd; }
.s3 .step-circle { background: #1e2d42; color: #7dd3fc; }
.s3 .step-line { background: linear-gradient(#1e2d42, #1a3040); }
.s3 .step-label { color: #7dd3fc; }
.s4 .step-circle { background: #1a3040; color: #34d399; }
.s4 .step-line { background: linear-gradient(#1a3040, #0d2318); }
.s4 .step-label { color: #34d399; }
.s5 .step-circle { background: #0d2318; color: #34d399; }
.s5 .step-line { background: linear-gradient(#0d2318, #1e293b); }
.s5 .step-label { color: #34d399; }
.s6 .step-circle { background: #1e293b; color: #a78bfa; }
.s6 .step-line { background: linear-gradient(#1e293b, #2d1b69); }
.s6 .step-label { color: #a78bfa; }
.s7 .step-circle { background: #2d1b69; color: #c4b5fd; }
.s7 .step-label { color: #c4b5fd; }
.note {
margin: 0 40px 32px;
background: #1e293b;
border: 1px solid #2d3f55;
border-radius: 10px;
padding: 14px 18px;
font-size: 12px;
color: #94a3b8;
line-height: 1.7;
}
.note strong { color: #60a5fa; }
</style>
</head>
<body>
<div class="hero">
<div class="badge">진행 절차</div>
<h1>문의부터 납품까지<br>7단계로 투명하게 진행합니다</h1>
<p>구매 전 상담은 무료입니다 · 착수금 50% → 잔금 50%</p>
</div>
<div class="steps">
<div class="step s1">
<div class="step-left">
<div class="step-circle">1</div>
<div class="step-line"></div>
</div>
<div class="step-right">
<div class="step-label">STEP 01 · 무료</div>
<div class="step-title">사전 상담</div>
<div class="step-desc">크몽 채팅으로 요구사항을 보내주세요.<br><strong>24시간 내 답변</strong>, 상담은 100% 무료입니다.</div>
</div>
</div>
<div class="step s2">
<div class="step-left">
<div class="step-circle">2</div>
<div class="step-line"></div>
</div>
<div class="step-right">
<div class="step-label">STEP 02</div>
<div class="step-title">요구사항 분석 및 견적 확정</div>
<div class="step-desc">작업 범위·기간·금액을 확정하고 <strong>문서로 공유</strong>합니다.<br>필요 시 화상 미팅(30분) 진행합니다.</div>
</div>
</div>
<div class="step s3">
<div class="step-left">
<div class="step-circle">3</div>
<div class="step-line"></div>
</div>
<div class="step-right">
<div class="step-label">STEP 03</div>
<div class="step-title">계약 및 착수금 결제</div>
<div class="step-desc">크몽 시스템으로 결제합니다. (착수금 50%)<br>결제 후 <strong>영업일 1~2일 내 작업 착수</strong>합니다.</div>
</div>
</div>
<div class="step s4">
<div class="step-left">
<div class="step-circle">4</div>
<div class="step-line"></div>
</div>
<div class="step-right">
<div class="step-label">STEP 04</div>
<div class="step-title">개발 진행</div>
<div class="step-desc"><strong>매일 진행 현황을 카카오톡으로 공유</strong>합니다.<br>중간 완성본은 스테이징 URL로 확인하실 수 있습니다.</div>
</div>
</div>
<div class="step s5">
<div class="step-left">
<div class="step-circle">5</div>
<div class="step-line"></div>
</div>
<div class="step-right">
<div class="step-label">STEP 05</div>
<div class="step-title">중간 검토 및 수정</div>
<div class="step-desc">1차 결과물 공유 후 피드백을 반영합니다.<br>패키지 내 <strong>수정 횟수(2~5회)</strong> 내에서 조율합니다.</div>
</div>
</div>
<div class="step s6">
<div class="step-left">
<div class="step-circle">6</div>
<div class="step-line"></div>
</div>
<div class="step-right">
<div class="step-label">STEP 06</div>
<div class="step-title">최종 납품</div>
<div class="step-desc"><strong>소스코드 전체 + 배포 URL + 운영 가이드</strong> 제공<br>잔금(50%) 결제 후 최종 인도합니다.</div>
</div>
</div>
<div class="step s7">
<div class="step-left">
<div class="step-circle">7</div>
</div>
<div class="step-right">
<div class="step-label">STEP 07 · 무상</div>
<div class="step-title">유지보수 기간</div>
<div class="step-desc">납품 후 <strong>1~3개월</strong> 동안 버그 수정을 무상 지원합니다.<br>기능 추가·변경은 별도 견적으로 진행합니다.</div>
</div>
</div>
</div>
<div class="note">
💡 <strong>착수금 구조</strong>: 착수금 50% 결제 → 작업 착수 → 최종 납품 후 잔금 50% 결제<br>
범위 외 추가 요청은 사전 협의 후 별도 견적이 발생할 수 있습니다.
</div>
</body>
</html>

233
marketing/kmong-images/04-packages.html Normal file
View File

@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 652px; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; background: #0f172a; }
.hero {
padding: 40px 40px 28px;
text-align: center;
}
.badge {
display: inline-block;
background: #1e3a5f;
color: #60a5fa;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 16px;
}
.hero h1 {
font-size: 24px;
font-weight: 800;
color: #ffffff;
line-height: 1.4;
margin-bottom: 8px;
}
.hero p { font-size: 13px; color: #64748b; }
.packages { padding: 8px 28px 32px; display: flex; gap: 12px; }
.pkg {
flex: 1;
background: #1e293b;
border: 1.5px solid #2d3f55;
border-radius: 14px;
overflow: hidden;
}
.pkg.featured {
border-color: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6, 0 8px 24px rgba(59,130,246,0.15);
}
.pkg-header {
padding: 16px 16px 12px;
text-align: center;
border-bottom: 1px solid #2d3f55;
}
.pkg-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 2px 10px;
border-radius: 12px;
margin-bottom: 8px;
}
.badge-basic { background: #1e3a5f; color: #93c5fd; }
.badge-std { background: #1d4ed8; color: #fff; }
.badge-prem { background: #2d1b69; color: #c4b5fd; }
.pkg-name {
font-size: 13px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 4px;
}
.pkg-price {
font-size: 20px;
font-weight: 800;
color: #60a5fa;
margin-bottom: 2px;
}
.pkg-price span { font-size: 11px; font-weight: 400; color: #64748b; }
.pkg-period {
font-size: 11px;
color: #64748b;
}
.pkg-body { padding: 14px 14px; }
.pkg-desc {
font-size: 11px;
color: #94a3b8;
line-height: 1.6;
margin-bottom: 12px;
min-height: 48px;
}
.feature-list { display: flex; flex-direction: column; gap: 6px; }
.feature {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 11px;
color: #94a3b8;
line-height: 1.4;
}
.feature .icon { color: #34d399; flex-shrink: 0; margin-top: 1px; }
.feature .icon-x { color: #475569; flex-shrink: 0; margin-top: 1px; }
.pkg-footer {
padding: 12px 14px;
border-top: 1px solid #2d3f55;
background: #131f2e;
}
.meta-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.meta-row:last-child { margin-bottom: 0; }
.meta-label { font-size: 10px; color: #475569; }
.meta-value { font-size: 10px; font-weight: 600; color: #94a3b8; }
.meta-value.hl { color: #60a5fa; }
.recommend {
text-align: center;
padding: 6px;
background: #1d4ed8;
font-size: 10px;
font-weight: 700;
color: #fff;
letter-spacing: 0.05em;
}
.note {
margin: 0 28px 32px;
padding: 14px 18px;
background: #1e293b;
border: 1px solid #2d3f55;
border-radius: 10px;
font-size: 11.5px;
color: #94a3b8;
line-height: 1.7;
}
.note strong { color: #f59e0b; }
</style>
</head>
<body>
<div class="hero">
<div class="badge">패키지 구성</div>
<h1>프로젝트 규모에 맞게<br>선택하세요</h1>
<p>구매 전 채팅 상담으로 맞춤 견적도 가능합니다</p>
</div>
<div class="packages">
<div class="pkg">
<div class="pkg-header">
<div class="pkg-badge badge-basic">BASIC</div>
<div class="pkg-name">랜딩·소개 페이지</div>
<div class="pkg-price">330,000<span>원~</span></div>
<div class="pkg-period">작업 기간 7일</div>
</div>
<div class="pkg-body">
<div class="pkg-desc">단일 페이지 웹사이트 또는 업무 자동화 스크립트 1종</div>
<div class="feature-list">
<div class="feature"><span class="icon">✓</span> 소개·랜딩 페이지 1종</div>
<div class="feature"><span class="icon">✓</span> 반응형 (모바일 포함)</div>
<div class="feature"><span class="icon">✓</span> 소스코드 전체 제공</div>
<div class="feature"><span class="icon">✓</span> 수정 2회 포함</div>
<div class="feature"><span class="icon">✓</span> 유지보수 1개월</div>
<div class="feature"><span class="icon-x">✗</span> <span style="color:#475569">배포 지원 미포함</span></div>
<div class="feature"><span class="icon-x">✗</span> <span style="color:#475569">DB·로그인 미포함</span></div>
</div>
</div>
<div class="pkg-footer">
<div class="meta-row"><span class="meta-label">수정</span><span class="meta-value">2회</span></div>
<div class="meta-row"><span class="meta-label">기간</span><span class="meta-value">7일</span></div>
<div class="meta-row"><span class="meta-label">유지보수</span><span class="meta-value">1개월</span></div>
</div>
</div>
<div class="pkg featured">
<div class="recommend">⭐ 가장 많이 선택</div>
<div class="pkg-header">
<div class="pkg-badge badge-std">STANDARD</div>
<div class="pkg-name">웹 서비스 / MVP</div>
<div class="pkg-price">990,000<span>원~</span></div>
<div class="pkg-period">작업 기간 21일</div>
</div>
<div class="pkg-body">
<div class="pkg-desc">회원가입·로그인·CRUD 포함 웹 서비스 또는 자동화 시스템</div>
<div class="feature-list">
<div class="feature"><span class="icon">✓</span> 멀티 페이지 서비스</div>
<div class="feature"><span class="icon">✓</span> 회원가입 · 로그인</div>
<div class="feature"><span class="icon">✓</span> DB 설계 및 연동</div>
<div class="feature"><span class="icon">✓</span> 배포 지원 포함</div>
<div class="feature"><span class="icon">✓</span> 소스코드 전체 제공</div>
<div class="feature"><span class="icon">✓</span> 수정 3회 포함</div>
<div class="feature"><span class="icon">✓</span> 유지보수 2개월</div>
</div>
</div>
<div class="pkg-footer">
<div class="meta-row"><span class="meta-label">수정</span><span class="meta-value hl">3회</span></div>
<div class="meta-row"><span class="meta-label">기간</span><span class="meta-value hl">21일</span></div>
<div class="meta-row"><span class="meta-label">유지보수</span><span class="meta-value hl">2개월</span></div>
</div>
</div>
<div class="pkg">
<div class="pkg-header">
<div class="pkg-badge badge-prem">PREMIUM</div>
<div class="pkg-name">풀스택 서비스</div>
<div class="pkg-price">2,200,000<span>원~</span></div>
<div class="pkg-period">작업 기간 45일</div>
</div>
<div class="pkg-body">
<div class="pkg-desc">API 연동·관리자 대시보드 포함 풀스택 서비스 개발</div>
<div class="feature-list">
<div class="feature"><span class="icon">✓</span> 풀스택 서비스 전체</div>
<div class="feature"><span class="icon">✓</span> 관리자 대시보드</div>
<div class="feature"><span class="icon">✓</span> 외부 API 연동</div>
<div class="feature"><span class="icon">✓</span> 결제 시스템 연동</div>
<div class="feature"><span class="icon">✓</span> 배포 + 서버 구성</div>
<div class="feature"><span class="icon">✓</span> 수정 5회 포함</div>
<div class="feature"><span class="icon">✓</span> 유지보수 3개월</div>
</div>
</div>
<div class="pkg-footer">
<div class="meta-row"><span class="meta-label">수정</span><span class="meta-value">5회</span></div>
<div class="meta-row"><span class="meta-label">기간</span><span class="meta-value">45일</span></div>
<div class="meta-row"><span class="meta-label">유지보수</span><span class="meta-value">3개월</span></div>
</div>
</div>
</div>
<div class="note">
💡 <strong>구매 전 채팅 상담 필수</strong> — 요구사항에 따라 작업 범위와 가격이 달라집니다.<br>
위 가격은 기준가이며, 복잡도에 따라 맞춤 견적을 제공합니다. 상담은 무료입니다.
</div>
</body>
</html>

209
marketing/kmong-images/05-faq-cta.html Normal file
View File

@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 652px; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; background: #0f172a; }
.hero {
padding: 40px 40px 28px;
text-align: center;
}
.badge {
display: inline-block;
background: #1e3a5f;
color: #60a5fa;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 16px;
}
.hero h1 {
font-size: 24px;
font-weight: 800;
color: #ffffff;
line-height: 1.4;
margin-bottom: 8px;
}
.hero p { font-size: 13px; color: #64748b; }
.faq-list { padding: 8px 40px 32px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
background: #1e293b;
border: 1px solid #2d3f55;
border-radius: 12px;
overflow: hidden;
}
.faq-q {
padding: 14px 18px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.faq-q-icon {
width: 22px;
height: 22px;
border-radius: 6px;
background: #1e3a5f;
color: #60a5fa;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.faq-q-text {
font-size: 13px;
font-weight: 700;
color: #f1f5f9;
line-height: 1.5;
}
.faq-a {
padding: 0 18px 14px 50px;
font-size: 12px;
color: #94a3b8;
line-height: 1.7;
}
.faq-a strong { color: #60a5fa; }
.cta {
margin: 0 28px 32px;
background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);
border-radius: 16px;
padding: 32px 28px;
text-align: center;
}
.cta h2 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
line-height: 1.4;
}
.cta p {
font-size: 12.5px;
color: rgba(255,255,255,0.75);
margin-bottom: 20px;
line-height: 1.6;
}
.cta-pills {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.pill {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
font-size: 11.5px;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
}
.promise {
margin: 0 28px 32px;
display: flex;
gap: 10px;
}
.promise-item {
flex: 1;
background: #1e293b;
border: 1px solid #2d3f55;
border-radius: 12px;
padding: 16px 14px;
text-align: center;
}
.promise-icon { font-size: 22px; margin-bottom: 8px; }
.promise-title { font-size: 12px; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
.promise-desc { font-size: 10.5px; color: #64748b; line-height: 1.5; }
</style>
</head>
<body>
<div class="hero">
<div class="badge">자주 묻는 질문</div>
<h1>궁금한 점을<br>먼저 확인해 보세요</h1>
<p>추가 질문은 채팅으로 언제든지 문의해 주세요</p>
</div>
<div class="faq-list">
<div class="faq-item">
<div class="faq-q">
<div class="faq-q-icon">Q</div>
<div class="faq-q-text">개발 경험이 없어도 의뢰할 수 있나요?</div>
</div>
<div class="faq-a">네, 가능합니다. 아이디어나 해결하고 싶은 문제만 있으면 충분합니다. <strong>요구사항 정리부터 함께 도와드립니다.</strong></div>
</div>
<div class="faq-item">
<div class="faq-q">
<div class="faq-q-icon">Q</div>
<div class="faq-q-text">패키지에 없는 기능도 추가할 수 있나요?</div>
</div>
<div class="faq-a">가능합니다. 사전 상담 시 말씀해 주시면 <strong>추가 비용을 포함한 맞춤 견적</strong>을 드립니다. 먼저 채팅으로 문의해 주세요.</div>
</div>
<div class="faq-item">
<div class="faq-q">
<div class="faq-q-icon">Q</div>
<div class="faq-q-text">작업 중 진행 상황을 확인할 수 있나요?</div>
</div>
<div class="faq-a"><strong>매일 카카오톡으로 진행 현황을 공유</strong>해 드립니다. 중간 완성본은 스테이징 URL로 직접 확인하실 수 있습니다.</div>
</div>
<div class="faq-item">
<div class="faq-q">
<div class="faq-q-icon">Q</div>
<div class="faq-q-text">납품 후 직접 수정할 수 있나요?</div>
</div>
<div class="faq-a"><strong>소스코드 전체를 인도</strong>해 드리므로 개발 지식이 있으시면 직접 수정하실 수 있습니다. 비개발자분은 유지보수 연장 계약으로 지원받으실 수 있습니다.</div>
</div>
<div class="faq-item">
<div class="faq-q">
<div class="faq-q-icon">Q</div>
<div class="faq-q-text">서버·호스팅 비용은 별도인가요?</div>
</div>
<div class="faq-a">네, 서버 및 도메인 비용은 의뢰인 부담입니다. 저렴하고 안정적인 호스팅 구성을 추천해 드리며, 초기 설정을 도와드립니다. <strong>(월 1~5만원 수준 구성 가능)</strong></div>
</div>
</div>
<div class="promise">
<div class="promise-item">
<div class="promise-icon">💬</div>
<div class="promise-title">24시간 내 답변</div>
<div class="promise-desc">상담 문의는 24시간 내에 답변드립니다</div>
</div>
<div class="promise-item">
<div class="promise-icon">📋</div>
<div class="promise-title">범위 문서화</div>
<div class="promise-desc">확정된 작업 범위를 문서로 공유합니다</div>
</div>
<div class="promise-item">
<div class="promise-icon">🔒</div>
<div class="promise-title">비밀 유지</div>
<div class="promise-desc">요청 시 NDA 작성 가능합니다</div>
</div>
</div>
<div class="cta">
<h2>지금 바로 무료 상담을<br>시작해 보세요</h2>
<p>어떤 서비스든 채팅으로 먼저 물어보세요.<br>24시간 내에 답변, 상담은 무료입니다.</p>
<div class="cta-pills">
<span class="pill">💻 웹·앱 개발</span>
<span class="pill">⚙️ 업무 자동화</span>
<span class="pill">🤖 AI 프롬프트</span>
</div>
</div>
</body>
</html>