Super Kitobxon
Super Kitobxon — 온라인 속독 학교 플랫폼: 강좌와 보호된 동영상 강의, 32가지 인터랙티브 트레이너(Schulte 표, RSVP 등), 멘토가 있는 그룹, 도서, 진도 그래프, Click/Payme 결제.
Super Kitobxon은 온라인 속독 학교입니다. 수강생은 강좌를 구매하고, 동영상 강의와 연습 문제를 진행하며, 매일 트레이너로 훈련하고 결과를 그래프로 확인합니다. 저는 플랫폼의 프런트엔드 — 수강생 앱과 관리자 패널 — 를 구축했습니다.
수강생용
- 강좌: 카탈로그, 비교 및 필터, 수강 신청; 강의 트리와 텍스트, 파일, 테스트, 연습 문제가 포함된 강의 플레이어.
- 32가지 트레이너, 7개 카테고리: Schulte 표, RSVP 리더, WPM 테스트, 지그재그·Spritz·블록 기법, '커튼' 읽기 등; 연속 트레이너 프로그램과 결과 기록.
- 진도: 7일, 30일, 90일, 365일 그래프와 통계 카드.
- 그룹과 도서: 멘토가 있는 그룹, PDF 리더와 오디오 플레이어를 갖춘 도서관.
- 집중 도구: 타이머, 메트로놈, 배경 음악.
- SMS 코드로 가입, 기기 세션 관리; Click 및 Payme 결제.
관리자 패널
강좌, 섹션, 강의, 동영상, 테스트, 연습 문제, 사용자, 그룹, 도서, 음악, 트레이너 콘텐츠(단어, 텍스트, 이미지) 관리; 수동 수강 등록과 앱 내 번역 편집기.
기술적 해결책
- 트레이너 레지스트리: 각 트레이너는 필요할 때 로드되며(lazy), 백엔드는 목록만 설정합니다 — API가 작동하지 않아도 로컬 목록으로 동작합니다.
- 공통 트레이너 환경: 사운드, 전체 화면, 속도, 탭이 숨겨지면 일시 정지, 결과를 통일된 형식으로 반환; 연습 결과는 0–1 비율로, 관리자가 정한 점수에 따라 평가됩니다.
- 정확한 타이머: 시간은
setInterval카운트가 아니라Date.now()차이로 계산되어 느린 기기에서도 어긋나지 않습니다. - 동영상 보호: 사용자 및 세션 ID가 표시되는 움직이는 워터마크와 서명된 cookie를 통한 접근.
- 새 버전: 10분마다 새 build를 확인하고 다음 페이지 전환 시 업데이트합니다 — 연습 도중에는 절대 업데이트하지 않습니다.
- 타입 지정 API: 타입은 백엔드의 OpenAPI 스키마에서 생성됩니다; 4개 언어, 키릴 문자 텍스트는 우즈베크어 라틴 문자에서 자동 생성; 테스트 파일 62개.
나의 역할
프런트엔드 전체 담당: 43개 페이지, 246개 컴포넌트, 32가지 트레이너. 백엔드(Django)는 별도 팀이 담당합니다.
결과
수강생은 강좌, 연습, 일일 트레이닝을 하나의 플랫폼에서 진행하고 읽기 속도가 어떻게 향상되는지 그래프로 확인합니다.