21 KiB
21 KiB
라온누리 - 개발 로드맵
최종 업데이트: 2025-11-13 (다국어 지원 시스템)
초등학생을 위한 창작 글쓰기 교육 플랫폼 개발 계획
현재 개발 단계
Phase 1: 핵심 기능 (진행 중 - 99% 완료)
Phase 1: 핵심 기능 (현재)
목표: 사용자가 가입하고 글을 작성할 수 있는 기본 기능 완성
✅ 완료된 작업
| 항목 | 설명 | 완료일 |
|---|---|---|
| 프로젝트 설정 | Next.js 16, React 19, TypeScript 설정 | 2025-10-25 |
| Firebase 연동 | Firebase Auth 설정 및 초기화 | 2025-10-26 |
| 로그인 기능 | 이메일/비밀번호 로그인 | 2025-10-27 |
| Google OAuth | Google 소셜 로그인 | 2025-10-27 |
| 상태 관리 | Zustand 인증 스토어 구현 | 2025-10-27 |
| 랜딩 페이지 | Hero, Features, How It Works, CTA 섹션 | 2025-10-28 |
| 네비게이션 | Navbar 및 다크모드 지원 | 2025-10-28 |
| SEO 최적화 | 메타데이터, OpenGraph, StructuredData | 2025-10-28 |
| 커스텀 테마 | Chakra UI v3 테마 시스템 구축 | 2025-10-28 |
| 회원가입 기능 | LoginDialog 페이드 전환, 비밀번호 강도 게이지, HIBP API 연동 | 2025-10-28 |
| 인증 기반 라우팅 | /와 /home 분리, 자동 리다이렉트 구현 |
2025-10-29 |
| 글쓰기 페이지 | Tiptap 순수 텍스트 에디터 (포맷팅 없음), Editable 제목, LocalStorage 자동 저장, 하단 고정 버튼 | 2025-10-30 |
| Firestore 연동 | 글 저장/불러오기/삭제 서비스 함수 구현 | 2025-10-30 |
| Manager 패턴 도입 | WritingManager 구현 (싱글톤), Firestore 호출 레이어 분리, Firebase Functions 전환 대비 | 2025-10-30 |
| 주제 선택 기능 | TopicManager, TopicSelector 컴포넌트, 개인 주제 시스템, 템플릿 미리채우기 (제목/내용) | 2025-10-30 |
| 개인 주제 생성 UI | CreateTopicDialog 구현, 태그 입력 필드 (키보드 네비게이션, 방향키 선택, Backspace/Delete 삭제) | 2025-10-31 |
| 팀 코드 시스템 (백엔드) | 한글 팀 코드 생성 ("춤추는 파란 사자"), Anonymous Auth, teamService/studentService, PIN SHA-256, currentStudent 중심 authStore 재설계, 정식 계정 연결 (linkWithCredential) | 2025-11-06 |
| 팀 관리 UI | 팀 목록(/team), 팀 생성(/team/create), 멤버 페이지(/team/[teamId]), 관리 페이지(/team/[teamId]/manage), 학생 로그인 플로우 개선 (이름 입력, 완료 화면) | 2025-11-06 |
| 용어 변경 | "클래스" → "팀", "교사" → "소유자", ownerId 기반 시스템, 누구나 팀 생성 가능 | 2025-11-06 |
| Semantic 토큰 적용 | 브랜드 컬러 우선 사용, fg/bg/border 토큰, 다크 모드 대응 | 2025-11-06 |
| 학생 관리 기능 | 팀 관리 페이지에 학생별 관리 메뉴 (이름 수정, 강퇴), Menu + Dialog UI | 2025-11-07 |
| 매니저 패턴 API 전환 | TeamManager, StudentManager를 API 호출 방식으로 전환, Firestore 직접 호출 제거 | 2025-11-07 |
| API 타입 시스템 구축 | ApiResponse, HttpMethod Enum, Team/Student API 타입 정의 (23개 엔드포인트) | 2025-11-07 |
| 클라이언트 캐싱 구현 | BaseManager에 in-memory 캐싱 (TTL, 자동 무효화), callApiWithCache 메서드 | 2025-11-07 |
| API 명세서 작성 | API_SPEC.md 작성 (전체 엔드포인트, 권한, 캐싱 전략) | 2025-11-07 |
| 타입 Enum화 | TeamSecurityMode, TopicCategory/Difficulty/OwnerType을 Enum으로 전환 | 2025-11-07 |
| 팀 주제 시스템 | 팀 소유자가 팀 주제 생성 가능, ownerId = teamId 방식, TopicSelector에 배지 표시 | 2025-11-07 |
| 아키텍처 단순화 | students → users 컬렉션 전환, PIN 제거, UID 기반 통합, 팀별 닉네임 시스템, authStore 단순화 | 2025-11-07 |
| 그룹 기능 완전 제거 | Group 관련 타입/API/UI 제거, 팀(Team) 기능만 사용 | 2025-11-07 |
| 팀 목록 조회 개선 | getMyTeams() 소유+참여 팀 모두 반환, getAllUserTeams() 서버 함수 추가, 중복 제거 | 2025-11-07 |
| UserManager 개선 | getUser() 404 시 null 반환, 팀 코드 로그인 시 신규 사용자 생성 플로우 개선 | 2025-11-07 |
| TopicSelector UI 개선 | 드롭다운 메뉴에 팀/개인 주제 배지 표시, 선택 전에도 주제 타입 확인 가능 | 2025-11-07 |
| T_ prefix 제거 | 팀 주제 ownerId에서 T_ prefix 제거, ownerId = teamId 직접 사용 | 2025-11-07 |
| 5단계 보안 레벨 시스템 | TeamSecurityLevel enum (1-5), 팀별 보안 정책 선택, 명단 관리 API | 2025-11-10 |
| User 타입 최소화 | FirestoreUser/User 분리, Firebase Auth를 Single Source of Truth로, 데이터 중복 제거 | 2025-11-10 |
| 닉네임 저장 위치 변경 | users.nicknames → team.members[uid].nickname 이동, TeamMember 타입 확장 | 2025-11-10 |
| authStore DB 연동 | combineUserData로 Firebase Auth + Firestore 자동 결합, userManager.getUser() 활용 | 2025-11-10 |
| memberUids 제거 | Team.memberUids 필드 제거, Object.keys(members) 사용, 데이터 중복 제거 | 2025-11-10 |
| SecurityLevelSelector | RadioCard 기반 보안 레벨 선택 UI, framer-motion 애니메이션, 그라데이션 배경 | 2025-11-10 |
| AllowListManager | 명단 관리 컴포넌트 (TagsInput), Enter/쉼표 구분 입력 지원 | 2025-11-10 |
| API Routes 구현 | 보안 레벨 변경, 명단 관리 API (RESTful 원칙), POST/DELETE 메서드 구분 | 2025-11-10 |
| lib/server/team 확장 | updateTeamSecurityLevel, add/removeAllowedName/Email, 자동 명단 생성 | 2025-11-10 |
| react-icons 전환 | 이모티콘 → react-icons/lu로 전환 (LuGlobe, LuClipboardList 등) | 2025-11-10 |
| 다중 글조각 관리 | DraftManager (localStorage, 최대 10개), SavedDraftsDialog, 2초 debounce 자동 저장, 저장 상태 표시 | 2025-11-10 |
| 테마 슬롯 레시피 | Dialog, Select slot recipe 추가 (자동 배경색, border, shadow) | 2025-11-10 |
| TopicSelector 그룹핑 | ItemGroup으로 자유/팀/개인 주제 구분, 팀 주제에 팀 이름 표시, Separator 추가 | 2025-11-10 |
| TopicOption 확장 | teamName 필드 추가, TopicManager에서 팀 정보 조회 (동적 import) | 2025-11-10 |
| 주제 변경 경고 Dialog | 작성 중 내용이 있을 때 주제 변경 시 경고 Dialog 표시, 임시 저장 안내 | 2025-11-10 |
| 실시간 피드백 시스템 | Vertex AI 기반 텍스트 분석, ScoreDisplay 컴포넌트, Delta 전송 (토큰 40% 절감), 서버 캐싱 (LRU) | 2025-11-11 |
| Multi-Region Failover | 3개 region 자동 전환 (도쿄/싱가포르/미국), Region health tracking, Exponential backoff, RPM 3배 증가 (15→45) | 2025-11-11 |
| 서비스 레이어 분리 | vertexAI.ts (범용 래퍼), textAnalysisService.ts (분석 로직), regionHealthManager.ts (상태 관리) | 2025-11-11 |
| 문서화 완료 | TECHNICAL_IMPLEMENTATION.md, SERVICE_DIRECTION.md 전면 개편 (Vertex AI 기반) | 2025-11-11 |
| Google AI SDK 마이그레이션 | @google-cloud/vertexai → @google/genai (v1.29.0), Response Schema 지원, Gemini 2.0+ 기능 |
2025-11-11 |
| 텍스트 분석 평가 기준 개편 | 오감(4점) + 감정(2점) + 대화(2점) + 의성어(2점), descriptive → emotion, 프롬프트 최적화 (칭찬 강화, 제안 0~1개) |
2025-11-11 |
| 분석 히스토리 시스템 | Draft.analysisHistory 추가 (최대 5개), AI가 수정 과정 인식, 이전 버전 비교 피드백 | 2025-11-11 |
| 맞춤법 검사 서비스 | spellingService.ts (Gemini 기반), 독립적 debounce (5초) | 2025-11-11 |
| 글 작성 패턴 분석 시스템 | patternAnalysisService.ts, WritingPatternDialog/Display, 최근 10개 글 종합 분석, AI 평가 및 맞춤형 추천, 5분 캐싱 | 2025-11-11 |
| 실시간 하이라이트 시스템 | SpellingHighlight/SensoryWordHighlight Extensions, 맞춤법(빨간 물결)/감각 단어(색상별) 하이라이트, ScoreDisplay/SpellingErrorDisplay 제거 | 2025-11-11 |
| 인터랙티브 툴팁 | EditorTooltip, 하이라이트 클릭 시 상세 정보 표시 (맞춤법: 원본→수정+이유, 감각 단어: 타입+격려), Portal + ESC/외부 클릭 | 2025-11-11 |
| Toast 알림 추가 | 텍스트 분석/맞춤법 검사 시작/완료/실패 알림, 점수/에러 개수 표시, 로딩 상태 (duration: Infinity) | 2025-11-11 |
| Writing API 구현 | POST /api/writing (글 생성), GET/PUT/DELETE /api/writing/[id] (조회/수정/삭제), POST /api/writing/user (목록), POST /api/writing/recent (최근 글), src/lib/server/writing.ts (Firestore CRUD), 권한 체크 (작성자만), 텍스트 통계 자동 계산 | 2025-11-12 |
| 패턴 분석 - 팀 소유자 기능 | 3가지 분석 타입 (self/by-team/by-topic), API 권한 체크, 팀 주제 필터링, WritingPatternDialog Props 확장, TopicMemberAnalysisSection (UI만), 팀 관리 페이지에 멤버 분석 메뉴 | 2025-11-12 |
| Content Hash 기반 3단계 캐싱 | 글 목록 해시 생성 (id+updatedAt), L1: localStorage (영구, LRU 10개), L2: Firestore patternAnalyses (영구), L3: Server in-memory (5분, 50개), 변경 자동 감지, AI 비용 절감 (전체 사용자 기준 1회 분석), contentHash.ts + patternCacheManager.ts + patternAnalysis.ts | 2025-11-12 |
| 실시간 글쓰기 모니터링 | Firebase Realtime Database 기반 실시간 통신 (Redis Pub/Sub 방식), WritingSessionManager (5초 주기 통계 전송, 미리보기 요청-응답, 상세 디버그 로그), LiveWritingMonitor (주제 Select, 모든 팀 멤버 표시, StudentMonitorCard), 3가지 상태 관리 (작성 중/나감/대기 중, 정렬 순서, 색상별 시각화), 글쓰기 페이지 모니터링 (contentRef 최적화), onDisconnect() 자동 정리, 작성 속도 계산 (클라이언트, 글자/분, charDiff*12), Sparkline 그래프 (Area Chart, 최근 10개, 0 표시), 인터랙티브 툴팁 (속도+시간), 30초 타임아웃 체크 (lastUpdated), 마지막 통계 유지 (Firebase 삭제되어도 유지), database.rules.json (topicId 레벨 읽기), @chakra-ui/charts+recharts, 완전 무료 (100명) | 2025-11-12 |
| 다국어 지원 시스템 (i18n) | next-intl 라이브러리 설치 및 설정, [locale] 라우팅 구조 변경 (/ko/, /en/, /ja/*), middleware.ts 생성 (브라우저 언어 자동 감지, Accept-Language 헤더), 3개 언어 번역 파일 생성 (messages/ko.json, messages/en.json, messages/ja.json - 각 407줄, 220+ 키), Navbar 번역 (4개 링크), LocaleSwitcher 드롭다운 메뉴 개선 (국기 이모지 🇰🇷 🇺🇸 🇯🇵, 현재 언어 체크 표시, Portal 사용), Landing 페이지 전체 번역 (Hero, Features, Steps, CTA, Footer - 20+ 항목), Home 페이지 전체 번역 (Welcome, QuickStart 9개 액션 카드, RecentActivity), 인증 컴포넌트 전체 번역 (LoginDialog, LoginForm, SignupForm, UserProfileButton, StudentLoginFlow, SavedDraftsDialog - 70+ 항목), Team 페이지 전체 번역 (List, Create, Detail, Manage + SecurityLevelSelector - 60+ 항목), Write 페이지 번역 (분석/저장 메시지, 버튼), 일본어 어린이 친화적 표현 (한자 최소화, ひらがな 우선), site.ts 텍스트를 번역 파일로 이동 (사이트명, 태그라인, 저작권), localeDetection: true 설정, NEXT_LOCALE 쿠키 저장, next.config.ts에 next-intl 플러그인 추가, i18n/routing.ts + i18n/request.ts 설정, 타입 체크 통과, CLAUDE.md에 다국어 필수 규칙 추가 | 2025-11-13 |
🚧 진행 중
| 항목 | 설명 | 진행률 |
|---|
📋 예정 작업
| 항목 | 설명 | 우선순위 | 예상 일정 |
|---|---|---|---|
| 서버 사이드 Redis 캐싱 | API Routes에 Redis 캐싱, Rate Limiting 추가 | 🟡 중간 | 2025-11-13 |
| 내가 쓴 글 목록 | /home에 최근 글 표시, 글 목록 페이지 |
🔴 높음 | 2025-11-13 |
| 글 수정 기능 | 기존 글 불러와서 수정 | 🔴 높음 | 2025-11-13 |
| 이미지 업로드 | Firebase Storage 연동 | 🟡 중간 | 2025-11-14 |
| 주제별 학생 분석 API | GET /api/topic/[topicId]/writers (주제로 글 쓴 학생 목록) | 🟡 중간 | 2025-11-14 |
Phase 1 완료 목표: 2025년 11월 15일
Phase 2: 학습 시스템
목표: 체계적인 학습 콘텐츠 제공
예상 기간: 2025년 11월 16일 ~ 12월 15일
주요 기능
| 항목 | 설명 | 우선순위 |
|---|---|---|
| 학습 페이지 UI | /learn 페이지 레이아웃 |
🔴 높음 |
| 레슨 목록 | 카테고리별 레슨 표시 | 🔴 높음 |
| 레슨 상세 페이지 | 이론, 예시, 연습문제 표시 | 🔴 높음 |
| 진행 상황 트래킹 | 완료한 레슨 체크 및 진행률 | 🔴 높음 |
| 퀴즈/연습 문제 | 객관식, 주관식 문제 시스템 | 🟡 중간 |
| 레슨 검색/필터 | 난이도, 카테고리별 필터링 | 🟢 낮음 |
데이터 준비
- 초급 레슨 콘텐츠 작성 (10개)
- 중급 레슨 콘텐츠 작성 (10개)
- 연습 문제 제작 (각 레슨당 3-5개)
Phase 2 완료 목표: 2025년 12월 15일
Phase 3: 게임화 요소
목표: 학습 동기 부여를 위한 게임화 시스템
예상 기간: 2025년 12월 16일 ~ 2026년 1월 31일
주요 기능
| 항목 | 설명 | 우선순위 |
|---|---|---|
| 레벨 시스템 | 경험치 계산 및 레벨업 로직 | 🔴 높음 |
| 레벨업 애니메이션 | 축하 모달 및 이펙트 | 🟡 중간 |
| 스티커 페이지 UI | /stickers 갤러리 레이아웃 |
🔴 높음 |
| 스티커 획득 시스템 | 조건 확인 및 자동 부여 | 🔴 높음 |
| 스티커 알림 | 획득 시 축하 애니메이션 | 🟡 중간 |
| 경험치 표시 | 네비게이션 또는 프로필에 XP바 | 🟢 낮음 |
| 연속 출석 시스템 | Streak 계산 및 보상 | 🟡 중간 |
데이터 준비
- 스티커 디자인 제작 (50개)
- 스티커 획득 조건 정의
- 레벨별 경험치 테이블 설계
Phase 3 완료 목표: 2026년 1월 31일
Phase 4: 사용자 경험 강화
목표: 사용자 편의성 및 관리 기능 개선
예상 기간: 2026년 2월 1일 ~ 3월 15일
주요 기능
| 항목 | 설명 | 우선순위 |
|---|---|---|
| ProfileDialog (마이페이지) | Dialog 형식 대시보드 (탭 기반) | 🔴 높음 |
| ├─ 내정보 탭 | 프로필 정보, 레벨, XP 표시 | 🔴 높음 |
| ├─ 내글 탭 | 작성한 글 목록 (페이지네이션) | 🔴 높음 |
| ├─ 통계 탭 | 글 수, 레벨, 스티커 통계 차트 | 🟡 중간 |
| └─ 설정 탭 | 프로필 편집, 비밀번호 변경, 계정 설정 | 🟡 중간 |
| 글 검색 | 제목/내용 기반 검색 | 🟡 중간 |
| 알림 시스템 | 인앱 알림 (스티커, 레벨업) | 🟢 낮음 |
| 알림 센터 | 알림 목록 및 설정 | 🟢 낮음 |
Dialog 구조:
ProfileDialog (UserProfileButton 클릭 시 열림)
├─ Tabs: 내정보 | 내글 | 통계 | 설정
├─ 내정보: ProfileCard, LevelBadge, ExperienceBar
├─ 내글: WritingHistory (목록 + 페이지네이션)
├─ 통계: StatsWidget, 차트
└─ 설정: ProfileEditForm, PasswordChangeForm
Phase 4 완료 목표: 2026년 3월 15일
Phase 5: 고급 기능
목표: 부모님 참여 및 관리자 기능
예상 기간: 2026년 3월 16일 ~ 5월 31일
주요 기능
| 항목 | 설명 | 우선순위 | 상태 |
|---|---|---|---|
| ✅ 백엔드 완료 (Phase 1) | |||
| ✅ 백엔드 완료 (Phase 1) | |||
| 부모님 모드 | 자녀 진행 상황 대시보드 (정식 계정 연결 활용) | 🔴 높음 | ⏳ 예정 |
| 피드백 시스템 | 글에 댓글/평점 작성 | 🔴 높음 | ⏳ 예정 |
| 학습 리포트 | 주간/월간 활동 리포트 | 🟡 중간 | ⏳ 예정 |
| 목표 설정 | 일일/주간 목표 설정 | 🟢 낮음 | ⏳ 예정 |
| 관리자 패널 | 주제/레슨 관리 UI | 🔴 높음 | ⏳ 예정 |
| 사용자 관리 | 사용자 목록, 통계 | 🟡 중간 | ⏳ 예정 |
| 콘텐츠 에디터 | 주제/레슨 CRUD | 🔴 높음 | ⏳ 예정 |
| 스티커 에디터 | 스티커 업로드 및 관리 | 🟡 중간 | ⏳ 예정 |
역할 시스템
enum UserRole {
STUDENT = 'student', // 학생
PARENT = 'parent', // 부모님
TEAM_OWNER = 'team_owner', // 팀 소유자
ADMIN = 'admin', // 관리자
}
Phase 5 완료 목표: 2026년 5월 31일
Phase 6: 최적화 및 확장 (향후 계획)
예상 기간: 2026년 6월 이후
성능 최적화
- 이미지 최적화 (Next.js Image)
- 번들 크기 최적화
- 코드 스플리팅 개선
- Lighthouse 점수 개선 (목표: 95+)
추가 기능 (검토 중)
- 네이버/카카오 소셜 로그인
- 글 공유 기능 (SNS, 링크)
- 친구 시스템 (팔로우, 친구 추가)
- 글쓰기 대회/챌린지
- AI 글쓰기 도우미 (맞춤법, 문법 제안)
- 음성 녹음 기능
- 그림 그리기 도구 통합
- 모바일 앱 (React Native)
우선순위 정의
| 기호 | 우선순위 | 설명 |
|---|---|---|
| 🔴 | 높음 | 핵심 기능, 빠른 개발 필요 |
| 🟡 | 중간 | 중요하지만 유연한 일정 |
| 🟢 | 낮음 | 추가 개선 사항, 여유 있을 때 |
마일스톤
M1: MVP 출시 (2025년 11월 15일)
- 회원가입/로그인
- 글쓰기 기본 기능
- 주제 선택 및 저장
M2: 학습 시스템 추가 (2025년 12월 15일)
- 레슨 콘텐츠 제공
- 진행 상황 트래킹
M3: 게임화 완성 (2026년 1월 31일)
- 레벨 시스템
- 스티커 컬렉션
M4: 베타 출시 (2026년 3월 15일)
- ProfileDialog (마이페이지) 및 통계
- 알림 시스템
M5: 정식 출시 (2026년 5월 31일)
- 부모님 모드
- 관리자 패널
개발 원칙
1. 사용자 중심 설계
- 초등학생이 쉽게 사용할 수 있는 직관적 UI
- 읽기 쉬운 큰 글씨와 명확한 아이콘
- 복잡한 기능은 단계적으로 안내
2. 성능 최적화
- 빠른 페이지 로딩 (목표: < 2초)
- 부드러운 애니메이션 (60fps)
- 효율적인 데이터 로딩 (페이지네이션, 캐싱)
3. 접근성 (Accessibility)
- 키보드 네비게이션 지원
- 스크린 리더 호환
- WCAG 2.1 AA 준수
4. 보안 및 개인정보
- 학생 개인정보 보호
- Firestore 보안 규칙 철저히 적용
- HTTPS 통신 필수
5. 확장 가능성
- 모듈화된 컴포넌트 구조
- 타입 안전성 (TypeScript)
- 명확한 데이터 모델
기술 부채 관리
현재 기술 부채
| 항목 | 설명 | 해결 계획 |
|---|---|---|
| ✅ 해결됨 (2025-10-30) | ||
| 테스트 부재 | 단위/통합 테스트 없음 | Phase 4에서 추가 예정 |
| 에러 바운더리 | 전역 에러 처리 미흡 | Phase 4에서 개선 예정 |
| minH 스크롤 이슈 | write 페이지 불필요한 스크롤 | 검토 필요 |
팀 구성 (현재)
| 역할 | 담당자 | 주요 업무 |
|---|---|---|
| Full Stack Developer | - | 전체 개발 |
| UI/UX Designer | - | 디자인 및 사용자 경험 |
| Content Creator | - | 레슨/주제 콘텐츠 작성 |
성공 지표 (KPI)
MVP 단계 (M1)
- 회원가입 사용자 50명
- 작성된 글 100개 이상
- 평균 세션 시간 5분 이상
베타 단계 (M4)
- 활성 사용자 200명
- 일일 활성 사용자(DAU) 50명
- 레슨 완료율 70% 이상
정식 출시 (M5)
- 활성 사용자 1,000명
- 일일 활성 사용자(DAU) 200명
- 사용자 만족도 4.5/5.0 이상
- 평균 재방문율 60% 이상
리스크 관리
| 리스크 | 발생 가능성 | 영향도 | 대응 방안 |
|---|---|---|---|
| 개발 일정 지연 | 중간 | 높음 | 기능 우선순위 재조정, MVP 먼저 출시 |
| 사용자 이탈 | 낮음 | 높음 | 게임화 요소 강화, 정기적 콘텐츠 업데이트 |
| Firebase 비용 초과 | 낮음 | 중간 | 사용량 모니터링, 쿼리 최적화 |
| 콘텐츠 부족 | 중간 | 중간 | 외부 작가 섭외, 사용자 제작 콘텐츠 |
관련 문서
- PROJECT_STRUCTURE.md - 프로젝트 구조
- TECH_STACK.md - 기술 스택
- DATA_MODELS.md - 데이터 모델
- CLAUDE.md - Claude Code 가이드
© 2024 BlueNovaLab. All rights reserved.