← 포트폴리오 목록

추천 기준값·노출 로그 관리 콘솔

MVP 이후 확장으로 추천 기준값을 편집하고 미리 보는 관리 화면, 노출·클릭 로그 조회, 기준값 버전 비교 지표, 추천 결과 점검 도구를 하나의 관리 콘솔로 묶는 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종교육 플랫폼
기술 스택
ReactTypeScriptRechartsNode.jsNestJSTypeORMMySQLMongoDBRedis
주요 기능
  • 추천 기준값 편집기
  • 노출·클릭 로그 조회
  • 기준값 버전 비교 지표
  • 추천 결과 점검 도구

프로젝트 개요

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

MVP 이후 확장으로 추천 기준값을 편집하고 미리 보는 관리 화면, 노출·클릭 로그 조회, 기준값 버전 비교 지표, 추천 결과 점검 도구를 하나의 관리 콘솔로 묶는 구현한 프로젝트입니다. P1과 같은 Node.js·NestJS·MySQL·MongoDB 기반에 Redis 캐시를 더해 설계합니다.

작업 범위

  • 추천 기준값 편집기: 좌측에서 기준 항목(수준 가중치·주제 가중치·최근 노출 제외 기간)을 고르고, 중앙에서 샘플 학습자의 추천 결과 미리보기를 확인하며, 우측에서 값을 수정합니다
  • 노출·클릭 로그 조회: 추천 카드가 노출된 기록과 클릭된 기록을 기간·화면(홈, 학습 완료)·콘텐츠 조건으로 조회하고, 개별 학습자 단위 흐름을 타임라인으로 따라갑니다
  • 기준값 버전 비교 지표: 기준값 버전 두 개를 선택해 같은 기간의 노출 수, 클릭 수, 클릭 비율을 나란히 비교하고 화면별·주제별 분포 차이를 차트로 확인합니다
  • 추천 결과 점검 도구: 특정 학습자를 검색해 그 학습자의 수준 산정 값, 후보 콘텐츠별 점수, 최종 추천 순서와 제외된 사유를 단계별로 확인하고 결과를 내려받습니다

주요 업무

  • 추천 기준값 편집기 화면: 기준값을 버전 단위 초안으로 저장하고, 초안 값으로 샘플 학습자 추천을 미리 계산하는 미리보기 API로 설계합니다
  • 노출·클릭 로그 조회 화면: 노출·클릭 이벤트를 MongoDB 로그 컬렉션에 적재하고, 서버 필터와 페이지네이션을 적용한 조회 API로 설계합니다
  • 기준값 버전 비교 지표 화면: 버전별 로그 집계를 일 단위로 미리 계산해 Redis에 캐시하고, 두 버전 비교 조회 API와 비교 차트로 설계합니다
  • 추천 결과 점검 도구 화면: 추천 계산 과정을 단계별 중간값과 함께 반환하는 점검 API와 CSV 내보내기 엔드포인트로 설계합니다
추천 기준값·노출 로그 관리 콘솔
요구사항 정의

프로젝트 핵심 과제

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

기준값 적용 직후 캐시에 남은 이전 추천 결과와 새 기준 결과가 섞이지 않

캐시 무효화 시점과 적용 순서 설계 필요

노출 로그가 학습자 수에 비례해 쌓이므로 적재 방식과 조회 인덱스

보관 기간 정책 설계 필요

버전 간 비교 지표가 기간별 학습자 구성 차이에 좌우될 수

비교 기준과 해석 주의 문구 설계 필요

관리 화면에서 학습자 개인 단위 로그를 다루므로 조회 권한과 식별 정보 마스킹 규칙 설계

구현 내용

핵심 기능 상세

핵심 기능 1

추천 기준값 편집기

좌측에서 기준 항목(수준 가중치·주제 가중치·최근 노출 제외 기간)을 고르고, 중앙에서 샘플 학습자의 추천 결과 미리보기를 확인하며, 우측에서 값을 수정합니다.

  • 기준값을 MySQL 버전 테이블에 초안·적용 상태로 관리하는 모델 설계
  • 초안 값을 대입해 샘플 학습자의 추천 순서를 계산하는 미리보기 API 구현
  • 좌측 항목 트리·중앙 미리보기·우측 속성 패널이 하나의 편집 상태를 공유하는 React 구조 구현

기준값을 바로 덮어쓰지 않고 초안으로 먼저 계산해 보는 흐름으로, 값 변경이 추천 결과에 주는 영향을 적용 전에 확인하도록 설계합니다.

추천 기준값 편집기
추천 기준값 편집기 실제 화면
핵심 기능 2

노출·클릭 로그 조회

추천 카드가 노출된 기록과 클릭된 기록을 기간·화면(홈, 학습 완료)·콘텐츠 조건으로 조회하고, 개별 학습자 단위 흐름을 타임라인으로 따라갑니다.

  • 노출·클릭 이벤트를 화면·콘텐츠·기준값 버전과 함께 MongoDB에 적재하는 스키마 설계
  • 기간·화면·콘텐츠 조건과 커서 기반 페이지네이션을 처리하는 NestJS 조회 API 구현
  • 학습자 단위 이벤트를 시간순으로 묶어 보여주는 타임라인 컴포넌트 구현

모든 로그에 당시 적용된 기준값 버전을 함께 기록하여, 어떤 기준에서 나온 추천이 노출되고 클릭되었는지 추적하는 구조를 설계합니다.

노출·클릭 로그 조회
노출·클릭 로그 조회 실제 화면
핵심 기능 3

기준값 버전 비교 지표

기준값 버전 두 개를 선택해 같은 기간의 노출 수, 클릭 수, 클릭 비율을 나란히 비교하고 화면별·주제별 분포 차이를 차트로 확인합니다.

  • 버전별·화면별 노출·클릭을 일 단위로 집계하는 집계 테이블과 갱신 작업 구현
  • 비교 조회 결과를 Redis에 짧은 TTL로 캐시하고 집계 갱신 시 키를 무효화하는 규칙 설계
  • Recharts 나란히 막대 차트와 주제별 분포 위젯을 공통 기간 선택기와 연동

비교 대상 두 버전이 같은 기간·같은 집계 기준으로 계산되도록 조회 조건을 하나로 모아, 수치 비교가 어긋나지 않는 구조를 설계합니다.

기준값 버전 비교 지표
기준값 버전 비교 지표 실제 화면
핵심 기능 4

추천 결과 점검 도구

특정 학습자를 검색해 그 학습자의 수준 산정 값, 후보 콘텐츠별 점수, 최종 추천 순서와 제외된 사유를 단계별로 확인하고 결과를 내려받습니다.

  • 추천 서비스가 후보별 점수 항목과 제외 사유를 함께 반환하는 점검 모드 구현
  • 학습자 검색과 후보 점수 표를 서버 필터·정렬로 처리하는 조회 API 구현
  • 화면 조건을 그대로 적용하는 CSV 내보내기 엔드포인트와 스트리밍 응답 구현

운영 로직과 같은 계산 함수를 점검 모드로 재사용하여 점검 화면의 수치와 실제 추천 결과가 같은 코드에서 나오는 구조를 설계합니다.

추천 결과 점검 도구
추천 결과 점검 도구 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

기준값 버전 모델·로그 스키마 설계 · 2026.10

MySQL 기준값 버전 테이블, MongoDB 노출·클릭 로그 스키마와 Redis 캐시 키 규칙 정의

STEP 2

기준값 편집기·미리보기 개발 · 2026.10

초안 저장, 샘플 학습자 미리보기 API, 3패널 편집 화면과 적용 확인 단계 구현

STEP 3

로그 조회·버전 비교 지표 개발 · 2026.10

로그 필터 조회와 타임라인, 일 단위 집계와 Recharts 비교 차트 구현

STEP 4

추천 점검 도구·내보내기 구현 · 2026.10

단계별 중간값 점검 모드와 학습자 검색, CSV 내보내기 엔드포인트 구현

개발 결과

초안 버전 기반 기준값 편집 구조 설계기준값을 초안·적용 버전으로 분리하고 샘플 학습자 미리보기로 변경 영향을 적용 전에 확인하는 편집 흐름 설계
버전 태깅 노출·클릭 로그 구조 구현모든 이벤트에 당시 기준값 버전을 함께 기록하여 버전별 집계와 학습자 단위 추적이 가능한 로그 스키마 구축
동일 조건 버전 비교 조회 구현두 버전의 기간·집계 기준을 하나의 조건으로 묶고 Redis 캐시와 연결하여 비교 수치가 어긋나지 않는 구조 구축
점검 모드 재사용 추천 계산 구현추천 계산 함수가 중간값과 제외 사유를 함께 돌려주는 점검 모드를 두어 화면 수치와 실제 추천이 같은 코드에서 나오는 구조 적용

기술적 주안점

  • 기준값을 바로 덮어쓰지 않고 초안으로 먼저 계산해 보는 흐름으로, 값 변경이 추천 결과에 주는 영향을 적용 전에 확인하도록 설계합니다
  • 모든 로그에 당시 적용된 기준값 버전을 함께 기록하여, 어떤 기준에서 나온 추천이 노출되고 클릭되었는지 추적하는 구조를 설계합니다
  • 비교 대상 두 버전이 같은 기간·같은 집계 기준으로 계산되도록 조회 조건을 하나로 모아, 수치 비교가 어긋나지 않는 구조를 설계합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의