티스토리 개편과 블로그 스킨 깨짐 현상 발견

티스토리 개편과 블로그 스킨 깨짐 현상 발견

 

본격적으로 블로그를 관리하면서 아침에 눈을 뜨자 마자 스마트폰으로 블로그를 확인하는 것이 일상이 되었습니다.

 

내가 잠들어 있는 사이 블로그 방문자가 얼마나 되는지, 수익은 어느 정도인지 확인을 하는데, 오늘 아침에 블로그에 접속을 해 보니 접속지연 현상이 일어났습니다.

한참동안 접속이 지연되더니 상단 네비게이션 바가 제대로 작동을 하지 않고 메뉴가 깨져 나오는 현상이 나타났습니다.

 

당연히 방문자 수도 약 절반 정도 줄었습니다.

 

PC에서 확인을 해 보니 마찬가지로 블로그가 망가져 있었고, 접속지연에 상단 네비게이션 바가 작동되지 않고 우측 메뉴바까지 하단으로 내려가 있었습니다.

 

바로 스킨편집으로 가서 상단 네비게이션 바 설정을 다시 했습니다.

우선은 정상적으로 화면이 나오는 다른 블로그에서 상단 네비게이션과 관련된 html 코드를 복사해서 붙여 봤습니다.

 

<!--F 상단 네비게이션 바 시작 -->

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

           <span class="lntoggle visible-xs"><i class="fa fa-list-ul fa-2x fa-fw"></i></span> 

           <div id="searchButton" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><i class="fa fa-search fa-2x fa-fw"></i></div>

           <div class="container">

             <div class="navbar-header">

               <div id="blog_title" class="visible-xs" style="overflow:hidden; height:50px; line-height:2.5em; font-size: 1.4em; font-weight: bold; text-align: center; color: white;">무림고수</div>

                      <a class="navbar-brand dropdown-toggle hidden-xs" data-toggle="dropdown" href="#">무림고수 <span class="fa fa-caret-down"></span></a>

                      <ul id="navbar-title-dropdown" class="dropdown-menu" role="menu">

                                 <li class="dropdown-header">Tistory Menu</li>

                                 <li><a href="/"><i class="fa fa-home fa-fw"></i> Home</a></li>

                                 <li><a href="/notice"><i class="fa fa-info-circle fa-fw"></i> Notice</a></li>

                                 <li><a href="/tag"><i class="fa fa-tag fa-fw"></i> Tag</a></li>

                                 <li><a href="/media"><i class="fa fa-video-camera fa-fw"></i> Media</a></li>

                                 <li><a href="/location"><i class="fa fa-map-marker fa-fw"></i> Location</a></li>

                                 <li class="divider"></li>

                                 <li class="dropdown-header">Admin Menu</li>

                                 <li><a href="https://walks.tistory.com/manage"><i class="fa fa-gear fa-fw"></i> Admin</a></li>

                                 <li><a href="https://walks.tistory.com/manage/entry/post" title="글쓰기"><i class="fa fa-pencil fa-fw"></i> Write Post</a></li>

                      </ul>

             </div>

             <div class="collapse navbar-collapse">

               <ul class="nav navbar-nav">

                 <li id="navbar-page"><a href="/"><i class="fa fa-home fa-fw"></i> Home</a></li>

                 <li id="navbar-tag"><a href="/tag"><i class="fa fa-tags fa-fw"></i> Tag</a></li>

                 <li id="navbar-guestbook"><a href="/guestbook"><i class="fa fa-book fa-fw"></i> Guestbook</a></li>

                 <!--F 필요한 티스토리 추가 메뉴가 있으시면 주석에서 꺼내 쓰세요

                 <li id="navbar-media"><a href="/media"><i class="fa fa-video-camera fa-fw"></i> 미디어</a></li>

                 <li id="navbar-location"><a href="/location">위치로그</a></li>

                 <li id="navbar-rss"><a href="https://walks.tistory.com/rss" onclick="window.open(this.href); return false" title="무림고수 구독하기"><i class="fa fa-rss fa-fw"></i> RSS</a></li>-->

               </ul>

                      <!--F 검색 모듈 -->

                      <s_search>

                      <form id="search_fix" class="navbar-form navbar-left" role="search">

                                 <div class="input-group form-search">

                                             <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }" class="form-control search-query" placeholder="Enter to search..."/>

                                             <span class="input-group-btn">

                                                        <button value="검색" class="btn btn-inverse" onclick="" class="submit"><i class="fa fa-search fa-lg" data-type="last"></i></button>

                                             </span>

                                 </div>

                      </form>

                      </s_search>

             </div>

           </div>

</div>

<!--F 상단 네비게이션 바 끝 -->

 

이렇게 수정을 하고 확인해 보니 다행히도 제대로 작동을 합니다.

 

 

네비게이션 바와 관련된 html 수정이 주효했을 수도 있고, html과 관계 없이 티스토리 자체에서 뭔가 정상화 되어 오류가 수정되었을 가능성도 있습니다.

 

제대로 작동을 하던 블로그 스킨이 왜 갑자기 문제가 생겼는지 알 수는 없지만 아마도 최근 티스토리 개편과 문제가 있을 수도 있다는 생각이 듭니다.

 

이번에는 쉽게 해결이 되었지만 앞으로도 이런 일이 발생한다면 블로그 스킨을 변경하고 다시 설정을 하는 큰 작업이 필요할 수도 있을 것 같습니다.

 

백업 블로그를 하나 만들어 둘 필요도 있고, 기본적인 html 공부도 해 두어야 향후 문제가 발생할 경우 빠르게 대응을 해서 피해를 최소화 할 수 있겠다는 생각이 듭니다.