← 포트폴리오 목록

학습 이력 기반 맞춤 콘텐츠 추천 앱

학습 이력과 학습 수준을 바탕으로 다음에 풀 퀴즈 콘텐츠를 추천하는 로직, 홈 화면 추천 영역, 학습 완료 화면 추천 영역을 구현하는 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종교육 플랫폼
기술 스택
React NativeTypeScriptNode.jsNestJSTypeORMMySQLMongoDBAWS ECRAWS ECS
주요 기능
  • 학습 수준 기반 추천 로직
  • 홈 화면 추천 영역
  • 학습 완료 화면 추천
  • 추천 API·AWS 배포 구성

프로젝트 개요

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

학습 이력과 학습 수준을 바탕으로 다음에 풀 퀴즈 콘텐츠를 추천하는 로직, 홈 화면 추천 영역, 학습 완료 화면 추천 영역을 구현하는 프로젝트입니다. 클라이언트가 명시한 React Native, NestJS, MySQL, MongoDB, AWS ECR·ECS 구성을 기준으로 설계하며, 기존 앱 위에 추천 기능을 얹는 고도화 방식으로 구성합니다.

작업 범위

  • 학습 수준 기반 추천 로직: 학습자의 최근 풀이 이력과 정답 비율로 학습 수준을 산정하고, 수준과 관심 주제에 맞는 다음 콘텐츠 카드를 추천 근거 문구와 함께 보여줍니다
  • 홈 화면 추천 영역: 기존 앱 홈 화면에 오늘의 추천 영역을 추가하여 주제 칩으로 좁혀 보고, 카드를 누르면 퀵뷰에서 문항 수와 적립 리워드를 확인한 뒤 바로 시작합니다
  • 학습 완료 화면 추천: 퀴즈를 마친 직후 결과와 적립 리워드를 보여주고, 방금 푼 결과를 반영한 다음 추천 콘텐츠를 이어서 제안하여 바로 다음 학습으로 연결합니다
  • 추천 API·AWS 배포 구성: 추천 결과를 조회하는 API 명세와 응답 예시, 환경별 설정, 배포 구성을 한 화면에서 확인하고 결과보고서에 들어갈 화면 캡처 목록을 점검합니다

주요 업무

  • 학습 수준 기반 추천 로직 화면: 수준 산정 모델과 점수식, 이력이 부족할 때의 폴백 규칙을 정의하고 NestJS 추천 모듈이 MySQL·MongoDB 이력을 집계해 결과를 돌려주는 구조로 설계합니다
  • 홈 화면 추천 영역 화면: 홈 추천 API 응답을 기존 홈 화면 컴포넌트 구조에 맞춰 연결하고, 응답 지연 시 기존 홈 화면이 그대로 보이도록 영역 단위로 분리하는 구조로 설계합니다
  • 학습 완료 화면 추천 화면: 풀이 결과 저장 직후 추천 API를 호출해 방금 결과가 반영된 목록을 받아오고, 기존 학습 완료 화면 하단에 추천 영역을 추가하는 구조로 설계합니다
  • 추천 API·AWS 배포 구성 화면: NestJS 추천 API를 Docker 이미지로 묶어 AWS ECR·ECS에 올리는 구성과 설계서·결과보고서 산출 항목을 함께 정리하는 구조로 설계합니다
학습 이력 기반 맞춤 콘텐츠 추천 앱
요구사항 정의

프로젝트 핵심 과제

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

MySQL 풀이 결과와 MongoDB 콘텐츠 메타를 함께 조회하는 추천 계산에서 두 저장소 간 식별자 연결과 조회 경계 설계

이미 출시된 앱에 기능을 얹는 고도화 특성상 기존 API 응답 형식을 유지하면서 필드를 추가하는 하위 호환 규칙 설계

기존 학습 이력 데이터의 품질과 누락 정도에 따라 추천 결과가 달라질 수

이력 부족 시 폴백 기준과 점검 방법 설계 필요

발주사 저장소·DB 접근을 전제로 하므로 접근 권한 확보 전 임시 샘플 데이터로 로직을 검증하는 절차 설계

구현 내용

핵심 기능 상세

핵심 기능 1

학습 수준 기반 추천 로직

학습자의 최근 풀이 이력과 정답 비율로 학습 수준을 산정하고, 수준과 관심 주제에 맞는 다음 콘텐츠 카드를 추천 근거 문구와 함께 보여줍니다.

  • 최근 풀이 이력의 정답 비율과 난이도를 가중 합산하는 학습 수준 산정식 정의
  • 수준 적합도·관심 주제·최근 미노출 여부를 합산하는 추천 점수식과 폴백 규칙 구현
  • NestJS 추천 모듈이 MySQL 풀이 결과와 MongoDB 콘텐츠 메타를 결합하는 서비스 계층 설계

점수식의 가중치를 코드가 아닌 설정값으로 분리하여 같은 추천 모듈이 설정만 바꿔 다른 기준으로 동작하도록 설계합니다.

학습 수준 기반 추천 로직
학습 수준 기반 추천 로직 실제 화면
핵심 기능 2

홈 화면 추천 영역

기존 앱 홈 화면에 오늘의 추천 영역을 추가하여 주제 칩으로 좁혀 보고, 카드를 누르면 퀵뷰에서 문항 수와 적립 리워드를 확인한 뒤 바로 시작합니다.

  • 기존 홈 화면 컴포넌트 트리에 추천 영역을 독립 컴포넌트로 삽입하는 구조 설계
  • React Native FlatList 가로 카드 목록과 주제 칩 필터 구현
  • 추천 API 실패·지연 시 영역만 스켈레톤 후 숨김 처리하는 오류 경계 구현

추천 영역을 기존 화면과 분리된 컴포넌트로 만들어, 기존 홈 화면 코드를 최소한만 수정하는 고도화 방식을 설계합니다.

홈 화면 추천 영역
홈 화면 추천 영역 실제 화면
핵심 기능 3

학습 완료 화면 추천

퀴즈를 마친 직후 결과와 적립 리워드를 보여주고, 방금 푼 결과를 반영한 다음 추천 콘텐츠를 이어서 제안하여 바로 다음 학습으로 연결합니다.

  • 풀이 결과 저장 이벤트 이후 추천을 재계산하는 NestJS 서비스 호출 순서 설계
  • 정답 비율에 따라 같은 난이도·한 단계 위 난이도를 구분해 제안하는 규칙 구현
  • 기존 학습 완료 화면 하단에 추천 카드 영역과 다시 풀기 버튼을 추가하는 컴포넌트 구성

방금 푼 결과가 같은 요청 흐름 안에서 추천에 반영되도록 저장과 추천 호출 순서를 정의하여 결과와 추천이 어긋나지 않는 구조를 설계합니다.

학습 완료 화면 추천
학습 완료 화면 추천 실제 화면
핵심 기능 4

추천 API·AWS 배포 구성

추천 결과를 조회하는 API 명세와 응답 예시, 환경별 설정, 배포 구성을 한 화면에서 확인하고 결과보고서에 들어갈 화면 캡처 목록을 점검합니다.

  • 추천 조회 API의 요청·응답 DTO와 Swagger 명세 구성
  • Dockerfile, ECR 이미지 푸시, ECS 서비스 정의를 GitHub Actions 워크플로로 구성
  • 환경별 설정 파일과 추천 점수식 설정값 분리 구조 설계

추천 설계서의 점수식과 API 명세가 같은 설정값을 참조하도록 정리하여 문서와 구현이 어긋나지 않는 구조를 설계합니다.

추천 API·AWS 배포 구성
추천 API·AWS 배포 구성 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

기존 앱 구조 파악·추천 로직 설계 · 2026.10

학습 이력 데이터 구조 정리, 수준 산정 모델·점수식·폴백 규칙을 설계서로 정의

STEP 2

NestJS 추천 모듈·API 구현 · 2026.10

MySQL·MongoDB 이력 집계와 추천 점수 계산 서비스, 조회 API와 DTO 검증 구현

STEP 3

홈·학습 완료 화면 추천 영역 구현 · 2026.10

기존 React Native 화면에 추천 컴포넌트 삽입, 퀵뷰와 완료 화면 추천 연결

STEP 4

AWS 배포 구성·결과보고서 정리 · 2026.10

Docker 이미지 빌드와 ECR 푸시·ECS 서비스 정의, 화면 캡처와 결과보고서 작성

개발 결과

설정값 기반 추천 점수식 설계학습 수준·관심 주제·최근 노출 여부를 합산하는 점수식의 가중치를 설정값으로 분리하여 코드 수정 없이 기준을 바꾸는 구조 설계
이력 부족 대응 폴백 규칙 구현신규 학습자와 이력이 적은 학습자에게 입문 콘텐츠를 제안하는 단계별 폴백 규칙을 추천 모듈에 적용
기존 화면 최소 수정 추천 영역 구조 구현홈과 학습 완료 화면에 독립 컴포넌트로 추천 영역을 삽입하고 오류 경계로 분리하여 기존 화면을 유지하는 구조 구축
ECR·ECS 배포 구성 코드화Dockerfile과 GitHub Actions로 이미지 빌드, ECR 푸시, ECS 서비스 갱신 흐름을 코드로 정의하여 배포 재현 구조 구축

기술적 주안점

  • 점수식의 가중치를 코드가 아닌 설정값으로 분리하여 같은 추천 모듈이 설정만 바꿔 다른 기준으로 동작하도록 설계합니다
  • 추천 영역을 기존 화면과 분리된 컴포넌트로 만들어, 기존 홈 화면 코드를 최소한만 수정하는 고도화 방식을 설계합니다
  • 방금 푼 결과가 같은 요청 흐름 안에서 추천에 반영되도록 저장과 추천 호출 순서를 정의하여 결과와 추천이 어긋나지 않는 구조를 설계합니다

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

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

프로젝트 문의