| 이번 프로젝트는 학습 관리 시스템(LMS)에 동영상 이어보기 기능을 구현하는 것이었으며, 사용자가 동영상을 중단한 후, 마지막으로 시청한 지점에서부터 이어서 볼 수 있도록 하여 학습 경험을 개선하는 것이 목표였습니다. 개발은 시스템 구조 분석, 데이터베이스 최적화, UI 개선 등 다양한 기술적 과제가 포함되었습니다. |
I. 개발 배경 및 요구사항
기존 시스템에서는 데이터베이스에 마지막 시청 시점을 저장은 하지만, 그 지점에서 다시 재생하는 기능이 부재하여 모든 수강생이 수강률과 관계없이 처음부터 강의를 수강하고 직접 이전 수강 시점을 찾아야 하는 불편함이 있었습니다. 또한, 학습 진도율을 시각적으로 보여주는 진도율 기능도 없었기 때문에 사용자가 자신의 학습 진행 상황을 확인하기 어려웠습니다. 이를 개선하기 위해 동영상 이어보기 기능과 진도율 표시 기능이 이번 프로젝트에서 필수적인 요구사항으로 떠올랐습니다.
[그림 1] 아이리포 나의 공부방 이어보기 기능 개발 전 화면
II. 클래스 다이어그램을 통한 구조 분석
프로젝트 초기에 시스템의 전반적인 구조와 흐름을 분석하기 위해 클래스 다이어그램을 작성했습니다. 이를 통해 데이터의 흐름을 명확히 이해하고, 동영상 재생 중에 발생하는 사용자 시청 데이터를 어떻게 효율적으로 저장하고 불러올 것인지 설계할 수 있었습니다. 특히 동영상 시청 위치와 진행률 데이터를 어떻게 저장할지에 대한 로직을 구조화하는 데 많은 시간을 할애했습니다.
III. 백엔드 기능 구현
주요 기능은 동영상의 마지막 시청 위치를 저장하고, 이를 기반으로 이어서 볼 수 있도록 하는 백엔드 로직을 구축하는 것이었습니다.
- 시청 위치 저장
동영상이 종료되거나 사용자가 페이지를 떠날 때, 그리고 5초마다 마지막 시청 위치를 데이터베이스에 저장합니다. 이를 위해 현재 동영상 재생 위치(lastSeekSeconds)를 주기적으로 백엔드로 전송하고, 이 값을 저장하는 API를 구현했습니다.
[그림 2] 마지막 시청 위치(lastSeekSeconds)와 전체 동영상 길이(totalLength)를 저장하는 API 일부
[그림 3] 마지막 시청 위치를 포함한 강의 상태 업데이트를 처리하는 MyBatis 쿼리
- 이어보기(resume) 기능 구현
FlowPlayer에서 공식적으로 제공되지 않는 이어보기 기능을 구현하기 위해, 적합한 해결책을 찾아 JavaScript로 커스터마이징하여 적용했습니다. resume과 seek을 혼합하여 사용하면 특정 지점에서 이어보기 기능이 동작합니다. 이 코드를 통해 사용자가 동영상을 중단한 위치에서 다시 이어서 재생할 수 있도록 로직을 설계하고 구현했습니다.
[그림 4] 동영상 이어보기(resume) 기능을 구현한 JavaScript 코드
IV. 프론트엔드 기능 구현
프론트엔드에서 사용자의 학습 경험을 향상하기 위해 UI 개선 작업을 수행했습니다.
- Progress Bar 구현
동영상의 총 길이(duration)와 현재 시청 위치(lastSeekSeconds)를 기반으로 학습 진도율을 계산하여 Progress Bar를 통해 시각적으로 표시했습니다. 이 기능을 통해 사용자는 자신의 학습 진행 상황을 실시간으로 파악할 수 있습니다. 각 값은 EventListener를 통하여 message를 전송받아 값을 계산합니다.
| Progress Bar 구현 전 | Progress Bar 구현 후 |
 |  |
- 이어보기 알림창 구현
동영상을 다시 재생할 때, 마지막 시청 위치를 불러와 이어볼지 여부를 선택할 수 있는 알림창을 구현했습니다. 이 알림창은 사용자에게 이어보기 기능을 사용할지 선택할 기회를 주어, 더 편리한 학습 환경을 제공합니다. 이어보기 기능은 사용자가 마지막으로 본 지점이 10초 이상일 때만 알림창을 표시하고, 10초 미만일 경우에는 동영상이 처음부터 자동으로 재생됩니다.
[그림 5] 이어보기 알림창이 표시된 화면
[그림 6] 이어보기 알림창을 구현한 JavaScript 코드
V. 데이터베이스 최적화
동영상 이어보기 기능을 구현하기 위해 데이터베이스의 기존 스키마를 개선하여 더 나은 성능과 정확한 기능을 제공하게 되었습니다. 특히, 이전에는 동영상의 전체 길이를 저장하지 않고 있었기 때문에 진도율을 계산할 수 없었습니다. 이로 인해 사용자는 학습 진행 상황을 시각적으로 파악하기 어려웠고, 이어보기 기능 역시 한계가 있었습니다.
- 데이터베이스 개선
이를 해결하기 위해 동영상의 총 길이 컬럼을 새롭게 추가하여, 동영상의 전체 길이를 데이터베이스에 저장할 수 있도록 설계했습니다. 이 변경으로 사용자가 언제든지 정확하게 학습 진도를 확인할 수 있게 되었고, 마지막 시청 위치와 비교하여 진도율을 정확하게 계산할 수 있는 기반을 마련했습니다.
- ORM을 통한 복잡한 조인 최적화
동영상의 이어보기 기능을 구현하면서, 서로 다른 테이블에 존재하는 데이터를 가져오기 위해 ORM(Object-Relational Mapping)을 도입했습니다. TCosCont 클래스에서 contentNumber, lastSeekSeconds, totalLength와 같은 필드를 정의하여 다양한 테이블의 데이터를 통합할 수 있도록 설계했습니다. 이로 인해, 각각 다른 테이블에서 필요한 데이터를 불러오던 복잡한 SQL 조인 작업을 줄일 수 있었습니다.
[그림 7] ORM을 사용하여 테이블 간 데이터를 통합하는 TCosCont 클래스
VI. 결과
[그림 8] 이어보기 기능과 Progress Bar가 적용된 최종 동영상 학습 화면
이번 프로젝트를 통해 동영상 이어보기 기능과 학습 진도율 표시 기능을 구현하여 사용자 경험을 크게 향상시켰습니다. 이어보기 기능을 통해 사용자는 마지막으로 중단한 위치에서 동영상을 이어볼 수 있게 되었고, 진도율을 나타내는 Progress Bar를 도입함으로써 실시간으로 학습 진도를 시각적으로 확인할 수 있었습니다. 특히, 이 과정에서 FlowPlayer가 공식적으로 제공하지 않는 이어보기 기능을 JavaScript로 직접 구현하며, resume과 seek 메서드를 결합해 동영상이 특정 지점에서 다시 재생되도록 하였습니다.
또한, 데이터베이스 최적화를 통해 동영상의 전체 길이를 저장할 수 있는 컬럼을 추가하여, 학습 진도율을 정확하게 계산할 수 있는 기반을 마련했습니다. 이는 이어보기 기능의 정확성을 높이는 중요한 역할을 했습니다. ORM(Object-Relational Mapping)을 도입하여 복잡한 SQL 조인 작업을 단순화하고, 서로 다른 테이블에서 데이터를 통합적으로 처리할 수 있도록 하여 시스템 성능을 최적화하는 데 기여했습니다.