IEBlog 한국어

2013년 5월 Internet Explorer 업데이트

2013-05-15T20:15:45Z

Microsoft 보안 공지 MS13-037 - 긴급

이 보안 업데이트는 Internet Explorer에서 비공개적으로 보고된 취약점 11건을 해결합니다. 가장 심각한 취약점으로는 사용자가 Internet Explorer를 사용하여 특수 조작된 웹 페이지를 열어 볼 경우 원격 코드가 실행될 수 있다는 것입니다. 이렇게 심각한 취약점을 악용해 시스템에 침투한 해커는 현재 사용자와 동일한 권한을 얻게 됩니다. 시스템에 대한 사용자 권한이 비교적 적게 구성된 계정의 사용자는 관리자 권한으로 작업하는 사용자에 비해 영향을 덜 받을 수 있습니다.

이 보안 업데이트의 심각도는 Windows 클라이언트의 Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9 및 Internet Explorer 10에 대해서는 '긴급' 수준이며, Windows 서버의 Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9 및 Internet Explorer 10에 대해서는 '보통' 수준입니다. 자세한 내용은 전체 공지를 참조하십시오.

권장 사항. 대부분의 사용자에게는 자동 업데이트가 설정되어 있으므로 별도의 작업 없이도 이 보안 업데이트가 자동으로 다운로드되어 설치됩니다. 자동 업데이트를 설정하지 않은 사용자는 업데이트가 있는지 확인한 후 수동으로 설치해야 합니다. 자동 업데이트의 특정 구성 옵션에 대한 자세한 내용은 Microsoft 기술 자료 문서 294871을 참조하십시오.

관리자 및 기업 설치의 경우 또는 이 보안 업데이트를 수동으로 설치하려는 최종 사용자의 경우에는 업데이트 관리 소프트웨어를 사용하거나 Microsoft 업데이트 서비스를 통해 업데이트를 확인하고 즉시 적용하는 것이 좋습니다.

Microsoft 보안 공지 MS13-038 – 긴급

이 보안 업데이트는 Internet Explorer에서 공개된 취약점 1건을 해결합니다. 이 취약점은 사용자가 Internet Explorer를 사용하여 특수 조작된 웹 페이지를 볼 경우 원격 코드가 실행될 수 있다는 것입니다. 이 취약점을 성공적으로 악용한 공격자는 현재 사용자와 동일한 권한을 얻을 수 있습니다. 시스템에 대한 사용자 권한이 비교적 적게 구성된 계정의 사용자는 관리자 권한으로 작업하는 사용자에 비해 영향을 덜 받을 수 있습니다.

이 보안 업데이트의 심각도는 Windows 클라이언트의 Internet Explorer 8에 대해 '긴급'이고, Windows 서버의 Internet Explorer 8에 대해 '보통'입니다. Internet Explorer 9에 대해서는 심각도 등급이 없습니다. 자세한 내용은 전체 공지를 참조하십시오.

이 보안 업데이트는 Microsoft 보안 공지 2847140에 처음으로 소개된 취약점도 해결해 줍니다.

권장 사항. 대부분의 사용자에게는 자동 업데이트가 설정되어 있으므로 별도의 작업 없이도 이 보안 업데이트가 자동으로 다운로드되어 설치됩니다. 자동 업데이트를 설정하지 않은 사용자는 업데이트가 있는지 확인한 후 수동으로 설치해야 합니다. 자동 업데이트의 특정 구성 옵션에 대한 자세한 내용은 Microsoft 기술 자료 문서 294871을 참조하십시오.

Microsoft 보안 권고(2755801)

오늘 Microsoft는 지원되는 모든 Windows 8 및 Windows Server 2012 버전의 Internet Explorer 10에 Adobe Flash Player 업데이트도 발표했습니다. 이 취약성에 대한 세부 내용은 Adobe 보안 공지 APSB13-14에 기록되어 있습니다.

이 업데이트는 Internet Explorer 10에 포함된, 영향을 받는 Adobe Flash 라이브러리를 업데이트하여 Adobe Flash Player의 취약점을 해결합니다. 자세한 내용은 공지를 참조하십시오.

대부분의 사용자는 자동 업데이트를 사용하고 있으므로 별도의 작업 없이도 이 업데이트가 자동으로 다운로드되어 설치됩니다. 자동 업데이트를 설정하지 않은 사용자는 업데이트가 있는지 확인한 후 수동으로 설치해야 합니다. 자동 업데이트의 특정 구성 옵션에 대한 자세한 내용은 Microsoft 기술 자료 문서 294871을 참조하십시오.

- Internet Explorer 프로그램 관리자, Ceri Gallacher

W3C, 포인터 이벤트를 권장 기술 후보로 변경

2013-05-14T19:23:58Z

오늘 W3C에서는 터치, 펜, 마우스 및 기타 장치의 입력을 처리하는 표준적이며 상호 운용 가능한 방안을 구축할 때 중요한 단계인 포인터 이벤트를 권장 기술 후보로 발표했습니다. 공개 작업 초안을 제출한 지 불과 5개월 만에 권장 기술 후보가 될 수 있었던 이유는 Microsoft, Google, Mozilla, Opera, Nokia, jQuery 등의 업체들이 웹 사이트에서 새로운 상호 대화형 하드웨어를 활용하고자 효율적으로 협력했기 때문입니다.

권장 기술 후보에 들었다는 것은 W3C에서 이 규격을 면밀히 검토했으며 이 작업 그룹의 기술적 요건을 충족한다는 것을 의미합니다. 또한 작업 그룹에서 알 수 있도록 추가적인 구현 단계가 필요하다는 이야기입니다. 포인터 이벤트 작업 그룹은 현재 규격 구현 평가 테스트도 활발하게 개발하고 있습니다. Microsoft 후원하에 최근 개최되었던 진화하는 웹 테스트에서 선보인 20여 개의 신규 테스트 사례는 이러한 노력에 박차를 가하는 원동력이 되었습니다.

웹 검색을 할 때 터치, 마우스 및 키보드 등의 다양한 장비를 사용하는 소비자가 점점 늘어나고 있습니다. 개발자는 포인터 이벤트를 활용하여 다양한 유형의 입력에 반응할 수 있는 사이트의 통합 모델을 작성할 수 있습니다. 웹 개발자는 Hand.JS와 같은 폴리필(Polyfill)을 활용하는 IE 10 등의 최신 브라우저에서 포인터 이벤트를 활용할 수 있습니다. Microsoft에서는 또한 포인터 이벤트에 대해서 더 많은 것을 알 수 있고 시험해 볼 수 있는 신규 포털도 운영하고 있습니다. 포인터 이벤트는 웹에서 빠르고 유연한 터치를 구현할 수 있는 여러 방법 중 하나입니다.

프로그램 관리자

Jacob Rossi

진화하는 웹 테스트 - 2013년 시애틀

2013-04-30T18:37:30Z

4월 12일~13일, Microsoft는 상호 운용성 테스트 사례를 작성하여 웹을 발전시키기 위해 진화하는 웹 테스트 이벤트를 개최했습니다. Adobe, AT&T, Blackberry, Mozilla 및 기타 많은 지역의 기업에서 수십 명의 참가자가 웹 표준 테스트, CSS 및 HTML 테스트 작성 방법, 테스트 도구 모음 관리에 사용할 수 있는 도구에 대해 배우기 위해 시애틀 지사에서 열린 이 이벤트에 자발적으로 참가했습니다. 캐나다를 포함해 전국 각지에서 모인 참가자들은 총 514개의 새로운 테스트에 기여하는 기록을 세웠습니다.

테스트하는 이유

앞으로도 여러 브라우저의 HTML 및 CSS 표준 준수에 대한 품질과 정확성에는 많은 차이가 있을 것입니다. W3C에서는 W3C 웹 사양을 권고 후보안에서 정식 권고안으로 전환하기 위해 사양의 모든 규범적 요구 사항에 대한 독립된 테스트를 요구하고 있습니다. 이러한 테스트는 적어도 둘 이상의 브라우저가 각 규범적 주장을 완벽하게 지원하는지 확인하는 데 사용됩니다. 아시겠지만 이 모든 테스트를 작성하는 것은 고된 작업입니다. CSS3 모듈, WebApp, 미디어 확장 등은 말할 것도 없고 HTML5만 해도 100,000여 개의 테스트를 통과해야 합니다. Microsoft는 HTML, CSS 및 SVG에 대한 수천 개의 테스트 사례를 제출했지만 여전히 더 많은 테스트가 필요합니다. Microsoft에서 제출한 테스트 사례는 W3C와 Internet Explorer 테스트 센터에서 확인할 수 있습니다. 이것은 일관성 있고 예측 가능한 테스트를 보장함으로써 모든 브라우저를 지원하며 궁극적으로는 전체 웹 개발자 커뮤니티에 도움을 주게 됩니다. 각 브라우저에서 동일 마크업에 대한 지원이 강화되면 누구나 HTML5와 CSS3의 기대 성능을 실감할 수 있을 것입니다.

몇 년 전 표준 커뮤니티의 회원 몇 명이 새로운 테스트 작성을 지원하기 위해 크라우드 소싱을 활용하기 시작한 것이 지금의 진화하는 웹 테스트 이벤트로 발전했습니다.

Microsoft, Adobe, Google, Mozilla 등의 주요 기업이 후원하는 웹 커뮤니티에는 프랑스, 중국, 오스트레일리아 및 미국을 비롯한 세계 각지의 로컬 테스트 작성자들이 참여합니다. 각 참가자들은 수백 개의 테스트를 생성할 뿐 아니라 웹 플랫폼을 구성하는 사양에 참여하고 웹 개발자들에게 이러한 사양을 교육합니다.

시애틀 이벤트 후기

Adobe에서 일하고 있는 우리 친구들이 예전 이벤트 운영에 대한 경험을 바탕으로 성공적인 이벤트를 개최하는 데 많은 도움을 주었습니다. 시애틀에서는 금요일 밤 "해커톤"이 시작되었는데, Mozilla의 fantasai(Elika Etemad), Adobe의 Rebecca Hauck, Microsoft의 Kris Krueger가 참신하고 유익한 프레젠테이션을 통해 테스트가 필요한 이유, 사용 가능한 테스트 유형, 테스트를 생성하는 방법 등에 대해 설명했습니다. 간략하게 요약하면 다음과 같습니다.

독립 실행형 테스트 - 일반적으로 시각적 확인에 의존합니다. 실패 조건이 발생한 경우 빨간색 콘텐츠가 표시됩니다.

참조 테스트 - 테스트를 현재 테스트 중인 기능에 대한 종속성�� 없는 시각적 참조와 비교합니다. 이 테스트에는 비교해야 하는 참조 테스트에 대한 링크가 포함되어야 합니다. 예를 들어 DIV가 배경색을 올바르게 렌더링하는지 테스트하려는 경우 TABLE을 사용하여 참조 테스트를 작성할 수 있습니다.

개체 모델 테스트 - JavaScript 테스트 도구를 통해 개체 모델이 정적 스타일 시트에 지정된 내용을 반영하는지 확인합니다. 예를 들면, 이 CSS 미디어 쿼리 테스트가 이 유형에 해당합니다.

각 프레젠테이션 후에는 세션 참가자들이 각자 관심 있는 API 또는 사양에 대해 자유롭게 테스트를 작성할 수 있음에도 특정 주제(CSS 플렉스박스, 포인터 이벤트, CSS 변환, CSS OM, 배경 및 테두리, 제외 또는 HTML5)를 선택하려는 이유가 무엇인지에 대한 토요일 세션 테스트 리더들의 2분 발언이 이어졌습니다.

다음날 아침 식사 후 참가자들은 세션 책임자들이 있는 세 개의 방에 나뉘어 입장했습니다. 각 구역에는 전날 저녁의 발표자 외에도 Arron Eicholz(Microsoft, CSS), Jacob Rossi(Microsoft, Pointer Events), Sylvain Galineau(Adobe[이전 Microsoft 직원], CSS), Alan Stearns(Adobe, CSS), Dave Methvin(jQuery 사장, HTML) 등의 전문가가 도움을 주기 위해 자리해 있었습니다.

세션 책임자들은 모든 참가자에게 테스트가 필요한 경우를 확인하는 방법과 검증하려는 특정 주장을 테스트한 코드를 작성하는 방법에 대해 설명했습니다. 참가자들은 혼자서 작업하거나 소그룹으로 작업하거나 전문가의 1:1 도움을 받을 수 있었습니다.

모든 설명과 작업이 끝나고 참가자들은 514개의 테스트를 제출했습니다. 이는 파리 이벤트 참가자들이 세운 기록을 뛰어넘고 향후 이벤트 참가자들이 경신해야 할 새로운 기록이었습니다. 간단한 축하연을 가진 후 그날 밤을 마무리하는 자리에서 워싱턴 대학의 학생들이 Surface Pro에 추첨되는 행운을 안았습니다.

도움을 제공하는 방법

IE10에서 우리는 CSS, HTML, SVG 및 DOM에 대한 광범위한 새로운 표준 기능 목록을 추가로 지원하게 되었습니다. 이러한 새 기능에 대한 테스트 사례 중 일부를 IE 테스트 센터에 게시했습니다. 앞으로도 더 많은 테스트 사례를 제출할 예정이지만 올바른 테스트를 작성하고 이러한 사양을 발전시켜 나가려면 커뮤니티의 도움이 계속 필요합니다.

우리는 혁신적인 웹 상호 운용성 향상을 위한 커뮤니티의 일원으로 활동하게 된 것을 기쁘게 생각하고 있습니다. Microsoft는 최근 Webplatform.org에 JavaScript 관련 자료를 기부하고, modern.ie를 통해 브라우저 간 테스트 간소화를 위해 지속적으로 노력하는 등 웹 상호 운용성 향상을 위한 여러 가지 이니셔티브를 지원하고 있습니다. 웹 발전에 도움을 주고 싶다면 다음번에 개최되는 진화하는 웹 테스트 이벤트에 꼭 참석해 주시기 바랍니다. 그 동안 온라인으로 테스트 기여 방법을 살펴보거나 기존 테스트를 검토할 수 있습니다. 향후 이벤트에 대한 소식을 듣고 진화하는 웹 테스트 커뮤니티와 활발히 교류하려면 W3C 메일 그룹(public-testtwf)에 가입하십시오. 테스트를 작성한다는 것이 매우 힘든 작업일 것 같지만, 웹에 대한 지식과 열정만 있다면 WebPlatform Docs에 참여하여 웹 문서화에 기여할 수 있습니다.

자세한 정보 및 업데이트를 원하시면 Twitter에서 Internet Explorer 개발자 관계 핸들(@IEDevChat)과 이 이니셔티브의 핸들(@testthewebfwd) 그리고 특히 #testtwf를 팔로우하십시오.

향후 이벤트에 대한 소식도 계속 알려 드리겠습니다. 곧 만나게 되기를 바랍니다.

- Internet Explorer - John Jansen, Kris Krueger, Arron Eicholz, Jacob Rossi

전문가 수준의 온라인 동영상 제작: 상호 운용성 있는 캡션 작업의 새로운 표준

2013-04-30T18:03:28Z

웹에서의 동영상 캡션 작업은 눈에 띄게 발전하고 있으며 전문가 수준의 온라인 동영상 제작 및 재생의 또 다른 초석으로 자리를 잡아가고 있습니다. TV 방송 수준의 동영상 효과를 원한다면 W3C TTWG(Timed Text Working Group)에서 최근에 게시한 프로필 표준의 한 부분을 차지하는 캡션 기능, 즉 단어 강조 표시, 캡션과 음성의 정확한 동기화, 자유로운 캡션 배치, 캡션 스타일 지정, 캡션 애니메이션 등의 기능을 웹에서 지원해야 합니다. Microsoft는 이러한 표준 개발을 위해 콘텐츠 소유자, 동영상 배포자 및 장치 공급자와 협력하여 선택 캡션 제작 및 배포의 상호 운용성을 보장하고 절차를 간소화하고 있습니다. 콘텐츠 및 도구 공급자의 경우에는 이러한 표준을 통해 발전하는 업계의 요구에 맞는 다양한 소프트웨어와 장치에 상호 운용성 있는 캡션 파일을 제작하여 전달할 수 있습니다.

캡션 작업은 전문가 수준의 동영상 제작에서는 빼놓을 수 없는 고유한 부분으로, 그 효과는 청각 장애인이 동영상 내용을 충분히 이해할 수 있도록 하는 것 이상입니다. 캡션은 체육관과 같이 시끄러운 환경에서도 사용되고, 외국어로 된 영화를 완전히 이해하는 데도 캡션의 도움이 필요합니다. 우리 모두 Netflix를 통해 상영되는 영화의 어려운 억양을 잘 이해하려고 캡션을 켜 본 적이 있을 겁니다.

2013년 2월에 Microsoft는 W3C TTWG(Timed Text Working Group)에 속한 업계 관련자들과 연합하여 TTML의 SDP-US(Simple Delivery Profile for Closed Captions) 프로필 표준을 발표했습니다. 이 새로운 프로필 구축 작업에는 DECE, SMPTE, EBU의 미디어 업계 전문가와 Adobe, MovieLabs, NBC Universal, Cox, Apple, Netflix, Microsoft 같은 업계 대표 업체가 참여했습니다.

SDP-US는 수년간 전문 동영상 업계에서 캡션 교환 표준으로 사용해 왔던 TTML(Timed Text Markup Language)에 기반을 두고 있으며 주요 캡션 형식 기능인 레이아웃, 스타일, 타이밍, 콘텐츠 등의 기준을 명확하게 정의하므로 콘텐츠 작성자와 도구 공급자가 업계 요구에 맞춰 상호 운용성 있는 캡션 파일을 손쉽게 만들 수 있습니다. SDP-US는 선택 캡션 제작을 간소화하는 데 도움이 되기 때문에 Internet Explorer와 같은 브라우저, Xbox와 같은 장치 또는 Microsoft Media Player Framework를 사용하여 개발된 응용 프로그램과 같이 다양한 소프트웨어와 장치에 연결된 웹으로 미디어 콘텐츠를 전달할 수 있습니다.

Internet Explorer는 TTML 및 WebVTT 파일 형식의 <track> 요소를 통한 HTML5 기반 동영상 캡션 작업의 조기 지원 기능이 포함되었던 초기 브라우저 중 하나였습니다. 이 기능이 포함된 이후로 콘텐츠 작성자들에게 들었던 피드백은 분명했습니다. 인터넷이 연결된 장치의 브라우저와 기타 소프트웨어에서 나타나는 요구 사항에 맞게 상호 운용이 가능하고 모든 기능을 완벽히 제공하는 간단한 캡션 작업 솔루션이 필요하다는 것이었습니다. SDP-US는 이러한 요구에 맞춰 HTML5 <track> 요소에 대해 간소화된 일련의 캡션 작업 기능을 정의하고 있으므로 개발자는 동영상의 대화 또는 동작에 대한 스타일 텍스트 표현이 들어 있는 캡션 파일과 그 동영상 파일의 콘텐츠를 렌더링하고 표시하는 <track> 요소를 사용해서 HTML5 동영상에 캡션을 넣을 수 있습니다.

새로운 SDP-US 캡션 작업 표준의 효과를 조금이나마 이해할 수 있도록, 캡션이 일반 텍스트 스타일 및 위치 기본값으로 설정되어 있을 때 Internet Explorer에서 어떻게 렌더링되는지 몇 가지 예를 보여 드리겠습니다.

SDP-US를 통해 캡션 제작자들은 캡션의 위치 및 스타일 지정을 다음과 같이 더욱 자유롭게 할 수 있게 되었습니다.

새롭게 개발된 웹 표준과 강력한 콘텐츠 전달 인프라 덕분에 전문가 수준의 온라인 동영상은 이제 눈앞으로 다가온 현실이 되었습니다. 캡션 작업은 전문가 수준의 동영상을 만들 수 있는 중요한 초석이 되므로 Microsoft는 업계 협력업체들과 함께 다양한 캡션 작업 경험을 살리기 위해 열심히 노력하고 있습니다. 인터넷 동영상 관련 작업을 하는 분이라면 새로운 SDP-US 프로필 내용을 확인하고, 업계의 관련 논의에도 참여하여, 본인의 캡션 콘텐츠가 SDP-US에 맞게 어떻게 바뀔 수 있을지 생각해 본 후, 피드백을 보내 주십시오.

- Internet Explorer 그룹 프로그램 관리자, Sandeep Singhal

2013년 4월 Internet Explorer 업데이트

2013-04-12T17:38:25Z

Microsoft 보안 공지 MS13-028 - 긴급

이 보안 업데이트는 Internet Explorer에서 비공개적으로 보고된 취약점 2건을 해결합니다. 가장 심각한 취약점으로는 사용자가 Internet Explorer를 ��용하여 특수 조작된 웹 페이지를 열어 볼 경우 원격 코드가 실행될 수 있다는 것입니다. 이러한 취약점을 성공적으로 악용한 공격자는 현재 사용자와 동일한 권한을 얻게 됩니다. 시스템에 대한 사용자 권한이 비교적 적게 구성된 계정의 사용자는 관리자 권한으로 작업하는 사용자에 비해 영향을 덜 받을 수 있습니다.

권장 사항. 대부분의 사용자는 자동 업데이트를 사용하고 있으므로 별도의 작업 없이도 이 보안 업데이트가 자동으로 다운로드되어 설치됩니다. 자동 업데이트를 설정하지 않은 사용자는 업데이트를 확인한 후 수동으로 설치해야 합니다. 자동 업데이트의 특정 구성 옵션에 대한 자세한 내용은 Microsoft 기술 자료 문서 294871을 참조하십시오.

Microsoft 보안 권고(2755801)

오늘 Microsoft는 Windows 8의 Internet Explorer 10에서 Adobe Flash Player의 취약성을 해결하는 업데이트도 발표했습니다. 이 취약성에 대한 세부 내용은 Adobe 보안 공지 APSB13-11에 기록되어 있습니다. 대부분의 사용자의 경우 자동 업데이트를 기본으로 설정하기 때문에 별도의 작업 없이 보안 업데이트가 자동으로 다운로드되어 설치될 것입니다. 수동 업데이트가 필요한 사용자는 가능한 한 빨리 공지를 읽고 이 업데이트를 적용하는 것이 좋습니다.

이 업데이트는 Internet Explorer 10에 포함된, 영향을 받는 Adobe Flash 바이너리를 업데이트하여 Adobe Flash Player의 취약점을 해결합니다. 자세한 내용은 공지를 참조하십시오.

- Internet Explorer 프로그램 관리자, Ceri Gallacher

modern.IE에 대한 새로운 소식: 무료 VM 다운로드, Windows 8 QuickStart Kit, 향상된 코드 검사 도구 등

2013-04-08T19:33:04Z

이제 modern.IE가 이전 버전의 브라우저를 지원하는 동시에 향상된 도구 및 리소스로 Internet Explorer 9 및 10과 같은 최신 브라우저에서 여러분의 사이트를 테스트할 수 있도록 업데이트됩니다. 이렇게 향상된 기능에는 1월 사이트 소개 이후 열정적인 사용자들이 보내주신 가장 많은 의견, 제안 및 요청이 반영되어 있습니다.

오늘 업데이트를 통해 modern.IE에서 새로운 혜택, 새로운 다운로드 및 향상된 도구를 제공할 수 있게 되었습니다. 주요 내용은 다음과 같습니다.

Windows QuickStart Kit 주문 - Parallels Desktop 8 및 Windows 8이 포함된 Mac 개발자용 Windows QuickStart Kit를 25달러에 주문할 수 있습니다. 이 금액은 선택한 자선 단체에 기부되며 제품은 USB 메모리에 저장되어 배송됩니다.
Windows 7의 IE10 및 Windows XP의 IE8에 사용할 수 있는 새로운 가상 시스템 다운로드
웹 페이지 URL 검사 - 이제 더 많은 상호 운용성 문제를 식별할 수 있으며, 방화벽으로 차단된 사이트도 검사할 수 있습니다.
18개 언어 지원

기본 개발 환경을 변경하지 않고도 브라우저와 OS 플랫폼에서 쉽게 테스트할 수 있도록 3개월 무료 BrowserStack을 계속 제공합니다.

지금까지 modern.IE에 보여 주신 여러 개발자들의 관심에 대해 기쁘게 생각합니다. 아울러 여러분이 웹 환경을 테스트할 때 시간을 절약하고 보다 나은 방법으로 테스트할 수 있도록 도와드리는 방법에 대해 여러분이 보내주신 사려 깊은 의견에 감사 드립니다. 오늘 출시된 modern.IE에는 이러한 의견이 대부분 반영되어 있습니다. Microsoft에서 사이트를 정기적으로 업데이트할 예정이므로 앞으로도 계속 좋은 의견 부탁 드립니다.

Mac 사용자: Parallels Desktop 8과 함께 Windows 8이 포함된 Windows QuickStart Kit 구입

여러분이 브라우저를 테스트할 때 가장 많이 사용하는 방법은 Hyper-V, VMWare, VirtualBox, Parallels 같은 좋아하는 가상화 플랫폼을 사용하여 브라우저와 운영 체제를 함께 가상화하는 것이라고 들었습니다. 하지만 너무 비약적인 변화를 처음 시도하는 경우에는 소프트웨어 및 라이선스 구입 비용이 만만치 않을 수 있습니다.

그래서 우리는 오늘 새로운 제품 조합으로 이러한 부담을 조금이나마 덜어 드리려고 합니다. Windows 8 및 Parallels Desktop 8 for Mac 가상화 제품이 USB 메모리로 배송되며 25달러의 구입 비용은 Swish의 도움으로 선호하는 자선 단체에 기부됩니다.

한정 수량만 공급하니 서두르시기 바랍니다. 여기에서 자세한 내용을 확인하고 미리 주문할 수 있습니다.

새로운 가상 시스템 다운로드

약간의 노력만 더하여 최대한 많은 테스트 환경을 이용할 수 있었으면 하는 의견이 많았습니다. 오늘 우리는 무료로 사용할 수 있는 새로운 가상 시스템을 발표합니다.

Windows 7의 IE10
Windows XP의 IE8

또한 Mac과 Linux에서 테스트 환경을 어떻게 간소화할지 걱정하는 개발자들의 의견도 많았습니다. 우리는 모든 IE 버전의 Mac용 Parallels 이미지를 추가했습니다. 이전에 VM을 다운로드하는 데 약간 어려움을 느낀 분이 많았을 텐데, 이러한 점을 고려하여 VM 설치 프로세스를 보다 간편하게 업데이트했습니다. 전체 다운로드 정보는 여기에서 확인할 수 있습니다.

웹 페이지 URL의 일반적인 코딩 문제 검사: 이제 방화벽 뒤에서도 실행되는 향상된 도구

우리는 여러분의 의견과 경험을 바탕으로 보다 편리하면서도 자세하고 실행 가능한 지침을 제공하기 위해 웹 페이지 URL 검사 도구를 개선했습니다. 지난 두 달 동안 여러분은 Facebook, Pandora, Yahoo! 등의 인기 사이트부터 동네 피자 가게까지 수십만 개의 URL을 검사했습니다. 우리는 이러한 사이트에서 보고된 가장 일반적인 코딩 문제를 조사하여 사이트 수정이나 개선이 불가피하도록 만드는 문제들이 무엇인지 확인했습니다. 또한 커뮤니티에서 직접 수백 건의 새로운 아이디어도 받았습니다. 그 결과 일련의 새로운 개선 사항을 적용하여 검사 도구가 보다 완벽한 사이트 테스트 솔루션으로 거듭날 수 있었습니다.

방화벽으로 차단된 웹 페이지 검사: 가장 많이 받은 불만은 요즘 너무 많은 사이트가 인증을 요구하거나, 내부용 또는 상용 영업 관련 웹 앱이거나, 공용 인터넷을 통해 사용할 수 없는 사이트라는 것입니다. 이제는 modern.IE의 로컬 인스턴스를 설치하여 Microsoft는 물론, 다른 사람으로부터 프로젝트를 안전하게 보호하면서 코드를 검사할 수 있습니다. 즉, node.js를 통해 설치하고 localhost를 통해 사이트에 액세스할 수 있습니다.
일반적인 IE 호환성 문제에 대한 세부 검사: 흔히 IE를 테스트할 때 첫 번째 단계는 사이트가 호환성 보기 목록에 있는지 여부를 아는 것이라고 하지만 '실제로' 알고 싶어하는 것은 기본적인 호환성 문제의 '해결 방법'입니다. 이제 modern.IE에서는 Sauce Labs에서 제공한 브라우저 자동화를 사용하는 Compat Inspector 도구를 통해 사이트에 코드 한 줄도 추가하지 않고 사이트를 검사할 수 있으며, 제안된 수정 프로그램의 개별 항목 목록도 얻을 수 있습니다.
응답성이 뛰어나도록 설계된 사이트의 중단점 감지: 우리는 여러분이 휴대폰과 태블릿에서 XBOX의 대형 화면 IE에 이르기까지 점점 더 다양해지는 장치가 모두 지원되도록 어떻게 웹 환경을 조정할 수 있을지에 '가장' 관심이 많다는 것을 알았습니다. 접속량이 많고 영향력이 높은 사이트의 약 20%가 이제 특정 형식의 모바일에 최적화된 환경을 제공하고 있으며 이는 작년에 비해 크게 늘어난 수치입니다. 이제 웹 페이지 URL 검사 도구에 웹 페이지가 일반적인 가로 화면 해상도(또는 "중단점")에 맞게 최적화된 시기를 감지하는 논리가 기본으로 제공됩니다. 사이트의 콘텐츠에 따라 그에 맞는 중단점이 구현되도록 하는 것도 좋지만 우리는 다양한 모든 장치에서 가장 일반적인 중단점을 적용할 것을 제안합니다.
터치 최적화 감지: 터치 지원이 웹 표준으로 진화함에 따라 우리는 사이트에서 현재 다양한 방식으로 터치 지원을 구현한다는 점도 알았습니다. modern.IE에서는 이제 여러 JavaScript, HTML 및 CSS 기반 기술에서 터치 기능을 감지합니다.
브라우저 플러그 인: 최근에 우리는 Windows 8과 Windows RT에서 기본적으로 플래시 콘텐츠를 실행하도록 업데이트된 Internet Explorer 10을 발표했습니다. 사이트가 플래시 CV 차단 목록에 포함되어 있는지 알아보려면 이제 modern.IE에서 이를 검사하면 됩니다.

또한 우리는 일반적이지 않은 방식이나 프레임워크 및 라이브러리를 사용하는 웹 페이지를 처리하기 위해 검사 도구에서 수십 가지의 버그를 수정했습니다. 웹 페이지를 검사할 때 오류가 발생했다면 이제 다시 해 보시기 바랍니다.

월드 와이드 웹(WWW)용 modern.IE

전 세계 사이트 개발자들이 훨씬 간편한 방법으로 이용할 수 있도록 내일부터 이틀 동안 modern.IE가 18개 언어로 제공됩니다. 지원되는 언어는 아랍어, 인도네시아 공용어, 중국어(간체, 정체 및 홍콩어), 네덜란드어, 프랑스어, 독일어, 이탈리아어, 일본어, 한국어, 포르투갈어(브라질), 러시아어, 스페인어(스페인 및 라틴 아메리카), 스웨덴어, 태국어, 터키어 및 베트남어입니다.

modern.IE – 보다 간편해진 테스트

우리는 계속해서 여러분의 도움을 받아 modern.IE를 개선해 나갈 것입니다. 앞으로도 이 리소스에 대한 의견을 많이 보내 주시기 바랍니다. 어떤 점이 좋고 어떤 부분이 아쉬운지 계속 알려 주십시오.

- Internet Explorer 그룹 프로그램 관리자, Sandeep Singhal

서머 타임: 웹에서 과거 날짜 및 시간 계산 처리

2013-04-01T16:50:22Z

서머 타임: 웹에서 과거 날짜 및 시간 계산 처리

웹 개발자들은 전 세계에서 사용 가능한 응용 프로그램을 개발하여 고객층을 해외까지 확대하기를 원합니다. Internet Explorer 10에서는 기본 OS에서 이미 제공하고 있는 과거 일광 절약 시간제를 웹 개발자에게도 제공합니다. 따라서 이제는 앱과 사이트의 시간 정보를 다양한 시간대에서의 과거 날짜 및 시간에 맞춰 더욱 정확하게 조작할 수 있습니다.

올해 초, 우리는 최근에 화두로 떠오르고 있는 ECMAScript Internationalization API를 살펴보았습니다. ECMAScript Internationalization API로는 웹 표준 플랫폼 내에서 통화 표시나 로캘 구분 문자열 비교 같은 작업이 가능한데 이전에는 이런 작업을 하려면 기본적으로 상호 운용성 지원이 되든지 플러그인을 적용하든지 해야만 했습니다. 전 세계에서 사용 가능한 웹 플랫폼 개발이라는 동일한 주제 아래, 우리는 브라우저에서 과거 날짜 및 시간대 정보를 조작하는 방식을 살펴볼 수 있는 데모를 게시했습니다.

과거 날짜 및 시간을 계산할 때 발생하는 문제점

과거의 주식 가격, 생일 또는 역사적 사건을 해석하는 등 과거 날짜를 조작할 때 웹 개발자들이 서버에서 유효성 검사를 수행해야 하는 경우가 자주 있습니다. 현재 JavaScript 엔진에서 일광 절약 시간제를 적용하여 계산한 날짜는 .NET, PHP/Perl, Java 등 주로 서버에서 실행되는 플랫폼만큼은 정확하지 않기 때문에 개발자들은 서버에 의존해야 합니다. JavaScript의 과거 날짜는 부정확할 뿐 아니라 브라우저 플랫폼 간에 상호 운용이 안 되는 경우도 자주 있습니다. 따라서 개발자는 JavaScript에서 생성한 DST 조정 날짜를 완전히 신뢰할 수 없습니다.

IE10은 ECMAScript 6 규격 초안 15.9.1.8 섹션의 변경 사항에 따라 보다 정확한 DST 조정 날짜를 제공하는 최초의 브라우저입니다. 우리는 웹 개발자가 요구 사항을 해결하기 위해 서버와 상호 작용해야 하는 시나리오를 기반으로 웹 플랫폼의 기능을 확장했습니다. JavaScript 엔진이 과거 날짜를 해석하여 DST를 적용하는 방식을 살펴본 결과, 기존 JavaScript 엔진으로는 일광 절약 시간을 정확하게 조정할 수 없다는 ECMAScript 표준 규격의 단점을 발견했습니다. 우리는 ECMAScript 표준 위원회와 협력하여 ECMAScript 규격의 차세대 버전에서는 DST 조정 시간의 정확도를 높일 수 있도록 규격을 변경해야 한다고 제안했습니다.

테스트 드라이브 데모 탐색

데모 하단에 있는 우주 항공의 역사적 사건 아이콘 중 하나를 클릭하여 과거 날짜 테스트 드라이브 데모를 실행하면 이 문제를 살펴보고 여러분이 선호하는 브라우저에서 과거 날짜를 어떻게 처리하는지 알아볼 수 있습니다. 브라우저에서는 사건이 발생한 과거 날짜를 읽어서 사건 발생 시간에 대한 브라우저의 기본값으로 설정된 일광 절약 규칙을 적용하여 날짜와 시간을 표시합니다. 그러면 데모에서 과거 날짜와 일광 절약 시간이 정확한지 확인합니다.

위의 사례에서 IMAGE 우주선이 발사된 과거 날짜를 볼 때 태평양 표준시에 속하는 Windows 8 컴퓨터에서 실행되는 IE10은 이제 과거의 사건에 대한 올바른 날짜 및 일광 절약 시간을 정확하게 확인할 수 있습니다.

참고: 모든 시간대에 일광 절약 시간을 적용할 수 있는 것은 아니며, 일광 절약 규칙이 한 번도 바뀌지 않은 시간대도 있습니다. 현재 이러한 시간대가 적용되는 시스템을 사용 중인 분은 태평양 표준시 같은 일광 절약 규칙이 있으면서 시간이 지남에 따라 그 규칙이 변경된 그러한 시간대로 시스템 시간대를 변경한 후 데모를 다시 실행하는 것이 좋습니다. IE10은 시스템 시간대를 변경하면 즉시 적용되지만 다른 브라우저의 경우에는 업데이트된 시간대를 적용하려면 브라우저를 다시 시작해야 할 수도 있습니다.

과거 날짜 및 시간을 처리하는 기능이 개선된 IE10

현재 ECMAScript 규격이 JavaScript의 DST 날짜 조정 정확도에 어떤 영향을 미치는지 자세히 알아보겠습니다.

ECMAScript 5.1의 15.9.1.8 섹션은 Internet Explorer의 Chakra 엔진 같은 JavaScript 구현에서 과거 날짜를 처리할 때 일반적으로 따라야 하는 사항을 명시하고 있습니다.

ECMAScript 구현에서 정확한 시간을 구하려면 일광 절약 시간을 적용했는지 여부를 확인하는 대신, 현재의 일광 절약 시간 알고리즘을 그 당시 시간에 적용해도 일광 절약 시간이 유효한지 확인합니다. 이렇게 하면 로캘이 일광 절약 시간을 따르는 연도까지 1년 내내 고민하고 있어야 할 필요가 없습니다.

호스트 환경에서 일광 절약 시간을 확인할 수 있는 기능을 제공할 경우 문제가 되는 연도를 호스트 환경에서 일광 절약 시간 정보를 제공하는 동등 연도(윤년과 시작 날짜가 같은 연도)와 자유롭게 매핑할 수 있습니다. 단, 어떤 동등 연도를 대입해도 결과가 같아야 한다는 것이 유일한 제약입니다.

간단하게 정리하자면, 과거 날짜를 처리하려면 JavaScript 구현에서 현재의 일광 절약 시간 알고리즘을 과거 날짜에 적용합니다. 또는 해당 연도의 1월 1일을 확인하여 윤년인지 계산하고, 특성(시작 날짜 및 윤년)이 같은 연도의 현재 일광 절약 시간 규칙을 찾아서 과거 날짜에 일광 절약 시간을 적용합니다. 두 번째 방법의 예를 들자면, 1972년은 토요일로 시작하는 윤년이었고 토요일로 시작하는 그 다음 윤년은 2000년이었습니다. 언어 규격에 따라 1972년의 날짜를 조작할 때에는 JavaScript 구현에서 현재 일광 절약 규칙을 사용하거나 2000년의 일광 절약 규칙을 사용하면 됩니다.

위의 두 규칙 중 하나를 사용하여 과거 날짜에 일광 절약 시간 규칙을 적용할 때 두 가지 문제가 발생합니다. 첫째, 특정 시간대의 일광 절약 규칙은 일정하지 않고 시간이 흐르면서 변합니다. 이로 인해 과거 날짜에 잘못된 규칙이 적용될 수 있습니다. 둘째, 과거 날짜는 현재 실행 중인 OS 플랫폼에 의해 계산되므로 시간이 지나면서 일광 절약 규칙이 변하는 시간대의 경우 웹 응용 프로그램이 더 이상 패리티를 유지할 수 없습니다. 따라서 개발자가 웹 응용 프로그램과 현재 실행 중인 플랫폼 간의 상호 운용성 문제를 임시로 해결해야 하는 경우가 종종 있습니다.

위에서 살펴본 15.9.1.8 섹션의 ECMAScript 5.1 규격 텍스트에서는 일광 절약 시간 조정에 대해 구현에서 원하는 만큼 오차를 허용하는 동시에 일정 수준 이상의 정확성을 요구하고 있습니다. 이는 다소 이해하기 어려운 사항이며, 실제로도 브라우저 간에 합의를 끌어내지 못했습니다. 15.9.1.8 섹션의 내용처럼 시간대 오프셋 동작을 제한하는 대신 DaylightSavingsTA 구현에 따라 결정되도록 내버려 두어야 합니다.

우리가 수행한 테스트 결과에 따르면, 기존 브라우저 구현(최신 버전) 중 모든 플랫폼에서 표준에 규정된 동작을 완벽하게 준수하거나 날짜를 처리할 때 DST를 정확하게 조정하는 브라우저는 하나도 없었습니다. 다음은 미국 태평양 표준시에서 달라지는 날짜를 보여 주는 예입니다.

날짜	Windows					Debian	Mac
	IE9	Chrome	Firefox	Opera	Safari	Node	Node	Chrome	Firefox	Safari
4/1/2000	420	420	420	420	420	420	480	480	480	420

이 날짜에서 Chrome, FireFox, Node는 OS에 따라 값이 다릅니다. 사실 거의 대부분이 틀렸는데, 실제 DST 조정 시간은 480입니다.

날짜	Windows					Debian	Mac
	IE9	Chrome	Firefox	Opera	Safari	Node	Node	Chrome	Firefox	Safari
3/10/2011	480	480	480	480	480	480	480	480	480	480
3/10/2109	480	480	480	480	420	480	480	480	420	420

이 날짜에서 다시 몇몇 환경이 ES5.1 규칙을 위반했습니다(두 연도 모두 화요일에 시작하고 윤년이 아님). 그리고 같은 OS에서도 날짜가 달랐으며 이것은 Windows와 Mac 모두 마찬가지였습니다.

전망

Internet Explorer 10부터 Chakra 엔진은 브라우저가 실행되는 Windows 플랫폼에서 제공하는 일광 절약 시간제 정보를 사용하여 현지 시간과 UTC를 변환합니다.

우리는 규격 문제를 보고한 후 차세대 ECMAScript 규격을 명확하게 규정하기 위해 ECMAScript 표준 위원회와 협력하여 웹 플랫폼의 상호 운용성을 지원하고 정확성을 높였습니다. ECMAScript 6 규격의 최신 초안에는 보다 정확하고 개선된 일광 절약 시간 규칙을 날짜에 적용하여 보다 정확한 정보를 제공하는 방법이 자세하게 설명되어 있습니다. IE10은 업데이트된 규격을 따르는 최초의 브라우저입니다. 다른 브라우저도 다음 버전부터는 이러한 문제를 해결하는 기능이 강화되어 웹 개발자들이 전 세계적으로 사용 가능한 응용 프로그램을 개발할 수 있게 되기를 바랍니다.

웹 플랫폼의 중요성이 높아지면서 최근에는 일정 응용 프로그램, 스프레드시트, 프로젝트 관리 소프트웨어 등에 사용되는 논리를 포함하여 응용 프로그램 논리 전체를 JavaScript로 작성하는 경우도 자주 있습니다. 개발자들이 호환성을 유지할 수 있도록 이러한 변화를 지원하는 것은 IE10의 표준 모드뿐입니다. 웹 응용 프로그램에서 과거 날짜를 계산하고 브라우저의 부정확성을 해결하기 위해 사용자 지정 논리를 사용하는 분은 웹 응용 프로그램이 IE10에서 작동하도록 업그레이드할 때 사용자 지정 논리도 올바르게 작동되도록 유의하시기 바랍니다.

- JavaScript 팀 프로그램 관리자, Suresh Jayabalan

상상 그 이상으로 매력적인 웹: IE 테스트 3주년

2013-03-26T23:48:44Z

개발자들이 HTML5, 터치 및 하드웨어 가속 그래픽의 전 기능을 구현하면서 오늘날의 웹은 우리가 상상한 것보다 훨씬 매력적으로 사용자에게 다가가고 있습니다. 사실 개발자들이 요즘 간단히 구현하고 있는 환경은 불과 몇 년 전만 해도 불가능한 것이었습니다.

지난 토요일은 IE 테스트 드라이브 사이트를 출범한 지 3주년이 되는 날이었습니다. 개발자들이 웹의 잠재력을 상상하는 데 도움을 주기 위해 하드웨어 가속 HTML5의 몇 가지 예시로 시작한 IE 테스트 드라이브가 벌써 140개가 넘는 기능 데모 모음으로 발전했습니다. 테스트 드라이브에서는 HTML5, CSS3, ECMAScript 5, 터치, GPU 기반 그래픽, 놀라운 성능, 오디오/비디오, 모바일, 게임 등 최신 하드웨어에서 구동되는 최신 브라우저와 HTML5를 통해 실현 가능한 것을 미리 테스트해 볼 수 있습니다.

여러분의 뜨거운 성원에 힘입어 테스트 드라이브의 페이지 뷰가 1억 3000만 뷰를 돌파했습니다! 이는 지난 3년간 1초에 한 페이지 이상 방문이 있었다는 이야기입니다. 데모를 구축하면서 재미있는 일도 많았고 즐겨 찾는 몇몇 데모를 생각해 보면 떠오르는 것도 많습니다.

IE 테스트 드라이브 사이트에는 140여 가지의 데모가 있습니다!

데모

Audio Explosion	IE10 터치 및 시청각 환경
CanvasPinball	완벽한 휴식 시간
Chalkboard	IE10을 통해 즐기는 학교 생활
FishBowl	HTML5, CSS3, 비디오, 오디오, 캔버스, 물고기
FishIE	물고기 혁명의 시작
Flying Images	최초의 테스트 드라이브!
Galactic	현실을 뛰어넘는 성능
Hamster Dance Revolution	춤의 세계에 빠져 보세요.
Love is in the Air	우리도 사랑해요.
Minesweeper	폭발적인 브라우저 속도
Mr. Potato Gun	마케팅 동영상보다도 효과가 큰 동작
Psychedelic Browsing	새벽 2시 이후에 "가장 많이" 본 데모
Speed Reading	브라우저의 읽기 속도가 얼마나 빠른가요?
Touch Effects	터치를 통한 보다 빠른 경험
Tracking Protection	개인 정보 보호가 최우선

전망

IE10은 Windows 장치에서 실제 웹 사이트를 계속 최상의 성능으로 즐길 수 있도록 해주며, 테스트 드라이브는 실현 가능한 것을 직접 체험해 볼 수 있는 멋진 곳입니다. 지금 바로 테스트 드라이브를 체험해 보고 느낀 점을 알려 주세요!

개발자들이 매일 웹에서 구현하는 멋진 환경이 항상 놀랍고 고마울 따름입니다. IE10을 사용해 주시고 지속적으로 의견을 보내 주셔서 감사합니다.

- Internet Explorer 프로그램 관리자, Jon Aneja

Windows 7 및 Windows 8용 IEAK 10 출시

2013-03-26T23:37:11Z

IEAK 10(Internet Explorer 관리 키트 10)에서 이제 Windows 7 및 Windows 8용 Internet Explorer 10 패키지 구축을 지원합니다. IEAK 10은 사용자가 지정한 Internet Explorer 10 패키지의 생성, 배포 및 관리를 간소화합니다. http://ieak.microsoft.com에서 IEAK 10을 다운로드할 수 있습니다.

Internet Explorer 프로그램 관리자, Kevin Luu

HTML5를 통한 Vyclone의 대화형 환경 구현

2013-03-20T19:35:20Z

HTML5를 통한 Vyclone의 대화형 환경 구현

개발자들이 HTML5의 잠재력을 끄집어내면서 웹의 매력적인 기능과 생산성이 점차 커지고 있습니다. 이 게스트 블로그 글에서 Plain Concepts의 Anton Molleda는 HTML5 및 Internet Explorer 10과 같은 차세대 브라우저의 다양한 새 기능을 기반으로 하는 소셜 동영상 편집 환경인 Vcylone을 개발하면서 직접 경험하고 느낀 점을 전하고 있습니다. Vcyclone은 포인터 이벤트, 멀티 터치 동작, 하드웨어 가속 캔버스 및 CSS3와 같은 기능을 기반으로 앱과 같은 느낌의 웹 사이트를 만드는 기술입니다.

- Internet Explorer 그룹 프로그램 관리자, Rob Mauceri

안녕하세요,

저는 Plain Concepts에서 근무하는 Anton Molleda입니다. 지난 몇 달 동안 Internet Explorer 팀은 유능한 팀원들과 함께 새로운 소셜 동영상 프로그램인 Vyclone을 개발했습니다. 웹으로 실현 가능한 기능의 한계에 도전하는 것은 웹 개발자로서 제가 가진 열정 중 하나입니다. 운 좋게도 저는 이 프로젝트에 적극적으로 참여할 수 있는 기회를 얻었습니다. 그리고 오늘은 HTML5와 JavaScript만으로 Vyclone용 웹에서 동영상 편집기를 만들기 위해 협력하면서 얻은 몇 가지 교훈을 알려 드리고자 합니다.

Vyclone은 공유한 순간의 여러 장면을 손쉽게 공동으로 만들고 동기화하고 편집할 수 있는 소셜 동영상 플랫폼입니다.

Vyclone은 개발 초기에는 모바일 장치에만 중점을 두었는데, 곧 휴대폰이 녹화 환경은 뛰어나지만 동영상 편집 기능은 장치의 성능과 화면 크기 때문에 한계가 있다는 것을 깨닫게 되었고, 최근 몇 년간 최신 브라우저의 발전 덕분에 이 새로운 도구를 만드는 과정에서 HTML5가 실현 가능한 옵션이 되었습니다.

Vyclone 웹 편집기의 핵심은 다음 세 가지 부분입니다.

동영상 미리보기: 사용자가 만들고 있는 저화질 컷이 표시됩니다(왼쪽에 표시).

Vidgrid: 주어진 지점과 시점을 보여주는 사용 가능한 모든 원본이 사용자에게 제공됩니다(오른쪽에 표시).

시간 표시 막대: 동영상 과정에서 재생되는 원본의 선형 보기를 나타냅니다. 일정 시간 동안 재생되는 원본을 컷이라고 합니다(플레이어 컨트롤 위에 표시).

사용자가 동영상을 재생하고 새로운 컷을 시간 표시 막대에 추가하기 시작하면 새 원본이 동영상 미리보기에 반영되고, 선택된 동영상을 알 수 있도록 원본 파일의 모퉁이가 삼각형으로 강조 표시됩니다.

이 구현 과정에서 우리는 약간의 동영상 조작, 성능 및 사용자 경험으로 매우 흥미로운 도전을 해보았습니다. 웹에서 이를 구현하기 위해 어떤 작업을 수행했는지 자세히 살펴보겠습니다. 우리는 동영상, 캔버스 및 requestAnimationFrame(RAF)을 사용하고 있었습니다. 동영상이 백그라운드에서 재생되는 동안 각 RAF에서 활성 원본을 캔버스(동영상 미리보기)에 그려 보거나 해당 원본의 새 크기 및 위치를 vidgrid로 계산했습니다.

여기까지는 괜찮았지만 사용자가 상호 작용할 수 있도록 한 경우에는 어떻게 될까요? 예를 들어 사용자가 시간 표시 막대를 앞/뒤로 이동하거나 동영상 원본(컷)을 추가/제거하면 어떻게 될까요? 처음에 프로토타입을 만들기 시작했을 때 우리는 이벤트가 실행되는 즉시 표준 접근 방법으로 처리될 것이라 생각했습니다. 왜냐하면 그렇게 알고 있었기 때문입니다.

그러나 이러한 이벤트가 초당 수십 회 또는 수백 회 실행될 수 있는 경우에는 어떻게 될까요? 그리고 이러한 처리기에서 UI를 업데이트해야 하는 경우에는 어떻게 될까요? 변화량이 1픽셀보다 적은 경우에도 초당 130회의 레이아웃 새로 고침을 강제로 실행해야 할까요? 성능 저하에 대해 얘기해 보겠습니다.

컴퓨터에 8GB RAM의 i7이 탑재된 경우에는 이를 처리할 수 있는 충분한 컴퓨팅 성능이 있을 수 있습니다. 하지만 오래된 컴퓨터 또는 ARM 장치를 사용하는 경우에는 어떨까요? 이러한 사용자는 동일한 경험을 할 수 없으며 웹 사이트의 반응 시간이 점점 느려지는 것을 경험하게 될 것입니다.

처음 시도한 방법은 RAF에서 작업을 대기시키는 것이었지만 이 접근 방법에는 몇 가지 문제가 있었습니다. 동일한 "틱"에 대해 동일한 기능을 얻기 위해 RAF를 늘릴 수 있지만 이는 상황을 더욱 악화시킵니다. 이를 해결하기 위한 첫 번째 방법은 동작이 이미 대기 중인 경우 이를 알려 주는 변수를 지정하는 것이었습니다. 예를 들면 다음과 같습니다.

var queued = false; function myAction(){ //your awesome code here queued = false; } function onEvent(evt){ if(!queued){ queued = true; requestAnimationFrame(myAction); } }

이 코드도 나쁘지 않지만 여전히 몇 가지 문제가 있습니다. 이벤트 배치(마우스 또는 포인터) 및 델타와 관련된 작업을 할 경우 이 방법을 가지고 고심할 수 있습니다. 그래서 시간 표시 막대에서 우리가 사용한 해결 방법은 이벤트 값을 누적시키고 이를 myAction에서 처리하는 것입니다.

var deltaX = 0, queued = false; function myAction(){ //your awesome code here uses deltaX deltaX = 0; // we reset the deltaX so it can be incremented  // next time onEvent is executed queued = false; } function onEvent(evt){ if(!queued){ queued = true; deltaX = evt.translationX; // in the case of a pointer, if you are  // using a mouse you will have to do some  // magic with pageX or similar :) requestAnimationFrame(myAction); }else{ deltaX += evt.translationX; } }

이 접근 방법을 사용하면 훨씬 더 준비된 상태로 다음 단계를 진행할 수 있습니다. 우리는 기능을 계속 추가하면서 몇 가지 새로운 문제가 발생하는 것을 알게 되었습니다.

각 requestAnimationFrame에서 이러한 이벤트를 처리하면 컴퓨팅 성능을 떨어뜨리지 않으면서 높은 수준의 응답성을 얻을 수 있었습니다. 그러나 requestAnimationFrame은 기능을 순서대로 실행하기 때문에 기능이 대기 상태에 놓여 있어 시간 표시 막대를 정리하거나 이동하기 전에 불필요하게 그려야 하는 경우가 있었으며 원하는 순서대로 실행하기 위해 번거롭게 코드를 많이 만들어야 했습니다.

이 코드는 다루기가 쉽지 않아 다른 작업이 수행되는 동안 대기 중인 일부 사이클을 놓치게 되므로 우리는 입력을 처리하는 방법을 다시 바꾸기로 했습니다. 이것을 일종의 게임 루프로 생각한 것이 바로 이때였습니다. 단순한 게임 구조도 잘 모른다면 이 게임 루프는 기본적으로 사용자 개입 여부와 상관없이 실행되며 다른 이벤트나 작업이 실행되어야 할 경우에는 따로 분리되는 연속 루프라고 생각하면 됩니다. 게임 프로그래밍 Wikipedia 문서에서 설명하는 유사 코드의 단순화된 게임 루프는 다음과 같을 수 있습니다.

while( user doesn't exit ) check for user input run AI move enemies resolve collisions draw graphics play sounds end while

이것이 바로 우리가 원했던 것이었습니다. RAF를 활용하여 우리는 연속으로 실행되는 틱 함수를 만들고 그 안에 이전 사용자 입력 또는 기타 요소를 바탕으로 수행해야 할 작업을 정했습니다.

vidgrid의 단순화된 틱은 다음과 같은 것입니다.

function tick(){ //we clean if we've changed the size of the quadrant if(needsClean){ cleanCanvas(); } // if we have to change the quadrant's frame because we are  // the active one (or the opposite) if(newFrame){ drawFrame(); // we draw just the frame in a separate canvas so it // doesn't need to be calculated all the time, and it  // is still faster than copying from an image } //we draw the new frame if we are playing or seeking if(dirty){ draw(); drawFrameInQuadrant(); } requestAnimationFrame(tick); }

needsClean, newFrame 및 더티 값은 이벤트 처리기에서 업데이트됩니다(사용자가 검색하거나 동영상을 재생할 때 등).

사용자 상호 작용에 대한 우리의 생각을 이렇게 게임 루프 방식으로 바꾸고 나서야 성능을 개선하고 편집기에서 코드를 단순화할 수 있었습니다.

요약하자면, 무언가를 구현하는 데 뛰어난 상호 작용이 필요하고 사용자 입력도 많은 경우라면 게임 루프를 통해 보다 쉽게 작업할 수 있는 방법이 없을지 생각해 보십시오. 분명 유익한 결과를 얻을 수 있을 것입니다. 혹시 Vyclone의 새로운 웹 편집기를 확인할 기회가 없었다면 지금 확인해 보십시오. Vyclone.com의 아무 동영상에서나 'Remix'를 클릭하면 웹 편집기가 나타납니다. 이 편집기는 마우스와 터치 입력 모두에서 원활하게 작동합니다. 개인적으로 저는 Surface Pro에서 이 기능을 사용할 것을 적극 권장합니다.

마음껏 즐기시고 궁금한 사항이 있으면 아래에 댓글을 남겨 주세요.

- Plain Concepts, Anton Molleda