Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

사용자에게 사이트를 고정하라는 메시지 표시

http://www.buildmypinnedsite.com/은 사용자에게 끌어서 놓기 작업을 통해 사이트를 작업 표시줄에 고정하도록 제안합니다.

이 작업은 고정된 사이트 API를 사용하여 Windows 시작 메뉴에 웹 사이트 바로 가기를 추가하고 고정된 사이트 브라우저 창을 실행하는 방법에 대해 설명합니다. 또한 사이트 고정 기능을 알리고 Windows 7 작업 표시줄에 사이트를 고정하도록 사용자에게 제안하는 방법에 대해 설명합니다. 마우스 또는 키보드 바로 가기를 사용해 사이트를 고정하는 방법을 알아보려면 고정된 사이트 소개를 참조하세요.

사이트를 고정할 수 있는 브라우저 및 운영 체제 지원 수준 감지

이 섹션에서는 여기에서 찾을 수 있는 pinnedSiteDetection.js 도우미 스크립트를 소개합니다. 이 스크립트를 사용하여 사용자의 브라우저와 브라우저가 실행되고 있는 운영 체제의 기능을 감지할 수 있습니다. 이는 기능이 없는 UI를 표시하면 안 되기 때문에 중요합니다.

다음 표에서는 pinnedSiteDetection.js 도우미 스크립트가 검색할 수 있는 모든 정보를 보여 줍니다.

찾을 내용세부 정보
브라우저에서 고정 기능을 지원하나요?

사용자가 사이트 고정을 지원하는 브라우저를 사용하고 있나요?

사용 중인 경우 어떤 '고정' 지원 수준이 제공되나요?

사이트를 현재 고정한 경우...

사용자가 현재 고정된 사이트를 통해 방문하고 있나요?

사이트를 전에 고정한 경우...

사용자가 이전에 사이트를 고정했나요?

OS

사용자가 사용 중인 운영 체제가 고정을 지원할 수 있나요?

지원하는 경우 어떤 지원 수준이 가능한가요?

 

사이트를 고정하기 위한 브라우저 지원의 세 가지 수준은 다음과 같습니다.

  • 전체 고정 기능 -- 사용자가 Windows 7 및 Windows Internet Explorer 9 또는 Internet Explorer 10 및 Windows 8을 설치했습니다. 이는 사용자가 사이트 아이콘을 작업 표시줄로 끌어 사이트를 고정할 수 있음을 의미합니다.
  • 제한된 고정 기능 -- 사용자가 Internet Explorer 9은 설치했지만 Windows 7은 설치하지 않았습니다. 이는 사용자가 사이트를 고정할 수 있지만, 해당 사이트를 시작 메뉴에 고정해야 합니다.
  • 고정 기능 없음 -- 사용자가 Internet Explorer 9 및 Windows 7을 둘 다 설치하지 않았습니다. 사용자가 Internet Explorer 9으로 업그레이드하면 고정된 사이트를 사용할 수 있습니다.

다음 코드 예제에서는 사용자의 현재 브라우저에서 고정된 사이트의 지원 수준을 감지하는 방법을 보여 줍니다.


function doChecks_Browser() {    
    // full pin abilities == can pin && Win7+    
    if (pinnedSiteDetection.hasFullPinAbilityBrowser)        
        document.getElementById("cellCanPinFull").bgColor = "green";
    else        
        document.getElementById("cellCanPinFull").bgColor = "gray";
    // limited pin abilities == can pin && not Win7+ 
    if (pinnedSiteDetection.hasLimitedPinAbilityBrowser)        
        document.getElementById("cellCanPinLimited").bgColor = "green";
    else        
        document.getElementById("cellCanPinLimited").bgColor = "gray";    
     // no pin abilities == cannot pin     
     if (pinnedSiteDetection.hasNoPinAbilityBrowser)        
         document.getElementById("cellCanNotPin").bgColor = "green";
    else        
         document.getElementById("cellCanNotPin").bgColor = "gray";
}

사용자가 사이트를 고정할 수 있는 두 가지 방법

이 작업에 소개된 메서드

사용자가 제한된 고정 지원을 사용할 수 있는 경우 다음 메서드를 사용합니다(Windows Vista 및 Internet Explorer 9 사용). 그렇지 않으면 사용자가 아이콘을 끌어서 작업 표시줄에 고정할 수 있는 권장 방법을 사용합니다.

msAddSiteMode()

window.external.msAddSiteMode 메서드는 모든 프로그램 아래의 Windows 시작 메뉴에 현재 웹 페이지를 추가하고, 고정된 사이트로서 실행합니다. 기본적으로 웹 사이트는 작업 표시줄에 고정되지 않습니다.

이 메서드는 단추 클릭 등의 사용자 동작으로 호출되어야 하며 사용자가 동작을 확인할 수 있습니다.

시작 메뉴에 사이트 추가

Internet Explorer 사용자는 대부분 사이트 아이콘이나 탭을 Windows 작업 표시줄로 끌어서 사이트를 고정합니다. 사이트를 고정하는 데 사용되는 이 기본 방법에 대해서는 사용자에게 사이트 아이콘을 끌라는 메시지 표시 섹션에서 설명합니다.

도구 메뉴에도 시작 메뉴에 사이트 추가라는 사이트 고정 옵션이 있습니다. 이 옵션은 msAddSiteMode 메서드가 수행하는 동작과 정확히 일치합니다. 옵션이 도구 메뉴에 있기 때문에 이 옵션을 찾아서 사용하는 사용자가 훨씬 더 적습니다.

다음 코드는 웹 페이지에 이 기능을 노출하는 한 가지 방법을 보여 줍니다.


function addSite()
{
    try {
        window.external.msAddSiteMode();
    }
    catch (e) {
        alert("This feature is only available in Internet Explorer 9.");
    }
}



<button onclick="addSite();">Add Site to Start Menu</button>


단추 클릭에 대한 응답으로 msAddSiteMode 메서드는 사용자가 동작을 확인할 수 있도록 시작 메뉴에 사이트 추가 대화 상자를 실행합니다. 브라우저에서 이 메서드를 지원하지 않는 경우 try/catch 블록은 요청된 동작이 실패했다는 피드백만 제공합니다.

사용자는 시작 메뉴에 사이트를 추가하기 전에 동작을 확인해야 합니다.

참고  msAddSiteMode 메서드는 단추 클릭 등의 사용자 동작으로 호출되어야 합니다. 사용자 상호 작용 없이 시작 메뉴 바로 가기를 설치하거나 작업 표시줄에 사이트를 고정할 수 없습니다.
 

작업 표시줄에 응용 프로그램 및 웹 사이트를 고정하는 작업은 완전히 사용자가 제어합니다. 사용자가 해당 작업 표시줄을 완벽하게 제어할 수 있게 하려고 시작 메뉴에 고정된 사이트 바로가기를 추가해도 사이트가 작업 표시줄에 자동으로 고정되지는 않습니다. 웹 사이트가 실행된 후 사용자가 작업 표시줄에 프로그램을 고정해야 합니다.

이러한 용도로 사용할 수 있는 보다 효율적인 방법이 있습니다. 다음을 고려해 보겠습니다.

  • 사용자가 Internet Explorer 9 이상 버전으로 검색 중인지 확인하기 위해 왜 기다려야 하나요? UI를 표시하기 전에 브라우저에서 고정된 사이트 기능을 지원하는지를 손쉽게 감지할 수 있습니다.
  • 권장되는 사용자 환경은 끌어서 놓기입니다. 무슨 일이 일어날지 알 수 없는 경우 사용자는 단추나 링크를 클릭하지 않을 수 있습니다. 이와 비교하면 끌어서 놓기 작업으로 사이트를 작업 표시줄에 고정하는 것이 보다 자연스러운 동작입니다. 이를 위해 환경을 최적화해야 합니다.

사용자에게 사이트 아이콘을 끌라는 메시지 표시

사이트에 다음 스크린샷의 메시지와 같은 시각 신호가 포함되어 있으면 사용자가 끌어서 놓기 작업을 사용할 가능성이 커집니다.

사용자에게 사이트를 고정하라는 메시지가 표시됩니다.

코드는 단순하며 이미지, 텍스트 및 링크로 이루어진 고정 위치 div 요소를 포함합니다.


<div id="divPinSite">
    <img src="Images/whitearrow.ico" alt=""/>
    Drag the site icon to the taskbar to pin site
    <a href="javascript:void(0)" onclick="addSite();">
    Or, click here to add to Start menu</a>
</div>


다음과 같은 CSS 스타일을 통해 효과가 마무리됩니다. div 및 해당 자식 요소는 페이지 배경에 부동 상태로 유지됩니다.


<style type="text/css">
#divPinSite
{
    position: fixed;
    padding: 5px;
    color: white;
    width: 380px;
    height: 20px;
    top: 0px;
    left: 70px;
    background-color: #c00;
    border-radius: 0px 0px 10px 10px;
    font-size: .87em;
    font-family:Arial, Helvetica, sans-serif;
    display:none;
}
#divPinSite img
{
    height: 16px;
    width: 16px;
    vertical-align: top;
    float: left;
    margin-right: 5px;
}
#divPinSite a
{
    float: left;
    padding-top: 1em;
    text-decoration: none;
    color: black;
    font-size: smaller;
}
</style>


물론 사용자가 Internet Explorer 9 이상을 사용하여 검색하지 않는 경우 메시지를 표시할 이유가 없으므로 처음에 div 요소를 보기에서 숨기기 위해 CSS에 "display:none"이 포함되어 있습니다. 다음 스크립트는 페이지가 로드될 때 실행되어 메시지 표시 여부를 확인합니다.


window.onload = function()
{
    try {
        if (window.external.msIsSiteMode()) {
            // Continue intialization
        }
        else {
            document.getElementById('divPinSite').style.display = "block";
        }
    }
    catch (e) {
        // Fail silently. Pinned Site API not supported.
    }
}


실제 예

다음 스크린샷은 Huffington Post에서 화면 맨 위에서 아래로 스크롤되는 페이지 배너를 사용하여 사이트를 고정하라는 메시지를 표시하는 방법을 보여 줍니다.

페이지 배너로 구현된 고정 미리 알림

다음 단계

브라우저 프레임에서 화면 바깥쪽의 요소를 가리키는 대신 사용자가 끌어서 고정할 수 있는 고유한 이미지를 쉽게 선언할 수 있습니다. 자세한 내용은 이미지를 끌어 사이트 고정을 참조하세요.

사용자가 사이트를 고정한 후 고정된 사이트와 관련된 특정 기능을 알려줄 수도 있습니다. 자세한 내용은 첫 실행 경험 만들기를 참조하세요.

관련 항목

작업
사이트 아이콘 사용자 지정
고정된 사이트 메타데이터 선언
고정된 사이트 감지
개념
http://www.buildmypinnedsite.com/
새로운 트윗 2.0 - Windows 8용 데모
Windows 8의 고정된 사이트를 위한 고품질 시각 효과
검색 기능 개선 방법
고정된 사이트 소개
Windows 8의 고정된 사이트

 

 

표시:
© 2017 Microsoft