건프라 가이드 (Gunpla Guide) 🔍

건프라 전 제품을 정밀 분류하여 당신에게 맞는 제품을 추천하는 웹사이트입니다. 백엔드 없이 동작하는 정적(Static) 웹앱으로, 데이터는 JSON으로 관리됩니다.

주요 기능

🔎 탐색 & 추천

• 23개 분류 카테고리: 등급, 시리즈, 난이도, 가동성, 색분할, 프레임 타입, 씰 의존도 등
• 추천 점수 정렬: 필터 조건에 맞춰 적합도 점수로 제품 정렬
• 검색 & 자동완성: 제품명·기체명·형식번호(초성 검색 포함)
• 정렬/뷰 전환: 발매일·이름·가격·난이도·파츠수 정렬, 그리드/리스트 뷰

🎨 테마 시스템 (전 페이지 적용)

• 기본 3종: 라이트 / 다크 / 트루 블랙(OLED)
• 건담 에디션 5종: RX-78 · 샤아 전용 · 지온 · 유니콘 · 에반게리온
  • 단순 색상 변경이 아닌 그라데이션·심볼·패턴을 포함한 비주얼 아이덴티티
• 커스텀 테마: 포인트·강조·배경·카드·텍스트 색상을 사용자가 직접 지정(음영 자동 파생, 실시간 미리보기)
• FOUC 방지: 페인트 이전에 저장된 테마를 즉시 적용해 로드 시 깜빡임 제거
• 선택 테마는 localStorage에 저장되어 페이지·세션 간 유지

⭐ 즐겨찾기 & 비교함

• 제품 카드·상세페이지에서 즐겨찾기/비교함 토글
• 상세 스펙 비교 테이블: 메인 카드 나열이 아닌, 3개 섹션(기본/조립/특성) 19개 항목을 지역화하여 비교
  • Sticky 헤더·첫 열, 항목별 최고/최저 하이라이트, 가동성 바 그래프, 열별 제거 버튼
• 전체 초기화 버튼: 즐겨찾기/비교함을 비우는 버튼을 푸터 하단에 눈에 띄지 않게 배치(확인 대화상자 포함)
• 선택 해제 즉각 반영: 즐겨찾기/비교함 탭에서 항목 해제 시 목록에서 즉시 제거
• 페이지·탭 간 동기화: storage 이벤트 기반 크로스탭 동기화로 여러 탭이 동일 상태 유지

🕒 최근 조회 제품

• localStorage 기반 최근 조회 기록(최대 10개, 중복 제거·최신순)
• 텍스트 없이 작은 썸네일 스트립으로 표시(메인·상세페이지 상단)

📰 신제품 · 소식 알림

• 헤더 상단 알림 벨 + 읽지 않음 배지
• RSS 모니터링: Bandai Hobby / GUNDAM.INFO 피드에서 신제품·소식 수집
• 신규 항목 하이라이트, 상대 시각 표시, 30분 캐시
• 정적 사이트 특성상 공개 CORS 프록시 경유 + 실패 시 우아하게 degrade

🌐 다국어 & 접근성

• 한국어 / 영어 실시간 전환(data/i18n.json)
• shadcn/ui 참고 정제: 키보드 focus-visible 링, 촉각적 press 피드백, 일관된 disabled/selection 상태
• 반응형 디자인: 모바일 / 태블릿 / 데스크톱

🔗 기타

• 상세페이지에서 반다이 공식 설명서 검색 결과로 연결(정규화된 검색 URL 사용)

프로젝트 구조

GunList/
├── index.html              # 메인 (목록/필터/즐겨찾기/비교/알림)
├── detail.html             # 제품 상세 페이지
├── css/
│   ├── styles-base.css     # 토큰, 레이아웃, 공통 컴포넌트, 정제 레이어
│   ├── styles-components.css # 카드/필터 등 컴포넌트
│   └── styles-themes.css   # 테마별 비주얼 아이덴티티(그라데이션·심볼)
├── js/
│   ├── app.js              # 앱 코어(렌더/즐겨찾기/비교/최근조회 등)
│   ├── filter.js           # 필터·검색·자동완성
│   ├── recommendation.js   # 추천 점수 로직
│   ├── i18n.js             # 다국어 + 테마 관리
│   └── notifications.js    # RSS 신제품/소식 알림
├── data/
│   ├── gunpla-index.json   # 제품 목록
│   ├── gunpla-details/     # 제품별 상세 데이터
│   ├── taxonomy.json       # 분류 카테고리/라벨(ko/en)
│   └── i18n.json           # UI 번역
└── scripts/                # 데이터 유지보수 스크립트

실행 방법

정적 사이트이므로 로컬 서버로 열면 됩니다(파일 직접 열기 시 fetch 제약이 있을 수 있음).

# 예: Python 내장 서버
python -m http.server 8000
# 이후 브라우저에서 http://localhost:8000 접속

기술 스택

• Frontend: HTML5, CSS3 (Vanilla), JavaScript (ES6+, 모듈 패턴)
• Data: JSON (정적 데이터)
• Storage: localStorage (테마/언어/즐겨찾기/비교함/최근조회/알림 상태)
• Fonts: Noto Sans KR, Orbitron

라이선스

이 프로젝트는 팬 제작 비공식 프로젝트입니다. 건프라 및 관련 상표는 BANDAI SPIRITS의 등록상표입니다.

---

Made with ❤️ for Gunpla enthusiasts