Design and Implementation of the Image Creation System based on User-Media Interaction

사용자와 미디어 사이의 상호작용 기능 제공 기반 영상 창작 시스템 설계 및 구현

Abstract

Recently, interactive media which maximizes audience engagement by making the audience appeal on a stage in digital media environment has been distributed more widely. In fact, there has been active movement to develop and promote a new participatory media genre with higher immersion by applying this kind of interactive media concept to advertisement, film, game and e-learning. In the conventional interactive media, digital media had to be enjoyed in particular environment where diverse sensors were installed or through a certain device to recognize a user's motion and voice. This study attempted to design and implement an image creation system which ensures interactions between a user and media in popular distribution-enabled web environment and through PC and smart devices to minimize the image producer-user constraints.

1. 서 론

오늘날의 미디어 환경은 디지털 기술을 기반으로한 컴퓨터와 인터넷의 등장으로 기존에 서로 독립적으로 존재하던 개별 미디어들이 수렴되고 융합되는 이른바 ‘컨버전스 현상’[1]으로 변화해가고 있다. 이러한 미디어 컨버전스의 현상은 다양한 형태의 인터랙티브 미디어 제작 및 보급 현상으로 진행되어 왔다.

해외의 경우 프랑스 ARTE TV가 제작한 “Prison Valley”는 실시간 인터랙티브 스토리텔링 기능을 제공하여 유수의 영화제에서 수상하였고, MIT, 하버드, 뉴욕 주립대 등은 인터랙티브 트랜스 미디어 전공 교육과정 개설을 통하여 해당 분야 전문 인력을 양성함과 동시에 클라우드 기반 실시간 인터랙티브 트랜스미디어 스토리텔링 전용 Tool이 개발되고 있다. 3WDOC 인터랙티브 스토리텔링 도구는 사용자가 촬영한 영상 외에 유투브 동영상 연계 기능까지 제공하여 스토리에 맞는 영상 제작 기능을 제공하며, 2015년에 런칭한 Rocontr는 인터랙티브 미디어를 제작할 수 있는 HTML5기반의 영상 편집 도구를 온라인상으로 제공하고 있다[2,3,4].

스마트 기기의 보급 확산으로 개인화 맞춤형 콘텐츠들이 각광을 받으면서 개인이 제작한 영상 콘텐츠들은 ‘YouTube’나 ‘Vimeo’ 같은 동영상 서비스를 통해 웹상에 공유되며 자신만의 콘텐츠를 제작하고 제공한다. 이러한 영상들은 웹 환경과 스마트기기를 통해 누구나 제작할 수 있으며 감상할 수 있다. 마치 TV를 켜듯 쉬운 접근성으로 인해 ‘YouTube’의 사용자 수는 10억 명 이상이 되었으며 매일 수억 시간의 동영상 감상과 수십억 건의 조회 수가 발생하게 되었다[4]. 이러한 미디어의 컨버전스 현상은 디지털 컴퓨터 시스템을 기반으로 텍스트, 영화, 음악, 게임, 애니메이션 등의 콘텐츠들이 사용자의 동작에 반응하는 제품이나 서비스를 말하며 이는 증강현실을 비롯해 인간-컴퓨터 상호작용, 뉴 미디어 등과 밀접한 연관이 있다[5,6].

좀 더 구체적으로 설명하자면 웹 사이트와 비디오 게임을 합친 것으로 소셜 네트워킹 웹 사이트를 통해 비디오 게임을 하며 각각의 사용자들과 대화를 할 수 있고 게임 기록을 공유하는 것 등을 예로 들 수 있다. TV set-top box와 스마트기기를 통해 증강현실 콘텐츠와 인터랙션하는 시스템[7], 리치 미디어라 불리는 시청자와 상품정보에 대해 인터랙션하는 광고 콘텐츠[8], 인터랙티브 스토리텔링 스크림트 언어에 관한 연구[9]등 인터랙티브 미디어와 관련된 연구들은 예전부터 진행되어왔다. 하지만 기존의 인터랙티브 미디어들은 콘텐츠의 범위에 제한이 있었으며 사용자의 동작 및 음성 등을 인식하기 위해 별도로 제작된 환경이나 디바이스로 감상해야 하는 제약이 있었다. 따라서 본 논문에서는 대중적으로 보급된 웹 환경과 PC, 스마트기기를 통해 영상을 창작하고 사용자와 미디어 사이의 상호 작용 기능을 제공하는 영상을 감상할 수 있는 시스템을 설계 및 구현하였다

본 논문의 구성은 다음과 같다. 2장에서는 전체 시스템 구성에 관한 내용으로 웹 기반 영상 창작 시스템, 웹 소켓 기반의 인터랙티브 미디어 제작 기능, 웹 소켓 기반 사용자와 스마트기기 간 실시간 통신을 하는 방법에 대해 설명한다. 3장에서는 시스템 구현환경과 결과에 관해 기술한다. 마지막 4장에서는 논문에서 제시한 방법의 평가와 향후 연구에 관해 기술한다.

 

2. 시스템 구성

본 논문에서 구현한 시스템 구성은 영상 창작 기능을 제공하는 웹 기반 영상 창작 시스템, 사용자와 미디어 사이의 상호작용 기능을 제공하는 인터랙티브 미디어 제작 도구, 인터랙티브 영상 재현을 위한 실시간 통신 기능으로 구성된다.

2.1 웹 기반 영상 창작 시스템

웹 기반 영상 창작 시스템은 영상 창작자가 인터넷이 연결된 환경에서 웹 브라우저를 이용하여 영상창작을 할 수 있고 영상창작자의 창작 의도대로 사용자와의 상호작용성 기능을 삽입할 수 있는 인터랙티브 미디어 제작 기능을 제공한다. 영상 창작자는 영상 창작 시스템을 이용하여 영상 콘텐츠를 검색하여 검색된 영상을 실시간으로 편집하여 재생할 수 있는 시스템이다.

Fig. 1과 같이 1대의 물리적인서버에 시스템 별로 REST 서비스를 통해서 통신하고 있으며 각 역할별로 논리적으로 웹서버, 프로젝트 관리 REST 서비스, TTS변환 REST 서비스, 콘텐츠 관리 REST 서비스, OpenAPI REST서비스로 동작하도록 개발하였다.

Fig. 1.Architecture of Image creation system.

Fig. 1의 구성은 다음과 같다. Main-website는 웹 브라우저의 UI를 제공하고, 프로젝트 관리 REST 서비스는 영상 창작 프로젝트 데이터를 관리하며 영상프로젝트 조회, 수정, 저장 등을 처리한다. TTS변환 REST 서비스는 음성인식(TTS)서버에게 텍스트를 음성으로 변환 요청할 수 있는 기능을 수행하며, 콘텐츠 관리 REST 서비스는 영상 창작에 필요한 콘텐츠를 관리하고 콘텐츠 조회, 업로드, 수정등을 처리한다. OpenAPI REST서비스는 인터랙티브 기능 중 OpenAPI와의 연동을 위해 기존 OpenAPI 연동 기능을 처리한다.

웹 기반 영상 창작 시스템은 Fig. 2와 같이 웹 브라우저에 접속해서 프로젝트 생성, 영상 검색, 편집, 인터랙티브 미디어 제작, 저장, 수정 등의 기능을 수행하여 영상을 창작할 수 있다.

Fig. 2.Execution window of the Image creation system.

2.2 인터랙티브 미디어 제작 도구

본 논문은 사용자와 미디어 사이의 상호작용 기능제공을 위하여 영상 창작 시스템에 인터랙티브 미디어 제작 기능을 탑재하였다. 인터랙티브 미디어 제작기능은 Fig. 3과 같이 웹 브라우저를 통해서 영상 창작 및 인터랙티브 제작 도구를 사용하여 영상을 제작하고 웹브라우저를 통해 영상을 감상하고 웹 소켓을 통해 시청자의 스마트 기기와 실시간 통신을 하여 사용자와 미디어 사이의 상호작용 기능을 사용할 수 있다.

Fig. 3.Architecture of Image authoring system for providing Interactivity.

서버와의 통신에 필요한 사용자의 고유정보를 얻기 위해 회원가입으로 정보를 데이터베이스에 입력 받는다. 웹 브라우저와 스마트기기에서 웹 서버를 통해 로그인하게 되면 사용자의 고유정보인 ID 값을 기준으로 웹 소켓 서버에서 전송하는 데이터를 구별해 전달받는다. 웹 브라우저의 인터랙티브 제작 도구는 미디어 제작자가 일반 미디어에 인터랙션 기능을 설정하고 그 내용이 메타데이터로 생성되는 역할을 한다. 생성된 메타데이터는 웹 서버를 통해 데이터베이스에 미디어와 함께 저장된다. 인터랙티브 플레이어는 메타데이터를 분석하는 파서와 메타데이터 분석결과를 통해 웹 소켓으로 스마트기기와 인터랙션을 하는 인터랙션 핸들러로 구성되어 있다. 스마트기기는 웹 소켓을 통해 전송받은 메타데이터를 분석할 파서와 웹 소켓으로 인터랙티브 플레이어와 인터랙션을 하는 인터랙션 핸들러가 있으며 이때 필요한 리소스들을 내려 받는 다운로드 매니저로 구성되어 있다.

일반 미디어 파일에 특수 장비나 인코딩 없이 인터랙티브 기능에 대한 설정을 지정하기 위해선 별도의 메타데이터가 필요하다. 메타데이터는 인터랙티브 기능의 실행 시간 및 각각의 세팅 정보들을 포함한다. 메타데이터의 언어는 JavaScript 형식으로 만든 객체 포맷인 JSON(JavaScript Object Notation)[9]형태로 생성한다. JSON은 데이터의 구조를 기술하는 언어의 한 가지로 비슷한 예로는 XML(eXtensible Markup Language)이 있다.

본 논문은 웹 환경에서 스마트기기와 인터랙션을 할 수 있는 시스템으로 새로운 인터랙티브 기능에 대한 아이디어만 있다면 지속적인 추가가 가능하다. 메타데이터의 형태 또한 큰 틀을 제공하며 세부 설정 사항들은 인터랙티브 기능을 개발하는 개발자가 지정할 수 있는 구조가 되어야 한다. 따라서 XML보다 매우 단순한 구조로 되어 있으며 JavaScript 객체표기법의 부분집합이기 때문에 웹 환경에서 다루기 편리한 JSON을 선택하였다. JSON은 name/value 형태의 쌍으로 이루어진 Collection 타입, 값들의 순서화된 리스트 이렇게 두 개의 구조를 기본으로 이루어져 있다. Collection 타입은 보통 프로그래밍 언어들에서 object, record, struct, dictionary, hash table, key가 있는 list, 또는 연상배열 등으로 구현되어있으며 값들의 순서화된 리스트는 array, vector, list 등이 있다.

본 논문에서는 object와 array를 사용하며 인터랙티브 미디어 메타데이터는 하나의 큰 array 안에 각각의 인터랙션 설정을 담은 object를 포함하고 있다. object의 내용은 인터랙션의 명칭을 의미하는 ‘mode’와 인터랙션 시작시간을 의미하는 ‘time’을 기초로 나머지 설정 들은 개발자가 필요에 의해 정의하게 된다. Fig. 2은 JSON 공식 홈페이지에 표현되어 있는 object와 array, value에 대한 상태도로 object는 name/value 쌍들의 비순서화된 SET로 ‘{’로 시작하고 ‘}’로 끝내어 표현하며 각 name 뒤에 ‘:’ (colon)을 붙이고 ‘,’ (comma)로 name/value 쌍들 간을 구분한다. array는 ‘[’으로 시작해서 ‘]’로 끝내어 표현하며 ‘,’ (comma)로 array의 값들을 구분한다. array 안에 들어가는 value는 string, number, true, false, null, object, array가 올 수 있다[10].

Fig. 4.Structure of JSON (JavaScript Object Notation) Object, Array, Value.

‘[’, 와 ‘]’로 이루어진 array 안에 첫 번째 object는 특정 시간에 스마트기기에 지정된 전화번호와 이름, 음성, 프로필 사진으로 전화 알림을 하는 것이고 두 번째 object는 광고 미디어에 적용할 수 있는 인터랙션으로 스마트기기에 특정 시간에 원하는 메시지와 광고 관련 웹 사이트에 연결할 수 있는 주소를 담아 Notification 알림을 띄우는 메타데이터이다.

2.3 웹 소켓 기반 인터랙티브 영상 재현을 위한 실시간 통신 기능

본 논문에서는 사용자와 미디어 사이의 상호작용 기능이 탑재된 인터랙티브 영상 재현을 위해서는 영상 시청 도중 실시간으로 사용자의 스마트기기와의 통신할 수 있는 기능을 구현하였다.

Fig. 5는 인터랙티브 영상 플레이어와 스마트기기의 통신에 대해 세부적으로 표현한 구조도로 인터랙션을 위한 메타데이터의 전송과정이 나타나 있다. 사용자가 감상하려는 인터랙티브 미디어를 선택하면 인터랙티브 플레이어는 웹 서버로부터 해당 미디어의 메타데이터를 요청하고 이를 파싱한다. 만약 파싱된 데이터 중에서 스마트기기에 별도의 리소스 파일이 필요한 인터랙션이 있는 경우 인터랙티브 핸들러가 웹 소켓 서버를 통해 스마트기기에 해당 리소스의 정보를 전송하고 스마트기기의 메타데이터 파서는 다운로드 매니저를 거쳐 웹 서버에 HTTP 방식으로 리소스 파일을 요청해 미디어가 재생되기 전에 리소스를 다운로드 받는다.

Fig. 5.Dataflow of metadata for the Interactive Media system.

그 외에 파싱된 데이터는 인터랙티브 핸들러를 통해 미디어 제작자가 지정한 시간에 해당하는 인터랙티브 기능을 동작시키고 인터랙션 메타데이터를 웹소켓 서버로 스마트기기에 전송한다. 스마트기기는 인터랙티브 플레이어에서 지정된 시간에 전송하는 인터랙션 메타데이터를 파싱하여 인터랙티브 핸들러를 통해 스마트기기에서 동작시키며 기기에서 제공하는 각종 센서를 이용해 사용자의 응답을 인터랙티브 플레이어로 전송한다.

 

3. 시스템 구현 환경 및 결과

3.1 웹 기반 영상 창작 시스템

본 논문에서는 제공하는 웹 기반 영상 창작 시스템은 HTML5, JavaScript로 제작되어 있으며 Backend는 Apache, PHP를 이용한다. 서버에 저장되는 데이터베이스는 MySQL로 되어있다. Fig. 6는 웹 브라우저에서 실행한 영상 창작 시스템에 탑재된 인터랙티브 미디어 제작 도구의 화면으로 사용자의 반응에 따라 영상 전개를 선택할 수 있는 편집 기능을 제공한다. 영상 창작을 하나의 프로젝트로 정의하여 스토리보드 형태의 동영상 편집기능을 제공하며 영상 길이 편집, 효과 적용, 인터랙티브 기능 입력 등이 가능하다. 제공하는 인터랙티브 기능은 전화, 영상 스토리 선택, 푸시 메시지로 설정된 인터랙티브 기능은 JSON 형태로 생성되어 원본 동영상과 함께 데이터베이스에 저장된다.

Fig. 6.Execution window of the Interactive Media authoring tool.

Fig. 7은 웹 브라우저에서 실행한 인터랙티브 미디어 플레이어의 화면이다. 화면의 구성은 플레이어, 서버 및 인터랙티브 연결 상태, 비디오 리스트로 이루어져 있다. 플레이어는 동영상이 재생되기 전에 인터랙티브 연결 상태와 메타데이터를 파싱하여 인터랙티브 핸들러에 적용한다. 메타데이터에 저장된 시점에 인터랙티브 핸들러를 통해 스마트기기로 인터랙션을 시도하고 돌아오는 명령에 맞추어 반응한다.

Fig. 7.Execution window of the Interactive Media player.

인터랙티브 미디어 플레이어를 실행하게 되면 Fig. 8과 같이 웹 소켓 서버에 접속하면서 스마트기기와 통신이 가능해진다. Fig. 8은 웹 소켓 서버와의 통신을 확인하기 위한 기록화면으로 각 사용자가 서버로 요청하는 명령어들을 확인할 수 있다. ‘test’계정이 스마트기기에서 ‘test’로 접속한 ‘android_test’라는 계정과 함께 인터랙티브 기능을 수행하는 화면으로 ‘mode’:’call_down’으로 동영상이 재생되기 전에 스마트기기로 인터랙티브 관련 리소스를 다운받도록 요청한다. ‘mode’:’push’를 통해 원하는 메시지를 스마트기기에 푸시메세지로 전달하고 ‘mode’:’call’을 통해 전화 인터랙션을 명령한다. 스마트기기에서 전화를 받게 되면 ‘accept_call’:’true’를 통해 전화를 받았음을 알려주고 ‘mode’:’branch’를 통해 동영상의 스토리를 사용자가 결정하도록 명령하고 사용자가 선택한 답변을 통해 플레이어에서 재생 중인 동영상의 내용이 변하게 된다.

Fig. 8.Execution window of the Web Socket console log.

3.2 스마트기기 애플리케이션

본 논문의 스마트기기는 Android Version 5.0(Lollipop)을 기준으로 제작되었으며 애플리케이션을 통해 로그인하면 웹 소켓에 연결되게 된다. Fig. 9의 화면은 로그인, 다운로드 매니저를 통해 인터랙티브 리소스 파일 다운로드 요청, 푸시메세지, 전화, 스토리 선택으로 되어있으며 Fig. 8에 나타난 기록을 통해 동작한 화면이다. 이는 본 논문에서 제시한 웹 소켓 기반의 인터랙티브 미디어 시스템을 구현한 예시로 실시간 통신 방법을 기반으로 개발자의 아이디어를 통해 추가적으로 인터랙티브 기능 구현이 가능하여 향후에도 확장이 가능하다.

Fig. 9.Execution window of the smart device native application.

 

4. 결 론

디지털 컴퓨터 시스템을 기반으로 텍스트, 영화, 음악, 게임, 애니메이션 등의 콘텐츠들이 사용자의 동작에 반응하는 제품이나 서비스인 인터랙티브 미디어는 상대적으로 게임, 증강현실의 방향에 치우쳐서 개발되는 경향이 있었다. 게임의 경우 다양한 동작을 취하며 게임을 즐길 수 있는 방향으로 발전하였고 증강현실은 감상하는 동안 화면에 증강현실을 추가하여 사용자에게 더 큰 흥미를 느끼게 하는 방향으로 발전하였다. 하지만 이런 인터랙티브 기능을 경험하기 위해선 특수한 장비나 환경이 필요했으며 다양한 인터랙티브 미디어의 범위에 비해 특정 콘텐츠에 한정되었다. 따라서 본 논문에서는 대중적으로 보급된 웹 환경과 PC, 스마트기기를 통해 사용자와 미디어 사이의 상호작용 기능을 제공하는 영상 창작 시스템을 설계 및 구현하였다. 웹 서비스와 스마트기기의 네이티브 애플리케이션 간에 인터랙션 데이터 전송을 위해 웹 소켓을 사용하였다.

본 논문은 다양한 기기 혹은 환경에서 인터랙션을 위해서 데이터의 전송환경 구축이 어렵지 않고 사용자의 접근이 쉽도록 웹 브라우저를 통해 사용할 수 있는 웹 서비스의 형태로 제작 도구와 플레이어를 구현하였다. 스마트기기 또한 2013년 10월부터 2015년 4월을 기준으로 점유율이 63%가 넘는 안드로이드 운영체제를 택하여 구현하였다[11]. 향후연구로는 본 논문에서 제시한 시스템을 활용하여 일반 개발자들도 참여해 인터랙티브 기능을 추가하고 스마트기기의 애플리케이션을 개발해 사용가능한 스마트기기의 범위를 늘릴 수 있도록 API(Application Programming Interface)를 구축하고자 한다.