Internet Explorer 8과 Adaptive Zoom

  • Article

  

 

 

안녕하세요. 레이아웃 팀의 프로그램 매니저 Saloni Mira Rai 입니다. 이 문서에서는 Internet Explorer 8의 줌 기능 변화에 대해 설명합니다.

줌을 사용하면 웹페이지의 보기를 확대 또는 축소하여, 사용자가 읽기 쉬운 크기로 변경할 수 있습니다. 이 기능은 원래의 페이지 레이아웃을 유지한 채로 컨텐츠의 크기를 변경할 수 있으므로, 매우 큰 디스플레이와 매우 작은 디스플레이의 경우에 특히 편리합니다. IE8 의 줌 기능 (이 기능은 Internet Explorer 7 에 처음으로 탑재되었습니다 )은 보다 좋은 품질로, 예측하기 쉽고, 일관된 줌 기능을 제공하여 기존 기능을 향상시키는 것에 중점을 두었습니다.

여러분이 기대할 수 있는 것

줌 기능을 사용하면, IE8 는 텍스트와 이미지의 크기를 변경하고 페이지 요소들을 재조정(reflow)해서 읽기 쉽게 합니다. 수평 스크롤바는 거의 표시되지 않습니다. 말로 설명하는 것보다는 실제로 보는 것이 더 쉽기 때문에 다음 예를 같이 보도록 하지요.

줌 기능을 사용하여, IE7 에서 IE 블로그를 150% 로 확대하면, 다음과 같이 됩니다.
텍스트가 화면에 완전히 다 보여지지 않고, 수평 스크롤바가 화면의 맨 아래 표시되는 것에 주목해 주세요.

IE7 Zoom

다음의 화면은 같은 페이지를 IE8 Beta 1 의 줌 기능을 사용하여 150% 로 확대한 것입니다.

IE8 Zoom

텍스트가 잘려도 전체가 표시되어 수평 스크롤바가  필요 없습니다.

좀 더 깊이 있게 파고들고 싶다면

메모: 이 부분은 Adaptive Zoom 의 내부 동작 원리 및 Adaptive Zoom 의 내부 동작이 사이트의 설계에게 주는 영향에 대해 관심이 있는 독자를 대상으로 합니다.

Internet Explorer 8 의 Adaptive Zoom 은 레이아웃 전에 각 요소들의 크기를 변경한다는 개념에 기본을 두고 있습니다. 이것은 Internet Explorer 7 의 줌 동작과는 크게 다릅니다. IE7 의 줌 동작은 웹 페이지를 "확대해서 보는"  것과 비슷하여, 요소들은 레이아웃 후에 크기가 변경되어 다시 화면에 드로잉 됩니다.

이 중요한 변화에 따라, 수평 스크롤바는 크기가 변경된 컨텐츠의 고정폭이 뷰포트의 폭 보다 큰 경우만 표시됩니다. 이는 줌 되지 않은 웹 페이지에서 표준 레이아웃의 크기를 변경하는 것과 동일합니다.

또, 이 변화에 의해 텍스트 배치도 영향을 받습니다. IE7 줌 기능에서는 줌 배율이 증가 또는 감소해도 행의 길이와 줄 바꿈 위치는 다시 계산되지 않았습니다. 따라서 텍스트 행이 너무 짧아져서 너무 많은 여백이 생기거나 너무 길어 져서 텍스트가 화면에서 초과하면, 수평 스크롤바가 필요했습니다.  IE8에서는 텍스트가 화면에 표시되기 전에 사용할 수 있는 공간을 기준으로 행의 길이가 다시 계산되어 새로운 행의 길이를 고려한 줄 바꿈이 삽입됩니다.

또, 공통의 페이지 요소와 속성이 줌에 어떻게 적응되었는지 이해하는 것도 중요합니다.

  • 폰트와 텍스트: 문자(glyph) 자체의 크기는 변경되지 않습니다. 정확하게는 폰트 크기가 변경되어 적절한 문자가 사용됩니다. 주의해야 할 중요한 점은 설계상, 폰트가 비례적으로 커지지 않는 것입니다. 예를 들어, 12pt 의 텍스트가 110% 에 확대되는 경우, 최종적인 폰트크기는 13.2pt 로 계산되지만, 이 폰트 크기는 존재하지 않기 때문에 가장 이 숫자 값에 가까운 사용 가능한 크기 (13pt)로 조정될 수 있습니다.
  • 고정, 자동, 상대 크기:   치수의 확대 축소는 IE8 의 Adaptive Zoom 에서 가장 중요한 개선점입니다. 절대 단위 (예 : in , cm , mm 등 ) 또는 장치와 폰트에 의존하는 상대 단위 (예 : px , ex , em 등 )를 사용하여 지정되는 치수는 줌 레벨에 따라 확대 축소됩니다. 이 때문에 200% 의 경우는 100px 가 200px 가 되어, 20pt 는 40pt 가 됩니다.
    내용에 의존하는 치수, 즉, 퍼센트와 자동은 레이아웃 상의 계산대로 확대 축소되지 않습니다. 이 때문에 200% 에서, 뷰포트 폭의 50%가 100% 가 되지는 않습니다. IE7 의 줌 기능과의 커다란 차이점 입니다.
  • 위치 지정 : 위치가 지정된 요소는 유동적인 요소와 같이 커지거나 작아집니다. 그러나, 새로운 위치는 속성 집합에 의해서 결정되어 offset이 사용됩니다.
    절대 배포 요소는 왼쪽으로 100px offset 하면, 줌인되었을 때에 오른쪽으로 이동됩니다. 이 경우, 화면에서 벗어날 가능성이 있습니다.
    비슷한 원리로  float 요소들은 컨테이너에 대해서 CSS 의 일반적인 규칙에 따라 위치가 지정됩니다. 컨테이너의 폭이 줌에 의해서 변경되면, float 요소들의 위치가 변경됩니다. 인접하는 float 요소들의 줌은 정확히 윈도우의 크기 변경과 같습니다. 뷰포트의 폭이 float 요소들에 대해서 충분히 크지 않은 경우, 마크업의 마지막 float 요소는 다음 행으로 내려갑니다.
  • DHTML 속성: IE7 의 줌 기능에서는 일부 속성은 물리적으로(예 : 마우스 좌표) 처리되고 또 어떤 속성은 논리적으로(offset) 처리되었습니다. 이 구현에 대해서 기본적으로 웹 개발자가 인식할 필요가 있었는데, 그렇지 않은 경우 사용하고 있는 속성을 기준으로 줌 상태를 수동으로 계산해야 했습니다. IE8 의 줌 기능에서는 모든 DHTML 속성이 논리적이라고 말할 수 있습니다. 이로 인해 플라이아웃 메뉴(역자주 : 플라이아웃 메뉴 대해서는 여기를 참고)나 "드래그앤드롭" 과 같은 주요 시나리오가 가능하게 됩니다. screen.width 및 screen.height 의 부정확한 확대 축소 등 알려진 문제가 몇 가지 있지만, Beta 1에서는 해결되지 않았습니다. 이러한 문제는 향후 출시에서 수정될 예정입니다.

앞에서 얘기 한 시나리오의 세부 사항 및, 오버플로우, 테이블 등 그 외의 시나리오에 대해는 Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview (영어)를 참고해 주세요.

Internet Explorer 8 의 줌 기능에 대한 준비

웹 개발자는 Adaptive Zoom 용으로 특별한 코드를 쓸 필요는 없습니다. 또, 모든 속성은 논리적이고, 확대 축소는 완전하게 내부에서 동작하기 때문에, 개발자는 줌 기능에 대해서 주의를 기울이지 않아도 됩니다

줌을 사용하고, 사이트에서의 사용자 경험을 개선하는 것에 관심이 있는 경우는 서로 다른 확대 축소 요소, 해상도 및 윈도우 크기에 따른 테스트를 권장합니다. 이것을 실시할 때, 우선 다음 내용을 고려해 주세요.

  • 어느 시점에서 수평 스크롤바가 나타나는지 여부. 사용자가 한 줄의 텍스트를 읽기 위해 스크롤을 해야 할까?
  • 고정된 크기와 위치 때문에 내용이 화면에서 사라져 버리지는 않는지?
  • 일부 요소의 overflow:hidden 값이 컨텐츠의 접근성을 떨어뜨리지는 않는지?
  • 플라이아웃 메뉴가 실제로 사용할 수 있는 화면의 영역에서 적용될 수 있는지? 또는 항목들이 화면에서 벗어나서, 사용자가 접근하기 어렵게 하지는 않는지?

여기까지 읽어 주셔 감사합니다. 여러분의 피드백을 기다리고 있습니다.

Saloni Mira Rai
프로그램 매니저

 

* 이 글은 Internet Explorer 개발 팀 블로그 (영어)의 번역 문서입니다. 이 글에 포함된 정보는 Internet Explorer 개발 팀 블로그 (영어)가 생성된 시점의 내용으로, 제품의 사양이나 기능이 보장되는 것은 아닙니다. 이 글에 포함된 정보의 이용은 사용 조건을 참조해 주세요. 또 이 글 게재 시점에서 Internet Explorer 개발 팀 블로그 (영어)의 내용이 변경 될 수 도 있습니다. 최신 정보는 Internet Explorer 개발 팀 블로그 (영어)를 참조하십시오. 

영문 원본 :Internet Explorer 8 and Adaptive Zoom (영어)

업데이트 일자 : 2008 년 3 월 25 일