제 블로그의 오랜 숙원사업이던 반응형웹을 드디어 적용 했습니다. ㅋㅋㅋ
▷ 추가내용 ◁
개인적인 사정으로 다시 예전 일반 스킨으로 돌아 왔습니다.
요즘 많은 사이트들이 반응형웹을 적용하고 있죠. 블로그 사이트들도 많이들 적용하고 있습니다. 저 역시도 반응형웹을 적용하고 싶었으나 엄두가 나지 않더군요.
일반 스킨을 바꾸는데도 몇일이 걸리는데 반응형웹으로 변경하면 더 많은 시간이 걸릴거 같아 엄두가 나지 않았습니다.
티스토리 PC 버전용 웹 스킨은 마음에 들지만 모바일 웹이 너무나 마음에 들지 았았기 때문에 언젠가는 바꾸리라 마음을 먹었습니다. 그래서 몇일 반응형웹 스킨을 찾아 보다가 사진찍는 삼촌님 스킨을 발견하고 마음에 들어서 적용을 시켰습니다.
이렇게 좋은 티스토리 반응형웹 스킨을 배포해 주신 사진찍는 삼촌님께 다시 한번 감사의 마음을 전합니다. (--)(__)(--)
현재는 어느 정도 스킨 수정 작업이 마무리 되어 갑니다. 확실히 반응형웹이 일반 스킨 보다는 시간이 좀더 걸리네요. 생각해야 할 부분도 많고 말이죠. ^^
반응형웹을 적용하면서 전체적인 디자인에도 많은 신경을 쓰지만 그중에 가장 신경을 쓰는 부분이 아마 애드센스가 아닌가 싶습니다. 저 뿐만이 아니라 블로그를 하시는 분들이라면 스킨 변경에 있어서 가장 신경이 쓰이는 부분이 애드센스가 아닐까 싶습니다.
기존에 쓰던 애드센스 코드를 다 삭제하고 반응형웹 애드센스 코드를 써야 하고 화면 사이즈 변경에 따라 바뀔수 있도록 코드를 수정해야 하기 때문에 많은 신경이 쓰입니다. 또한 여러 사이즈에서 보여 지는지도 확인을 해봐야 합니다.
가장 신경이 쓰이는 애드센스 반응형웹 코드를 생성하고 사용하는 코드 종류가 고급(코드수정필요) 입니다. 애드센스에서 권장하는 코드가 있지만 아무래도 사용자가 수동으로 원하는 사이즈에 맞게 애드센스가 변경되려면 고급 코드를 사용하는 것이 나을 것입니다.
위 코드가 애드센스 고급 부분의 기본 코드입니다. 여기서 사용자가 원하는 사이즈를 <style></style> 부분에 추가, 수정 하면 되겠습니다. 반응형웹 애드센스 사용 방법은 따로 설명 드리지 않겠습니다. 검색을 해보면 많은 분들이 알려 주고 있기 때문에 그 부분을 참고 하시면 될거 같습니다.
이렇게 반응형웹 코드를 최대 적용 개수인 3개를 사이트에 많이 적용 시킬 것입니다. 상단2개, 하단1개 라든지, 저처럼 상단 1개, 하단 1개, 사이드 1개 등 여러가지 형태로 적용을 시킬 것입니다.
▶ 문제 발생
이렇게 여러개의 반응형웹 코드를 적용하고 위치에 따라 사이즈만 다르게 적용하면 한가지 문제점이 생기더군요. 애드센스 코드를 적용하고 확인 하기 위해서 여러번 새로고침을 하는데 애드센스 코드에 내가 지정한 사이즈가 아닌 다른 사이즈가 나타 나더군요.
본문쪽에 보이는 애드센스는 제가 정한 최대 크기가 336X280 인데 이상하게 300X600 사이즈가 랜덤하게 나타 나더군요.
그리고 PC 버전 뿐만이 아니라 모바일 버전에서도 내가 지정한 사이즈가 아닌 다른 사이즈가 나타 나더군요.
모바일 쪽에는 250X250 을 지정 하였으나 랜덤하게 300X250 사이즈가 나타 나더군요.
▶ 문제 원인
전 처음에는 애드센스 고급 코드의 버그인줄 알았습니다. 반응형웹 코드 자체가 아직 베타 버전이기 때문에 버그 수정이 되어야 한다고 생각 했습니다.
하지만 아무리 버그 라지만 내 블로그에 이렇게 자꾸 지정한 사이즈가 아닌 다른 사이즈가 나타 나면 정책 위반에도 걸리고 보기에도 안좋아 해결 방법이 필요 했죠. 그러다 애드센스 코드 수정을 했더니 이런 현상이 나타나지 않더군요.
수정할 코드는 ".my_adslot" 부분입니다. 3개의 애드센스 반응웹 코드의 ".my_adslot" 의 이름이 같아서 어느 한쪽이 먼저 읽히는 부분의 코드의 사이즈를 따라 가는듯 보이더군요.
▶ 문제 해결
그래서 각각 애드센스 코드의 ".my_adslot" 이름을 다른 이름으로 변경 하였습니다.
제 임의대로 상단의 경우 ".my_adslot_top" 으로 수정 하였고 하단의 경우 ".my_adslot_bottom" 으로 사이드의 경의 ".my_adslot_side" 로 각각 변경 하였습니다. 변경시 위 코드에서 보시는 것처럼 기본 명칭인 ".my_adslot" 부분인 4군대를 모두 변경 하여야 합니다.
이렇게 하니 위에서 제 블로그에서 나타났던 사이즈 문제가 해결 되더군요. 더이상 해당 코드에서 제가 지정하지 않은 사이즈는 나타나지 않습니다.
만약 애드센스 반응형웹 각각의 코드 사이즈가 모두 동일 하다면 위와 같이 할 필요가 없습니다. 하지만 저처럼 애드센스 코드마다 사이즈가 다르다면 베타 버전인 애드센스 고급 코드를 사용할시 위와 같은 수정이 반드시 필요 하리라 생각 합니다.
어떻게 보면 이런것도 애드센스 자체의 버그라 할수 있을거 같습니다. 아직 베타 버전이라 이런 문제가 발생하는거 같은데 아무리 버그라 할지라도 애드센스 이기에 사용자가 좀더 민감하게 대처 해야 하지 않을까 싶습니다. 애드센스 자체 문제라고 넋놓고 있다가 계정 정지 되면 큰일 아니겠습니까... ㅋㅋㅋ
반응형웹을 사용하면서 애드센스 고급 코드를 사용한다면 위와 같은 문제를 한번 테스트 해보시고 문제가 있을시 반드시 수정 하시기 바랍니다.
[관련 글타래]
'블로그' 카테고리의 다른 글
| 티스토리 https 보안 연결 완벽하지 않다는 문제 해결 방법 (0) | 2019.03.03 |
|---|---|
| 티스토리 트랙백 스팸에 대한 임시 대처 방법 (18) | 2014.09.16 |
| 나 자신에게 부끄러운 2012 티스토리 우수블로그 선정 (13) | 2012.11.21 |
| 로그인이 필요한 사이트의 애드센스 크롤러 설정 방법 (11) | 2012.03.07 |
| 실시간 접속자수 통계 서비스 블로그 위젯 추천 Histats (18) | 2011.12.23 |
