🚀 개발 로드맵

셀러들의 비밀무기 셀러허브 (SellerHub) - MVP 우선 접근법 - 핵심 기능부터 빠르게 완성하고 점진적 확장

📅 전체 타임라인 (2주 MVP)

Phase	기간	핵심 목표	결과물
Phase 1	1~3일	검색 기능 완성	5개 플랫폼 통합 검색 동작
Phase 2	4~7일	UI 구현	검색 페이지 + 상품 카드 완성
Phase 3	8~10일	핵심 기능 추가	가격 비교 + 필터 + 정렬
Phase 4	11~14일	완성 및 배포	회원 시스템 + 관리자 + 배포

🔧 Phase 1: 검색 백엔드 완성

Day 1~3 (3일)

✓

플랫폼 모듈 검증

구구스, 머스트잇, 필웨이, 크림, 캉카스 5개 모듈 동작 확인

완료됨
통합 검색 API 엔드포인트 생성

/api/search.php?q={키워드} → 5개 플랫폼 병렬 검색 후 JSON 반환

4시간
결과 정규화(Normalize)

각 플랫폼 데이터를 동일한 형식으로 변환 (상품ID, 이름, 가격, 이미지, 플랫폼명)

4시간
에러 처리 및 타임아웃

개별 플랫폼 실패 시에도 다른 플랫폼 결과는 반환, 플랫폼별 5초 타임아웃

2시간
테스트 페이지 생성

간단한 폼 → 검색 → JSON 결과 확인 페이지

2시간

📁 생성할 파일

📁 /api
  📄 search.php ← 통합 검색 API
  📄 test_search.php ← 테스트 페이지
📁 /includes
  📄 SearchIntegration.php ← 통합 검색 클래스
  📄 ResultNormalizer.php ← 결과 정규화 클래스

📝 검색 API 기본 구조

                    // /api/search.php
                    <?php
                    header('Content-Type: application/json; charset=utf-8');

                    $keyword = $_GET['q'] ?? '';
                    if (empty($keyword)) {
                    echo json_encode(['error' => '키워드를
                        입력하세요']);
                    exit;
                    }

                    // 5개 플랫폼 병렬 검색
                    $platforms = ['gugus', 'mustit',
                    'feelway', 'kream', 'kangkas'];
                    $results = SearchIntegration::search($keyword, $platforms);

                    // 결과 정규화
                    $normalized = ResultNormalizer::normalize($results);

                    echo json_encode([
                    'success' => true,
                    'keyword' => $keyword,
                    'total' => count($normalized),
                    'results' => $normalized
                    ]);
                

🎨 Phase 2: 프론트엔드 UI

Day 4~7 (4일)

기본 레이아웃 (사이드바 + 메인)

sidebar.php + 메인 콘텐츠 영역 구조

4시간
메인 페이지 (home.php)

검색창 + 인기 검색어 표시

4시간
검색 결과 페이지 (search.php)

검색창 + 검색 요약 + 상품 그리드

8시간
상품 카드 컴포넌트

이미지 + 플랫폼 뱃지 + 브랜드 + 상품명 + 가격

4시간
AJAX 검색 연동

검색 버튼 클릭 → API 호출 → 결과 렌더링

4시간
로딩 상태 표시

스피너 + 플랫폼별 로딩 상태 표시

2시간
반응형 CSS (모바일)

768px 이하에서 2열 그리드

4시간

📁 생성할 파일

📄 home.php ← 메인 페이지
📄 search.php ← 검색 결과 페이지
📁 /includes
  📄 sidebar.php ← 공통 사이드바
  📄 header.php ← 공통 헤더
📁 /css
  📄 common.css ← 공통 스타일
  📄 search.css ← 검색 페이지 스타일
  📄 product-card.css ← 상품 카드 스타일
📁 /js
  📄 search.js ← 검색 기능 JS

💡 Tip: CSS는 "구구스 디자인 참고용" 폴더의 스타일을 화이트톤으로 변환하여 사용하면 빠름

⚡ Phase 3: 핵심 기능

Day 8~10 (3일)

필터 패널

플랫폼 선택, 가격대, 브랜드 필터

4시간
정렬 기능

최신순, 가격 낮은순, 가격 높은순

2시간
페이지네이션

100개 이상 결과 시 페이지 나누기

3시간
가격 비교 기능

동일 상품 플랫폼별 가격 표시 (평균가, 최저가, 최고가)

6시간
상품 상세 모달

상품 클릭 시 모달로 상세 정보 + 플랫폼별 가격 표시

4시간
검색 이력 저장

DB에 검색 키워드/시간 저장 → 인기 검색어 집계

3시간

📁 생성할 파일

📄 price.php ← 가격 비교 페이지
📁 /api
  📄 popular_keywords.php ← 인기 검색어 API
📁 /js
  📄 filter.js ← 필터 기능
  📄 modal.js ← 모달 기능

🚀 Phase 4: 완성 및 배포

Day 11~14 (4일)

로그인/회원가입

기본 회원 시스템 (계획서 스펙대로)

6시간
관리자 페이지 (기본)

회원 목록 + 승인/정지 기능만

4시간
접근 제어

비승인 회원 접근 차단, 세션 체크

2시간
에러 처리 및 로깅

검색 실패, 서버 에러 등 처리

3시간
성능 최적화

캐싱, 이미지 지연 로딩

3시간
배포 및 테스트

VPS 배포, 전체 기능 테스트

4시간

⚠️ MVP 범위 제한:

AI 분석 기능 → 2차 개발로 연기
텔레그램 알림 → 2차 개발로 연기
트렌비/리본즈 → 2차 개발로 연기
결제 시스템 → 2차 개발로 연기

🎯 지금 바로 시작하기

Step 1: 검색 API 테스트

먼저 기존 "구구스 디자인 참고용" 폴더의 플랫폼 모듈이 정상 동작하는지 확인하세요.

                // 테스트 순서
                1. 구구스 검색 테스트: /api/collection_worker.php 확인
                2. 통합 검색 API 생성: /api/search.php 신규 작성
                3. 브라우저에서 테스트: localhost/api/search.php?q=루이비통
            

Step 2: 간단한 UI 먼저

복잡한 디자인보다 동작하는 UI를 먼저 만드세요.

                // 가장 간단한 검색 페이지
                <input type="text" id="keyword" placeholder="검색어 입력">
                <button onclick="search()">검색</button>
                <div id="results"></div>

                <script>
                function search() {
                const keyword = document.getElementById('keyword').value;
                fetch('/api/search.php?q=' + encodeURIComponent(keyword))
                .then(res => res.json())
                .then(data => {
                document.getElementById('results').innerHTML =
                data.results.map(item => `
                <div class="product-card">
                <img src="${item.image}">
                <div>${item.name}</div>
                <div>${item.price_formatted}</div>
                </div>
                `).join('');
                });
                }
                </script>
            

✅ 마일스톤 체크포인트

체크포인트	완료 조건	예상 완료일
CP1: 검색 동작	5개 플랫폼 검색 후 JSON 결과 반환됨	Day 3
CP2: UI 동작	검색 → 상품 카드 그리드로 표시됨	Day 7
CP3: 필터 동작	플랫폼/가격 필터 + 정렬 동작함	Day 10
CP4: MVP 완료	로그인 + 검색 + 필터 모두 동작, 배포 완료	Day 14

🚀 핵심: 완벽보다 완성!

먼저 동작하는 것을 만들고, 사용하면서 개선하세요.
판매량 분석 같은 불가능한 기능보다, 가격 비교/통합 검색에 집중하세요.