MNet 미디어가 서비스를 시작한 TVDeep 실버라이트 버전은 사실 이미 6개월 전에 그 모습이 소개되었었죠. 기억하시나요? 지난 6월 19일 REMIX KOREA에서 퓨쳐 미디어에 대한 데모. 사실 데모보다는 다들 이효리로 기억하지만요. ^^


역시 서비스는 컨텐츠가 중요하단 진리를 깨닫게 해주는 스크린샷.

와 오랫만에 돌려보니까 또 느낌이 다르네요. 이 영상은 REMIX KOREA에서 다시 볼 수 있고 직링크는 : mms://wm.microsoft.com/ms/Korea/events/remix/REMIX_KOREA_070619_Session1-1.wmv
22분 부터 보시면 돼요.

이 데모는 경험도 부족한 상태에서 정말로 짧은 시간만에 만들어졌다고 해요. 로렌스 모로니는 그의 블로그에서 '턱빠지게 멋진'이란 말로 데모에 대한 느낌을 표현했었죠. 그런데 사실을 말하자면 이 데모에는 실제 서비스에서 구현할 수 없는 몇 가지 기능들이 숙련된 데모로 잘 버무려져 있었죠^^a 실제로 이런 큰 행사에서는 성공적인 데모만을 위해 몇 가지 트릭을 사용하여 만들기도 해요. 예를 들어 미리 준비된 사진이나 고정된 진행 순서 같은 것들 말이죠.

하지만 이 기능중 대부분은 마침내 실제로 구동할 수 있게 만들어졌어요. 바로 이 데모를 제작했던 굿센테크날러지의 최현정 과장님과 성주연 대리님이 해낸거죠.
지금 서비스되고 있는 MNet 미디어의 TVDeep은 실버라이트 1.0으로 제작되었지만 이미 한 달 전에 1.1로 모든 기능이 완벽하게 동작할 수 있도록 만들어졌어요. 놀랍지 않나요?

약간 허무하게도, 실버라이트 1.1은 아직 alpha preview상태로 런타임의 배포가 Go-live 라이선스로 풀려있는 1.0과는 달리 정식 서비스로 배포할 수 없었고 어쩔 수 없이 다 된 1.1을 1.0으로 다시 만들 수밖에 없었죠.

그렇게해서 우리는 '실미도 프로젝트'라고 불리게 된 MS 포스코센터 10층에서의 컨버팅 작업을 시작했고 실버라이트 1.0이 지원하지 않는 사용자 컨트롤과 리소스 관리자 그리고 웹서비스 호출 및 수신자를 직접 작성해야 했어요. 1.1이 부족하다고 생각하시나요? 1.0을 해보시면 생각이 바뀔거에요.^^

어쨌든, 닷넷프레임워크의 기능들을 충분히 활용한 실버라이트 1.1의 코드를 자바스크립트 만을 지원하는 실버라이트 1.0으로 옮긴다는 것은 쉽지 않은 일이었어요. 하지만 실버라이트의 기본적인 그래픽 렌더링 능력과 미디어 처리 능력은 1.0과 1.1이 공통이기 때문에 코드의 구성이 다르더라도 비슷한 패턴으로 구현할 수 있었죠.

그래픽의 표현이 공통된 XAML로 표현되기 때문에 구현 언어가 다르더라도 최종적으로 같은 결과를 보여줄 수 있고 이것이 실버라이트와 WPF가 UI 표현에서 가질 수 있는 가장 큰 장점이라고 생각해요. 게다가 현재 실버라이트는 작은 용량을 유지하기 위해 WPF와는 다른 XAML 셋을 가지게 되었지만 실버라이트 2.0에서는 WPF에서 사용되는 XAML의 서브셋으로 서로 호환이 되도록 구성된다니 다양한 플랫폼으로 제공되는 서비스에 더 쉬운 접근을 할 수 있을거에요.

솔직히 저는 디버깅의 괴로움과 현대 언어의 몇 가지 특성을 지원하지 않는다는 점 때문에 자바스크립트를 좋아하지 않아요. 그래서 실버라이트 1.0의 의미에 대해서 회의적으로 생각했었고요. 그렇지만 TVDeep 프로젝트를 통해서 생각을 바꿀 수 있었죠. 만약 비주얼 스튜디오 자체를 싫어하거나 많은 웹 프로그래머들이 그러하듯이 울트라에디터나 에디트플러스로 스크립트 작업을 한다면 또, 지금 당장 풍부한 미디어나 그래픽이 필요한 서비스를 런칭해야 한다면 실버라이트 1.0은 훌륭한 대안이 될 수 있다고 이제는 자신있게 얘기할 수 있어요.

지금의 MNet 미디어의 TVDeep서비스가 있기까지 제가 알고 있는 것들을 얘기했는데요, 여기에 빠진 큰 부분이 있어요. 바로 기획과 디자인.

MNet의 REMIX에서의 데모와 현재 TVDeep 서비스는 기술적인 부분이야 실버라이트가 가장 중요한 부분이지만 이런 서비스 자체를 기획하고 기획을 살릴 수 있도록 디자인 하는 것이야 말로 서비스에 있어서는 더욱 중요한 부분이라고 생각해요.

오늘 은광여고 모임에서 나왔던 얘기지만, 그런 관점에서 앞으로 사용자 경험이 중시되는 인터랙티브한 애플리케이션에서는 지금까지의 기획자와 디자이너의 역할이 상당히 수정되고 디자이너의 역할이 더욱 강조될 거에요. 이제 디자이너는 단순히 기획된 컨셉의 이미지 조각들을 그려서 넘겨주는게 아니라 기획 의도를 보다 풍부하게 표현하고 연출하고 또 직접 작동하는 시안을 만들어서 개발자에게 보여줄 수 있는 그런 능력이 필요하게 될거라고 예상해봐요. 아마 이 과정에서 기획과 디자인의 더욱 세부적인 전문가, 직업이 생겨날 수도 있겠죠. 마치 지금의 플래셔가 몇 가지 영역으로 나누어지는 것처럼요.

얘기가 너무 길어졌네요. 여튼, 많은 프로젝트들도 그렇겠지만 TVDeep서비스가 나오기까지 많은 이슈와 고민과 삽질, 그리고 스토리가 있었어요. 어떤 프로젝트를 할 때 훗날 프로젝트를 끝내고 힘들었던 삽질담을 다른 사람과 얘기할 것을 생각해보면 조금은 더 재밌게 일을 할 수 있지 않을까 생각해봐요.

많은 개발자, 디자이너, 기획자들이 좀 더 재밌게 일 할 수 있기를 바래요. :)

신고
Posted by gongdo
제목을 저렇게 써놓으면 둘이서 만난 것 같지만 그건 아니고요^^;
길버트님께서 올린 글에 전체적인 분위기는 잘 나와 있으니 관심 있으신 분을 읽어보시고 저는 추가로 덧붙일께요.

로렌스 모로니는 마이크로소프트의 테크날러지 이반젤리스트로 실버라이트를 비롯한 크로스 플랫폼, 웹 플랫폼 기술을 알리는 역할을 맡고 있다고 알고 있어요. 로렌스 모로니는 큼직한 그림이 많이 들어간 굉장히 읽기 쉬운 책을 쓰는 걸로 유명하죠^^ 마이크로소프트 관련 블로그에서는 스캇 거쓰리, 팀 스니쓰와 함께 가장 유명한 인사중에 한명입니다. 블로그는 http://blogs.msdn.com/webnext

물론 그는 기억 못하겠지만 개인적으로는 6월 MIX에서 간단한 Q&A 언컨퍼런스 시간에 질문을 통해서 처음 만났었고 그날 사인도 받았어요. 어제 네이버 실버라이트 카페의 패러다임님은 PDA에 사인을 받으시더군요. 그거 이베이에 팔면 얼마나 받을까요? :) 패러다임님이 로렌스에게 그런 얘길 했더니 이베이에 올리면 자기한테도 커미션 달라고 하더군요. 핫핫..

MNet 프로젝트가 거의 마무리 되었을 때 마침 방한중인 로렌스가 MNet에 방문했고 간략하게 시연할 수 있었어요.  로렌스는 MNet 프로젝트에 대해 상당히 긍정적인 평가를 내렸어요. 그간 꽤 힘들었는데 나름 보상이 되는 평가였죠.^^

휘발성 메모리 탓에 벌써 기억이 잘 안나니 짧게 짧게 기억을 나열해보죠.

누가 양인 아니랄까봐 DELL의 17인치 XPS 랩탑을 들고 다니더군요. 딱봐도 무게 5kg정도는 나가보이는 엄청난 두께였어요. 덜덜덜;

리믹스때의 키노트 발표도 그렇지만 유쾌한 사람이에요. 농담도 잘하.....는 것 같고요. (이놈의 영어 ㅠ.ㅜ)

한국의 특수한 사용자 성향에 처음 접하는 요구사항도 있다더군요. 바로 미디어 서비스를 할 때 2배속, 3배속 재생 같은걸 말하는 건데요, 직접 전달한 내용이니 어떤 식으로든 본사에 어필이 되었으면 좋겠어요.

길버트님과 박스마일님의 작품들(http://shiverlight.net/)에 강한 인상을 받았대요. 당연하죠? 저도 볼 때마다 감탄하는 작품들이에요. 혹시 못보신 분들은 접속해보시길...
그리고 길버트님 빨리 발로 미는 슬라이더 복구해주세욧!

영어를 배워야 겠어요. 첫 문장 해독(...)이 끝나고 다음 문장을 듣다 보면 이미 해독된 첫 문장은 휘발상 메모리 탓에 날아가 없어져 버리죠. 해독하는게 아니라 즉시 이해해야 할텐데요. 듣기는 그렇다 치고 말하는 것도 문제죠. 어제 하고 싶은 얘기가 많지만 제대로 전달을 못하는게 좀 아까웠어요. 그래도 중요한 얘기는 나름 전달 한 것 같으니 다음 기회를...

1월 달에 그 유명한 스캇 거쓰리와 함께 다시 방문한다고 해요. 그때 다시 보자고 했으니 그때까지라도 하고 싶은 얘기를 정리해봐야겠어요.

마이크로소프트가 실버라이트와 관련 기술들에 많은 노력을 기울이고 있다는 느낌이 들어요. 이렇게 작은 시장(겨우 1%도 안되는)에도 열심히 알리고 있고 개발자, 디자이너의 피드백도 상당히 귀기울이고 있고요. 그래서 실버라이트 2.0은 더욱 기대돼요.

내년 3월에 열리는 MIX08에는 그 유명한 스티브 발머가 키노트를 뛸 예정이래요. 모두 기억하시죠?
Developers! Developers! Developers~~~!
하지만 이제는 개발자만의 행사가 아닌 개발자, 디자이너, 기획자 모두를 아우를수 있도록 준비한대요. 발머의 다른 구호를 볼 수 있게 될지도요^^

메모리의 바닥까지 닥닥 긁어봐도 이정도네요.
이제 영어공부합시다!
신고
Posted by gongdo

MNet 미디어(http://mnet.com)가 더욱 풍부한 사용자 경험을 제공하는 미디어 서비스인 TVDeep(http://tvdeep.mnet.com)을 실버라이트로 전환했어요.
실은 지난 12월 3일부터 XP에서 IE 6.0을 사용하고 있는 일부 유저를 대상으로 시험 서비스를 시작했지만 시험적으로 열었다 닫았다를 반복하고 약간의 기능 구현이 안되어 있어서 자신있게 소개드리진 못했네요. :(


실버라이트가 없을 때 접속하면 아주 강력하게 설치할 것을 어필하죠. 이부분은 좀 더 설명이 필요 할 것 같아요. 오픈 3일동안 추세를 보면 대부분의 유저가 아무런 의문이나 불만 없이 -혹은 아무 생각 없이- 설치하고 넘어가긴 했지만, 그래도 실버라이트를 왜 설치하는가, 무엇이 좋아지는가에 대한 설명 정도는 해줘야 하지 않을까요?

 
설치 버튼을 누르면 곧바로 다운로드 창이 열리면서 설치할 수 있게 하죠. ActiveX의 노란 띠보다는 훨씬 직관적이고 정확한 설치 방식이라고 생각해요. 하지만 일반 사용자에게 이런 방식을 썼을 때 ActiveX는 그냥 설치하면서 애플리케이션은 설치하지 않는 경우가 더러 있다는군요. 누굴 탓하겠습니까. 앞으로 조금씩 바꿔야겠죠.


설치는 상당히 짧은 시간내에 끝나고 설치가 완료되면 브라우저를 재로딩 할 필요 없이 곧바로 로딩 및 재생이 시작되죠.

TVDeep의 메인 화면, 여타 다른 미디어 서비스와 다를게 없어 보이죠? 하지만 미디어 서비스 사용자들의 요구를 만족시키는 몇 가지 기능들이 있어요.

먼저 가장 특징적인 PIP화면. 오른쪽 위를 보면 뭔가 드래그 해보라는 메시지가 있네요? 한번 따라해보죠.
 
선택된 아이템을 드래그&드랍하면...

조그만 창이 열리면서 로딩이 시작되고

메인 동영상과 함께 PIP 동영상이 함께 재생돼요. 마우스 커서가 메인 동영상에 있을 때는 메인 동영상의 소리가 재생되고 PIP에 있을 때에는 PIP 동영상의 소리가 재생되죠. 또한, PIP는 드래그해서 위치를 옮길 수 있고 클릭했을 때는 메인 동영상과 화면이 전환되죠.

이 기능은 미디어 서비스를 많이 이용하는 사용자에게 빠르게 채널을 선택할 수 있도록 해주죠. 보통 이런 미디어를 많이 소비하는 사용자는 지금 보고 있는 동영상도 있지만 또 다른 관련 영상을 계속해서 검색하고 열어보길 원하는데요, 이럴 때 PIP는 화면의 전환 없이 또 부담 없이 다른 영상을 검색할 수 있게 하는 거죠. 특히, 이 기능은 관련 영상 및 검색과 맞물려서 더 쾌적한 환경을 마련합니다.

앞에서 얘기한 관련 영상을 한번 볼까요?

영상 하단에는 지금 재생중인 동영상과 관련된 영상 목록을 보여주는 곳이 있어요. 이 목록에 적용된 애니메이션도 그간 많이 소개되어 왔던 것들이라 식상할지도 모르겠지만 상당히 멋진 움직임을 보여주죠. 그리고 이 관련영상도 검색된 목록과 마찬가지로 드래그를 하여 PIP로 띄울 수 있어요.

 

다음으로, 북마크 기능인데요, 단순히 영상을 북마크하는게 아니라 내가 원하는 장면의 일부만 저장하고 열어보기 위한 기능이에요.


한가지 아쉬운건, 구간 선택시 위치 선택 헤더를 따라서 동영상이 원활하게 움직이면 좋을텐데 대부분의 영상은 MMS로 서비스되기 때문에 스트리밍을 위한 버퍼링이 있고 그래서 헤더가 움직이고 나서 약 3~5초 후에나 해당 위치의 영상이 나온다는 점이 있어요. 이것은 현재 기술상의 한계라고 볼 수 있겠죠.


구간을 선택하고 제목을 입력한 후 이미지를 선택하고 완료.


내 구간 저장 탭에서 저장된 내용을 볼 수 있고 같은 방식으로 사용 가능.

 
실버라이트에서 가장 큰 어려움 중에 하나는 바로 '퍼가기' 기능인데요, TVDeep은 이 문제를 단순 링크 방식과 iframe 방식으로 처리하고 있어요.

 
TVDeep의 배너 광고. 미디어를 재생하고 있는 도중에도 미디어를 가리지 않고 추가적인 광고를 삽입하고 있죠. 이 광고는 노출되는 시점을 DB에서 조절할 수 있게 되어 있어서 특정 영상에 특정 광고를 특정 시점에 노출할 수 있어서 광고의 구성에 따라서는 굉장히 높은 효율을 보일 수 있을거에요.

이 외에 풀스크린에서도 동일한 방식으로 사용할 수 있고 다른 기능들은 일반적인 미디어 플레이어와 동일하니 패스.

한가지 화면에는 설명되지 않는 팁을 알려드릴께요. :) TVDeep 플레이어는 몇 가지 키보드 제어도 가능한데요, 다음과 같은 단축 키를 지원하고 있어요.

→ : 앞으로 10초
← : 뒤로 10초
↑ : 볼륨업
↓ : 볼륨다운
Space : 재생/정지
M : 음소거

하지만 실버라이트에 포커스가 왔을 때에만 동작하니까 포커스를 잘 맞춰야 동작하네요.

MNet 미디어의 TVDeep은 실버라이트가 기존 웹 환경, 웹 페이지에서 다른 요소들과 함께 '지금 당장' 사용이 가능하다는 것을 보여주는 사례라는 점에서 팝업으로 제공되는 SBSi의 NView와 다른 의미를 가지고 있어요. 물론 사실을 얘기하자면 TVDeep은 iframe을 통해서 제공되기 때문에 어떤 의미에서는 팝업과도 같다고 볼 수 있지만 사용자에게 있어서 TVDeep은 전체적으로 하나의 페이지로 받아들여지게 되죠.

기술적으로 TVDeep은 실버라이트 1.0 즉, JavaScript 만으로도 이 정도 수준의 기능 구현이 충분히 가능하다는 것을 증명하고 있어요. 지난 5월 MIX에서 많은 사람들을 낚았던 Top Banana의 웹 동영상 편집기의 사례를 생각해보면 이 애플리케이션은 데모를 위해서 미리 준비된 리소스들(수많은 이미지, 동영상, 화면 등)로 구성된 '눈속임'이 많았죠. 하지만 TVDeep은 실버라이트 1.0과 ASP.NET AJAX와의 완벽한 조화를 통해 미디어 제어, 검색, 데이터 바인딩, 북마크, 실시간 동영상 구간 지정, PIP 등과 같은 기능들을 실제로 작동하게 구현했다는 거죠.

TVDeep은 향후 웹 미디어 플레이어 환경에 상당한 영향을 줄 것이라고 예상할 수 있어요. 기존의 미디어 플레이어가 단순히 재생을 위한 역할이었다면 TVDeep은 사용자의 미디어 소비 패턴 즉, 사용자의 경험을 더 중시한 기능들을 제공하고 있고 특히, PIP기능은 빠르게 미디어를 소비하는 사용자의 요구를 만족시키는 간단하지만 강력한 도구가 될 것이라고 확신해요.

TVDeep은 새로운 기술-실버라이트-이 기존의 기획과 디자인이 가지고 있던 상상력의 제한을 풀어주고 사용자 경험을 끌어올릴수 있다는 것을 보여주고 있어요. TVDeep의 사례가 더 재밌고 풍부한 사용자 경험을 제공하는 애플리케이션을 기획하고 디자인 할 수 있는 계기가 되었으면 해요.

마지막으로 TVDeep은 여기에서 그치지 않고 벌써 다음 세대의 미디어 서비스를 구상하고 있어요. 아직은 물리적인 인프라스트럭처가 구성되지 않았지만 제반 환경만 마련된다면 기술적으로 충분히 구현이 가능한 멋진 서비스들이죠. 기대하셔도 좋아요!

P.S.
그간 1.0으로 작업하면서 엄.청.나.게. 많은 삽질과 고난이 있었어요. 관련된 얘기는 천천히 풀어볼께요. :)

신고
Posted by gongdo


티스토리 툴바