대시보드 재설계 — 라이트/다크 모드 & 정보 밀도 개선
HeatMapX Engineering Team5 min read
- dashboard
2026-06-05, HeatMapX 대시보드(heatmapx.com/dashboard)를 전면 재설계해 배포했습니다. 가시성과 사용성 모두 크게 향상됐습니다.
변경 사항
☀ 3단계 테마: 라이트 / 다크 / 시스템
헤더 우측 상단에 "☀ 라이트", "💻 시스템", "🌙 다크" 3단계 토글이 추가됐습니다.
- 시스템 (기본값): OS 화면 설정을 자동으로 따릅니다. macOS를 "자동"으로 설정하면 밤에 수동 조작 없이 다크로 전환됩니다.
- 수동 오버라이드: 언제든지 라이트 또는 다크를 고정할 수 있습니다. 설정은 브라우저에 저장됩니다.
- 초기 로드 시 스타일이 적용되기 전에 잠깐 깜박이는 현상(FOUC)이 방지되어, 새로고침해도 올바른 테마가 즉시 렌더링됩니다.
▤ 등록 사이트를 테이블형 목록으로 재설계
기존 2열 카드 그리드가 단일 행 테이블 레이아웃으로 교체되어, 여러 사이트가 등록됐을 때 가독성이 크게 향상됐습니다.
- 모든 행에서 컬럼이 세로로 정렬되어, 상태와 이벤트 수를 한눈에 비교하기 쉬움
- 사이트 이름, URL, API 키, 트래커 태그가 모두 단일 행에 컴팩트하게 표시
- 설정 세부 사항은 "▸ 설정 정보" 아래에 접혀 있음 (펼쳐서 API 키와 트래커 태그 복사 가능)
- 긴 이름과 URL은 자동으로 "…"으로 잘려 레이아웃이 깨지지 않음
＋ 섹션 헤딩 옆 "사이트 추가" 버튼
"등록된 사이트" 헤딩 옆에 컴팩트한 "＋ 사이트 추가" 버튼이 생겨, 스크롤 없이 새 사이트를 추가할 수 있습니다 (목록 하단의 원래 버튼도 그대로 유지됩니다).
◐ 통합된 GitHub 스타일 플랫 디자인
색상 구성이 단순화되어 시각적 노이즈가 크게 줄었습니다.
- 페이지 배경: 중립 회색 (
#f5f5f5), Linear와 Supabase 같은 최신 SaaS 제품의 톤에 맞춤 - 카드: 흰색 베이스 + 얇은 테두리, 그림자 없음, 6px 테두리 반경
- 오렌지를 단일 브랜드 액센트로 (기존: 파란색, 초록색, 보라색, 앰버가 혼재)
- 시맨틱 상태 색상 유지: 초록 (활성) / 앰버 (경고) / 빨강 (오류)
변경 전 / 변경 후
| 항목 | 변경 전 | 변경 후 |
|---|---|---|
| 색상 테마 | 고정 다크 대시보드 | 3단계: 라이트 / 다크 / 시스템 |
| 레이아웃 | 2열 카드 그리드 (낮은 정보 밀도) | 단일 컬럼 테이블형 목록 (컬럼 세로 정렬) |
| 사이트 표시 | 세로로 쌓임, 공간 많이 차지 | 사이트 1개 = 1행 + 접을 수 있는 세부 정보 |
| 추가 버튼 | 페이지 하단에만 존재 | 헤딩 옆과 하단 모두 |
| 브랜드 컬러 | 파란색 / 초록색 / 보라색 / 앰버 혼재 | 오렌지 단일 액센트 축으로 통일 |
추가 개선 사항
- 사이트 이름과 URL 길이 제한: 이름 60자 / URL 512자로 제한해 레이아웃 깨짐 방지.
- 사이트 추가 플레이스홀더 업데이트: 지원되는 15개 언어 전체에서
e.g. in-gol/https://in-gol.com을e.g. My site/https://example.com으로 교체. - 온보딩 모달: 대시보드에 도달한 후 1초 뒤에 페이드인되어, 갑자기 튀어나오는 느낌이 부드러워짐.
- 코드 스니펫: 트래커 태그와 CLI 커맨드 표시가 다크 배경에서 라이트 테마와 조화되는 밝은 회색 pill 스타일로 업데이트됨.
영향 범위
이번 릴리스는 UI/UX만 변경됩니다 — 측정 로직, 데이터 구조, API는 변경되지 않습니다. 기존에 삽입된 트래커 태그는 그대로 작동합니다.