Windows 8의 고정된 사이트

Windows 8 시작 화면은 모든 즐겨찾는 앱과 콘텐츠를 찾고 연결하는 데 가장 이상적인 위치입니다. 앱 타일은 실행하지 않는 동안에도 업데이트되며 새롭고 적절한 콘텐츠를 제공하므로 사용자는 어떤 소식이 새로 추가되었는지 손쉽게 확인할 수 있습니다.

우리는 Windows 8에서 Internet Explorer 10의 Metro 스타일 브라우징 경험에 대한 글을 썼습니다. 이 글에서는 IE10의 고정된 사이트에 대해 자세히 알아보고 사이트 중심의 시각적 요소와 새로운 콘텐츠를 알려 주는 배지 알림으로 구성된 Windows 8 시작 화면에서 이러한 고정된 사이트를 사용하는 방법에 대해 설명합니다. 또한 웹 개발자가 고정된 사이트를 지원하는 데 필요한 정보도 자세히 소개합니다.

다음 동영상에서는 Windows 8 Consumer Preview에서 실행 중인 고정된 사이트를 보여 줍니다.

Windows 8의 고정된 사이트

고정된 사이트 – 즐겨찾기 그 이상

Windows 사용자는 웹에서 대부분의 시간을 보내며 우리는 Windows 옵트인 원격 분석(정식 명칭: Microsoft 사용자 환경 개선 프로그램)을 통해 그들이 같은 사이트 집합을 자주 찾는다는 사실을 알고 있습니다. Windows 8의 고정된 사이트는 즐겨찾는 사이트로 즉시 이동할 수 있는 빠르고 간편한 방법을 제공합니다. 배지 알림은 최신 정보로 사이트 타일을 업데이트하며 새로운 콘텐츠를 사용할 수 있는 경우 이를 알려 줍니다.

개발자는 고정된 사이트를 활용하여 사이트를 사용자와 보다 효율적으로 연결하고 Windows 시작 화면에서 직접 사이트의 브랜드를 홍보할 수 있습니다. 우리는 Windows 7의 IE9에서 이 기능을 사용하는 사이트가 어디서든 방문율이 15~50% 증가한 것을 확인했습니다. Windows 8에서는 사이트 타일 업데이트로 인해 사용자 경험이 대폭 향상됩니다. 브라우저에서 사이트를 열지 않은 경우에도 마찬가지입니다.

다음 두 스크린샷에서는 고정된 사이트 타일과 배지 알림을 보여 줍니다.

사이트 중심 시각적 요소와 배지 알림이 표시된 시작 화면의 고정된 사이트

고정된 사이트 타일의 배지 알림 예

고정된 사이트 타일의 사이트 중심 시각적 요소

웹 개발자는 IE10에서 브라우저를 통해 주소 표시줄, 새로운 탭 페이지 및 시작 화면에 사이트를 표시하는 데 사용하는 사이트 아이콘(파비콘(즐겨찾는 아이콘))을 제공합니다. IE9에서 사이트를 작업 표시줄에 고정할 수 있는 것처럼 IE10에서도 큰 사이즈 아이콘(32 x 32픽셀)으로 사이트를 시작 화면에 고정할 수 있으므로 사용자는 손쉽게 고정된 사이트를 찾을 수 있게 됩니다.

Metro 스타일 IE10으로 사이트를 고정하는 모습을 보여 주는 스크린샷(사이트 타일의 미리 보기가 표시되어 있음)

IE10에서는 아이콘에서 대표적인 색상을 추출하여 자동으로 이 색상을 시작 화면 타일의 배경색으로 사용합니다.

아이콘을 만드는 한 가지 도구는 X-Icon Editor입니다. 이 도구를 사용하여 사이트의 32x32 아이콘을 만들 수 있습니다. 또한 이미지를 아이콘 파일 형식(.ico)으로 변환할 수 있습니다. 그런 다음 기존 즐겨찾기 아이콘 마크업을 사용하여 .ico를 연결할 수 있습니다.

<link href="testdrive.ico" rel="shortcut icon" />

백그라운드에서 업데이트되는 배지 알림

Windows 8의 경우 시작 화면에서 고정된 타일에 대한 업데이트를 폴링할 수 있습니다. 이는 다른 사용자의 새 메시지(이메일 및 소셜 네트워킹), 쇼핑 사이트의 새로운 할인, 뉴스피드의 새 게시물 등과 같은 비교적 간단한 알림에 효과적입니다.

Internet Explorer 10과 Windows 8을 사용하면 고정된 사이트 타일에서 직접 배지 알림을 제공할 수 있습니다. 즉, 사용자가 브라우저에서 사이트를 열지 않고도 해당 사이트에 대한 업데이트를 가져올 수 있습니다. 예를 들어 Windows 8 Consumer Preview에서 IE10을 사용하여 Fresh Tweets 데모를 고정합니다. 고정된 사이트 타일이 정기적으로 업데이트되고 새 트윗이 있는 경우 사용자에게 알려 줍니다.

백그라운드 알림에는 사이트에서 제공하는 구성 요소가 필요합니다. 예를 들면 다음과 같습니다. (1) 배지 알림 XML - Windows용 배지 알림을 설명하는 XML 응답, (2) 고정된 사이트 메타 태그 - Windows에서 알림을 폴링해야 하는 위치 및 폴링 빈도를 지정하는 웹 페이지 마크업

배지 알림 XML

Windows에서는 배지 알림의 폴링 및 그리기를 처리합니다. Windows에서는 고정된 사이트 타일의 시각적 요소를 설명하는 배지 알림 XML을 폴링합니다. 배지 XML 스키마는 이를 간단한 XML 응답으로 정의합니다. 예를 들어 숫자 "3"으로 타일을 업데이트하려면 다음 XML을 보내면 됩니다.

<?xml version="1.0" encoding="utf-8" ?>

<badge value="3"/>

배지는 숫자이거나 '알림' 및 '새 메시지' 표시와 같은 문자 모양일 수 있습니다. 배지에 표시할 수 있는 항목 목록은 MSDN에서 배지 이미지 선택을 참조하십시오.

고정된 사이트 메타 태그

다음 단계에서는 배지 알림 XML을 웹 페이지에 연결합니다. IE10에서는 "application-name" 메타 태그를 사용하여 웹 페이지에서 알림 및 점프 목록과 같은 고정된 사이트 기능을 지원하는지 여부를 확인합니다. 배지 알림을 지원하려면 배지 알림 XML의 URL 및 Windows에서 이를 요청할 빈도를 사용하여 마크업에 새 메타 태그를 포함하면 됩니다. IE에서는 "msApplication-badge" 메타 태그가 고정 당시에, 그리고 이후에 고정된 사이트 타일에서 사이트를 시작할 때 페이지에 있는지 여부를 확인합니다.

<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />

값 매개 변수는 polling-uri(필수)와 frequency(선택)로 구성됩니다.

polling-uri는 Windows에서 위에 정의된 간단한 XML 문서를 요청하는 절대 URI입니다.

frequency는 업데이트 간의 선택적 시간(분)으로, 다음 값 중 하나여야 합니다.

• 30(Windows에서 30분마다 URI를 폴링함)
• 60(1시간)
• 360(6시간)
• 720(12시간)
• 1440(1일. 이 값이 기본값임)

frequency가 생략되거나 위에 나열된 값 중 하나가 아닌 다른 값인 경우에는 기본적으로 일일 업데이트(1440분)로 설정됩니다.

배지 알림을 업데이트하는 개발자 API

웹 페이지에서 직접 사이트 타일 배지를 지우고 새로 고쳐 사이트 타일을 최신 상태로 유지할 수 있습니다.

사용자가 시작 화면을 통해 고정된 사이트 타일을 시작한 경우 웹 사이트는 SiteMode라는 고유 세션에서 실행되며 다음 JavaScript 함수를 사용하여 배지를 업데이트할 수 있습니다.

window.external.msSiteModeClearBadge()는 타일에서 배지 알림을 지웁니다. Fresh Tweets 데모에서는 사용자가 알림을 받고 타일을 탭하여 브라우저를 시작한 경우 웹 페이지에서 msSiteModeClearBadge()를 사용하여 타일에서 알림을 지웁니다. 다음에 타일이 배지 업데이트로 켜지면 사용자는 새 콘텐츠가 있음을 알게 됩니다.

window.external.msSiteModeRefreshBadge()는 폴링 URI를 사용하여 사이트의 배지를 업데이트하도록 Windows를 호출합니다. 예를 들어 사용자가 읽지 않은 세 개의 메시지를 나타내는 고정된 사이트 타일을 보고 타일을 클릭하여 사이트로 돌아갑니다. 사용자가 첫 번째 업데이트만 읽은 경우 나머지 두 메시지의 올바른 읽음/읽지 않음 수가 배지에 반영되도록 업데이트를 트리거할 수 있습니다.

Windows 8 Consumer Preview에서는 이러한 두 API가 로컬 인트라넷 또는 신뢰할 수 있는 사이트 영역에서 실행되는 사이트에서만 작동합니다. 이는 다음 프리뷰에서 수정될 예정입니다. Consumer Preview의 이러한 API를 자체 사이트에서 테스트하려면 인터넷 속성 대화 상자의 보안 탭을 사용하여 해당 도메인을 신뢰할 수 있는 사이트 목록에 추가하면 됩니다.

바탕 화면 작업 표시줄 알림

바탕 화면 작업 표시줄에 고정된 사이트에 대한 알림은 아이콘 오버레이 형식으로 표시되며 데스크톱의 Windows 8 및 IE10에서 알림이 계속 실행됩니다. 이 형식의 알림은 Windows 시작 화면의 고정된 사이트에서는 사용할 수 없습니다. Windows 8에서는 시작 화면의 모든 타일에 대한 알림을 처리하며 이를 배터리 효율적인 방식으로 수행합니다.

사이트 내에서 빠르게 탐색할 수 있는 점프 목록

NYTimes.com, CNN.com, Amazon.com 등의 많은 주요 사이트에서는 점프 목록과 같이 특정 작업 또는 사이트의 일부로 이동하는 IE9 고정된 사이트 기능을 지원합니다. IE10에서는 터치 중심적 방식으로 사이트를 탐색할 수 있도록 탐색 표시줄의 일부로 점프 목록을 사용할 수 있습니다.

사용자가 시작 화면에서 사이트를 시작한 경우 사이트에서 사용할 수 있는 점프 목록이 있음이 고정 단추에 표시됩니다.

Fresh Tweets 데모의 점프 목록을 보여 주는 스크린샷

표시된 점프 목록은 IE9에서 Windows 7 작업 표시줄에 표시하는 것과 같습니다.

페이지 마크업을 통해(자세한 정보) 또는 사용자 상호 작용에 따라 동적으로(자세한 정보) 사이트의 점프 목록에 정적 작업을 추가할 수 있습니다. Windows 8의 배지 및 점프 목록은 사이트 중심적인 기능입니다. 정규화된 도메인 이름마다 폴링 데이터 및 점프 목록 데이터 집합을 하나씩만 가질 수 있습니다.

결론

Internet Explorer 10과 Windows 8 시작 화면이 통합됨으로써 웹 사이트가 사용자 경험의 중심에 우뚝 서게 되었습니다. 웹 개발자는 고정된 사이트 타일에 대한 사이트 중심 시각적 요소를 만들고, 사이트에 사용 가능한 새 업데이트가 있는 경우 이를 공유하고, 사이트를 빠르게 탐색할 수 있는 점프 목록을 제공할 수 있습니다.

이러한 간단한 기능을 웹 사이트에 추가하여 Windows 8에서 그 효과를 극대화해 보시기 바랍니다.

- Internet Explorer 프로그램 관리자, Rahul Lalmalani