소개
HTML5는 다음을 포함하여 웹 개발자 도구 상자에 여러 가지 멋진 새 도구를 추가합니다.
- 더 강력한 새로운 JavaScript API
- 벡터 그래픽용 SVG
- 2D용 캔버스 및 WebGL 3D 그래픽
- 둥근 모서리, 그라데이션 등의 CSS3
- 더 표현적인 마크업
물론 이 목록은 포괄적이지 않습니다. 웹 플랫폼은 크게 발전했으며 이전 브라우저와 최신 브라우저 간의 격차는 날마다 커지고 있습니다.
이제 모든 주요 데스크톱 브라우저에서 최신 버전의 HTML5 중 상당 부분을 지원하지만 오래된 브라우저가 계속 사용되고 있어 최신 기능을 채택하는 데 어려움이 있습니다.
Google Chrome Frame을 사용하면 최신 HTML5 페이지를 빌드하는 동시에 이전 브라우저를 사용하는 사용자가 콘텐츠를 볼 수 있도록 할 수 있습니다.
Google Chrome Frame이란 무엇인가요?
Google Chrome Frame은 Google Chrome의 렌더링 엔진을 사용하여 전체 브라우저 캔버스를 렌더링할 수 있는 Internet Explorer용 플러그인입니다. Chrome에서 제공하는 모든 HTML5 기능을 지원하며 Internet Explorer 사용자 환경에 원활하게 통합됩니다. Chrome Frame은 Internet Explorer 6, 7, 8, 9에서 사용할 수 있습니다. Chrome Frame은 IE6~IE8과 같은 이전 브라우저를 지원할 때 확실히 더 유용하지만, 예를 들어 애플리케이션에 WebGL이 필요한 경우 IE9 사용자에게 Chrome Frame을 요구하는 것도 유용할 수 있습니다.
HTML5 폴리필은 최신 브라우저로 원활하게 전환하는 또 다른 방법을 제공합니다. 안타깝게도 모든 기능을 에뮬레이션할 수는 없으며, 이미 최신 브라우저보다 느린 기존 브라우저에서 페이지 속도를 더욱 느리게 만듭니다.
사이트에 HTML5 기능이 필요하지 않더라도 Chrome Frame을 사용하면 더 나은 사용자 환경을 제공할 수 있습니다. 이미 설치한 사용자의 경우 일반적으로 렌더링 속도가 더 빠르며 이전 브라우저에서 지원되지 않는 기능을 사용할 수 있습니다. 물론 컴퓨터에 Chrome Frame이 없는 사용자를 위해 이전 브라우저를 계속 지원할 수도 있습니다.
서비스 선택하기
HTML 메타태그를 추가하거나 HTTP 헤더를 사용하여 Chrome Frame이 페이지를 렌더링하도록 사용 설정할 수 있습니다. 이는 중요한 사항입니다. 즉, 사이트에서 플러그인 또는 기본 렌더링 사용을 완전히 제어할 수 있으므로 사용자가 Chrome Frame을 설치하더라도 사이트가 손상되지 않습니다. 다음 코드 스니펫은 사이트에서 Chrome Frame으로 렌더링되도록 선택하는 방법을 보여줍니다.
옵션 1: HTTP-Header (HTTP 서버 (예: Apache) 구성에 추가할 수 있음):
X-UA-Compatible: chrome=1
옵션 2: 메타 태그 (HTML <head> 섹션에 붙여넣기)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
사이트에 이 중 하나를 추가하면 Chrome Frame이 사용자의 컴퓨터에 설치된 경우 Chrome Frame을 사용하여 페이지가 렌더링됩니다.
Chrome 프레임 메시지 표시
다음을 비롯한 여러 가지 이유로 이전 브라우저 지원을 완전히 지원 중단할 수 있습니다.
- 사이트에 HTML5 동영상, 캔버스, WebGL, CSS3와 같은 최신 기능이 필요합니다.
- 이전 브라우저에 소요되는 개발 시간이 너무 길음
- 새 기능 개발 시간 단축
Chrome Frame을 사용하면 이전 브라우저 사용자에게 사이트를 계속 사용할 수 있는 방법을 제공할 수 있습니다.
Chrome Frame은 호스트의 User-Agent 헤더를 'chromeframe' 문자열로 확장하여 사용 가능함을 전송합니다. 자세한 내용은 Chrome Frame 사용자 에이전트를 참고하세요.
서버 측 감지를 사용하여 이 토큰을 찾고 페이지에 Chrome Frame을 사용할 수 있는지 확인합니다. Chrome Frame이 있는 경우 필요한 메타 태그를 삽입할 수 있습니다. 그렇지 않은 경우 사용자를 Chrome Frame 설치 방법을 설명하는 페이지로 리디렉션할 수 있습니다. 서버 측 스니핑 대신 CFInstall.js 스크립트를 사용하여 Chrome Frame을 감지하고 브라우저를 다시 시작하지 않고도 사용자에게 플러그인을 설치하라는 메시지를 표시할 수 있습니다. 스크립트 사용은 간단합니다. 다음 예와 같이 스크립트 태그와 선택적 스타일을 페이지에 추가하기만 하면 됩니다.
<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 Frame 방문 페이지로 이동하는 대신 사용자를 EULA로 직접 보내 설치 프로세스에서 한 단계를 건너뛸 수도 있습니다. http://www.google.com/chromeframe/eula.html
관리자 권한 필요 없음
사용자는 컴퓨터에 대한 관리자 권한이 없어도 Chrome Frame을 설치할 수 있습니다.
다음과 같이 user=true 매개변수를 추가하여 Chrome Frame의 사용자 수준 설치를 사용 설정합니다.
http://www.google.com/chromeframe/?user=true
엔터프라이즈 설치
기업은 여기(http://www.google.com/chromeframe/eula.html?msi=true)에서 다운로드할 수 있는 MSI 설치 프로그램을 사용하여 회사 전체에 Chrome Frame을 배포할 수 있습니다.
Chrome 및 엔터프라이즈 배포에 관한 자세한 내용은 http://www.chromium.org/administrators를 참고하세요.
입양
yahoo.com, wordpress.com, 여러 Google 서비스 등 많은 주요 웹사이트에서 Google Chrome Frame을 채택했습니다. Chrome Frame은 사용자에게 여러 사이트에서 더 현대적인 웹 환경을 제공할 뿐만 아니라 초기 로드 시간도 크게 개선합니다. webpagetest.org로 이동하여 Chrome Frame을 브라우저로 선택하면 Chrome Frame이 사이트의 렌더링 속도를 높이는 데 도움이 되는지 확인할 수 있습니다.
추가 정보
자세한 내용은 시작 가이드를 참고하거나 Google IO 2011의 이 동영상을 시청하세요.