출퇴근 시간이 무료할땐 가끔씩 핸드폰을 사용해서 인터넷을 하곤 한다. 주로 뉴스를 보며 시간을 보내는데, 요즘엔 모바일 티스토리 (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을 붙여주도록 한게 전부다.
그동안 컴퓨터를 사용해서 인터넷에 접속하였다면, 요즘은 핸드폰과 같은 모바일 제품들을 사용해서 인터넷에서 접속하는 경우가 점점 증가하고 있다. 이러한 시대흐름에 맞춰 해당 제품에 최적화 된 모습을 보여준다는 것은 현재로써는 힘든 일이지만, 미래를 생각한다면 가치있는 투자임이 틀림없는 것 같다.
갑자기 생각난건데, 티스토리 블로그 외에 네이버나, 이글루스, 다음 블로그는 이런 최적화 버전을 제공하는 걸까? 궁금해진다.
