인터넷 익스플로러 9(IE9) 베타가 공개되면서 눈길을 끄는 새로운 기능 중 하나가 바로 '사이트 고정(Pinning)'입니다. 브라우저 탭을 작업 표시줄로 드래그 앤 드롭하기만 하면 어떤 사이트든 작업 표시줄에 고정할 수 있고, 사용자는 아이콘을 클릭해 해당 사이트를 빠르게 실행할 수 있습니다.
여기에 더해 IE9는 웹마스터가 작업 표시줄 아이콘에 점프 목록(Jump List) 항목을 추가할 수 있는 기능도 제공합니다. 이 글에서는 자신의 사이트에 점프 목록 항목을 추가하는 방법을 단계별로 소개합니다.
구현 방법
이 예제에서는 Make Tech Easier의 각 카테고리 링크를 점프 목록에 추가해 보겠습니다. 물론 링크 URL은 원하는 대로 자유롭게 변경하셔도 됩니다.
1. 먼저 테마 파일을 열고, 아래 메타 태그를 <head>와 </head> 태그 사이에 삽입합니다. WordPress를 사용 중이라면 테마 폴더 내 header.php 파일에서 <head> 태그를 찾을 수 있습니다.
<META name="msapplication-task" content="name=Windows;action-uri=https://www.maketecheasier.com/category/windows-tips;icon-uri=https://www.maketecheasier.com/favicon.ico"/>
수정해야 할 부분은 다음과 같습니다:
- name=xyz: 점프 목록에 표시될 항목 이름입니다. 알아보기 쉬운 명확한 이름을 지정하세요.
- action-uri=https://xyz.com: 사용자가 해당 링크를 클릭했을 때 열리는 페이지의 URL입니다.
- icon-uri:https://xyz.com/favicon.ico: 항목 이름 옆에 표시될 파비콘(favicon)입니다. 반드시 .ico 형식이어야 합니다.
메타 태그 하나당 링크 하나가 추가됩니다. 따라서 링크가 5개라면 메타 태그를 5번 추가하고(내용은 각각 수정) 작성하면 됩니다. 참고로 IE9에서는 최대 5개까지만 추가할 수 있습니다.
이것으로 끝입니다. 태그 추가를 마쳤다면 HTML 파일(WordPress의 경우 header.php)을 서버에 업로드하거나 교체하세요. 이후 IE9를 열어 사이트를 로드한 뒤 탭을 작업 표시줄로 드래그하면, 추가한 링크들이 점프 목록에 나타나는 것을 확인할 수 있습니다.
추가 커스터마이징
IE9는 점프 목록 외에도 툴팁(tooltip) 추가, 뒤로/앞으로 탐색 버튼 색상 변경, 시작 페이지 URL 지정, 창 크기 설정 등 다양한 커스터마이징 옵션을 지원합니다. 아래 태그들을 활용해 보세요.
<meta name="application-name" content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip" content="Start the page in Site Mode"/>
<meta name="msapplication-starturl" content="https://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
각 태그의 역할은 다음과 같습니다:
- application-name: 고정된 사이트의 응용 프로그램 이름을 지정합니다.
- msapplication-tooltip: 아이콘에 마우스를 올렸을 때 표시되는 툴팁 문구입니다.
- msapplication-starturl: 아이콘 클릭 시 처음 열리는 시작 페이지 URL입니다.
- msapplication-window: 사이트 모드 창의 초기 크기(너비와 높이)를 지정합니다.
- msapplication-navbutton-color: 브라우저 탐색 버튼의 색상을 변경합니다.
이처럼 몇 줄의 메타 태그만으로도 IE9의 사이트 고정 기능을 적극적으로 활용해 방문자에게 더 편리한 접근성을 제공할 수 있습니다.