테스트 사이트 - 개발 중인 베타 버전입니다

CGF 사용 방법 (지운아빠님 보시면 참조되실 것 같아서. ㅎㅎ)

· 13년 전 · 1284 · 2
이메일 정리하면서 보니까 오리스키님이 술드시면서 제 얘기 하셨다는 내용도 있고. . . . ㅋㅋㅋ

한국에 태풍이 왔다는데 오리님은 무사하신지...

오래간만에 sir.co.kr 이 생각나서 들려 봅니다.  

"당신이 만든 프로그램을 설치하니 인터넷이 빨라졌습니다.  감사합니다."  - 이런 이메일을 한통 받았는데, 참 기분이 좋더군요.

한 몇달전? 반년전? 에도 GCF 에 대해 언급을 했었는데 (관리자님이 스크랩 해놓으신다고 하셨어서 기분이 참 좋았던. ㅎㅎ)

제가 받은 위 이메일은 제가 어떤 프로그램을 짜서 받은게 아니라, 한달전 어느 웹사이트를 하나 만들며 GCF 를 설치했기때문에 받은 이메일 입니다. 

GCF (구글 크롬 프레임) 설치방법 (무지 간단해요)

메타에 이렇게 한줄 넣으면 끝입니다.

<meta http-equiv="X-UA-Compatible" content="chrome=IE8" /> (IE 9 이하에서)

or
<meta http-equiv="X-UA-Compatible" content="chrome=1" /> (모든 IE 버전에서)

이렇게만 한줄 넣으면, 구글 크롬에서 사용하는 모든 html5 요소 (canvas 같은), css3 transition, css3 animation 등의 효과, border-radius, 그림자, 등등,, 

암튼 방문자의 IE 브라우저를 99% 구글 크롬으로 변환시켜 줍니다.  (GCF 에서는 iframe 에 넣은 스크립팅이 먹통이 됩니다.)

옆에 보니까 지운아빠님이 sir.co.kr 사이트 리뉴얼 하시던데, (v15.js 라는 파일도 잠깐 훌터봤습니다.)
IE8 상에서 GCF 를 사용하시면 자스 처리속도가 20배나 빨라집니다.

(구글의 v8 엔진의 자스 처리속도가 IE 에 비해서 20배 빠른거죠.)

이래서 미국 웹사이트들은 거의 전부다 GCF 를 사용합니다.

물론 메타에 저렇게 한줄 넣어준다고 IE 가 자동으로 구글크롬화 되는건 아니고, 방문자가 GCF 를 설치해 줘야 합니다.

여기로 가서.

http://www.google.com/chromeframe/eula.html?quickenable=true&hl=ko (지금보니 한국어도 있네요.)

이부분을 자동화 해줘야 합니다.  (내공이 부족하신 초보자이신 경우, 자동화는 힘드실거고 그냥 저거 배너 하나에 안내문구 넣고, 링크 거시면 되겠죠?) 

정리하자면 (sir.co.kr 인 경우)

index.php 에 

1. 메타태그를 넣어주고
2. GCF 를 디텍팅 (어떻게?  오버로드 띄우시던가 오브저버 띄우신던가.. ㅋㅋㅋ)
농담이고, 관리자님이 잘 아시겠지만, php 로는 string 디텍팅 해주는 strpos 를 사용하면 된답니다. 

이런식으로.

$userAgent = $_SERVER['HTTP_USER_AGENT'];
if(
    strpos($userAgent, 'chromeframe') !== false

(저는 php 는 까막눈이라 제가 아는 자스로 처리했습니다.)

요런식으로.

var i = new ActiveXObject('ChromeTab.ChromeFrame');
        if (i) {
          return true;

액티브 X 토큰을 디텍팅 한거죠.

3. 그리고 GCF 스트링/토큰이 디텍트 안 된다, 이러면 IE 에 한해서 (<!--[if lt IE 10]> : IE10은 지원된다니까 10 이하에서만) 모달 하니 띄워주시고,

이런식으로,

1.jpg




그래서 GCF 가 설치되어 있지 않은 경우에만 저 모달 창이 뜨도록.

이게 전부 입니다.  

이런식으로 GCF 사용을 해주면 코딩하는 디자이너 입장에서는 천국이죠. ^^  사용자들에게는 "인터넷이 빨라졌어요", 이런 칭찬도 듣고. ㅋㅋㅋ

한국에서는 IE 때문에 html5 지원이 안되니까 css3 도 안되니까, 이러면서 새로운 코딩을 배우지 않고, 계속 이미지 떡칠만 하고 있으면 디자이너로서 발전이 없을 것 같습니다.  

웹사이트 속도면에서도,

 http://new.sir.co.kr/img/index.png (이거 파일 하나가 무려 74kb 가 넘네요. -..-;;)

이미지 사용 없이 거의 흡사한 모습을 css3 로만으로 만드실 수 있습니다.  

불필요한 이미지 사용을 없에면 사이트가 훨씬더 가벼워지죠. 

html5 shiv 같은 개별적인 자스보다, 모든걸 한방에 해결해주는 GCF 를 강추합니다.

그럼 태풍 조심하시고 안녕히 계세요.  오리스키님 술 넘 많이 드시지 마시구용. ^^  (간을 생각해야죠. 간을.  오리간은 비싼 음식인데, 오리간이 망가지믄... ㅋㅋㅋ)

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

아, 좋은 정보네요. 감사함다...추천도 스크랩도!!!
13년 전
css3 로 이것도 되나요? 그렇다면 방법이나 코드 좀 굽신굽신...
흡사한 거 말고 동일하게 만드는 방법이요.
[http://sir.co.kr/data/cheditor4/1209/39e15c08affa1dcc17ae6a993a99d4f5_XfF7LfegYqYdgImkDRo4os.png]

게시글 목록

번호 제목
32341
32339
32326
32325
32322
32319
32318
32316
32315
32313
32312
32311
32310
32304
32303
32300
32293
32292
32291
32285
32284
32275
32271
32268
32265
32261
32258
32257
32255
32254
32253
32251
32250
32249
32247
32246
32245
32244
32243
32242
32241
32240
32239
32238
32237
32236
32232
32229
32228
32227
32217
32215
32214
32213
32211
32207
32196
32193
32192
32190
32188
32186
32184
32173
32172
32171
32167
32165
32163
32162
32158
32157
32155
32151
32149
32135
32132
32127
32125
32122
32120
32119
32117
32116
32115
32114
32112
32111
32109
32107
32104
32103
32102
32101
32094
32089
20404
31036
8279
8268