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

 

몇일전에 tistory측에서 모바일웹 스킨 on/off라는 기능을 만들었습니다.

일반 사용자라면 이게 뭐야라고 생각할수도 있을텐데, 기본적으로 티스토리는 PC컴퓨터 데스크탑에서 접속했을때의 일반적인 웹과 아이폰, 안드로이드폰, 아이패드와 같은 태블릿으로 들어올때의 모바일웹 두가지 화면을 지원을 합니다.

이런 경우 무난하기는 하지만, 요즘 액정이 큰 패블릿이나 테블릿에서 모바일 페이지로 들어가면 보기가 불편한데, 모바일 웹 스킨을 off 를 시켜서 반응형 웹으로 만들수 있는 기회를 제공한것입니다.

티스토리 모바일웹 스킨 ON/OFF 기능 오류 버그와 해결 방법-스마트폰에서 데스크탑 페이지가 보입니다!

현재 모바일웹 스킨을 off로 만들고, 스마트폰에서 자신의 블로그를 들어가보면 이전같은 모바일 스킨이 아니라, PC에서 보던 화면이 나올껍니다.

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

위 동영상을 보시면 대략 감이 잡힐텐데, 반응형웹에 대해서는 본적도 있을텐데, PC와 모바일을 두개의 화면으로 나누는것이 아니라, 사이즈에 따라서 화면이 보여지는 방식을 바꾼것입니다.

이러면 블로거의 역량에 따라서 자신의 블로그의 모바일 웹 스킨을 사용하지 않고, 사이즈에 따라서 크기가 달라지는 블로그를 만들수 있게 됩니다.

물론 일반인들이 하기에는 쉽지 않을것이고, 개발자나 스킨개발자분들이 스킨을 만들어서 공개를 한것을 가지고 사용을 해야겠지요.

http://explorer36.tistory.com/

http://webdesigncss3.com/?p=2055

찾아보니 벌써 반응형 티스토리 스킨이 나와있네요~

현재 사용이 가능한것은 google adsense 에서 베타로 광고 사이즈가 정해져 있지 않은 기타 - 반응형 광고 단위가 나와있습니다.

애드센스에 가서 광고단위 만들기를 하면 기존에 없던 기타 반응형이라는 항목이 있는데, 이걸로 만들수 있습니다.

이것의 코드를 보면 좀 독특한데, 사이즈에 따라서 광고 단위를 바꾸어주는것입니다.

사용자가 컴퓨터에서 넓은 화면에서 들어오면 넑찍한 광고를 보여주고, 화면이 작은 액정의 smartphone에서 들어오면 작은 사이지의 광고단위를 보여줍니다.

해당 광고를 본문에 삽입을 했습니다.(PC용 스킨에 넣어도 가능합니다.)

모바일 페이지로 들어가서 화면을 크게 하고, 페이지를 열면 위처럼 페이지에 맞도록 최적화된 큰 사이즈의 광고가 보여지네요~

약간 화면 사이즈를 줄였더니 이런 식의 화면이 보여지는데, 대략 아이패드나 갤럭시탭, 갤럭시 노트정도의 화면으로 생각하시면 됩니다.

화면을 가장 작게 만든후에 다시 조회를 하니 광고가 아주 작은 단위로 바뀌네요.

현재 광고가 문제인지, 티스토리 모바일 웹 스킨이 문제인지는 모르겠지만, 화면을 늘리거나 줄일때 광고사이즈가 변경이 되는것은 아니고, 조회하는 당시의 화면 사이즈에 맞추어서 광고가 나오더군요.

참고로 이 반응형 광고단위는 반응형 홈페이지에서만 사용해야 하며, 일반 홈페이지나 블로그에서는 사용하면 안된다고 합니다!

실제 애드센스 광고를 삽입해서 블로그에 보여지는 방식의 동영상입니다.

반응형 웹과 애드센스 연동 구글 애드센스 홈페이지 바로가기

원래 제대로 되려면 화면 사이즈를 줄일때마다 광고단위가 바뀌어야 하는데, 뭐 솔직히 일반 사용자가 그렇게 사용하지는 않겠지만, 그부분은 좀 아쉬운듯 합니다.

뭐 이런 반응형웹이 지금도 인기를 끌고 있고, 최근에 google android나 apple iphone나 화면의 파편화로 개발자나 블로거라면 어떤 화면에 최적화를 해야할지 고민이 많을텐데, 이런 경우 기존의 티스토리처럼 일반화면과 모바일 웹을 사용하시는것도 좋지만, 사용자별로 최적화할수 있도록 반응형웹을 만들면 좋기는 할껍니다.

스마트폰(테블릿)에서 인터넷 접속시 모바일페이지가 아니라 테스크톱 PC화면으로 보는 방법-돌핀브라우저 user agent ua변경

주위에 갤럭시노트처럼 5인치이상이 되는 스마트폰인 패블릿을 사용하는 경우에는 모바일웹이 보이는것이 불변해서 돌핀브라우저를 이용해서 강제로 PC화면으로 ua를 변경하는 경우가 있는데, 반응형 앱을 이용한 스킨을 사용한다면 우리가 원하는 방식으로 바꾸어 줄수 있겠지요?

아마 장기적으로는 현재의 모바일스킨을 별도로 사용하기보다는 티스토리 스킨 개발자들이 다양하고 괜찮은 반응형 웹 스킨을 만들어 준다면 앞으로 더 다양해지고, 파편화가 이루어질 스마트폰 시장에 좋은 기회가 아닐까 싶고, 한편으로는 워드프레스(wordpress)처럼 스킨이나 플러그인 시장이 유료화 되면 더 좋은 skin, plugin 등이 만들어 지지 않을까 싶습니다.

뭐 일반 사용자라면 이런것이 있다는정도만 알아두시고, 차후에 반응형웹 스킨이 나오면 한번 사용해보시면 좋을듯 합니다.

구글 애드센스 부정클릭으로 계정중지에 대한 생각과 올바른 대처 방법은?

구글 애드센스, 모바일 본문 상단 광고삽입과 광고단위 사이즈 문제점과 해결방법 상담내용 정리

참고로 저같이 본문 상단에 애드센스 광고를 삽입한 경우에 일일이 지우지 못했는데, 애드센스측에 경고를 받아서 3일내에 도저히 지울수 없는 경우 모바일 스킨을 off 시켜서 계정중지나 정지를 막는 편법으로 사용해도 되지 않을까 싶은 생각도 드네요...^^