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

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

· 13년 전 · 1285 · 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]

게시글 목록

번호 제목
28403
28402
28401
28398
28397
28394
4504
26593
4502
18132
28388
4496
4491
4486
4483
4482
4479
18122
18120
26590
18113
24419
4474
4465
4461
4460
4451
26589
퍼블리셔 이뻐요^^
4450
4448
24418
31037
26390
4446
26585
26581
26578
18098
4443
18097
26388
18094
30596
26387
18091
4445
18088
18086
18085
18082
18081
18078
18076
18074
18072
18070
18069
18066
18064
18057
18056
30588
18055
18054
30585
18051
18050
18048
18047
18044
26386
18042
30580
4425
18039
18037
18031
18028
18027
18022
18018
18016
18009
4423
18003
18000
17999
17996
17993
17989
17987
17986
17985
17984
4411
17979
30576
26383
17975
30569