KMA stud.io LMS
기업교육 학습관리시스템
2024.01 - 2026.02
프론트엔드 개발
4인
프로젝트 소개
KMA stud.io는 한국능률협회의 기업교육 학습관리시스템(LMS)으로, 이러닝 콘텐츠, 라이브 강의, 자격인증 과정 등 다양한 교육 서비스를 제공하는 통합 플랫폼입니다. 사용자 웹과 관리자 페이지를 Monorepo 아키텍처로 구축하여 기업 임직원들에게 최적화된 학습 경험을 제공합니다.
주요 기능
- HLS 기반 동영상 스트리밍 플레이어 (진도율 추적, 미리보기)
- 나이스페이 결제 시스템 연동 (멤버십/과정 결제)
- 교육담당자 대시보드 및 기업교육과정 관리
- AI 챗봇 시스템 (SSE 기반 실시간 응답)
- 수료증/자격증 발급 및 인쇄 기능
- CKEditor 기반 콘텐츠 에디터 (이미지, 영상 임베드)
- 회원/비회원/교담자 권한별 접근 제어
- 반응형 웹앱 (모바일/태블릿/데스크톱)
기술 스택
Development Process
문제 발견부터 성과까지의 여정
Problem Discovery
기업교육 시장에서 이러닝, 라이브 강의, 자격인증 과정 등 다양한 교육 콘텐츠를 통합 관리하고, 기업 고객과 개인 사용자 모두에게 최적화된 학습 경험을 제공하는 플랫폼이 필요했습니다. 또한 관리자가 콘텐츠, 회원, 결제를 효율적으로 관리할 수 있는 백오피스 시스템이 요구되었습니다.
사용자/관리자 앱 간 코드 중복 및 일관성 유지 어려움
복잡한 권한 체계(회원사/비회원사/교담자/일반사용자) 관리
동영상 스트리밍 진도율 정확도 및 비정상 종료 시 데이터 손실
다양한 결제 상태 및 멤버십 관리의 복잡성
대용량 영상/첨부파일 업로드 시 타임아웃 및 UX 문제
Requirements
Functional
- 이러닝/라이브/자격인증 콘텐츠 학습 및 관리
- HLS 기반 동영상 플레이어 및 진도율 추적
- 나이스페이 결제 연동 (카드/무통장입금)
- 멤버십 구독 및 과정별 결제 시스템
- 수료증/자격증 발급 및 인쇄
- 교육담당자 전용 기업교육과정 관리
- AI 챗봇 기반 학습 지원
- 공지사항/FAQ/1:1문의 시스템
Non-Functional
- 모바일/태블릿/데스크톱 반응형 UI
- 서버 컴포넌트 기반 초기 로딩 최적화
- 결제 시스템 안정성 및 보안
- Monorepo 기반 코드 재사용성 및 일관성
- MSW 기반 백엔드 독립적 개발 환경
Technical Challenges
Challenge
Monorepo 환경에서 사용자 웹(Next.js)과 관리자(Vite+React) 간 공통 패키지 관리 및 빌드 최적화
Solution
Turborepo + pnpm Workspaces 조합으로 효율적인 멀티 프로젝트 관리 체계 수립. @repo/ui, @repo/utils, @repo/tailwind-config 등 공유 패키지 분리로 코드 재사용성 극대화. 빌드 캐싱을 통한 CI/CD 파이프라인 최적화
Challenge
복잡한 권한 시스템(회원사/비회원사/교담자/일반사용자)에 따른 콘텐츠 접근 제어
Solution
Next.js 미들웨어 기반 권한 처리 로직 구현. Context API를 활용한 전역 권한 상태 관리로 컴포넌트별 조건부 렌더링 및 라우트 보호 적용
Challenge
HLS 동영상 스트리밍 진도율 정확도 확보 및 비정상 종료 시 데이터 보존
Solution
beforeunload 이벤트 활용한 종료 시점 데이터 저장. 주기적 서버 동기화 로직으로 실시간 진도 업데이트. 브라우저 탭 전환 감지를 통한 학습 상태 관리
Challenge
나이스페이 결제 시스템 연동 및 다양한 결제/환불 상태 관리
Solution
결제 상태별(미결제/결제완료/미입금/결제취소) UI 피드백 및 예외 처리 로직 구현. 멤버십 구독과 과정별 결제를 구분한 결제 플로우 설계. 계산서 발행 및 영수증 기능 통합
Challenge
대용량 영상/첨부파일 업로드 시 안정성 및 사용자 경험 확보
Solution
청크 업로드 방식 도입으로 대용량 파일 안정적 전송. 프로그레스 바 UI로 실시간 업로드 상태 피드백. CDN 연동을 통한 파일 배포 최적화
Achievements
Metrics
- Turborepo 기반 Monorepo 아키텍처로 2개 앱 + 6개 공유 패키지 통합 관리
- 17개 도메인 feature 모듈 기반 Feature-Sliced Design 적용
- 700+ 커밋 이력의 지속적인 기능 개선 및 유지보수
- 3단계 반응형 브레이크포인트(sm/l/xl) 완전 대응
Qualitative
- Next.js 15 App Router 및 서버 컴포넌트 활용 SEO/성능 최적화
- TanStack Query + Zustand 조합의 효율적인 상태 관리 패턴 확립
- MSW 기반 목업 시스템으로 백엔드 독립적 개발 환경 구축
- PR 기반 코드 리뷰 및 TC(Test Case) 기반 체계적 QA 프로세스 수립
Learnings
- 대규모 Monorepo 아키텍처 설계 및 패키지 관리 경험
- Next.js App Router와 React Server Components 심화 활용
- PG사(나이스페이) 결제 연동 및 금융 트랜잭션 처리 노하우
- HLS 기반 동영상 스트리밍 및 진도 추적 시스템 구현
- 복잡한 권한 체계 설계 및 미들웨어 기반 접근 제어