셀러들의 비밀무기 셀러허브 (SellerHub) 개발 상세 계획

홈페이지를 만드는 이유:

• 여러 플랫폼의 데이터를 한 곳에서 통합 조회하여 소싱 시간 단축.
• 판매량, 찜 수, 가격 등 다양한 기준으로 소팅하여 사입할만한 제품을 빠르게 발견.
• AI 기반 트렌드 분석으로 최신 인기 상품을 선제적으로 파악.
• 각 플랫폼별 평균가격, 최근 판매량 등 상세한 분석 데이터 제공으로 의사결정 지원.
• 회원제 폐쇄형 시스템으로 경쟁사에게 노출되지 않는 내부 소싱 도구로 활용.
• 크림의 일반판매/보관판매 가격, 네이버가격비교 해외직구 제외 등 플랫폼별 특수 정보를 통합 제공.

데이터/품질 방향:

• 정확도 및 퀄리티 최우선: DB 수집, 가격분석, 트렌드분석, 상세정보 등 모든 데이터는 100% 정확한 정보만 제공.
• 검증된 정보만 제공: 2025년 하반기부터 오늘까지의 키워드 검색량, 관련정보들을 상세 분석 후 100% 검증된 결과만 제공.

UX/구조 설계:

• 사용자 편의성: 사용자가 쓰기 편하게 모든 구조/화면을 직관적으로 맞춤.
• 한 화면 통합 제공: 상품 1개(브랜드명 또는 모델명) 검색 시 각 플랫폼별 평균가격, 최근 판매량, 관련 인기상품(비슷한 카테고리/모델명) 추천까지 한 화면에서 제공.

"여러 명품/패션 플랫폼의 판매·가격·트렌드 데이터를 모아서,
잘 팔리는 상품과 뜨는 브랜드를 AI로 분석해 보여주는
'도매/사입용 소싱 인텔리전스 사이트'를 만든다."

• 프론트엔드: HTML, CSS, jQuery, Vanilla JS
• 백엔드: PHP (MVC 강제 X, 모듈 분리 중심)
• 데이터베이스: MariaDB (정규화 + 집계용 테이블 병행)
• 서버: Ubuntu VPS + Apache, 실시간 검색 처리

/root
 ├── home.php                # 메인 페이지 (의미있는 파일명)
 ├── search.php              # 검색 결과 페이지 (의미있는 파일명)
 ├── brand.php               # 브랜드 인기상품 페이지 (의미있는 파일명)
 ├── trend.php               # 트렌드 분석 페이지 (의미있는 파일명)
 ├── mypage.php              # 마이페이지 (의미있는 파일명)
 ├── register.php            # 회원가입 페이지 (의미있는 파일명)
 ├── login.php               # 로그인 페이지 (의미있는 파일명)
 ├── /m4p8q                 # 사이드바 전용 PHP (난수 폴더명)
 ├── /t3n7v                 # CSS 파일들 (난수 폴더명)
 │     ├── /x9k2m          # 공통 CSS (난수 파일명)
 │     ├── /p7w1s          # 페이지별 PC용 CSS (난수 폴더명)
 │     ├── /k5m9r          # 페이지별 모바일 CSS (난수 폴더명)
 │     ├── /m4p8q          # 사이드바 CSS (난수 폴더명)
 │     └── ...
 ├── /j8f2h                 # JS 파일들 (난수 폴더명)
 │     ├── /x9k2m          # 공통 JS (난수 파일명)
 │     ├── /p7w1s          # 페이지별 JS (난수 폴더명)
 │     ├── /m4p8q          # 사이드바 전용 JS (난수 폴더명)
 │     └── ...
 ├── /p7q3w                 # PHP 모듈 파일들 (난수 폴더명)
 │     ├── /db             # DB 연결 (난수 파일명)
 │     ├── /util           # 공통 유틸 함수 (난수 파일명)
 │     ├── /auth           # 로그인/회원 승인 (난수 파일명)
 │     ├── /search         # 검색 통합 처리 (난수 파일명)
 │     ├── /platform       # 플랫폼별 검색 모듈 (난수 폴더명)
 │     │     ├── /naver    # 네이버가격비교 모듈 (난수 파일명)
 │     │     ├── /mustit   # 머스트잇 모듈 (난수 파일명)
 │     │     ├── /philway  # 필웨이 모듈 (난수 파일명)
 │     │     ├── /trendy   # 트렌비 모듈 (난수 파일명)
 │     │     ├── /ribbons  # 리본즈 모듈 (난수 파일명)
 │     │     ├── /gugus    # 구구스 모듈 (난수 파일명)
 │     │     ├── /kream    # 크림 모듈 (난수 파일명)
 │     │     └── /kangkas  # 캉카스 모듈 (난수 파일명)
 │     ├── /brand          # 브랜드 인기상품 모듈 (난수 파일명)
 │     └── ...
 ├── /a5d9k                 # 관리자 페이지 전용 폴더 (난수 폴더명)
 │     ├── /x9k2m          # 관리자 페이지 PHP (난수 파일명)
 │     ├── /m4p8q          # 관리자 사이드바 전용 PHP (난수 파일명)
 │     ├── /t3n7v          # 관리자 페이지 CSS (난수 파일명)
 │     ├── /m4p8q          # 관리자 사이드바 CSS (난수 파일명)
 │     ├── /j8f2h          # 관리자 페이지 JS (난수 파일명)
 │     ├── /m4p8q          # 관리자 사이드바 JS (난수 파일명)
 │     └── /p7q3w          # 관리자 기능 PHP 모듈 (난수 파일명)
 │           ├── /ai       # AI 설정 모듈 (난수 파일명)
 │           └── /telegram # 텔레그램 알림 모듈 (난수 파일명)
 └── /l2r6t                 # 로그 파일들 (난수 폴더명)

• 회원가입 요청 → 관리자 페이지에서 목록 확인.
• 관리자가 승인/거절/정지 상태 변경.
• 승인된 계정만 로그인 후 검색 기능 사용 가능.
• 승인 대기/거절 계정은 안내용 전용 페이지로 분기.

• 네이버가격비교 (Naver Price Comparison)
• 머스트잇 (Mustit)
• 필웨이 (Philway)
• 트렌비 (Trendy)
• 리본즈 (Ribbons)
• 구구스 (Gugus)
• 크림 (Kream)
• 캉카스 (Kangkas)

파일 구조:

• 각 페이지는 PHP 파일에 전체 로직 포함 (비즈니스 로직, DB 접근, 권한 체크 등).
• HTML은 껍데기(마크업)만 담당 (레이아웃, 구조만).
• PHP 파일 내에서 HTML 마크업을 직접 작성하거나, 별도 HTML 템플릿을 include하여 사용.

HTML 클래스 네이밍 규칙:

• 각 페이지별로 고유한 클래스명 사용 (페이지 간 클래스명 충돌 방지).
• 각 섹션(section), 컨테이너(container)별로 고유한 클래스명 사용.
• 예시: search-main-header, search-main-input-section, search-result-item-container 등.
• 같은 기능이라도 페이지가 다르면 다른 클래스명 사용 (예: 검색 메인 페이지의 버튼과 결과 페이지의 버튼은 다른 클래스명).

CSS 구조 원칙:

• 각 클래스를 별도의 개별 스타일로 구성.
• 1개 섹션이나 1개 컨테이너에 대한 스타일은 해당 클래스에만 적용되도록 작성.
• 공통 스타일은 공통 CSS 파일에, 페이지별 스타일은 페이지 전용 CSS 파일에 분리.
• 인라인 스타일 사용 금지 (CSS 파일에만 정의).
• 클래스명은 의미 있는 이름 사용 (난수화는 파일명에만 적용, 클래스명은 개발 편의를 위해 의미 있는 이름 사용).

JavaScript 규칙:

• 주석 절대 금지: JS 파일 내에 주석(개발용 주석 포함)을 달지 않음.
• 변수명, 함수명은 난독화 스타일로 작성 (의미 없는 이름 사용).

아이콘 및 UI 라이브러리:

• 아이콘 대신 부스트트랩(Bootstrap) 활용.
• 부스트트랩의 아이콘, 컴포넌트, 유틸리티 클래스를 적극 활용.

반응형 브레이크포인트:

• PC 버전: 1200px 이상
• 태블릿: 992px ~ 1199px
• 큰 폰: 768px ~ 991px
• 중간 폰: 576px ~ 767px
• 작은 폰: 575px 이하

모바일 디자인 원칙:

• 모바일에서는 한 화면에 최대한 많은 정보가 담기도록 설계.
• 상품 카드:
  • 무조건 1열 2그리드 또는 3그리드로 가로 배치.
  • 세로 스크롤 방식이 아닌 가로 그리드 배치.
• 텍스트 및 섹션:
  • 텍스트나 섹션도 가로로 배치하여 공간 효율성 극대화.
  • 가능한 한 세로 스크롤을 최소화하고 가로 레이아웃 활용.

디자인 스타일 제한:

• AI 같은 컬러 금지: 과도하게 밝거나 눈에 띄는 AI 스타일 컬러 사용 금지.
• 애니메이션 스타일 금지: 과도한 애니메이션, 트랜지션 효과 사용 금지.
• 심플하고 실용적인 디자인을 지향.

참고 디자인: 구구스 디자인 참고용 폴더의 스타일을 분석하여, 다크 테마를 화이트톤으로 변환한 고급 부티크 미래지향 테마 적용.

컬러 팔레트 (화이트톤 변환):

• 배경색:
  • 메인 배경: #ffffff (순수 화이트)
  • 섹션 배경: #fafafa, #f5f5f5 (미묘한 그레이 톤)
  • 카드/컨테이너 배경: #ffffff (화이트)
  • 사이드바 배경: #f8f9fa (연한 그레이)
• 텍스트 색상:
  • 주요 텍스트: #1a1a1a, #2c2c2c (다크 그레이)
  • 보조 텍스트: #666666, #808080 (미디엄 그레이)
  • 약한 텍스트: #999999, #b3b3b3 (라이트 그레이)
• 보더 색상:
  • 주요 보더: rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.12) (미묘한 검은색)
  • 호버 보더: rgba(0, 0, 0, 0.2) (약간 진한 검은색)
  • 액센트 보더: rgba(0, 0, 0, 0.15) (중간 톤)
• 액센트 컬러:
  • 주요 액센트: #525252, #737373 (다크 그레이 계열)
  • 강조 색상: #1a1a1a (검은색)
  • 성공/에러: 미묘한 그린/레드 톤 (과도하지 않게)

타이포그래피:

• 폰트 패밀리: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
• 폰트 웨이트: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi-bold)
• 레터 스페이싱: 0.2px ~ 0.5px (미묘한 간격)
• 라인 하이트: 1.4 ~ 1.7 (여유 있는 간격)
• 폰트 사이즈: 11px ~ 18px (작은 사이즈부터 큰 사이즈까지)

레이아웃 및 간격:

• 패딩: 16px ~ 32px (섹션별 적절한 여백)
• 마진: 20px ~ 32px (요소 간 간격)
• 보더 라디우스: 4px, 6px, 8px (작은 값으로 미니멀한 느낌)
• 그리드 갭: 16px ~ 24px (카드 간 간격)

부티크 스타일 요소:

• 미묘한 그림자: box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) ~ 0 4px 12px rgba(0, 0, 0, 0.1)
• 은은한 보더: 1px solid rgba(0, 0, 0, 0.08) ~ rgba(0, 0, 0, 0.12)
• 부드러운 호버 효과: transition: all 0.2s ~ 0.3s ease
• 미묘한 그라데이션: linear-gradient (과도하지 않게)
• backdrop-filter: blur (필요한 경우만, 과도하지 않게)

컴포넌트 스타일:

• 카드/컨테이너:
  • 배경: #ffffff
  • 보더: 1px solid rgba(0, 0, 0, 0.08)
  • 보더 라디우스: 4px ~ 8px
  • 패딩: 24px ~ 32px
  • 호버 시: 보더 색상 약간 진하게, 미묘한 그림자 추가
• 버튼:
  • 배경: #f5f5f5 또는 #ffffff
  • 보더: 1px solid rgba(0, 0, 0, 0.12)
  • 텍스트: #1a1a1a
  • 호버: 배경 #fafafa, 보더 rgba(0, 0, 0, 0.2)
• 입력 필드:
  • 배경: #ffffff
  • 보더: 1px solid rgba(0, 0, 0, 0.12)
  • 포커스: 보더 rgba(0, 0, 0, 0.2), 미묘한 그림자
• 사이드바:
  • 배경: #f8f9fa
  • 보더: 1px solid rgba(0, 0, 0, 0.08)
  • 네비게이션 링크: #666666, 호버 시 #1a1a1a
  • 액티브: #1a1a1a, 왼쪽 보더 강조

미래지향적 요소 (과도하지 않게):

• 미묘한 그라데이션 효과 (배경이나 텍스트에만, 과도하지 않게)
• 부드러운 transition 효과 (0.2s ~ 0.3s)
• backdrop-filter: blur (필요한 경우만, 성능 고려)
• 미묘한 그림자 효과 (깊이감 표현)
• 과도한 애니메이션 금지 (구구스 스타일의 애니메이션은 제외)

구구스 스타일에서 제외할 요소:

• 과도한 그라데이션 애니메이션 (dashboardTitleGlow 등)
• 펄스 애니메이션 (subtlePulse 등)
• 플로우 애니메이션 (sidebarTitleFlow 등)
• 과도한 색상 변화 애니메이션
• 다크 테마 관련 모든 스타일 (화이트톤으로 변환)

적용 원칙:

• 구구스 디자인 참고용 폴더의 레이아웃 구조와 간격, 타이포그래피 스타일을 참고.
• 다크 테마를 화이트톤으로 변환하되, 고급스러운 부티크 느낌 유지.
• 미래지향적 요소는 미묘하게만 적용 (과도한 애니메이션 제외).
• 전체적으로 깔끔하고 미니멀하면서도 고급스러운 느낌을 추구.

입력 필드:

• 아이디:
  • 중복체크 기능 무조건 필수 (실시간 또는 버튼 클릭).
  • 중복체크 완료 전에는 가입 불가.
  • 플레이스홀더: "아이디를 입력하세요"
• 비밀번호:
  • 비밀번호 입력 텍스트박스 1개만 사용 (비밀번호 확인 컨펌 텍스트박스 사용하지 않음).
  • 텍스트박스 오른쪽 끝에 눈 모양 버튼 추가.
  • 눈 모양 버튼 클릭 시 비밀번호 마스킹 해제/적용 토글.
  • 플레이스홀더: "비밀번호를 입력하세요"
• 전화번호:
  • 필수 입력 항목.
  • 플레이스홀더: "전화번호를 입력하세요 (예: 010-1234-5678)"
• 이메일:
  • 선택 입력 항목.
  • 플레이스홀더: "이메일을 입력하세요 (선택)"
• 가입경로:
  • 무조건 입력 필수 항목.
  • 텍스트로 직접 입력 (드롭다운 X).
  • 플레이스홀더: "가입경로를 입력하세요"

플레이스홀더 규칙:

• 모든 텍스트박스는 플레이스홀더 방식으로 텍스트박스 안에서 내용이 나오도록 구현.
• 라벨은 사용하지 않고 플레이스홀더만 사용.

모달 팝업 및 토스팅 메시지:

• 모든 관리자/사용자 페이지에서 일반 팝업(alert, confirm 등) 사용 금지.
• 모든 알림/확인은 모달 팝업 또는 토스팅 메시지로 처리.
• 전역 인스턴스로 선언하여 모든 페이지에서 동일한 방식으로 사용.
• 예시:
  • 성공 메시지: 토스팅 메시지 (하단 또는 상단에 일정 시간 표시 후 자동 사라짐).
  • 확인 필요 메시지: 모달 팝업 (확인/취소 버튼 포함).
  • 에러 메시지: 토스팅 메시지 또는 모달 팝업.
• 사용자 편의성을 최우선으로 하여 직관적이고 일관된 UI 제공.

레이아웃 구조:

• 관리자 페이지도 사이드바 + 메인 컨텐츠 구조로 구성.
• 관리자 사이드바는 별도 PHP 파일로 구성 (일반 사용자 사이드바와 완전 분리).
• 관리자 사이드바 전용 CSS/JS 파일 사용.

주요 기능:

• 회원 관리 (회원 목록, 승인/거절/정지, 유료회원 승인/기간 설정).
• 검색 통계 (검색 빈도, 인기 키워드, 플랫폼별 통계).
• 플랫폼 연동 상태 확인.

관리자 페이지에서 AI 모델 설정:

• AI 모델 선택:
  • GPT (OpenAI) 또는 제미나이 (Google Gemini) 중 하나 선택 가능.
  • 라디오 버튼 또는 드롭다운으로 선택.
  • 선택한 모델이 시스템 전역에서 사용됨.
• API 키 관리:
  • 선택한 AI 모델의 API 키를 입력/수정/저장 가능.
  • API 키는 암호화하여 저장.
  • 저장 후 즉시 적용.
• 설정 페이지: AI 설정과 텔레그램 설정을 한 페이지에서 처리.

회원 신규가입 알림:

• 회원이 신규가입하면 관리자에게 텔레그램 알림 자동 발송.
• 알림 내용: 가입자 아이디, 전화번호, 이메일, 가입경로, 가입일시 등.

관리자 페이지에서 텔레그램 설정:

• 텔레그램 봇 토큰 입력/수정/저장.
• 챗ID 추출 기능:
  • 관리자가 텔레그램 봇과 대화를 시작하면 챗ID를 자동으로 추출.
  • 추출된 챗ID를 저장하여 알림 발송 대상으로 설정.
• 테스트 메시지 발송 기능:
  • 설정한 텔레그램 봇 토큰과 챗ID로 테스트 메시지 발송.
  • 알림 기능이 정상 작동하는지 확인 가능.
• 설정 페이지: AI 설정과 텔레그램 설정을 한 페이지에서 처리.

1단계: 플랫폼별 엔드포인트 및 데이터 수집 방식 조사 (최우선)

• 각 플랫폼(네이버가격비교, 머스트잇, 필웨이, 트렌비, 리본즈, 구구스, 크림, 캉카스)의 검색 API 엔드포인트 확인.
• 공식 API 제공 여부 확인 (API 키 필요 여부, 사용 제한 등).
• 크롤링이 필요한 경우: 검색 URL 패턴, 파라미터 구조, 응답 형식 분석.
• 각 플랫폼별 수집 가능한 데이터 범위 확인:
  • 상품명, 브랜드명, 모델명
  • 가격 정보 (일반판매가, 보관판매가 등)
  • 판매량, 찜 수, 관심 상품 수
  • 상품 이미지 URL
  • 상품 상세 링크
• 네이버가격비교: 해외직구 제외 필터링 방법 확인.
• 크림: 일반판매 가격과 보관판매 평균 가격 수집 방법 확인.

2단계: 법적 리스크 및 이용약관 확인

• 각 플랫폼의 이용약관 확인 (자동 수집 허용 여부).
• robots.txt 확인.
• API 사용 정책 확인 (사용 제한, 비용 등).
• 법적 리스크 평가 및 대응 방안 수립.

3단계: DB 스키마 설계

• 회원 테이블 (아이디, 비밀번호, 전화번호, 이메일, 가입경로, 승인상태, 유료회원 여부, 이용기간 등).
• 검색 이력 테이블 (회원ID, 검색 키워드, 검색일시, 결과 수 등).
• 플랫폼별 상품 데이터 테이블 (상품명, 브랜드, 가격, 판매량, 찜 수, 수집일시 등).
• 집계 테이블 (일별/기간별 통계, 평균가격 등).
• 관리자 설정 테이블 (AI 모델 설정, API 키, 텔레그램 설정 등).

4단계: 기본 인프라 구축

• 서버 환경 세팅 (Ubuntu, Apache, PHP, MariaDB).
• 기본 디렉터리 구조 생성 (난수화된 폴더명).
• Git 리포지토리 구성.
• 기본 보안 설정 (방화벽, SSH 키 등).

5단계: 프로토타입 개발 (1개 플랫폼)

• 가장 수집이 쉬운 플랫폼 1개 선택하여 프로토타입 개발.
• 검색 → 데이터 수집 → 파싱 → DB 저장 → 화면 표시 전체 플로우 테스트.
• 프로토타입을 통해 기술적 난이도와 소요 시간 파악.

✅ 추천 순서:

1. 플랫폼별 엔드포인트 조사 (1~2일)
   • 각 플랫폼의 검색 API/URL 패턴 확인.
   • 수집 가능한 데이터 범위 파악.
   • 이 작업을 먼저 하면 개발 방향이 명확해짐.
2. 법적 리스크 확인 (0.5일)
   • 이용약관, robots.txt 확인.
   • 법적 문제가 있으면 수집 방식 변경 필요.
3. DB 스키마 설계 (1일)
   • 수집할 데이터 구조를 파악한 후 스키마 설계.
   • 플랫폼별 데이터 구조 차이를 고려한 설계.
4. 기본 인프라 구축 (1일)
   • 서버 세팅, 디렉터리 구조 생성.
5. 프로토타입 개발 (2~3일)
   • 1개 플랫폼으로 전체 플로우 테스트.
   • 기술적 난이도 파악 후 일정 조정.

⚠️ 주의사항:

• 플랫폼별 엔드포인트 조사를 먼저 하지 않으면, 개발 중에 수집 불가능한 데이터를 가정하고 개발할 수 있음.
• 법적 리스크를 나중에 확인하면, 이미 개발한 코드를 수정해야 할 수 있음.
• 프로토타입을 먼저 개발하면 실제 난이도를 파악하여 일정을 현실적으로 조정 가능.