메트로 스타일 브라우징: 하나의 엔진으로 두 가지 경험을 누리는 뛰어난 기능

Windows 8 빌드

Windows 기술팀 내부 모습

메트로 스타일 브라우징: 하나의 엔진으로 두 가지 경험을 누리는 뛰어난 기능

  • Comments 0

Windows 8의 새로운 기회를 모색하는 큰 행사에서 개발자들의 따뜻한 환대를 받아 대단히 기쁩니다. 이제 B8에 대한 관심은 개발자 프리뷰와 함께 이 빌드의 기능과 향후 발전 방향으로 옮겨가고 있습니다. 블로그에서 참여하는 분들이라면 빌드를 설치하여 사용해 보시기 바랍니다. 아직은 초기 단계이고 개발자에 중점을 두고 있지만 사용해 보면 상당히 흥미로울 것입니다. 저도 컨퍼런스에서 모든 게시물을 삼성 프리뷰 태블릿을 사용해 작성하고 있습니다!

메트로 스타일의 브라우징과 진정한 크롬리스(Chromeless) 브라우징 경험을 실현하기 위한 몇 가지 시도에 대해 알아보려고 합니다. 호평을 받고 있는 IE의 안전 기능과 함께 최고의 성능과 신뢰성을 자랑하는 HTML5와 표준 지원에 역점을 두었습니다. 또한 똑같은 HTML5 기술을 사용할 수 있도록 데스크톱 경험을 발전시켜 제공하는 노력도 계속하고 있습니다. 이것이 바로 IE10에서 어떤 장점도 포기하지 않는 브라우징 경험을 제공할 수 있는 배경입니다. Dean이 작성한 이 글에서는 Windows 8 개발자 프리뷰에 포함된 IE10 플랫폼 프리뷰 3을 설명합니다. - Steven

단지 터치 장치를 지원하는 정도에 그치지 않고, 브라우저 경험의 수준을 한 차원 높이기 위해서는 해야 할 일이 많이 있습니다. Windows 8을 실행하는 어떤 시스템에서도 최고의 브라우징을 경험할 수 있도록 저희는 웹 브라우저 경험과 그 기반이 되는 아키텍처를 새롭게 상상했습니다.

Windows 8에서는 먼저 두 가지 경험을 가능하게 하는 하나의 강력한 HTML5 브라우징 엔진부터 접근해 갔습니다. 웹 표준, 하드웨어 가속 성능, 보안, 개인정보보호 등을 강력하게 지원하는 단일 엔진을 기반으로 두 가지 경험을 구현했습니다. 그것은 바로, 새로운 메트로 스타일 경험과, 탭 방식의 기존 데스크톱 브라우저에서 '크롬'을 최소화한 최신 브라우저 경험입니다.

그 결과, 하나의 장치에서 몰입감을 주는 태블릿과 유연한 랩톱 역할을 하는 두 가지 방식을 자유롭게 이용할 수 있습니다. 물론, 강력한 다중 모니터 데스크톱에서도 두 가지 방식을 마음껏 즐길 수 있습니다.

Windows 8에서 메트로 스타일 브라우저를 사용하면 터치에 중점을 둔 HTML5 웹 사이트의 놀라운 몰입감을 경험하게 됩니다. 기존의 창과 탭 관리 방식을 선호하는 사용자도 데스크톱의 IE에서 더욱 개선된 기능을 이용할 수 있습니다. 두 방식은 모두 동일한 IE10 엔진에서 실행됩니다.

완전히 새로운 메트로 스타일 경험을 구현하는 과정에서 흥미로운 사실을 알게 되었는데, 대형 화면, 데스크톱 컴퓨터, 마우스와 키보드를 사용하더라도 메트로 스타일 브라우저가 더 효율적이라는 것입니다. 즉, 키보드와 마우스나 트랙패드가 있는 경우에도 터치 중심의 브라우저가 효율적으로 작동합니다. 휴대전화로 브라우징을 많이 이용하는 분이라면, '크롬'이 거의 없고 시각적 탭 관리가 더 많이 사용되는 상황에서 주로 손가락을 이용하고 몰입도가 뛰어나 '데스크톱' 같지 않은 브라우징 경험에 이미 익숙해 있을 것입니다. 아마도 데스크톱보다는 Internet Explorer 10의 새로운 메트로 스타일 경험을 더 선호하실 것입니다.

중요 알림: 현재 Windows 개발자 프리뷰에 포함된 메트로 스타일 브라우저는 소비자용이 아니라 개발자용입니다. 소비자에게 최적화된 경험을 실현하기 위해 개발자 커뮤니티의 역할이 중요합니다. 예를 들어, 일부 사이트의 경우 IE10에서 제대로 작동하지 않는 오래된 구식 라이브러리를 업데이트하거나, 다른 장치에서 플러그인 없이 실행되는 사이트가 메트로 스타일 브라우저에서도 같은 방식으로 작동하도록 해야 합니다.

하나의 엔진으로 누리는 두 가지 경험

데스크톱 IE와 메트로 스타일 IE는 모두 HTML5를 완벽하게 지원해야 하기 때문에 두 방식을 보다 강력하게 뒷받침할 수 있는 IE10 엔진 아키텍처를 채택했습니다. 두 가지 경험은 브라우징 내역, 입력한 주소, 설정 등을 공유합니다. 이 공통 엔진은 현재 이용되는 사이트와 메트로 스타일 앱에서 모두 빠르고 안전하며 강력한 경험을 일관되게 제공하고 있습니다.

  • 성능. 메트로 스타일 IE는 데스크톱의 IE와 동일한 수준의 업계 최고 성능을 제공합니다. 여기에는 그래픽, 비디오, 오디오에 대한 완벽한 하드웨어 가속, 컴파일된 JavaScript, 터치 응답 속도를 높이기 위한 새로운 레이아웃과 서식(formatting) 엔진 최적화 등이 포함됩니다.
  • 안전성. 메트로 스타일 IE는 데스크톱의 IE와 동일한 수준의 업계 최고 보안, 개인정보보호, 신뢰성 기능을 제공합니다. 예를 들면 SmartScreen, XSS 필터링, InPrivate 브라우징 등이 있습니다.
  • HTML5. 메트로 스타일 IE는 데스크톱의 IE와 동일하게 풍부한 HTML5 웹 프로그래밍 모델을 지원합니다. 앞서 IE10 플랫폼 프리뷰를 통해 공개된 새로운 기능들과 함께 빌드(BUILD)에서는 CSS Text Shadow, CSS 3D Transform, IndexedDB, Web Sockets, HTML5 File APIs, HTML5 History, hyphenation, CSS Transition 및 Animation, HTML5 Application Cache에 대한 새로운 지원이 소개됩니다.

IE 블로그에서 데스크톱 IE를 비롯하여 기반이 되는 Trident 브라우저 엔진과 Chakra JavaScript 엔진에 대한 기술적 세부 정보를 확인할 수 있습니다.

메트로 스타일 앱으로 새롭게 상상한 브라우저

메트로 스타일 앱 방식으로 브라우저를 새롭게 상상하면서 웹의 발전 방향을 완전히 새로운 시각에서 보게 되었습니다.

예를 들어, 메트로 스타일은 몰입감이 뛰어납니다. 메트로 스타일 IE의 웹 페이지에는 시각적으로 집중력을 분산시키는 요소가 전혀 없습니다. 표준 제스처로 원하는 기능에 접근할 수 있어 다른 방식처럼 웹 사용 시 집중도가 떨어지지 않습니다. 다른 메트로 스타일 앱에서와 마찬가지로 메트로 스타일 IE에서도 'Charm'을 사용하여 검색과 공유를 할 수 있습니다. 예를 들어 장치 Charm을 사용하여 웹 페이지에 있는 비디오를 외부 장치에서 재생하거나 영사할 수 있습니다. 다른 메트로 스타일 앱과 IE를 나란히 '붙여놓을(Snap)' 수도 있습니다. 웹 사이트와 메트로 스타일 앱은 서로 상호 작용하도록 제작되었기 때문에 함께 사용하기가 쉽습니다.

새로운 메트로 스타일은 단순히 시각적 측면이 돋보이는 디자인 이상의 가치를 지닙니다. 예를 들어, 입력을 최소화하여 중요한 사이트로 바로 이동할 수 있습니다. 새 탭을 열거나 주소 표시줄을 꺼내면 자주 사용하는 웹 사이트와 고정된 웹 사이트가 터치하기 편리한 목록으로 나타납니다.

[Frequent](자주 사용하는 사이트)와 [Pinned](고정된 사이트) 제목 아래에 여러 개의 타일이 있고 그 아래에 화면 키보드와 웹 주소 표시줄이 표시된 그림
메트로 스타일 브라우저에서는 자주 사용하는 웹 사이트와 고정된 웹 사이트가 터치하기 편리한 시각적 목록으로 표시됩니다.

주소 표시줄에 내용을 입력하면 이 목록이 필터링됩니다. 열린 탭들을 꺼내면 주소 표시줄을 즉시 사용할 수 있어 아직 열리지 않은 사이트로 쉽게 이동할 수 있습니다.

BUILD 웹 사이트에서 연 메트로 스타일 브라우저를 보여주는 그림. 웹 페이지 위에 몇 개의 탭이 열려 있고 화면 하단에 주소 표시줄이 있습니다.
메트로 스타일 브라우저에서 열린 탭과 주소 표시줄

맞춤법 검사와 자동 완성 기능이 실행되어 사이트를 사용할 때 입력할 문자 수가 줄어듭니다. InPrivate과 추적 방지를 사용한 브라우징도 가능합니다.

원하는 웹 사이트로 쉽게 이동하여 간편하게 사용할 수 있도록, 메트로 스타일 앱을 고정하는 방식과 동일하게 웹 사이트를 새로운 Windows 8 시작 화면에 고정시킬 수 있습니다.

시작 화면에 사이트 고정
시작 화면에 사이트 고정

IE10은 체크박스나 라디오 버튼과 같은 컨트롤을 더 크게 표시하므로 터치하기가 매우 쉽습니다. 개발자는 CSS와 같은 표준 웹 패턴을 사용해 컨트롤에 스타일을 지정하는 방법으로 웹 페이지에서 더 편리하게 터치하도록 만들 수 있습니다. 아래 예는 사용자 지정 배경 이미지가 포함된 HTML5 범위 입력 유형 컨트롤입니다.

IE10, Chrome 및 Mozilla Firefox에서 사용자 지정 배경 이미지가 포함된 HTML5 컨트롤
IE10(상단 2개 이미지), Chrome(하단 왼쪽) 및 Mozilla Firefox(하단 오른쪽)에서 사용자 지정 배경
이미지가 포함된 HTML5 컨트롤

메트로 스타일 IE는 터치한 채로 화면을 이동하는 동작과 손가락으로 확대/축소하는 기능을 지원합니다. HTML5 엔진이 완벽한 하드웨어 가속을 활용하기 때문에 페이지가 시스템의 나머지 부분과 같이 빠르고 유연하게 움직입니다. 스크롤하거나 화면을 이동하는 경우 이런 성능을 확인할 수 있습니다.

아래 데모에서 브라우징 경험의 기타 요소와 뛰어난 성능을 확인해 보시기 바랍니다.


다른 미디어 플레이어로 보려면 이 비디오를 다운로드하십시오.
고화질 MP4 | 고화질 MP4

메트로 스타일 IE: 새로운 전환

새로운 브라우저 경험을 통해 웹을 한 차원 더 높이 끌어올릴 수 있는 새로운 기회를 맞이하고 있습니다. 새로운 브라우저 경험을 완벽하게 활용하는 일은 사이트 개발자의 몫이며 터치 기능은 매우 중요하고 몰입도가 뛰어난 경험을 안겨줍니다. 오늘날 사람들이 웹에서 많은 시간을 보내는 만큼 새로운 기회도 무궁무진합니다.

현재 Windows 개발자 프리뷰는 소비자용이 아니라 개발자용입니다. 예를 들면 다른 장치에서 이미 플러그인 없이 실행되는 사이트가 IE10에서도 같은 방식으로 작동하도록 해야 합니다. 마찬가지로, 일부 사이트의 경우 IE10에서 제대로 작동하지 않는 오래된 구식 라이브러리를 업데이트해야 할 수도 있습니다. 동시에, Windows가 출시될 때마다 사람들이 기대하는 호환성을 유지하기 위해 현재의 데스크톱 스타일 브라우저를 포함하는 것도 중요합니다.

'두 개의 브라우저'에 대해 비판하는 사람들도 있겠지만 두 개의 다른 '스킨'을 사용하는 단 하나의 브라우징 엔진이 존재하는 것입니다. 많은 사람들의 삶에서 데스크톱 브라우저가 계속 중요한 역할을 하겠지만 시간이 지나면서 메트로 스타일 경험은 점차 주된 브라우징 방식으로 자리잡을 것입니다. Windows 8에서는 한 스타일의 브라우저를 기본값으로 지정하고 다른 브라우저로 자유롭게 이동하거나, 원하는 다른 브라우저를 선택하여 사용할 수도 있습니다.

또한 두 가지 브라우저 스타일의 다른 측면들이 과연 필요한 것인지에 대해 논쟁하는 사람도 있을 것입니다. 메트로 스타일에 계속 머물고 싶다면 메트로 스타일을 선택하면 됩니다. 데스크톱을 전혀 보지 않는 사용자의 경우, 명시적으로 실행하도록 선택하지 않는다면 Windows는 코드를 로드하지 않습니다. 하지만 데스크톱 경험에서 얻을 수 있는 장점인 정밀한 제어, 강력한 창 작업과 파일 관리, 플러그인과의 호환성 기능이 유용하다고 생각한다면, 물론 해당 기능도 손쉽게 사용할 수 있습니다. 개발 팀은 장치 하나만 휴대하더라도 필요한 작업을 효율적으로 완벽하게 처리할 수 있도록 아키텍처와 디자인 측면에서 많은 고민을 해왔습니다. 이제 자유롭고 편리하게 브라우징을 즐기시기 바랍니다.

- Dean Hachamovitch

  • Loading...
Leave a Comment
  • Please add 8 and 2 and type the answer here:
  • Post