이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 프레임으로 이전 브라우저에서 HTML5 렌더링

Malte Ubl

소개

HTML5는 다음을 비롯하여 여러 가지 새롭고 멋진 도구를 웹 개발자 도구 상자에 추가합니다.

더욱 강력해진 새로운 JavaScript API
벡터 그래픽용 SVG
2D 및 WebGL 3D 그래픽을 위한 캔버스
둥근 모서리, 그라데이션 등을 위한 CSS3
보다 표현력이 뛰어난 마크업

물론 이 목록은 포괄적이지 않습니다. 웹 플랫폼이 대대적으로 발전했고 이전 브라우저와 최신 브라우저 간의 격차는 매일 벌어지고 있습니다.
이제 모든 주요 데스크톱 브라우저가 최신 버전에서 HTML5의 상당 부분을 지원하지만, 오래된 브라우저의 경우 오늘날 가장 우수한 최신 기능을 채택하는 데 어려움을 겪고 있습니다.

Chrome 프레임을 사용하면 기존 브라우저를 사용하는 사용자도 콘텐츠를 볼 수 있도록 지원하는 동시에 최첨단 HTML5 페이지를 빌드할 수 있습니다.

Chrome 프레임이란 무엇인가요?

Chrome 프레임은 Chrome의 렌더링 엔진을 사용하여 전체 브라우저 캔버스를 렌더링할 수 있는 Internet Explorer용 플러그인입니다. Chrome에서 찾을 수 있는 모든 HTML5 기능이 Internet Explorer 사용자 환경에 원활하게 통합되어 지원됩니다. Chrome 프레임은 Internet Explorer 6, 7, 8, 9에서 사용할 수 있습니다. Chrome 프레임은 IE6~IE8과 같은 이전 브라우저를 지원할 때는 더 유용하지만, 예를 들어 애플리케이션에 WebGL이 필요한 경우 IE9 사용자용 Chrome 프레임도 유용할 수 있습니다.

HTML5 폴리필을 사용하면 최신 브라우저로 원활하게 전환할 수 있습니다. 안타깝게도 모든 기능을 에뮬레이션할 수 없으며 이전 브라우저의 페이지 속도를 저하시킵니다. 이전 브라우저에서는 페이지가 신세대보다 훨씬 더 느립니다.

사이트에 HTML5 기능이 필요하지 않은 경우에도 Chrome 프레임을 사용하면 더 나은 사용자 환경을 제공할 수 있습니다. 이미 설치한 사용자의 경우 일반적으로 렌더링이 더 빨라지고 이전 브라우저에서 지원되지 않는 기능에 액세스할 수 있습니다. 물론 컴퓨터에 Chrome 프레임이 없는 사용자를 위해 이전 브라우저를 지원할 수는 있습니다.

서비스 선택하기

HTML 메타태그를 추가하거나 HTTP 헤더를 사용하여 Chrome 프레임이 페이지를 렌더링하도록 설정할 수 있습니다. 이는 중요한 사항입니다. 사이트에서 플러그인 또는 기본 렌더링을 완전히 제어할 수 있으므로 사용자가 Chrome 프레임을 설치하더라도 사이트가 중단되지 않습니다. 다음 코드 스니펫은 Chrome 프레임에서 사이트를 렌더링하도록 선택하는 방법을 보여줍니다.

옵션 1: HTTP 헤더 (HTTP 서버 (예: Apache) 구성에 추가 가능)

X-UA-Compatible: chrome=1

옵션 2: 메타 태그 (HTML <head> 섹션에 붙여넣기만 하면 됨)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

둘 중 하나를 사이트에 추가하면 Chrome 프레임이 사용자의 컴퓨터에 설치된 경우 페이지를 사용하여 렌더링됩니다.

Chrome 프레임에 대한 메시지 표시

다음과 같은 여러 가지 이유로 이전 브라우저에 대한 지원을 완전히 중단할 수 있습니다.

사이트에 HTML5 동영상, 캔버스, WebGL 또는 CSS3와 같은 최신 기능이 필요합니다.
이전 브라우저에서 사용하는 개발 시간이 너무 김
새로운 기능의 개발 시간 단축

Chrome 프레임은 이전 브라우저 사용자에게 사이트를 계속 사용할 수 있는 방법을 계속 제공하기 위한 전략을 제공할 수 있습니다.

Chrome 프레임은 'chromeframe'이라는 문자열로 호스트의 사용자 에이전트 헤더를 확장하여 사용 가능함을 전송합니다. 자세한 내용은 Chrome 프레임 사용자 에이전트를 참조하세요.

서버 측 감지를 사용하여 이 토큰을 찾고 페이지에 Chrome 프레임을 사용할 수 있는지 확인하세요. Chrome 프레임이 있으면 필수 메타 태그를 삽입할 수 있습니다. 그렇지 않은 경우 Chrome 프레임 설치 방법을 설명하는 페이지로 사용자를 리디렉션할 수 있습니다. 서버 측 스니핑의 대안으로 CFInstall.js 스크립트를 사용하여 Chrome 프레임을 감지하고 사용자에게 브라우저를 다시 시작하지 않고 플러그인을 설치하라는 메시지를 표시할 수 있습니다. 스크립트를 사용하는 방법은 간단합니다. 다음 예에서와 같이 스크립트 태그와 선택적 스타일을 페이지에 추가하기만 하면 됩니다.

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

직접 메시지 표시

방문 페이지 또는 레이어를 직접 만들 수도 있습니다. 사용자를 이 URL로 보내기

http://www.google.com/chromeframe/

이는 IFRAME에 넣을 수 있습니다.

설치가 완료된 후 사용자를 사이트로 다시 보내려면 다음과 같이 리디렉션 매개변수를 추가합니다.

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Chrome 프레임 방문 페이지로 이동하는 대신 사용자를 최종 사용자 라이선스 계약으로 직접 보내면 설치 과정 한 단계를 줄일 수 있습니다. http://www.google.com/chromeframe/eula.html

관리자 권한 필요 없음

사용자는 컴퓨터에 대한 관리자 권한 없이 Chrome 프레임을 설치할 수 있습니다.

다음과 같이 user=true 매개변수를 추가하여 Chrome 프레임의 사용자 수준 설치를 사용 설정합니다.

http://www.google.com/chromeframe/?user=true

기업용 설치

기업은 다음 위치에서 다운로드할 수 있는 MSI 설치 프로그램을 사용하여 Chrome Frame을 회사 전체에 배포할 수 있습니다. http://www.google.com/chromeframe/eula.html?msi=true.

Chrome 및 엔터프라이즈 배포에 관한 자세한 내용은 http://www.chromium.org/administrators를 참고하세요.

채택 현황

yahoo.com, wordpress.com과 같은 여러 주요 웹사이트와 여러 Google 서비스에서 Chrome 프레임을 사용하고 있습니다. 사용자가 여러 사이트에서 보다 현대적인 웹 환경에 액세스할 수 있을 뿐만 아니라 Chrome Frame은 초기 로드 시간도 크게 개선합니다. webpagetest.org로 이동하여 Chrome 프레임을 브라우저로 선택하면 Chrome 프레임이 사이트 렌더링 속도를 높이는 데 도움이 되는지 확인할 수 있습니다.

추가 정보

자세한 내용은 시작 가이드를 참조하거나 Google IO 2011에서 이 동영상을 시청하세요.