gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
960728c99c5cd994d63543220b594e27b67da46d
jaengseung-made/CONTENT/ebay-tool-proposal.html
gahusb 244781f96a feat: 이베이 부품 AI 리스팅 툴 — 기획·설계·견적서·MVP 스캐폴딩 
[기획/설계 문서]
- CONTENT/ARCHITECTURE_EBAY_PARTS_TOOL.md: 3-tier 아키텍처 설계서
- CONTENT/ebay-tool-proposal.html: 공식 제안서 (3단 패키지 120/198/330만원)
- CONTENT/ebay-tool-questionnaire.html: 사전 요구사항 질문지 (17항목)

[관리자 문서 뷰어]
- admin/documents/page.tsx: 프로젝트 문서 카드 목록 + iframe 미리보기
- api/admin/documents/[filename]: 인증 기반 HTML 문서 서빙 API
- AdminSidebar: "프로젝트 문서" 메뉴 추가

[MVP 스캐폴딩]
- tools/ebay-parts/page.tsx: 품번 입력 → 5탭 결과 UI (Mock 데이터)
- api/tools/ebay-parts/search: POST 검색 API (Mock 반환)
- Sidebar: "이베이 부품 검색" 메뉴 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 13:49:06 +09:00

1702 lines
50 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이베이 자동차 부품 AI 리스팅 자동화 — 프로젝트 제안서 | 쟁승메이드</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');
:root {
--primary: #1a56db;
--primary-light: #3b82f6;
--primary-dark: #1e40af;
--accent: #f59e0b;
--accent-light: #fbbf24;
--dark: #0f172a;
--dark-soft: #1e293b;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--white: #ffffff;
--green: #059669;
--green-light: #d1fae5;
--red: #dc2626;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--dark);
background: var(--gray-100);
line-height: 1.7;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
.document {
max-width: 800px;
margin: 0 auto;
background: var(--white);
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
/* ── Cover Page ── */
.cover {
background: linear-gradient(135deg, var(--dark) 0%, #162544 50%, var(--primary-dark) 100%);
color: var(--white);
padding: 100px 60px 80px;
position: relative;
overflow: hidden;
page-break-after: always;
}
.cover::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 70%);
border-radius: 50%;
}
.cover::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(26,86,219,0.15) 0%, transparent 70%);
border-radius: 50%;
}
.cover-brand {
position: relative;
z-index: 1;
}
.cover-brand .logo-text {
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.cover-brand .logo-sub {
font-size: 12px;
color: var(--gray-400);
letter-spacing: 1px;
margin-bottom: 60px;
}
.cover-title {
position: relative;
z-index: 1;
}
.cover-title h1 {
font-size: 32px;
font-weight: 900;
line-height: 1.35;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.cover-title h1 .highlight {
color: var(--accent);
}
.cover-title .subtitle {
font-size: 18px;
font-weight: 400;
color: var(--gray-300);
margin-bottom: 60px;
}
.cover-meta {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 30px;
display: flex;
gap: 48px;
}
.cover-meta .meta-item {
font-size: 13px;
}
.cover-meta .meta-label {
color: var(--gray-400);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.cover-meta .meta-value {
font-weight: 600;
}
.cover-badge {
position: absolute;
top: 40px;
right: 50px;
z-index: 1;
background: rgba(245,158,11,0.15);
border: 1px solid rgba(245,158,11,0.3);
color: var(--accent);
font-size: 11px;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
letter-spacing: 0.5px;
}
/* ── Section Layout ── */
.section {
padding: 48px 60px;
border-bottom: 1px solid var(--gray-200);
}
.section:last-child {
border-bottom: none;
}
.section-number {
font-size: 11px;
font-weight: 700;
color: var(--primary);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
}
.section-title {
font-size: 22px;
font-weight: 800;
color: var(--dark);
margin-bottom: 24px;
letter-spacing: -0.3px;
}
.section-title .accent {
color: var(--primary);
}
.section-desc {
font-size: 14.5px;
color: var(--gray-600);
margin-bottom: 28px;
line-height: 1.8;
}
/* ── Overview Cards ── */
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 28px;
}
.overview-card {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 24px 20px;
text-align: center;
}
.overview-card .icon {
font-size: 28px;
margin-bottom: 10px;
}
.overview-card .label {
font-size: 12px;
color: var(--gray-500);
margin-bottom: 4px;
}
.overview-card .value {
font-size: 18px;
font-weight: 800;
color: var(--dark);
}
.overview-card .value .small {
font-size: 13px;
font-weight: 500;
color: var(--gray-500);
}
.overview-card .sub {
font-size: 12px;
color: var(--green);
font-weight: 600;
margin-top: 4px;
}
/* ── Context Box ── */
.context-box {
background: var(--gray-50);
border-left: 4px solid var(--primary);
border-radius: 0 8px 8px 0;
padding: 20px 24px;
margin-bottom: 24px;
}
.context-box p {
font-size: 14px;
color: var(--gray-700);
line-height: 1.8;
}
.context-box strong {
color: var(--dark);
}
/* ── Feature List ── */
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.feature-item {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 22px 20px;
transition: border-color 0.2s;
}
.feature-item:hover {
border-color: var(--primary-light);
}
.feature-item .f-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.feature-item .f-icon {
width: 36px;
height: 36px;
background: var(--primary);
color: var(--white);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.feature-item .f-title {
font-size: 14px;
font-weight: 700;
color: var(--dark);
}
.feature-item .f-desc {
font-size: 13px;
color: var(--gray-600);
line-height: 1.7;
}
/* ── Pricing Table ── */
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
border: 1px solid var(--gray-200);
border-radius: 12px;
overflow: hidden;
margin-bottom: 28px;
}
.pricing-col {
padding: 0;
background: var(--white);
position: relative;
}
.pricing-col.recommended {
border: 2px solid var(--primary);
border-radius: 12px;
z-index: 1;
margin: -1px;
box-shadow: 0 4px 20px rgba(26,86,219,0.15);
}
.pricing-header {
padding: 28px 20px 20px;
text-align: center;
border-bottom: 1px solid var(--gray-200);
}
.pricing-col.recommended .pricing-header {
background: var(--primary);
color: var(--white);
border-bottom: none;
}
.pricing-badge {
display: inline-block;
background: var(--accent);
color: var(--dark);
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: 10px;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.pricing-name {
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 10px;
}
.pricing-price {
font-size: 28px;
font-weight: 900;
margin-bottom: 2px;
}
.pricing-price .won {
font-size: 16px;
font-weight: 600;
}
.pricing-period {
font-size: 12px;
color: var(--gray-400);
}
.pricing-col.recommended .pricing-period {
color: rgba(255,255,255,0.7);
}
.pricing-body {
padding: 20px;
}
.pricing-body ul {
list-style: none;
padding: 0;
}
.pricing-body li {
font-size: 13px;
color: var(--gray-700);
padding: 7px 0;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.5;
}
.pricing-body li:last-child {
border-bottom: none;
}
.pricing-body li .check {
color: var(--green);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.pricing-body li .cross {
color: var(--gray-300);
flex-shrink: 0;
margin-top: 1px;
}
.pricing-footer {
padding: 0 20px 24px;
text-align: center;
}
.pricing-footer .support-info {
font-size: 12px;
color: var(--gray-500);
margin-bottom: 12px;
}
.pricing-cta {
display: block;
width: 100%;
padding: 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-align: center;
text-decoration: none;
border: 2px solid var(--primary);
color: var(--primary);
background: var(--white);
cursor: pointer;
transition: all 0.2s;
}
.pricing-cta:hover {
background: var(--primary);
color: var(--white);
}
.pricing-col.recommended .pricing-cta {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.pricing-col.recommended .pricing-cta:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
}
.pricing-note {
font-size: 12px;
color: var(--gray-500);
text-align: center;
margin-top: 8px;
line-height: 1.6;
}
/* ── Milestone Timeline ── */
.timeline {
position: relative;
padding-left: 36px;
}
.timeline::before {
content: '';
position: absolute;
left: 14px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--gray-200);
}
.timeline-item {
position: relative;
margin-bottom: 20px;
padding: 16px 20px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: -30px;
top: 22px;
width: 10px;
height: 10px;
background: var(--primary);
border: 2px solid var(--white);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--primary);
}
.timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.timeline-step {
font-size: 11px;
font-weight: 700;
color: var(--primary);
letter-spacing: 1px;
}
.timeline-duration {
font-size: 11px;
font-weight: 600;
color: var(--gray-500);
background: var(--gray-200);
padding: 2px 10px;
border-radius: 10px;
}
.timeline-title {
font-size: 15px;
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
}
.timeline-desc {
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
}
.timeline-output {
font-size: 12px;
color: var(--gray-500);
margin-top: 6px;
}
.timeline-output strong {
color: var(--gray-600);
}
/* ── Payment ── */
.payment-flow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.payment-step {
flex: 1;
text-align: center;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 20px 16px;
}
.payment-step .percent {
font-size: 24px;
font-weight: 900;
color: var(--primary);
}
.payment-step .p-label {
font-size: 13px;
font-weight: 600;
color: var(--dark);
margin-top: 4px;
}
.payment-step .p-timing {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
.payment-arrow {
font-size: 20px;
color: var(--gray-400);
flex-shrink: 0;
}
.cost-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
}
.cost-table th {
text-align: left;
font-size: 12px;
font-weight: 700;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 16px;
border-bottom: 2px solid var(--gray-200);
}
.cost-table td {
padding: 12px 16px;
font-size: 13px;
color: var(--gray-700);
border-bottom: 1px solid var(--gray-100);
}
.cost-table tr:last-child td {
border-bottom: none;
}
/* ── Tech Stack ── */
.tech-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tech-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 8px;
}
.tech-item .t-cat {
font-size: 10px;
font-weight: 700;
color: var(--white);
background: var(--primary);
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
flex-shrink: 0;
min-width: 60px;
text-align: center;
}
.tech-item .t-name {
font-size: 13px;
font-weight: 600;
color: var(--dark);
}
/* ── Safety Section ── */
.safety-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.safety-card {
padding: 20px;
border-radius: 10px;
border: 1px solid var(--gray-200);
background: var(--gray-50);
}
.safety-card .s-icon {
width: 32px;
height: 32px;
background: var(--green-light);
color: var(--green);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
margin-bottom: 10px;
}
.safety-card .s-title {
font-size: 14px;
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
}
.safety-card .s-desc {
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
}
/* ── Notes List ── */
.notes-list {
list-style: none;
padding: 0;
}
.notes-list li {
font-size: 13.5px;
color: var(--gray-700);
padding: 10px 0;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.7;
}
.notes-list li:last-child {
border-bottom: none;
}
.notes-list .n-num {
flex-shrink: 0;
width: 22px;
height: 22px;
background: var(--gray-200);
color: var(--gray-600);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
/* ── Contact Footer ── */
.contact-section {
background: var(--dark);
color: var(--white);
padding: 48px 60px;
text-align: center;
}
.contact-section .section-title {
color: var(--white);
}
.contact-info-grid {
display: flex;
justify-content: center;
gap: 48px;
margin-top: 24px;
}
.contact-item {
text-align: center;
}
.contact-item .c-label {
font-size: 11px;
color: var(--gray-400);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 4px;
}
.contact-item .c-value {
font-size: 15px;
font-weight: 600;
color: var(--white);
}
.contact-item .c-value a {
color: var(--accent-light);
text-decoration: none;
}
.contact-cta {
display: inline-block;
margin-top: 32px;
padding: 14px 40px;
background: var(--accent);
color: var(--dark);
font-size: 14px;
font-weight: 700;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s;
}
.contact-cta:hover {
background: var(--accent-light);
}
.footer-note {
margin-top: 28px;
font-size: 12px;
color: var(--gray-500);
}
/* ── Comparison Helper ── */
.compare-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding: 20px 24px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
}
.compare-before, .compare-after {
flex: 1;
text-align: center;
}
.compare-before .time {
font-size: 28px;
font-weight: 900;
color: var(--red);
}
.compare-after .time {
font-size: 28px;
font-weight: 900;
color: var(--green);
}
.compare-label {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
.compare-arrow-big {
font-size: 24px;
color: var(--primary);
flex-shrink: 0;
}
.compare-saving {
text-align: center;
flex-shrink: 0;
}
.compare-saving .badge {
display: inline-block;
background: var(--green-light);
color: var(--green);
font-size: 14px;
font-weight: 800;
padding: 6px 16px;
border-radius: 8px;
}
/* ── Confidence Level ── */
.confidence-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
.confidence-table th {
text-align: left;
font-size: 12px;
font-weight: 700;
color: var(--gray-500);
padding: 8px 12px;
border-bottom: 2px solid var(--gray-200);
}
.confidence-table td {
padding: 10px 12px;
font-size: 13px;
color: var(--gray-700);
border-bottom: 1px solid var(--gray-100);
}
.badge-high {
display: inline-block;
background: var(--green-light);
color: var(--green);
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
border-radius: 10px;
}
.badge-medium {
display: inline-block;
background: #fef3c7;
color: #d97706;
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
border-radius: 10px;
}
.badge-low {
display: inline-block;
background: #fee2e2;
color: var(--red);
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
border-radius: 10px;
}
/* ── Print Styles ── */
@media print {
body {
background: white;
font-size: 12px;
}
.document {
box-shadow: none;
max-width: none;
}
.cover {
padding: 80px 50px 60px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.section {
padding: 36px 50px;
page-break-inside: avoid;
}
.pricing-grid {
page-break-inside: avoid;
}
.timeline {
page-break-inside: avoid;
}
.contact-section {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
padding: 36px 50px;
}
.pricing-col.recommended {
box-shadow: none;
}
a {
color: var(--primary) !important;
text-decoration: none !important;
}
}
/* ── Divider ── */
.section-divider {
width: 40px;
height: 3px;
background: var(--primary);
border-radius: 2px;
margin-bottom: 24px;
}
</style>
</head>
<body>
<div class="document">
<!-- ══════════════════════════════════════════════ -->
<!-- COVER PAGE -->
<!-- ══════════════════════════════════════════════ -->
<div class="cover">
<div class="cover-badge">CONFIDENTIAL</div>
<div class="cover-brand">
<div class="logo-text">JaengseungMade</div>
<div class="logo-sub">Premium Development Service</div>
</div>
<div class="cover-title">
<h1>이베이 자동차 부품<br><span class="highlight">AI 리스팅 자동화</span></h1>
<div class="subtitle">프로젝트 제안서 겸 견적서</div>
</div>
<div class="cover-meta">
<div class="meta-item">
<div class="meta-label">작성일</div>
<div class="meta-value">2026년 4월</div>
</div>
<div class="meta-item">
<div class="meta-label">작성자</div>
<div class="meta-value">쟁승메이드 (박재오)</div>
</div>
<div class="meta-item">
<div class="meta-label">문서 분류</div>
<div class="meta-value">프로젝트 제안서</div>
</div>
<div class="meta-item">
<div class="meta-label">유효기간</div>
<div class="meta-value">발행일로부터 30일</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 1. PROJECT OVERVIEW -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 01</div>
<h2 class="section-title">프로젝트 <span class="accent">개요</span></h2>
<div class="section-divider"></div>
<div class="context-box">
<p>
이베이 자동차 부품 셀러는 하나의 리스팅을 작성하기 위해 <strong>여러 부품 사이트를 수동으로 탐색</strong>하고,
OEM 번호 확인, 호환 차종 조사, 가격 비교, 환율 계산 등 반복적이고 시간 소모적인 작업을 수행합니다.
본 프로젝트는 이 전 과정을 <strong>AI 자동화</strong>하여 셀러의 업무 효율을 획기적으로 개선합니다.
</p>
</div>
<div class="compare-row">
<div class="compare-before">
<div class="time">30분</div>
<div class="compare-label">리스팅 1건 (현재)</div>
</div>
<div class="compare-arrow-big">&rarr;</div>
<div class="compare-after">
<div class="time">3분</div>
<div class="compare-label">리스팅 1건 (자동화 후)</div>
</div>
<div class="compare-saving">
<div class="badge">90% 절감</div>
</div>
</div>
<div class="overview-grid">
<div class="overview-card">
<div class="icon">&#128269;</div>
<div class="label">입력</div>
<div class="value">품번 1개</div>
<div class="sub">단일 입력으로 시작</div>
</div>
<div class="overview-card">
<div class="icon">&#129302;</div>
<div class="label">처리</div>
<div class="value">AI 자동 분석</div>
<div class="sub">웹 탐색 + 데이터 구조화</div>
</div>
<div class="overview-card">
<div class="icon">&#128203;</div>
<div class="label">출력</div>
<div class="value">리스팅 완성본</div>
<div class="sub">제목 / Specifics / Fitment</div>
</div>
</div>
<p class="section-desc" style="margin-bottom:0;">
<strong>핵심 목표:</strong> 품번 하나만 입력하면 AI가 자동으로 웹을 탐색하고,
부품 정보를 수집/구조화하여 이베이 리스팅에 필요한 모든 데이터를 완성합니다.
셀러는 최종 확인만 하면 됩니다.
</p>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 2. FEATURES -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 02</div>
<h2 class="section-title">제공 <span class="accent">기능</span></h2>
<div class="section-divider"></div>
<p class="section-desc">
각 기능은 독립적으로 동작하면서도 하나의 파이프라인으로 연결되어,
품번 입력부터 리스팅 완성까지 끊김 없는 자동화를 제공합니다.
</p>
<div class="feature-grid">
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#127760;</div>
<div class="f-title">멀티 사이트 자동 탐색</div>
</div>
<div class="f-desc">
Playwright 기반 브라우저 자동화로 주요 자동차 부품 사이트를 동시 탐색합니다.
JavaScript 렌더링이 필요한 사이트도 완벽 지원하며, 안티봇 대응 stealth 모드를 적용합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#129504;</div>
<div class="f-title">AI 데이터 추출 및 구조화</div>
</div>
<div class="f-desc">
Claude AI의 Tool Use 기능으로 비정형 웹 데이터에서 부품명, 규격, 가격, 호환 정보 등을
정형화된 JSON으로 추출합니다. 사이트 구조가 변경되어도 AI가 자동 대응합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#128256;</div>
<div class="f-title">OEM/OE 크로스레퍼런스</div>
</div>
<div class="f-desc">
입력된 품번의 OEM 원본 번호와 호환 부품 번호를 자동 매칭합니다.
복수의 소스에서 교차 확인하여 정확도를 높이고, 리스팅 노출을 극대화합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#128663;</div>
<div class="f-title">호환 차종(Fitment) 수집</div>
</div>
<div class="f-desc">
AI가 단독 생성하지 않고, 실제 소스 데이터 기반으로 Fitment을 수집합니다.
복수 소스 교차검증을 통해 신뢰도를 확보하며, 신뢰도 레벨(High/Medium/Low)을 함께 표시합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#128176;</div>
<div class="f-title">가격 비교표 + 환율 변환</div>
</div>
<div class="f-desc">
복수 사이트의 판매가를 한눈에 비교할 수 있는 테이블을 자동 생성합니다.
실시간 KRW/USD 환율을 적용하여 원가 계산을 즉시 지원합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#128220;</div>
<div class="f-title">관세 계산기 입력값 생성</div>
</div>
<div class="f-desc">
부품 카테고리, 중량, 원산지 정보를 기반으로 관세 계산에 필요한 입력값을
자동으로 정리합니다. HS Code 추정 및 예상 관세율을 함께 제공합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#128196;</div>
<div class="f-title">이베이 리스팅 자동 정리</div>
</div>
<div class="f-desc">
이베이 최적화된 제목(80자), 카테고리 추천, Item Specifics(Brand, Manufacturer Part Number, Fitment Type 등),
호환 차종 데이터를 이베이 형식에 맞게 자동 구성합니다.
</div>
</div>
<div class="feature-item">
<div class="f-header">
<div class="f-icon">&#128202;</div>
<div class="f-title">검색 이력 및 통계</div>
</div>
<div class="f-desc">
모든 검색 결과를 저장하고, 과거 검색 이력을 빠르게 조회할 수 있습니다.
자주 검색하는 부품의 가격 변동 추적과 리스팅 작업 통계를 제공합니다.
</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 3. PRICING -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 03</div>
<h2 class="section-title">패키지별 <span class="accent">견적</span></h2>
<div class="section-divider"></div>
<p class="section-desc">
비즈니스 규모와 자동화 수준에 따라 3가지 패키지를 제안드립니다.
STANDARD 패키지가 비용 대비 가장 높은 효율을 제공하며, 대부분의 셀러에게 적합합니다.
</p>
<div class="pricing-grid">
<!-- BASIC -->
<div class="pricing-col">
<div class="pricing-header">
<div class="pricing-name">BASIC</div>
<div class="pricing-price"><span class="won">&#8361;</span>120<span class="won">만</span></div>
<div class="pricing-period">개발 기간: 5주</div>
</div>
<div class="pricing-body">
<ul>
<li><span class="check">&#10003;</span> 2개 사이트 크롤링</li>
<li><span class="check">&#10003;</span> AI 정보 추출 및 정리</li>
<li><span class="check">&#10003;</span> 가격 비교 + 환율 계산</li>
<li><span class="check">&#10003;</span> 이베이 제목 자동 생성</li>
<li><span class="check">&#10003;</span> 이베이 카테고리 추천</li>
<li><span class="cross">&mdash;</span> <span style="color:var(--gray-400)">Fitment 자동 수집</span></li>
<li><span class="cross">&mdash;</span> <span style="color:var(--gray-400)">OEM 크로스레퍼런스</span></li>
<li><span class="cross">&mdash;</span> <span style="color:var(--gray-400)">관세 계산기</span></li>
<li><span class="cross">&mdash;</span> <span style="color:var(--gray-400)">CSV 일괄 처리</span></li>
<li><span class="cross">&mdash;</span> <span style="color:var(--gray-400)">eBay API 연동</span></li>
</ul>
</div>
<div class="pricing-footer">
<div class="support-info">수정 2회 | AS 2주</div>
<div class="pricing-cta">문의하기</div>
</div>
</div>
<!-- STANDARD (Recommended) -->
<div class="pricing-col recommended">
<div class="pricing-header">
<div class="pricing-badge">BEST VALUE</div>
<div class="pricing-name">STANDARD</div>
<div class="pricing-price"><span class="won">&#8361;</span>198<span class="won">만</span></div>
<div class="pricing-period">개발 기간: 8~9주</div>
</div>
<div class="pricing-body">
<ul>
<li><span class="check">&#10003;</span> <strong>4개 사이트</strong> 크롤링</li>
<li><span class="check">&#10003;</span> AI 정보 추출 및 정리</li>
<li><span class="check">&#10003;</span> 가격 비교 + 환율 계산</li>
<li><span class="check">&#10003;</span> 이베이 제목 자동 생성</li>
<li><span class="check">&#10003;</span> 이베이 카테고리 추천</li>
<li><span class="check">&#10003;</span> <strong>Fitment 자동 수집 + 교차검증</strong></li>
<li><span class="check">&#10003;</span> <strong>OEM 크로스레퍼런스</strong></li>
<li><span class="check">&#10003;</span> <strong>관세 계산기 입력값</strong></li>
<li><span class="check">&#10003;</span> <strong>검색 이력 저장/관리</strong></li>
<li><span class="cross">&mdash;</span> <span style="color:var(--gray-400)">CSV 일괄 처리</span></li>
</ul>
</div>
<div class="pricing-footer">
<div class="support-info">수정 3회 | AS 1개월</div>
<div class="pricing-cta">문의하기</div>
</div>
</div>
<!-- PREMIUM -->
<div class="pricing-col">
<div class="pricing-header">
<div class="pricing-name">PREMIUM</div>
<div class="pricing-price"><span class="won">&#8361;</span>330<span class="won">만</span></div>
<div class="pricing-period">개발 기간: 12주</div>
</div>
<div class="pricing-body">
<ul>
<li><span class="check">&#10003;</span> <strong>6+개 사이트</strong> 크롤링</li>
<li><span class="check">&#10003;</span> AI 정보 추출 및 정리</li>
<li><span class="check">&#10003;</span> 가격 비교 + 환율 계산</li>
<li><span class="check">&#10003;</span> 이베이 제목 자동 생성</li>
<li><span class="check">&#10003;</span> 이베이 카테고리 추천</li>
<li><span class="check">&#10003;</span> Fitment 자동 수집 + 교차검증</li>
<li><span class="check">&#10003;</span> OEM 크로스레퍼런스</li>
<li><span class="check">&#10003;</span> 관세 계산기 입력값</li>
<li><span class="check">&#10003;</span> <strong>CSV 일괄 처리 (엑셀 업로드)</strong></li>
<li><span class="check">&#10003;</span> <strong>eBay Listing API 직접 연동</strong></li>
<li><span class="check">&#10003;</span> <strong>리스팅 템플릿 관리</strong></li>
<li><span class="check">&#10003;</span> <strong>가격 변동 알림 (텔레그램)</strong></li>
</ul>
</div>
<div class="pricing-footer">
<div class="support-info">수정 5회 | AS 2개월</div>
<div class="pricing-cta">문의하기</div>
</div>
</div>
</div>
<p class="pricing-note">
* 모든 금액은 VAT 별도입니다. 견적은 발행일로부터 30일간 유효합니다.<br>
* AI API 사용료(월 1~3만원) 및 서버 비용(VPS 월 2~5만원)은 별도입니다.
</p>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 4. MILESTONE -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 04</div>
<h2 class="section-title">진행 <span class="accent">절차</span></h2>
<div class="section-divider"></div>
<p class="section-desc">
7단계 마일스톤 기반으로 진행하며, 각 단계마다 산출물을 공유드립니다.
아래 일정은 STANDARD 패키지 기준이며, 패키지에 따라 조정될 수 있습니다.
</p>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 1</div>
<div class="timeline-duration">3~4일</div>
</div>
<div class="timeline-title">요구사항 확정 및 킥오프</div>
<div class="timeline-desc">
타겟 부품 사이트 선정, 필요 데이터 항목 확정, 이베이 리스팅 양식 구체화.
고객의 실제 리스팅 프로세스를 분석하여 자동화 범위를 확정합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> 요구사항 정의서 (RFP), 사이트 목록, 데이터 스키마</div>
</div>
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 2</div>
<div class="timeline-duration">4~5일</div>
</div>
<div class="timeline-title">시스템 설계</div>
<div class="timeline-desc">
아키텍처 설계, DB 스키마, API 설계, 크롤링 전략 수립.
각 사이트별 데이터 추출 방식과 AI 파이프라인 흐름을 설계합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> 시스템 아키텍처 문서, DB ERD, API 명세서</div>
</div>
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 3</div>
<div class="timeline-duration">7~10일</div>
</div>
<div class="timeline-title">크롤링 엔진 개발</div>
<div class="timeline-desc">
Playwright 기반 멀티 사이트 크롤러 구축. 안티봇 우회, 요청 간격 제한, 프록시 설정,
에러 처리 및 재시도 로직을 구현합니다. 각 사이트별 동작을 검증합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> 크롤러 모듈 (사이트별), 테스트 결과 리포트</div>
</div>
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 4</div>
<div class="timeline-duration">7~10일</div>
</div>
<div class="timeline-title">AI 파이프라인 구축</div>
<div class="timeline-desc">
Claude AI Tool Use를 활용한 데이터 추출/구조화 파이프라인 개발.
OEM 크로스레퍼런스, Fitment 교차검증, 가격 비교, 환율 변환, 관세 계산 로직을 구현합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> AI 파이프라인 모듈, 정확도 테스트 결과</div>
</div>
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 5</div>
<div class="timeline-duration">7~10일</div>
</div>
<div class="timeline-title">UI 통합 및 프론트엔드</div>
<div class="timeline-desc">
웹 대시보드 UI 개발. 검색 인터페이스, 결과 뷰, 이력 관리, 리스팅 편집/내보내기 기능을 구현합니다.
직관적인 UX로 최소한의 학습 비용으로 사용할 수 있도록 합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> 웹 애플리케이션 (베타 버전)</div>
</div>
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 6</div>
<div class="timeline-duration">5~7일</div>
</div>
<div class="timeline-title">테스트 및 최적화</div>
<div class="timeline-desc">
실제 부품 번호로 엔드투엔드 테스트 수행. AI 정확도 검증, 성능 최적화, 엣지 케이스 처리.
고객과 함께 실사용 시나리오를 테스트하고 피드백을 반영합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> 테스트 리포트, 정확도 통계, 수정 반영</div>
</div>
<div class="timeline-item">
<div class="timeline-header">
<div class="timeline-step">STEP 7</div>
<div class="timeline-duration">3~4일</div>
</div>
<div class="timeline-title">배포 및 납품</div>
<div class="timeline-desc">
Docker Compose를 통한 운영 환경 배포. 사용자 매뉴얼 제공 및 운영 교육을 진행합니다.
납품 후 AS 기간 동안 버그 수정 및 안정화를 지원합니다.
</div>
<div class="timeline-output"><strong>산출물:</strong> 운영 서버 배포, 사용자 매뉴얼, 관리자 가이드</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 5. PAYMENT -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 05</div>
<h2 class="section-title">결제 <span class="accent">조건</span></h2>
<div class="section-divider"></div>
<div class="payment-flow">
<div class="payment-step">
<div class="percent">50%</div>
<div class="p-label">착수금</div>
<div class="p-timing">계약 체결 시</div>
</div>
<div class="payment-arrow">&rarr;</div>
<div class="payment-step" style="background:var(--gray-50); border-color:var(--primary); position:relative;">
<div style="position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--white);background:var(--primary);padding:2px 10px;border-radius:10px;">개발 진행</div>
<div class="percent" style="color:var(--gray-400);font-size:18px;">STEP 1~7</div>
<div class="p-label">마일스톤 기반 진행</div>
<div class="p-timing">정기 진행보고</div>
</div>
<div class="payment-arrow">&rarr;</div>
<div class="payment-step">
<div class="percent">50%</div>
<div class="p-label">잔금</div>
<div class="p-timing">최종 납품 확인 후</div>
</div>
</div>
<h3 style="font-size:15px;font-weight:700;margin-bottom:12px;">별도 비용 안내</h3>
<table class="cost-table">
<thead>
<tr>
<th>항목</th>
<th>예상 비용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>AI API 사용료</strong></td>
<td>월 1~3만원</td>
<td>Claude API (검색 건수에 따라 변동), 고객 부담</td>
</tr>
<tr>
<td><strong>서버 비용 (VPS)</strong></td>
<td>월 2~5만원</td>
<td>고객 부담 또는 쟁승메이드 인프라 사용 협의 가능</td>
</tr>
<tr>
<td><strong>환율 API</strong></td>
<td>무료~월 1만원</td>
<td>일일 요청 횟수에 따라 무료 플랜 가능</td>
</tr>
<tr>
<td><strong>프록시 서비스</strong></td>
<td>월 1~3만원</td>
<td>크롤링 안정성 확보용 (선택사항)</td>
</tr>
</tbody>
</table>
<div class="context-box" style="margin-bottom:0;">
<p>
<strong>참고:</strong> 위 별도 비용은 운영 단계에서 발생하는 비용으로,
개발비와는 별도입니다. 서버 환경은 고객의 기존 인프라 활용 여부에 따라 협의합니다.
</p>
</div>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 6. TECH STACK -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 06</div>
<h2 class="section-title">기술 <span class="accent">스택</span></h2>
<div class="section-divider"></div>
<p class="section-desc">
검증된 기술 스택으로 안정성과 확장성을 확보합니다.
모든 구성 요소는 Docker 기반으로 배포하여 환경 의존성을 최소화합니다.
</p>
<div class="tech-grid">
<div class="tech-item">
<div class="t-cat">Frontend</div>
<div class="t-name">Next.js 16 + Tailwind CSS</div>
</div>
<div class="tech-item">
<div class="t-cat">Backend</div>
<div class="t-name">API Routes + BullMQ + Redis</div>
</div>
<div class="tech-item">
<div class="t-cat">Crawler</div>
<div class="t-name">Playwright (Stealth Mode)</div>
</div>
<div class="tech-item">
<div class="t-cat">AI</div>
<div class="t-name">Claude API (Tool Use, 구조화 출력)</div>
</div>
<div class="tech-item">
<div class="t-cat">DB</div>
<div class="t-name">PostgreSQL</div>
</div>
<div class="tech-item">
<div class="t-cat">Queue</div>
<div class="t-name">BullMQ + Redis</div>
</div>
<div class="tech-item">
<div class="t-cat">Deploy</div>
<div class="t-name">Docker Compose (VPS)</div>
</div>
<div class="tech-item">
<div class="t-cat">External</div>
<div class="t-name">eBay API / 환율 API</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 7. SAFETY -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 07</div>
<h2 class="section-title">계정 안전성 <span class="accent">보장</span></h2>
<div class="section-divider"></div>
<p class="section-desc">
이베이 셀러 계정의 안전은 최우선 사항입니다.
아래 4가지 원칙으로 계정 리스크를 완전히 차단합니다.
</p>
<div class="safety-grid">
<div class="safety-card">
<div class="s-icon">&#128274;</div>
<div class="s-title">eBay 공식 API만 사용</div>
<div class="s-desc">
이베이 사이트는 절대 크롤링하지 않습니다. 리스팅 등록, 카테고리 조회, Fitment 업로드 등
모든 이베이 연동은 공식 API를 통해서만 수행합니다.
</div>
</div>
<div class="safety-card">
<div class="s-icon">&#128737;</div>
<div class="s-title">크롤링 안전 장치</div>
<div class="s-desc">
외부 부품 사이트 크롤링 시 요청 간격 제한(Rate Limiting), IP 로테이션 프록시,
User-Agent 랜덤화 등을 적용하여 타겟 사이트의 차단을 방지합니다.
</div>
</div>
<div class="safety-card">
<div class="s-icon">&#9989;</div>
<div class="s-title">Fitment 소스 기반 검증</div>
<div class="s-desc">
AI가 임의로 호환 차종을 생성하지 않습니다. 반드시 실제 소스 데이터를 기반으로 수집하며,
복수 소스 교차검증을 통해 정확도를 확보합니다.
</div>
</div>
<div class="safety-card">
<div class="s-icon">&#128200;</div>
<div class="s-title">신뢰도 레벨 표시</div>
<div class="s-desc">
모든 자동 수집 데이터에 신뢰도 레벨을 부여합니다.
셀러가 직접 판단할 수 있도록 데이터의 출처와 검증 상태를 투명하게 공개합니다.
</div>
</div>
</div>
<table class="confidence-table">
<thead>
<tr>
<th>신뢰도</th>
<th>조건</th>
<th>셀러 액션</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge-high">HIGH</span></td>
<td>2개 이상 소스에서 일치하는 데이터</td>
<td>바로 사용 가능</td>
</tr>
<tr>
<td><span class="badge-medium">MEDIUM</span></td>
<td>1개 소스에서만 확인된 데이터</td>
<td>확인 후 사용 권장</td>
</tr>
<tr>
<td><span class="badge-low">LOW</span></td>
<td>AI 추정 데이터 (소스 미확인)</td>
<td>반드시 수동 확인 필요</td>
</tr>
</tbody>
</table>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 8. NOTES -->
<!-- ══════════════════════════════════════════════ -->
<div class="section">
<div class="section-number">SECTION 08</div>
<h2 class="section-title"><span class="accent">유의</span>사항</h2>
<div class="section-divider"></div>
<ul class="notes-list">
<li>
<span class="n-num">1</span>
<span>
<strong>추가 기능 별도 견적:</strong>
본 제안서에 명시된 기능 범위 외의 추가 요청은 별도 견적을 통해 진행합니다.
범위 변경 시 일정 및 비용이 조정될 수 있습니다.
</span>
</li>
<li>
<span class="n-num">2</span>
<span>
<strong>변경 요청(CR) 정책:</strong>
패키지별 무료 수정 횟수 이후의 변경 요청은 건당 별도 협의합니다.
단순 버그 수정은 AS 기간 내 무료로 처리됩니다.
</span>
</li>
<li>
<span class="n-num">3</span>
<span>
<strong>AI 정확도:</strong>
AI 데이터 추출 정확도 목표는 90% 이상입니다. 100% 정확도를 보장하지는 않으며,
최종 리스팅 등록 전 사용자의 확인을 권장합니다.
지속적인 피드백을 통해 정확도를 개선합니다.
</span>
</li>
<li>
<span class="n-num">4</span>
<span>
<strong>크롤링 대상 사이트 변동:</strong>
타겟 사이트의 구조 변경이나 접근 차단 시 대응 개발이 필요할 수 있습니다.
AS 기간 내에는 무료로 대응하며, 이후에는 별도 협의합니다.
</span>
</li>
<li>
<span class="n-num">5</span>
<span>
<strong>데이터 보안:</strong>
고객의 이베이 계정 정보 및 비즈니스 데이터는 암호화하여 저장하며,
프로젝트 종료 후 고객 요청 시 완전 삭제합니다.
</span>
</li>
<li>
<span class="n-num">6</span>
<span>
<strong>견적 유효기간:</strong>
본 견적은 발행일(2026년 4월)로부터 <strong>30일간</strong> 유효합니다.
유효기간 경과 후에는 재견적이 필요할 수 있습니다.
</span>
</li>
</ul>
</div>
<!-- ══════════════════════════════════════════════ -->
<!-- 9. CONTACT -->
<!-- ══════════════════════════════════════════════ -->
<div class="contact-section">
<div class="section-number" style="color:var(--accent);">SECTION 09</div>
<h2 class="section-title">프로젝트 <span style="color:var(--accent);">문의</span></h2>
<p style="font-size:15px;color:var(--gray-400);line-height:1.8;max-width:480px;margin:0 auto 24px;">
프로젝트에 관한 궁금한 점이나 상담을 원하시면 아래 연락처로 편하게 문의해 주세요.
24시간 내 회신 드리겠습니다.
</p>
<div class="contact-info-grid">
<div class="contact-item">
<div class="c-label">담당자</div>
<div class="c-value">박재오</div>
</div>
<div class="contact-item">
<div class="c-label">이메일</div>
<div class="c-value"><a href="mailto:bgg8988@gmail.com">bgg8988@gmail.com</a></div>
</div>
<div class="contact-item">
<div class="c-label">사이트</div>
<div class="c-value"><a href="https://jaengseung-made.com" target="_blank">jaengseung-made.com</a></div>
</div>
</div>
<a href="mailto:bgg8988@gmail.com?subject=[이베이 부품 자동화] 프로젝트 문의" class="contact-cta">
이메일로 문의하기
</a>
<div class="footer-note">
&copy; 2026 JaengseungMade. All rights reserved.<br>
본 문서는 기밀 정보를 포함하고 있으며, 수신인 외 제3자에게 공유하지 마시기 바랍니다.
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink