티스토리 블로그 마크쿼리 반응형웹 스킨으로 교체-장단점과 유의사항
2002년도부터 개인 블로그를 운영하다가 2008년에 Tistory로 넘어왔는데, 그 동안 스킨은 초기에 잠깐 사용하던것 외에는 기존의 스킨을 계속 이용해 오다가 이번에 스킨을 교체를 했습니다.
반응형 웹 디자인(responsive web design) 개발이란 무엇이고, 왜 만들며, 어떤식으로 구현할까?
구글 애드센스 Go Multi-Screen 행아웃 세션-멀티스크린,반응형 웹디자인에 관련돤 세미나 소식
반응형 웹에 대해서는 이전 부터 관심은 있었지만, 마땅한 스킨도 많지 않았고, 티스토리 블로그가 워드프레스처럼 차일드 테마를 지원하지 않기 때문에 한번 스킨을 결정하면 업그레이드가 쉽지 않는것이 현실입니다.
티스토리 모바일 스킨 이상 현상과 반응형웹 스킨으로 이사를 갈까 고민중
위 사이트에서 스킨을 받아서 수정을 했는데, 이미 다른 블로그를 만들려고 했을때 한번 작업을 해서 그나마 좀 수월했네요.
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 이하는 호환성에 문제가 있다고 하니 확인해 보시는게 좋을듯 합니다.
몇일 고생을 하기는 했지만... 바꾸고 나니 왜 진작 바꾸지 않았나 싶은 생각도 드네요...^^
많은 분들에게 권해드리고는 십지만, html, css, javascript에 대해서 거의 모른다면 쉽지 않은 일인데, 초보자 분들이라면 마크쿼리 보다는 베누시안님이나 다른 반응형 스킨을 이용해서 한번 도전을 해보시면 좋을듯 합니다.
처음부터 블로그에 스킨을 바꾸어서 고생을 하기 보다는, 하나의 계정당 5개의 블로그를 만들수 있으니 테스트 블로그를 만들어서 해당 계정에 반응형 스킨을 설치해 테스트부터 해보시는게 좋지 않을까 싶습니다.
암튼 멋진 스킨을 제공해 주신 마크쿼리님께 감사드립니다!
구글 애드센스 검색 엔진 광고 2개 설치시 Google 브랜드 로고가 사라지는 경우 해결 방법
유튜브 동영상 검색-네이버,다음,구글 검색엔진 결과 비교와 미래는?
애드센스 320*100 큰 모바일 배너 광고 단위 추가로 수익증대 기대와 티스토리는?
티스토리 블로거를 위한 애드센스 정책 행아웃 온에어 세션 정리-AdSense 주의사항
행아웃 온에어 세션, Mobile광고 Adsense 모바일의 기회에 대한 강연 정리