연세대학교 어도비 동영상 튜토리얼 웹사이트

올해 초에 진행한 프로젝트입니다. 생각해보면 참 재미있었던 프로젝트라서 다시 한 번 앞쪽에 노출해봅니다.

Client: 연세대학교 OSE 센터
Launching Date: 2018년 2월 (1개월)

이번 프로젝트는 규모 자체가 크지는 않았지만 테마 제작 난이도는 꽤 높은 편이었습니다. 그래서 더욱 보람찬 프로젝트라는 생각이 듭니다.

하나의 포스트(강좌)에 많은 정보(섹션 – 동영상 강의)를 체계적으로 담아낼 수 있는 메타박스의 구성과 이를 효과적으로 화면에 표시하기 위하여 정보설계 단계에서 많은 고민이 있었습니다.

정보 설계

이런 프로젝트의 경우 최소 단위의 포스트를 무엇으로 결정할 것인지가 중요합니다. 보통은 콘텐츠의 활용 방안에 따라 결정되는데, 사실 명확한 활용 방안을 가지고 진행되는 프로젝트는 그렇게 많지 않습니다. 대부분 설계 및 개발 이후에 추가적으로 의견이 나오는 경우가 많죠.

이런 타입의 프로젝트는 최소 단위의 포스트를 무엇으로 결정할 것인지가 중요합니다. 보통은 고객사의 콘텐츠 활용 계획에 따라서 정의되는데 이 활용 계획이라는 것이 대부분 설계 이후 개발이 진행되는 과정에서 명확해지는 경우가 많습니다. 그러기에 더욱 신중하게 판단을 해야합니다. 특히 고객사가 간과하고 있는 사용자 경험 관점에서 먼저 고민하고 고려할 필요가 있습니다.

강좌(Course) > 섹션(Section) > 강의(Lecture)

기본 구조는 위와 같습니다. 크리에이티브 밴드는 강좌와 강의 둘 중에 무엇을 최소 단위 포스트로 구현할 것인지를 놓고 고민을 시작했습니다. 강좌를 최소 단위 포스트로 정의할 경우 콘텐츠 등록이나 페이지 로딩 속도 등에서 유리합니다. 반면에 강의를 최소 단위 포스트로 정의할 경우에는 검색이나 통계 데이터 수집 등에서 유리합니다.

크리에이티브 밴드의 선택은 강좌를 최소 단위로 등록하는 것이었습니다. 하나의 강좌에 등록되는 수 많은 강의 동영상이 시리즈로서의 성격이 강하기도 했고 또 운영 조직의 편의도 고려하였습니다. 검색이나 통계 데이터 수집은 다른 방법을 통해서 해결하기로 했습니다.

구현

Metabox 플러그인은 포스트 내에 다양한 커스텀 필드를 생성하여 데이터를 등록할 수 있도록 도와줍니다. 이를 이용하여 입력 필드를 구성하고 같은 레벨에 여러 개의 데이터(섹션 또는 강의)를 등록할 수 있도록 Clone 기능을 적용했습니다.

그리고 아래와 같이 UI를 구현하여 계층 구조를 표현하였습니다.

영상과 자막 등록

영상을 등록하고 자막을 설정하는 과정은 많은 수의 파일을 업로드해야 한다는 물리적인 어려움을 제외하고는 큰 문제 없이 진행되었습니다.

별도의 영상 플레이어를 사용하는 것이 아니라 HTML5의 Video 태그를 이용하기 때문에 제공받은 srt 포맷의 자막 파일을 vtt로 하나 하나 변환했습니다. 이 과정에서 OS에 따라서 설정한 자막의 위치 값이 다르게 랜더링 된다는 것을 알게되었고 또 vtt의 인코딩이 반드시 UTF-8이어야 한다는 사실도 알게 되었습니다. 자막 파일의 포맷 변경은 아래 사이트를 이용하시면 됩니다.

http://chromecast.smplayer.info/convert-srt-to-vtt/index.php

영상별 조회수

만약 동영상 강의 하나 하나가 최소 단위 포스트로 등록이 되었다면 쉽게 확인할 수 있는 내용입니다. 하지만 여러 이유로 인해서 그 보다 상위 개념인 강좌(Course)를 최소 단위 포스트로 등록했기 때문에 하위 개념인 동영상의 조회수를 파악하는 일은 쉽게 해결되지 않습니다.

그래서 이 부분은 구글 애널리틱스의 이벤트 추적 기능을 이용하기로 하였습니다. 구글 애널리틱스에도 변화가 많기 때문에 어떤 방식의 추적 코드를 사용하는지 확인이 필요하며, 레이블링을 체계적으로 잘 할 필요가 있습니다.