Kotlin Android 개발자를 위한 게이미피케이션 학습 플랫폼
🎮 듀오링고 스타일 XP · 스트릭 · 하트 · 스킬 트리 · 간격 반복 복습
Kotlin으로 Android 앱을 만들다 React Native를 시작하면, 어디서부터 읽어야 할지 막막합니다.
공식 문서는 훌륭하지만 Android 개발자의 시선에서 정리된 학습 경로는 찾기 어렵습니다. 그래서 Kotlin ↔ React Native 코드를 나란히 비교하며 배울 수 있는 단계별 로드맵을 만들었습니다.
읽기만 하면 잊어버리니까 — 듀오링고에서 영감받은 게이미피케이션을 얹었습니다.
| Phase | 주제 | 문서 |
|---|---|---|
| 0 | JavaScript / TypeScript 기초 | 4 |
| 1 | React 핵심 개념 | 4 |
| 2 | 개발 환경 구축 | 3 |
| 3 | 핵심 컴포넌트 & 레이아웃 | 4 |
| 4 | 내비게이션 | 4 |
| 5 | 상태 관리 & 네트워킹 | 4 |
| 6 | New Architecture (JSI, Fabric, Codegen) | 4 |
| 7 | 네이티브 모듈 (TurboModule, Fabric) | 3 |
| 8 | 디버깅 & 테스팅 | 3 |
| 9 | 프로젝트 설계 & 배포 | 3 |
| 10 | 성능 최적화 & 심화 | 3 |
- XP & 레벨 — 퀴즈, 실습, 문서 완료 시 XP 획득. 7단계 레벨 시스템
- 🔥 연속 학습 스트릭 — 매일 접속하면 스트릭 증가, 연속 기록 유지 동기 부여
- ❤️ 하트 — 틀리면 하트 소모, 소진 시 30분 쿨다운 (긴장감 있는 학습)
- 🎯 일일 목표 — 가벼운 5XP부터 도전적인 50XP까지 선택
- 🏆 뱃지 & 업적 — 11종 이상 뱃지 (첫 학습, 콤보, 퀴즈 마스터, 페이즈 마스터 등)
- 🌳 스킬 트리 — 홈 화면에서 전체 학습 진행도를 한눈에 확인
- 🔄 간격 반복 복습 — 망각 곡선 기반 (1→3→7→14→30일) 자동 복습 알림
- 5종 실습 문제 — 코드 배열, 출력 예측, 버그 찾기, 워드뱅크, 분류
- 퀴즈 — 객관식, 빈칸 채우기, 매칭
- Kotlin ↔ RN 코드 비교 — 사이드 바이 사이드 비교 뷰어
- 레슨 모드 — H2 섹션을 카드 단위로 분할하여 단계별 학습
- 효과음 & 축하 이펙트 — Web Audio API 사운드 + Canvas 컨페티
| 분류 | 기술 |
|---|---|
| 프레임워크 | Docsify 4.x (빌드 도구 없음) |
| 호스팅 | GitHub Pages |
| 게이미피케이션 | Vanilla JavaScript (서버리스, localStorage 기반) |
| 효과음 | Web Audio API |
| 축하 이펙트 | Canvas API |
| 다이어그램 | Mermaid.js |
| 테마 | 다크/라이트 토글 (시스템 설정 연동) |
빌드 도구 0개. React도, 번들러도, 서버도 없이 순수 HTML/JS/CSS만으로 동작합니다.
├── index.html # Docsify 설정 & 플러그인 로드
├── _sidebar.md # 사이드바 네비게이션
├── REACT_NATIVE_LEARNING_PLAN.md # 홈 (스킬 트리 + 대시보드)
├── phase-00-javascript-typescript/ ~ phase-10-advanced/
│ └── NN-topic-slug.md # 각 학습 문서
├── assets/
│ ├── css/ # 테마, 프로그레스바, 게이미피케이션 스타일
│ ├── js/core/ # GameCore, Sound, Confetti
│ ├── js/plugins/ # Docsify 커스텀 플러그인
│ └── js/components/ # 스킬 트리, 플레이그라운드
- Kotlin으로 Android 앱을 개발해본 경험이 있는 개발자
- React Native로의 전환 또는 크로스플랫폼 개발을 고려 중인 개발자
- 체계적인 학습 경로가 필요한 React Native 입문자
MIT License
⭐ 도움이 되셨다면 Star를 눌러주세요!
👉 학습 시작하기