앱에서 Windows 8 계약 활성화하기

Article
06/14/2012

그동안 우리는 Windows 8 PC의 앱이 다른 앱 및 웹 서비스와 통신하는 방법을 수차례 살펴보았습니다. 우리는 Windows 8을 처음 개발할 때부터 앱을 마치 클립보드처럼 사용자가 공유하려는 데이터의 소스 또는 대상으로 사용할 수 있으면서도 풍부한 상호 작용 모델과 명확한 의미 체계를 제공하도록 개발했습니다. 앱에 대한 계약이 이루어지면 Windows 8은 해당 앱을 시스템의 다른 앱 및 시스템 자체와 연결합니다. Metro 스타일 Internet Explorer의 웹 페이지에서 공유 참을 사용해 보면 이를 쉽게 확인할 수 있습니다. 사용자는 메일 앱을 통해 피플 앱에 계약 정보가 저장된 사람과 링크를 공유할 수 있으며, 검색 계약을 구현하는 앱을 검색할 수 있습니다. 또한, 파일 열기 및 저장 선택기 계약을 구현하는 모든 위치에서/위치로 파일을 열고 저장할 수 있습니다. 이렇게 혁신적인 접근 방식을 통해 Windows 8은 특정 앱에 대한 단일 수준 지원을 "하드코딩"하는 대신 모든 앱/서비스 쌍을 작업할 수 있습니다. 그리고 이 모든 것은 원하는 경우 Facebook에서 Twitter, LinkedIn 등의 다른 서비스에 연결할 수 있는 Microsoft 계정을 통해 지원됩니다. 우리는 Windows 8과의 공유, 연결 및 통합을 중점적으로 다루는 새로운 Microsoft 앱에 대한 시리즈를 작성할 것입니다. 이 글은 Windows 8 앱 개발자 블로그의 개발자 중심 글을 다시 게시한 것이며, 사용자 경험 팀의 프로그램 관리자인 Derek Gebhard가 작성했습니다. - Steven

Metro 스타일의 앱을 처음 개발하는 분들은 Windows 8에 새로 도입된 강력한 기능인 계약이라는 개념과 곧 마주하게 됩니다. Metro 스타일 앱은 계약을 통해서 다른 앱 및 Windows와의 상호 작용에 대한 지원을 시작하게 됩니다. 검색, 공유 등의 계약에 대해 이미 들어 보신 분들도 있을 것입니다. 계약을 통해서 앱이 시스템과 연동하거나 다른 앱과의 연동(사용자가 계약이 이루어진 앱을 추가로 설치할 경우)이 가능하게 되므로 성능이 향상되는 효과를 볼 수 있습니다. 이 글은 앱에 계약 기능을 추가할 때 고려해야 할 주요 개념 중 하나인 활성화에 대해 설명합니다.

Windows 활성화 플랫폼은 Metro 스타일 앱을 실행하는 데 사용됩니다. 또한 사용자가 앱을 실행한 이유를 앱에 전달하는 데에도 사용됩니다. 앱을 실행하는 이유는 다양합니다. 어떤 사용자는 시작 화면에서 앱의 타일을 사용하여 앱을 실행하고, 어떤 사용자는 쿼리에 대한 검색 결과를 표시하는 등의 특정 작업을 위해 앱을 실행합니다. Windows는 앱이 실행된 이유와 해당 작업을 완료하기 위해 필요한 추가 정보(가능한 경우)를 앱에 제공합니다. Windows 8 활성화 플랫폼이 등장하기 전에는 개발자가 명령줄 매개 변수를 통해 이 정보를 앱에 직접 전달해야 했습니다. 또한 우리는 새 모델을 통해 StorageFile, ShareOperation 등의 활성 개체를 전달하여 앱에 컨텍스트를 제공합니다. 이로 인해 계약 기능이 훨씬 더 강력해졌습니다. 그럼 이제 계약 기능을 지원하기 위해 여러분이 알아야 할 내용을 자세히 살펴보겠습니다.

계약: 수행할 작업을 위해 컨텍스트가 포함된 Metro 스타일 앱 실행

Windows 8 Consumer Preview 데모에서 보시는 것처럼 Windows 8 계약 기능은 여러분의 앱을 다른 Metro 스타일 앱 및 시스템 UI에 바인딩하는 접착제와 같습니다. 예를 들어 파일 선택기(File Open Picker) 계약이 이루어지면 사용자는 한 앱에서 다른 앱으로 파일을 가져올 수 있습니다. 검색 계약이 이루어지면 사용자는 시스템 어디서나 앱을 검색할 수 있고 여러 앱 간에 신속하게 쿼리를 전송할 수 있습니다. 이러한 계약을 비롯한 모든 계약 시나리오에서, 사용자가 특정 작업을 신속하고 효율적으로 완료할 수 있는 앱 UI의 한 지점에서 Windows가 바로 실행될 수 있어야 합니다. 이 위치가 바로 우리의 활성화 플랫폼과 API가 실행되는 위치입니다.

사용자는 다음 두 가지 방법 중 하나로 앱의 상호 작용을 시작할 수 있습니다.

1. 몰입도가 뛰어난 앱 보기가 포그라운드에 있는 작업을 통해 상호 작용을 시작할 수 있습니다. 이것을 메인 화면 보기 활성화라고도 하며, 검색 계약이 대표적인 예입니다.
  
  메인 화면 보기 활성화의 예
2. 인라인으로 호스팅되는 작업을 통해 현재 실행 중인 앱의 컨텍스트를 벗어나지 않고 상호 작용을 시작할 수 있습니다. 이것을 호스트 화면 보기 활성화라고도 합니다. 다음은 그 예로서, 하나는 파일 선택기에 참여하는 앱이고 다른 하나는 공유 대상으로 사용되는 앱입니다.

선택기에서 앱을 선택하면 사용자가 파일을 선택할 수 있는 앱 UI가 실행됩니다.
선택기의 호스트 화면 보기 활성화의 예

공유 대상의 호스트 화면 보기 활성화의 예

두 가지 방법의 차이점:

메인 화면 보기 활성화	호스트 화면 보기 활성화
몰입도가 뛰어나며 화면에서 메인 앱으로 실행	시스템 크롬 내에서 UI 렌더링
다양한 작업에 사용 가능	짧고 통제된 작업에 사용되며 코드는 오직 이 작업에만 집중됨
전환 목록에 표시됨	전환 목록에 표시되지 않음
닫기 동작을 통해 종료 가능	같은 앱의 기본 창 보기를 변경하지 않음

지금부터 이러한 활성화 모델을 살펴보고 Metro 스타일 앱 개발에 도움이 될 만한 일반적인 시나리오 몇 가지에 적용해 보겠습니다.

시나리오 1: 앱에 검색 활성화 통합

Windows 8에서 검색 계약을 통해 검색을 추가하면 사용자는 아무 때나 시스템의 모든 위치에서 개발자의 앱 콘텐츠를 검색할 수 있습니다. 개발자의 앱이 화면의 메인 앱인 경우 사용자는 검색 참을 사용하여 즉시 앱 콘텐츠를 검색할 수 있습니다. 또는 검색 참을 선택한 다음 검색 창의 앱 목록에서 개발자의 앱을 선택하여 앱 콘텐츠를 검색할 수도 있습니다.

검색 활성화를 지원한다는 것은 사용자가 아무 때나 개발자의 앱을 실행하여 특정 쿼리에 대한 검색 결과를 볼 수 있다는 의미입니다. 시작 화면에서 실행하는 것과 마찬가지로 검색 창에서 실행하면 메인 화면 보기 활성화로 연결됩니다. 따라서 여러 계약을 지원할 경우 개발자의 앱은 다양한 시나리오에 대해 활성화될 수 있습니다. 또한 이미 앱이 실행 중인 경우 사용자가 검색 결과 등을 표시하는 등의 특정한 시나리오를 처리하기 위해 메인 화면 보기를 다른 용도로 설정할 수도 있기 때문에 개발자의 앱이 최종적으로 이 활성화를 받을 수도 있습니다. 이를 적용하려면 다음과 같이 할 것을 권장합니다.

1. - 메인 화면 보기 계약이 활성화된 앱에는 중요하지 않은 코드를 나중에 로드합니다.
  - 특정 계약에 대해 실행되는 논리에서 모든 계약에 사용되는 일반 초기화 논리를 분리합니다.
  - 시작할 때 단 한 번만 실행되어야 하는 코드가 여러 차례 실행될 수 있는 방식으로 활성화 처리기에 추가되지 않도록 합니다.
  - 사용자에게 앱이 항상 실행 중이고 연결 상태인 것으로 표시될 수 있도록, 종료된 상태에서 시작할 경우 이전 상태 및 설정을 다시 로드합니다.

스토어 및 사진 앱을 살펴보시기 바랍니다. 이 두 앱은 위의 권장 사항에 따른 검색 활성화를 지원하여 멋진 예를 보여줍니다.

"캘린더"에 대한 검색 결과가 표시된 스토어 앱. 검색 창이 열려 있고 사용자가 새로운 검색 쿼리를 입력하는 모습

스토어 앱의 검색 화면

사진 앱의 검색 화면

JavaScript 및 XAML 앱의 검색 기능이 활성화되도록 지원하는 방법을 살펴보겠습니다.

JavaScript 앱

JavaScript Metro 스타일 앱의 경우 WinJS.Application.onactivated 이벤트를 통해 활성화가 노출됩니다. 앱이 아직 실행되지 않았거나 일시 중지되지 않은 경우 이 이벤트는 DOMContentLoaded가 완료된 후에 발생합니다. 또는 Windows가 앱을 활성화해야 하는 상황이 되면 즉시 이벤트가 발생합니다. JavaScript 앱을 위한 Visual Studio 도구는 default.js에 이 이벤트 등록을 설정하고, 일반 실행 활성화가 발생할 경우, 즉 사용자가 시작 화면에서 앱을 실행할 때 실행될 코드를 추가할 수 있는 영역을 제공합니다.

앱의 검색 활성화 지원을 확장하는 방법

1. 1. Visual Studio Manifest Designer를 사용하여 매니페스트에 검색 선언을 추가합니다.
  2. 이유에 관계없이 앱이 시작될 때마다 실행되어야 하는 JavaScript의 전역 범위 일반 초기화 코드를 배치합니다. 이 코드가 DOM에 액세스해야 할 경우 해당 코드를 DOMContentLoaded 이벤트 처리기에 추가합니다.
  3. 검색에 대해 활성화되는 핸들에 등록합니다.
  4. 앱이 검색에 대해 활성화되면 검색 결과 페이지로 이동하여 활성화 이벤트 인수에서 얻은 queryText를 전달합니다.

이렇게 수동으로 처리하는 방식보다 간단한 방법이 있습니다. 다행히도 Visual Studio 도구를 사용하면 이 작업의 대부분을 완료할 수 있습니다. 프로젝트를 마우스 오른쪽 단추로 클릭한 후 추가 > 새 항목을 선택하고 대화 상자에서 검색 계약을 선택합니다. 여기에 대부분의 코드가 있으며, 검색 UX 지침을 준수하는 방법으로 결과를 표시하는 검색 UI가 자동으로 생성됩니다. 하지만 이 도구와 함께 WinJS.Navigation 프레임워크를 사용해야 합니다.

다음은 제 사진 앱의 검색 활성화를 지원하는 default.js 파일에 있는 코드 조각입니다.

 // Register activated event handler
WinJS.Application.addEventListener("activated", function (eventObject) {
    ...
    if (eventObject.detail.kind === appModel.Activation.ActivationKind.launch) {
        ...
    } else if (eventObject.detail.kind === appModel.Activation.ActivationKind.search) {
        uri = searchPageURI;
        pageParameters = { queryText: eventObject.detail.queryText };
    }
    // Indicate to the system that the splash screen must not be torn down
    // until after processAll and navigate complete asynchronously.
    if (uri) {
        eventObject.setPromise(ui.processAll().then(function () {
            return nav.navigate(uri, pageParameters);
        }));
    }
});

XAML 앱

XAML Metro 스타일 앱의 경우 앱이 활성화를 지원하기 위해 필요한 수많은 작업이 Windows.UI.Xaml.Application 클래스에서 처리됩니다. 이 클래스는 검색과 같은 일반 계약을 지원할 때 재정의할 수 있는 강력하게 형식화된 메서드를 노출합니다. 강력하게 형식화된 메서드가 필요 없는 계약 활성화의 경우 OnActivated 메서드를 재정의하고 활성화 종류를 검사하여 앱이 활성화될 계약을 결정할 수 있습니다.

Visual Studio의 새 XAML 앱 프로젝트는 Windows.UI.Xaml.Application 클래스를 사용하여 일반 실행에 대해 앱을 활성화할 수 있는 코드가 생성됩니다. 이 활성화를 처리하는 코드는 앱의 클래스 표현에 있으며 App.xaml.cs/cpp/vb 파일에서 찾을 수 있습니다.

앱의 검색 활성화 지원을 확장하는 방법

1. 1. Visual Studio Manifest Designer를 사용하여 매니페스트에 검색 선언을 추가합니다.
  2. 이유에 관계없이 앱이 시작될 때마다 실행되어야 하는 App.xaml.cs/cpp/vb App constructor 일반 초기화 코드를 배치합니다.
  3. App.xaml.cs/cpp/vb에서 강력하게 형식화된 OnSearchActivated 메서드를 재정의하여 검색 활성화를 처리합니다.
  4. 검색 UI를 로드하고 SearchActivatedEventArgs에 쿼리 검색 결과를 표시합니다.

JavaScript 앱과 마찬가지로 이렇게 수동으로 처리하는 방식보다 간단한 방법이 있습니다. Visual Studio 도구를 사용하여 이 작업의 대부분을 완료할 수 있습니다. 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목을 선택한 다음 대화 상자에서 검색 계약을 선택합니다. 여기에 대부분의 코드가 있으며, 검색 UX 지침을 준수하는 방법으로 결과를 표시하는 검색 UI가 자동으로 생성됩니다.

다음은 제 사진 앱의 검색 활성화를 지원하는 C# 코드 조각입니다.

OnSearchActivated 메서드를 재정의하여 검색 활성화를 지원해야 합니다.

 protected override void OnSearchActivated(SearchActivatedEventArgs args)
{
    // Load Search UI
    PhotoApp.SearchResultsPage.Activate(args.QueryText);
}

SearchResultsPage의 Activate 메서드는 사용자의 검색 쿼리에 대한 검색 결과를 표시하는 UI를 설정합니다.

 // SearchResultsPage.xaml.cs code snippet 
public static void Activate(String queryText)
{
    // If the window isn't already using Frame navigation, insert our own frame
    var previousContent = Window.Current.Content;
    var frame = previousContent as Frame;
    if (frame == null)
    {
        frame = new Frame();
        Window.Current.Content = frame;
    }
    // Use navigation to display the results, packing both the query text and the previous
    // Window content into a single parameter object
    frame.Navigate(typeof(SearchResultsPage1),
        new Tuple<String, UIElement>(queryText, previousContent));
    // The window must be activated in 15 seconds
    Window.Current.Activate();
}

여기서 보여드린 논리 및 원칙이 검색 활성화 지원 추가에 그대로 적용되지는 않습니다. 프로토콜, 파일 연결 및 장치 자동 실행 또한 메인 화면 보기 활성화 계약이므로 같은 기술을 사용하여 지원을 추가하면 됩니다.

시나리오 2: 앱에 파일 선택기 활성화 통합

Metro 스타일 앱은 파일 선택기를 호출하여 사용자가 시스템을 탐색하여 작업할 파일 또는 폴더를 선택하거나 사용자가 새로운 이름, 파일 형식 또는 위치("Save As")를 사용하여 파일을 저장할 수 있도록 합니다. 또한 앱은 파일 선택기를 인터페이스로 사용하여 다른 앱에 파일, 저장 위치 또는 파일 업데이트까지 제공할 수 있습니다. 파일 선택기 계약을 추가하면 사용자는 다른 앱 내에서 여러분의 앱에 있는 파일을 직접 선택할 수 있습니다. 사용자는 여러분의 앱에 저장되어 제공되는 파일을 자유롭게 선택할 수 있습니다.

파일 선택기 계약에 대해 앱을 실행하면 호스트 화면 보기 활성화로 연결됩니다. 앱의 UI는 파일 선택기 내부에 호스팅되며, 이 활성화에 대해 실행되는 코드는 사용자가 파일을 선택하는 작업에만 집중되어야 합니다. 뛰어난 사용자 경험을 제공할 수 있도록 앱 속도가 최대한 빨라야 합니다. 그러므로 호스트 화면 보기 활성화 작업에 반드시 필요하지 않은 코드 또는 라이브러리를 로드하면 안 됩니다.

SkyDrive 앱을 살펴보시기를 권장합니다. 이 앱은 파일 선택기 활성화를 지원하고 사용자의 파일 선택 작업에만 코드가 집중된 매우 훌륭한 예입니다.

SkyDrive 앱의 파일 선택기 지원

JavaScript 및 XAML 앱에 파일 선택기 활성화를 적절하게 지원하는 방법을 살펴보겠습니다.

JavaScript 앱

JavaScript Metro 스타일 앱에서 호스트 화면 보기 활성화는 다음과 같은 핵심 차이점을 제외하고 메인 화면 보기 활성화와 같은 방식으로 작동합니다. 호스트 화면 보기 활성화는 새 창 및 스크립트 컨텍스트에서 발생합니다. 즉, 이 활성화를 처리하는 코드는 메인 앱의 라이브러리, 전역 변수 또는 DOM에 액세스할 수 없습니다.

앱을 확장하여 파일 선택기 활성화를 지원하는 방법

1. 1. 오직 파일 선택기 계약만 처리하도록 설계된 새 HTML 페이지를 만듭니다.
  2. Visual Studio Manifest Designer에서 파일 선택기 선언을 추가하고 새로 만든 HTML 페이지를 시작 페이지로 지정합니다.
  3. 성능을 향상시킬 수 있도록 이 페이지에서 파일 선택기 계약을 지원하기 위해 반드시 필요한 JavaScript 및 기타 리소스만 로드합니다.
  4. 파일 선택기 계약에 대한 활성화만 처리하도록 활성화 이벤트 처리기를 구성합니다. 처리기는 파일 선택 작업의 수명 주기 동안 단 한 번만 호출됩니다.
  5. 활성화 이벤트 인수를 사용하여 파일 선택기와 상호 작용합니다.

Visual Studio 도구를 사용하여 이 작업을 처리하면 시간을 절약할 수 있습니다. 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목을 선택한 다음 대화 상자에서 파일 선택기 계약을 선택합니다. 그 다음에 보이는 내용은 사용자를 대신하여 프로젝트에서 자동으로 생성됩니다.

다음은 제 사진 앱의 파일 선택기 활성화를 처리하는 fileOpenPicker.js 파일의 코드 조각입니다.

 // Register activated event handler for handling File Open Picker activation
WinJS.Application.addEventListener("activated", function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.fileOpenPicker) {
        pickerUI = eventObject.detail.fileOpenPickerUI;
        pickerUI.onfileremoved = fileRemovedFromPickerUI;
        ...
    }
});

WinJS.Application.start();

XAML 앱

XAML Metro 스타일 앱의 경우 개발자는 메인 화면 보기 활성화와 비슷한 방법으로 앱의 호스트 화면 보기 활성화를 지원할 수 있습니다. 가장 큰 차이점은 앱에서 새 스레드 및 새 창을 만들어서 활성화를 처리해야 한다는 것입니다. Visual Studio 템플릿 코드는 사용자를 대신하여 호스트 화면 보기 활성화에 필요한 새 스레드 및 새 창을 만드는 모든 작업을 처리합니다.

파일 선택기 활성화를 처리하려면 XAML 앱이 다음 작업을 수행해야 합니다.

1. 1. Visual Studio Manifest Designer를 사용하여 매니페스트에 파일 선택기 선언을 추가합니다.
  2. App.Xaml.cs/cpp/vb에서 OnFileOpenPickerActivated 메서드를 재정의하고 이 계약을 처리할 페이지를 로드합니다.
  3. 파일 선택기와 상호 작용할 수 있도록 이 계약을 처리하는 페이지에 FileOpenPickerActivatedEventArgs를 전달합니다.

다음은 제 사진 앱의 파일 선택기 활성화를 처리하는 C# 코드 조각입니다.

 // App.xaml.cs code snippet
protected override void OnFileOpenPickerActivated(FileOpenPickerActivatedEventArgs args)
{
    var fileOpenPickerPage = new PhotoApp.FileOpenPickerPage();
    fileOpenPickerPage.Activate(args);
}

// FileOpenPickerPage.xaml.cs code snippet 
public void Activate(FileOpenPickerActivatedEventArgs args)
{
    this._fileOpenPickerUI = args.FileOpenPickerUI;
    this._fileOpenPickerUI.FileRemoved += FileOpenPickerUI_FileRemoved;
            
    // Show the user’s photos in the Picker UI
    ...

    Window.Current.Content = this;
    // The window must be activated in 15 seconds
    Window.Current.Activate();
}

여기서 보여드린 논리 및 원칙이 파일 선택기 활성화 지원 추가에 그대로 적용되지는 않습니다. 공유 대상, 파일 저장 선택기, 계약 선택기, 카메라 설정 및 인쇄 작업 설정 또한 호스트 화면 보기 활성화 계약이므로 같은 기술을 사용하여 지원을 추가하면 됩니다.

결론

검색, 파일 선택기 및 기타 Windows 8 계약을 통해 사용자가 시스템의 다른 부분에서 또는 심지어 다른 앱에서 특정 작업을 완료할 수 있는 시나리오를 보여 드렸습니다. Windows와 개발자 모두 사용자가 앱을 사용해 무엇을 하고 어떤 작업을 수행하려고 하는지 알고 있기 때문에 사용자는 여러분의 앱에서 빠르고 자연스러운 경험을 기대할 것입니다. 이러한 계약을 통해 훌륭한 경험을 제공하려면 앱 활성화를 올바르게 구현하는 것이 핵심입니다. 앱의 핵심 부분을 작업할 때 계약을 사용하지 않더라도 이러한 사항을 기억해 두면 일반 실행 활성화를 설정할 때 도움이 됩니다. 이 방법을 사용하여 나중에라도 코드를 리팩터링하지 않고 앱을 간단하게 확장하여 계약을 지원할 수 있습니다.

기억할 사항

1. 1. 일반 앱 초기화 논리는 앱의 활성화 방식에 관계없이 실행될 위치에 배치합니다.
  2. 앱이 이미 실행 중이거나 일시 중지된 경우에도 활성화 처리기를 실행할 수 있습니다. 이로 인해 앱에서 의도치 않은 결과가 발생하는 일은 없습니다.
  3. Visual Studio 도구를 사용하면 검색, 대상 공유 및 파일 선택기 계약을 지원하기 위한 여러 작업을 처리할 수 있습니다. 개발자는 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 추가 > 새 항목을 선택하기만 하면 됩니다.
  4. 호스트 화면 보기 활성화를 받을 때 활성화와 연결된 작업에 반드시 필요한 코드만 로드합니다.

Windows 8의 활성화 및 계약에 대한 자세한 내용은 다음 링크를 참조하거나 포럼에 질문을 남겨 주시기 바랍니다.

문서

샘플

감사합니다.

Windows 사용자 경험 팀 프로그램 관리자
Derek Gebhard

도움을 주신 분들: Jake Sabulsky, Marco Matos, Daniel Oliver

앱에서 Windows 8 계약 활성화하기

계약: 수행할 작업을 위해 컨텍스트가 포함된 Metro 스타일 앱 실행

시나리오 1: 앱에 검색 활성화 통합

JavaScript 앱

XAML 앱

시나리오 2: 앱에 파일 선택기 활성화 통합

JavaScript 앱

XAML 앱

결론

기억할 사항

문서

샘플

Additional resources