Period
2025.12.8 - 2025.12.24
Role
TBD
Team
2
Stack
Sqli
Overview
스프라이트 애니메이션을 활용한 퀴즈 게이미피케이션 앱.
퀴즈 진행에 맞춰 반응하는 캐릭터 모션으로 학습 몰입도를 높입니다.
My Work
01
스프라이트 애니메이션 시스템
캐릭터 반응 모션을 시퀀스 단위로 제어하는 애니메이션 매니저를 구현했습니다.
Vue.jsCanvasTypeScript
- 프레임 시퀀스 기반 상태 머신
- 정답 / 오답 / 연속 정답 콤보 모션 분기
- GPU 가속 트랜스폼으로 모바일 부하 최소화
기능 화면 / 다이어그램
02
퀴즈 도메인 / 채점 로직
문제 유형별 채점기와 보상 계산 로직을 백엔드에 구현했습니다.
DjangoDRFSQLite
- 객관식 · 주관식 · OX 채점 인터페이스 통일
- 콤보 / 정답률 기반 가중 보상 산정
- 풀이 이력 시계열 저장
기능 화면 / 다이어그램
03
학습 통계 / 약점 분석
사용자별 풀이 기록을 집계해 카테고리별 정답률을 제공했습니다.
Django ORMChart
- 카테고리별 정답률 집계 쿼리
- 최근 N회 트렌드 시각화
- 취약 카테고리 추천
기능 화면 / 다이어그램
Architecture
모바일 학습 몰입 · 단순한 운영 · 가벼운 자원 관리
Mobile-First · Monolithic Backend · Sprite-Based Animation
Client
Server
Data
Electron
Web
WA-SQLite
PowerSync
Spring Boot
FastAPI
PostgreSQL
Redis
Vault
LLM API
SyncRESTExternal
모바일 우선 UI
Vue.js + PWA
- 이동 중 학습 습관 형성을 위해 모바일 화면을 1차 타겟으로 설계
- PWA로 설치 마찰 없이 홈 화면 접근 가능
단일 백엔드
Django + DRF
- 팀 규모(2인) 대비 운영 부담을 줄이기 위해 모놀리식 선택
- ORM · 어드민 · 인증을 기본 제공받아 초기 속도 확보
경량 스토리지
SQLite
- 초기 트래픽 규모 대비 운영 비용 / 백업 비용 최소화
- 단일 파일 DB로 배포 파이프라인 단순화
스프라이트 자원 관리
Sprite Sheet + Manifest
- 다수의 모션을 단일 스프라이트 시트로 묶어 HTTP 요청 절감
- 매니페스트 기반 프리로딩으로 초기 진입 끊김 최소화
Troubleshooting
01
스프라이트 로딩 지연으로 첫 모션 끊김
퀴즈 시작 직후 첫 스프라이트가 늦게 로드되어 캐릭터 모션이 한 박자 늦게 나타나는 문제가 있었습니다.
↓
퀴즈 진입 직전에 매니페스트 기반으로 필요한 스프라이트를 사전 디코딩하도록 변경했습니다. 이후 첫 모션부터 즉시 재생되어 체감 지연이 사라졌습니다.
참고 시각 자료
02
정답 연타 시 채점 중복 호출
정답 버튼 연타 시 채점 API가 중복 호출되어 보상이 중복 계산되는 사례가 발생했습니다.
↓
클라이언트에서는 제출 후 버튼을 잠금 처리하고, 서버에서는 (사용자, 문제, 라운드) 키로 멱등성 토큰을 두어 중복 요청을 무시하도록 개선했습니다.
참고 시각 자료
Results
가입자
??
누적 풀이
??
DAU
??
재방문률
??
Retrospective
좋았던 점
- 프로젝트를 진행하며 잘 해낸 점을 기록합니다.
- 스프라이트 애니메이션을 직접 설계 / 구현해보며 렌더링 파이프라인을 깊이 이해했습니다.
배운 점
- Vue 컴포지션 API와 Canvas 상호 운용 방식을 익혔습니다.
- Django DRF의 시리얼라이저 / 권한 / 페이지네이션 기본기를 다졌습니다.
아쉬운 점
- 테스트 코드 커버리지를 충분히 확보하지 못했습니다.
- 통계 화면의 시각화 디자인을 더 다듬지 못한 점이 아쉽습니다.
다음에는
- 정답률 기반 적응형 출제(IRT 등)를 도입해보고 싶습니다.
- 스프라이트 자원 파이프라인을 도구화해 자산 추가 비용을 줄이고 싶습니다.