학습 LMS 개발 (Bubble 활용)
1. 소개
학습 관리 시스템(LMS)은 교육 과정에서 학생과 교사가 효과적으로 소통하고 학습을 관리할 수 있도록 돕는 중요한 도구입니다. 본 프로젝트에서는 Bubble을 활용하여 코드 없이 LMS 시스템을 구축하고자 했습니다.
2. 진행 방법
사용한 도구
Bubble: 코드 없이 빠르게 웹 애플리케이션을 제작할 수 있는 No-Code 플랫폼
데이터베이스 활용: 강의 영상 클립 아이디 저장 및 관리
주요 기능
학생 기능
강의 영상 시청
영상 시청하며, 커리큘럼, QnA, 강의자료(다운로드 가능) 선택 가능.
QnA 게시판을 통한 질문 및 답변
Self-Test(자가 학습 테스트)
<1 커리큘럼>
<2QnA>
<3강의자료>
<4 SelfTest>...미완성
교사 기능
강의 등록 및 관리
퀴즈 출제 및 학생 성과 분석
학생의 학습 진행 상황 모니터링 및 피드백 제공
개발 과정
Bubble을 활용한 UI 설계
드래그 앤 드롭 방식으로 직관적인 화면 구성
학생 및 교사용 대시보드 제작
로그인 시 프로필을 통해 개인 사진에 따라 다니는 프로필(로그아웃 처리 가능)
hader, footer는 reuseable로 만들어 반복되는 부분 가져와 레이아웃 구성함.
데이터베이스 구축
학생, 교사, 강의, QnA, 퀴즈 등의 테이블 설계
강의 영상의 클립 아이디를 데이터베이스에 저장하여 관리
학습 기능 개발
강의 업로드 및 시청 기능 구현 (YouTube 영상의 클립 아이디 저장 방식 활용)
퀴즈 기능 추가
학생의 Self-Test 기능 개발 (문제 표시 기능 구현 중, 자동 채점 기능은 추후 개발 예정)
<개발 과정 중 사례 공유>
1. 회원가입 & 사용자의 페이지 이동 설계 :
문제의 궁금증>>
문제 찾기>>
처음에 버튼 혹은 dropdown을 이용하여 회원가입을 하도록 하였고,
내부적으로 회원가입시 '선생님'을 선택하면 - teacher 페이지로 loading,
'학생'을 선택하면 - stu페이지로 loading하도록 하였었다.
- but, 학생이 '선생님'인척 로그인을 하면 접근할 수 있는 상태.. 혹은 url주소의 파라미터값만 바꿔 주소창에 입력해도 선생님페이지로 접근할 수도 있었다.
고민..>> 시간도 많지 않고, 현재 동영상 보거나 QnA는 선생님도 확인하면 좋지 않을까? 그럼 OK, 페이지를 일원화할 수 있기를.. 단, 위에 메뉴에서 선생님과 학생의 menu가 다르게 나타나면 좋겠다.
해결, 수정로직>>(닿님의 조언으로 새로움 발견!!!😀 ))
DB에 'is선생님'필드를 추가하여 특정페이지 접근하지 못하도록 설계
.
. 메뉴 수정>상단의 이미지와 같이 학생 혹은 선생님이 로그인을 하면 (상단 이미지의 주황box 참조...ex> 선생님: 퀴즈(선생님용), 학생: Self_Test(학생용)
[이미지: 선생님이면(메뉴)보이게]
[이미지: 선생님n학생 구분하기_회원가입]
2. 퀴즈 만들기(선생님)
- [팝업만들기(popup컨테이너안에 넣기)]
- [16_state비우기(퀴즈생성-4지선다)
- [퀴즈질문_삭제popup_처리(popup에 값담아 전달)]
[퀴즈내역출력_lms_quiz]
]
3. 결과 및 배운 점
배운 점
Bubble을 활용하면 코드 없이도 비교적 빠르게 LMS 시스템을 구축할 수 있음
데이터베이스 설계가 핵심적인 역할을 함
No-Code의 한계를 극복하기 위해 일부 커스텀 기능 개발이 필요함
매번 화면이 어떻게 구성될까 UI를 많이 그렸는데, 구현을 하며 더 세세한 고민이 필요함을 부딪힘. (겉으로 toggle버튼- 구현할때도 내부적으로 많은 부분을 고민해야 한다.)
<스터디장님's 추가 개념 설명>디자인 탭: front의 디자인
워크플로우: front의 로직
data 탭: 데이터 베이스...버블에서 관계형DB설계 가능!
내컴퓨터에서 일어나는일: 프론트
네이버 서버컴에서 일어나는일: 백엔드
개선 및 향후 계획
라이브 스트리밍 옆 QnA기능 수정: 현재 QnA의 부족한 부분 수정
AI 기반 맞춤 학습 추천 시스템: 학생 개개인에 맞춘 학습 경로 제공
모바일 앱 확장: LMS를 모바일에서도 원활하게 이용할 수 있도록 개발
추후 보강되고 싶은 기대 효과
학생: 스스로 학습하며 학습 능력 향상 (추가 구현 필요)
교사: 학생의 진행 상황을 쉽게 파악하고 피드백 제공 가능
4. 도움 받은 자료
Bubble 공식 문서 및 포럼
버블 세미나 마다 녹화하며 동영상 참고
