• e-book
• 회원가입
• 정기구독신청
• 전체보기
• 로그인

실버라이트 기반 인터넷TV 구현

프린트 이메일 전송

신진수 jinsu0000@naver.com, 유태상, 박명희, 문권우 | 요즘 쓰이는 비속어를 섞자면 '쪼렙 개발자'다. 말 그대로 아직 학생이고 미숙하지만, 개발 능력을 쌓고자 하는 욕심은 누구에게도 지지 않는다. 전역 후 바로 비트 교육센터에 들어가 CS 익스퍼트 305기를 수료하기까지 1년 남짓 공부했다. 아직도 갈 길이 멀다는 것을 누구보다 잘 아는 그는 현재 경원대학교 영상처리 및 임베디드 연구실에서 새로운 공부에 전념하고 있다.

필자는 어렸을 때부터 미국의 일상과 사회를 풍자한 만화 ‘심슨 가족‘을 즐겨 보았다. 극 중 주인공인 호머 심슨 씨는 도너츠 중독에 걸린 전형적인 미국의 커치 포테이토(Couch potato: 감자칩을 들고 쇼파에 앉아 TV시청을 주로 삼는 게으름뱅이)다. 그는 일과 외엔 어김없이 군것질을 하며 텔레비전을 본다. 지금부터 호머씨와 아들 바트를 통해 본 프로젝트에 대한 시나리오를 상황극으로 표현해 보겠다.

호머는 오늘도 고민 중이다. 최근 사람들의 입에 오르내리는 IPTV 때문이다. 원하는 시간에 보고 싶은 채널을 볼 수 있을 뿐더러, 인터넷 검색을 비롯한 부가서비스가 가능하다니, 구미 당기는 이야기다. 하지만 수신기를 다는 번거로움과 비용 문제 때문에 갈등 중이다. 만일 IPTV를 시청하기로 결정해도 회사마다 제공하는 서비스가 달라 결정에 어려움이 더해질 수밖에 없다. 또 거실의 텔레비전은 너무 구식이라, HD 텔레비전을 새로 구입해야 할 실정이다. 머리를 긁적이는 아버지를 지켜보던 어린 바트는 장난기어린 표정으로 아버지의 손을 끌어 자신의 방으로 인도한다. 이윽고, 호머는 고민이 풀린듯 환하게 웃는다.

호머의 고민대로 IPTV는 요금문제, 셋톱박스를 구매해야 한다는 것뿐만 아니라 초고속 인터넷을 사용함에도 불구하고 한정된 서비스밖에 제공하지 못한다는 게 한계다. 이러한 한계를 극복하는 방법이 없을까? 호머의 아들 바트는 단지 웹브라우저를 실행시켜 호머를 만족시켰다. 웹브라우저에는 인터넷TV가 띄워져 있었고, 이 서비스는 HD급 고화질 콘텐츠 방송은 물론, 사용자가 원하는 인터넷 서비스를 직접 골라 만드는 위젯 기능을 제공한다. 위 시나리오는 본 프로젝트 Settop Box On Web이 실용화 되었을 때의 이야기다. 호머를 만족시킨 인터넷TV가 어떻게 구현되는지 살펴보자.

실버라이트와 미디어 서비스
지난 2007년 4월 믹스 07행사에서 실버라이트에 대한 관심이 집중된 이래로 많은 영상 서비스 업체들이 실버라이트를 통한 서비스를 개시하기 시작했다. 우리나라에서는 엠넷미디어나 iSBS 등이 유명한 사례다. 실버라이트는 VC-1 코덱을 통해 HD급 고화질의 오버레이 미디어 서비스를 지원하고 기존 윈도우즈 미디어 비디오(WMV) 형식을 그대로 사용한다는 차별화되는 미디어 서비스 특징이 있다. 또 서비스 제공자의 측면에서는 코덱이 무료라는 것과 윈도우즈 미디어 서버를 통한 광고 삽입이 쉽다는 강점이 있으며, 실버라이트 스트리밍 서비스나 인코더 SDK를 제공하는 등 마이크로소프트사의 미디어 분야 지원도 늘고 있다.

본 프로젝트의 주제를 선정한 후 사용 언어와 툴에 대한 고민은 크지 않았다. 리치 인터넷 애플리케이션을 통해 고화질 영상 서비스를 구현하기로 확정한 이상 실버라이트가 가장 적합하다고 판단했다. 초기에는 실버라이트가 순수한 클라이언트 기술이기 때문에 서버를 무엇으로 사용하든 상관없다고 오판했다. 그러나 실버라이트의 여러 가지 까다롭다면 까다로운 조건과 WMV형식의 콘텐츠라는 점에서 착안 윈도우즈 미디어 서버를 사용하기로 최종 결정하고 <그림 1>과 같이 시스템 아키텍처를 그렸다.

<그림 1>의 클라이언트는 실버라이트 런타임과 웹브라우저를 가지고 있는 일반 컴퓨터다. 웹서버는 윈도우즈 서버 2003 기반에 MS SQL 2005를 데이터베이스로 사용한다, 사용자는 웹브라우저를 통해 웹서버에 탑재된 애플리케이션을 사용하게 되고 메뉴의 채널을 통해서 직접 스트림 서버의 스트리밍 서비스를 받게 된다. 관리자는 원본 영상 콘텐츠를 인코딩 프로바이더를 통해 인코딩한다. 인코딩 프로바이더는 WPF를 사용하여 만든 애플리케이션을 통해 인코딩 작업과 스트리밍 서버로의 FTP전송, LINQ to SQL을 통해 웹서버의 데이터베이스 업데이트를 수행한다. 인코딩 작업은 마이크로소프트의 익스프레션 인코더 명령어를 배치파일 및 컨피그 명령으로 수행하게 된다.  

서버 환경 구축
서버는 기본적으로 윈도우즈 서버 2003 서비스 팩 2 환경에서 제공하는 IIS 6.0 및 윈도우즈 미디어 서비스를 사용하였다. 사실상 실버라이트를 통한 미디어 서비스에 가장 적합한 서버 버전은 윈도우즈 서버 2008과 IIS 7.0인 것으로 알려져 있다. 또 본 프로젝트는 스트리밍 서비스에 전념하기 위한 스트림 서버를 나누어 사용했으나, 여건에 따라서 웹서버와 스트림 서버를 함께 사용하는 것도 상관없으며 상황에 따라 스트림 서버를 여러 개로 분리하여 밸런싱을 맞추는 것도 하나의 방법일 수 있다.
웹서버에 사용할 데이터베이스로는 MS-SQL Server 2005를 사용한다. 또 웹 서비스를 참조하여 웹서버에 업데이트하기 위하여 비주얼스튜디오 2008과 실버라이트 2.0 툴킷도 설치해야 한다.

IIS설치 시에는 등록 정보에 MIME 형식을 선택하여 XAML과 XAP 형식을 추가해줘야 한다. MIME 형식은 실버라이트 버전에 따라 조금씩 달라지므로 MSDN을 참고할 것을 권장한다. 또 사용 웹사이트 속성 창에서 ASP.NET 버전을 2.0 이상으로 바꿔준다.
웹서버와 같은 서버에 미디어 서비스를 사용한다면 반드시 포트의 충돌이 일어나지 않도록 번호를 바꿔준다. 이후에 미디어 서비스의 콘텐츠는 [mms://서버 주소:포트 번호/파일 경로 및 이름]으로 접근하게 된다. 또 MMS 프로토콜을 사용하지만 독립적인 공식 프로토콜은 아니므로 HTTP 서버 프로토콜을 함께 사용해야 한다.

애플리케이션 전반
이제 웹 애플리케이션을 작성할 차례다. 본 프로젝트의 기본 페이지는 좌측의 채널 메뉴와 우측의 위젯 메뉴, 그리고 플레이어 컨트롤로 구성된다. 채널 메뉴는 장르 하위에 스테이션(방송국) 그리고 그에 해당되는 비디오 콘텐츠들로 이뤄진다. 데이터베이스의 테이블 역시 장르, 스테이션, 콘텐츠로 구성된다.

실버라이트는 기본적으로 모듈보다는 객체의 기능을 가지는 유저 컨트롤이라는 단위를 사용한다. 본 프로젝트는 기본 Page 유저 컨트롤 외에 장르의 타입으로 사용되는 ChGenre 유저 컨트롤과, 방송국과 콘텐츠의 타입이 되는 Chobj 유저 컨트롤을 사용한다. 그 외에 위젯에 관련된 유저 컨트롤들과 기본 페이지 상에서 좌측, 우측 메뉴의 효과로 사용될 ElipControl, 로딩 스플래쉬 유저 컨트롤 등이 있다(위젯에 관한 내용은 다음 호에서 다루기로 한다).

<리스트 1>과 같이 채널에 관련된 유저 컨트롤은 List 컨테이너로 관리된다. 사용자가 채널을 선택할 시 쿼리를 통해 DB에서 불러진 데이터들은 유저 컨트롤 형식으로 변환되어 List 컨테이너의 Add 멤버 함수를 통해서 삽입된다. 삽입된 유저 컨트롤들은 각각 마우스 이벤트 등록되어 다음 명령을 기다리게 된다.

좌측, 우측, 플레이어 컨트롤의 사용 여부는 ENUM형을 통해 관리된다. 어느 한 컨트롤을 사용할 때 다른 컨트롤에 명령이 들어간다던지 방해가 되지 않도록 Collapsed 속성을 잘 활용한다(얼마 전 출시된 실버라이트 2.0 Beta 2에서는 부모나 다른 유저 컨트롤에 이벤트가 들어가는 이벤트 버블링을 막아주는 기능도 생겼으나 드래그앤드랍과 같이 의도적인 이벤트 전달이 필요하다면 사용하지 않는 편이 쉽다).  채널 역시 Enum 형으로 관리된다.

UI 제작
리치 인터넷 애플리케이션은 기존의 새로고침이나 동기방식이 아닌 비동기적 방식을 사용하므로 데스크톱 수준의 유저 인터페이스를 구현할 수 있어 편리한 UX를 제공한다. 특히 실버라이트는 디자이너와 개발자의 협업에 큰 기여를 한다는 평가를 받고 있는 XAML 형식을 통해 UI를 구현 할 수 있다.

XAML은 윈도우즈 프레젠테이션 파운데이션에서 사용되던 XML형식의 언어로서 언어 편집기를 통해 간단히 작성할 수 있지만 마이크로소프트에서 제공하는 익스프레션 툴을 사용하는 것이 현명하다. <리스트 2>의 간단한 XAML 작성의 예로 ChGenre.xaml 코드를 보며  UI 제작을 살펴보자.

실버라이트2.0의 기본 레이아웃 컨트롤은 절대좌표 기반의 단순한 컨테이너인 캔버스와, 수평 혹은 수직으로 객체를 정렬하는 스택패널, 행과 열의 개념으로 정렬하는 그리드로 구분된다. \

ChGenre는 캔버스 기반의 유저 컨트롤이다. <리스트 2>를 보면 느끼겠지만 XAML은 처음 보는 사람도 이해가 빠를 정도로 쉽고 간단한 언어다. 캔버스 안에 먼저 파란색 계열의 그라데이션을 넣은 Rectangle 컨트롤을 넣었다. 단, Opacity가 0으로 설정된 것은 투명도가 0이라는 뜻으로 커서를 올리거나 클릭을 했을 때 투명도를 높여 파란색으로 변하는 효과를 주기 위한 목적이다. 기본적인 어도비 계열의 디자인과 다른 점이라면 레이아웃 소스가 아래로 갈수록 상위 레이아웃의 개념을 가진다는 점이다. <리스트 2>와 같이 파란 Rectangle위에 경계선, 위에 이미지 컨트롤, 그 위에 선택해제 상태의 캔버스를 덮을 또 다른 네모 컨트롤 Cotten과 텍스트 상자가 있다.

스토리보드 제작 및 등록
다음은 구현된 유저 컨트롤에 애니메이션 효과를 넣는 법을 간단히 살펴보자(<리스트 3> 참고). 실버라이트의 애니메이션 효과는 스토리보드라는 개념으로 사용되며 원하는 레이아웃이나 유저 컨트롤 자체에 시간에 따른 변화를 줄 수 있다. 역시 익스프레션 블렌드를 통해서 타임라인을 시각적으로 살펴가며 정교하게 구현할 수 있다. 작성된 스토리보드는 유저 컨트롤의 리소스영역에 들어간다.

<리스트 3>은 <리스트 2>에서 생성된 레이아웃들로 작성된 스토리보드들이다. MouseOver이라는 이름을 가진 스토리보드는 0,3초 동안 Ractangle의 투명도가 0.404까지 올라간다. 반면 Cotten이라는 컨트롤은 같은 시간 0까지 투명도가 내려가며 상위의 레이아웃인 경계선이 명확하게 진해진다. 이 스토리보드는 ChGenre 유저 컨트롤에 마우스를 올렸을 때의 이벤트 발생 시 실행될 것이다. 비단 ChGenre의 경우뿐만 아니라, 기본 Page부터 모든 유저 컨트롤에 이르기까지 UI와 스토리보드 작성은 같은 형식을 가진다.

이제 위에서 구현한 UI와 스토리보드를 마우스 이벤트에 직접 등록해보자. XAML로 구현된 UI는 닷넷 프레임워크 플랫폼 기반 하에 자바 스크립트 라든지 C#이나 VB을 비롯한 닷넷 언어로 처리가 가능하다. 여기서는 가장 많은 개발자가 선호하는 방식인 C#을 통한 처리과정을 살펴보자. ChGenre의 이벤트 등록 형식은 <리스트 4>와 같다.

<리스트 4>의 ChGenre 생성자 부분에서 마우스 이벤트를 등록하고 있다. 자신의 영역에 마우스 커서가 들어오면 이벤트 함수로 ChGenre_MouseEnter를 호출하고 그 속에서 스토리보드 MouseOver의 멤버함수인 Begin()을 호출하는 식이다. 이상 아주 기본적인 내용이었다. 나머지 메뉴도 이와 같은 방식으로 구현된다. 구현이 완성된 모습은 <화면1>과 같다.

플레이어 구현
다음은 영상 서비스의 가장 중심 기술인 플레이어 구현이다. 사실 실버라이트 자체가 플레이어 기능의 대부분을 제공하기 때문에 개발자는 어떠한 이벤트에 어떻게 연결하느냐가 문제다. 재생의 프로그레시브 바는 보통 타이머를 통해서 증가시키는 경우가 많다. 프로그래시브 바의 전체 길이와 현재 재생 비율을 곱한 값이 현재 재생 프로그레시브 바의 길이가 되고 이를 초단위의 htm l타이머를 통해 호출하는 형식이다.

이전 채널이나 다음 채널 재생의 경우는 리스트 형태의 listMy Ch 컨테이너 안에 있는 목록의 순서를 따른다. listMyCh 컨테이너는 사용자가 고른 영상을 담거나 뺄 수 있고, 기본적으로 순차적인 재생을 제공한다.

이상 채널과 플레이어 등을 통해 실버라이트의 기본적인 구현 방식에 대하여 간략히 살펴보았다. 이후에 영상의 재생을 비롯한 여러 가지 기능들을 수행하다 보면 영상 부분의 비율 조정이 반드시 필요하다는 생각을 하게 된다. 웹브라우저는 유동적인 윈도우 구조이기 때문에 가로 세로의 비율이 무작위로 바뀐다. 또한 전체화면을 했을 때도 비율이 변한다. 물론 실버라이트의 애플리케이션은 벡터 방식을 따르고 브라우저의 비율에 따라 유연하게 변화 하는 모습이 대견하다. 하지만 우리가 소녀시대의 영상을 보고 있다고 가정해보자. 지극히 납작하거나 길어져버린 그녀들은 더 이상 오빠들의 마음을 훈훈하게 덥혀주지 못할 것이다. 다음으로 화면 비율을 조정한 후에 소녀시대 콘텐츠를 재생해 보겠다.  
 
화면 비율 조정
본 프로젝트의 기본 화면 비율은 1280 x 720 픽셀로 HD 규격을 따른다. 브라우저의 크기가 변했을 때의 이벤트는 애플리케이션 호스트 영역에서 제공해주는 Cotent_Resized 이벤트 메소드를 통해서 수정할 수 있다.  먼저 기본 Page 유저 컨트롤의 <리스트 5>과 같이 스케일을 1로 명시해 놓고 메인 미디어 플레이어도 역시 스케일을 1로 잡아주자.

전체 화면 비율은 AllScale로 미디어 출력 영역은 mpScale로 이름 붙여졌으며 두 비율 모두 X축과 Y축의 현재 비율을 1로 잡아 놓았다. 이렇게 해서 XAML을 통한 준비는 끝났다. 이제 C#파일로 크기를 조정해 보자(<리스트 6>참고).

<리스트 6>의 cvRoot는 기본 페이지의 레이아웃 중에서 가장 근간이 되는 캔버스이다. 즉 현재 브라우저 크기를 개발자가 작성한 페이지 크기로 나눈 값이 전체 스케일 값이 되고, 전체 페이지 크기에 스케일 값이 적용되는 것이다. 영상 부분에서 14/15는 본 프로젝트의 상위에 존재하는 타이틀 때문에 마진을 남긴 값이다. 일단 웹브라우저의 사이즈에 맞게 변화 시킨 후, 확인 차 원점을 변화된 cvRoot에 맞춰 재정의 해준다. 그 후 전체 스케일에 비례하는 값으로 나눠 주면 <화면 2>와 같이 원래 비율이 유지되는 영상을 볼 수 있다.

이제 화면 조정이 완료 되었다. <화면 2>를 보면 사이즈가 다른 세 개의 브라우저에서 각각 영상을 재생하고 있다. 플레이어 컨트롤이나 메뉴 컨트롤 모두 유동적으로 크기가 변했지만, 영상 자체의 비율은 원본의 사이즈를 그대로 유지하고 있다. 이제 지극히 길거나 짧은 그녀들을 두려워 할 필요가 없다. 브라우저를 어떻게 조정하든지 우리가 기대하던 바로 그 소녀시대다.

드래그앤드랍
리치 인터넷 애플리케이션은 데스크톱 애플리케이션 수준의 비동기 방식 구현을 목적으로 한다. 즉, 사용자 경험(이하 UX)을 극대화 시킬 수 있는 가능성을 제시하고 있다. 우리가 흔히 사용하고 편리하게 느낄 수 있었던 데스크톱 애플리케이션 기능의 일환인 드래그앤드랍을 구현해 UX를 도모해 보았다.

본 프로젝트에서 구현할 드래그앤드랍은 채널에 올려진 콘텐츠들을 마우스로 옮겨 마이채널에 넣는 방식이다. 위젯 역시 같은 함수 내에서 드래그앤드랍을 함께 구현한 부분이 많지만, 본 호에서는 채널에 관한 드래그 부분만 언급한다. 먼저 chobj타입의 인스턴스 ChobjDraged를 생성한다. 기본적으로 Collapsed (시각적인 출력 정지 상태로서 이벤트를 받지 못함) 상태로 조정한다. 그리고 커서가 올라갔을 때의 이벤트인 마우스 엔터 이벤트를 걸어준다. 또한 불리언 변수를 사용하여 현재 상태가 드래그 상태인지 확인해야 한다. 

 <리스트 7>은 chobj 내의 멤버 함수로서 일종의 복사 생성자와 같은 역할을 한다. 현재 위치가 마이채널인지 인자로 받은 불리언 변수를 통해 확인한 후 두 번째 인자에 자신을 복사한다. 이 때 마이채널이 아니라면 인덱스와 이미지, 이름만 복사하며(드래그용 객체) 마이채널일 경우 모든 값과 정보를 복사한다. <리스트 8>의 ChannelMedia는 장르와 스테이션을 선택하면 등장하는 콘텐츠 채널의 chobj객체로서 <리스트 7>의 clone 멤버 함수를 사용하여 드래그 될 모습을 보여줄 객체인 ChobjDraged에 복사한다.

<리스트 8>에서 isDragging 불리언 변수가 참으로 바뀌면 <리스트 9>의 일련의 메소드들이 진행된다. 먼저 마이채널이 객체를 받아드릴 준비가 되었음을 표시하기 위해 시각적으로 하얗게 커지는 onMyChannel 스토리보드가 시작되며, 콘텐츠 채널 메뉴 상에서 마우스 버튼을 다시 떼버리면 불리언 변수에 거짓을 넣어 드래그를 중지 시킨다. 또 전체 페이지 레이아웃 상에서 불리언 변수를 참으로 유지한 채 움직이면 ChobjDraged의 모습을 보여주고 커서를 따라다니게 한다. 이러한 방식으로 마우스를 통해 드래그 하는 기능을 구현해 보았다.

마지막으로 드랍을 살펴보자. <리스트 10> 첫 번째 코드의 if문에 나와 있는 Y좌표 755이상 X좌표 800이하는 마이채널이 위치한 곳으로 커서를 떼면 드래그 하던 ChobjDraged 객체를 복사해 마이채널의 리스트에 삽입한다. 이 때 SetMyChannel 메소드를 호출하게 되며 이미 있는 아이템인지 확인하여 새로운 아이템일 경우에만 레이아웃 위치에 맞춰 생성 및 복사하고 마이채널 컨테이너에 저장한다.

LINQ를 통한 데이터베이스 연결
다음은 LINQ to SQL을 통한 데이터베이스 연동이다. 웹서비스의 IIS 참조에 순서가 있기 때문에 서버에서 프로젝트를 구현한다는 가정으로 시작한다. 먼저 데이터베이스 테이블은 <그림 2>과 같이 생성하였다.

다음은 MS SQL 2005 패키지에 포함된 SQL 서버 스튜디오를 사용하여 웹서버에 생성된 데이터베이스를 연결시킨다. 이 작업을 완료하면 비주얼스튜디오 2008에서 서버 익스플로러를 통해 프로젝트와 연결이 가능하다. 프로젝트의 웹사이트 부분에 LINQ to SQL 아이템을 생성하면 .dbml파일이 생성된다. 이 파일의 디자이너 창에 연결시킨 데이터베이스의 테이블을 드래그앤드랍하여 간단한 LINQ to SQL의 기본 작업을 끝낼 수 있다. 이제 프로젝트 내에 웹서비스를 생성하여 Generic 등 필요한 네임 스페이스와 함께 System.Data.Linq.SqlClient 네임 스페이스를 추가해준다. 

<리스트 11>은 웹메소드에 LINQ 쿼리를 작성한 코드의 일부로서 데이터베이스에서 장르의 목록을 가져온다. var형은 C# 3.0에서부터 생긴 유추 타입이며 말 그대로 타입을 유추한다. 쿼리 표현식을 통해 var형 변수 r에 저장된 테이블의 데이터들은 이중 리스트 컨테이너에 저장된다. 이러한 과정을 통해 질의와 응답이 가능한 웹메소드가 생성된다. 웹메소드들이 완성된 웹서비스는 실버라이트 프로젝트를 제외시킨 상태에서 빌드하고 IIS에 올려준다. 이때 비주얼스튜디오 2008의 Copy Web Site 기능을 사용하면 편리하게 업로드 할 수 있다. 업로드 후에 다시 실버라이트 프로젝트를 포함시키고 서비스 레퍼런스로 올린 웹서비스를 참조한다. <리스트 12>의 _WS와 같이 서비스 레퍼런스는 XML형식을 받아오는 SOAP 클라이언트로 선언되며 비동기식이기 때문에 질의 완료 이벤트를 통해서 사용하게 된다.

실버라이트가 제시한 새로운 서비스 방향  

이상 간단하게나마 애플리케이션의 전반적인 흐름을 훑어보았다. 확실히 기존의 여타 미디어 웹서비스들과 여러 가지 차이를 느낄 수 있을 것이다. 우선 고화질의 영상 제공뿐만 아니라, HTML페이지에 미디어 서비스를 첨가시킨 개념에서 탈피해 미디어 서비스 페이지가 주가 되는 애플리케이션이라는 것이다. 또 기존 웹 페이지에 RIA엔진이 삽입된 일반적인 사례와 달리 RIA가 기반이 되며 그 위에 웹페이지(HTML 위젯 서비스) 등이 삽입된 형태라고 봐도 좋을 듯하다. 이러한 발상의 전환이야 말로 실버라이트를 비롯한 RIA의 더 큰 가능성을 보여준다고 생각된다. 다음 호에서는 호머 심슨을 또 다시 기쁘게 해준 HTML 위젯 서비스와 매쉬업 서비스에 대해 이야기 해보겠다.