고정 좌측 사이드바와 멀티 페이지 대시보드 레이아웃
HeatMapX Engineering Team9 min read
- dashboard
- navigation
2026-06-05, heatmapx.com/dashboard를 Supabase/Vercel 스타일의 고정 사이드바 레이아웃으로 재구축했습니다 (같은 날 배포된 전체 대시보드 재설계의 구조적 후속 업데이트입니다).
새 레이아웃
┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX [☀💻🌙] [JA/EN] │ ← sticky 헤더
├──────────────┬───────────────────────────────────────┤
│ MENU │ │
│ ▸ ⌂ Home │ 홈 │
│ ▤ Heatmaps │ │
│ │ 사이트 / 오늘의 이벤트 / 플랜 │
│ ⌘ CLI&Skills│ │
│ $ Plan&Billing│ AI 분석 사용량 [████░] │
│ ⚙ Settings │ PV 사용량 [██░░░] │
│ │ │
│ COMING SOON │ 빠른 작업 │
│ 🧪 A/B Tests │ [▤ 히트맵 보기] [＋추가] │
│ ✨ Dynamic UI│ │
├──────────────┤ │
│ 로그아웃 │ │
└──────────────┴───────────────────────────────────────┘
5개의 전용 페이지
| 라우트 | 페이지 | 콘텐츠 |
|---|---|---|
/dashboard |
⌂ 홈 | 통계 카드 (사이트 수 / 오늘의 이벤트 / 현재 플랜), 사용량 바 (AI 분석 / PV), 빠른 작업 |
/dashboard/sites |
▤ 히트맵 | 등록된 사이트 테이블형 목록. 여기서 새 사이트 추가 |
/dashboard/cli |
⌘ CLI & Skills | 터미널 CLI와 Claude Code Skill의 나란한 설치 가이드 |
/dashboard/billing |
$ 플랜 & 결제 | 현재 사용량 요약 + 전체 플랜 비교표 (Free / Pro / Team / Enterprise) |
/dashboard/settings |
⚙ 설정 | 언어 선택기 (영어 / 日本語) — 추가 설정 곧 출시 예정 |
변경 사항
▤ Supabase 스타일 고정 좌측 사이드바
5개의 주요 네비게이션 항목이 항상 좌측 사이드바에 표시되며, 스크롤해도 고정되어 어디서든 페이지를 이동할 수 있습니다.
- 활성 페이지 하이라이트: 현재 페이지가 메뉴에서 시각적으로 강조됨
- 아이콘: 각 메뉴 항목에 시각적 식별자 포함
- 로그아웃: 사이드바 하단에 고정되어 실수로 클릭할 위험 감소
⌂ 한눈에 파악하는 홈 화면
로그인 후 첫 화면인 /dashboard는 이제 한 번의 보기로 계정 상태를 완전히 파악할 수 있게 설계됐습니다.
- 사이트 수, 오늘의 이벤트 합계, 현재 플랜을 보여주는 통계 카드
- AI 분석 사용량과 월간 PV 프로그레스 바 (80% 초과 시 앰버, 100% 초과 시 빨강)
- 빠른 작업: "히트맵 보기", "사이트 추가", "업그레이드", "CLI 설정"
⌘ CLI & Skills 나란히 보기
HeatMapX를 사용하는 두 가지 방법 — 터미널 CLI와 Claude Code Skill — 이 2열 레이아웃으로 한 페이지에 문서화됩니다.
- CLI:
npm install -g heatmapx부터heatmapx analyze까지 단계별 안내 - Claude Code Skill:
/plugin install heatmapx-skill@xtv-llc/heatmapx-cli로 설치하고 대화에서 HeatMapX를 직접 호출 - 샘플 커맨드를 영어와 일본어 양쪽으로 제공
$ 내장된 전체 플랜 비교표
플랜 & 결제 페이지에 이제 Free / Pro / Team / Enterprise 전체 비교표가 포함되어, 대시보드를 떠나지 않고 옵션을 확인하고 업그레이드할 수 있습니다.
- 월간 / 연간 토글 (연간 기본값; 연간 결제가 월간 대비 상당한 할인 제공). 현재 가격은 가격 페이지 참고
- 현재 플랜은 초록색 "현재" 배지로 표시
- Pro는 추천 옵션으로 오렌지 색상으로 강조
- Enterprise는
heatmapx@xtv.co.jp로 직접 문의 링크 제공
⚙ 설정에서 언어 선택
언어 전환은 이전에 헤더의 2단계 토글로만 가능했습니다. 이제 설정에서 명시적인 라디오 선택기로도 노출됩니다. 변경 사항은 즉시 적용되고 브라우저에 저장됩니다.
곧 출시 예정
사이드바 하단의 "Coming Soon" 섹션에서 다가오는 릴리스에 추가될 기능을 미리 확인할 수 있습니다.
| 기능 | 설명 |
|---|---|
| 🧪 A/B 테스트 | 히트맵 인사이트를 기반으로 카피와 레이아웃 변경을 원클릭 A/B 테스트 |
| ✨ Dynamic UI | 유저 속성과 행동 패턴에 따라 UI를 적응시키는 개인화 엔진 |
기타 개선 사항
- Sticky 헤더: 스크롤해도 로고, 테마 전환기, 언어 토글이 항상 표시됨
- Sticky 사이드바: 페이지 콘텐츠를 스크롤하는 동안 네비게이션에 언제든 접근 가능
- 로그아웃 위치 변경: 헤더 우측 상단에서 사이드바 하단으로 이동 (중요하지만 빈도가 낮은 작업을 아래로 배치)
- 하위 호환성 유지: 기존
/dashboard북마크는 새 홈 화면으로 이동 — 리다이렉트 불필요
영향 범위
이번 릴리스는 UI/UX만 변경됩니다 — 트래킹 로직, 데이터 구조, API는 변경되지 않습니다. 기존에 삽입된 트래커 태그는 그대로 작동합니다. 기존 /dashboard 북마크에는 리다이렉트가 필요하지 않습니다.