인지발달 교구 문제 관리·진행 기록 콘솔
MVP 플레이 화면 이후의 확장 방향으로 문제 라이브러리, 문제 편집기, 아이별 진행 기록, 새로운 인지발달 콘텐츠 팩을 한 콘솔에 통합한 구현한 프로젝트입니다.
프로젝트 개요
MVP 플레이 화면 이후의 확장 방향으로 문제 라이브러리, 문제 편집기, 아이별 진행 기록, 새로운 인지발달 콘텐츠 팩을 한 콘솔에 통합한 구현한 프로젝트입니다. P1과 같은 Node.js·Express·PostgreSQL 기반에 Redis 캐시와 S3 이미지 저장을 더해 문제 추가와 콘텐츠 확장이 쉬운 구조를 설계합니다.
작업 범위
- 문제 라이브러리: 콘텐츠 종류와 난이도별로 문제를 탐색하고 카드 미리보기로 내용을 확인합니다
- 문제 편집기: 관리자가 격자 위에 조각을 놓아 새 문제와 정답 배치를 직접 만들고 미리 풀어봅니다
- 진행 기록: 아이별로 풀이한 문제와 시도 횟수, 재시도 흐름을 시간순으로 확인합니다
- 콘텐츠 팩: 퍼즐 외에 순서 맞추기·모양 찾기 같은 다른 인지발달 콘텐츠를 팩 단위로 추가합니다
주요 업무
- 문제 라이브러리 화면: 문제 카드를 SVG 썸네일로 렌더링하고 필터 조건을 URL과 서버 쿼리에 동기화합니다
- 문제 편집기 화면: P1의 배치 엔진을 재사용하는 편집 모드와 정답 배치 저장 API를 구성합니다
- 진행 기록 화면: 풀이 이벤트를 기록 테이블에 저장하고 아이별 집계 뷰로 조회합니다
- 콘텐츠 팩 화면: 콘텐츠 팩 스키마와 이미지 업로드 파이프라인으로 확장 콘텐츠를 등록합니다
프로젝트 핵심 과제
편집기와 플레이 화면이 같은 배치 상태 모델을 공유하면서 편집 전용 동작을 분리하는 구조 설계
문제 유형이 늘어날 때 렌더러와 정답 판정 규칙을 유형별로 교체 가능하게 만드는 인터페이스 정의
아이별 풀이 이벤트가 쌓일수록 늘어나는 기록 조회를 집계 뷰와 캐시로 나누는 전략
보호자 권한과 관리자 권한에 따라 문제 편집과 기록 열람 범위를 구분하는 접근 제어 설계
핵심 기능 상세
문제 라이브러리
콘텐츠 종류와 난이도별로 문제를 탐색하고 카드 미리보기로 내용을 확인합니다. 문제 카드를 SVG 썸네일로 렌더링하고 필터 조건을 URL과 서버 쿼리에 동기화합니다.
- 필터·정렬 조건을 URL 쿼리와 동기화하는 Custom Hook 설계
- 문제 목록 조회에 커서 기반 페이지네이션과 Redis 캐시 적용
- 보드 썸네일을 문제 JSON에서 SVG로 즉시 생성하는 렌더러 재사용
문제 데이터와 렌더러를 분리하여 새 콘텐츠 종류가 추가돼도 같은 라이브러리 화면에서 탐색할 수 있도록 설계합니다.
문제 편집기
관리자가 격자 위에 조각을 놓아 새 문제와 정답 배치를 직접 만들고 미리 풀어봅니다. P1의 배치 엔진을 재사용하는 편집 모드와 정답 배치 저장 API를 구성합니다.
- P1 배치 엔진을 편집 모드로 재사용하여 정답 배치를 직접 지정
- 저장 전 규칙 검사(조각 겹침·보드 이탈·정답 존재 여부) 적용
- 문제 JSON 버전 필드와 초안·게시 상태 전이를 서버에서 검증
만든 문제를 바로 플레이 화면에서 시험해 볼 수 있도록 편집기와 플레이 화면이 같은 상태 모델을 공유합니다.
진행 기록
아이별로 풀이한 문제와 시도 횟수, 재시도 흐름을 시간순으로 확인합니다. 풀이 이벤트를 기록 테이블에 저장하고 아이별 집계 뷰로 조회합니다.
- 풀이 시작·조각 이동·정답 확인 이벤트를 기록 테이블에 저장
- 아이별 시도 횟수와 문제별 상태를 SQL 뷰로 집계
- 기록 조회 API를 아이·기간 조건으로 분리하고 Redis에 짧게 캐시
시행착오 과정을 이벤트로 남겨 정답 여부뿐 아니라 어떤 순서로 풀었는지 확인할 수 있는 기록 구조를 설계합니다.
콘텐츠 팩
퍼즐 외에 순서 맞추기·모양 찾기 같은 다른 인지발달 콘텐츠를 팩 단위로 추가합니다. 콘텐츠 팩 스키마와 이미지 업로드 파이프라인으로 확장 콘텐츠를 등록합니다.
- 콘텐츠 종류별 스키마를 공통 문제 인터페이스로 추상화
- 팩 이미지 에셋을 AWS S3에 업로드하고 리사이징 규칙 적용
- 팩 활성·비활성 상태에 따른 목록 노출 규칙 서버 검증
문제 유형마다 렌더러만 교체하면 되는 플러그형 구조로 설계하여 새 교구 콘텐츠를 낮은 비용으로 추가합니다.
프로젝트 진행 단계
콘텐츠 공통 스키마·기록 테이블 설계 · 2026.10
문제·콘텐츠 팩·아이·풀이 이벤트 테이블 정의, 공통 문제 인터페이스와 버전 필드 설계
문제 관리·편집 API 구현 · 2026.10
Express·Prisma 기반 문제 CRUD, 초안·게시 상태 전이, 배치 규칙 검증 API 구현
라이브러리·편집기 화면 구현 · 2026.10
필터 탐색 그리드, 우측 상세 서랍, 격자 편집 모드 화면과 SVG 썸네일 렌더러 구현
진행 집계·팩 업로드 연동 · 2026.10
SQL 뷰 집계와 Redis 캐시, S3 이미지 업로드 및 팩 활성 규칙 연동
개발 결과
기술적 주안점
- 문제 데이터와 렌더러를 분리하여 새 콘텐츠 종류가 추가돼도 같은 라이브러리 화면에서 탐색할 수 있도록 설계합니다
- 만든 문제를 바로 플레이 화면에서 시험해 볼 수 있도록 편집기와 플레이 화면이 같은 상태 모델을 공유합니다
- 시행착오 과정을 이벤트로 남겨 정답 여부뿐 아니라 어떤 순서로 풀었는지 확인할 수 있는 기록 구조를 설계합니다
