프로젝트 배경
1. 문제점
- 기업들이 법정의무교육 이수 관리에 많은 시간과 비용 소모
- 오프라인 집합교육의 일정 조율 어려움
- 교육 이수 현황 파악 및 수료증 관리의 비효율성
- 미이수 시 과태료 부과 리스크 (최대 500만원)
2. 프로젝트 목표
- 온라인으로 언제 어디서나 법정의무교육 이수 가능
- 기업 담당자가 실시간으로 직원들의 교육 현황 파악
- 수료증 자동 발급 및 5년간 안전한 보관
- 교육 마감일 알림으로 미이수 방지
3. 주안점
- 사용자 중심 설계: 비개발자인 HR 담당자도 쉽게 사용할 수 있는 직관적 UI
- 법적 요건 충족: 스킵 방지, 최소 학습 시간 보장 등 법정교육 요건 반영
- 확장 가능한 구조: 새로운 교육 과목이나 기능 추가가 용이한 모듈화 설계
- 기업들이 법정의무교육 이수 관리에 많은 시간과 비용 소모
- 오프라인 집합교육의 일정 조율 어려움
- 교육 이수 현황 파악 및 수료증 관리의 비효율성
- 미이수 시 과태료 부과 리스크 (최대 500만원)
2. 프로젝트 목표
- 온라인으로 언제 어디서나 법정의무교육 이수 가능
- 기업 담당자가 실시간으로 직원들의 교육 현황 파악
- 수료증 자동 발급 및 5년간 안전한 보관
- 교육 마감일 알림으로 미이수 방지
3. 주안점
- 사용자 중심 설계: 비개발자인 HR 담당자도 쉽게 사용할 수 있는 직관적 UI
- 법적 요건 충족: 스킵 방지, 최소 학습 시간 보장 등 법정교육 요건 반영
- 확장 가능한 구조: 새로운 교육 과목이나 기능 추가가 용이한 모듈화 설계
프로젝트 성과
정량적 성과
- 개발 기간: 2~3개월 내 MVP 완성 (1인 개발)
- 페이지 수: 30+ 페이지 (관리자/기업관리자/수강생 대시보드 포함)
- 컴포넌트 수: 50+ 재사용 가능한 UI 컴포넌트
- 페이지 수: 30+ 페이지 (관리자/기업관리자/수강생 대시보드 포함)
- 컴포넌트 수: 50+ 재사용 가능한 UI 컴포넌트
정성적 성과
- 빠른 개발 속도: 체계적인 컴포넌트 설계로 예상 일정 내 개발 완료
- 유지보수 용이성: 코드 스플리팅, 관심사 분리로 유지보수성 확보
- 유지보수 용이성: 코드 스플리팅, 관심사 분리로 유지보수성 확보
핵심 기능

실시간 교육 현황 대시보드
전체/부서별/개인별 이수율을 한눈에 파악. 미이수자 리스트 및 마감일 임박 알림.
진행 단계
요구사항 분석
2025.10.
법정의무교육 법규 분석, 경쟁 서비스 벤치마킹, 기능 명세 작성
설계
2025.10.
정보구조(IA) 설계, 와이어프레임, DB 스키마 설계
UI/UX 디자인
2025.10.
디자인 시스템 구축, 반응형 UI 설계, 다크모드
프론트엔드 개발
2025.10.
컴포넌트 개발, 페이지 구현, 상태 관리
백엔드 개발
2025.10.
API 개발, 인증/인가, 데이터 연동
프로젝트 상세
1. 포트폴리오 소개
기업 HR 담당자와 직원을 위한 법정의무교육 온라인 학습 관리 시스템(LMS) 구축 프로젝트입니다.
- 서비스 카테고리: 교육/HR, B2B SaaS, LMS(Learning Management System)
- 메인 타깃:
- 기업 인사/총무 담당자 (교육 관리 및 이수 현황 파악)
- 기업 소속 직원 (법정의무교육 수강 및 수료증 발급)
- 핵심 가치: 산업안전보건교육, 성희롱 예방교육 등 5대 법정의무교육을 온라인으로 간편하게 이수하고 관리할 수 있는 원스톱 플랫폼
2. 작업 범위
담당 역할: 1인 풀스택 개발 (기획 + 개발)
- 요구사항 정의: 법정의무교육 법규 분석, 기능 명세 작성
- 화면 설계: 와이어프레임, 정보구조(IA) 설계
- UI/UX 디자인: 반응형 웹 디자인, 다크모드 지원
- Front-end 개발: Next.js 15, React 19, TypeScript, Tailwind CSS
- Back-end 개발: Next.js API Routes, JWT 인증
- 상태 관리: Redux Toolkit
- 배포/운영: Vercel 배포, CI/CD 구축
지원 환경: 반응형 웹 (PC, 태블릿, 모바일)
3. 주요 업무 (핵심 기능)
기능 1: 역할 기반 접근 제어 시스템
- 마스터 관리자: 전체 기업/사용자 관리, 시스템 설정, 통계 대시보드
- 기업 관리자: 소속 직원 관리, 교육 배정, 이수 현황 모니터링
- 수강생: 배정된 교육 수강, 퀴즈 응시, 수료증 조회/다운로드
- JWT 기반 인증 + 미들웨어 기반 라우트 보호
기능 2: 동영상 강의 시스템
- 스킵 방지 기능 적용 (법정교육 요건 충족)
- 진도율 자동 저장 및 이어보기 지원
- 강의별 챕터 구분 및 학습 시간 추적
기능 3: 퀴즈 평가 시스템
- 강의별 퀴즈 자동 출제
- 합격/불합격 판정 및 재응시 기능
- 오답 노트 및 해설 제공
기능 4: 수료증 발급/관리
- 교육 이수 완료 시 자동 수료증 발급
- PDF 다운로드 및 출력 지원
- 법정 보관 기간(5년) 관리
기능 5: 직원 관리 시스템
- 엑셀 일괄 등록: 대량 직원 데이터 업로드
- 개별 직원 등록/수정/삭제
- 부서별, 직급별 그룹 관리
기능 6: 교육 현황 대시보드
- 실시간 이수율 현황 (전체/부서별/개인별)
- 미이수자 리스트 및 알림 발송
- 교육 마감일 관리 및 리마인더
4. 주안점 (기술적 특징)
- 법규 준수: 산업안전보건법, 남녀고용평등법 등 법정의무교육 관련 법령 요구사항 충족
- 보안: JWT 인증, 역할 기반 접근 제어, SSL 암호화, 개인정보보호법 준수
- 확장성: 모듈화된 컴포넌트 설계, 새로운 교육 과목 추가 용이
- 사용성: 직관적인 UI/UX, 다크모드 지원, 반응형 디자인
- 성능: Next.js SSR/SSG 최적화, 이미지 최적화, 코드 스플리팅
기업 HR 담당자와 직원을 위한 법정의무교육 온라인 학습 관리 시스템(LMS) 구축 프로젝트입니다.
- 서비스 카테고리: 교육/HR, B2B SaaS, LMS(Learning Management System)
- 메인 타깃:
- 기업 인사/총무 담당자 (교육 관리 및 이수 현황 파악)
- 기업 소속 직원 (법정의무교육 수강 및 수료증 발급)
- 핵심 가치: 산업안전보건교육, 성희롱 예방교육 등 5대 법정의무교육을 온라인으로 간편하게 이수하고 관리할 수 있는 원스톱 플랫폼
2. 작업 범위
담당 역할: 1인 풀스택 개발 (기획 + 개발)
- 요구사항 정의: 법정의무교육 법규 분석, 기능 명세 작성
- 화면 설계: 와이어프레임, 정보구조(IA) 설계
- UI/UX 디자인: 반응형 웹 디자인, 다크모드 지원
- Front-end 개발: Next.js 15, React 19, TypeScript, Tailwind CSS
- Back-end 개발: Next.js API Routes, JWT 인증
- 상태 관리: Redux Toolkit
- 배포/운영: Vercel 배포, CI/CD 구축
지원 환경: 반응형 웹 (PC, 태블릿, 모바일)
3. 주요 업무 (핵심 기능)
기능 1: 역할 기반 접근 제어 시스템
- 마스터 관리자: 전체 기업/사용자 관리, 시스템 설정, 통계 대시보드
- 기업 관리자: 소속 직원 관리, 교육 배정, 이수 현황 모니터링
- 수강생: 배정된 교육 수강, 퀴즈 응시, 수료증 조회/다운로드
- JWT 기반 인증 + 미들웨어 기반 라우트 보호
기능 2: 동영상 강의 시스템
- 스킵 방지 기능 적용 (법정교육 요건 충족)
- 진도율 자동 저장 및 이어보기 지원
- 강의별 챕터 구분 및 학습 시간 추적
기능 3: 퀴즈 평가 시스템
- 강의별 퀴즈 자동 출제
- 합격/불합격 판정 및 재응시 기능
- 오답 노트 및 해설 제공
기능 4: 수료증 발급/관리
- 교육 이수 완료 시 자동 수료증 발급
- PDF 다운로드 및 출력 지원
- 법정 보관 기간(5년) 관리
기능 5: 직원 관리 시스템
- 엑셀 일괄 등록: 대량 직원 데이터 업로드
- 개별 직원 등록/수정/삭제
- 부서별, 직급별 그룹 관리
기능 6: 교육 현황 대시보드
- 실시간 이수율 현황 (전체/부서별/개인별)
- 미이수자 리스트 및 알림 발송
- 교육 마감일 관리 및 리마인더
4. 주안점 (기술적 특징)
- 법규 준수: 산업안전보건법, 남녀고용평등법 등 법정의무교육 관련 법령 요구사항 충족
- 보안: JWT 인증, 역할 기반 접근 제어, SSL 암호화, 개인정보보호법 준수
- 확장성: 모듈화된 컴포넌트 설계, 새로운 교육 과목 추가 용이
- 사용성: 직관적인 UI/UX, 다크모드 지원, 반응형 디자인
- 성능: Next.js SSR/SSG 최적화, 이미지 최적화, 코드 스플리팅






