반응형스킨, 반응형광고 적용 후기
오랫동안 고민한 끝에 드디어 반응형 스킨으로 교체했습니다. 원래는 티스토리에서 제공하고 있는 스킨인 'Pure Blue'라는 2단형 스킨을 수정하여 사용하고 있었습니다. 티스토리 블로그를 개설하고 1개월 정도 지났을 때 반응형스킨 이라는 것을 알게 되었고, 마크쿼리(MarkQuery) 스켈레톤 스킨을 시도한적이 있으나 초보자인 저에게는 너무 어려워 반응형 스킨은 나중에 교체하기로 계획했습니다. 여백을 결정하는 margin 이나 padding, 테두리를 조절하는 border 와 같은 초 기본적인 명령어만 겨우 알고 있는 상태였기 때문에 HTML과 CSS에 조금 더 익숙해준 후 반응형 스킨(Responsive Skin)을 적용해야 어느정도 수정이 가능하리라 생각되었습니다.
현재 티스토리 반응형스킨으로 인기있는 것은 <마크쿼리>, <CMS Factory>, <Fast Boot> 등이 있습니다. 모두 몇 개월 이상 사용해보고 여러번 수정작업을 거쳐봐야 각각의 장단점을 정확히 알 수 있지만 일단은 모두 적용해보고 각각의 기능을 살펴보았습니다. 그리고 최종적으로 결정한 반응형 스킨은 'Fast Boot v.1.5.1' 입니다. 이유는 웹 브라우저 호환성이 가장 뛰어나고, 속도가 빠르며, 스킨 수정을 위한 메뉴얼이 잘 나와있기 때문입니다. HTML과 CSS에 능숙한 경우 마크쿼리에서 제공하는 반응형스킨 기본 틀을 토대로 나에게 최적화된 구조의 스킨을 꾸며나갈 수 있겠지만, 아직까지 그만한 실력이 되지는 못합니다.
<2013년 12월부터 4개월 동안 사용한 Pure Blue 스킨>
사실 티스토리에서 기본적으로 제공하는 스킨만 사용해도 얼마든지 멋있고 좋은 기능을 구축해낼 수 있습니다. 기본 스킨의 장점으로는 수정작업이 용이하고, 속도가 빠르다는 점 입니다. 또한 모든 웹 브라우저와 호환성을 갖추고 있기 때문에 익스플로러 구버젼에서도 좋은 감도로 페이지를 열람할 수 있습니다. 그러나 제가 원하는 것은 안정성말고 새로운 경험이 필요했습니다. 애드센스의 반응형광고를 다루는 법과 HTML의 다른 명령어에 익숙해지고 싶은 마음이 컸기에 기본형 스킨과 작별인사를 했습니다.
처음에는 CMS Factory 에서 제공하는 <All in One v.0.2>를 설치하고 하루동안 적용시켰습니다. CMS 팩토리에서 제공하는 스킨은 다양합니다. 반응형 스킨과 기본형 스킨을 함께 제공하고 있습니다. 그 중에서 All in One 이라는 스킨은 최근에 만들어진 것으로 반응형 스킨의 기본틀에 기본형 스킨의 심플함을 최대한 살렸습니다. 그래서 크게 고민하지 않고 all in one 최신버젼으로 결정을 했습니다. 하지만 익스플로러 구버젼인 IE7에서는 페이지가 열리지 않는다는 점에 다른 반응형 스킨을 찾아봐야했습니다. 현재는 일일 방문자가 얼마되지 않는 수준이라 약 15% 정도에 해당하는 IE7 방문자를 버릴 수 없었습니다.
최종 결정하여 현재 사용하고 있는 Fast Boot v.1.5.1 입니다. Fast Boot 시리즈 중에서 가장 최신버젼이고, 구동속도 또한 아주 훌륭한 제품입니다. 무엇보다 IE7 에서도 호환이 된다는 점이 가장 관심을 끌었습니다. 위 스킨에 관심을 가지고 만든이에 대한 정보를 조금 살펴보았는데, 크로스오버에 관심이 많은 학부생 같았습니다. 열정적인 느낌, 젊은 감각이 느껴져 스킨에서도 다채로운 색상과 섬세한 기능을 제공하고 있습니다.
위 스킨을 수정하여 나만의 스킨을 제작하는 과정에서 많은 공부가 이루어졌습니다. 특히 색을 투명하게 만드는 opacity 라는 명령어와 커멘트 창에 마우스오버 했을 때 reply 버튼과 추가화면이 생성되는 webkit-transition 명령어는 정말 인상적이었습니다.
그리고 기존에는 애드센스 광고를 본문 상단에 336*280 광고를 배치했었는데, 반응형 스킨으로 교체해면서 '반응형 광고(베타)'로 삽입하였습니다. 그리고 각각의 화면 해상도에 출력되는 광고 사이즈를 수정해주었습니다. 화면 해상도가 0~100px 까지는 336*280 광고가 출력되고, 100~430px 에서는 200*200 광고, 화면 가로 길이가 430px 이상 일때는 336*280 의 광고가 구현되도록 수정했습니다.
<수정한 애드센스 반응형 광고 소스>
위 명령어에서 6번째 줄에 보면 my adslot {width : 336px height : 280px}를 기본크기로 설정해 준 이유는, 여기서 설정한 사이즈가 IE7 에 출력되기 때문입니다. 원래는 이 줄에 모바일 광고 크기인 200*200 사이즈로 설정했었는데, IE7에서는 화면 해상도 크기와 상관없이 가장 먼저 적어좋은 광고크기로 출력된다는 점에서 수정했습니다. 따라서 아이폰으로 제 블로그에 접속하면 200*200 초미니 광고가 출력될 것이고, 아이패드와 PC에서는 336*280 큰 직사각형 광고가 나올 것 입니다.
앞으로의 과제는 반응형 광고의 배치와 출력 사이즈를 결정해야 할 것 같습니다. 아무래도 광고단위를 바꿔서 그런지 CPC가 상당히 떨어져 버린것이 아쉽지만, 조만간 다시 올라갈 것이가 기대하고 있습니다.
