고정된 사이트의 사용자 지정 아이콘 오버레이 작업

이 작업에서는 아이콘 오버레이를 만들고 설정하고 지워서 고정된 사이트 내의 활동을 사용자에게 알리는 방법을 배웁니다.

참고  아이콘 오버레이를 보려면 작업 표시줄 단추를 큰 아이콘 기본 모드로 표시해야 합니다. 작은 작업 표시줄 아이콘은 아이콘 오버레이를 지원하지 않습니다. 또한 아이콘 오버레이는 고정된 사이트 창이 실행되는 동안에만 표시됩니다. 고정된 사이트 창을 닫으면 아이콘이 작업 표시줄 단추에서 제거됩니다.

참고  Windows 8의 알림에 대한 자세한 내용은 Windows 8의 고정된 사이트 알림을 참조하세요.

이 작업에서 사용되는 메서드

이 항목에서 소개되는 메서드는 다음과 같습니다.

msSiteModeSetIconOverlay(bstrIconUrl, bstrDescription)

window.external.msSiteModeSetIconOverlay 메서드를 사용하여 고정된 사이트의 작업 표시줄 단추에 16x16픽셀 아이콘 오버레이를 추가할 수 있습니다. 이러한 아이콘 오버레이를 통해 경고, 알림 및 응용 프로그램 상태를 사용자에게 알릴 수 있습니다.

msSiteModeClearIconOverlay()

window.external.msSiteModeClearIconOverlay 메서드는 작업 표시줄 단추에서 아이콘 오버레이를 제거합니다.

아이콘 오버레이 만들기

오버레이 아이콘은 작업 표시줄 단추 아이콘 위에 표시되는 작은 16x16픽셀 그래픽입니다. 아이콘 오버레이를 이미 본 적이 있을 것입니다. 두 가지 일반적인 예로 데스크톱 바로 가기와 파일을 구분하는 작은 화살표와 실행 시 관리자 권한이 필요한 응용 프로그램을 나타내는 응용 프로그램 아이콘의 방패 모양이 있습니다. 작업 표시줄의 아이콘 오버레이는 약간 다른 의미로 사용됩니다. 여기서는 아이콘 오버레이가 응용 프로그램의 활동을 사용자에게 알릴 수 있기 때문에 "알림" 아이콘으로 간주할 수 있습니다.

사이트 아이콘 사용자 지정에서 사이트 아이콘으로 했던 것처럼 X-Icon Editor를 사용하여 아이콘 오버레이용 아이콘을 만들 수 있습니다. X-Icon Editor는 HTML5 Canvas를 기반으로 하는 무료 응용 프로그램으로, 브라우저 내에서 직접 고해상도 아이콘을 만들 수 있습니다. 다양한 이미지를 편집기로 가져온 다음 신속하게 아이콘으로 변환할 수 있습니다. 예를 들어 다음 16x16픽셀 아이콘 오버레이는 이미지에서 만든 것입니다.

별, 원 및 데이지

웹 사이트 스타일에 맞는 —단순하거나 기발한— 모양의 정사각형 이미지만 있으면 아이콘을 만들 수 있습니다. 이미지를 X-Icon Editor로 가져온 후에는 배경색을 제거하도록 하세요. 이 작업을 수행하려면 지우개 도구를 사용하여 배경을 지우거나 페인트 통 도구를 사용하여 배경 영역을 완전 투명 색으로 채웁니다. 세부적인 이미지를 얻으려면 먼저 64x64픽셀 아이콘을 편집한 다음 이미지를 32x32픽셀로 복사하는 방식으로 작업합니다. 아이콘을 내보내기 전에 필요 없는 아이콘 크기를 지워 결과 파일의 크기를 최소화합니다.

아이콘을 사용하여 정보 중계

가능한 한 사용자가 쉽게 알아볼 수 있도록 아이콘을 만드는 방법을 고려해 보세요. 다음 숫자 아이콘 오버레이와 같이 알림 아이콘은 받은 메시지 수 등의 응용 프로그램 상태 정보를 중계할 수 있습니다.

숫자 오버레이 아이콘(1-5 이상)

하지만 숫자 아이콘으로 수행할 수 있는 기능은 제한됩니다. 한 자리 숫자는 제대로 작동하지만 큰 숫자는 읽기 어려울 수 있습니다. 또한 각 숫자에 해당 아이콘 리소스가 필요하므로 사이트에 대한 파일 요청 수가 훨씬 증가하며, 이러한 리소스를 만들고 관리하기 어려울 수 있습니다. 숫자 아이콘 오버레이를 만드는 경우 앞의 이미지에 있는 노란색 별과 같이 제공한 범위 이외의 숫자에 사용할 일반 기호를 포함하는 것이 좋습니다.

X-Icon Editor에서 숫자 아이콘을 만들 수도 있습니다. 먼저 5나 8과 같이, 넓은 숫자를 포함하기에 충분히 큰 배경 이미지로 시작하세요. 그런 다음, 숫자를 적용하고 아이콘을 내보냅니다. 다음 아이콘을 만들려면 실행 취소 화살표를 클릭하여 숫자를 제거한 후 다음 순서의 숫자를 적용합니다.

참고  독창성을 발휘하세요. 선택한 아이콘을 통해 응용 프로그램에 의미를 추가할 수 있습니다.

아이콘 오버레이 설정

다음 코드 예제와 같이 msSiteModeSetIconOverlay 메서드를 사용하여 오버레이 아이콘을 표시할 수 있습니다.


function setOverlayIcon(iconUri, descText)
{
    try {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeSetIconOverlay(iconUri, descText);
        }
    }
    catch (e) {
        // Fail silently.
    }
}


참고  bstrDescription 매개 변수는 아이콘 오버레이가 전달하는 정보에 대한 액세스 가능한 설명을 제공합니다. 화면 읽기 프로그램으로 읽을 수 있는 텍스트를 선택합니다.

이전 아이콘 오버레이가 있을 경우 이 호출에 의해 바뀝니다. 작업 표시줄 단추가 다른 단추와 그룹화되어 있을 경우 스택에서 가장 최근 아이콘 오버레이만 표시됩니다.

아이콘 오버레이 지우기

아이콘 오버레이를 제거하려면 다음 예제와 같이 msSiteModeClearIconOverlay 메서드를 호출합니다.


function clearOverlayIcon()
{
    try {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeClearIconOverlay();
        }
    }
    catch (e) {
        // Fail silently.
    }
}


요약

TweetFeed 예제 응용 프로그램은 지정된 검색 문자열을 기반으로 최근 트윗을 최대 5개까지 표시하고 아이콘 오버레이를 사용하여 사용자에게 최근 활동을 알립니다. 예를 들어 응용 프로그램이 새 tweet를 검색 중이면 돋보기가 표시됩니다.

새 tweet 검색 중

다음 스크립트는 원본 TweetFeed 샘플에서 약간 수정되었으며 아이콘 오버레이 코드를 단일 함수에 캡슐화하는 한 가지 방법을 보여 줍니다. 이 코드는 이 작업의 앞부분에서 정의한 함수를 사용합니다.


var states = { CLEAR: 0, COMPLETE: 1, ERROR: 2, SEARCH: 3 };
var messages = [ "Waiting...",
                 "Searching tweets...",
                 "Found a tweet!",
                 "Oops! Twitter error." ];

function setStatus(status)
{
    switch (status) {
        case states.CLEAR:
            clearOverlayIcon();
            break;

        case states.COMPLETE:
            if (unreadTweetCounter == 0) {
                clearOverlayIcon();
            }
            else {
                setOverlayIcon('Images/num_' + unreadTweetCounter + '.ico',
                                messages[2]);
            }
            break;

        case states.ERROR:
            if (unreadTweetCounter == 0) {
                setOverlayIcon('Images/error.ico', messages[3]);
                setTimeout("setStatus(states.CLEAR)", 2000);
            }
            break;

        case states.SEARCH:
            setOverlayIcon('Images/search.ico', messages[1]);
            break;
    }
}


아이콘 오버레이만으로 사용자의 주의를 끌기에 부족한 경우도 있습니다. 고정된 사이트 작업 표시줄 단추 깜박임 작업에서는 작업 표시줄 단추를 깜박여 보다 긴급한 요구를 나타내는 방법을 배웁니다.

추가 예제

Facebook 알림

다음 이미지는 Facebook에서 알림을 사용하여 사용자에게 새로운 활동을 알리는 방법을 보여 줍니다.

사용자에게 새로운 활동을 알리는 Facebook 알림

사용자가 메시지, 게시물을 받거나 다른 사용자가 게시물에 댓글을 달면 빨강 및 흰색 아이콘 오버레이가 적용됩니다.

관련 항목

작업
사이트 아이콘 사용자 지정
고정된 사이트 작업 표시줄 단추 깜박임
개념
알림을 제공하는 방법
고정된 사이트 소개

 

 

표시:
© 2014 Microsoft