📋 블로그 어드민 플랫폼 고도화 작업 — 콘텐츠 캘린더 UI 구현 + Google Analytics 4 & Search Console 어드민 대시보드 연동

개요

블로그 어드민 플랫폼의 고도화 계획(ENHANCEMENT_PLAN.md) Phase 2에 해당하는 두 가지 기능을 구현했다. 콘텐츠 캘린더로 월별 발행 현황을 시각화하고, Google Analytics 4 및 Search Console 데이터를 어드민 내에서 바로 확인할 수 있는 대시보드를 만들었다.

---

① 콘텐츠 캘린더 (/admin/calendar)

기획 배경

스케줄 자동 발행이 활성화되면서 "언제 어떤 글이 얼마나 나갔는지" 한눈에 파악하기 어려워졌다. 발행 이력을 테이블로만 보던 기존 방식에서 벗어나, 월별 캘린더 뷰로 시각화하여 발행 밀도와 카테고리 분포를 직관적으로 확인할 수 있도록 했다.

구현 내용

• 7×N 그리드 캘린더 — 일/월/화/수/목/금/토 요일 헤더, 오늘 날짜 primary 색상 강조, 일/토 빨강·파랑 구분
• 카테고리별 컬러 점(dot) — 각 날짜에 발행 수만큼 카테고리 컬러 점 표시(최대 6개 + 나머지 건수)
• 날짜 클릭 → 우측 상세 패널 — 해당 날짜의 포스트 목록(제목, 카테고리 뱃지, 언어, 수정 링크)
• 이전/다음 달 이동 + 오늘 버튼 — 월 단위 네비게이션
• 카테고리 필터 — 전체 / 개발 / 여행 등 선택 시 캘린더 + 통계 동기화
• 이번 달 카테고리별 바 차트 — 우측 하단 패널에 발행 수 시각화

생성 파일

app/admin/calendar/page.tsx   # 캘린더 페이지 (client component)
components/admin/AdminSidebar.tsx  # 콘텐츠 캘린더 메뉴 추가

---

② Google Analytics 4 & Search Console 어드민 연동

기획 배경

블로그를 운영하면서 트래픽 데이터를 확인하려면 GA 콘솔, Search Console을 별도로 열어야 했다. 어드민 대시보드 안에서 바로 조회수 트렌드·검색 키워드·상위 페이지를 확인할 수 있도록 통합 애널리틱스 페이지를 만들었다.

아키텍처

googleapis 패키지를 설치하지 않고 Node.js 내장 crypto 모듈만으로 Google Service Account JWT 인증을 구현했다. 서비스 계정 비밀키로 RS256 JWT를 서명 → Google OAuth2 토큰 엔드포인트에서 액세스 토큰 교환 → GA4 Data API / Search Console API 호출.

Service Account JSON Key
    │
    ▼
lib/google-auth.ts  (RS256 JWT 서명 + 토큰 발급)
    │
    ├── /api/analytics/ga4  → GA4 Data API
    │       일별 트렌드 / 상위 페이지 / 요약 통계
    │
    └── /api/analytics/gsc  → Search Console API
            상위 쿼리 / 상위 페이지 / 클릭·노출·CTR·순위

구현 내용

• lib/google-auth.ts — Node.js crypto로 RS256 JWT 생성, OAuth2 액세스 토큰 발급. normalizePem() 함수로 환경변수의 \n 이스케이프를 실제 개행으로 변환 후 PEM을 64자 단위로 재포맷하여 OpenSSL 파싱 오류 방지
• /api/analytics/ga4 — 최근 7일/28일 일별 세션·페이지뷰·활성사용자 트렌드, 상위 페이지 10건. 날짜 포맷은 GA4 요구사항인 YYYY-MM-DD 형식 적용
• /api/analytics/gsc — 최근 7일/28일 상위 검색 쿼리 10건, 상위 페이지 10건, 클릭·노출·CTR·평균 순위 집계
• /admin/analytics — recharts LineChart로 일별 트렌드 시각화, 요약 통계 카드 6개, GA4/GSC 상위 테이블. 환경변수 미설정 시 노란 안내 배너, API 오류 시 빨간 에러 배너 표시
• GTM + GA4 직접 연동 — app/layout.tsx에 NEXT_PUBLIC_GTM_ID 기반 GTM 헤드 스크립트 + body noscript 삽입, NEXT_PUBLIC_GA_MEASUREMENT_ID 기반 gtag 직접 연동(GTM 미사용 fallback)

트러블슈팅

1. error:1E08010C:DECODER routines::unsupported → 원인: .env.local에서 \n이 실제 개행으로 변환되지 않아 PEM 포맷 파싱 실패 → 해결: normalizePem() 함수로 \n 치환 후 base64 바디를 64자 단위 재포맷
2. GA4 400: Invalid startDate → 원인: formatDate() 함수가 YYYYMMDD 형식으로 날짜를 생성 → 해결: YYYY-MM-DD 형식으로 수정 (하이픈 추가)
3. GA4/GSC 403: Insufficient permissions → 원인: 서비스 계정 이메일이 GA4 속성/Search Console 사이트에 추가되지 않음 → 해결: GA4 속성 액세스 관리에서 서비스 계정을 뷰어로 추가, GSC 사용자 권한에 제한됨 역할로 추가. Google Analytics Data API & Search Console API Cloud 콘솔에서 활성화

생성/수정 파일

# 신규 생성
lib/google-auth.ts                    # Google OAuth2 JWT 유틸
app/api/analytics/ga4/route.ts        # GA4 Data API 라우트
app/api/analytics/gsc/route.ts        # Search Console API 라우트
app/admin/analytics/page.tsx          # 어드민 애널리틱스 대시보드
app/.mcp.json                         # Notion MCP 서버 설정

# 수정
app/layout.tsx                        # GTM + GA4 스크립트 추가
components/admin/AdminSidebar.tsx     # 애널리틱스 메뉴 추가
.env.example                          # 신규 환경변수 7개 문서화

---

환경변수 설정 가이드

# Google Tag Manager (즉시 적용)
NEXT_PUBLIC_GTM_ID=GTM-NBTS7P8W

# GA4 어드민 대시보드용
GA4_PROPERTY_ID=           # GA4 속성 숫자 ID (analytics.google.com → 관리 → 속성 설정)
GOOGLE_SERVICE_ACCOUNT_EMAIL=         # 서비스 계정 이메일
GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY=   # private_key 값 (\n 그대로)

# Search Console
GSC_SITE_URL=https://www.manbalboy.com

---

다음 작업 예정

SEO 분석 패널 구현 (P0) — Preview 페이지에 키워드 밀도·메타 길이 검증 패널 추가

자동 태그/해시태그 제안 (P1) — AI 1회 호출로 Preview 페이지에 태그 제안 버튼 추가

OG 이미지 자동 생성 (P2) — Next.js ImageResponse 활용, 썸네일 없는 게시물 자동 대응