태터툴즈 1.0.4버전 버그

  밤새 태터툴즈 스킨과 씨름을 했습니다.
결국 블로그 안정화를 위해서 1.0.4버전을 포기하고 1.0.2버전으로 다운그레이드를 한 상태입니다. 다운그레이드 한 버전에선 모든 기능이 이상없이 잘 작동을 하는군요.

  1.0.4버전 버그가 무엇인고 하니..

  스킨을 손보기만 하면 여지없이 오른쪽의 사이드바가 밑바닥으로 주저앉아 버리는 겁니다.
말로 설명하기가 상당히 어려운데, 컨텐츠가 있는 중앙의 화면 바로 우측에 항시 붙어 있어야 하는 사이드바가 스킨을 손대기만 하면 컨텐츠가 있는 곳보다 아래쪽으로 내려가 있어 스킨이 보기 흉해지는 것입니다.
우측 사이드바에 무언가를 추가 하려고만 하면 사이드바의 위치가 하단으로 바뀌어 버립니다.

  파이어폭스에선 제대로 된 화면이 항시 출력 되는데, 익스플로러로 화면을 확인하면 위에 말한것과 같이 망가진 화면으로 출력이 됩니다. 저야 파이어폭스를 기본 브라우저로 사용하고 있으니 불편은 없지만, 제 블로그에 방문하시는 분들의 90%가 익스플로러를 사용하고 있다는 것을 감안하면 중대한 문제라 수정을 하지 않을 수가 없었습니다.

  처음엔 CSS가 문제인가 해서 뒤적거려 보고, 예전에 백업해둔 스킨을 적용해 보기도 하고 관련 자료를 찾으면서 시간을 보냈습니다. 여차하면 제가 새로 스킨을 제작해서 가져다 붙일려고도 해 봤는데, 스킨이라는게 아무 계획도 없이 있다가 ‘뚝딱’하면 만들어 낼 정도로 간단한 작업도 아니고, 간단하고 빠르게 만들면 지금 있는 스킨을 기본틀로 별 변화 없는 스킨이 만들어 질 것이 뻔 하니 그만 두기로 마음 먹고 왜 이런 문제가 일어 나는지 찾아보기 시작했습니다.

  처음으로 제 눈에 띄인 용의자는 CSS였는데요. 아무리 웹 표준을 준수해서 XHTML을 만들어도 스타일 시트의 해석이 다른 브라우저들과 IE가 틀리다는 것을 알아 냈습니다. IE에서만 나타나는 특정 버그도 있었구요. 아무래도 스타일 시트에 의해 IE가 버그를 일으키는 것이라 생각되어 한참을 뒤지고 뚝딱거려도 해결이 안되더군요.

  결국엔 망가지지 않는 기본 스킨을 적용한 후에 하나씩 수정하고 확인하면서 어떤 부분에서 문제를 일으키는 지를 살펴보기로 마음먹었습니다. 드디어 문제를 일으키는 부분을 찾아내고 그 부분을 수정 전으로 되돌렸는데도 틀어진 스킨이 돌아오지 않더군요. 그제서야 스킨이나 IE문제가 아니라 태터툴즈의 문제라고 결정지었습니다. 1.0.2버전으로 다운시킨 이후엔 스킨에서 그런 문제가 발생하지 않고 있습니다.

  정확이 어떤 이유에서 인지를 저도 파악하고 있지 못해 막연히 태터툴지 1.0.4버전의 문제로 생각해 두고 있습니다. 당장 1.0.2버전에선 똑같이 해도 같은 문제는 일어나지 않고 있으니까요.

  원래 태터툴즈 자체 방문자 카운터가 정확하질 않아서 제가 사용하고 있는 방문자 통계 프로그램인 ‘trace watch’의 카운터를 스킨에 연결하는 플러그인을 만들려고 했는데, 스킨에서 엉뚱한 문제가 발생하는 바람에 스킨만 붙들고 밤을 새고 말았습니다. 완전 허무하군요…;;;

  여튼, 스타일 시트에 대해 많은 검색을 해 보고 나서 여러가지 모르던 정보들을 많이 알게 되었는데요. 결론은 하나더군요.
  “IE는 웹 발전을 좀먹는 쓸모없는 존재이며, IE가 없어지면 웹프로그래머, 디자이너 들은 여러가지 브라우저를 두루두루 최적화 해야 하기 때문에 빡세진다…”
라는 결론에 도달했습니다.
아무리 생각해도 90%이상의 점유율을 가지고 있는 브라우저 임에도 발전이 너무 없었더라구요. 90%이상의 점유율을 가지고 있었기 때문에 그랬던 걸까요?
IE7버전에선 CSS에 대한 지원이 강해진다고 하니, 한번 기대해 봅니다.
적어도 지금처럼 엉뚱한 버그를 내 뱉어서 사람들을 고생시키진 않을테니까요.

일단 내용은 마무리 부분에서 조금 많이 샌듯 하네요..ㅋ

11 comments

  1. 안녕하세요:)

    태터툴즈의 버그는 아닌 것 같네요.

    utf-8형식으로 저장시 BOM(Byte Order Mark)이 들어가서 그런 듯 한데요. 에디트 플러스 사용자 이시라면 설정창에서 ‘파일’탭을 보시면 하단에 ‘Byte Order Mark 없는 UTF-8 지원’에 체크하시고 다시 저장해보시면 될 것입니다:)
    에딧플러스 외에 기타 다른 툴이시라면 사용하시는 툴에도 비슷한 설정이 있을 듯 하네요.

    실제로 소스보기해서 태그를 저장해서 보니 잘 나오네요:)

  2. 가로폭이 작아서 하단으로 내려가는 것같은데, 스타일파일에서 메인화면의 폭을 수정하시면 될듯하네요. 좌우여백까지 포함해서 다시 계산해보시는 것이 좋을듯 ^^;

  3. 몇몇의 특정 플러그인을 실행한상태로 쓰던 스킨에서 변경하게되면 사이드바가 주저앉아 버리는 현상도 있답니다 ^^;(전에 스킨을 무진장 수정해서 쓰다가 다른스킨으로바꾸니 주저앉은적이 있어서요 ^^;)

  4. 싸인펜님.. 지금도…-_- 오른쪽 메뉴가 아래로 밀려있는데요. 저도 그것 때문에 고생을 하긴 했지만 지금은 괜찮은 것 같아요. 왜 갑자기 아래로 밀려버렸는지…

  5. 저 같은 경우는 1.0.2 에서 알수 없는 특정한 상태에서 메뉴쪽이 가라앉는 버그가 있었습니다. 1.0.3로 업한 이후에는 안보이더군요.

  6. 오해입니다.
    해당문제는 IE 박스 문제이며,
    IE box hack을 쓰시면 해결됩니다.
    FF나 Opera, Safari에서는 내용이 넘쳐흐르면 자동으로 잘라주지만
    IE는 멍청하게도 그렇지 못합니다. 그래서 IE hack을 쓰거나
    본문에 overflow: hidden;이라는 캐스캐딩을 넣어주어야합니다.
    (overflow: auto;라는 방책이 있긴 합니다만 IE에서는 위아래로도 스크롤이 생겨서;; )

  7. 관심을 가져주신 모든 분들께 감사드립니다.
    스킨 문제는 해결이 되었습니다.
    다른 여러분들의 댓글이 많이 도움이 되었습니다만, 제 블로그의 경우엔 ‘소필’님이 적어주신 플러그인과의 충돌이었습니다.

    ‘블로그 생일’을 출력해주는 플러그인을 실행하면 사이드바가 아래로 떨궈지는군요.
    우선을 플러그인을 해제 해 둠으로서 문제를 해결했습니다.

    분명히 새벽에 완벽하게 마무리가 되었다고 생각하고 잠이 들었는데, 제가 마무리 되었다는 안도감에 플러그인을 실행해 놓고 확인을 하지 않고 잠든게 문제였네요^^

    많은 분들의 댓글 감사합니다^^

  8. 저도요ㅜㅠ 1.0.4로 업하고부터 IE에서 블로그 첫 접속시 사이드바가 주저앉고 새로고침을 해야 제대로 보입니다. 플러그인도 안 쓰고, 메인가로폭을 넓혀도 소용없네요ㅠㅠ

    1. CSS의 의존도가 높은 XHTML로 이루어진 블로그 스킨을 쓰고 계시고 IE에서만 발생 하는 문제라면, 위엣 분들이 댓글을 통해 알려 주신 IE의 CSS버그일 수도 있습니다.

      댓글로 모두 설명해 드리기엔 양이 너무 방대해서 구글 등을 통해서 “IE CSS버그”라고 검색 해 보시면 많은 정보를 얻으실 수 있을 듯 하네요.

      의외로 IE 6버전 까지는 CSS와 관련된 버그가 상당히 많더라구요…;;;

댓글 남기기