온라인 학습 도움 시스템

Online Learning Support Systems

Article information

J Appropr Technol. 2025;11(2):74-88
Publication date (electronic) : 2025 August 30
doi : https://doi.org/10.37675/jat.2025.00661
1Major in Online Video Promotion, Gangdong University, 278, Daehak-gil, Gamgok-myeon, Eumseong-gun, Chungcheongbuk-do, 27600, Korea
2Dept. of Software, Anyang University, 22, Samdeok-ro 37beon-gil, Manan-gu, Anyang-si, Gyeonggi-do, 14028, Korea
문진용1, 김정준2,
1강동대학교 온라인영상홍보전공, 충청북도 음성군 감곡면 대학길 278, 27600, 대한민국
2안양대학교 소프트웨어학과, 경기도 안양시 만안구 삼덕로 37, 14028, 대한민국
To whom correspondence should be addressed. E-mail: jjkim@anyang.ac.kr
Received 2025 April 28; Revised 2025 August 12; Accepted 2025 August 15.

Abstract

코로나 팬데믹 이후, 교육 방식이 급격히 사이버 강의 중심으로 변화했다. 따라서 온라인 강의 수요가 급증하였으나, 강의 자료 부족 문제는 여전히 해결되지 않았다. 특히 영상 강의만 제공되는 경우, 학습자가 내용을 정리하고 복습하는 데 어려움이 있다. 이러한 문제를 해결하기 위해, 본 연구는 자동으로 PDF 자료를 추출할 수 있는 시스템을 제안한다. 강의 영상에서 추출된 자료는 OCR 기술을 통해 텍스트로 변환되며, 사용자는 이를 바탕으로 메모를 추가할 수 있다. 또한, 사용자는 중요한 단어를 저장하고 반복 암기할 수 있는 기능을 통해 효율적인 학습을 지원받을 수 있다. 캘린더 기능을 활용하여 학습 계획을 세우고, 이를 관리할 수 있는 시스템도 제공된다. 나아가, 사용자들 간 학습 자료를 공유하는 기능을 통해 협업 학습 환경을 구축할 수 있다. 본 시스템은 온라인 학습의 효과를 극대화하고, 자기주도 학습을 촉진하는 데 기여할 수 있다. 따라서, 본 연구는 온라인 학습 환경의 질을 향상시킬 수 있는 중요한 해결책을 제시하고 있다.

Trans Abstract

After the COVID-19 pandemic, the education system rapidly shifted to cyber-based learning. As a result, there was a sharp increase in demand for online lectures, but the issue of lacking study materials remained unresolved. In particular, video-only lectures make it difficult for learners to organize and review content effectively. To address this issue, this study proposes a system that automatically extracts PDF materials from lecture videos. The extracted materials are processed using OCR technology, allowing users to convert them into text and add their own notes. Additionally, users can store and repeatedly memorize key terms, facilitating more efficient learning. A calendar feature is available to help users plan and manage their study schedules. Moreover, a sharing system enables collaborative learning by allowing users to exchange study materials. This system is designed to enhance the effectiveness of online learning and promote self-directed study. Therefore, this research provides a crucial solution for improving the quality of online learning environments.

서론

코로나 팬데믹으로 인한 대면수업이 제한된 상황에서, 온라인 수업의 수요는 폭발적으로 증가하였다. 하지만 직접 등교하여 학교에서 수업을 받는 것과 온라인 수업과는 분명한 질적인 차이가 있다. 등교하여 수업을 받을 경우 학교에는 수업에 도움이 되는 인프라가 형성되어 있고, 직접 대면하여 수업하기 때문에 수업에 집중할 환경과 분위기가 형성이 되며 학생 입장에서 궁금한 것이 생기면 그 자리에서 접근성 있게 질문도 하여 질문에 대한 내용을 주변 학우들과 공유할 수 있으며 교수와 학생 사이에 활발한 의사소통을 하며 수업에 대한 의사소통을 나눌 수 있다.

하지만 온라인 수업은 일방적인 정보전달의 형식에 가까운 수업방식이며 그 동영상에 질이나 내용에 따라서 정보 전달의 수준이 달라진다. 수업을 듣는 학생의 입장에서는 음질, 화질이 떨어지는 영상을 시청하며 수업을 들을 경우 직접 대면하는 것보다 질 낮은 수업을 받게 된다. 게다가 실시간으로 이뤄지는 온라인 수업은 인터넷 연결이 좋지 않으면 음질, 화질은 물론 영상 연결이 안되어 수업 내용을 못듣는 경우가 생겨 학업에 지장이 생긴다(Stewart & Steele, 2013; Sajja et al., 2023).

온라인 수업을 들으며 생긴 질문에는 같은 질문을 하는 학생이 많다면 학생의 질문에 대답을 해야 하는 교수의 입장에서 같은 말을 여러 번 반복하는 상황이 생기며, 동영상을 편집하고 매번 동영상이 잘 나오나 확인하는 불편한 과정을 거치는 과정에서 발생하는 교수의 불만과 불편함도 존재하기 마련이다. 이러한 문제는 온라인 수업 전용 지능형 보조 시스템을 통해 일정 부분 해결될 수 있으며, 자연어 처리 기반의 가상 조교나 인공지능 학습 도우미 등의 기술이 교육 보조 도구로 적용되고 있다(Sakib et al., 2024; Wang et al., 2025; Goel, 2020).

학생들과 교수들도 이러한 불만과 불편한 점을 다 알고 있지만 이것을 해결하기는 어려운 상황이다. 이러한 불만과 불편한 점을 해소하기 위해 프로젝트를 진행하였다. 이 프로그램을 사용함으로써 동영상 다운로드, 동영상 강의자료 추출 등 여러 기능들을 사용하여 온라인 수업에 대한 불만과 불편함을 없애고, 학생들은 조금 더 학업에 대해 집중할 수 있는 환경을 만들어 최대한 대면수업과 비슷한 질의 수업을 받을 수 있도록 하는 것이 프로젝트의 목적이다.

관련 연구

1. 영상처리 기술

영상 처리란 영상인 모든 형태의 정보 처리를 가리키며, 사진이나 동영상을 처리하는 것이 대표적인 예이다. 대부분의 영상 처리 기법은 화상을 2차원 신호로 보고 여기에 표준적인 신호 처리 기법을 적용하는 방법을 쓴다. 현재는 컴퓨터 속도 향상으로 디지털 영상 처리 기법으로 대체되었다. 디지털 영상처리 기술에는 개선, 복원, 변환, 분석, 인식, 압축이 있으며 동영상을 프레임 단위로 분할하여 인식해 이미지화를 통해 PDF로 변환하는 기능과 PDF를 이미지로 분할 인식하여 OCR을 적용하는 기능이 필요한 본 프로그램에서 필수적이다.

2. 웹 크롤링

웹 크롤링은 웹 크롤러를 이용한 기술이며 자동화된 방법으로 웹에서 다양한 정보를 수집하는 소프트웨어로 원하는 서비스에서 원하는 정보를 편하게 얻어올 수 있는 장점이 있으며 웹 크롤러는 방문한 사이트의 모든 페이지의 복사 본을 생성하는데 사용되고 생성된 페이지를 인덱싱한다. 또한 링크 체크나 HTML 코드 검증과 같은 작업으로도 사용되는데 동영상 다운로드를 위한 HTML 코드 추출이 필요한 본 프로그램에서 사용했고 Python의 Selenium을 통해 진행한다.

3. 회원관리 및 게시판과 채팅방

회원관리 및 공유게시판은 자체 구성을 하며 다른 자료를 활용할 계획이고 기본적인 회원정보는 아이디, 패스워드, 닉네임으로 구성하였고 회원가입 시에 중복체크를 통해 알맞지 않은 정보를 입력할 시 출력되는 오류 메시지를 설정할 것이며, 공유게시판은 데이터를 저장하고 게시글 등록번호와 업로드 하는 파일은 계정 ID를 기본 키로 db를 구성하며 제목, 내용, 계정, 문서 등록번호, 첨부파일명 등을 값으로 가진다. 채팅방은 전체 채팅방과 그룹용 채팅방으로 구분하여 구성하였고 두 회원정보에서 스터디 그룹을 구분할 수 있는 테이블을 설계하여 입장 시 구분을 할 것이다.

시스템 설계 및 구현

본 시스템을 구현하기 위해 파이썬(본 연구에서는 파이썬 버전 3.9.7)을 사용하고, IDE는 Visual Studio Code( 버전 1.67.2)를 활용하였다. 추가로 웹 부분에서는 Eclipse IDE for Enterprise Java and Web Developers, Tomcat 8.5.78, JavaSE 1.8을 사용했으며 데이터베이스는 MySQL Workbench 8.0 CE를 사용하였다.

1. 시스템 설계

1.1. 시스템 구조도

본 연구의 시스템 구조는 Figure 1과 같다. Figure 1은 시스템 구조도로 앱의 기능으로는 회원가입, 로그인, 로그아웃, 학교 자체 영상과 유튜브 영상 다운로드, PDF 추출, OCR, Flas Card(단어 암기 카드), 학습 일정 캘린더, 학습 게시판이 있고 게시판은 커뮤니티 형식으로 구현해 자유, 질문/답변, 스터디 그룹 게시판과 전체 채팅방 기능도 포함되어 있다.

Figure 1.

Online Learning Support System Diagrams

1.2. 데이터베이스 설계

Figure 2는 사용자들이 프로그램을 사용할 때 필요한 정보들을 저장할 데이터베이스 테이블들과의 관계를 나타낸 것이다. 그림에 보이는 테이블들은 각 기능에 따라 분류된 테이블이다. 우선 회원 정보 테이블은 프로그램을 사용하기 위해 회원가입을 할 때 회원들의 정보를 저장할 테이블이다. 우선 사용자가 사용할 id, 닉네임, pw, 사용자의 이름, 사용자의 권한으로 이루어져 있으며 사용자의 권한은 게시판에 게시 글의 수정에 사용될 것이다. 그 다음 파일 공유 테이블은 이 프로그램을 사용하면서 학습에 관련된 파일을 공유할 때 파일들에 대한 정보를 저장할 테이블이다. 파일을 공유한 사용자의 id와 파일을 특정하기 위한 문서 등록번호, 그 첨부파일의 이름으로 이루어져 있다. 게시판 테이블은 사용자들이 학습에 대한 내용에 대한 글을 올리는 게시판의 정보를 저장할 테이블이다. 게시글을 분별하기 위한 게시글 등록번호와 게시 글의 제목, 게시글의 내용, 게시글을 쓴 사용자 id 로 이루어져 있다. 로깅 테이블은 사용자의 접속 기록을 저장할 테이블이다. 사용자의 id, 접속한 ip, 로그인한 시간, 로그아웃을 한 시간, 사용자가 가장 최근에 공유를 한 파일에 대한 정보를 저장한다.

Figure 2.

Database Table

2. 시스템 구현

2.1. 로그인 화면 코드

Figure 3은 처음 프로그램을 실행할 경우 나오는 로그인 화면에서 필요한 정보를 가져오는 모듈, 회원가입 화면과 연결하기 위한 모듈, 데이터베이스를 연동을 하기위해 필요한 모듈들을 불러오는 것이다.

Figure 3.

Login screen module code

2.2. 회원가입 화면

Figure 4는 회원가입 UI와 연결하고 버튼을 연동한 후 버튼 클릭 시 실행되는 함수를 정의한 코드와 회원가입을 할 경우 중복을 확인하는 함수와 데이터베이스에 회원 정보를 삽입하는 화면이다.

Figure 4.

Sign up screen

2.3. 메인 화면

Figure 6은 메인 화면 실행에 필요한 모듈들과 각 기능에 해당하는 모듈을 가져오는 코드이다.

Figure 5.

Main screen

Figure 6.

Main screen module code

Figure 7은 메인 화면에 UI를 연결하고 각 기능에 맞게 버튼을 연동 및 각종 변수설정을 하는 코드이다.

Figure 7.

Main screen button interlocking and various variable settings

Figure 8은 메인화면에 표시할 기능들을 버튼과 연동하여 나타내는 코드이다.

Figure 8.

Main screen function display button

Figure 9는 메인화면 기능에 대한 함수를 정의하고 기능에 맞는 모듈을 호출하여 실행하는 코드이다.

Figure 9.

Main screen function definition

2.4. 사이버 강의 영상 URL 추출과 다운로드

위 코드는 대학교 영상의 url 추출과 다운로드를 위해 사용되는 모듈을 정리하여 놓은 것으로 웹 크롤링을 위한 selenium 라이브러리와 디버깅 모드 크롬을 실행하기 위한 cmd 라이브러리를 사용한다.

Figure 10.

module code

위 코드는 대학교 영상 url 추출을 위한 코드이며 사용자가 원하는 영상을 재생하고 1번을 누르면 url을 추출하고 그 url을 이용하여 강의 영상을 다운로드 해주는 기능인데, 작업이 하나 종료되면 그대로 브라우저 창이 종료되어버리는 단점을 보완하기 위하여 thread문으로 구성하였고 먼저 url을 추출하기 전 cmd창으로 실행해야하는 디버깅 모드 크롬을 열기 위해서 로컬디스크C에 있는 크롬 폴더로 이동하고 시스템 명령어인

Figure 11.

anyang video url extraction code

“chrome.exe --remote-debugging-port=9222 --user-data-dir=”C:ChromeTest””를 입력해주면서

실행한다. 디버깅 모드 크롬을 실행한다. 그 다음 실행 시 바로 대학교 사이버 강의실로 이동해주는 코드를 넣어 편리함을 더했고 사용자가 로그인 후 원하는 영상을 실행해주고 1번을 입력했다면 핸들 설정 코드로 기존 탭이 아닌 영상이 재생되는 비디오 탭으로 작업을 설정하여 HTML내의 video scr을 추출하고 추출된 강의 영상의 url을 실행화면에 출력해주고 결과는 Figure 12와 같다.

Figure 12.

Extracted url

그리고 영상이 다운로드 되는데 그 코드는 아래 Figure 13과 같다.

Figure 13.

Code for downloading video to url

위 코드는 url로 영상을 다운로드 해주는 코드인데 자동 다운로드 되는 영상의 이름을 사이버 강의 영상과 일치시키기 위하여 split을 사용해 영상 제목 끝 ‘/’를 분기로 나눠주었다. 그 다음 다운로드 되는 영상의 디렉터리 경로를 지정하기 위해서 현재 실행중인 코드의 디렉터리 경로를 불러오는 chdir 코드를 넣어주었고 이 프로그램의 실행 편의를 위해 그 폴더의 상위 상위 폴더로 이동시켜준다. 그리고 앞서 추출되었던 url을 get으로 이어 받아 영상을 다운로드 해주고 다운로드가 완료되면 문구를 출력하고 이 기능이 끝나게 되고 실행 결과는 Figure 14와 같다.

Figure 14.

Downloaded video

2.5. URL을 이용한 유튜브 영상 다운로드

사용자가 main에서 유튜브 영상 다운로드 기능을 선택하면 실행되는 코드로 Figure 15와 같다.

Figure 15.

Youtube video download code

위 Youtube 영상 다운로드 코드는 pytube 라이브러리를 이용하며, 먼저 해당 디렉터리에서 main코드가 있는 상위 폴더로 다운로드 경로를 지정하고 사용자가 다운로드 할 Youtube영상의 url을 입력할 수 있도록 input타입으로 설정하고 해당 url을 매개변수로 설정해 전달하여 유튜브 영상을 다운로드한다. 다운로드가 끝난 영상의 위치는 Figure 16 과 같으며 youtube코드의 경로는 module폴더안 youtube_download 폴더에 있다.

Figure 16.

downloaded youtube video

2.6. PDF 추출

다운로드 되어있는 영상을 이용해 pdf를 추출하는 기능으로 모듈 구성은 Figure 17과 같다.

Figure 17.

Declare constants to be used in code

Figure 17은 코드에 사용될 상수들을 선언하는 코드다. 1)은 동영상에서 PDF파일을 추출 후 저장될 폴더 경로이다. 2)는 초당 프레임을 처리할 수를 나타낸 상수이다. 수가 적을수록 속도가 빠르다. 3)은 스킵이 될 프레임수를 초기화하는 상수이다. 4)는 히스토리의 개수를 나타내는 상수이다. 5)는 배경을 판단하는 상수이다. 6) 그림자를 감지하는 기능을 나타내는 상수이다. 7)은 프레임의 움직임을 감지할 때 최소 움직임을 설정하는 상수이다. 8)은 7)과 같이 움직임을 감지할 때 최대 움직임을 설정하는 상수이다.

Figure 18는 매개변수로 전달 받은 동영상의 경로에 있는 동영상의 프레임을 반환하는 코드로 동영상의 경로에 문제가 있는지 판단을 한 후 동영상의 프레임을 반환하는 코드이다. 그 후 프레임의 재생시간 단위로 동영상을 설정한다.

Figure 18.

Code that returns frames from a video

Figure 19.

Initialization code of the folder where the file will be saved

Figure 20은 파일이 저장될 폴더를 초기화 하는 코드이다. 만약 폴더가 존재하면 폴더의 내용을 비워 처음 생성한 것과 같은 상태를 만들고 폴더가 없으면 새로 생성하는 코드이다.

Figure 20.

Code to convert extracted images to PDF

Figure 20은 동영상에서 추출된 이미지를 PDF 파일로 변환하는 코드이다. 이미지 파일에서 PDF 파일로 변환할 파일의 이름을 동영상 경로를 슬라이싱하여 사용자가 알아보기 쉽게 설정한 후 그 폴더에 이미지 파일을 PDF 파일로 변환하여 나온 결과물을 저장한다.

Figure 21은 동영상이 존재하는 경로를 인자로 입력받아 기본적인 폴더의 경로를 설정해주는 코드이다.

Figure 21.

Code to input video path

Figure 22는 앞에서 설정한 함수의 동영상 프레임을 설정한 상수 값을 기반으로 프레임 단위로 이미지로 변환하는 코드이다. 앞에서 설정한 히스토리, 배경 판단, 그림자 감지 상수 값을 토대로 배경을 잘라내는 함수를 적용한 후 프레임의 움직임 상수에 맞게 프레임의 변화가 있으면 이미지로 만든다. 동영상에서 이미지를 만든 시간을 이미지의 이름으로 설정한 후 앞에서 설정한 폴더의 경로에 이미지를 저장한다.

Figure 22.

Code to turn a video frame into an image

이 기능을 실행한 결과는 다음 Figure 23과 같다.

Figure 23.

PDF extracted based on video

위처럼 사용자가 원하는 영상에서 pdf파일 추출이 가능하고 아직 OCR기능의 적용전이라 별다른 기능을 사용할 수 없고 참고 자료로만 사용가능하다.

2.6. OCR 적용

추출된 pdf에 OCR을 적용시켜 메모의 활용성을 높여주는 기능이고, 함수를 실행하기 위한 모듈 구성은 Figure 24과 같다.

Figure 24.

module call code

Figure 25는 추출된 PDF에 OCR을 적용하는 코드로, 함수를 시작하면 OCR기능이 적용된 PDF파일을 저장할 폴더 경로를 설정한다. 그 후 설정된 폴더 경로에서 PDF파일이 존재하는지 탐색을 한다. 탐색 후 PDF파일이 존재하면 그 PDF파일을 사용한다. PDF파일이 존재하는 디렉터리의 폴더 경로를 가져온 후 변경될 이미지의 이름을 설정한 후 임시 이미지의 이름을 PDF파일의 이름으로 정한다. 그 후 폴더의 이름을 PDF파일의 이름으로 생성한 후 OCR기능을 시작한다. PDF파일의 페이지 단위로 이미지를 만들어 이미지에 OCR기능을 적용한 후 그것을 PDF로 전환하여 글씨를 인식할 수 있게 만든다. 그 후 변환된 PDF를 합쳐 OCR기능이 적용이 된 PDF파일을 생성한다. 이 기능에 대한 실행 결과는 아래 Figure 26과 같고 2.5의 PDF 추출 기능과 달리 OCR이 적용되어 의문의’라는 단어가 찾아지고 pdf자체의 메모 기능을 활용할 수 있게 되었다.

Figure 25.

Code to apply OCR to extracted PDF

Figure 26.

Execution Results

2.7. Flash Card (단어 암기 카드)

단어 암기 카드는 사용자가 원하는 단어형식의 문제와 답을 입력받아 이미지화 하는 기능이다.

Figure 27은 딕셔너리를 만든 후, 카드에 저장될 설명과 정답을 사용자에게 입력받는다. 그 값을 딕셔너리에 저장한 후 저장된 값을 토대로 반복문을 돌려 입력한 수만큼 이미지를 저장하는 함수를 실행한다.

Figure 27.

A code to input the explanation and correct answer to be stored on the card

Figure 28은 모듈을 불러오는 부분과 딕셔너리에 저장된 값을 토대로 이미지를 만드는 부분이다. 1) 내부 모듈이 아닌 외부 모듈로 설치가 따로 필요하다. 2) 매개변수로 높이, 너비, 설명, 파일 경로를 받는다. 그 후 높이와 너비대로 이미지 사이즈를 정한 후 설명을 이미지로 만들고 저장한다.3) 2)와 마찬가지로 매개변수로 높이, 너비, 설명, 정답, 파일 경로를 받고 그 값을 토대로 이미지를 만들고 저장한다.

Figure 28.

Code to call module and create image

코드를 통해 추출된 단어 암기 카드는 Figure 29와 같다.

Figure 29.

Extracted word memorization card

2.8. 캘린더

캘린더는 사용자별 개개인별로 일정 관리 및 공부계획 등 작성 할 수 있는 기능이다. 캘린더는 노션이라는 라이버리를 이용한다. 각각의 함수 부분에는 노션을 조작 할 수 있는 API를 이용하였다.

Figure 30.

Calendar Nootion API Call Rivalry and Screen

Figure 31은 캘린더에 필요한 라이버리 호출 부분과 실행 화면이다.

Figure 31.

Creating a Calendar by User

Figure 31은 사용자가 노션 DB에 캘린더가 없으면 만드는 함수 부분이다. 캘린더 DB에는 날짜, 내용, 할 일 이라는 필드가 만들어진다. UserName 부분은 사용자가 회원가입한 ID이며 최종 캘린더명은 ‘[사용자ID]_사용자 캘린더’ 으로 만들어진다.

Figure 32는 사용자별 캘린더의 내용을 수정하는 부분이다. pageId는 사용자별 페이지의 고유번호를 가져오는 매개변수이다. T,V,D는 할 일, 내용, 날짜이며 여기에는 사용자가 입력한 값이 전달되는 매개변수이다

Figure 32.

Modify Calendar Content

Figure 33은 사용자별 캘린더의 내용을 생성하는 부분이다. pageId는 사용자별 페이지의 고유번호를 가져오는 매개변수이다. T,V,D는 할 일, 내용, 날짜이며 여기에는 사용자가 입력한 값이 전달되어 캘린더 내용에 기입이 된다.

Figure 33.

Creating Calendar Content

Figure 34.

Delete Calendar Content and Get Calendar Information by User

Figure 35의 find_valueID 함수는 사용자가 작성한 내용을 가져오는 함수이다. find_name은 사용자가 작성한 내용이다.

Figure 35.

Import User Calendar Content

2.9. 회원 커뮤니티(게시판 및 채팅방)

게시판과 채팅방 기능은 회원가입한 아이디로 접속을 하여 자유게시판, 질문/답변 게시판, 스터디 그룹 게시판을 이용할 수 있고 전체 회원간 채팅방 및 스터디 그룹 조성시 그룹 전용 채팅방을 이용할 수 있다.

Figure 36은 메인화면으로 session.getAttribute로 회원 아이디를 먼저 받아 로그인 유무를 판별하고 로그인이 되어었다면 로그아웃, 채팅방 입장 버튼이 활성화 되고 로그인이 되어있지 않다면 먼저 로그인과 회원가입 버튼이 나타나도록 되어있다. 로그인시 login.jsp를 통해 가입된 아이디와 비밀번호를 확인하여 로그인이 이루어지고 회원가입시 join. jsp를 통해서 회원가입 할 수 있다. 회원가입된 회원이나 가입한 회원은 DB의 USER테이블로 정보가 입력되어 관리할 수 있다.

Figure 36.

Main Screen Configuration

Figure 37.

LoginAction code for identification

Figure 38.

JoinAction code for determining the presence or absence of member information

다음은 게시판 부분을 설명하겠다. 자유, 질문/답변 게시판, 스터디 그룹 게시판은 모두 같은 구조로 구성하였고 게시판 내부에서의 파일업로드 및 다운로드, 댓글 기능이 모두 가능하며 데이터베이스의 BBS테이블로 데이터가 들어가고 게시판 번호, 제목, 작성자, 작성일이 표시된다.

Figure 39.

Bulletin board initial screen

게시판의 글 작성은 write.jsp와 writeAction.jsp로 이루어지고 writeAction 내부에서 파일업로드 또한 가능하고 JSP의 servlet.multipart 기능으로 파일을 업로드한다. 먼저 MultipartRequest객체를 생성하고 폼에서 인자 값을 받아 파일을 업로드 할 수 있다. 이 때 파일은 mulipart/form-data 형식으로 전송되어야 한다.

Figure 40.

Multipart for fileupload/download

Figure 41.

Posts that have been uploaded files

게시판의 글 작성은 write.jsp와 writeAction.jsp로 이루어지고 writeAction 내부에서 파일업로드 또한 가능하고 JSP의 servlet.multipart 기능으로 파일을 업로드한다. 먼저 MultipartRequest객체를 생성하고 폼에서 인자 값을 받아 파일을 업로드 할 수 있다. 이 때 파일은 mulipart/form-data 형식으로 전송되어야 한다.

마지막으로 커뮤니티에서 주요 기능이라 할 수 있는 채팅방 기능을 설명하겠다. 채팅방은 전체와 그룹 모두 Servlet으로 기능을 개발했고 디자인은 CSS템플릿을 사용하였다. 전체 채팅방과 그룹 채팅방의 차이점은 스터디 그룹 게시판에서 게시글 작성자를 그룹장으로 지정하고 댓글을 통해 그룹원을 받으면 groupID가 아이디 별로 각각 지정되는데, 이 groupID를 기준으로 채팅방을 따로 구성하였다.

Figure 42.

Configuring Chat Using Servlets

Figure 43 코드는 사용자가 입력한 코드를 데이터베이스에 넣어주는 역할을 하고 2.9.6 코드에서 채팅방에 다시 접속했을 때 채팅목록을 보여주는 역할을 한다. 구성한 servlet은 web.xml에 매핑하여 사용하고 chat.jsp에서 스크립트를 추가하여 사용자에게 채팅을 보여준다.

Figure 43.

Configuring Chat Using Servlets

Figure 44.

whole chat

Figure 45.

group chat

성능평가

1. OCR 인식률 평가

제안된 시스템의 핵심 기능 중 하나인 OCR(광학 문자 인식) 성능을 평가하기 위해 실제 온라인 강의 영상 20개(고화질 10개, 저화질 10개)에서 추출한 슬라이드 이미지 1,000장을 데이터로 활용하였다. 각 이미지는 수동으로 텍스트를 검수하여 정답 데이터를 구축하였으며, 제안 시스템의 인식률을 범용 오픈소스 라이브러리인 Tesseract와 비교하여 성능을 분석하였다. 인식률은 (총 인식된 올바른 글자 수 / 전체 글자 수) * 100으로 계산하였다. Figure 46은 영상 품질에 따른 OCR 인식률을 비교한 결과이다

Figure 46.

Comparison of OCR Accuracy

평가 결과, 제안된 시스템은 Tesseract 단독 사용 시에 비해 고화질 및 저화질 영상 모두에서 인식률이 향상된 것을 확인할 수 있었다. 이는 영상처리 전처리 과정을 통해 이미지의 노이즈를 제거하고 텍스트 영역을 명확히 함으로써 인식 성능이 일부 개선되었기 때문이다. 하지만 저화질 영상에서 인식률이 현저히 낮아지는 한계가 드러났으며, 이는 조명 변화나 카메라 흔들림에 대한 **강건성(Robustness)**이 여전히 부족함을 시사한다. 향후 연구에서는 한국어 인식에 특화된 딥러닝 모델을 적용하여 이 문제를 해결할 필요가 있다.

2. PDF 추출 정확도 평가

PDF 추출 정확도는 강의 영상에서 슬라이드 자료를 PDF 파일로 완벽하게 복원하는 성공률을 의미한다. 이를 측정하기 위해 원본 PDF 파일이 존재하는 강의 영상 50개를 대상으로 추출 성공률을 평가하였다. 성공률은 모든 슬라이드가 오류 없이 추출되어 원본과 동일한 순서와 내용으로 PDF가 생성된 경우에만 ‘성공’으로 간주하였다. Figure 47은 영상 품질에 따른 PDF 추출 정확도 평가 결과이다.

Figure 47.

Comparison of PDF Extraction Accuracy

고화질 영상의 경우 95%의 높은 성공률을 보였지만, 저화질 영상에서는 60%로 크게 낮아졌다. 이는 배경 제거 및 슬라이드 검출 알고리즘이 영상 품질에 매우 민감하게 반응하기 때문이다. 특히, 슬라이드 간의 미세한 변화를 감지하는 프레임 차이 기반 방식이 저화질 영상에서는 노이즈를 슬라이드 변화로 오인식하여 불필요한 페이지가 추가되거나, 중요한 슬라이드를 놓치는 문제가 발생했다. 향후에는 딥러닝 기반의 객체 감지 모델을 활용하여 슬라이드를 더 정확하게 식별하는 방식으로 개선이 필요하다.

3. 사용자 만족도 및 학습 효과

제안 시스템의 실질적인 유용성을 검증하기 위해 10명의 대학생을 대상으로 2주간 시스템을 사용하게 한 후, 설문조사와 심층 인터뷰를 진행하였다. 설문은 시스템의 기능별 만족도(5점 척도)와 학습 동기 부여 효과에 대한 정성적 의견을 수렴하는 방식으로 구성되었다.

설문 결과, 대부분의 사용자가 ‘자료 공유’, ‘핵심 단어 암기’ 기능에 대해 높은 만족도를 보였다. 특히 혼자 학습하는 것보다 동료 학습자와 자료를 공유하고 소통하며 공부하는 환경에 긍정적인 평가를 주었다. Figure 48은 설문조사를 통해 파악한 주요 기능별 만족도이다.

Figure 48.

User Satisfaction by Key Feature

사용자들은 자동 PDF 추출 기능이 여전히 불완전하며 수동으로 수정해야 하는 불편함이 있다고 지적했다. 그럼에도 불구하고, 기존의 일방적인 온라인 강의 시스템에서는 경험할 수 없었던 협력 학습 환경에 대해 높은 가치를 부여했다. 이는 시스템의 핵심 목표인 ‘협력적 학습 환경 조성’이 사용자에게 유효하게 다가갔음을 보여준다.

결론

본 논문에서는 현재 많은 학생들이 겪고 있는 사이버 강의의 여러 불편한 실태와, 코로나19로 인한 온라인 강의 수요 급증 현상을 바탕으로 문제 해결을 위한 시스템을 제안하였다. 특히, 동일하거나 유사한 강의를 수강하는 개별 학습자들이 흩어져 학습하는 것이 아니라, 하나의 플랫폼 안에서 자료를 공유하고 협력할 수 있는 학습 환경을 조성하는 데 목적이 있다. 이를 통해 교재가 없는 상황에서도 강의 영상만으로 충분한 학습이 가능하도록 하며, 혼자서 학습해야 하는 기존의 한계를 극복하고자 하였다.

이 학습 시스템은 강의 영상에서 자동으로 자료를 추출하고, OCR 기술을 활용하여 메모 기능과 핵심 단어 암기 기능까지 지원함으로써 자기주도 학습을 보다 체계적으로 돕는다. 나아가 사용자는 학습 계획을 캘린더로 설정할 수 있으며, 유저 간 학습 자료 공유 및 스터디 연계를 통해 학습 동기를 유지하고, 보다 효율적인 협력 학습이 가능하다. 따라서 이 시스템은 코로나 상황에서 드러난 사이버 강의 체제의 단점을 보완하고, 학생들의 실질적인 요구를 반영한 실용적인 해법으로 기능할 수 있다.

뿐만 아니라, 기존 온라인 강의 시스템에서 흔히 나타나는 학습 자료의 부재, 비효율적인 반복 학습, 스터디 그룹의 형성 어려움 등의 문제점들을 해소하는 데에 기여할 수 있으며, 전체적인 학습 효과를 극대화하는 데에도 긍정적인 영향을 줄 수 있다. 향후에는 본 시스템을 단순히 대학 강의에만 적용하는 것에서 나아가, 다양한 교육 기관과의 협약을 통해 중·고등학교 또는 전문 교육기관의 자체 제작 강의 영상과도 연동할 수 있는 확장성을 지니고 있다. 이러한 발전 가능성은 사이버 교육 전반의 질적 향상뿐만 아니라, 다양한 계층의 학습자들에게 보다 넓은 교육 기회를 제공하는 데에도 기여할 것으로 기대된다.

References

Goel, A. (2020). AI-Powered Learning: Making Education Accessible, Affordable, and Achievable. arXiv preprint. Retrieved from https://arxiv.org/abs/2006.01908.
Sajja, R., Sermet, Y., Cikmaz, M., Cwiertny, D., and Demir, I. (2023). Artificial Intelligence-Enabled Intelligent Assistant for Personalized and Adaptive Learning in Higher Education. arXiv preprint. Retrieved from https://arxiv.org/abs/2309.10892.
Sakib, S. J., Joy, B. K., Rydha, Z., Nuruzzaman, M., and Rasel, A. A. (2024). Virtual Teaching Assistant for Undergraduate Students Using Natural Language Processing & Deep Learning. arXiv preprint. Retrieved from https://arxiv.org/abs/2411.09001.
Stewart, B. L., and Steele, T. M. (2013). Online Student Support Services: A Case Based on Quality Frameworks. Journal of Online Learning and Teaching, 9(2). Retrieved from https://jolt.merlot.org/vol9no2/stewart_barbara_0613.pdf.

Article information Continued

Figure 1.

Online Learning Support System Diagrams

Figure 2.

Database Table

Figure 3.

Login screen module code

Figure 4.

Sign up screen

Figure 5.

Main screen

Figure 6.

Main screen module code

Figure 7.

Main screen button interlocking and various variable settings

Figure 8.

Main screen function display button

Figure 9.

Main screen function definition

Figure 10.

module code

Figure 11.

anyang video url extraction code

Figure 12.

Extracted url

Figure 13.

Code for downloading video to url

Figure 14.

Downloaded video

Figure 15.

Youtube video download code

Figure 16.

downloaded youtube video

Figure 17.

Declare constants to be used in code

Figure 18.

Code that returns frames from a video

Figure 19.

Initialization code of the folder where the file will be saved

Figure 20.

Code to convert extracted images to PDF

Figure 21.

Code to input video path

Figure 22.

Code to turn a video frame into an image

Figure 23.

PDF extracted based on video

Figure 24.

module call code

Figure 25.

Code to apply OCR to extracted PDF

Figure 26.

Execution Results

Figure 27.

A code to input the explanation and correct answer to be stored on the card

Figure 28.

Code to call module and create image

Figure 29.

Extracted word memorization card

Figure 30.

Calendar Nootion API Call Rivalry and Screen

Figure 31.

Creating a Calendar by User

Figure 32.

Modify Calendar Content

Figure 33.

Creating Calendar Content

Figure 34.

Delete Calendar Content and Get Calendar Information by User

Figure 35.

Import User Calendar Content

Figure 36.

Main Screen Configuration

Figure 37.

LoginAction code for identification

Figure 38.

JoinAction code for determining the presence or absence of member information

Figure 39.

Bulletin board initial screen

Figure 40.

Multipart for fileupload/download

Figure 41.

Posts that have been uploaded files

Figure 42.

Configuring Chat Using Servlets

Figure 43.

Configuring Chat Using Servlets

Figure 44.

whole chat

Figure 45.

group chat

Figure 46.

Comparison of OCR Accuracy

Figure 47.

Comparison of PDF Extraction Accuracy

Figure 48.

User Satisfaction by Key Feature