오늘의 강의— 인천대 LMS 재생 도우미

온라인 강의를 듣다 보면 영상이 끝날 때마다 다음 강의를 열고 재생 버튼을 눌러야 한다. 여러 과목의 강의를 듣는 날에는 과목 페이지를 오가는 작업도 반복된다.

이 과정을 조금 편하게 만들고 싶어서 LMS에서 선택한 강의 영상을 순서대로 재생하는 크롬 확장프로그램, ‘오늘의 강의’를 만들었다.

영상이 끝났다는 걸 어떻게 알 수 있을까?

처음에는 두 가지 방식을 생각했다. 페이지 내부에서 영상 정보를 읽는 확장프로그램과, 화면의 재생시간을 인식해 버튼을 누르는 매크로였다.

LMS 화면을 확인하면서 주의할 점을 발견했다. 이미 수강한 영상은 다시 재생하는 중에도 ‘진도율 100% · 완료’로 표시됐다. 따라서 완료 표시만 보고 다음 영상으로 이동하면, 이번 재생이 끝나기도 전에 넘어갈 수 있었다.

그래서 수강 완료 표시 대신 현재 영상의 실제 종료를 감지하는 방식으로 방향을 잡았다.

개발자 도구로 확인한 결과, 영상의 현재 시간과 전체 길이, 일시정지 여부, 종료 여부를 직접 읽을 수 있었다. 다음 영상 링크도 찾을 수 있어 첫 시험판은 다음 흐름으로 만들었다.

영상 종료 → 5초 대기 → 다음 강의 이동 → 재생 시도

화면 인식 매크로도 시험판으로 만들었지만, 이후 여러 과목을 연결하는 기능은 페이지 정보를 직접 읽을 수 있는 확장프로그램을 중심으로 확장했다.

‘다음 영상’에서 ‘오늘 들을 목록’으로

첫 버전이 실제 LMS에서 작동하는 것을 확인한 뒤, 원하는 기능이 더 명확해졌다. 한 과목 안에서 다음 영상을 재생하는 것보다, 오늘 들을 여러 과목의 영상을 미리 골라두고 순서대로 실행하는 기능이 필요했다.

예를 들어 A과목에서 영상 두 개, B과목에서 세 개를 선택했다면 A과목의 선택 영상을 마친 뒤 B과목으로 넘어가는 방식이다.

이를 위해 LMS 홈페이지의 과목 링크, 주차별 ‘자세히 보기’ 링크, 영상 링크를 확인했다. 같은 영상이 제목 링크와 아이콘 링크로 중복해서 나타나는 경우는 영상 번호를 기준으로 합쳤다.

사용 흐름은 다음과 같이 구성했다.

1. 과목을 열어 원하는 영상을 선택한다.
2. ‘오늘 목록’에 추가한다.
3. 다른 과목에서도 같은 방식으로 영상을 담는다.
4. 목록과 순서를 확인하고 ‘전체 시작’을 누른다.

선택하지 않은 영상은 건너뛰고, 과목이 바뀔 때는 LMS 홈페이지를 거쳐 다음 영상으로 이동하도록 했다. 마지막 영상이 끝나면 홈페이지로 돌아와 전체 재생을 마쳤다는 팝업을 표시하게 만들었다.

페이지가 바뀌어도 실행이 이어지도록 선택 목록과 진행 상황은 확장프로그램의 로컬 저장소에 저장했다. 중지·재개와 순서 변경 기능도 추가했고, 여러 과목을 선택해 실행하는 흐름은 실제 사용으로 동작을 확인했다.

기능만큼 중요했던 화면 정리

기능이 작동한 뒤에는 UI를 여러 차례 수정했다. 처음 화면은 목록과 버튼이 몰려 있어 읽기 불편했다.

펼친 상태에서는 화면 중앙에 넉넉한 크기의 창을 띄우고, ‘영상 선택’과 ‘오늘 재생할 목록’을 나란히 배치했다. 접으면 오른쪽의 작은 패널로 바뀌어 강의 화면을 덜 가리도록 했다. 페이지가 바뀌어도 접힌 상태는 유지된다.

목록에 표시되는 정보도 정리했다.

• 과목은 교수님 전체 성함을 앞에 표시하도록 수정했다.
• 영상 제목에서 반복되는 제목과 ‘선택’ 문구를 제거했다.
• 제목, 수강 기간, 상태를 각각 나눠 표시했다.
• 제목은 굵게, 기간은 파란색, 완료 상태는 초록색으로 구분했다.
• 마감 여부는 선택 전에 확인할 수 있도록 작은 주황색 표시로 남겼다.

마지막으로 바깥 창을 위아래로 스크롤해야 하는 불편을 줄였다. 불필요한 대기 안내 상자를 없애고, 목록 안에서만 스크롤하도록 높이와 비율을 조정했다. 추가·시작 버튼은 항상 보이도록 배치했다.

아이콘과 최종 파일

아이콘도 몇 차례 바꿨다. 표정이 있는 얼굴과 캐릭터 사진을 시도했지만, 배포용으로는 단순한 디자인이 더 적절하다고 판단했다.

최종적으로 파란색 둥근 사각형 안에 흰색 재생 버튼이 있는 아이콘을 선택했다. 작은 크롬 도구 모음에서도 기능을 알아보기 쉽도록 글자와 세부 장식을 줄였다.

설치 목록과 도구 모음에 필요한 16·32·48·128픽셀 아이콘을 넣고, v0.2.6 최종 ZIP으로 정리했다. ZIP 파일, 아이콘 크기와 설정 연결, 코드 문법 검사를 마쳤다.

홈페이지 배포 준비

배포는 oddz 홈페이지에서 ZIP을 내려받고 설치 방법을 확인하는 방식으로 준비하고 있다. 프로젝트 페이지에는 소개, 화면 예시, 다운로드, 설치·사용 방법, 업데이트 안내를 담을 계획이다.

현재는 개발자 모드에서 압축을 푼 확장프로그램을 직접 불러오는 방식이다. 처음 사용하는 사람도 설치할 수 있도록 extension 폴더 선택 과정과 업데이트 방법을 쉽게 안내하는 것이 다음 작업이다.

이번 프로젝트를 만들면서 느낀 점은, 자동으로 작동하는 것만큼 사용자가 무엇을 선택했고 지금 어디까지 진행됐는지 쉽게 확인할 수 있는 화면이 중요하다는 것이다. 실제로 사용해보며 고친 목록 표시와 스크롤 구조가 프로그램의 사용성을 크게 바꿨다.

기본 재생과 여러 과목 실행은 실제 사용으로 확인했다. 다만 다양한 과목의 화면 구조, 자동 재생 차단 상황, LMS 진도 기록이 정상적으로 남는지는 계속 확인할 필요가 있다. 프로그램의 전체 재생 완료 안내와 LMS의 수강 완료 판정은 구분해서 봐야 한다.