"학습자의 시간은 아끼고, 궁금증은 실시간으로 해결하는 스마트 러닝 경험" 강의의 핵심 구간을 직접 찾아다닐 필요 없이, 타임라인과 공감 차트를 통해 효율적인 복습을 지원합니다.
- 복습 시간의 획기적 단축: 운영진이 영상 등록 시 설정한 주요 개념 타임라인을 통해, 학습자는 원하는 지점으로 즉시 이동하여 필요한 부분만 골라 학습할 수 있습니다.
- 정확하고 빠른 피드백: 질문 등록 시 현재 시청 중인 타임태그가 자동으로 기록됩니다. 이를 통해 운영진은 학습자가 어느 맥락에서 어려움을 느꼈는지 정확히 파악하고 맞춤형 답변을 제공합니다.
- 데이터 기반의 강의 개선: 질문에 달린 '저도 궁금해요(좋아요)' 수치를 차트로 시각화합니다. 가장 질문이 집중된 구간을 한눈에 파악하여 향후 강의 콘텐츠 개선 지표로 활용합니다.
- 개념 바로가기: 운영진이 설정한 주요 포인트 리스트를 클릭하여 영상 내 해당 위치(
timetag)로 즉시 이동합니다. - 재생 동기화: 재생 중인 영상 시간에 맞춰 우측 타임라인 리스트의 해당 항목이 실시간으로 강조되어 현재 학습 위치를 알려줍니다.
- 궁금증 밀집도 분석: 댓글의 좋아요 데이터를 분석하여 강의 구간별 피드백 밀집도를 인터랙티브 차트로 구현했습니다.
- 차트-영상 연동: 차트의 데이터 포인트를 클릭하면 질문이 가장 많았던 시점으로 영상이 자동 점프합니다.
- 컨텍스트 질문: 질문 시 시청 중인 시간 정보가 함께 저장되어 맥락 있는 소통이 가능합니다.
- 계층형 답글 및 운영진 강조: 질문에 대한 답글(
Reply) 기능을 지원하며, 운영진의 답변은 별도 스타일로 강조되어 신뢰도를 높입니다.
- 찜하기 (Save): 비디오 리스트 페이지에서 원하는 영상을 저장하여 나중에 다시 볼 수 있습니다.
- 마이페이지: 내가 남긴 모든 질문과 답변 상태를 한곳에서 관리할 수 있습니다.
- 강승구, 김민하, 박선우, 안시현, 한혜담
- Backend:
Django (Python) - Database:
MySQL - Frontend:
Vanilla JavaScript,HTML5,CSS3 - Library:
Chart.js(Interactive Graph)
| 테이블명 | 설명 | 핵심 컬럼 |
|---|---|---|
video |
강의 영상 정보 관리 | videoId, title, videoPath |
timeline |
운영진 설정 주요 개념 정보 | timelineId, videoId, timetag, content |
Comment |
학습자 질문 및 타임태그 정보 | commentId, userId, timetag, content |
Like |
질문 공감도 데이터 관리 | likeId, commentId, likeCount |
Reply |
질문에 대한 답글 내역 | replyId, commentId, content |
Save |
영상 즐겨찾기(찜하기) 정보 | saveId, userId, videoId |
User |
회원 및 역할(운영진/부원) 관리 | userId, name, role |
프로젝트의 모든 페이지는 templates/piro_index/ 디렉토리 내에서 관리되며, 주요 역할은 다음과 같습니다.
base.html: 모든 페이지의 기본 레이아웃 (네비게이션 바, 푸터, 스태틱 파일 연결 포함)login.html: 사용자 인증을 위한 로그인 페이지signup.html: 신규 회원가입 페이지
video_list.html: 메인 홈 화면으로, 전체 비디오 리스트와 찜하기 기능을 제공video_detail.html: 비디오 플레이어, 타임라인 리스트, 차트 시각화, 질문 게시판이 통합된 상세 학습 페이지
mypage.html: 내가 작성한 질문 목록을 한눈에 확인
video_create.html: 새 강의 영상을 업로드하고 제목, 설명, 타임라인 정보를 등록하는 폼video_update.html: 등록된 기존 영상의 정보나 타임라인 메타데이터를 수정