Tiny Logs 

호환성보기 IE 옵션은 최신 홈페이지의 주적! 대응 하는 법.

타이니 | 2013.09.12 19:49 | 조회 26,222
카테고리분류 : kimsQ Rb v.1.2.0~v.1.2.2
국내 실정상 대부분의 사람들이 IE 브라우저를 쓰면서 "호환성 보기" 옵션으로 사용합니다.
한글판 윈도우 버전은 기본 호환성보기 옵션으로 설치되기도 하고요.

특히 브라우저는 IE8 이상으로 업그레이드 했어도 아직 XP 쓰는 사람은 더더욱 그렇습니다.





위 도표는 2013년 8월의 국내 인터넷 사용자 웹브라우저 버전 통계입니다.

IE7 버전이 17%나 됩니다. 이해가 안가시죠? 게다가 점유율이 미세하게 오르네요?
그럴리가 없습니다. MS의 강제 브라우저 업데이트 정책 시작하고 요즘 실제로는 5% 미만입니다.

그런데 왜이리 아직도 많이 잡히느냐? 하면...
위 통계사이트는 "브라우저의 실제 렌더링 엔진"을 기준으로 통계를 잡고있고,
그놈의 "호환성보기" 설정 때문에 그렇습니다. IE9~10 브라우저를 쓰더라도 국내 구형 웹사이트 환경에서 이용이 편하도록 호환성보기 IE브라우저 설정을 하면 IE7으로 변신하게 됩니다.

구글 등 해외 웹로그 서비스의 경우 실제 브라우저 버전을 기준으로 하기 때문에 국내라 할지라도 IE7 실 사용자는 5% 미만으로 맞게 나오고 있습니다.

제 경우도 IE10을 쓸 때 보면 호환성보기 설정을 해 놓았기 때문에 (일부 은행사이트나 홈텍스 이용하려면 어쩔 수 없는 듯.) 접속통계의 로그를 보면 제 브라우저는 IE7 브라우저로 나옵니다.


이 IE의 "호환성 보기" 라는 놈이 아주 나쁜 놈인 게... 브라우저 렌더링을 무조건 IE7 엔진으로 합니다.

아주 구형 웹사이트인 경우 이게 효과를 발휘하지만, DTD를 HTML5로 하셨거나 최신 버전 브라우저에 맞추어 CSS나 JS를 구동하신다면 문제가 큽니다.

킴스큐는 비교적 최신의 JS나 CSS를 기준으로 되어 있고 마켓에 올라오는 익스텐션들도 최신의 브라우저 렌더링에 맞기 때문에 아래처럼 두 가지를 모두 적용해 주시면 좋습니다.

1. DTD 형식은 HTML5 로 하십시오.
 관리자페이지 - 홈페이지 - 사이트별 DTD 설정에서 하실 수 있습니다.
 기존 XHTML 에서 HTML5로 DTD를 바꾼다 해도 하위 호환성을 완벽히 유지하니 걱정마시고요.
 HTML5가 현재는 만능 DTD입니다.

DTD가 HTML의 첫 줄에 표시되지 않을 경우! 브라우저는 쿼크모드 또는 호환성보기 옵션으로 강제 렌더링하게 됩니다. 놓치지 마세요!

2. (중요!) 킴스큐 루트폴더의 index.php 파일에 아래 메타코드를 추가하십시오.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

위 메타코드를 index.php 파일의
<title><?php echo $g['browtitle']?></title>
이거 바로 윗줄에 삽입하십시오. meta charset 의 경우 DTD를 HTML5 로 했을 때, 현재 킴스큐에선 빠져있던데 없다면 추가해야 합니다.

이게 뭐냐면, 만약 사용자 브라우저가 호환성보기 설정이 되어 있다고 하더라도 무조건 현재 (최신) 설치된 IE 버전의 렌더링을 사용한다는 거고요. 또한 만약 크롬프레임 엔진이 깔려 있다면 크롬으로 렌더링 해서 보여준다는 뜻입니다.

기대되는 효과는...

호환성 보기 설정을 한 국내 대부분 사용자들은 브라우저가 IE8/9/10 이더라도 실제로는 IE7 사용자여서 홈페이지가 오동작 할 가능성이 크다. 이걸 방지. (그래야 IE7은 이제 신경 안쓰고 개발하지요. 실제 IE7 점유율은 매우 낮지만 그놈의 호환성보기 옵션때문에 점유율 이상의 더 많은 사람들에게 문제가 됩니다.)

3. 구형 브라우저의 크로스 브라우징 문제는 CSS, JS 관련 브라우저 버전별로 맞춤형 개발하려면 너무 할일이 많습니다.

일단, 킴스큐 유저라면 아래 익스텐션 한 번 살펴보시고요.

HTML5 Ready 스위치 익스텐션 : http://kimsq.cweb.co.kr/c/demo/switch/html5ready

위 익스텐션의 요점은 크로스브라우징 관련 도움 주는 오픈소스 설치해서 수고를 좀 덜어보자는 거지요. 아래 오픈소스들을 활용하는 스위치입니다.

ie7-squish.js 는 IE6/7 에서 마진이 두배로 크게 보이는 등의 치명적인 버그 몇개를 수정해 줍니다.

IE9.js 는 IE6-8 구형 브라우저를 비교적 신형 브라우저와 맞도록 조정해 줍니다. MiT 라이센스이며 홈페이지는 https://code.google.com/p/ie7-js/ 입니다.

normalize.css 는 MiT 라이센스이며 홈페이지는 http://necolas.github.io/normalize.css/ 입니다.
1점대 버전과 2점대 버전이 있는데 국내 실정상 1점대 버전을 스위치에서 썼습니다. 2점대 버전은 IE8+ 입니다.

html5shiv 는 HTML5 에서 추가된 시멘틱태그 등을 구형 브라우저에서 지원할 수 있게 해줍니다. MiT 라이센스이며 홈페이지는 https://code.google.com/p/html5shiv/ 입니다.


PS.
킴스큐 차기버전(v2.0)은 HTML5 기반인 것으로 압니다.
그래도 국내 실정에 맞게 위 메타코드가 꼭 들어가야 할 것으로 생각합니다.
메타 X-UA-Compatible 는 IE전용 메타정보 입니다.

이 글은 이미 킴스큐 광장에 비슷하게 올린 적 있지만, 도움 되는 상황이 많기에 이곳에 정식으로 포스팅 합니다.
크리에이티브 커먼즈 라이선스
22개(1/3페이지) rss


많이 본 글최근 90일내 많이 본 글입니다.
댓글 많은 글최근 90일내 댓글 많은 글입니다.
Tag Cloud
등록된 태그가 없습니다.

Visits Counter
  • 45오늘 방문
  • 96어제 방문
  • 45오늘 페이지뷰
  • 97어제 페이지뷰
  • 2,635이번 달 방문
  • 2,247지난 달 방문