📱 페이지 구조 설계서

셀러들의 비밀무기 셀러허브 (SellerHub) - 명품 플랫폼 분석 솔루션

1. 전체 사이트맵

1-1. 사용자 페이지

🏠 메인 (home.php)

검색창 + 인기 검색어 + 플랫폼별 실시간 인기상품

🔍 검색결과 (search.php)

통합 검색 결과 + 플랫폼 필터 + 가격순/최신순 정렬

📊 가격분석 (price.php)

상품별 플랫폼 가격 비교 + 평균가 + 최저가 표시

🏷️ 브랜드 (brand.php)

브랜드별 인기상품 조회 + 가격대 분석

📈 트렌드 (trend.php)

최근 인기 상승 브랜드 + 카테고리별 동향

👤 마이페이지 (mypage.php)

회원정보 + 이용기간 + 검색 이력 + 즐겨찾기

1-2. 관리자 페이지

📊 대시보드 (admin/index.php)

전체 통계 + 플랫폼 상태 + 회원 현황

👥 회원관리 (admin/members.php)

회원 목록 + 승인/정지 + 유료회원 설정

⚙️ 설정 (admin/settings.php)

AI API 키 + 텔레그램 알림 설정

2. 페이지별 상세 설계

2-1. 메인 페이지 (home.php)

🏠 메인 페이지 핵심 페이지

📐 레이아웃 구조

헤더 (로고 + 사용자 정보 + 로그아웃)
사이드바

• 메인
• 검색
• 가격분석
• 브랜드
• 트렌드
• 마이페이지
🔍 메인 검색창
브랜드명 또는 상품명 입력 → 검색 버튼
🔥 인기 검색어 (TOP 10)
1. 루이비통 스피디 | 2. 샤넬 클래식 | 3. 구찌 마몬트 ...
📦 플랫폼별 인기상품 (가로 스크롤)
[구구스 인기] [크림 인기] [머스트잇 인기] [필웨이 인기]
📈 오늘의 트렌드
가격 하락 상품 | 신규 등록 많은 브랜드 | 검색 급상승

📊 필요 데이터

섹션 데이터 출처 갱신 주기
인기 검색어 DB (search_history 테이블) 실시간 집계
플랫폼별 인기상품 각 플랫폼 인기상품 페이지 크롤링 1시간마다
오늘의 트렌드 DB 분석 (가격 변동, 신규 등록) 3시간마다

⚡ 사용자 액션

검색어 입력
검색 버튼 클릭
search.php로 이동

2-2. 검색 결과 페이지 (search.php)

🔍 검색 결과 페이지 핵심 페이지

📐 레이아웃 구조

검색창 (키워드 표시) + 검색 옵션
필터 영역

플랫폼
☑ 구구스
☑ 크림
☑ 머스트잇
☑ 필웨이
☑ 캉카스
☐ 트렌비
☐ 리본즈

가격대
최소: [ ]
최대: [ ]

상태
☑ 판매중
☐ 판매완료
📊 검색 요약
"루이비통 스피디" 검색 결과: 총 247개 | 평균가: 1,850,000원 | 최저가: 980,000원
🔢 정렬 옵션
[최신순 ▼] [가격낮은순] [가격높은순] [플랫폼별]
📦 상품 그리드 (4열)
상품1
1,200,000원
구구스
상품2
1,350,000원
크림
상품3
1,180,000원
머스트잇
상품4
1,450,000원
필웨이
📄 페이지네이션
[◀ 이전] [1] [2] [3] [4] [5] [다음 ▶]

⚡ 검색 프로세스

키워드 입력
5개 플랫폼 동시 검색
결과 통합/중복 제거
정렬 후 표시

📊 상품 카드 표시 정보

항목 데이터 수집 가능 여부
상품 이미지 썸네일 URL ✅ 가능
상품명 브랜드 + 모델명 ✅ 가능
가격 판매가 ✅ 가능
플랫폼 출처 사이트명 ✅ 가능
등급/상태 S급, A급 등 ⚠️ 일부 가능 (구구스만)
판매량 월 판매 수량 ❌ 불가능 (비공개)
찜 수 관심 수 ⚠️ 일부 가능 (일부 플랫폼만)

2-3. 가격 분석 페이지 (price.php)

📊 가격 분석 페이지 중요 기능

📐 레이아웃 구조

🔍 상품 선택
검색 결과에서 상품 클릭 시 이동 또는 직접 검색
📈 플랫폼별 가격 비교 차트
[플랫폼별 가격 막대 그래프]
구구스: 1,200,000원 | 크림: 1,350,000원 | 머스트잇: 1,180,000원
📊 가격 통계
• 평균가: 1,243,000원
• 최저가: 980,000원 (필웨이)
• 최고가: 1,450,000원 (크림)
• 가격 편차: 470,000원
📦 동일 상품 리스트
같은 모델의 다른 매물들 (플랫폼별)

💡 핵심 가치

셀러에게 "어느 플랫폼에서 사서 어디에 팔면 마진이 남는지"를 보여주는 것이 핵심

2-4. 브랜드 페이지 (brand.php)

🏷️ 브랜드 분석 페이지 중요 기능

📐 레이아웃 구조

🔍 브랜드 선택
[루이비통] [샤넬] [구찌] [프라다] [에르메스] [버버리] [보테가베네타] ...
📊 브랜드 통계
• 총 매물 수: 1,247개
• 평균 가격대: 1,500,000 ~ 3,000,000원
• 가장 많은 카테고리: 가방 (68%)
🔥 인기 모델 TOP 10
1. 스피디 25 | 2. 네버풀 MM | 3. 알마 BB ...
📦 최신 매물
[상품 그리드]

3. 공통 컴포넌트 설계

3-1. 상품 카드 컴포넌트

📦 상품 카드 (ProductCard) 재사용 컴포넌트
상품 이미지
(280x280)
구구스
Louis Vuitton
스피디 반둘리에 25 모노그램
1,200,000원
등급: A+ | 등록: 2일 전

표시 항목

항목 필수 여부 비고
썸네일 이미지 필수 280x280 크기로 리사이징
플랫폼 뱃지 필수 구구스/크림/머스트잇/필웨이/캉카스
브랜드명 필수 영문 표기
상품명 필수 2줄 이내로 자름
가격 필수 원화 표기, 천 단위 콤마
등급 선택 구구스만 제공 (S/A+/A/B)
등록일 선택 "N일 전" 형식

3-2. 필터 컴포넌트

🔧 필터 패널 (FilterPanel) 재사용 컴포넌트
필터 유형 옵션 기본값
플랫폼 선택 구구스, 크림, 머스트잇, 필웨이, 캉카스 전체 선택
가격대 최소~최대 (슬라이더 또는 입력) 제한 없음
브랜드 브랜드 선택 (자동완성) 전체
카테고리 가방/지갑/시계/의류/악세서리 전체
정렬 최신순/가격낮은순/가격높은순 최신순

4. 데이터 흐름 설계

4-1. 검색 데이터 흐름

1. 사용자 검색어 입력
search.php?q=루이비통 스피디
2. PHP에서 검색 처리
SearchIntegration::search($keyword)
3. 5개 플랫폼 병렬 호출
curl_multi_exec()
4. 결과 통합 및 정규화
ResultIntegration::merge()
5. JSON 응답 반환
json_encode($results)
6. 프론트엔드 렌더링
상품 카드 그리드 표시

4-2. 정규화된 상품 데이터 구조

{
  "id": "gugus_12345",              // 플랫폼_상품번호
  "platform": "gugus",              // 플랫폼 코드
  "platform_name": "구구스",         // 플랫폼 한글명
  "product_id": "12345",            // 원본 상품 ID
  "url": "https://...",             // 상품 상세 URL
  "image": "https://...",           // 썸네일 이미지 URL
  "brand": "Louis Vuitton",         // 브랜드 영문명
  "brand_kr": "루이비통",            // 브랜드 한글명
  "name": "스피디 반둘리에 25",       // 상품명
  "price": 1200000,                 // 가격 (숫자)
  "price_formatted": "1,200,000원", // 가격 (포맷팅)
  "category": "가방",                // 카테고리
  "grade": "A+",                    // 등급 (null if 없음)
  "created_at": "2025-12-03",       // 등록일
  "status": "available"             // 판매중/판매완료
}
      

5. 반응형 설계 (모바일)

5-1. 브레이크포인트

구분 너비 그리드 열 수
PC 1200px 이상 4열
태블릿 768px ~ 1199px 3열
모바일 767px 이하 2열

5-2. 모바일 특화 UI

6. 개발 우선순위

순위 페이지/기능 예상 소요 의존성
1 검색 결과 페이지 (search.php) 3일 플랫폼 모듈 완료
2 메인 페이지 (home.php) 2일 검색 페이지 완료
3 상품 카드 컴포넌트 1일 없음
4 가격 분석 페이지 (price.php) 2일 검색 페이지 완료
5 브랜드 페이지 (brand.php) 2일 DB 브랜드 데이터
6 트렌드 페이지 (trend.php) 2일 데이터 축적 후
📌 핵심 포인트:

먼저 검색 → 결과 표시가 정상 작동해야 다른 기능 개발 가능.
플랫폼별 데이터 수집이 핵심이므로, 이것부터 완성해야 함.

7. 페이지 구조 상세 분석

7-1. 파일 구조 및 역할 분석

📁 사용자 페이지 파일 구조

파일명 역할 연관 파일 핵심 기능
home.php 메인 진입점 home.css, home_mobile.css, home.js 검색창, 인기 검색어, 플랫폼별 인기상품 표시
search.php 검색 결과 표시 search.css, search_mobile.css, search.js 통합 검색, 필터, 정렬, 상품 그리드, 가격비교
price.php 가격 비교 분석 price.css, price_mobile.css, price.js 플랫폼별 가격 차트, 평균가/최저가/최고가, 동일 상품 비교
brand.php 브랜드별 분석 brand.css, brand_mobile.css, brand.js 브랜드 선택, 통계, 인기 모델, 최신 매물
trend.php 트렌드 분석 trend.css, trend_mobile.css, trend.js 인기 상승 브랜드, 가격 변동, 검색 급상승
mypage.php 사용자 정보 mypage.css, mypage_mobile.css, mypage.js 회원정보, 이용기간, 검색 이력, 즐겨찾기

7-2. 검색 결과 페이지 상세 분석

🔍 검색 결과 페이지 핵심 기능 분석

1. 검색 프로세스 상세

단계별 처리 흐름:
1. 사용자 검색어 입력 (home.php 또는 search.php 상단)
2. AJAX 요청: /api/search.php?q={키워드}
3. PHP 백엔드: SearchIntegration::search() 호출
4. 플랫폼별 병렬 검색 (구구스, 크림, 머스트잇, 필웨이, 캉카스)
5. 결과 정규화: ResultNormalizer::normalize()
6. 중복 제거 및 그룹화 (동일 상품 매칭)
7. JSON 응답 반환
8. 프론트엔드: 상품 카드 그리드 렌더링

2. 필터 기능 상세

필터 항목 구현 방법 데이터 소스 비고
플랫폼 선택 체크박스 (다중 선택) 검색 결과에서 플랫폼 필드 필터링 클라이언트 사이드 필터링 (빠른 응답)
가격대 슬라이더 또는 입력 필드 검색 결과에서 price 필드 필터링 최소/최대 범위 설정
브랜드 드롭다운 (자동완성) 검색 결과에서 brand 필드 추출 후 중복 제거 동적 생성 (검색 결과 기반)
카테고리 드롭다운 검색 결과에서 category 필드 가방/지갑/시계/의류/악세서리
등급 (구구스) 체크박스 grade 필드가 있는 상품만 S, A+, A, B 등
판매 상태 라디오 버튼 status 필드 (available/sold_out) 판매중/판매완료

3. 정렬 기능 상세

정렬 옵션 정렬 기준 우선순위
최신순 created_at 필드 내림차순 기본값
가격 낮은순 price 필드 오름차순 가격비교 핵심
가격 높은순 price 필드 내림차순 -
플랫폼별 platform 필드 그룹화 후 가격순 -
인기순 (있는 경우) wish_count 또는 review_count 내림차순 데이터 있는 플랫폼만

7-3. 가격 분석 페이지 상세 분석

📊 가격 분석 페이지 핵심 기능

1. 상품 선택 방법

2. 가격 비교 데이터 수집

데이터 항목 수집 방법 표시 방법
플랫폼별 가격 동일 상품명 매칭 후 플랫폼별 그룹화 막대 그래프 또는 테이블
평균가 모든 플랫폼 가격의 평균 계산 숫자 표시 + 기준선
최저가 가격 중 최소값 강조 표시 (녹색)
최고가 가격 중 최대값 강조 표시 (빨간색)
가격 편차 최고가 - 최저가 차이 금액 표시
등급별 가격 (구구스) 등급 필드로 그룹화 등급별 가격 범위 표시

3. 동일 상품 매칭 알고리즘

매칭 기준 (우선순위):
1. 브랜드명 일치 (영문명 또는 한글명)
2. 상품명 유사도 (Levenshtein 거리 또는 키워드 매칭)
3. 카테고리 일치
4. 가격 범위 (비슷한 가격대)

주의사항: 등급이 다른 경우(구구스) 별도 그룹으로 분리

7-4. 상품 카드 컴포넌트 상세 분석

📦 상품 카드 데이터 구조

필수 표시 항목 (모든 플랫폼 공통)

항목 데이터 필드 표시 형식 폴백 처리
이미지 image 280x280px, object-fit: contain 이미지 로드 실패 시 placeholder SVG
플랫폼 뱃지 platform_name 작은 배지 (상단 좌측) 플랫폼 코드로 색상 구분
브랜드명 brand 또는 brand_kr 작은 회색 텍스트 brand_kr 우선, 없으면 brand
상품명 name 2줄 이내, 말줄임표 처리 없으면 "상품명 없음"
가격 price 큰 빨간색 숫자, 천 단위 콤마 없으면 "가격 문의"

선택 표시 항목 (플랫폼별 차이)

항목 데이터 필드 표시 조건 표시 형식
등급 grade 구구스만 (null이 아닌 경우) 작은 배지 (S/A+/A/B)
등록일 created_at 데이터 있는 경우 "N일 전" 형식
찜 수 wish_count 크림, 머스트잇, 필웨이, 구구스 작은 아이콘 + 숫자
리뷰 수 review_count 머스트잇, 필웨이 작은 아이콘 + 숫자
조회수 view_count 필웨이만 작은 아이콘 + 숫자

클릭 이벤트 처리

7-5. 데이터 흐름 및 API 설계

🔌 API 엔드포인트 설계

엔드포인트 메서드 파라미터 응답 형식 역할
/api/search.php GET q (키워드), page (페이지번호) JSON 통합 검색 결과 반환
/api/price_compare.php GET product_id 또는 q (키워드) JSON 동일 상품 플랫폼별 가격 비교
/api/popular_keywords.php GET limit (개수, 기본 10) JSON 인기 검색어 반환
/api/platform_popular.php GET platform (플랫폼명), limit (개수) JSON 플랫폼별 인기상품 반환
/api/product_detail.php GET platform, product_id JSON 상품 상세 정보 (찜 수, 판매량 등)

검색 API 응답 구조 예시

{
  "success": true,
  "keyword": "루이비통 스피디",
  "total": 247,
  "platforms": {
    "gugus": 45,
    "kream": 62,
    "mustit": 38,
    "feelway": 52,
    "kangkas": 50
  },
  "price_summary": {
    "average": 1850000,
    "min": 980000,
    "max": 2450000
  },
  "results": [
    {
      "id": "gugus_12345",
      "platform": "gugus",
      "platform_name": "구구스",
      "product_id": "12345",
      "url": "https://www.gugus.co.kr/goods/viewGoods?goodsNo=12345",
      "image": "https://image.gugus.co.kr/...",
      "brand": "Louis Vuitton",
      "brand_kr": "루이비통",
      "name": "스피디 반둘리에 25 모노그램",
      "price": 1200000,
      "price_formatted": "1,200,000원",
      "category": "가방",
      "grade": "A+",
      "created_at": "2025-12-03",
      "status": "available",
      "wish_count": 24,
      "review_count": null,
      "view_count": null
    }
  ]
}
          

7-6. 성능 최적화 전략

⚡ 성능 개선 방안

1. 검색 결과 캐싱

2. 이미지 최적화

3. 병렬 처리

4. 페이지네이션

7-7. 보안 및 접근 제어

🔒 보안 고려사항

항목 구현 방법 비고
세션 관리 PHP 세션 사용, 세션 타임아웃 설정 30분 비활성 시 자동 로그아웃
CSRF 방어 모든 POST 요청에 CSRF 토큰 검증 토큰은 세션에 저장
SQL Injection 방어 PDO Prepared Statement 사용 모든 DB 쿼리에 적용
XSS 방어 출력 시 htmlspecialchars() 사용 모든 사용자 입력 데이터
접근 제어 비승인 회원 접근 차단 모든 페이지 상단에 세션 체크
API Rate Limiting IP별 요청 횟수 제한 분당 60회 제한 (선택사항)
📌 상세 분석 요약:

1. 검색 결과 페이지가 가장 핵심이며, 필터/정렬 기능이 가격비교의 핵심입니다.
2. 상품 카드 컴포넌트는 재사용 가능하도록 설계하여 모든 페이지에서 활용합니다.
3. 가격 분석 페이지는 동일 상품 매칭 알고리즘이 핵심입니다.
4. 성능 최적화를 위해 캐싱, 이미지 최적화, 병렬 처리를 고려해야 합니다.
5. 보안은 세션 관리, CSRF 방어, SQL Injection 방어가 필수입니다.