← 포트폴리오 목록

매스뱅크 콘텐츠 운영 인사이트 대시보드

문제은행 MVP 이후 콘텐츠 운영 현황을 한눈에 파악하도록 과목별·태그별 문항 분포, 활성화 추이, 표시형식 프리셋 적용 이력, 변경 감사로그를 통합한 운영 분석 대시보드를 구현합니다.

집계 파이프라인 Materialized View 설계과목별·태그별 문항 수와 활성화 추이를 사전 집계하는 Materialized View 4종을 설계해 조회 구조를 구축합니다
프리셋 롤백 트랜잭션 구현표시형식 프리셋 적용 이력을 기반으로 이전 프리셋으로 되돌리는 롤백 트랜잭션을 구현합니다
감사로그 diff 뷰어 설계변경 전/후 JSON을 구조적으로 비교해 필드 단위 diff를 렌더링하는 뷰어 컴포넌트를 설계합니다
서비스 타입Web
업종데이터 분석
기술 스택
React 18TypeScriptTailwind CSSRechartsNode.jsExpressPostgreSQLPrismaRedis
주요 기능
  • 운영 현황 인사이트 대시보드
  • 표시형식 프리셋 관리
  • 변경 이력 감사로그
  • 확장 스키마 & API 카탈로그
Overview

프로젝트 개요

범위: 개발, 디자인, 기획

문제은행 MVP 이후 콘텐츠 운영 현황을 한눈에 파악하도록 과목별·태그별 문항 분포, 활성화 추이, 표시형식 프리셋 적용 이력, 변경 감사로그를 통합한 운영 분석 대시보드를 구현합니다. 향후 결제·응시 서비스 확장을 고려한 API 카탈로그와 스키마 뷰어도 함께 제공합니다.

작업 범위

  • 운영 현황 인사이트 대시보드: 관리자가 대시보드 진입 시 과목별 문항 수, 활성/비활성 비율, 최근 등록 추이를 한 화면에서 확인합니다
  • 표시형식 프리셋 관리: 관리자가 표시형식 프리셋을 라이브러리 형태로 관리하고, 특정 분류 범위에 프리셋을 적용하거나 이전 프리셋으로 되돌립니다
  • 변경 이력 감사로그: 관리자가 사용자·기간·작업유형별로 콘텐츠 변경 이력을 필터링하고, 변경 전/후 데이터를 비교하며 CSV로 내보냅니다
  • 확장 스키마 & API 카탈로그: 관리자가 현재 구현된 API 엔드포인트 목록과 향후 결제·응시 서비스 확장을 고려한 스키마 관계를 다이어그램으로 확인합니다

주요 업무

  • 운영 현황 인사이트 대시보드 화면: PostgreSQL Materialized View 기반 집계, Recharts 시계열/도넛 차트, 기간 필터 동기화
  • 표시형식 프리셋 관리 화면: 프리셋 CRUD, 적용 이력 테이블, 롤백 트랜잭션, 적용 전 샘플 미리보기
  • 변경 이력 감사로그 화면: 감사로그 테이블 인덱싱, diff 뷰어, 무한 스크롤, CSV export
  • 확장 스키마 & API 카탈로그 화면: 엔드포인트 카탈로그 뷰어, 확장 테이블 관계 다이어그램, 요청/응답 스키마 예시
매스뱅크 콘텐츠 운영 인사이트 대시보드
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

과목별·태그별 대량 집계 조회가 실시간 조회 성능에 영향을 주지 않도록 설계해야 하며

Materialized View와 Redis 캐시 조합으로 대응합니다

표시형식 프리셋 롤백 시 데이터 정합성을 유지해야 하며

적용 이력을 단일 트랜잭션 단위로 기록해 대응합니다

감사로그가 누적될수록 필터·조회 성능이 저하될 수 있어

복합 인덱스와 무한 스크롤 페이지네이션으로 대응합니다

결제·응시 등 미구현 확장 영역을 실제 구현 범위와 명확히 구분해 표시해야 하며

설계 단계 배지와 별도 카탈로그 화면으로 대응합니다

구현 내용

핵심 기능 상세

핵심 기능 1

운영 현황 인사이트 대시보드

관리자가 대시보드 진입 시 과목별 문항 수, 활성/비활성 비율, 최근 등록 추이를 한 화면에서 확인합니다.

  • PostgreSQL Materialized View로 과목별·태그별 문항 수와 활성화 추이를 사전 집계해 대시보드 조회 부하를 낮춥니다
  • Recharts 기반 시계열·도넛 차트를 구성하고 기간 필터(주간/월간/분기) 변경 시 모든 차트를 동기화합니다
  • 태그 분포 차트 클릭 시 해당 태그의 문항 목록 화면으로 이동하는 드릴다운 인터랙션을 구현합니다

Materialized View 기반 사전 집계와 Recharts 드릴다운 인터랙션을 결합해, 대량 문항 데이터에서도 즉각적인 운영 현황 파악이 가능한 대시보드 구조를 구현합니다.

운영 현황 인사이트 대시보드
운영 현황 인사이트 대시보드 실제 화면
핵심 기능 2

표시형식 프리셋 관리

관리자가 표시형식 프리셋을 라이브러리 형태로 관리하고, 특정 분류 범위에 프리셋을 적용하거나 이전 프리셋으로 되돌립니다. 프리셋 CRUD, 적용 이력 테이블, 롤백 트랜잭션, 적용 전 샘플 미리보기.

  • 표시형식 프리셋 CRUD와 적용 이력 테이블을 설계해 어떤 프리셋이 언제 어떤 분류에 적용됐는지 추적합니다
  • 프리셋 적용을 트랜잭션으로 처리하고, 적용 이력에서 이전 프리셋으로 되돌리는 롤백 로직을 구현합니다
  • 프리셋 적용 전 대상 분류의 문항 샘플에 미리 렌더링해 확인할 수 있는 미리보기 기능을 구현합니다

프리셋 적용 이력과 롤백 트랜잭션을 결합해, 표시형식을 여러 차례 실험적으로 교체해도 이전 상태로 안전하게 복구할 수 있는 운영 구조를 구현합니다.

표시형식 프리셋 관리
표시형식 프리셋 관리 실제 화면
핵심 기능 3

변경 이력 감사로그

관리자가 사용자·기간·작업유형별로 콘텐츠 변경 이력을 필터링하고, 변경 전/후 데이터를 비교하며 CSV로 내보냅니다. 감사로그 테이블 인덱싱, diff 뷰어, 무한 스크롤, CSV export.

  • 사용자·기간·작업유형(생성/수정/삭제) 복합 인덱스를 설계해 대량 감사로그를 빠르게 필터링합니다
  • 변경 전/후 JSON을 diff 형태로 비교해 렌더링하는 뷰어 컴포넌트를 구현합니다
  • 무한 스크롤과 CSV export 기능을 구현해 대량 이력을 성능 저하 없이 탐색·추출할 수 있게 합니다

복합 인덱스 기반 필터링과 diff 뷰어를 결합해, 개발사 개입 없이 관리자가 직접 콘텐츠 변경 이력을 추적·검증할 수 있는 구조를 구현합니다.

변경 이력 감사로그
변경 이력 감사로그 실제 화면
핵심 기능 4

확장 스키마 & API 카탈로그

관리자가 현재 구현된 API 엔드포인트 목록과 향후 결제·응시 서비스 확장을 고려한 스키마 관계를 다이어그램으로 확인합니다. 엔드포인트 카탈로그 뷰어, 확장 테이블 관계 다이어그램, 요청/응답 스키마 예시.

  • 구현된 REST 엔드포인트 메타데이터(경로/버전/설명)를 카탈로그 테이블로 관리하고 화면에 목록화합니다
  • 문항·분류·결제·응시 등 확장 예정 테이블 간 관계를 SVG 다이어그램으로 시각화하는 뷰어를 구현합니다
  • 엔드포인트 선택 시 요청/응답 스키마 예시를 JSON 트리 형태로 렌더링합니다

엔드포인트 카탈로그와 확장 스키마 다이어그램을 결합해, 결제·응시 기능을 구현하지 않고도 향후 확장 지점을 명확히 안내하는 설계 문서 화면을 구현합니다.

확장 스키마 & API 카탈로그
확장 스키마 & API 카탈로그 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

집계 스키마 및 Materialized View 설계 · 2026.09

과목별·태그별 문항 집계, 프리셋 적용 이력, 감사로그 테이블 설계 및 Materialized View 정의

STEP 2

운영 통계 API 개발 · 2026.09

Express 기반 집계 조회 API, 프리셋 적용/롤백 API, 감사로그 필터 API 구현

STEP 3

인사이트 대시보드 UI 개발 · 2026.09

Recharts 기반 대시보드, 프리셋 관리, 감사로그 diff 뷰어 화면 구현

STEP 4

API 카탈로그 & 확장 스키마 뷰어 개발 · 2026.09

엔드포인트 카탈로그 목록, 확장 테이블 관계 SVG 다이어그램 구현

STEP 5

통합 테스트 및 캐시 최적화 · 2026.09

Redis 캐시 적용 검증, 집계 쿼리 성능 점검, 전체 기능 통합 테스트 수행

프로젝트 성과

주요 성과

집계 파이프라인 Materialized View 설계과목별·태그별 문항 수와 활성화 추이를 사전 집계하는 Materialized View 4종을 설계해 조회 구조를 구축합니다
프리셋 롤백 트랜잭션 구현표시형식 프리셋 적용 이력을 기반으로 이전 프리셋으로 되돌리는 롤백 트랜잭션을 구현합니다
감사로그 diff 뷰어 설계변경 전/후 JSON을 구조적으로 비교해 필드 단위 diff를 렌더링하는 뷰어 컴포넌트를 설계합니다
확장 스키마 다이어그램 자동 렌더링결제·응시 등 확장 예정 테이블 관계를 SVG로 자동 렌더링하는 스키마 뷰어를 구현합니다
Highlights

기술적 주안점

  • Materialized View 기반 사전 집계와 Recharts 드릴다운 인터랙션을 결합해, 대량 문항 데이터에서도 즉각적인 운영 현황 파악이 가능한 대시보드 구조를 구현합니다
  • 프리셋 적용 이력과 롤백 트랜잭션을 결합해, 표시형식을 여러 차례 실험적으로 교체해도 이전 상태로 안전하게 복구할 수 있는 운영 구조를 구현합니다
  • 복합 인덱스 기반 필터링과 diff 뷰어를 결합해, 개발사 개입 없이 관리자가 직접 콘텐츠 변경 이력을 추적·검증할 수 있는 구조를 구현합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기