빠른 시작: 알림 메시지 보내기(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

참고 JavaScript를 사용하지 않는 경우 빠른 시작: 알림 메시지 보내기(XAML)를 참조하세요.

알림 메시지란 사용자가 다른 앱, 시작 화면 또는 데스크톱(Windows의 경우)에 있을 때 앱과 통신하도록 허용하는, 화면에 표시되는 팝업 UI입니다. 이 빠른 시작에서는 알림 콘텐츠를 정의하고 표시하는 과정을 안내합니다. 이러한 작업은 가장 단순하게 구현할 수 있는 알림인 로컬 알림을 사용하여 설명됩니다. 다음 단계에 대해 살펴보겠습니다.

알림에 사용할 템플릿 지정
템플릿의 빈 XML 콘텐츠 검색
알림에 텍스트 추가
알림에 이미지 추가
알림에 대한 기간 설정
알림과 함께 제공할 오디오 지정
알림에 의해 앱이 활성화될 때 사용할 상황에 맞는 정보 제공
알림을 로컬 알림으로 보내기

참고 이 빠른 시작에서는 XML DOM(문서 개체 모델)에서 직접 알림 콘텐츠를 조작합니다. NotificationsExtensions 라이브러리에서 선택적 접근 방법을 사용할 수 있습니다. 여기에서는 Intellisense를 비롯한 개체 속성으로 XML 콘텐츠를 나타냅니다. 자세한 내용은 빠른 시작: 코드에 NotificationsExtensions 라이브러리 사용을 참조하세요. 이 빠른 시작에서 NotificationsExtenstions를 사용하여 표현된 코드를 보려면 알림 메시지 샘플을 참조하세요.

참고 Microsoft Visual Studio를 통해 알림 메시지 코드 기능을 테스트하는 경우 Windows x86, x64 또는 Windows 런타임 컴퓨터에서 로컬 컴퓨터 또는 원격 컴퓨터 디버그 설정을 사용해야 합니다. Visual Studio 시뮬레이터 디버그 기능 옵션은 사용할 수 없습니다. 코드가 컴파일되고 시뮬레이터에서 실행되지만 알림은 표시되지 않습니다.

사전 요구 사항

이 항목을 이해하기 위해 필요한 항목은 다음과 같습니다.

알림 메시지 용어와 개념에 대한 기본 지식 자세한 내용은 알림 메시지 개요를 참조하세요.
알림 메시지를 보내거나 받으려면 앱 매니페스트에서 Toast Capable(알림 가능) 옵션이 "true"(Visual Studio 매니페스트 편집기에서는 "예")로 설정되어 있어야 합니다. 자세한 내용은 알림 메시지를 옵트인(opt in)하는 방법을 참조하세요.
DOM(문서 개체 모델) API에서 XML 사용 및 XML 조작에 대한 경험
알림 XML 스키마를 사용한 경험 자세한 내용은 알림 스키마를 참조하세요.
Windows 런타임 API를 사용하여 JavaScript로 기본 Windows 스토어 앱을 만들 수 있는 능력 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요.

지침

1. 옵션: 네임스페이스 변수 선언

이 단계에서는 전체 네임스페이스 이름을 대신하여 사용할 짧은 이름을 제공합니다. 이 이름은 C#의 "using" 문이나, Visual Basic의 "Imports" 문과 동일하여 코드를 간소화할 수 있게 해줍니다.

참고 이 빠른 시작에 있는 코드의 나머지 부분에서는 이 변수가 선언된 것으로 가정합니다.


var notifications = Windows.UI.Notifications;

2. 알림에 사용할 템플릿 선택 및 XML 콘텐츠 검색

시스템이 제공한 템플릿 카탈로그에서 콘텐츠의 요구에 맞는 템플릿을 선택합니다. 전체 템플릿 목록을 보려면 ToastTemplateType 열거를 참조하세요. 보낼 알림마다 다른 템플릿을 사용할 수 있습니다.

참고 Windows Phone 8.1에서는 toastText02 템플릿의 변형만 지원됩니다. 템플릿은 문자열 두 개를 받아들이고 첫 문자열은 굵은 텍스트로 렌더링되지만, 두 문자열이 모두 같은 줄에 있으므로 연결을 피하려면 짧은 문자열을 하나만 사용하거나 매우 짧은 문자열 두 개를 사용해야 합니다.

Windows에서 사용할 경우 이 예에서는 이미지 하나와 텍스트 문자열 하나가 필요한 toastImageAndText01 템플릿을 사용합니다. 예를 들어 다음과 같습니다.

ToastImageAndText01


var template = notifications.ToastTemplateType.toastImageAndText01;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

getTemplateContent 메서드는 XmlDocument를 반환합니다. 위 코드는 다음 XML 형식을 검색하며, 표준 DOM(문서 개체 모델) 함수를 통해 이후 단계에서 자세한 내용을 입력합니다.


<toast>
    <visual>
        <binding template="ToastImageAndText01">
            <image id="1" src=""/>
            <text id="1"></text>
        </binding>
    </visual>
</toast>

3. 알림에 사용할 텍스트 콘텐츠 제공

이 예제는 먼저 태그 이름이 "text"인 템플릿에서 모든 요소를 검색합니다. toastImageAndText01 템플릿에는 단일 텍스트 문자열만 포함되어 있어 코드가 이를 할당합니다. 이 문자열은 최대 세 줄로 줄바꿈될 수 있으므로 문자열 길이는 잘림이 방지되도록 그에 맞게 설정해야 합니다.

   
var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("Hello World!"));

4. 알림에 사용할 이미지 제공

이 코드는 먼저 태그 이름이 "image"인 템플릿에서 모든 요소를 검색합니다. 알림 템플릿(예제: toastImageAndText01)에는 이미지가 하나만 포함됩니다. 일부 알림 템플릿에는 이미지가 없고, 텍스트만 있습니다.


var toastImageElements = toastXml.getElementsByTagName("image");

이미지는 앱의 패키지, 앱의 로컬 저장소 또는 웹에서 가져와 사용할 수 있습니다. 이 단계에서 버전은 이미지 원본별로 표시됩니다. 이미지는 크기가 200KB 미만이고 1024 x 1024 픽셀보다 작아야 합니다. 자세한 내용은 타일 및 알림 이미지 크기를 참조하세요.

다음 코드에서는 앱의 패키지에서 가져온 로컬 이미지를 사용합니다. 이 형식의 이미지는 Visual Studio 솔루션 파일에 포함되며 앱의 일부로 패키징됩니다. 이러한 이미지는 "ms-appx:///" 접두사를 사용하여 액세스합니다. 화면 읽기 프로그램 등의 접근성 용도로 선택적 대체 텍스트도 할당하는 것이 가장 좋습니다.

중요 여기서 사용되는 이미지 "redWide.png"는 하나의 예일 뿐이며 Microsoft Visual Studio 프로젝트에 포함되지 않습니다. "redWide.png"를 이 알림을 보내기 전에 프로젝트에 추가한 고유한 실제 이미지의 이름으로 바꿔야 합니다.


toastImageElements[0].setAttribute("src", "ms-appx:///images/redWide.png");
toastImageElements[0].setAttribute("alt", "red graphic");

다음 코드에서는 앱의 로컬 저장소에서 가져온 로컬 이미지를 사용합니다. 이 이미지 형식은 앱에서 로컬 저장소에 저장됩니다. 이 위치는 Windows.Storage.ApplicationData.current.localFolder에서 반환된 위치입니다. 이러한 이미지는 "ms-appdata:///local/" 접두사를 사용하여 액세스합니다. 또한 화면 읽기 프로그램 등의 접근성 용도로 선택적 대체 텍스트도 할당합니다.


toastImageElements[0].setAttribute("src", "ms-appdata:///local/redWide.png");
toastImageElements[0].setAttribute("alt", "red graphic");

다음 코드에서는 웹 이미지를 사용합니다. 이러한 이미지는 이미지 경로를 지정하는 데 필요한 "http://" 프로토콜을 사용하여 액세스합니다. https:// 프로토콜을 사용할 수도 있습니다.


toastImageElements[0].setAttribute("src", "https://www.microsoft.com/redWide.png");
toastImageElements[0].setAttribute("alt", "red graphic");

선택적 baseUri 특성을 사용하여 "https://www.microsoft.com/"과 같이 루트 경로를 지정할 수 있습니다. 즉 이미지의 src 특성에 지정된 상대 URI(Uniform Resource Identifiers)와 함께 결합됩니다. 이 특성은 전체 알림에 적용되는 visual 요소 또는 해당 바인딩에 적용되는 binding 요소에 설정할 수 있습니다. baseUri가 둘 모두에 대해 설정되면 binding 값은 visual 값을 무시합니다.

baseUri가 "https://www.microsoft.com/"으로 설정된 경우 이 샘플 코드에서

toastImageElements[0].setAttribute("src", "https://www.microsoft.com/redWide.png");

줄을 다음과 같이 줄일 수 있습니다.

toastImageElements[0].setAttribute("src", "redWide.png");

5. 옵션: 알림 기간 지정

선택적으로 알림의 표시 기간을 설정할 수 있습니다. "short"(기본값)와 "long"이라는 두 개의 값이 있습니다. 알림이 수신 전화나 약속 미리 알림과 같은 시나리오에 포함된 경우에만 "long"을 사용합니다. 자세한 내용은 알림 메시지 개요를 참조하세요.

참고 Windows Phone 8.1에서는 서로 다른 기간이 지원되지 않습니다. 모든 알림의 기간이 같습니다. 휴대폰 알림 메시지에 이 특성이 포함된 경우에는 무시됩니다.

참고 기본 기간은 "short"이므로 기간을 "long"으로 설정하려는 경우에만 이 특성을 추가합니다.


var toastNode = toastXml.selectSingleNode("/toast");
toastNode.setAttribute("duration", "long");

6. 옵션: 알림 오디오 지정

자세한 내용은 알림 오디오 옵션 카탈로그를 참조하세요.

기본적으로 Windows는 알림이 표시될 때 짧은 사운드를 재생합니다. 사용자는 선택적으로 시스템에서 제공하는 사운드 집합 중에서 다른 사운드를 지정하거나 사운드를 지정하지 않을 수 있습니다. Windows Phone 8.1에서는 사용자 지정 사운드를 지정할 수 있습니다. 자세한 내용은 알림 오디오 옵션 카탈로그를 참조하세요.

getTemplateContent를 통해 검색되는 템플릿에는 audio 요소가 포함되지 않으므로 요소를 정의하고 XML 페이로드에 추가해야 합니다. 사운드 파일은 "ms-winsoundevent:" 접두사를 사용해서 지정되며, Windows Phone 8.1에서는 "ms-appx:///" 또는 "ms-appdata:///" 접두사를 사용하는 경로를 사용해서 지정됩니다. 이 예제에서는 audio 요소를 만들고, 부모가 될 toast 요소를 선택합니다.


var toastNode = toastXml.selectSingleNode("/toast");                        
var audio = toastXml.createElement("audio");

이 예제에서는 기본값이 아닌 사운드를 지정합니다.

audio.setAttribute("src", "ms-winsoundevent:Notification.IM");

이 예제에서는 사운드가 재생되지 않도록 지정합니다.

audio.setAttribute("silent", "true");

장기 알림 메시지의 경우 사운드를 한 번만 재생하기보다는 반복할 수 있습니다. 오디오 반복은 장기 알림에 대해서만 유효합니다. 반복해서 사용할 특정 사운드는 시스템 지정 사운드 집합에 포함되어 있습니다. 이 예제에서는 반복 사운드를 지정합니다.

참고 Windows Phone 8.1에서는 장기 알림을 지원하지 않으므로 반복 오디오가 지원되지 않습니다.


toastNode.setAttribute("duration", "long");

var audio = toastXml.createElement("audio");
audio.setAttribute("src", "ms-winsoundevent:Notification.Looping.Alarm");
audio.setAttribute("loop", "true");

오디오 요소를 정의했으면, 다음과 같이 알림의 XML 페이로드에 toast 요소의 자식 요소로서 추가해야 합니다.

toastNode.appendChild(audio);

7. 앱 시작 매개 변수 지정

사용자가 알림 메시지를 클릭하면 앱이 시작되고 알림 콘텐츠와 관련된 보기가 표시되어야 합니다. 이렇게 하려면 알림 요소의 launch 특성을 사용합니다. 이 특성은 알림을 통해 앱을 시작할 때 알림에서 앱으로 전달되는 문자열을 제공합니다. 이 문자열은 정해진 형태가 없으며 앱에서 정의됩니다. 활성화될 때마다 앱이 이 문자열을 인수로 확인하여 해당 보기나 작업을 적절하게 조정해야 합니다.


toastXml.selectSingleNode("/toast").setAttribute("launch", '{"type":"toast","param1":"12345","param2":"67890"}');

참고 Windows Phone Silverlight 8.1에서 시작 문자열의 값이 기본 시작 페이지의 URI에 추가됩니다. 예를 들어, 시작 문자열 "?conversation=71"을 제공할 경우, URI가 /MainPage.xaml?conversation=71과 같이 됩니다. 따라서 시작 문자열이 유효한 쿼리 문자열이어야 합니다. 그렇지 않으면 예외가 throw됩니다.

8. 지정한 XML 콘텐츠를 기준으로 알림 메시지를 만듭니다.

var toast = new notifications.ToastNotification(toastXml);

9. 알림 메시지를 보냅니다.

 
 var toastNotifier = notifications.ToastNotificationManager.createToastNotifier();
 toastNotifier.show(toast);

참고 Windows Phone Silverlight 8.1에서는 현재 포그라운드 앱이 ToastNotifier.Show 메서드의 호출자인 경우 알림이 표시되지 않습니다. 이 경우, 알림은 주로 백그라운드 에이전트에서 사용됩니다.

참고: 알림 메시지에 적용되는 배경색은 앱 매니페스트에서 앱 타일에 대해 선언된 배경색입니다. 자세한 내용은 빠른 시작: Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요.

요약 및 다음 단계

이 빠른 시작에서는 로컬 알림 메시지를 사용자에게 보냈습니다.

이 빠른 시작에서는 알림을 로컬 알림으로 보냈습니다. 로컬 알림은 가장 단순하게 구현할 수 있고 결과를 즉시 확인할 수 있는 알림 형식입니다. 이제 예약된 알림 메시지와 푸시 알림 메시지 등 다른 알림 메시지 방법을 탐색해야 합니다. 자세한 내용은 알림 전달을 참조하세요.

다음을 통해 공유