[반응형스킨 수정] IE7 최적화 작업
블로그의 스킨을 반응형으로 바꾸고 계속해서 수정과 확인 작업을 진행했습니다. 어느정도 최적화 작업이 진행되고 엄청난 만족감에 취하고 있을무렵 익스플로러 구버젼인 IE7 에서 블로그 화면이 깨진다는 것을 발견했습니다. 제가 사용한 반응형 스킨의 뼈대는 FastBoot 1.5.1 이므로 IE7 까지는 괜찮게 출력되는 버젼입니다. 하지만 제가 본문 article 과 사이드바의 위치를 바꾸고 여러 디자인을 바꾸는 과정에서 어떤 오류를 만들어냈는지 사이드바와 본문의 글이 겹치고, 애드센스 광고까지 오버랩되는 현상이 발생하였습니다.
익스플로러 6 이하의 버전까지는 포기할 수 있으나, IE7 으로 접속하는 손님은 무려 15% 나 되기 때문에 반드시 끌어모아야 했습니다. 그래서 고민했습니다. 다시 최초 배포버젼을 설치하여 블로그를 그냥 꾸미지 않을 것인가, 허접한 실력으로 다시 부딪혀 볼 것인가. 블로그를 장기적으로 운영하기 위해서는 후자가 정답이었기 때문에 다시 파헤쳐보기로 했습니다.
익스플로러 7 에서 블로그가 깔끔하게 출력되는 작업을 하는데 약 3시간이 소요되었습니다. 처음에 어떻게 접근해야 할지 몰라 HTML과 CSS를 마구 뒤져보았습니다. 마침내 문제를 해결지을 단서를 발견했는데 그 부분은 아래 박스와 같습니다.
<![endif]-->
<!--[if IE 7]>
<link href="./images/ie7.css" rel="stylesheet" />
<div id="ie_topbar">지식전당포 | <a href="/">Home</a>
본 반응형 스킨의 HTML 상단부분을 살펴보았더니, 위 내용이 적혀있었습니다. 정확히 뭔 내용의 함수인지는 모르겠으나, "만약에 IE7 으로 접속한다면 아래 링크된 CSS 를 사용하겠다."라는 내용 같았습니다. 그래서 스킨 파일 업로드 목록에 'ie7.css' 라는 파일명이 있음을 확인했습니다. 그래서 에디터 프로그램인 서브라임 텍스트(Sublime Text)를 사용해 해당 CSS 파일을 여러번의 수정하는 작업을 했습니다.
<Internet Explorer 7 에서 발생하는 오류가 담긴 문제의 CSS 파일>
그나마 다행인 것은 해당 ie7.css 파일의 코드분량은 일반 블로그 스킨의 CSS 분량보다 그 양이 훨씬 적다는 것 입니다. 그리고 불행인 것은 해당 css 파일을 조금씩 수정해가면서 저장하고 파일을 새로 업로드 했는데도 불구하고 조금의 변화도 생기지 않는다는 것 입니다. 점점 블로그 수정작업에 능숙해졌다고 생각했고 이 방법이 맞다고 확신하고 있었는데 익스플로러 7 버젼에서 바뀐부분이 전혀 없다는것에 거의 환장할 뻔 했습니다.
<IE7 에서 사이드바와 본문이 겹쳐서 나오는 문제의 화면>
위 사진은 처음 문제를 발견했을 때의 화면입니다. 물론 익스플로러 신버젼과 제가 주로 사용하는 크롬에서는 아주 잘 출력되고 있습니다. 하지만 익플 구버젼에서는 이렇게 화면이 망가져 애드센스에서 경고를 받을 수 있는 상황입니다. 하지만 IE7 에서만 적용되는 CSS 파일을 아무리 수정해도 어떠한 변화도 생기지 않았습니다. 이렇게 1시간쯤 시간을 보내다가 결국 알아낸 것은 '검색 기록 삭제'를 하지 않았다는 것 입니다.
<오류난 페이지를 방문했다면 반드시 검색 기록을 삭제해주는 습관>
저는 이때까지 오류난 페이지를 방문한 후 검색기록을 삭제하지 않고 수정된 CSS 화면을 기대하고 있었습니다. 다시 기본형 스킨으로 컴백할까 결정하기 직전이었는데 정신이 번쩍하는 순간이었습니다. 평소 티스토리 관리자 모드에서 css 를 수정하고 바뀐 화면을 확인할 때 그냥 새로고침 F5 키를 눌러왔기 때문에 습관적으로 여겨왔던 것인데 참 미련한 행동이었습니다. --;
HTML 과 CSS 를 수정후 변화가 없다면, 검색 기록을 완전히 삭제해보세요.
<문제의 ie7.css 의 일부분>
드디어 수정된 화면이 적용된다는 것을 발견하고, 본격적으로 css 수정작업에 들어갔습니다. 위 사진은 문제의 css 파일의 일부분인데, #sidebar 항목의 position 부분에 문제가 있었습니다. 사이드바의 절대 위치를 나타내는 absolute 가 사용되었고 강제적용인 !important 까지 들어간 상태입니다. 여기까지는 좋은데, 절대위치가 top : 0 ; right : 0 ; 으로 적혀있습니다. 본 스킨의 원래 디자인은 본문 article 박스가 좌측에 있고, 사이드바가 우측에 위치한 형태입니다. 그냥 나름 개성적으로 꾸민답시고 좌우 위치를 바꿨던 것에서 이런 고생을 할 줄은 몰랐네요. 그래서 위 명령어중 right : 0px !important; 라고 적힌 부분을 left : 5px !important; 라고 수정했습니다. 그리고 익스플로러 구버젼의 쿠키와 검색기록을 삭제한 후 페이지를 다시 열어보았습니다.
<position : absolute ; left : 5px ; 를 적용한 화면>
본문에 겹쳐있던 사이드바가 드디어 화면 좌측으로 이동했습니다. 대신 본문의 위치가 우측으로 밀려난 현상이 발견되었고, 본문 좌측의 빈공간을 없애주기 위해 content 부분에 float : left 를 적용했습니다. 그리고 역시 수정된 화면을 보기 위해 검색 기록을 삭제해주었지요.
<완성 직전의 상태>
사이드바와 본문 영역이 거의 제자리를 찾아 돌아왔지만, 사이드바의 300*600 광고의 일부분이 짤리는 현상이 발생했습니다. 아무래도 본문 content 영역 좌측에 margin-left : 50px 를 적용해야 할 것 같습니다. 그리고 사이드바 상단에 위치한 카운터(counter)의 크기도 조정하기로 했습니다. 내친김에 IE7 으로 접속하였을 경우 "본 블로그는 구글 크롬에 최적화 되어있습니다." 라는 문구가 나오며 크롬을 다운받을 수 있는 링크를 걸어놓기로 했습니다.
크롬의 사용을 권장하는 문구는 HTML 에서 적어야 합니다. 위 사진의 12번째 라인을 살펴보면 <a href="크롬 다운 링크"> 크롬 사용 권장 문구 </a> 로 적어놨습니다. 정말 마지막 수정이라 생각하고 바꿔야 할 부분을 모두 수정한 후 IE7 에서의 최종화면을 감상해보았습니다.
기본스킨의 하늘색 헤더 부분을 IE7 에서도 흑색으로 출력되도록 수정했고, 카운터의 폰트 스타일, 애드센스가 짤리지 않도록 본문 좌측에 여백도 추가했습니다. 한동안 블로그에 대한 고민을 생기지 않을 것 같습니다. 이때까지 확인한 브라우저는 IE7, IE8, IE11, 크롬 입니다. 내일 IE9 와 IE10, 기타 브라우저에서도 확인을 해보고 당분간은 스킨 수정을 하지 않았으면 좋겠네요. ^^
<함께 보면 좋은 글>
