[SJSP-001] 파편화된 다중 운영 데이터의 중앙화: 게임 루틴 & 콘텐츠 트래커 (v12.0 Final)

업무 외 취미 활동으로 바이브코딩을 활용해 다중 게임의 일간·주간 루틴 관리, 2차원 플레이 패턴 분석, 일일 과금 가계부를 하나로 통합한 서버리스 웹 앱 구축 및 고도화 기록

게시 2026/11/15

By Naru

7 분읽는 시간

SJSP (Sungjo Side Project) 제1호: 업무 외 취미 활동으로 바이브코딩을 활용해 다중 게임의 일간·주간 루틴 관리, 2차원 플레이 패턴 분석, 일일 과금 가계부를 하나로 통합한 서버리스 웹 앱 구축 및 고도화 기록입니다.

1. 프로젝트 개요 (Overview)

프로젝트명: 게임 루틴 & 콘텐츠 트래커 (Game Routine & Content Tracker)
고도화 이력: 초기 MVP(v1.0)부터 실사용 피드백과 데이터 검증을 거쳐 v12.0 FINAL까지 12차례 메이저 업데이트 완료
기술 스택: Google Sheets (5-Sheet DB) + Google Apps Script + HTML5 / Tailwind CSS / Chart.js (단일 파일 아키텍처)
인프라 운영비: 0원 (Serverless)

실사용 과정에서 발생하는 데이터 누락이나 통계 착시를 막기 위해, 운영·데이터 관점의 4가지 핵심 설계 원칙을 적용했습니다.

설정(Config), 플레이 로그(Play_Logs), 지출 내역(Spend_Logs), 회고록(Daily_Journal), 대시보드 영역을 엄격히 분리했습니다.
특정 게임이나 콘텐츠를 중단하더라도 데이터를 물리 삭제(deleteRow)하지 않고 활성화 = FALSE 기반 Soft-Delete(중단/복귀)로 처리하여 과거 누적 통계의 무결성을 100% 보존합니다.

KST 기준일 시프트: 자정(00:00)이 아닌 게임별 고유 리셋 시각(04시~06시)을 역산해 논리적 기준일(yyyy-MM-dd (요일))을 산출합니다. 주간·월간 초기화 1일 전에는 ⏰ 오늘 리셋 임박 배지가 자동 점등됩니다.
일정 이원화 및 D-3 필터: 직접 체크하는 한정(DDay)과 상시 배너 이벤트(Event)를 분리하고, 종료일 임박순으로 자동 정렬합니다. 오픈 4일 이상 남은 미래 일정은 [🗓️ 진행 예정] 모달로 격리해 메인 화면의 시각적 피로도를 제거했습니다.

7요일 × 24시간 컬러 타일 히트맵을 도입해 주력 접속 패턴을 입체적으로 시각화했습니다.
마우스 호버 시 긴 텍스트로 인한 줄바꿈 떨림(Hover Jitter)을 막기 위해 안내 바를 고정 1줄(truncate)로 설계했으며, 특정 타일을 클릭하면 해당 시간대의 최신 상세 기록 모달을 즉시 조회할 수 있습니다.

주기별 분해 차트: 일회성 ‘한정’ 건수가 많아 꾸준한 ‘일간·주간’ 루틴보다 과도하게 부각되는 착시를 막기 위해, 전체 합산 도넛 차트 ↔ 주기별 누적 막대 차트 전환 기능을 제공합니다.
현실적 지출 단가 계산: 기간별 일평균 과금액은 단순 접속일이 아닌 선택 기간 내 실제 경과한 달력 일수로 나누어 왜곡 없는 지출 지표를 제공합니다.

단계	주요 고도화 내용	해결한 문제 및 인사이트
STEP 1 (v1.0 ~ v7.0)	루틴 트래커에 건별 과금 가계부와 데일리 회고록 결합	성격이 다른 플레이·지출·소감 데이터를 독립 시트로 분리해 올인원 허브 구축
STEP 2 (v8.0 ~ v11.5)	중복 `# 태그` 폐기, 일정 이원화, 모달·드롭다운 UI 다이어트	불필요한 입력 폼과 중복 태그를 걷어내고 `[⚙️ 설정]` 드롭다운으로 수납해 메인 스크롤 최소화
STEP 3 (v11.7 ~ v12.0)	마감 임박순 자동 정렬, 2D 히트맵 드릴다운, 기간 지정 일별/월별 자동 축 전환	실데이터 누적 후 발견된 통계 착시와 호버 떨림 현상을 개선해 데이터 해상도 완성

기획과 데이터 스키마의 중요성: 기능을 무작정 덧붙이는 것보다, 현장에서 직관적으로 쓸 수 있는 미니멀한 UX와 예외 케이스를 통제하는 탄탄한 데이터 구조가 시스템의 완성도를 결정한다는 점을 확인했습니다.
재사용 가능한 표준 프레임워크화: 본 프로젝트에서 검증된 서버리스 데이터 설계 및 프론트엔드 최적화 원칙은 향후 진행할 후속 프로젝트(SJSP-002 등)의 표준 템플릿으로 자산화했습니다.

본 프로젝트의 상세 아키텍처 설계 원칙과 트러블슈팅 비하인드, 후속 프로젝트용 표준 프롬프트는 아래 회고록 문서에서 확인하실 수 있습니다.