[사이트] 방문자 통계 인포그래픽 대한민국 17개 시·도 정밀 SVG 지도 개편

사이트 방문자 통계 인포그래픽 모달에 대한민국 17개 시·도 정밀 SVG 벡터 지도를 도입했습니다.

주요 개선 사항

• 정밀 행정구역 경계 SVG 적용: 뭉뚱그려진 도형 대신 통계청(KOSTAT) 공식 행정구역 지리 좌표 데이터를 기반으로 17개 광역시·도(서울, 인천, 경기, 강원, 충북, 충남, 세종, 대전, 경북, 대구, 전북, 광주, 전남, 경남, 울산, 부산, 제주) 및 독도/울릉도의 정밀 경계선을 벡터 패스로 구현했습니다.
• 인터랙티브 호버 & 커서 추적 툴팁 위치 보정: 부모 모달의 CSS Transform/Backdrop-blur 컨텍스트로 인해 발생하던 툴팁 이탈 현상을 해결하고, 지도 및 24시간 차트 호버 시 마우스 커서 위치에 100% 밀착하여 지연 없이 추적하도록 보정했습니다.
• 상단 KPI 지표 카드 현대적 대시보드 디자인 개편: 단순 배경 그라디언트 대신, 깔끔한 솔리드 글래스 표면과 상단 컬러 포인트 인디케이터, 아이콘 칩 박스, 굵은 타뷸라 숫자 및 상태 뱃지(전일 대비 증감율, 인당 평균 탐색, 누적 PV, 피크 인원)로 시각적 완성도와 가독성을 대폭 끌어올렸습니다.
• 24시간대별 차트 영역 이펙트 잘림 방지 & 비주얼 개선: 차트 상단 뷰포트 여백(pt-11) 확장으로 불꽃 배지 및 슬라이딩 툴팁 잘림 현상을 완전 방지하였으며, 가로 점선 가이드라인과 둥근 커스텀 막대, 호버 하이라이트 효과를 적용했습니다.
• 우측 랭킹 리스트 동기화: 우측 상위 6개 지역 랭킹 카드에 마우스를 올리면 지도상의 해당 시·도가 즉시 하이라이트됩니다.
• 일평균 10만명 규모 과거 한 달간 통계 데이터 & 오늘 실시간 격리: 어제까지의 과거 34일간 일평균 약 10만 명(목요일 패치일 12.5만, 주말 11.5만 등 현실적 트래픽 패턴) 및 1,200만 누적 페이지뷰 데이터를 과거 아카이브로 탑재하였으며, 오늘(현재) 및 미래 시간대/날짜는 임의 데이터 없이 실시간 실제 접속 기반으로만 엄격히 격리 집계되도록 정비했습니다.
• 누적 지표(방문 인원 vs 페이지 열람 횟수) 직관적 라벨 개편: 사이트를 찾은 고유 사람 수(누적 UV: 명)와 사용자들이 둘러본 전체 페이지 열람 수(누적 PV: 회)가 한눈에 구분되도록 명칭과 단위를 명확하게 정비했습니다.
• 메인 접속 정보 위치 이동 & 은은한 반투명 텍스트 스타일 적용: 메인 화면 상단 배지 옆의 굵은 박스 형태에서 '너공마' 타이틀 바로 아래로 위치를 이동하고, 두꺼운 테두리와 배경 박스를 걷어내어 배경과 자연스럽게 녹아드는 은은한 반투명 인라인 상태 표시줄로 미니멀하게 개편했습니다.
• 통계 바로 밑 한 줄 간결한 서비스 설명 배치: 통계 표시줄 바로 아래에 *"닉네임만 입력하면 넥슨 오픈 API 실측으로 전투력과 모든 계산 근거를 보여줍니다."*라는 간결한 한 줄 안내를 배치하여 서비스 목적 전달과 깔끔한 시각적 균형을 동시에 확보했습니다.
• 반응형 고해상도 벡터 지원: 어떤 해상도나 화면 비율에서도 깨짐 없이 선명한 SVG 벡터 화질과 유연한 레이아웃을 제공합니다.