SkyDrive를 이용하여 'Windows 8' 앱을 클라우드로 확장

Article
10/04/2011

Windows Live ID를 이용한 Windows 8 로그인을 다룬 최근 게시물에 이어 이번에는 새로운 Windows 8 메트로 스타일 앱에서 SkyDrive를 사용하는 방법에 대해 알아보겠습니다. 앱이 설정 정보를 로밍하기 위해 SkyDrive에서 “자동으로 사용”되는 일부 용량을 할당받고, 앱 스스로를 로밍하기는 하지만, 개발자들이 앱 사용자들로 하여금 사용자가 직접 만든 데이터를 여러 장치에서 더 쉽게 로밍하게 만들기를 간절히 바라고 있다는 걸 알고 있습니다. 모든 Windows Live ID에는 무료로 제공되는 클라우드 기반의 드라이브가 포함되어 있으므로 SkyDrive는 이런 목표에 딱 안성맞춤입니다. 이 글에서는 개발자가 앱 내에서 SkyDrive 저장소를 사용하는 메트로 스타일 앱을 구축하는 방법에 대해 논의합니다. 이 블로그에서는 처음으로 코드가 포함되었으며 코드를 다룬 게시물이 앞으로 더 올라 올 예정입니다. 이 글은 SkyDrive 장치 및 로밍 팀의 그룹 프로그램 관리자인 Mike Torres가 작성했습니다. - Steven

한 사람이 여러 장치를 사용하는 추세이기는 하지만, 아직까지도 많은 사람들이 하나의 PC나 저장 장치에 중요한 파일을 모두 저장하고, 다른 장치에서는 이 파일에 액세스하지 않습니다. 이러한 파일은 데스크톱 PC, 랩톱 또는 USB 메모리 등 하나의 '위치'에 묶여 있기 때문에, 이러한 위치에 액세스할 수 없는 경우 여기에 있는 문서나 사진을 사용할 수 없게 됩니다. 파일에 액세스하기가 어려울 뿐만 아니라 때로 액세스 자체가 불가능하고, 다른 네트워크 사용자와 공유하기도 쉽지 않습니다.

이제 클라우드를 통해 장소에 구애 받지 않고 어디서나 콘텐츠에 쉽게 액세스할 수 있습니다. 파일을 한 곳에 보관하고 전세계 어디서든 인터넷에 연결된 모든 장치에서 파일에 액세스할 수 있습니다. 클라우드에서 하나의 파일 복사본을 관리함으로써 사진을 공유하고 문서를 이용하여 실시간으로 공동 작업하는 일이 훨씬 더 쉬워졌습니다. 그러나, 클라우드는 아직 콘텐츠에 액세스하는 주된 방법으로 정착 하지 못한 상태입니다.

//build/ 컨퍼런스 기조 연설에서 Chris Jones는 모든 Windows 8 사용자가 SkyDrive를 사용하는 방안에 관해 언급했습니다. SkyDrive는 모든 사용자가 중요한 파일을 중앙 위치에 두고 여기 에 즉시 액세스하여 쉽게 공유할 수 있는 단일 클라우드의 개념입니다. 이 컨퍼런스에서는 Windows 8 개발자가 Live Connect와 Live SDK를 통해 앱을 클라우드에 연결하는 내용을 다룬 세션도 진행 되었습니다. 앱과 클라우드가 연결되면 메트로 스타일 앱에서 Live 클라우드를 사용하여 Windows Live ID를 통한 단일 로그인을 구현하고 사용자에게 부여된 권한에 따라 SkyDrive에 있는 문서, 사진, 비디오 등의 개인 데이터에 액세스할 수 있습니다.

Windows 8에서 사용할 메트로 스타일 앱을 개발하는 분들을 위해 이 글에서는 단일 로그인을 구현하고 SkyDrive에서 사용자 데이터에 액세스하여 메트로 스타일 앱을 더 효율적으로 맞춤 설정하는 방법을 알려드립니다. 물론 이를 위해서는 사용자 동의가 필요합니다.

Live 클라우드에 앱 연결

개발자가 전세계적으로 이용되는 뛰어난 앱을 개발하려고 할 때 플랫폼에 관계없이 직면하게 되는 두 가지 문제가 있습니다.

사용자에게 로그인 및 등록 요구. 사용자들은 웹 사이트와 앱에 로그인하기를 꺼려하지만, 개발자들은 사용자가 로그인한 후에 앱에 대한 애착과 관심도가 커진다는 사실을 잘 알고 있습니 다. 로그인을 통해 사용자의 경험을 개별적으로 맞춤 설정하고 사용자의 데이터와 개인 설정을 앱에 저장할 수 있습니다.
사용자 콘텐츠를 앱으로 쉽게 가져와 사용자 경험 개선. 사용자들이 여러 장치와 클라우드에 여기저기 흩어진 채로 사진을 보관하고 있다는 점을 고려하면 사용자에게 프로필 사진을 설정하 도록 요청하는 단순한 작업마저도 복잡해질 수 있습니다.

Windows 8의 경우, Photos 및 Mail 등의 자체 앱에서 이러한 문제를 해결했으며 메트로 스타일 앱은 동일한 플랫폼과 기술을 사용할 수 있습니다. 구체적으로 아래 방법으로 이런 문제를 해결했습 니다.

사용자의 클라우드 기반 ID는 이제 단일 로그인을 위해 사용자 권한에 따라 어디서나 앱과 웹 사이트에 액세스할 수 있는 OS의 기본 요소가 되었습니다. 다시 말해서 앱이 사용자의 로그인 상태와 ID를 상속할 수 있으므로 별도의 인증 과정을 거치지 않아도 됩니다. 이 부분은 특히 아래 항목을 지원하는 데 매우 중요합니다.
업계 표준 프로토콜을 사용하여 앱에서 Live 클라우드의 사용자 콘텐츠에 액세스할 수 있도록 했습니다. 예를 들어 인증과 권한 부여에는 OAuth를 사용하고, SkyDrive와 핫메일에 액세스할 때 반환되는 데이터의 페이로드 역할을 하는 JSON을 사용하고, Windows Live Messenger와의 상호 운용성을 위해 XMPP를 사용했습니다. 또한 WinRT에서 간편한 개발을 지원하기 위해 Visual Studio 11 Express와 통합하여 Windows 8 개발자 프리뷰용 Live SDK를 제공하고 있습니다.

사용자는 Windows Live ID에 앱을 처음으로 연결한 후 Windows Live ID를 통해 로그인한 모든 Windows 8 PC에서 언제나 매끄럽게 단일 로그인을 경험할 수 있습니다. 마찬가지로 웹 사이트에 서도 Windows Live ID로 PC에 로그인하거나 핫메일 또는 SkyDrive 등 Windows Live ID를 지원하는 사이트에 로그인한 후 단일 로그인을 경험할 수 있습니다.

Windows Live ID로 단일 로그인을 사용하고 SkyDrive 콘텐츠를 메트로 스타일 앱에 통합하는 가장 쉬운 방법은 Live SDK를 사용하는 것입니다.

이러한 서비스의 사용은 전적으로 개발자의 선택에 달려 있으며, 앱에 이 서비스를 꼭 사용해야 하는 것은 아닙니다. Windows 8용 앱은 Live ID로 로그인해야 한다거나 특정한 클라우드 기반 저장소 를 사용해야 한다는 조건은 없습니다. 앱 개발자의 필요에 따라 이러한 서비스를 사용할 수 있습니다.

앱에서 Live SDK 사용

먼저, Windows 8 개발자 프리뷰와 Live SDK 개발자 프리뷰가 PC에 설치되어 있어 야 합니다. 개발자 프리뷰를 설치하면 Windows 개발자 프리뷰용 Microsoft Visual Studio 11 Express도 함께 설치됩니다. 두 번째, Windows Push Notifications & Live Connect 앱 관리 사이트를 방문하여 Live 클라우드에 액세스하도록 메트로 스타일 앱을 구성해야 합니다. 사이트의 단계에 따라 Live Connect를 사용하도록 앱을 등록합니다.

Live Connect를 사용하도록 앱을 구성한 후에는 Live SDK에 대한 참조를 추가해야 합니다. Live SDK는 C#, JavaScript 및 VB에서 개발할 때 사용할 수 있습니다. [프로젝트]를 마우스 오른 쪽 단추로 클릭하고 [참조 추가] , [Extension SDKs](확장 SDK) 를 차례로 선택한 후 목록에서 Live SDK에 대한 항목을 선택하여 프로젝트에 참조를 추가할 수 있습니다. 예를 들 면 다음과 같습니다.

JavaScript 응용 프로그램에서는 Default.html에 다음 스크립트 참조만 추가하면 됩니다.

     <script src="ms-wwa:///LiveSDKHTML.5.0/js/wl.js" 
></script>

C#에서는 다음 참조를 추가하여 코드에서 Live SDK를 이용할 수 있습니다.

  using Microsoft.Live;

VB에서는 다음 import 문만 있으면 됩니다.

  Imports Microsoft.Live

이 예는 Windows 8용 메트로 스타일 앱을 개발할 때 선택한 언어로 프로그래밍을 지원하는 한 가지 방법일 뿐입니다.

메트로 스타일 앱에서 Windows Live ID 사용

앱에서 SSO(Single Sign On)를 활용하려면 앱의 특정 위치에 로그인 단추를 배치해야 합니다. 사용자가 로그인 단추를 클릭하는 경우 사용자가 Windows Live ID로 PC에 로그인되어 있다면 자동
으로 로그인되고, 그렇지 않으면 로그인 화면이 표시됩니다. 로그인한 후에는 앱에서 SkyDrive 사진 등의 사용자 데이터에 액세스하도록 허용할 것인지 물어봅니다. 로그인 단추를 추가하기만 하면 이러한
작업 흐름이 자동으로 처리됩니다. 단, 자동으로 로그인되지 않고 사용자가 앱 로그인을 확인한다는 데는 변함이 없습니다. 이것은 중요한 설계 고려 사항입니다.

다음은 로그인 단추를 배치하기 위한 샘플 HTML입니다. 이 코드는 단순한 DIV이며 별도로 구성이 필요합니다.

  <div id="signinbutton" style="width: 251px; margin-left: auto; margin-top: 
40%; height: 64px; top: 0px;"></div>

샘플 HTML의 역할은 페이지에 공간을 할당하는 것에 불과하므로 페이지에 로그인 단추를 추가한 후 이 단추를 연결시켜야 합니다. 그리고 앱에 필요한 범위에 맞게 이 로그인 단추를 구성해야 합니다.
'범위'는 앱이 액세스하는 대상과, 사용자가 제공하기로 동의해야 하는 대상을 정의합니다. SkyDrive 데이터에 액세스하려면 앱에 다음 두 가지 범위가 필요합니다.

wl.signin - 이 범위는 앱에 자동 로그인 기능을 제공합니다.
wl.skydrive - 이 범위는 사용자의 SkyDrive 앨범과 사진에 대한 읽기 액세스를 허용합니다. 참고로 콘텐츠를 SkyDrive로 업로드하려는 경우 앱에
wl.skydrive_update를 사용해야 합니다.

다음은 초기화를 위한 샘플 JavaScript 코드입니다. 여기서는 페이지에 "signinbutton" ID로 로그인 단추를 이미 만들었다고 가정합니다.

 function init() {
        WL.init();

        WL.ui({
         
   name: "signin",
            element: "signinbutton",
            
scope: ["wl.signin", "wl.skydrive"],
        });
    }

다음은 로그인 처리를 위한 샘플 JavaScript 코드입니다.

 WL.Event.subscribe("auth.login", onLoginComplete);

    function onLoginComplete() {
        var session = WL.getSession();
        if (!session.error) {
            signedInUser();
        }
    }

사용자가 로그인 단추를 클릭하면 앱에서 데이터에 액세스하도록 허용할 것인지 동의를 구하는 메시지가 표시됩니다. 앞서 언급한 대로 사용자가 Windows Live ID로 PC에 로그인하면 단일 로그인이
적용되어 사용자가 다시 로그인할 필요가 없기 때문에 동의 화면이 곧바로 표시됩니다.

앱에서 SkyDrive 콘텐츠에 액세스

사용자가 앱에서 데이터에 액세스하도록 허용하면 OAuth 2.0 액세스 토큰이 앱에 반환되어 Live 클라우드를 대상으로 RESTful API 호출을 수행하는 데 이용할 수 있습니다. 다음은 JavaScript
에서 사진에 액세스하기 위한 코드의 예입니다.

 function downloadPicture(folderId) {

        var path = folderId + "/files"

        // Submit request
        WL.api({ path: path, method: "GET" }, onEnumerateFolderComplete)

    };

샘플 앱에 표시된 것처럼 위의 호출을 여러 번 수행하여 PowerPoint 슬라이드, 비디오, Excel 스프레드시트 또는 단순한 사진 등의 SkyDrive 콘텐츠를 앱에 포함하여 사용할 수 있습니다.

보시다시피 단일 로그인과 SkyDrive의 사용자 데이터를 앱에 통합하려면 Live SDK를 이용한 몇 줄의 코드가 필요합니다. 그 결과 앱이 사용자에게 알맞게 맞춤 설정되고 클라우드에 있는 사용자의
사진이나 문서를 최대한 활용할 수 있습니다. 이 블로그 게시물에 사용된 샘플 앱의 전체 소스 코드는 여기서 다운로드할 수 있습니다.

Live SDK를 사용하여 앱에서 단일 로그인을 구현하고 SkyDrive API를 활용하기 위한 자세한 내용을 알아보려면 빌드(BUILD) 컨퍼런스에서 Dare Obasanjo가 진행한 앱에서 라이브 서비스 지원 세션과 Steve Gordon이 진행한 SkyDrive API 개발자 완벽 가이드 세션을 시청하십시오. https://dev.live.com을 방문하여 Live SDK 개발자 프리
뷰를 다운로드하면 더 자세한 내용을 알아볼 수 있습니다. 멋진 앱을 코딩해 보세요!

Mike Torres

SkyDrive를 이용하여 'Windows 8' 앱을 클라우드로 확장

Live 클라우드에 앱 연결

앱에서 Live SDK 사용

메트로 스타일 앱에서 Windows Live ID 사용

앱에서 SkyDrive 콘텐츠에 액세스

Additional resources