1. 필요성

  • Web에서의 동영상의 사용도 증가
    Web 2.0 시대를 맞이하여, 소수 생산자들이 대부분의 정보를 제작해내던 기존의 생태계에서 벗어나 사용자들간의 정보 재생성/공유/협력이 활성화되고 이에 비로소 진정한 양방향 통신이 널리 퍼질 수 있게 되었다. 사용자가 직접 편집할 수 있는 백과사전, 개인이 직접 운영하는 홈페이지 'Blog'등의 서비스들이 성황을 이룬다거나 UCC(User-Created Contents, 사용자 제작 미디어)과 같은 새로운 개념들이 생겨나는 등 많은 발전이 일어나게 되었고, 이 기류에 힘입어 자신을 표현하는, 혹은 정보를 전달하는 방법 중의 중요한 일원으로서 동영상 서비스가 주목받기 시작했다. 이에 국내외에 YouTube등 Flash Video 기술을 사용한 동영상 서비스들이 생겨나기 시작했고, 결국 오늘날에는 홈페이지, 카페, 블로그, 미니홈피등 인터넷의 어느 곳에서나 동영상을 쉽게 찾아볼 수 있게 되었다.
  • 현 XE 문서 환경의 문제점
    보다 손쉬운 정보 공유를 위하여, 대부분의 동영상 서비스 제공자들은 동영상을 옮겨갈 수 있는 코드를 제공하고 있다.
    naver.png
    네이버 동영상의 스크랩 기능
    현재 XE에서 문서에 동영상을 삽입하기 위해서는 HTML 방식을 사용해서 삽입해야 하는데, 이는 HTML에 대한 지식이 없는 일반인이 사용하기 어려운 데다, 동영상 삽입 후 편집창에서 재생이 가능하게 된다는 작은 문제도 함께 발생한다.

    ex.png
    어디에 넣어야 하지?
    물론 XE 편집기 모듈에서 기본으로 제공하는 '멀티미디어 삽입' 컴포넌트가 있지만, 이는 위에 언급된 Flash Video를 사용하는 동영상 서비스가 목적이 아닌, 사용자 환경의 Multimedia Player에 재생을 의존하는 특정 형식 동영상만을 대상으로 하여 범용성의 문제가 발생한다.
  • 최근 XE에서는 Flash를 통한 CSRF(Cross-Site Request Forgery, site 간 요청 변조) 공격에 대응하기 위한 패치(XE Core 1.3.1.2)로 인해 관리자 권한이 없는 일반 사용자들에게는 더이상 동영상 삽입이 불가능하게 되었다. 이를 본 컴포넌트를 통해 검증된 서비스 제공자에 대한 동영상 삽입을 허용함으로서, 보안도 유지하고 사용성도 높이는 두마리의 토끼를 모두 잡을 수 있을 것이다.


2. 목표

  • 사용성 :
    네이버의 블로그등 타 서비스 환경에 익숙한 사용자들도 쉽게 사용할 수 있도록 사용법이 간단해야 한다.
  • 보안성 : 
    동영상(Object/Embed)을 사용함으로서 일어날 수 있는 CSRF 공격을 방지하기 위해, 검증된 제공자만 선택적으로 허용해야 할 것이다.
  • 호환성 :
    보안성을 유지하되 검증된 YouTube, Naver, Nate등 대형 서비스 제공자들은 모두 문제없이 지원하여 사용자들이 불편을 느끼지 않도록 해야 할 것이다.
  • 접근성 :
    WCAG (W3C 웹 접근성 지침) 준수와 주석 등 여러가지 code상의 배려를 통해 시각장애우등 소수 사용자 환경을 고려해야 할 것이다.


3. 설계

sample.png

  1. 컴포넌트에 코드를 입력 :
    컴포넌트 창에서, 동영상 서비스에서 제공하는 HTML 코드(혹은 URL) 복사와 동영상의 제목을 입력받는다. (제목은 주석에 포함되며, 표시(CSS Display) 여부가 설정 가능하다.)
  2. Javascript를 통해 코드 분석 : 
    1. 목록과 대조하여 믿을 수 있는 제공자인지 확인 (실패시 믿을 수 없는 주소라는 경고창)
    2. 성공시 동영상 주소, 너비×높이, 최대화면 여부등의 매개변수(HTML Param) 추출
  3. 편집기 상에 삽입 : 
    Cursor 위치에 동영상 크기의 영역 삽입. 기존 multimedia 삽입 component처럼, 우선은 들어갈 영역만 잡는다.
    sample2.png
  4. 게시글 삽입시 동영상으로 처리 : 
    잡아놓은 영역에 실제 동영상 코드를 삽입한다. 이때, Flash를 사용할 수 없는 시각장애우용 browser등 특수 환경에 대비하여 미리 입력받은 제목을 처리한 주석을 포함한다.
  5. 동영상이 삽입된 문서 작성 성공!

4. 맺으며

아직 End-User들이 인터넷 사용자의 대부분을 차지한다는 점을 생각한다면, XE의 대중화를 위해서는 사용자들에게 보다 손쉽게 다가가는 노력이 무엇보다 절실하다는 사실을 깨달을 수 있다. XE와 같은 열린 개발터(Open-Source Development)에서 이는 각 기능들의 사용성에 대한 개발자들의 세심한 배려로만이 이뤄질 수 있기에, 이 '동영상 삽입' 컴포넌트의 구상도 실현화되어 XE가 사용자들에게 한발짝 더 다가갈 수 있는 계기가 되기를 희망한다.

이 게시물을