'WebSlices'에 해당되는 글. 1건

  1. 2008/03/08 Internet Explorer 8에서 바뀐점 (8)

사용자 삽입 이미지


앞에 적었던 Internet Explorer 8에서 사용후기에 이어서 IE8에서 바뀐 점에 대해서 포스팅 합니다. IE에서 바뀐점은..  What's New in Internet Explorer 8 에 잘 정리되어 있는데 여기 나온 내용 중 관심 가는 몇가지를 소개합니다.

사실 웹을 기반으로 개발을 하게되면, 브라우저 특히 IE가 새롭게 런칭 될때마다 긴장을 하게될 수 밖에 없습니다. 웹이 플랫폼이라고 하지만, 사실 브라우저가 플랫폼이란 사실을 새삼 느끼게 된다고나 할까요.. :)



ActiveX Improvements

  • Per-site ActiveX

    많은 ActiveX Control들이 하나의 사이트에만 동작함에도 불구하고, site-locking 기술을 사용하지 않아서 ActiveX Control들이 본래의 저작의도와 다르게 다른 사이트에서 악용될 위협을 가지고 있다고 합니다. IE8에서는 ActiveX를 허용하는 동작은 Site단위로 지정하도록 하는 기능을 추가 되었습니다. (아래 그림에서 보면 Run Add-on과 Run Add-on on All Websites가 분리되어 있습니다.)

사용자 삽입 이미지

  • Non-administrator installation

    관리자 권한을 가지지 않는 표준사용자들은 그 동안 ActiveX Controls를 설치할 수 없었습니다. (UAC등을 통해 관리자로 권한상승을 하지 않는다면) IE8에서는 표준 사용자도 자신의 권한으로 ActiveX Controls를 설치할 수 있도록 하는 기능이 추가 되었습니다. 표준 사용자 권한으로 설치된 ActiveX Controls는 자신의 Profile에 한하여 영향을 미치며, 이로인하여 System 전체가 파괴되는 일은 없다고 합니다.




Activities and WebSlices

  • Activities는 브라우저 확장기능 입니다. 사용자가 특정 영역을 선택하면 해당 영역의 정보를 인식하여서 다른 서비스와 연결해주는 것을 해줍니다. 예를 들어서 주소가 들어간 곳을 마우스로 드래그하면 Google Maps와 바로 연결을 해준다던지 하는 브라우저 확장 기능입니다. 이는 사실 Windows Live Toolbar에 있던 Smart Menu를 브라우저에 기본적으로 포함시킨 정도라고 생각할 수 있겠습니다. (그림 참조)

    사용자 삽입 이미지


  • WebSlice는 Favories Bar(즐겨찾기 바)라고 하는 곳에 표시되며, RSS와  유사하게 웹페이지의 컨텐츠가 업데이트 되면 업데이트가 되었음을 알려 줍니다. 왜 RSS라는 표준적인 기술을 쓰지 않고, 새로운 형태를 만들었는지 논란의 여지가 있을 수 있겠지만, RSS와 약간 다른 성격이라고 하면은 RSS는 배포(Syndication)와 구독(Subscription)의 개념이라면..  WebSlice는 웹사이트의 특정 영역(Slice)가 변화를 확인 하는 정도의 개념이라고나 할까요. (RSS처럼 바뀌었다고해서 새롭게 읽어야할 것 같은 압박은 없는 듯.)

    아무튼 WebSlice를 제 블로그에도 한번 만들어 보았습니다. IE8을 설치하시고 메인 페이지에 들어 가신 다음에 마우스를 대면 아래와 같은 그림이 나옵니다. ( 아직 메인 화면이 아닌 곳에서도 나온다는 문제가 있습니다.)

    사용자 삽입 이미지

    여기에서 보라색 버튼을 눌면 Favorites Bar에 추가할 수 있습니다.
    추가된 화면은 아래와 같습니다.

    사용자 삽입 이미지

    WebSlice.. 말 그대로 Web의 특정 영역을 잘라서 보여준다는 느낌 입니다.




AJAX Enhancements

  • AJAX Navigation — 클라이언트에서 응답이 얼마간 없을때의 시점은 hash에 저장할수 있는데 이것을 기반으로해서 AJAX Application에서도 Back버튼이 가능하도록 되었습니다.

  • Connection Events — 브라우저에서 Connection이 끊어질 때, 이벤트를 받을 수 있게 되었습니다. 따라서 안정성이 중요한 프로그램에서는 이를 이용해서 데이터가 중간에 날라가 버린다 하거나 하는 일을 방지할 수 있게 되었습니다.

  • Cross-domain Request (XDR) — 원래 XMLHTTPRequest가 Cross-domain 접근이 되지 않습니다. 이로 인한 개발의 제약사항이 많았었는데 IE8에서는 XDomainRequest object를 통해서 제한된 통신이 가능하다고 합니다.

  • Cross-document messaging — postMessage 를 이용하면 서로 다른 도메인 간에  문서를 안전하게 교환할 수 있다고 합니다. 주로 Frame으로 제작된 곳에서 많이 쓰일 수 있겠습니다.

좀 더 자세한 정보를 보실려면:





Developer Tools

Firefox에는 Firebug라는 좋은 디버깅 툴이 있었느나 IE디버깅을 위해서는 Visual Studio/IE Developer Toolbar/Windows Script Debugger를 써야하는 불편함이 있었습니다. 이번에 IE8에서는 위와 같은 관련 도구가 합쳐진 형태를 기본적으로 IE에 포함시킬 예정인가 봅니다. 또한 Developer Tools에서는 Version Mode Switching을 제공하여서 IE의 Rendering방식을 고를 수 있도록 하였습니다. (아래 그림 참조)

사용자 삽입 이미지

좀 더 자세한 정보를 보실려면:





Document Compatibility Mode

IE는 Quirks모드, IE7 Strict모드, IE8 Standards모드의 세가지 렌더링 모드(Layout Mode)를 지원합니다. 이를 Developer Tools를 통해서 강제로 지정할 수도 있지만 일반적인 페이지는 !DOCTYPE를 기반으로 어떤 모드로 렌더링을 할지 결정하게 됩니다.

렌더링 모드가 결정되는 조건은 아래 표와 같습니다.

Page Content Declaration

Layout Mode

Known standards DOCTYPEs and unknown DOCTYPEs IE8 Standards
Quirks mode DOCTYPEs (includes the absence of a DOCTYPE) Quirks

하지만 웹 사이트 제작자가 DOCTYPE을 유지한 상황에서 강제로 렌더링 모드를 선택하는 방식도 제공합니다. (아래 코드 참조)

<meta http-equiv="X-UA-Compatible" content="IE=7" />
여기에 관한 좀 더 자세한 정보는 Defining Document Compatibility를 참조 하세요.




DOM Storage

요즘 AJAX기반으로 하는 Application은 덩치가 상당 합니다. 이렇게 되면 데이터를 메모리에 저장하는 방식에서 상당한 애로사항이 생기는데 이를 해결하기 위해서 기존에는 쿠기/DOM/Flash 등의 갖은 편법을 동원해서 작업해야 했습니다. 그래서 HTML5 Draft에서는 sessionStorage와 globalStorage등의 개념이 생기게 되고, 이 것중에 이부분이 IE8에서는 구현되었다고 합니다.

자세한 사항은.. Introduction to DOM Storage를 참조 하시면 좋을 것 같습니다.




HTML Improvements

HTML 4.01구현에서 몇 가지 부분이 다른 브라우저와 통일성을 위해 변경 되었습니다.
주요 사항은 아래와 같다고 하네요.

  • The object tag image fallback is interoperable with other browsers. For example, an object tag without dimensions is now the same size of the image rather than zero by zero pixels.
  • The button element submits its value attribute instead of its innerHTML. This means you can use the button element for cross-browser FORM scenarios.
  • The getElementById method is now case-sensitive, and it no longer incorrectly searches using the NAME attribute.
  • The setAttribute method is now case-insensitive; you do not need to use "camel case" to specify attributes. It also correctly identifies HTML attributes such as CLASS and FOR.




Selectors API

DOM을 선택할 때, CSS Selector 방식을 사용하면 쉽게 원하는 DOM을 선택할 수 있습니다. 이러한 방식은 PrototypeJS 등의 Javascript Framework에서 기본적으로 제공해주는 기능입니다. IE8에서는 이 기능을 브라우저단에서 제공해주니 Javascript Library단에서 제공하는 것과 비교하여 훨씬 빠른 성능을 낸다고 합니다. ( 예제 코드 참조)

  var oAllPs = document.querySelectorAll("div.detail");
var oLimit = document.querySelector("#second");
var oAllPs = document.querySelectorAll("div, span");



Tab Isolation and Concurrency

IE에서는 브라우저 프레임이 탭들과 "loosely coupled" 되었다고 합니다. 따라서  안전모드가 아니라고 해서 IE7에서 새창을 띄우던 것이 없어졌고, 하나의 탭에서 문제가 되었다고 해서 브라우져 전체가 죽어버리는 어처구니 없는 일은 없어졌다고 합니다. IE8에서 가장 좋아진 부분중에 하나인 것 같습니다.






결론적으로 보면..
IE6에서 IE7으로의 변화처럼 대대적인 변화는 없지만
내부적인 성능 개선과 상호 운영성(Interoperability), 웹 개발 지원이 많이 이루어진다고 볼 수 있겠습니다.

갑자기 Mix08 키노트에서 Web Developer을 연신 외쳐대던 Steve Ballmer 아저씨가 떠오르는 군요.


Posted by U_Seung