티스토리 뷰
dojo 프로젝트의 리더였던 alex가 구글로 자리를 옮긴뒤 첫 제품을 내놓았다.
"Chrome Frame"이라는 이름의 IE 플러그인(Active-X)이 그것인데, 기술적으로는 Firefox의 IE Tab 확장과 비슷하지만, IE Tab은 사용자가 명시적으로 IE로 보겠다고 해야만 활성화되지만, Chrome Frame은 색다른(?) 접근 방식을 제안한다(물론, 두가지 방식 모두 Chrome Frame이 깔려있을때만 동작한다):
1. (사용자가) URL 앞에 "cf:"를 붙인다. 예를 들면 http://acid3.acidtests.org/ 하면 IE가 X같은 반응을 보이지만, cf:http://acid3.acidtests.org/ 하면 잘 된다.
2. (개발자가) HTML 페이지에 <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 메타 태그를 달아놓으면 해당 페이지를 보는데 크롬을 사용한다.
첫번째 방식은 GUI 메뉴를 URL로 옮겨놓았을 뿐, 결과만 확인하고 넘어가자:
두번째 방식을 주목해보자. 이 방식을 사용하면 Chrome Frame 플러그인만 깔려있다면 자동적으로 활성화 된다. 그렇다면 Chrome Frame 플러그인만 자동으로(강제로) 깔 수 있으면... -.-ㅋ 뭔가 구린 냄새가 솔~솔~ IE로 인터넷 뱅킹이나 쇼핑몰 결제할 때만 되면 난리 법석을 떨던 ActiveX의 *랄 발광을 역이용(!)할 수 있다. 금상첨화(혹은 설상가상) 우리나라 사용자들은 ActiveX 설치할 때 "보안 경고"가 뜨면 무조건 "예"라고 해야 한다고 배워서 실천하고 있으니~ =..=
친철한 알렉스께서~ 우리를 위해 그 스크립트까지 만들어 놓으셨는데, 이를 이용해서 간단한 예제 하나 만들어 보자(IE로 http://iolo.pe.kr/acid3.html 에 접속해봐도 된다):
CFInstall.check() 함수는 기본적으로 지정한 노드(여기서는 placeholder)를 설치 페이지를 표시하는 iframe 태그로 바꾸서 설치를 유도하고, 설치가 끝나면 destination 페이지로 이동한다(자세한 설명은 공식 개발자 문서를 참조하시라~).
이런식의 스크립트를 웹 서비스의 진입부에 적당히 끼워넣어 두면... "부끄러운" 대한민국의 웹(한국 웹의 불편한 진실 참조)이 우리에게 강요했던 방식 그대로~~~ 크롬을 쓰도록 강요할 수 있다 -.-ㅋ
그런데, 구글은 이런걸 왜 만들었을까? 무엇보다도 구글이 만든 대다수의 초첨단(?) 웹 어플리케이션들을 돌리기엔 IE(6,7은 말할것도 없고 8도 도토리 기재기)의 렌더링 / 자바스크립트 엔진이 너무 구리기 때문일 것이다.
Chrome Frame이 널리 보급되기엔 넘어야 할 산이 많다. 첫째, 사용자 경험이 너무 거칠다. 플래시의 경우처럼 매끈하게(뭔가 설치한다는 느낌을 주지않고) 설치할 필요가 있다. 설치 유도 스크립트(CFInstall.js)를 많이 다듬어야 할 듯... 둘째, 다음으로 77M를 넘어서는 설치 용량이다. 사용자의 컴퓨터에 구글 크롬이 설치되어 있다면 이를 그대로 활용할 수 있을 것이다. 아마 조만간 그렇게 되겠지? 셋째, 아직은 버그가 많다. 첫술에 배부를 순 없겠지...
IE에선 느려터져서 못해먹겠던 벽돌깨기에 다시 도전해보자~
결론, 플래시 정도의 사용자 경험을 통해 설치할 수 있다면, IE용 페이지 따로 개발하는 대신 Chrome Frame을 써 볼만 하겠다.
"Chrome Frame"이라는 이름의 IE 플러그인(Active-X)이 그것인데, 기술적으로는 Firefox의 IE Tab 확장과 비슷하지만, IE Tab은 사용자가 명시적으로 IE로 보겠다고 해야만 활성화되지만, Chrome Frame은 색다른(?) 접근 방식을 제안한다(물론, 두가지 방식 모두 Chrome Frame이 깔려있을때만 동작한다):
1. (사용자가) URL 앞에 "cf:"를 붙인다. 예를 들면 http://acid3.acidtests.org/ 하면 IE가 X같은 반응을 보이지만, cf:http://acid3.acidtests.org/ 하면 잘 된다.
2. (개발자가) HTML 페이지에 <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 메타 태그를 달아놓으면 해당 페이지를 보는데 크롬을 사용한다.
첫번째 방식은 GUI 메뉴를 URL로 옮겨놓았을 뿐, 결과만 확인하고 넘어가자:
Chrome Frame 없이 IE8로 Acid3 테스트에 도전!
IE8을 가장한 Chrome으로 Acid3 테스트에 도전!
두번째 방식을 주목해보자. 이 방식을 사용하면 Chrome Frame 플러그인만 깔려있다면 자동적으로 활성화 된다. 그렇다면 Chrome Frame 플러그인만 자동으로(강제로) 깔 수 있으면... -.-ㅋ 뭔가 구린 냄새가 솔~솔~ IE로 인터넷 뱅킹이나 쇼핑몰 결제할 때만 되면 난리 법석을 떨던 ActiveX의 *랄 발광을 역이용(!)할 수 있다. 금상첨화(혹은 설상가상) 우리나라 사용자들은 ActiveX 설치할 때 "보안 경고"가 뜨면 무조건 "예"라고 해야 한다고 배워서 실천하고 있으니~ =..=
친철한 알렉스께서~ 우리를 위해 그 스크립트까지 만들어 놓으셨는데, 이를 이용해서 간단한 예제 하나 만들어 보자(IE로 http://iolo.pe.kr/acid3.html 에 접속해봐도 된다):
<html>
<head>
<title>acid3 test on IE with Chrome Frame</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<div id="placeholder">
<p><a href="http://acid3.acidtests.org">acid3 test</a></p>
<p><a href="cf:http://acid3.acidtests.org">acid3 test with Chrome Frame(IE Only)</a></p>
</div>
<script>
CFInstall.check({
node: "placeholder",
destination: "cf:http://acid3.acidtests.org/"
});
</script>
</body>
</html>
<head>
<title>acid3 test on IE with Chrome Frame</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<div id="placeholder">
<p><a href="http://acid3.acidtests.org">acid3 test</a></p>
<p><a href="cf:http://acid3.acidtests.org">acid3 test with Chrome Frame(IE Only)</a></p>
</div>
<script>
CFInstall.check({
node: "placeholder",
destination: "cf:http://acid3.acidtests.org/"
});
</script>
</body>
</html>
CFInstall.check() 함수는 기본적으로 지정한 노드(여기서는 placeholder)를 설치 페이지를 표시하는 iframe 태그로 바꾸서 설치를 유도하고, 설치가 끝나면 destination 페이지로 이동한다(자세한 설명은 공식 개발자 문서를 참조하시라~).
이런식의 스크립트를 웹 서비스의 진입부에 적당히 끼워넣어 두면... "부끄러운" 대한민국의 웹(한국 웹의 불편한 진실 참조)이 우리에게 강요했던 방식 그대로~~~ 크롬을 쓰도록 강요할 수 있다 -.-ㅋ
그런데, 구글은 이런걸 왜 만들었을까? 무엇보다도 구글이 만든 대다수의 초첨단(?) 웹 어플리케이션들을 돌리기엔 IE(6,7은 말할것도 없고 8도 도토리 기재기)의 렌더링 / 자바스크립트 엔진이 너무 구리기 때문일 것이다.
Chrome Frame이 널리 보급되기엔 넘어야 할 산이 많다. 첫째, 사용자 경험이 너무 거칠다. 플래시의 경우처럼 매끈하게(뭔가 설치한다는 느낌을 주지않고) 설치할 필요가 있다. 설치 유도 스크립트(CFInstall.js)를 많이 다듬어야 할 듯... 둘째, 다음으로 77M를 넘어서는 설치 용량이다. 사용자의 컴퓨터에 구글 크롬이 설치되어 있다면 이를 그대로 활용할 수 있을 것이다. 아마 조만간 그렇게 되겠지? 셋째, 아직은 버그가 많다. 첫술에 배부를 순 없겠지...
IE에선 느려터져서 못해먹겠던 벽돌깨기에 다시 도전해보자~
IE를 가장한 크롬으로 벽돌깨기!
결론, 플래시 정도의 사용자 경험을 통해 설치할 수 있다면, IE용 페이지 따로 개발하는 대신 Chrome Frame을 써 볼만 하겠다.
'hacking > web' 카테고리의 다른 글
| dW Live! 세미나 ‘웹 개발 다반사’ (2) | 2009.12.03 |
|---|---|
| 웹 기반 스펠 체커 API + 다음 오픈 에디터 플러그인 (4) | 2009.11.19 |
| Delightbox - dojo 기반의 Lightbox (0) | 2009.09.15 |
| 심심풀이 코딩 - 자바스크립트로 만든 벽돌깨기~ (7) | 2009.08.24 |
| Road to Web3.0 (2) | 2009.06.08 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- web
- 자전거
- CSS
- Eclipse
- 땅끝마을
- ****
- jQuery
- 노래
- Prototype
- webapp
- **
- ***1/2
- Ajax
- maven
- docker
- HTML5
- nodejs
- 자바스크립트
- 영화
- 해남
- ***
- 독후감
- Java
- 장필순
- JavaScript
- Dojo
- 책
- 여행
- DeveloperWorks
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
글 보관함