Windows 8 앱과 웹 사이트에서 멋진 원격 재생 경험 구현

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

Windows 8 앱과 웹 사이트에서 멋진 원격 재생 경험 구현

  • Comments 0

원격 재생 개요

원격 재생 기능을 사용하면 앱에서 Xbox 및 홈 네트워크의 기타 지원되는 장치로 음악, 사진 및 동영상을 스트리밍할 수 있습니다. 앱의 사진과 동영상을 간단하게 대형 TV 화면으로 즐길 수 있다고 상상해 보세요. 앱의 음악을 거실 스피커로 들을 수도 있습니다. 개발자는 앱 사용자들을 위한 이러한 시나리오를 원격 재생 계약을 통해 간단하게 실현할 수 있습니다. 여러분의 앱을 사용자의 거실에 없어서는 안 될 필수 아이템으로 만들 수 있는 매우 좋은 방법이기도 합니다.

Microsoft는 최상의 사용자, 개발자 및 장치 환경을 제공하기 위해 다음과 같은 사항을 염두에 두고 원격 재생을 디자인했습니다.

  • 사용자: 홈 네트워크처럼 사용자가 공유를 설정한 네트워크에서 Windows 8은 자동으로 Windows 인증 원격 재생 장치를 검색하여 설치합니다. 이 운영 체제는 사용자가 장치 참 메뉴에서 장치를 살짝 밀고 탭하여 지원되는 모든 앱에서 원격 재생을 시작할 수 있는 일관적인 사용자 경험을 제공합니다. 모든 미디어 중심의 Microsoft 앱에는 음악, 동영상 및 사진 앱을 포함한 원격 재생 경험이 포함되어 있습니다. 심지어 Internet Explorer 10에서도 원격 재생 계약의 구현이 가능하기 때문에 사용자는 웹 페이지의 사진과 HTML5 음악 및 동영상을 스트리밍할 수 있습니다.
  • 개발자: 원격 재생 개발자 계약은 기본 미디어 스트리밍 기술(프로토콜, 포맷 매칭, 코드 변환 등)을 높은 수준까지 추상화한 것으로, 다양한 앱에서 신속하게 원격 재생 경험을 구현 및 테스트할 수 있습니다. 모든 앱(그리고 IE의 HTML5 웹 페이지)은 기본값에 따라 기본 경험이 설정되며 나중에 경험을 사용자 지정하거나 옵트아웃할 수 있습니다.
  • 장치: Windows 8의 원격 재생 기능은 Windows 인증 원격 재생 장치에서 작동하도록 디자인되었습니다. 인증 장치는 일관적이고 안정적인 경험을 제공합니다. 여러 장치 범주에 걸쳐 수많은 가전제품 회사가 원격 재생 인증에 참여하고 있으며 여기에는 TV, 셋톱 박스, 스피커 및 오디오 수신기가 포함됩니다. 올해 초 E3(Electronics Entertainment Expo)에서 밝혔듯이 올 가을 대시보드 업데이트의 일환으로 약 7천만 대의 Xbox 360 콘솔에 원격 재생 수신기를 지원하는 새로운 기능을 적용했습니다. Windows 블로그를 수시로 방문하여 장치 관련 소식을 확인하세요.

 

몰입도가 뛰어난 대화형 경험 구현

원격 재생 기능을 사용하면 사용자에게 더 많은 즐거움을 주고 Windows 스토어에서 앱을 돋보이게 하는 멋진 멀티스크린 경험을 간단하게 제공할 수 있습니다. 원격 재생을 구현하면 다음과 같은 이점이 있습니다.

  • 소셜 경험 - 사용자는 앱에서 간단한 조작을 통해 좋아하는 사진과 동영상을 집에 있는 대형 화면으로 친구 및 가족과 함께 볼 수 있습니다.
  • 도우미 경험 - 앱이 두 번째 화면 경험을 제공할 수 있습니다. 이는 간단한 원격 제어 경험에서 사용자가 트랙을 평가하고 풍부한 앨범과 아티스트 메타데이터를 소비할 수 있는 등급 시스템까지 매우 광범위할 수 있습니다.

이 글에서는 개발자 샘플과 사진 앱을 사용하여 멋진 원격 재생 경험을 구현 및 테스트하는 방법을 살펴보겠습니다.

원격 재생은 Windows 8에서 어떻게 작동할까요?

사용자의 관점에서 원격 재생의 뛰어난 경험을 살펴보자면 새로운 네트워크에 연결하는 것부터 미디어를 장치에 스트리밍하는 것까지 완벽한 경험을 제공합니다.

Windows 8은 공용 네트워크에서 사용자의 개인 정보와 보안 기능을 그대로 유지하면서 원격 재생을 간단하게 설정할 수 있게 해줍니다. 홈 그룹이 설정된 PC와 사용자가 최초 실행 설정 경험의 일부로 기본 설정을 선택한 PC에서는 공유가 자동으로 설정됩니다. 뿐만 아니라 사용자가 새로운 네트워크에 연결하는 즉시 공유를 설정하고 장치에 연결할 것인지 묻는 메시지가 표시됩니다. 사용자가 네트워크 연결 UI 플라이아웃에서 네트워크 이름을 길게 눌러서 이 메시지를 불러올 수도 있습니다.

start_screen_sharing

공유가 설정되면 Windows는 약 30초 이내에 네트워크에서 지원되는 원격 재생 장치를 자동으로 검색하여 설치합니다. 사용자는 PC 설정의 장치 페이지에서 장치 사용 가능 여부를 확인할 수 있습니다. 사용자가 PC 설정의 장치 페이지에서 새 장치를 수동으로 추가할 수도 있습니다.

pcsettings_screen

원격 재생 장치가 설치되면 Windows는 설치된 원격 재생 장치를 기억하여 자동으로 네트워크에서 해당 원격 재생 장치의 사용 가능성을 추적합니다. 이제부터 사용자가 원격 재생이 가능한 앱을 사용할 경우 장치 참 메뉴에서 장치를 사용할 수 있습니다.

지금까지 살펴본 동작이 Visual Studio에서 실행되는 개발자 샘플에서는 어떻게 작동하는지 좀 더 자세히 알아보겠습니다. 이 샘플에서는 원격 재생이 빅 벅 버니 동영상에 대해 설정되어 있습니다.

big_buck

 

이 응용 프로그램은 원격 재생 계약을 그림과 같은 보기로 구현하기 때문에 장치 참 메뉴에서 장치를 살짝 밀어서 사용 가능한 장치를 확인할 수 있습니다.

big_buck2

장치를 선택하면 원격 재생이 시작됩니다. 이 예에서는 Xbox 360을 선택했으며 보시다시피 회색 오버레이가 동영상을 대체하는 모드로 비디오 컨트롤이 전환됩니다. 이제는 일시 중지, 재생, 탐색 및 볼륨 단추가 대상 장치의 재생을 제어합니다.

playto_stream

사용자는 장치 참 메뉴에서 연결 끊기를 선택하여 세션을 종료할 수 있습니다.

playto_stream2

원격 재생 계약이란 무엇입니까?

앱에서 간단하게 원격 재생을 구현할 수 있습니다. 앱의 모든 보기에 대해 다음과 같은 방법을 사용합니다.

  1. 현재 보기의 PlayToManager 개체를 만듭니다.
  2. 장치 참 메뉴가 선택되면 알림을 받을 수 있도록 SourceRequested 이벤트를 등록합니다.
  3. PlayToSource를 설정하여 해당 보기에서 스트리밍할 미디어 요소를 지정합니다. 원본이 오디오인지, 동영상인지, 아니면 이미지 요소인지에 따라 해당 미디어 유형을 사용할 수 있는 장치만 장치 참 메뉴에 표시됩니다. 사용자가 장치를 선택할 경우 해당 장치에 PlayToSource가 전송됩니다. 현재 미디어 요소가 장치에서 재생을 완료하면 다음 요소를 스트리밍하도록 PlayToSource를 업데이트할 수 있습니다.

그럼 이제 단일 미디어 항목에 원격 재생을 설정하는 간단한 예를 살펴보겠습니다.

JavaScript

<video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay />
<script type="text/javascript">
// Step 1: Obtain PlayToManager object for app’s current view.
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
// Step 2: Register for the sourcerequested event (user selects Devices button).
ptm.addEventListener("sourcerequested", function(e) {
var request = e.sourceRequest;
// Step 3: Specify the media to be streamed (to filter devices)
request.setSource(document.getElementById("videoplayer").msPlayToSource);
// The media will then be streamed to the device chosen by the user in the UI.
});
</script>

XAML

<MediaElement x:Name="videoplayer" Source="http://www.contoso.com/clip.mp4" 
AutoPlay="true" />
// Step 1: Obtain PlayToManager object for app’s current view.
PlayToManager ptm = Windows.Media.PlayTo.PlayToManager.GetForCurrentView();
// Step 2: Register for the SourceRequested event (user selects Devices button).
ptm.SourceRequested += (PlayToManager sender, PlayToSourceRequestedEventArgs e) => {
request = e.SourceRequest;
// Step 3: Specify the media to be streamed.
PlayToSourceDeferral deferral = request.GetDeferral();
request.SetSource(videoplayer.PlayToSource);
deferral.Complete();
}
// The media will then be streamed to the device chosen by the user in the UI.

언제 원격 재생 계약을 구현해야 할까요?

대형 화면 또는 고음질 스테레오에서 감상해야 제격인 사진, 음악 또는 동영상이 앱에 들어 있는 경우 원격 재생이 정답입니다. Microsoft는 개발자들이 라이프 스타일, 뉴스 리더, 팟캐스트, 미디어를 망라한 다양한 앱에서 멋진 경험을 구현하는 모습을 지켜보았습니다.

원격 재생은 Windows 8 앱에서 자동으로 설정되어 음악과 동영상 요소를 재생합니다(이미지 요소는 제외). 이 기본 경험은 개별 미디어 요소에서 더욱 잘 작동하지만 원격 재생을 사용자 지정하면 슬라이드 쇼나 재생 목록처럼 복잡한 시나리오도 해결할 수 있습니다.

원격 재생을 사용하여 장치로 스트리밍할 수 있는 미디어는 모든 음악 및 동영상 그리고 DRM으로 보호되지 않는 이미지, 즉 사용자 컬렉션과 웹 기반 스트리밍 미디어입니다. DRM 콘텐츠는 웹에서 바로 스마트 TV 같은 장치로 제공되기 때문에 원격 재생이 지원되지 않습니다.

이 글에서는 멋진 원격 재생 경험의 예로 사진 앱을 사용하겠습니다. 사진 앱은 사용자가 디지털 사진을 보고, 다른 사용자와 공유하고, 추억을 떠올리는 멋진 경험을 할 수 있는 장소로 만들어졌습니다. 집에서 대형 화면으로 디지털 사진을 볼 수 있다면 전반적인 사용자 경험과 상호 작용이 크게 강화됩니다.

사진 앱 샘플

사진 앱으로 사용자가 슬라이드 쇼를 제어할 수 있는 원격 재생 보기를 만들었습니다. 사용자는 전체 미디어를 슬라이드 보기로 볼 수 있습니다. 또한 여기에서 동영상을 재생 및 일시 중지하고, 슬라이드 쇼를 시작하고, 수동으로 항목을 TV로 보낼 수 있습니다. 사진과 동영상이 TV에서 재생되므로 앱이 Windows 8 장치의 추가 공간을 활용하여 출시 예정 항목 등의 추가 콘텐츠를 표시함으로써 TV 경험을 보완할 수 있습니다.

원격 재생을 앱의 흐름과 잘 융화시키는 것이 중요합니다. 사진 앱의 경우 원격 재생 보기가 앱의 기본 레이아웃과 나란히 표시되었습니다.

사용자는 앱 내의 어느 위치에서나 장치 참 메뉴를 열어서 호환되는 장치를 볼 수 있습니다. 사용자는 사진, 동영상 또는 컬렉션을 볼 때면 언제든지 장치 참 메뉴를 열어서 장치 옵션을 볼 수 있습니다. 사용자는 브라우징을 하는 동안 전체 앨범을 다른 장치로 보낼 수 있고 심지어 여러 앨범에서 원하는 만큼 사진을 선택하여 보내는 것도 가능합니다.

이 예에서는 사용자가 특정 사진과 동영상을 선택했기 때문에 선택한 사진과 동영상이 TV로 전송됩니다. 사용자가 장치 참 메뉴를 열면 선택된 콘텐츠 유형을 재생할 수 있는 장치가 표시됩니다. 앱에서는 콘텐츠 원본을 지정하기만 하면 됩니다.

skate_park

사용자는 장치를 선택한 후 어떤 장치가 콘텐츠를 재생하는지 알고 싶을 것입니다. 사진 앱은 현재 선택된 콘텐츠가 스트리밍되는 위치를 보여 주는 멋진 헤더를 만듭니다. 현재 재생 중인 미디어 항목은 사진이나 동영상 주위에 사각형으로 강조 표시됩니다.

아래는 TV로 재생할 때 앱이 어떻게 표시되는지를 보여 주는 그림입니다.

skate_park2

훨씬 멋지게 표시되는 슬라이드 쇼

Windows 인증 원격 재생 장치는 재생 목록 시나리오의 다음 항목을 사전 버퍼링할 수 있습니다. 장치가 재생 목록의 다음 항목을 사전 버퍼링할 수 있으면 엄청난 성능상 이점이 있으므로 멋진 사용자 경험을 구축할 수 있습니다. 앱은 재생 목록 시나리오의 "다음" 요소에 대한 원격 재생 원본을 지정하여 이 기능을 활용할 수 있습니다. 앱에서 이 고급 기능을 활용하는 방식에 대한 자세한 내용은 MSDN 빠른 시작을 참조하시기 바랍니다.

슬라이드 쇼 재생 유지

원격 재생 세션은 사용자가 연결을 끊을 때까지 계속 재생됩니다. 이것은 다음과 같은 두 가지 멀티태스킹 시나리오를 위한 조치입니다.

  1. 사용자는 같은 앱 내에서 다른 사진 앨범을 탐색할 수 있습니다. 이 시나리오를 구현하려면 사용자가 "지금 재생" 슬라이드 쇼에서 나와서 탐색할 때에도 원격 재생이 계속되는 경험을 구현해 주는 앱이 필요합니다. 예를 들어 사진 앱에서 사용자가 사진 몇 장을 선택하여 메일로 공유하는 동안 슬라이드 쇼는 TV에서 계속 재생됩니다. 또는 현재 재생 중인 슬라이드 쇼를 중지하지 않고도 보여 주고 싶은 다음 사진을 검색할 수 있습니다.
  2. 사용자는 다른 앱을 탐색할 수 있습니다. 예를 들어 슬라이드 쇼가 TV로 스트리밍되는 동안 메일을 확인할 수 있습니다. 이 경우 앱은 어떤 작업도 하지 않습니다. 이때 Windows가 자동으로 백그라운드에서 앱을 계속 실행하고 원격 재생 세션은 활성 상태입니다. 세션이 활성 상태로 유지되려면 앱이 현재 이미지를 표시한 후 약 10초 이내에 새 이미지를 보내거나 현재 오디오 또는 동영상 재생이 완료된 후 약 10초 이내에 다음 오디오 또는 동영상을 보내야 합니다. 슬라이드 쇼, 음악/동영상/재생 목록이 끝나면 Windows가 앱을 일시 중지합니다.

원격 재생에 대한 주의 사항

해야 할 일과 하지 말아야 할 일을 염두에 두고 원격 재생 경험을 구현해야 합니다.

해야 할 일:

  • 앱이 다른 장치로 재생한다는 것을 사용자에게 알립니다.
  • 사용자가 장치 참 메뉴를 사용하여 장치를 연결하고 연결을 끊도록 합니다.
  • 사용자가 앱의 다른 보기를 탐색하는 동안 원격 재생 세션을 활성 상태로 유지합니다.
  • 음악, 사진 또는 동영상 재생 목록의 경우 항상 다음 PlayToSource를 지정하여 성능을 높입니다.
  • 원격 재생을 완벽하게 사용하기 위한 자세한 지침은 MSDN 참조 페이지를 확인하시기 바랍니다.

하지 말아야 할 일:

  • 앱 내에 원격 재생을 시작하거나 종료하는 사용자 지정 단추를 만들지 마세요. 이러한 기능은 장치 참 메뉴에서 지원됩니다.

웹 사이트의 경우는 어떤가요?

앱 경험과 마찬가지로, 새로운 IE10 앱에서는 음악, 동영상 및 이미지에 대해 원격 재생이 자동으로 설정됩니다. IE는 원격 재생 원본으로 사용할 수 있는 최적의 미디어 항목을 식별합니다. 하지만 현재 보기에서 재생 중이거나 선택되었거나 강조되었거나 활성 상태인 요소를 선호합니다.

재생 시간이 5초 이하인 음악 및 동영상 요소와 300x300 픽셀 이하의 이미지는 IE에서 무시되어 자동으로 설정되지 않습니다.

간편한 웹 페이지 원격 재생을 구축하기 위한 지침과 팁은 이 MSDN 페이지를 참조하시기 바랍니다.

미디어 형식에 대한 참고 사항

Windows 8은 여기에 설명된 것처럼 광범위한 미디어 형식을 지원합니다. 하지만 최상의 성능을 위해 이미지는 1080p JPEG, 동영상은 H264 비디오와 AAC 오디오를 사용하는 720p(또는 1080p) MP4를 사용하는 것이 좋습니다.

원격 재생 실험과 검증

몇 대의 PC만 있으면 Windows Media Player를 원격 재생 수신기로 사용하여 간단하게 원격 재생을 실험 및 검증할 수 있습니다. 방법은 다음과 같습니다.

  1. PC 두 대(한 대는 개발자 PC, 다른 한 대는 Windows Media Player(WMP)를 실행하는 PC)를 홈 네트워크에 설치하여 실험용 원격 재생 수신기로 사용합니다.
  2. 실험용 원격 재생 수신기 역할을 하는 PC에서 WMP를 열고 스트리밍 메뉴를 선택한 다음 Player 원격 제어 설정…을 선택합니다.
    • WMP는 Windows 7과 Windows 8 모두에서 작동하지만 보다 개선된 Windows 8을 사용할 것을 권장합니다.
    • 두 PC에서 공유를 설정합니다.
    • 홈 네트워크에 연결합니다. 일부 기업 네트워크는 방화벽 설정과 관리 정책이 적용되어 원격 재생 장치가 검색되지 않을 수 있습니다.
  3. 개발자 PC에서 PC 설정장치 페이지로 이동하여 장치 추가를 선택하고 Windows Media Player(위의 2단계에서 설정한)를 설치합니다.
  4. 이제 두 번째 PC에서 사진 앱, 원격 재생 샘플, 계약을 구현한 앱을 포함하여 원격 재생 계약이 구현된 모든 앱에서 WMP를 원격 재생 장치로 사용할 수 있습니다.

또한 별도의 구성 없이 Xbox를 사용하여 앱에서 원격 재생을 실험 및 검증할 수도 있습니다.

결론 및 추가 정보

앱에서 멋진 원격 재생 경험을 구현하는 데 이 글이 많은 도움이 되기를 바랍니다. 댓글로 많은 의견과 질문을 남겨 주시기 바라며 Windows 스토어에서 여러분의 앱을 만나게 되기를 기대하겠습니다.

다음은 개발자 센터의 유용한 설명서에 대한 추가 정보입니다.

개요 동영상 및 설명서

빠른 시작

API 참조 및 개발자 샘플

감사합니다.

Gabe Frost, Analy Otero 및 Play To 직원 일동

  • Loading...
Leave a Comment
  • Please add 4 and 8 and type the answer here:
  • Post