퀴즈 학습 리워드 앱 크리에이터 콘텐츠·등급
크리에이터별·주제별 콘텐츠 탐색, 크리에이터 프로필과 간이 수익 요약, 활동량 기반 등급 현황·혜택, 역할별 접근 제어를 포함한 모바일 앱 화면을 구현하는 프로젝트입니다.
프로젝트 개요
크리에이터별·주제별 콘텐츠 탐색, 크리에이터 프로필과 간이 수익 요약, 활동량 기반 등급 현황·혜택, 역할별 접근 제어를 포함한 모바일 앱 화면을 구현하는 프로젝트입니다. 클라이언트가 명시한 React Native, NestJS, MySQL, MongoDB, AWS ECR·ECS 구성을 기준으로 설계하며, 기존 앱 위에 기능을 얹는 고도화 방식으로 구성합니다.
작업 범위
- 크리에이터·주제별 콘텐츠 탐색: 학습자가 주제 칩과 크리에이터 필터로 퀴즈 콘텐츠 카드를 좁혀 보고, 카드를 누르면 퀵뷰에서 문항 수·적립 리워드·크리에이터 정보를 확인합니다
- 크리에이터 프로필·수익 요약: 크리에이터 프로필에서 등록 콘텐츠 목록과 이번 달 수익·학습 참여 수를 담은 간이 대시보드를 확인합니다. 일반 학습자에게는 프로필 소개와 콘텐츠만 보입니다
- 활동량 기반 등급 현황·혜택: 크리에이터가 현재 등급, 다음 등급까지 남은 활동량, 등급별 혜택을 한 화면에서 확인합니다. 활동량 항목별 기여도도 함께 보여줍니다
- 역할별 접근 제어·배포 구성: 학습자와 크리에이터 역할에 따라 하단 메뉴와 화면 접근 범위가 달라지고, 크리에이터 전환 신청 상태를 확인할 수 있습니다
주요 업무
- 크리에이터·주제별 콘텐츠 탐색 화면: NestJS 목록 API가 주제·크리에이터·정렬 조건을 쿼리로 받고, 콘텐츠 메타는 MongoDB 컬렉션에서 조회하는 구조로 설계합니다
- 크리에이터 프로필·수익 요약 화면: 프로필 API가 요청자의 역할에 따라 응답 필드를 달리하고, 수익 요약은 MySQL 집계 쿼리 결과를 사용하는 구조로 설계합니다
- 활동량 기반 등급 현황·혜택 화면: 등급 산정 배치가 쌓아 둔 활동량 점수를 조회하고, 등급 기준표와 비교해 진행률을 계산하는 구조로 설계합니다
- 역할별 접근 제어·배포 구성 화면: JWT 클레임의 역할 값으로 NestJS 가드와 앱 화면 노출을 함께 제어하고, 서비스는 Docker 이미지로 묶어 AWS ECR·ECS에 올리는 구성으로 설계합니다
프로젝트 핵심 과제
MySQL 사용자·등급 데이터와 MongoDB 콘텐츠 데이터를 함께 조회하는 화면에서 두 저장소 간 식별자 연결과 조회 경계 설계
이미 출시된 앱에 기능을 얹는 고도화 특성상 기존 API 응답 형식을 유지하면서 필드를 추가하는 하위 호환 규칙 설계
크리에이터·학습자 역할이 같은 앱에서 공존하므로 서버 가드와 앱 메뉴 노출 규칙을 한 표로 맞추는 방법 설계
등급 기준이 정책에 따라 조정될 수
기준 변경 시 과거 등급 이력과 현재 진행률이 충돌하지 않도록 기준 버전 관리 설계 필요
핵심 기능 상세
크리에이터·주제별 콘텐츠 탐색
학습자가 주제 칩과 크리에이터 필터로 퀴즈 콘텐츠 카드를 좁혀 보고, 카드를 누르면 퀵뷰에서 문항 수·적립 리워드·크리에이터 정보를 확인합니다.
- 주제·크리에이터·정렬 조건을 쿼리 파라미터로 받는 NestJS 목록 API와 DTO 검증 구현
- MongoDB 복합 인덱스(주제, 크리에이터, 등록일)로 필터 조합 조회 구조 설계
- React Native FlatList 무한 스크롤과 필터 상태의 URL형 쿼리 동기화 구현
필터 조합이 늘어도 같은 쿼리 규칙으로 조회되도록 필터 스키마를 하나로 통일하여 앱과 API가 같은 조건 표현을 공유하는 구조를 설계합니다.
크리에이터 프로필·수익 요약
크리에이터 프로필에서 등록 콘텐츠 목록과 이번 달 수익·학습 참여 수를 담은 간이 대시보드를 확인합니다. 일반 학습자에게는 프로필 소개와 콘텐츠만 보입니다.
- 역할에 따라 수익 필드를 포함하거나 제외하는 NestJS 응답 직렬화 인터셉터 구현
- 월별 수익을 MySQL 일 단위 집계 테이블에서 합산하는 요약 쿼리 설계
- 프로필 탭(콘텐츠·요약)을 React Native 상단 탭 컴포넌트로 구성
같은 프로필 화면을 역할별 응답 필드 차이만으로 학습자용과 크리에이터용으로 나누어, 화면 코드를 분기하지 않는 구조를 설계합니다.
활동량 기반 등급 현황·혜택
크리에이터가 현재 등급, 다음 등급까지 남은 활동량, 등급별 혜택을 한 화면에서 확인합니다. 활동량 항목별 기여도도 함께 보여줍니다.
- 콘텐츠 등록·학습 참여·완주 수를 가중 합산하는 활동량 점수 산식 정의
- 등급 기준표를 MySQL 테이블로 두고 현재 점수와 비교해 진행률을 계산하는 API 구현
- 등급 변경 이력을 MongoDB 이벤트 컬렉션에 남기고 앱 타임라인에 표시
등급 기준을 코드가 아닌 기준표 데이터로 관리하여 기준이 바뀌어도 화면과 산정 로직이 같은 표를 읽도록 설계합니다.
역할별 접근 제어·배포 구성
학습자와 크리에이터 역할에 따라 하단 메뉴와 화면 접근 범위가 달라지고, 크리에이터 전환 신청 상태를 확인할 수 있습니다.
- JWT 역할 클레임을 읽는 NestJS 가드와 데코레이터로 라우트별 접근 규칙 구현
- 앱 하단 메뉴를 역할 값에 따라 구성하는 내비게이션 설정 구조 설계
- Dockerfile, ECR 이미지 푸시, ECS 서비스 정의를 GitHub Actions 워크플로로 구성
서버 가드와 앱 메뉴가 같은 역할 표를 기준으로 동작하도록 정의하여 화면 노출과 API 허용 범위가 어긋나지 않는 구조를 설계합니다.
프로젝트 진행 단계
기존 앱 구조 파악·데이터 모델 설계 · 2026.10
MySQL 사용자·등급 테이블과 MongoDB 콘텐츠·이력 컬렉션 관계 정리, 역할 클레임 규칙 정의
콘텐츠 탐색 API·필터 화면 구현 · 2026.10
NestJS 목록 API와 MongoDB 복합 인덱스, React Native 필터·카드 그리드·퀵뷰 구현
프로필·등급 현황 화면 구현 · 2026.10
역할별 응답 직렬화, 활동량 점수 조회 API, 등급 진행 막대와 혜택 목록 화면 구현
접근 제어·ECR/ECS 배포 구성 · 2026.10
JWT 역할 가드와 메뉴 구성, Docker 이미지 빌드와 ECR 푸시·ECS 서비스 정의 워크플로 구성
개발 결과
기술적 주안점
- 필터 조합이 늘어도 같은 쿼리 규칙으로 조회되도록 필터 스키마를 하나로 통일하여 앱과 API가 같은 조건 표현을 공유하는 구조를 설계합니다
- 같은 프로필 화면을 역할별 응답 필드 차이만으로 학습자용과 크리에이터용으로 나누어, 화면 코드를 분기하지 않는 구조를 설계합니다
- 등급 기준을 코드가 아닌 기준표 데이터로 관리하여 기준이 바뀌어도 화면과 산정 로직이 같은 표를 읽도록 설계합니다
