IE 8, 웹 조각(Web Slices)

인터넷이 조각으로 배달된다?
IE9가 주목받는 요즘 IE8에 추가 된 기능을 언급하려하니 좀 늦은감이 없지 않다
하지만 이전에 소식으로만 접했던 IE8의 웹 조각을 다시 음미(?)해 보니 꽤 쓸만한 도구로 보인다

IE8의 웹조각은 그 이름에서 유추할 수 있듯이 웹을 조각으로 관리할 수 있는 기능이다
다시말해, 웹 페이지 중 일부 영역을 따로 떼어 그 부분만을 구독할 수 있게 해 준다

뉴스나 증권정보, 날씨정보와 같이 주기적인 업데이트가 필요한 콘텐트에 적용하기에 알맞은데,
사용자 입장에서, 그 내용을 확인하기 위해 매번 해당 웹사이트로 이동하는 불편을 해소해 준다.
웹조각을 설명한 (별로 재미는 없는) 만화가 제공된다. 아래 그림을 클릭해서 크게 보기 바란다

(출처: Internet Explorer 8 만화 5편 “웹조각")


사용자 입장, 웹 조각 사용하기
웹 조각은 사용자 편의를 위해 제공되는 IE8의 새로운 기능이다.
마치 특정 기능을 구현해 독립적인 작은 프로그램 형태로 제공하는 위젯과 유사한 기능이다.
일종의 IE8 즐겨찾기 위젯이라고도 할 수 있겠다

방문한 웹 사이트에서 웹 조각을 제공하면, IE8 도구모음에 있는 웹조각 아이콘이 활성화된다. 또한 웹 페이지의 웹 조각영역에 마우스를 올리면 역시 웹조각 아이콘이 활성화 된다. 아래 그림은 PlayNC 의 예이다

 

이렇게 활성화 된 웹조각 아이콘을 클릭하면 웹조각을 즐겨찾기에 추가할 수 있다. 이후 업데이트 되는 정보는 사이트에 직접 방문하지 않고 즐겨찾기 모음에 추가된 웹조각을 통해서 받아볼 수 있게 된다

개발자 입장, 웹 조각 적용하기
웹 조각은 웹 사이트를 운영하는 측에서 제공해야 이용할 수 있는 기능이다
따라서 사이트를 개발할 때 웹 조각을 위한 (매우 간단한) 코드가 정의되어 있어야 한다
아래는 가장 간단한 형태의 웹 조각 정의이다

<div class="hslice" id="myWebSlice">
  <div class="entry-title" style="display:none">새소식 제목</div>
  <div class="entry-content">
    <a href="http://m.mkexdev.net">새소식 내용</a>
  </div>
</div>

태그의 class 특성을 정의하면 IE8 브라우저는 이를 웹 조각으로 해석하게 된다
hslice는 하나의 웹조각 영역을 뜻하며 entry-title 와 entry-content 는 웹조각에 표시될 제목과 내용을 뜻한다

여기서 지정한 제목이 즐겨찾기에 표시되는 타이틀 제목이 되며, 예에서 숨김 처리를 한 것은 굳이 본문에 제목이 표시되지 않아도 되기 때문이다(이것은 선택이다. 제목도 웹 조각 본문에 포함되기 원한다면 보이게 하면 된다)

그리고 웹 조각은 한 페이지에 여러 개 존재할 수 있다. 다만 ID를 반드시 다르게 해 주어야 한다.
IE8이 웹 조각을 인식하는 기준은 아래와 같은 URL이기 때문에 ID를 중복해서 지정할 수 없다 
따라서 웹조각 마다 각기 다른 ID를 부여해야 하며 ID만 다르다면 여러개의 웹 조각을 정의할 수 있다
http://domain/slice.html#myWebSlice

참고로 제목은 중복될 수 있지만, 즐겨찾기 항목에 동일 제목이 나열되므로 중복되지 않게 하는 것이 좋다

더불어 웹 조각 적용시 기본 크기에 따른 최적의 콘텐트 구성, 웹 조각 링크 수동 제공, 웹 조각을 위한 인증처리 등 더 세밀한 프로그램 작업이 가능하다. 이 부분은 관련 자료를 찾아보기 바란다


웹 조각, 업데이트 알림
웹 조각의 가장 큰 장점 중에 하나는 업데이트 된 정보를 쉽게 취득할 수 있다는 것이다
IE8은 웹 조각 콘텐트를 일정한 주기로 확인하여 업데이트 여부를 시각적으로 알려 주는데 아래와 같이 그 주기를 설정할 수 있다(기본: 15분)
고급설정에서는 웹 조각에 대한 보다 섬세한 설정을 할 수 있으니 참고해 보기 바란다

업데이트를 인지하는 기준?
웹 조각이 업데이트를 인지하는 기준이 뭘까?
일반적으로 웹 브라우저가 서버의 파일 변경을 감지하기 위해서는 HTTP 헤더 정보를 참조한다
즉 HEAD 요청을 통해 해당 파일의 헤더에 있는 수정 날짜가 기준이 된다
브라우저가 웹 파일을 캐시하는 것도 이런 매커니즘이 적용된다

그러나 웹 조각은 파일이 아니라 파일 내 특정 영역에 대한 업데이트이다
개념적으로는 파일의 수정 날짜가 아니라 웹 조각 영역에 대한 변경이 감지되어야 하는데 간단하게 테스트를 해 보니 일관성이 없어 보인다. 파일 변경에 따른 업데이트는 명확히 알려 지는 반면 (파일 변경을 수반하지 않는) 웹 조각 영역내의 변경은 알림이 지연되는 느낌이다. 그러나 이것은 웹 조각의 정신(?)에 위배되지 않는가..

바빠서.. 더 이상의 테스트는 그만 두고, 다음에 알아 보기로 한다
이 테스트에 사용된 코드는 아래와 같이 매우 간단한 날짜 업데이트 코드이다
즉 파일은 더 이상 수정되지 않은채 내부적으로 내용만 업데이트 되도록 하였다

<div class="hslice" id="notice">
  <div class="entry-title" style="display:none">새소식 제목</div>
  <div class="entry-content">
    현재시간: <%=Now() %>   
  </div>   
</div>

급 추가>>>
이런, 이 글을 쓰고 저장하려고 하는 시점에, 웹 브라우저에서 업데이트 알림을 보내 왔다.
그리고 이후 쭈욱 지켜보니 나름대로 일관되게 알림을 보내준다. 이전 테스트는 내 마음이 급해서 인가 보다.
.. 위의 코드, 즉 웹 조각 영역에 있는 내용에 대한 업데이트도 제대로 알림이 되는 것을 확인 하였다
그렇지. 이렇게 되어야 웹 조각의 알림이라 할 수 있겠지... 괜찮은 웹 조각 ㅎㅎ


웹 조각의 범용성?
IE8에 도입된 웹 조각이 꽤 쓸만한 도구로 보이지만 가장 문제는 범용성이다
IE8 이상의 브라우저에서만 가능하기 때문에 요즘처럼 표준과 범용성이 중시되는 환경에서는 큰 단점이다

파이어폭스3 에서도 IE8의 웹 조각을 수용하기 위해,
웹청크(WebChunks, https://addons.mozilla.org/ko/firefox/addon/8494/)라는 것을 선보였다
IE8의 구현을 그대로 계승할 수 있어 두 브라우저의 범용성이 보장되는 셈이다.
그러나 현재 최신 버전의 파이어폭스(3.6.12)에서는 이 확장 기능이 설치 되지 않는다
 
그리고 맥의 사파리에도 이와 유사한 개념의 '웹클립' 이라는 위젯이 제공되는데
 개념적으로만 유사할 뿐 적용 방법과 기술이 달라 범용적으로 적용하기 힘든 구조이다

오페라의 경우 웹조각을 구현한다는 썰이 있는데 단지 루머수준에 머물러 있는 듯 하다
Rumor: Opera 10 to Include Web Slices

결국 웹 사이트의 사용성을 증대 시킨 '웹 조각'은 그 자체로는 유용한 면이 있지만,
실제 현업에서 적용하기에는 범용성이라는 걸림돌에 부딪히게 되는 것이다

만일 대상 고객이 IE에 한정되어 있거나 IE 사용자들에게만 부여되는 옵셔널한 기능이라면 적용할 만한 가치가 있겠다

ps. 글이 매우 급하게 작성되었다. 정신적으로 여러 현안이 겹쳐 있어 이 주제에 집중하기가 힘들다
내용에 오류가 있다면 즉시 지적 바란다