모바일에 최적화된 티스토리 블로그 (tistory m)

  출퇴근 시간이 무료할땐 가끔씩 핸드폰을 사용해서 인터넷을 하곤 한다. 주로 뉴스를 보며 시간을 보내는데, 요즘엔 모바일 티스토리 (tistory m)을 보면서 블로깅을 하고 있다. 오즈폰 풀브라우징 환경에서 최적화 된 버전을 보여주는 티스토리를 보면서 신기해 하면서 사용하다가 티스토리에서 본 블로그의 URL 뒤에 m이 있는 것을 발견했다. m은 mobile의 약자인듯 풀브라우징 폰에서 최적화된 모습을 보여준다. 확인을 해보니 티스토리에서 모바일 최적화 버전을 2008년말에 선보였고, 그동안 모바일로 인터넷을 할 기회가 없다가 최근에 모바일로 인터넷을 할 기회를 갖음으로써 발견하게 되었다.

 http://notice.tistory.com/1227 를 보면 모바일 최적화와 관련해서 자세한 정보를 얻을 수 있다. 결론은 URL 주소 뒤에 /m을 붙이면 모바일에 최적화된 티스토리 블로그를 사용할 수 있다는 것이다. 해당글의 댓글을 보니 티스토리의 모태가 된 테터툴즈부터 지원했다고 하는것 같다. 아무튼 모바일로 내 블로그에 접속을 하면 느리고, 모바일 브라우저의 화면자체가 일반 모니터와 다르게 작고 해상도가 낮아서 메뉴가 밑으로 처지는 현상을 보게 된다. 하지만 모바일 최적화인 /m을 붙이게 되면 말 그대로 모바일에 최적화 해서 보여준다.


  아르고 폰에서 블로그 주소를 검색한 모습이다. 모바일에 최적화 된 다음의 모습이다.


  바로가기를 누르게 되면 블로그로 접속하게 되는데, 이미지가 별로 없는 글이었음에도 불구하고 로딩시간이 길었다. 기본 티스토리 블로그 데이터 이외에 애드센스를 불러오고, 알라딘 책정보를 불러오면서 늦어지는 것 같아 보인다. 제일 큰 문제는 화면이 작아 메뉴가 밑으로 쳐진다는 것이고, 작은 브라우저 화면에 블로그 전체를 보여주려다 보니 텍스트 크기가 작아져서 가독성이 떨어진다는 것이다.

 그래서 모바일에서 블로그에 접속했을때 모바일 풀브라우징 최적화된 화면으로 보일 수 있도록 링크를 만들었다.

상단 메뉴에 MOBILE을 누르게 되면 모바일 최적화 버전으로 화면이 바뀌게 된다.


  모바일 풀브라우징 브라우저에 최적화 되니 가독성이 높아진 것을 확인할 수 있다.

 이런식으로 MOBILE을 눌렀을때 모바일에 최적화 된 화면으로 바뀌는 것을 정식으로 메뉴를 두어 제공하지는 않고 단지 URL에 /m을 붙일 경우 최적화 된 화면을 사용할 수 있게 하고 있지만, 간단하게 자바스크립트를 사용해서 위의 그림처럼 MOBILE을 클릭했을때 화면이 바뀌도록 스킨을 수정했다.

<li class="tab_mobile"><a href="#" onclick="goMobile()">MOBILE</a></li>

......

    function goMobile() {
        var path = location.pathname.substring(1);
        var mobile_path = "";
        if(check = isNaN(parseInt(path))) {
            var mobile_path = "/m";
        } else {
            var mobile_path = "/m/" + path;
        }
        location.replace(mobile_path);
    }

 수정한 내용은 별다른게 없고 MOBILE 링크를 클릭했을때 URL 주소에 /m을 붙여주도록 한게 전부다.


  그동안 컴퓨터를 사용해서 인터넷에 접속하였다면, 요즘은 핸드폰과 같은 모바일 제품들을 사용해서 인터넷에서 접속하는 경우가 점점 증가하고 있다. 이러한 시대흐름에 맞춰 해당 제품에 최적화 된 모습을 보여준다는 것은 현재로써는 힘든 일이지만, 미래를 생각한다면 가치있는 투자임이 틀림없는 것 같다.

 갑자기 생각난건데, 티스토리 블로그 외에 네이버나, 이글루스, 다음 블로그는 이런 최적화 버전을 제공하는 걸까? 궁금해진다.
,