남은 운영 작업: Discord 알림 연결(ALERT_WEBHOOK_URL 환경변수), Google Search Console 등록 + 색인 요청(브랜드·파비콘 반영 확인 겸 ko 노출 추이 계기판), 애드센스 신청(유입 축적 후). (Vercel Web Analytics는 활성 확인됨.)
기술 스택
영역
선택
프레임워크
Next.js 15 (App Router) + TypeScript
스타일
Tailwind CSS v4
i18n
next-intl — /ko·/en 오픈 (구조는 ja/zh·유럽어 확장 대비)
DB
Neon Postgres (serverless) + Drizzle ORM
수집 트리거
Upstash QStash → /api/cron/* Route Handler
시각화
d3-force + PixiJS (Canvas/WebGL)
배포
Vercel (프로덕션 빌드는 webpack)
로컬 개발 환경
1. 요구사항
Node.js 20 이상
npm
2. 설치
npm install
3. 환경변수 — 없어도 실행됩니다 (목업 모드)
DATABASE_URL이 없으면 자동으로 목업 데이터 모드로 동작합니다 (1,000개 게임 fixture, src/mocks/games.json). 실제 키 없이 npm run dev만으로 전체 UI를 확인할 수 있고, 화면 하단에 "목업 데이터 모드" 뱃지가 표시됩니다. 실데이터 전환은 .env에 값을 채우는 것만으로 이뤄집니다.
UI 개선: 버블 내부 = 동접 수 + 순위(#N)(점유율 제거) · hover 툴팁(동접·순위·변화율·점유율) · 장르 필터 정리(SW 카테고리 제외) · 버블 드래그 ↔ 맵 팬 분리
모바일 UX: 필터 바 상시 노출(가로 스크롤) · 터치 제스처 분리(스와이프=팬 / 롱프레스=버블 드래그 / hover는 마우스·펜) · 버블 텍스트 원내 폭 맞춤(전각 대응) · 뷰 리셋 버튼 · 랭킹 테이블 바로가기 · 상단 바 문서 레벨 고정(sticky — 랭킹 스크롤 중에도 필터·검색·기간 유지, 헤더 높이 실측으로 맵 영역 배분)
딥 랭크 가독성: 줌 기반 LOD(화면 반경 판정 + 텍스트 카운터 스케일 재래스터) · 순위 세분화(301500/501750/751~1,000, 구간당 ≤250) · 노드 수 기반 반경 면적 예산(균등 축소, sqrt 비율 보존)
버블 뽑기: 순위 범위 지정 무작위 게임 추첨 (CS:GO 케이스 오프닝식 벨트 룰렛 + 희귀도 티어 링(범위 내 백분위), GameModal 연계 — 재방문 콘텐츠)
/[locale]/game/[id] — 게임 소개(Steam short_description, 로케일별) + 데이터 대시보드(현재 동접 히어로·24h 피크·순위·스팀 점유율·가격/할인·평점 긍정률 바·출시일) + 추이·장르·Steam 링크. 동접 수치는 줄글 대신 데이터로 (소개 미수집 시 순위·평점·가격 폴백 문장)
소개 수집: 기존 appdetails 호출에 short_description·release_date 파싱 추가(추가 API 콜 0) → apps.desc_ko/desc_en/release_date. HTML 엔티티·태그 정리(수집·렌더 양쪽)
모바일 복귀 UX: 고정 뒤로가기 바 + 스마트 백(앱 내부 진입=router.back() 위치·스크롤 복원 / SEO 직접 유입=홈 push)
공유/스크린샷: 버블맵 뷰포트 → 브랜드 카드(헤더·Top3·워터마크) PNG. Pixi extract + snapdom, 다운로드·Web Share·클립보드 복사
/[locale]/og 동적 OG 이미지 — next/og로 top 7 동접 리더보드(1200×630) + 홈 openGraph/twitter 연결
Vercel Analytics (<Analytics/> — 배포 환경 수집)
우아한 강등 동작 검증 — store stale 시 가격 UI 전면 숨김(할인 링·랭킹 컬럼·모달·상세·상태 스트립) + 동접/랭킹 정상 유지 확인. 동접은 별도 도메인(api.steampowered)이라 store 장애와 독립
Launch 이후 개선 (2026-07 · 재방문 콘텐츠 · 품질)
Phase 1~5 라이브 이후 추가된 증분. 전부 프로덕션 반영됨. 세 해자(ko SEO · 히스토리 · 공유 포맷)에 기여하는 것만.
오늘의 무버스: 급상승/급락 TOP 8 — 증감 인원(Δ) 기준 정렬·표시(%는 소규모 게임 편향이라 서브텍스트로만) + 규칙 기반 "왜" 태그(🏷️세일 > 🆕신규 > 🚀급등, LLM 무관) + 게임 썸네일. 맵과 랭킹 테이블 사이 배치, 클릭 → GameModal
떡상 공유: 급상승 TOP 7 공유 카드(/[locale]/og/movers, next/og 1200×630) — 순위 · 게임 썸네일(서버 프리페치 → data URI, 실패 시 이니셜 폴백으로 우아한 강등) · Δ · 동접. 공유 버튼은 이미지 미리보기 모달로 열려 다운로드 · 복사 · Web Share 제공(모바일)
온디맨드 갱신: 하위 순위 게임을 조회(모달/상세)하면 그 게임의 가격·평점·소개를 즉시 신선화(/api/refresh/[appid]). 3중 게이트(추적 대상만 · 6h 쿨다운 · store 서킷브레이커)로 남용/과금 방지 — "본 만큼 신선". 수집 로직은 details 크론과 lib/collect.ts 공용
커스텀 순위 범위: 프리셋 밴드 외 직접 입력(min/max — [1, 3000] clamp · 뒤집힘 정규화 · max>1,000이면 deep 스냅샷 승급). 스팬 상한은 전체 3,000까지 허용
검색 UX: 검색 중엔 순위 범위 밴드를 무시하고 매칭 버블 표시(현재 범위 밖 게임도 발견) + 자동완성 클릭 = "검색 확정"(그 게임 버블 고립 표시)
구글 검색 최적화: 사이트명을 브랜드로 고정(og:site_name · application-name · WebSite JSON-LD — 도메인 기반 "Vercel" 추론 방지) + 파비콘을 버블 로고 PNG로 교체(SVG→PNG, 크롤러 인식률) + 미들웨어가 확장자 없는 /icon 라우트를 로케일 리다이렉트로 깨뜨리던 버그 수정
로케일
ko(기본) · en 오픈 — 색인·sitemap·hreflang·언어 전환 포함 (en은 2026-07 사용자 결정으로 오픈, CLAUDE.md 8번 동결 해제)
