IE11의 향상되고 풍부한 편집 경험

Internet Explorer 11을 사용하면 웹 기반의 응용 프로그램과 사이트에서 풍부한 편집 경험을 제공하여 사용자가 쉽게 데이터를 캡처하고 공유할 수 있습니다. Office 365를 포함해 전자 메일과 웹 기반의 문서 편집과 같은 온라인 및 클라우드 기반의 콘텐츠 생성 시나리오는 HTML5의 contentEditable 기능이 필요합니다. IE11을 사용하면 이제 더욱 편리하게 다양한 입력 소스로부터 이미지를 붙여넣기할 수 있고, 서식을 보존하면서 목록을 복사하고, 편집을 취소할 수 있습니다.

모든 소스의 이미지를 자유자재로 붙여넣기

IE11을 사용하면 클립보드에서 붙여넣기한 이미지를 이제 웹 사이트에서 직접 액세스할 수 있습니다. IE11은 클립보드에서(예를 들어, 사진 편집 소프트웨어 또는 PrintScreen에서) 직접 이미지를 붙여넣기하는 기능과 로컬 이미지를 통합하는 HTML을 붙여넣기하는 기능(예를 들어, 로컬 경로에 임시로 이미지를 저장하는 Microsoft Office 등의 응용 프로그램에서)을 모두 지원하는 최초의 브라우저입니다. DataURI 또는 Blob을 사용해서 이 이미지들을 인코딩할 수 있습니다.

새로운 IE11의 DataURI 인코딩 기능을 사용하면, 웹 사이트는 추가 Javascript 없이도 클립보드에서 이미지를 붙여넣기하는 기능을 자동으로 지원할 수 있습니다. 기본적으로 IE11은 DataURI로 변환하고 contentEditable에 HTML로 삽입하여 클립보드에서 이미지를 붙여넣기합니다. 예를 들어, 사진 편집 소프트웨어에서 빨간색 상자를 그려서 contentEditable에 복사하면 이미지는 편집하고 있는 마크업 안에서 <img> 태그가 됩니다.

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI

 AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1

 I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA

 AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D"> 

웹 개발자들은 코드를 몇 줄만 추가하면 Blob을 DataURI 대신에 사용할 수 있습니다. Blob을 사용하면 응용 프로그램은 이미지 데이터를 직접 처리할 수 있습니다. 예를 들어, 웹 메일 클라이언트는 이미지를 클라우드에 업로드하기 전에 MIME 형식으로 인코딩해야 합니다. Blob을 사용하는 응용 프로그램은 객체 수명을 관리하는 반면, DataURI는 객체 관리가 필요하지 않습니다.

IE11의 새 클립보드 API를 통해 지원하는 이미지를 Blob으로 매우 쉽게 붙여넣기할 수 있습니다. 다음 코드는 붙여넣기한 모든 이미지를 Blob으로 변환합니다.

 var blobList = []; <htmlObject>.addEventListener("paste", function() { var fileList = clipboardData.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var url = URL.createObjectURL(file); event.msConvertURL(file, "specified", url); blobList.push(file); } } );

DataURI와 Blob 중에 선택하는 방법을 요약한 표는 다음과 같습니다.

	DataURI	Blob
추가 JavaScript 코드 필요	아니오	예
클립보드에서 이미지 붙여넣기 가능	예	예
로컬 이미지를 참조하는 HTML 붙여넣기 가능	예	예
이미지 데이터 저장 위치	붙여넣기한 HTML 내 인라인(HTML의 크기 대폭 확장 가능)	외부 참조(HTML 크기는 관계 없지만 응용 프로그램은 HTML 전송 시 이미지 내보내기 처리 필요)
이미지 데이터 유연성	낮음(HTML에서 먼저 추출해야 함)	높음(Blob 참조를 사용하여 처리 가능)

DataURI와 Blob 사용 전환을 하여 이미지를 붙여넣기할 수 있는 이미지 붙여넣기 테스트 드라이브에서 이미지 붙여넣기를 직접 해볼 수 있습니다.

이미지 붙여넣기 테스트 드라이브는 브라우저가 DataURI 또는 Blob을 사용하여 이미지를 붙여넣기할 수 있는지를 테스트함

목록을 HTML 목록으로 붙여넣기

IE11 사용자는 많이 이용되는 오피스 응용 프로그램에서 목록을 붙여넣기하여 브라우저 안에서 해당 목록을 계속 편집할 수 있습니다. 목록을 붙여넣기한 후, 목록 끝에서 Enter 키를 눌러 새 항목을 생성할 수 있습니다. 이 기능은 Microsoft Word와 같은 워드 프로세서 응용 프로그램에서 서식 있는 콘텐츠를 붙여넣기할 때 특히 유용합니다. IE11은 서식 있는 텍스트에 목록이 포함된 것을 인식하고 <ul> 또는 <ol> 요소를 사용하여 실제 HTML 목록으로 변환하기 때문에 원하는 방식대로 목록을 편집할 수 있습니다.

IE11(우측)에서는 Microsoft Word(좌측) 등의 응용 프로그램에서 서식 있는 목록을 붙여넣기 및 편집하는 작업이 쉽고 자연스러움

풍부하고 자연스러운 취소 경험

IE11을 사용하면, 웹 페이지에서 취소 작업에 대한 보다 나은 경험을 구현하고 웹 개발자들은 스크립트에서 DOM 조작이 취소 스택에 참여하는 방식에 대해 세분화된 제어를 할 수 있습니다. 대부분의 경우 개발자들은 취소 스택에 대해 염려할 필요가 없으며 IE11은 생각대로 작동합니다. 예를 들어, 클릭하면 execCommand('bold')를 불러오는 'bold' 버튼이 페이지에 포함되어 있을 경우 IE11은 자동으로 이 작업의 취소를 지원하기 때문에 사용자는 Ctrl+Z를 눌러 텍스트의 볼드를 해제할 수 있습니다. IE11은 스크립트로 시작된 각 DOM 변경 사항을 추적하고 별도의 취소 단위로 묶습니다.

IE11의 기본 취소 스택은 가장 단순한 스크립트 편집을 처리하지만, 웹 개발자들은 더욱 복잡하고 여러 단계로 이루어진 편집을 지원해야 할 때도 있습니다. 예를 들어, ':)' 입력 시 페이지에서 이를 감지하여 이 텍스트를 삭제하고 웃는 얼굴 모양을 삽입할 수 있습니다. 이 경우, IE는 보통 2개의 취소 단위(하나는 삭제, 하나는 삽입)를 생성하고, 스크립트 변경 사항을 취소하려면 사용자는 Ctrl+Z를 두 번 눌러야 합니다. 아마도 생각과는 다를 것입니다. IE11은 두 개의 새로운 명령을 추가하여 웹 개발자들이 이러한 시나리오로 작업할 수 있도록 합니다. ms-beginUndoUnit을 불러오고, 스크립트를 실행한 다음, ms-endUndoUnit을 불러올 수 있습니다. 두 명령 사이에 이루어진 모든 DOM 변경 사항은 하나의 취소 단위로 그룹화될 것입니다.

웹 개발자들은 ms-clearUndoStack 명령을 사용하여 취소 이력을 프로그램으로 다시 설정할 수 있습니다. 이 기능은 다수의 컨텍스트에 편집기 인스턴스를 다시 사용할 경우 유용합니다. 예를 들어, 사용자가 여러 이메일을 통해 회신하는 경우, 새 메일을 열 때마다 이전 메일에서 취소 스택을 지울 수 있습니다.

새로운 명령을 사용하여 웃는 얼굴을 자동 교체하는 동안에 취소 단위를 그룹화하는 취소 테스트 드라이브를 사용해 볼 수 있습니다.

취소 테스트 드라이브는 브라우저에서 다중 단계 취소 작업을 테스트함

요약

Internet Explorer 11을 사용하면 웹 기반의 응용 프로그램과 사이트에서 풍부한 편집 경험을 제공하여 사용자가 쉽게 데이터를 캡처하고 공유할 수 있습니다. 사용자는 자동 이미지 붙여넣기, 서식 있는 목록의 향상된 복사하여 붙여넣기, 자연스러운 취소를 통해 풍부한 콘텐츠를 생성할 수 있습니다.

Windows 7이나 Windows 8.1에서 IE11의 이러한 새 기능을 사용해 보시고 Connect를 통해 의견을 보내 주시기 바랍니다.

Internet Explorer 프로그램 관리자,
Jianfeng Lin 및 Ben Peters