Windows 스토어 앱에 웹 사이트 연결

Windows 스토어 앱을 사용하면 웹 사이트 환경을 다음 수준으로 향상시킬 수 있습니다. 더 몰입되고 멋지고 다른 앱과 Windows의 나머지 부분에 보다 연결된 환경을 빌드할 수 있습니다.

Windows 런타임을 사용하면 로컬 파일 및 폴더에 대한 매끄러운 액세스, Windows 8 공유 및 검색 참 메뉴와의 통합, 로컬 장치와의 상호 작용 등 브라우저에서만 가능한 작업 이상의 기능을 제공할 수 있습니다. 또한 Windows 스토어는 사용자가 원하는 앱을 검색하고 찾아서 구매하기 위한 뛰어난 사용자 환경을 제공합니다.

이 항목에서는 웹 사이트를 앱에 연결하는 Windows 8의 Windows 스토어 앱 기능과 해당 연결을 만드는 데 사용할 수 있는 메커니즘에 대해 자세히 설명합니다.

이 항목의 내용은 다음과 같습니다.

사용자 환경

이 섹션에 설명된 세 가지 단계는 사용자가 Windows 8의 Internet Explorer를 통해 Windows 스토어 앱을 찾아서 가져오고 사용하는 새로운 방법을 나타냅니다.

앱 찾아보기

웹 검색은 Windows 스토어 앱을 찾고 연결하는 자연스러운 방법입니다. Internet Explorer는 즐겨찾는 사이트용 앱이 제공되면 알려줍니다. 사용자는 주소 표시줄에서 시작하여 Windows 스토어로부터 앱을 쉽게 가져오고 관련 웹 사이트에서 설치된 앱으로 전환할 수 있습니다.

Windows 스토어 앱을 빌드한 후 앱에 연결하는 사이트에 간단한 태그를 추가하면 기존 웹 사이트 대상 그룹에 연결할 수 있습니다. 이 연결을 통해 사용자는 사이트를 방문할 때 Internet Explorer 주소 표시줄에서 직접 앱을 쉽게 검색할 수 있습니다.

앱 가져오기

사용자는 즐겨찾는 웹 사이트로 이동한 다음 사이트 아이콘을 통해 연결된 앱이 있는지 여부를 쉽게 검색할 수 있습니다. Internet Explorer에 사이트에 연결된 앱이 표시되면 사이트 아이콘이 단추로 바뀝니다. 사용자가 이 단추를 탭하기만 하면 Windows 스토어의 앱 설명으로 이동됩니다.

다음 그림은 사이트에 관련 앱이 있는 경우의 사이트 아이콘을 보여 줍니다.

사이트에 관련 앱이 있는 경우의 사이트 아이콘 모양을 보여 주는 예제

앱으로 전환

설치된 관련 Windows 스토어 앱이 있는 웹 사이트로 이동하면 사이트 아이콘을 사용하여 해당 앱으로 직접 전환할 수 있습니다. 예를 들어 친구가 메일이나 소셜 미디어를 통해 웹 콘텐츠 링크를 공유하고 이 링크가 새로운 Windows UI에서 Internet Explorer를 시작한다고 가정합니다. 연결된 사이트와 관련된 앱이 있는 경우 사이트 아이콘을 탭하고 앱으로 전환을 선택할 수 있습니다. 그러면 앱이 시작되고 앱 내에서 연결된 동일한 콘텐츠로 이동됩니다.

다음 그림은 사용자 시스템에 관련 앱이 설치되어 있는 경우의 사이트 아이콘을 보여 줍니다.

사용자 시스템에 관련 앱이 설치되어 있는 경우의 사이트 아이콘 모양을 보여 주는 예제

백그라운드 작업

이 섹션에서는 앱을 사이트에 연결하는 방법과 웹 사이트에서 해당 환경을 사용자 지정하는 방법을 보여 줍니다.

필수 태그

몇 줄의 간단한 태그를 사용하여 웹 사이트를 Windows 8 앱과 연결할 수 있습니다. 페이지의 head 요소에 다음 meta 태그를 포함하면 됩니다. Internet Explorer에서 사이트 아이콘 단추를 제공하려면 두 태그가 모두 필요합니다.


<meta name="msApplication-ID"content="microsoft.build.App"/>
<meta name="msApplication-PackageFamilyName"content="microsoft.build_8wekyb3d8bbwe"/>


이러한 태그가 있는 경우 Internet Explorer는 태그를 사용하여 사용자 컴퓨터에 앱이 설치되어 있는지 확인하고, 설치되어 있지 않으면 Windows 스토어의 앱 설명 페이지에 대한 직접 링크를 제공합니다.

참고  Windows 8의 데스크톱용 Internet Explorer에서는 이 연결 기능을 제공하지 않습니다.

이 필수 태그는 사이트, 스토어 및 앱 간의 상호 작용을 제어하는 데 사용할 수 있는 5개 meta 태그 중 2개입니다. 다음 표에서는 전체 태그 목록을 보여 줍니다.

이름콘텐츠
msApplication-ID필수. 앱 패키지의 이름이며, Microsoft Visual Studio의 응용 프로그램 매니페스트(패키징에서 UI를 통해 패키지 이름을 찾거나 XML에서 /Package/Identity/@name을 찾음)나 Windows 개발자 센터 웹 사이트에서 찾을 수 있습니다. 사이트를 앱에 연결하는 데 사용됩니다.
msApplication-PackageFamilyName필수. 앱의 패키지 패밀리 이름은 UI를 통해 Visual Studio의 응용 프로그램 매니페스트(패키징에서 패키지 패밀리 이름)에서 찾을 수 있습니다. 사이트를 스토어에 연결하는 데 사용됩니다.
msApplication-Arguments옵션. 앱에 전달되는 인수 문자열입니다. 기본적으로 Internet Explorer는 웹 페이지 URL을 전달하지만 이 태그를 사용하여 컨텍스트에 적합한 문자열을 전달할 수 있습니다.
msApplication-MinVersion옵션. 설치된 앱에 필요한 최소 버전을 적용합니다. 사용자가 웹 페이지에서 기한이 지난 앱으로 전환하면 먼저 앱을 업데이트하도록 Windows 스토어로 이동됩니다.
msApplication-OptOut

옵션. 페이지에서 이 기능의 전부 또는 일부를 옵트아웃(opt out)할 수 있게 합니다.

  • "install"을 지정하면 앱이 설치되어 있지 않은 사용자는 앱을 가져올 수 없습니다.
  • "switch"를 지정하면 사용자가 이미 설치된 앱으로 전환할 수 없습니다.
  • "both"를 지정하면 두 제안을 모두 사용할 수 없습니다.

 

msApplication-Arguments 처리

사이트에서 앱으로 전환이 가능한 한 매끄럽게 진행되도록 하면 고객을 위한 최상의 환경을 빌드할 수 있습니다. 예를 들어 사용자가 웹 사이트에서 항목 리뷰를 읽는 동안 앱으로 전환한다고 가정합니다. 사이트에서 앱으로 연속 환경을 제공하려면 앱이 자동으로 사용자를 동일한 항목 리뷰로 이동해야 합니다.

이렇게 하려면 meta 태그에서 name 특성을 "msApplication-Arguments"로 설정합니다. 이 meta 태그의 content 특성은 인수 문자열로 앱에 전달됩니다. 앱은 이 매개 변수를 구문 분석하고 사용자를 관련된 앱 내 콘텐츠로 이동합니다.

다음 코드 조각은 JavaScript를 사용하는 Windows 스토어 앱에서 이 매개 변수를 처리하는 방법을 보여 줍니다.


// Function available in default.js file in Visual Studio templates provided 
WinJS.Application.onmainwindowactivated = function (e) {
  if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
    // Insert this code to handle incoming argument when Internet Explorer launches the app
    if (e.detail.arguments) {
      // Parse the value of the msApplication-Arguments string
      // Direct incoming user to relevant in-app content
    }
  }
}


다음 조각은 C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱에서 사용할 수 있습니다.


// Function available in App.xaml.js file in Visual C# templates provided in Visual Studio
partial class App
{
  protected override void OnLaunched(LaunchActivatedEventArgs args)
  {    
    // Insert this to handle incoming arguments, when Internet Explorer launches the app
    if (!String.IsNullOrEmpty(args.Arguments)) 
    {
      // Parse the value of the msApplication-Arguments string
      // Direct incoming user to relevant in-app content
    }
  }
}


결론

Internet Explorer에서는 사용자가 관련 Windows 스토어 앱을 통해 웹을 검색하고 경험할 수 있습니다. 웹 개발자는 Internet Explorer를 사용하여 기존 사이트 대상 그룹을 앱에 연결함으로써 Windows 8의 몰입형 환경으로 사용자의 관심을 끌 수 있습니다.

지침 동영상을 비롯한 자세한 내용은 IEBlog에서 Windows 8 앱에 웹 사이트 연결(영문) 게시물을 참조하세요.

관련 항목

앱에 대한 링크 만들기
Windows 8 통합
개발자용 Internet Explorer 10 가이드

 

 

표시:
© 2014 Microsoft