통계 추이 차트 원장 지표 보정

2026-07-29 15:39:09 +09:00
parent 8a6963e8e1
commit 65924292b4
8 changed files with 67 additions and 11 deletions
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,7 +1,7 @@
 # 배포 가이드

-> v1.12.6은 Google 로그인/계정 연동과 통계 콘텐츠 세션 원장을 포함한다. 운영 배포 전 `068_csp_violation_aggregates.sql`, `069_media_catalog.sql`, `070_post_import_jobs.sql`, `071_users_google_oauth.sql`, `072_analytics_content_sessions.sql`을 순서대로 적용하고 미디어 카탈로그는 reconcile 완료 후 `MEDIA_CATALOG_MODE=database` 고정 순서를 지킨다. 게시물 Export·Import·일반 업로드는 디스크·임시 디렉터리 스트리밍을 사용하므로 NAS 앱 컨테이너의 임시 저장 공간과 `public/uploads/exports`, `public/uploads/_import-jobs` 쓰기 권한을 확인한다.
-> 로컬 기준 v1.12.6에서 `npm run lint`, `npm test`, `npm run build` 검증을 통과했다.
+> v1.12.7은 Google 로그인/계정 연동과 통계 콘텐츠 세션 원장을 포함한다. 운영 배포 전 `068_csp_violation_aggregates.sql`, `069_media_catalog.sql`, `070_post_import_jobs.sql`, `071_users_google_oauth.sql`, `072_analytics_content_sessions.sql`을 순서대로 적용하고 미디어 카탈로그는 reconcile 완료 후 `MEDIA_CATALOG_MODE=database` 고정 순서를 지킨다. 게시물 Export·Import·일반 업로드는 디스크·임시 디렉터리 스트리밍을 사용하므로 NAS 앱 컨테이너의 임시 저장 공간과 `public/uploads/exports`, `public/uploads/_import-jobs` 쓰기 권한을 확인한다.
+> 로컬 기준 v1.12.7에서 `npm run lint`, `npm test`, `npm run build` 검증을 통과했다.

 ## 빌드 유형

@@ -14,7 +14,7 @@

 > `npm run dev`는 프로젝트 전용 실행 스크립트를 통해 개발 서버, Admin, Tailwind Viewer 링크만 요약 출력한다.

-## v1.12.6 배포 전 검증
+## v1.12.7 배포 전 검증

 Playwright API 테스트도 브라우저 바이너리는 필요하지 않지만 `verify:ci`에는 Chromium E2E가 포함된다. 최초 1회 의존성과 Chromium을 설치하고 Docker daemon이 실행 중인지 확인한다.

--- a/docs/history.md
+++ b/docs/history.md
@@ -1,3 +1,7 @@
+## 2026-07-29 v1.12.7 — 추이 차트 버킷도 원장 기준으로 보정한다
+
+관리자 통계 추이 차트는 방문자 수와 함께 평균 체류시간, 50% 스크롤 도달을 같은 버킷 단위로 보여준다. 요약 카드와 인기 콘텐츠 부가 지표를 원장 기준으로 보정한 뒤에도 차트만 일별 집계 값을 계속 쓰면 같은 기간을 보는데 숫자의 기준이 달라질 수 있다. 따라서 각 차트 버킷이 원장 보관 범위 안에 있고 해당 원장 데이터가 있을 때만 평균 체류와 스크롤 지표를 원장 기준으로 덮어쓰고, 방문자 수와 유입 비율은 기존 일별 집계 기준을 유지한다.
+
 ## 2026-07-29 v1.12.6 — 인기 콘텐츠 순위는 유지하고 참여 지표만 보정한다

 인기 게시물·페이지 목록은 관리자가 어떤 콘텐츠가 많이 보는지 빠르게 파악하는 영역이므로, 원장 데이터가 일부 기간에만 있을 때 순위 자체를 원장 기준으로 바꾸면 운영자가 보던 목록이 불필요하게 흔들릴 수 있다. 따라서 순위와 조회수·방문자 수는 기존 일별 집계 기준으로 유지하고, 읽음·평균 체류·스크롤처럼 콘텐츠 세션 중복 제거가 중요한 부가 지표만 원장 데이터가 있을 때 보정한다.
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -601,7 +601,7 @@ components/content/
 - 게시물 `reads`는 클라이언트에서 15초 이상 체류·50% 이상 스크롤 후 별도 전송한다. 콘텐츠 세션 원장이 있는 경우 같은 콘텐츠 세션의 `read_recorded`가 처음 켜질 때만 일별 `reads`를 증가시킨다.
 - `POST /api/analytics/heartbeat`는 20초 간격으로 체류시간·스크롤·현재 경로를 전송한다. 로그인 사용자는 서버 세션으로 `user_id`를 연결한다. 체류·스크롤 증분은 `analytics_content_sessions`의 콘텐츠 세션별 이전 값 기준으로 계산해 같은 탭에서 여러 게시물·페이지를 이동해도 스크롤 구간과 engaged 집계가 서로 섞이지 않게 한다.
 - 관리자 대시보드는 `GET /admin/api/analytics/realtime`으로 현재 접속자 목록(닉네임·아바타·대표 게시물 제목·접속 유지시간·IP·열린 페이지 수·열린 페이지 제목 목록)을 조회한다. 현재 접속자는 로그인 사용자는 회원 기준, 익명 방문자는 IP 기준으로 묶어 같은 사람이 여러 페이지를 열어도 1명으로 표시하되, 묶음 안의 활성 페이지는 목록으로 함께 표시한다. 활성 페이지 행에 마우스를 올리면 공개 경로 새 창 바로가기 버튼을 표시한다. 상단 요약은 현재 접속자·오늘 방문자·누적 방문자·게시물 수를 표시한다.
- 관리자 대시보드 **통계 추이**는 `trends` 데이터를 3개 막대 차트(방문자수·평균 체류시간·50% 스크롤 도달)로 표시한다. 선택지는 일간·주간·월간·년간이며 기본값은 일간이다. 집계는 `ANALYTICS_COLLECTED_SINCE` 환경 변수(기본 `2026-06-01`) 이후 데이터만 합산하고 그 이전 구간은 0으로 표시한다. **방문자수** 막대는 검색(빨강)·SNS(청록)·기타(회색) 유입 비율을 스택으로 표시하며, hover 시 해당 막대만 색상을 강조한다. 안내 문구는 `통계는 2026년 6월 1일부터 집계한 데이터를 표시합니다.` 형식이다. 막대 hover/focus 시 기간과 정확한 값을 툴팁으로 표시하며, 막대 클릭 시 하단 **선택한 기간 상세** 패널을 해당 날짜 또는 묶음 구간 기준으로 갱신한다. 표(table)나 외부 차트 라이브러리는 사용하지 않는다.
+- 관리자 대시보드 **통계 추이**는 `trends` 데이터를 3개 막대 차트(방문자수·평균 체류시간·50% 스크롤 도달)로 표시한다. 선택지는 일간·주간·월간·년간이며 기본값은 일간이다. 집계는 `ANALYTICS_COLLECTED_SINCE` 환경 변수(기본 `2026-06-01`) 이후 데이터만 합산하고 그 이전 구간은 0으로 표시한다. 평균 체류시간과 50% 스크롤 도달은 차트 버킷이 콘텐츠 세션 원장 보관 범위 안에 있고 원장 데이터가 있으면 원장 기준으로 보정하고, 없는 버킷은 기존 일별 누적 집계 값을 유지한다. **방문자수** 막대는 검색(빨강)·SNS(청록)·기타(회색) 유입 비율을 스택으로 표시하며, hover 시 해당 막대만 색상을 강조한다. 안내 문구는 `통계는 2026년 6월 1일부터 집계한 데이터를 표시합니다.` 형식이다. 막대 hover/focus 시 기간과 정확한 값을 툴팁으로 표시하며, 막대 클릭 시 하단 **선택한 기간 상세** 패널을 해당 날짜 또는 묶음 구간 기준으로 갱신한다. 표(table)나 외부 차트 라이브러리는 사용하지 않는다.
 - 관리자 대시보드 **선택한 기간 상세**는 기본값으로 오늘 통계를 표시하고, 차트 막대 클릭 시 선택 범위의 페이지뷰·방문자·평균 체류·50% 스크롤·검색/SNS/직접 포함 유입원·디바이스/OS·인기 게시물·인기 페이지를 표시한다. 자동 갱신 중에는 사용자가 선택한 날짜·기간을 유지하고, 상세 재조회 중에도 기존 내용을 유지해 화면 높이가 줄어들지 않게 한다. 인기 게시물·인기 페이지는 데스크톱에서 왼쪽 75% 영역에 세로 목록으로 표시하고, 유입·디바이스는 오른쪽 25% 영역에 세로 배치한다. 디바이스는 모바일·PC 같은 상위 기기 기준으로 한 카드에 합산하고, 상위 기기 제목 오른쪽에 방문자 수·조회수·전체 디바이스 방문자 대비 비율을 한 줄로 표시한다. 카드 안의 Android/iOS/Windows 같은 OS별 목록은 방문자 수와 전체 디바이스 방문자 대비 비율만 표시한다. 인기 콘텐츠 메타는 `V 조회`, `R 읽음/방문자`, `M 최근 30일 조회`, `C 작성일`, `S 50/75/100% 스크롤` 형식의 한 줄 압축 표기를 사용한다. `V/R/M` 알파벳만 서로 다른 색상으로 강조하고 숫자는 보조 텍스트 색상으로 표시한다. 구분자 `|`는 연한 회색으로 표시하며, `S`의 50/75/100 스크롤 값은 단계가 깊어질수록 진하게 표시한다. 관리자 통계 응답은 표시 안정성을 위해 `읽음 <= 조회`, `100% 스크롤 <= 75% 스크롤 <= 50% 스크롤 <= 조회` 범위로 정규화한다. 유입 프로그래스 바는 보조 지표로 보이도록 카드 폭의 절반만 사용한다. 검색엔진이 대부분 검색어를 전달하지 않는 현실을 반영해 대시보드의 유입 키워드 영역은 표시하지 않는다.
 - 관리자 대시보드 요약·선택한 기간 상세와 게시물·페이지별 통계 상세의 기간 요약에서 평균 체류·스크롤·읽음처럼 같은 콘텐츠 세션 중복 제거가 중요한 지표는 선택 기간이 `analytics_content_sessions` 보관 범위 안에 있고 원장 데이터가 있을 때 원장 기준으로 계산한다. 보관 범위 밖 기간이나 원장 데이터가 없는 기간은 기존 일별 누적 집계로 fallback한다.
 - 관리자 인기 게시물·페이지 목록은 순위와 조회수·방문자 수를 기존 일별 집계 기준으로 유지하되, 선택 기간이 원장 보관 범위 안에 있고 콘텐츠 세션 원장 데이터가 있으면 읽음·평균 체류·스크롤 같은 부가 참여 지표만 원장 기준으로 보정한다.
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -16,7 +16,6 @@
 ## 데이터베이스

 - 통계 콘텐츠 세션 원장 기반 후속 개선.
-  - 통계 추이 차트의 평균 체류·스크롤 지표도 원장 기준 보정이 필요한지 검토.
  - 콘텐츠 세션 원장 보관 기간을 운영 데이터 증가량 기준으로 32일 유지 또는 별도 기간으로 분리할지 검토.

 ## 배포
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 이력

+## v1.12.7
+
+- 관리자 통계 추이 차트의 버킷별 평균 체류와 50% 스크롤 도달 지표를 콘텐츠 세션 원장 우선 계산으로 보정.
+- 원장 데이터가 없는 차트 버킷은 기존 일별 누적 집계 값을 유지하도록 fallback 정리.
+
 ## v1.12.6

 - 관리자 인기 게시물 목록의 읽음·평균 체류·스크롤 지표를 콘텐츠 세션 원장 우선 계산으로 보정.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.12.6",
+  "version": "1.12.7",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.12.6",
+      "version": "1.12.7",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.12.6",
+  "version": "1.12.7",
  "private": true,
  "type": "module",
  "imports": {
--- a/server/repositories/analytics-repository.js
+++ b/server/repositories/analytics-repository.js
@@ -892,6 +892,48 @@ const getAllPostContentSessionScrollAggregate = async (sql, startDay, endDay) =>
  return rows[0] || {}
 }

+/**
+ * 차트 버킷별 콘텐츠 세션 지표를 조회한다.
+ * @param {import('postgres').Sql} sql - DB 클라이언트
+ * @param {Array<Object>} trendRows - 차트 버킷 행
+ * @param {string} today - 오늘 날짜 키
+ * @returns {Promise<Map<string, Object>>} 버킷 키별 원장 지표
+ */
+const getTrendContentSessionMetricMap = async (sql, trendRows, today) => {
+  const metricMap = new Map()
+
+  for (const row of trendRows) {
+    const startDay = row.start_day ? new Date(row.start_day).toISOString().slice(0, 10) : ''
+    const endDay = row.end_day ? new Date(row.end_day).toISOString().slice(0, 10) : ''
+
+    if (!startDay || !endDay || !canUseContentSessionAggregateForRange(startDay, today)) {
+      continue
+    }
+
+    const siteRows = await getSiteContentSessionAggregate(sql, startDay, endDay)
+    const postRows = await getAllPostContentSessionScrollAggregate(sql, startDay, endDay)
+    const hasSiteRows = hasContentSessionAggregateRows(siteRows)
+    const hasPostRows = hasContentSessionAggregateRows(postRows)
+
+    if (!hasSiteRows && !hasPostRows) {
+      continue
+    }
+
+    const engagedViews = Number(siteRows?.engaged_views || 0)
+    const totalEngagedSeconds = Number(siteRows?.total_engaged_seconds || 0)
+
+    metricMap.set(`${startDay}:${endDay}`, {
+      avg_engaged_seconds: hasSiteRows && engagedViews > 0
+        ? Math.round(totalEngagedSeconds / engagedViews)
+        : null,
+      post_views: hasPostRows ? Number(postRows?.views || 0) : null,
+      scroll_50: hasPostRows ? Number(postRows?.scroll_50 || 0) : null
+    })
+  }
+
+  return metricMap
+}
+
 /**
 * 날짜 문자열이 통계 조회 형식인지 확인한다.
 * @param {string} value - 날짜 문자열
@@ -1722,6 +1764,8 @@ export const getAnalyticsSummary = async (options = {}) => {
    GROUP BY day, source_group
  `

+  const trendContentMetricMap = await getTrendContentSessionMetricMap(sql, trendRows, today)
+
  const engagedViews = Number(engagementRow?.engaged_views || 0)
  const totalEngagedSeconds = Number(engagementRow?.total_engaged_seconds || 0)
  const todayEngagedViews = Number(todayEngagementRow?.engaged_views || 0)
@@ -1783,13 +1827,17 @@ export const getAnalyticsSummary = async (options = {}) => {
    trends: trendRows.map((row) => {
      const startDay = row.start_day ? new Date(row.start_day).toISOString().slice(0, 10) : ''
      const endDay = row.end_day ? new Date(row.end_day).toISOString().slice(0, 10) : ''
+      const contentMetric = trendContentMetricMap.get(`${startDay}:${endDay}`)
      const trafficBreakdown = startDay && endDay
        ? aggregateTrafficBreakdownForRange(startDay, endDay)
        : { trafficSearch: 0, trafficSns: 0, trafficOther: 0 }
+      const trendAvgEngagedSeconds = contentMetric?.avg_engaged_seconds ?? row.avg_engaged_seconds
+      const trendScroll50 = contentMetric?.scroll_50 ?? row.scroll_50
+      const trendPostViews = contentMetric?.post_views ?? row.post_views

      const scroll50Reach = Math.min(
-        Number(row.scroll_50 || 0),
-        Number(row.post_views || 0)
+        Number(trendScroll50 || 0),
+        Number(trendPostViews || 0)
      )

      return {
@@ -1808,7 +1856,7 @@ export const getAnalyticsSummary = async (options = {}) => {
        trafficSearch: trafficBreakdown.trafficSearch,
        trafficSns: trafficBreakdown.trafficSns,
        trafficOther: trafficBreakdown.trafficOther,
-        avgEngagedSeconds: Number(row.avg_engaged_seconds || 0),
+        avgEngagedSeconds: Number(trendAvgEngagedSeconds || 0),
        scroll50Reach
      }
    }),