Development of Video Caption Editor with Kinetic Typography

글자가 움직이는 동영상 자막 편집 어플리케이션 개발

Abstract

In this paper, we developed an Android application named VIVID where users can edit the moving captions easily on smartphone videos. This makes it convenient to set the time range, text, location and motion of caption text on the video. The editing result is uploaded to web server in html and can be shared with other users.

본 논문에서는 사용자가 스마트폰을 이용하여 직접 찍은 동영상에 움직이는 자막을 즉석에서 간편하게 편집할 수 있는 안드로이드 어플리케이션인 VIVID를 개발하였다. VIVID를 통해 휴대폰에 저장된 동영상에 원하는 자막의 시간, 텍스트, 위치, 모션(자막의 움직임)을 간편하게 설정할 수 있으며, 결과물을 html 형식으로 웹 서버에 업로드하여 다른 사람들과 함께 공유할 수 있게 하였다.

1. 서 론

요즘 스마트폰을 사용하다보면 SNS나 메신저 어플리케이션을 통해서 실시간으로 촬영한 재미있는 동영상을 공유하는 모습을 쉽게 볼 수 있다. 이처럼 스마트폰의 고성능화로 인하여 스마트폰 카메라로 촬영하는 비중이 높게 나타남에 따라 다양한 유형의 모바일 동영상 편집 어플리케이션들이 개발되어 활용되고 있다[1,2]. 기존의 동영상 편집 어플리케이션들은 주로 구간 자르기, 화면 전환 효과, 타이틀 자막 삽입 기능을 제공하고 있다. 그러나 모바일 환경에서 여러 자막을 편집하고 그 자막에 다양한 움직임을 줄 수 있는 키네틱 타이포그래피를 활용한 동영상 편집 어플리케이션은 찾아보기 힘들다.

잘 만들어진 동영상들을 보면 알 수 있듯이 화면에 어울리는 자막은 그 전달 효과가 매우 크다. 최근 예능 프로그램에서 종종 등장하고 있는 움직이는 자막들은 재미를 극대화하는 효과를 발휘하고 있다[3]. 동영상에 자막을 편집하려면 PC환경에서 정교한 자막 편집이 가능한 전문 동영상 편집 혹은 애니메이션 편집 프로그램을 사용하고 있지만 모바일 환경에서는 바로 찍은 동영상에 여러 자막을 간편하고 짧은 시간 안에 편집해야 한다. 더구나 움직이는 자막을 효과적으로 편집할 수 있도록 키네틱 타이포그래피 기술을 적용하는 모바일 어플리케이션은 아직 시작 단계이다[4].

따라서 본 논문에서는 프리미어나 애프터 이펙트 같은 전문 PC용 프로그램을 이용하지 않고 스마트폰에서 즉석으로 동영상에 어울리는 움직이는 자막을 편집할 수 있는 어플리케이션을 구현하였다.

 

2. 관련 연구

2.1 키네틱 타이포그래피 기술동향

키네틱 타이포그래피의 기술연구는 MIT와 CMU등에서 활발하게 진행되고 있다. 키네틱 타이포그래피의 실행을 위한 엔진 구현과 기반으로 한 타이포그래피의 활용을 위한 제작 기술 등에 대해 주로 연구하고 있다. 이러한 연구는 키네틱 타이포그래피가 다양한 응용 서비스 시스템에서 인간의 표현력이 보다 풍부해질 수 있음을 보여주고 있다[5].

본격적으로 키네틱 타이포그래피를 제작하려면 Adobe사의 Flash와 After Effect, Apple사의 Motion등 전문적인 소프트웨어 도구를 사용하고 있다. 그러나 이러한 도구들은 데스크탑 PC에서 편리한 입력장치를 요구하며, 일반 사용자들에게는 사용 방법이 다소 어렵고 전문적이라는 단점이 있다[4].

2.2 동영상 편집 및 자막 편집 어플리케이션 분석

‘AndroVid’[6]와 ‘Magisto Video Editor & Maker’[7]는 대표적인 동영상 편집 어플리케이션으로 기능적인 측면에서 서로 다른 성격을 갖고 있다. ‘Andro-Vid’는 다양한 포맷의 동영상에 대하여 자르기, 회전, 변환, 효과, 이름 바꾸기, 공유 등의 다양하고 세부적인 편집 기능을 제공하는 반면, ‘Magisto Video Editor & Maker’는 편집할 영상, 테마, 배경음악, 영상 제목을 정해주면 어플리케이션이 알아서 자동으로 편집한 뒤 사용자에게 결과물을 만들어준다.

‘헤헤케케 패러디’[8]와 ‘이피디’[9]라는 자막 편집 어플리케이션의 경우, 직접 찍은 사진을 각종 예능 방송의 자막 테마로 꾸밀 수 있는 기능을 제공하고 있다. ‘헤헤케케 패러디’는 정해진 틀 안에서 텍스트를 입력하면 자동으로 자막을 합성해주는 방식이고, ‘이피디’는 원하는 자막 이미지를 사진 위로 직접 위치와 크기를 지정해줄 수 있도록 되어 있다. 널리 쓰이고 있는 사진 편집 어플리케이션 중 ‘라인 카메라’[10]는 다양한 스타일의 스탬프와 프레임, 세련되고 귀여운 필터를 제공한다. 사진에 메시지를 넣고 싶을 때에는 텍스트 내용을 입력하고 글꼴, 글자색을 설정한 뒤 텍스트가 화면에 나타나면 드래깅으로 원하는 위치에 움직일 수 있으며 크기를 자유자재로 조절할 수 있다.

2.3 html5의 〈canvas〉와 〈video〉요소

html5는 html의 차기 제안 버전이다. 〈audio〉, 〈video〉, 〈canvas〉 등의 요소를 추가하여 플러그인 없이 최신 멀티미디어 콘텐츠를 브라우저에서 쉽고 용이하게 볼 수 있게 한다[11].

〈canvas〉 요소는 JavaScript를 이용하여 그래픽을 그릴 때 사용된다. 캔버스는 html 페이지 위에 직사각형의 프레임을 제공하며 JavaScript를 이용하여 실제 그래픽을 그린다. 캔버스는 도형, 문자를 그리거나 이미지를 삽입하는데 필요한 함수들을 API로 제공하고 있으며 기존의 플래시가 갖고 있던 강점인 화려한 애니메이션과 인터랙티브한 효과를 html 문서 내에서 표현할 수 있다.

〈video〉 태그를 사용하면 html 페이지에서 동영상을 임베드(embed)할 수 있다. html5에서는 〈video〉 요소에서 다양한 함수, 이벤트 및 프로퍼티 등을 제공하며 자바 스크립트로 동영상을 컨트롤할 수 있다.

2.4 KineticJS

KineticJS는 데스크탑이나 모바일 어플리케이션에서 고성능의 애니메이션, 필터링, 이벤트 처리 등을 편리하게 할 수 있도록 하는 html5 Canvas Java-Script framework이다[121]. 캔버스 API를 확장한 오픈소스 라이브러리로서 그래픽과 상호작용하는데에 미흡한 점이 있는 html5 캔버스를 보완한다. stage 위에 그래픽을 그릴 수 있으며, 이벤트 리스너를 추가하여 각 그래픽의 이벤트를 독립적으로 수행할 수 있다. stage 위에 추가된 각 layer는 shape 또는 shape 그룹을 포함하고 있으며 stage, layer, group, shape들은 html 페이지 안의 DOM 형식과 유사하게 가상 노드로 구성되어 있다.

그림 1.KineticJS stage의 노드 구조[11]

 

3. 시스템 개요

3.1 시스템 주요 기능

본 어플리케이션인 ‘VIVID’는 주요 기능으로서 동영상 로드, 자막 편집, 업로드의 세 가지 기능을 제공한다.

동영상 로드는 사용자가 디바이스 내에 저장되어 있는 동영상들 중에서 편집하고자 하는 동영상을 선택할 수 있도록 하며 자막 편집은 자막의 시간, 내용, 글꼴, 글자색, 글자크기, 위치, 모션을 설정할 수 있도록 한다. 업로드는 편집을 마친 결과물을 서버로 업로드 하여 다른 사용자들과 공유할 수 있게 한다.

즉, 사용자는 직접 찍은 동영상을 불러오고 동영상에 어울리는 자막을 편집한 후, 결과물을 서버에 업로드 하여 다른 사용자들과 공유할 수 있도록 하였다.

그림 2.전체 시스템 구성도

3.2 시스템 구성도

전체 시스템 구성도는 본 어플리케이션의 전체적인 구성을 나타내고 있다. 먼저, 디바이스에 저장된 동영상을 불러온 뒤 자막의 시간, 텍스트, 위치, 모션을 설정한다. 편집을 완료하고 프로젝트를 저장하면 자막 정보가 들어있는 html 파일이 디바이스 내 저장공간에 임시로 저장되며 html 파일과 동영상 파일이 함께 서버로 업로드된다. 업로드된 영상은 서버의 메인 페이지를 통해 재생할 수 있다.

 

4. 시스템 주요 기능의 설계 및 구현

본 어플리케이션은 안드로이드 4.0.3 버전에 맞추어 개발되었다. 웹 환경은 아파치 서버를 기반으로 PHP 언어로 구현하였다. 시스템의 주요 기능에 대한 설명은 다음과 같다.

4.1 동영상 로드

본 어플리케이션은 모바일 기기에서 촬영한 동영상을 즉석에서 편집할 수 있도록 디바이스 내에 저장되어 있는 동영상을 불러오도록 구현하였다. 동영상을 선택하여 불러오면 자막 편집의 시작화면인 자막 목록 탭 화면으로 연결된다. 자막 목록 탭에서는 편집된 자막들을 한 눈에 볼 수 있으며, 항목을 선택하면 동영상 재생과 함께 각각의 편집된 자막을 미리 볼 수 있다.

4.2 자막 편집

자막 편집과정의 기능은 자막 시간 설정, 텍스트 편집, 모션 설정으로 나눌 수 있다. 시간 설정은 자막이 영상에 나타나는 구간을 설정하는 기능이다. 텍스트 편집은 자막 텍스트의 내용, 크기 등을 설정하는 부분과 자막이 나타나는 위치를 지정하는 부분으로 나뉜다. 마지막으로 모션 설정은 자막에 다양한 움직임을 줄 수 있는 기능이다.

4.2.1 자막 시간 설정

자막시간은 동영상 플레이어의 컨트롤러를 이용하여 설정하도록 하였다. 컨트롤러를 움직여 동영상 플레이어의 현재 시간을 쓰레드를 이용하여 바로바로 읽어올 수 있다. 시작시간과 종료시간을 나타내는 칸을 각각 누른 뒤 컨트롤러를 움직이면 현재 컨트롤러 위치에 해당하는 시간이 표시된다. ‘+’, ‘-’버튼을 이용하여 1초 단위로 미세하게 시간을 조정할 수도 있어서 사용자가 보다 편리하게 시간을 설정할 수 있다. 마지막으로 ‘설정’버튼을 누르면 시간설정이 완료된다. 설정한 시간 값은 안드로이드에서 제공하는 프리퍼런스(preference)를 이용하여 저장한다.

그림 3.자막 목록과 시간 설정 화면

4.2.2 자막 텍스트 편집

텍스트 편집에서는 자막내용, 글자색, 글꼴, 글자크기, 위치를 설정한다. 텍스트를 먼저 입력하고 글자색, 글꼴, 글자크기를 각각 선택하면 텍스트에 적용되는 모습을 바로 확인하면서 현재 화면에 어울리는 자막을 편집할 수 있다. 자막에 대한 편집 내용은 ‘입력’ 버튼을 눌렀을 때 프리퍼런스 공간에 저장된다.

4.2.3 자막 위치 설정

텍스트를 편집하고 ‘입력’ 버튼을 누르면 자막의 시작 시간에 해당하는 동영상 스틸컷이 배경처럼 FrameLayout 형식으로 나오고, 그 위에 Draggable ImageView라는 이름의 뷰 객체가 올라간다. 앞에서 설정한 자막의 편집 내용을 바탕으로 뷰 객체 위에 비트맵 이미지 형식의 자막 이미지가 그려지고 이 객체는 OnTouchListener의 Motion 이벤트를 이용하여 드래그 방향에 따라 자막이 이동하도록 만들었다. 이로서 사용자가 자신이 원하는 위치에 자막이 나오게 설정하는 것을 편리하게 할 수 있다.

그림 4.자막 위치 설정 화면

4.2.4 자막 모션 설정

자막의 위치를 지정한 후에는 자막의 모션을 설정할 수 있다. 추후 모션이 추가될 경우를 고려해서 갤러리(gallery) 뷰로 구현하여 좌우로 이동하며 모션을 선택할 수 있게 하였다. 현재 자막 모션은 총 6가지(모션없음, 오른쪽으로 이동, 왼쪽으로 이동, 확대, 축소, 회전)가 있다. 각각의 모션을 누르면 해당 모션이 어떻게 적용되는지 애니메이션 효과를 이용하여 화면에서 바로 확인할 수 있다. 여러 모션들을 적용하여 어느 것이 각 장면에 가장 잘 어울리는지 비교해가면서 모션을 편리하게 설정할 수 있다.

그림 5.자막 모션 설정 화면

4.2.5 자막 저장 관리

각 자막 항목에 대한 정보들은 모두 프리퍼런스라는 공간에 저장된다. 어플리케이션을 실행하면 자동으로 생성되고 프로그램을 종료시키면 자동으로 삭제된다. 프리퍼런스에 저장하기 전에 먼저 자막에 대한 정보를 담을 ArrayList 형식의 배열을 만들고 여기에 각 자막에 대한 정보들(자막내용, 시작시간, 종료시간, 글자색, 글자크기, 자막위치(x, y), 글자모션, 글꼴, 자막의 길이)을 저장한다. 다음은 자막 정보의 구조를 나타낸 것이다.

표 1.자막 정보 구조

이렇게 ArrayList형식의 배열에 자막들에 대한 정보를 저장한 후에 프리퍼런스라는 저장 공간에 모든 내용을 저장한다. 본 프로그램에서는 자막 시간, 내용, 위치, 모션 각각을 설정할 때 마다 프리퍼런스에 내용을 저장하도록 하였다.

4.3 서버에 업로드 및 결과물 확인

자막 편집을 완료하고 프로젝트를 저장하면 지정한 프로젝트 이름으로 자막 정보가 추가된 html 파일이 생성되며 동영상 파일과 함께 서버로 업로드 된다. php를 이용하여 서버에 저장된 모든 html파일과 영상을 목록으로 불러오도록 하였고 파일명을 클릭하면 영상을 재생할 수 있다.

4.3.1 비디오 및 자막 정보 파일

프로젝트를 저장하면 저장할 프로젝트의 이름을 지정할 수 있다. ‘저장’ 버튼을 누르게 되면 어플리케이션에 내장되어 있는 템플릿 html 파일의 내용에 편집한 자막 정보가 추가되고 지정한 프로젝트 이름으로 새로운 html 파일이 생성된다. html 파일에서는 자막 이미지를 그릴 스테이지(stage)가 생성되고 레이어(layer)와 텍스트(text)는 자막 정보에 따라 생성된다. 텍스트는 레이어에, 레이어는 스테이지에 추가되며 자막이 나오는 시간에 맞추어 레이어들이 화면에 나타나고 자막 시간 전후에는 화면에 나타나지 않는다. 텍스트의 모션은 어플리케이션에서 설정한 자막 모션과 똑같은 움직임이 보이도록 kineticJS에서 제공하는 함수를 이용하여 구현하였다. 다음은 html 파일이 생성되는 과정과 템플릿 html의 자바스크립트 소스코드이다.

그림 6.파일 생성과 업로드 모듈

4.3.2 업로드 및 결과확인

편집된 자막 정보가 추가된 html 파일과 동영상은 함께 서버로 업로드 된다. 아파치 서버로 동영상과 html 파일을 업로드할 때에는 HttpUrlConnection을 이용하였고, 전달 받은 정보는 서버에 저장된 php 파일을 통해 파일로 출력하였다.

그림 7.html 결과 화면

표 2.템플릿 html의 자바스크립트 소스코드

그림 8.동영상 자막에 모션을 적용한 예시

결과물을 볼 수 있는 메인 화면은 php를 이용하여 서버에 저장된 모든 html 파일의 목록을 불러오도록 하였다. 파일명에는 결과물파일을 링크로 연결하여 파일명을 클릭하면 결과물을 재생할 수 있다.

 

5. 실행 결과

본 논문에 대한 실험으로 몇 가지 동영상을 대상으로 하여 다양한 자막들을 직접 편집해 보았다. 그 결과 다양한 상황에서 자막에 적절한 움직임을 적용 시켰더니 영상이 보다 생동감 있고 재미있는 표현을 연출할 수 있었다. 예를 들어, 특정 부분을 강조하고 싶거나 누군가가 소리를 지를 때 자막에 ‘점점 크게’ 모션을 적용하였더니 일반 자막을 넣은 것보다 내용과 재미가 훨씬 강조되는 효과를 얻을 수 있었다. 또한, 사람이나 사물이 빨리 지나가는 움직임에 ‘오른쪽으로 이동’ 또는 ‘왼쪽으로 이동’ 모션을 자막에 적용하였더니 자막이 마치 사람을 따라다니는 것 같은 표현을 나타낼 수 있었다.

표 3은 생일파티 동영상을 대상으로 하여 각 자막별로 편집하는 데 걸린 시간과 사진꾸미기 앱들 중의 하나인 ‘라인 카메라’[10]에서 동일한 텍스트를 편집하는 데 걸린 시간을 비교하여 나타낸 것이다. VIVID는 동영상 자막 편집 어플리케이션이지만 기존의 동영상 편집 어플리케이션들이 주로 자르기나 전환 효과 등의 편집 기능들이 제공되고 있어서 이보다 비교가 용이한 사진꾸미기 앱과 비교하였다.

표 3.제안 방식과 기존 어플리케이션 비교 분석

VIVID에서 하나의 자막을 편집하는 데 걸린 시간은 평균 27.9초였다. 자막 텍스트를 설정하는 데만 걸린 시간은, VIVID는 평균 17.3초, 사진꾸미기 앱은 평균 19.3초의 시간이 걸렸다. 텍스트 편집을 제외한 시간과 모션을 설정하는 데에는 각각 평균 7.5초, 3.1초의 시간으로 텍스트 편집 시간을 제외하고 별도의 긴 시간이 필요하지 않음을 확인할 수 있었다. 이는 실제 모바일 환경에 맞게 즉석에서 동영상 자막을 편집할 수 있도록 간단한 인터페이스를 사용자에게 제공한 결과이다.

 

6. 결 론

VIVID는 크게 동영상 불러오기, 자막 편집하기, 결과물 업로드하기의 세 가지 기능을 제공한다. 이러한 기능들을 이용하여 사용자는 원하는 자막을 편집하여 동영상을 꾸밀 수 있다. 또한 완성된 결과물은 웹 브라우저를 통해 다른 사람들과 함께 감상할 수 있다.

VIVID는 즉석에서 쉽고 간편하게 움직이는 자막으로 동영상을 재미있게 꾸밀 수 있다는 점에서 차별성이 있으며 빠르고 간편하게 영상을 편집하여 결과물을 얻고자 하는 사용자들의 요구를 충족시킬 수 있는 어플리케이션이다. 게다가 새로운 웹 표준인 html5 기능을 사용하여 기기에 관계없이 편집된 영상을 많은 사람들과 함께 나눌 수 있다는 점 또한 VIVID의 강점이다.

추후 다양한 글자들의 움직임을 분석하여 동영상을 효과적으로 꾸밀 수 있는 모션들을 다양하게 추가한다면, 그 경쟁력을 더욱 높일 수 있을 것이다.