티스토리 블로그 마크쿼리 반응형웹 스킨으로 교체-장단점과 유의사항

2002년도부터 개인 블로그를 운영하다가 2008년에 Tistory로 넘어왔는데, 그 동안 스킨은 초기에 잠깐 사용하던것 외에는 기존의 스킨을 계속 이용해 오다가 이번에 스킨을 교체를 했습니다.

반응형 웹 디자인(responsive web design) 개발이란 무엇이고, 왜 만들며, 어떤식으로 구현할까?

구글 애드센스 Go Multi-Screen 행아웃 세션-멀티스크린,반응형 웹디자인에 관련돤 세미나 소식

반응형 웹에 대해서는 이전 부터 관심은 있었지만, 마땅한 스킨도 많지 않았고, 티스토리 블로그가 워드프레스처럼 차일드 테마를 지원하지 않기 때문에 한번 스킨을 결정하면 업그레이드가 쉽지 않는것이 현실입니다.

그냥 귀차니즘으로 그냥 쓰자... skin이 중요한가? 컨텐츠가 중요하지 등등 자기 합리화를 하다가 몇일전에 티스토리 모바일 스킨이 좀 이상해서 바꾸기로 결심을 하고, 몇일간 반응형 웹 스킨을 알아보다가 마크쿼리로 결정을 해서 하루 종일 스킨 수정 작업을 하고, 어제 저녁에 드디어 스킨을 올렸습니다.

markquery 다운로드 홈페이지 - http://markquery.github.io/download/

위 사이트에서 스킨을 받아서 수정을 했는데, 이미 다른 블로그를 만들려고 했을때 한번 작업을 해서 그나마 좀 수월했네요.

http://userbook.tistory.com

IT분야 리뷰를 위 사이트로 옮기려고 마크쿼리 스킨을 가지고 좀 놀았는데, 현재는 그만두고 워드프레스로 이전을 했습니다.

사용설명서 블로그 - http://userbook.net

반응형 웹 스킨이라는것이 무엇인지, 궁금하신분은 위 동영상을 참고하시길 바라겠습니다.

그리고 애드센스 광고는 대부분 반응형 단위(화면 사이즈에 따라서 변화는 광고)로 부착을 했는데, 위 영상에 미디어쿼리를 이용해서 애드센스 광고를 적절하게 수정하는 방법을 설명해 놓았습니다.

이 부분을 잘 몰라서 adsense에서 권장하는 스마트 크기 조정을 이용하시기도 하는데, media query로 직접 수정을 하시는게 ctr, cpc 등에 더 유리할듯 합니다.

cmsFactory.net - http://www.cmsfactory.net/node/10149

베누시안 블로그 - http://martian36.tistory.com/

마크쿼리 외에 위 두개의 반응형 웹 스킨도 고려를 했지만, cmfFactory는 추후 업데이트가 없을듯 해서 포기했고, Venusian 님의 스킨은 기능이나 디자인적인 측면에서 아주 뛰어나지만 마크쿼리에 비해서 약간 무거운 느낌이라서 마크쿼리를 선택을 했습니다.

이외에도 찾아보시면 꽤 많은 반응형 웹 스킨이 있는데, 자신에게 맞는 스킨을 선택해서 설치하시면 됩니다.

티스토리 모바일웹 스킨 ON/OFF 기능과 반응형웹 블로그와 애드센스 광고 만드는 방법

스킨 설치는 어렵지 않고, 모바일 스킨을 끄시고, zip파일을 압축풀어서 올리면 됩니다.

설치전에 만약을 대비해서 기존 스킨은 꼭 백업을 받아두시는게 좋겠지요.

■ 티스토리 반응형웹 스킨의 단점

반응형 웹 스킨을 설치를 한다고, 마냥 좋은것만은 아닙니다.

html, css, javascript 에 대해서도 모르고, 스킨을 설치하면 그냥 위젯이나 사이드바 정도만 꾸미신다면 상관없지만,

자신의 입맛에 맞추어서 수정을 하신다면 저같은 초보는 생고생을 해야 합니다...-_-;;

티스토리는 유료 스킨, 플러그인 등이 없어서 개발자가 취미나 학습의 의미로 개발을 하는 정도인데, 그러다보니 문제가 생기는 경우 직접 해결을 해야 합니다.

반응형 스킨에서 티에디션도 반응형으로 만들기

자신의 티스토리 메인 화면인 티에디션 또한 제대로 작동을 하지 않는데, 위 글을 참고하시면 어느정도 해결이 가능합니다.

또 하나 몇일을 걸려서 스킨을 작성하고, 몇달간 최적화 작업을 조금씩 진행을 했는데, 제작자가 새로운 버전을 내놓으면 맨붕이지요... 그나마 코드 몇줄만 수정하는 정도면 상관없지만, 이번에 마크업쿼리가 3.0.0으로 버전을 올리면서 대대적인 수정을 한 경우... 기존 스킨을 그냥 쓰던지, 새로운 스킨으로 다시 일일히 수정 작업을 해야 하는데, 도대체 어디를 어떻게 수정했는지 알수가 없으니 참 난감합니다.

wordpress의 child Theme 같은 기능이 있으면 좋겠지만, 그건 힘들듯 한고, 암튼 이 점은 각오를 하시고, 한번 설치하면 꽤 오랜 기간 사용할 생각을 하시는게 좋을듯 합니다.

■ 티스토리 반응형 웹 스킨의 장점

단점도 좀 있기는 하지만, 장점이 물론 더 많습니다.

기존의 티스토리는 데스크톱 화면과 모바일 화면이 별도로 있었는데, 반응형 웹 스킨은 하나를 이용해서 양쪽을 모두 구현을 합니다.

티스토리 측에서 모바일 스킨을 제공을 하지만, 편집이 불가능하기 때문에 모바일 화면에 애드센스같은 광고나 구글 애널리틱스 추척 코드를 삽입하려면 본문에 일일이 삽입을 해야 했는데, 반응형 웹은 그런 고민이 단숨에 해결이 됩니다.

티스토리 모바일 페이지 CSS 스타일 문제와 애드센스 광고 데스크탑용이 중복되지 않게 본문에 삽입하는 방법

모바일 페이지에서는 a href 링크 css 스타일 수정도 하지 못했지만, 이제는 PC와 동일하게 작업을 할수 있습니다.

애드센스 광고 또한 반응형 단위를 사용해서 수익에도 더 많은 도움이 될듯합니다.

왼쪽은 이번에 설치한 반응형웹 스킨이고, 오른쪽은 티스토리의 모바일 페이지로 아이폰5에서 본 화면입니다.

반응형웹에서는 300*250 광고가 들어가도 컨텐츠가 충분히 보입니다.

하지만 티스토리 모바일 웹은 타이틀바 2개에 삭제 버튼, 댓글 버튼 등으로 iphone5의 반 이상을 차지하는데, 반응형 웹으로 불필요한 부분을 싹 걷어낼수도 있습니다.

이건 갤럭시 S4에서의 화면입니다.

모바일 기기별 화면 보기 - http://troy.labs.daum.net/

참고로 반응형 웹 스킨을 수정, 편집 하실 경우에 스마트폰, 테블릿, 크롬, 인터넷익스플로어(ie7, ie8, ie9, ie10) 등의 화면에서 문제없이 출력이 되는지도 확인을 하셔야 합니다.

특히나 ie6, ie7, ie8 에서는 특정 자바스크립트가 작동을 하지 않아서 보이지 않을수도 있는데, IE 개발자 모드에서 확인해 보시면 됩니다.

확인을 해보니 제 블로그에 반은 android Browser로 들어오고, 1/4 정도가 Internet Explorer로 접속을 하는데, 그중에서 IE8의 35%, IE7 21% 으로 50%가 넘는데 IE7 이하는 호환성에 문제가 있다고 하니 확인해 보시는게 좋을듯 합니다.