※ 요약

모바일 기기가 많아 짐에 따라 블로거들 사이에서 반응형 스킨이 인기다. 필자도 반응형 스킨으로 교체한지 얼마 안되었는데 문득 다양한 모바일 기기들에서 필자의 블로그가 잘 나오는지, 잘 나온다면 어떤 모습으로 나오는지 궁금해졌다. 그래서 찾게된 사이트가 다음 트로이라는 사이트인데, 애플과 삼성은 물론이고 팬텍, HTC, 소니, 샤오미, 화웨이, ZTE 등 많은 회사들의 다양한 기기들에서 자신의 블로그가 어떻게 보여지는지 알 수 있다. 단점으로는 최신 기기는 아직 목록에 없다는 것 정도. 


※ 사이트 링크


※ 사용 방법

사용법은 간단하다. 중앙 상단에 자신의 블로그나 사이트 주소를 넣고 좌측 리스트에서 원하는 기기를 선택하면 된다.



아래는 갤럭시 노트4와 아이폰6로 필자의 블로그를 본 모습이다. 아래 가상 기기 내에서 링크 등의 클릭도 가능하니 자신이 작성한 글이 어떤 모습으로 보이는지도 확인해보자. 포스트를 작성할때 어떤식으로 최적화해야할지 알 수 있게되어 도움이 될 것이다.


※ 요약

필자는 얼마 전까지 티스토리에서 지원해주는 Life In Mono 스킨을 사용하다가 16년 05월 14일 날 toDiava님이 제작한 toPiece라는 스킨으로 교체했다. 스킨 교체는 거의 3~4년 만에 한거 같은데, 오랜만에 스킨을 바꾸다 보니 준비할 것도 많았고 예상치 못한 것도 있어서 정리하여 글로 남기고자 포스팅한다. 그래야 다음번에 고생을 덜 하므로.

※ 스킨 교체 이유

필자는 2010년 6월부터 블로그를 시작하였다. 이때만 해도 모바일 기기가 별로 없었는데, 시간이 지날수록 모바일 유입이 많아지다 보니 요즘 대세인 반응형 스킨을 고려하게 되었고, 마음에 드는 스킨이 있어서 적용하게 되었다. 물론 스킨을 바꾸면 방문자가 줄어든다든지, 수익이 줄어든다든지 하는 말이 있었지만 언젠가는 바꿔야 하기에 교체하기로 마음을 먹었다.

※ 스킨 교체 절차 개요

1. 반응형 스킨 선택
2. 임시 블로그에 선택한 스킨 테스트
3. 메인 블로그 백업
4. 메인 블로그에 스킨 적용
5. 애드센스 적용
6. 소스 코드 하이라이터 적용

※ 절차1 - 반응형 스킨 선택

반응형 스킨을 선택하는데 한 달 정도 걸린 거 같다. 마음에 드는 것도 별로 없었고, 절실하게 찾지도 않았고, 여유 있는 마음으로 찾다 보니 한 달이나 걸렸다. 스킨을 적용한 지금도 새로운 스킨을 찾고 있다.

※ 절차2 - 임시 블로그에 선택한 스킨 테스트

필자가 선택한 반응형 스킨 후보는 3개 정도였다. 소스코드를 수정해가며 3개를 번갈아가며 테스트했고 애드센스 및 기타 소소한 부분까지 테스트하려고 노력했다. 테스트한 기간은 4일 정도다. 

※ 절차3 - 메인 블로그 백업

스킨도 선택했고 테스트도 끝났겠다 이젠 적용만 하면 되는데, 혹시 몰라 메인 블로그 스킨 관련된 것들을 백업했다. 백업한 것들은 아래와 같다.
- skin.css
- skin.html
- 사이드바 설정
- 플러그인 설정
- 화면 설정
백업한 것들은 실제로 새로운 스킨 적용 후 몇 번 참고 하였으므로 필히 백업할 것을 권장한다.

※ 절차4 - 메인 블로그에 스킨 적용

소스 코드가 수정되었고 테스트도 끝난 스킨을 메인 블로그에 적용했다. 별 문제 없이 잘 적용되었다.

※ 절차5 - 애드센스 적용

3~4년 전에는 html 코드에 직접 애드센스 코드를 사용자가 넣어줬었는데, 요즘은 플러그인으로 되어 있어서 바로 적용했다. 단, 플러그인으로는 본문에만 애드센스가 적용되므로 글 목록 상하나 사이드바, 기타 필요한 곳에는 html 코드에 직접 넣어주었다. 물론 테스트할 때 코드에 직접 넣어주었으므로 스킨 적용 후에는 수정하지는 않았다.

※ 절차6 - 소스코드 하이라이터 적용

필자는 개발자라 코드 하이라이터를 적용했다. 물론 새로운 것들이 많았지만 기존에 올린 글들의 호환성을 생각하여 기존 것을 버전업만 하여 적용했다.


※ 스킨 적용후 변화

스킨 변경으로 인한 방문자 변화는 없는 거 같다. 스킨 변경 전부터 방문자는 조금씩 늘고 있었고, 변경 후에도 조금씩 늘고 있는 중이다. 이렇듯 방문자는 변화가 거의 없는 반면 애드센스 수익은 50% 정도 감소했다. 물론 필자는 애드센스 수익이 별로 없는 편이므로 50% 하락했다 하여도 그렇게 마음이 아프지는 않다...... 아무튼 광고 위치가 잘못된 거 같아 조금씩 수정하고 있는 중인데 아직 채 2주가 안됐으므로 좀 더 지켜볼 생각이다.

※ 스킨 변경전 마지막 블로그 모습

스킨 적용 전 블로그 메인 모습이다. 몇 년간 써온 모습이라 저장할 겸 올려둔다.





+ Recent posts