오랫동안 고민한 끝에 드디어 반응형 스킨으로 교체했습니다. 원래는 티스토리에서 제공하고 있는 스킨인 '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가 상당히 떨어져 버린것이 아쉽지만, 조만간 다시 올라갈 것이가 기대하고 있습니다.

Posted by 전포

댓글을 달아 주세요

  1. 오감세 2014.04.22 10:03 신고  [Modify]  [Reply]

    우오옹...
    저도 블로그 리뉴얼을 계속 고민하고 있는데,
    잘 참고하겠습니다. ^^
    저는 좀 콘텐츠영역을 큼직~하게 뽑아보려고요.
    사진을 많이 올리다보니 크게 가야할 것 같아요.

    • 전포 2014.04.26 19:46 신고  댓글주소  수정/삭제

      저도 좌측 300*600 사이드 광고만 아니면 본문영역을 크게 뽑아볼 생각인데, 저는 사이드 광고를 너무 좋아하는 편이라 이대로 유지하고 있습니다. 블로그를 새로 하나 더 만들게 되면 사이드바를 없애볼 생각입니다.

  2. 띵똥 2014.04.22 13:16  [Modify]  [Reply]

    오~ 감사합니다~잘 참고할께요^^

  3. 단비스 2014.04.23 00:11 신고  [Modify]  [Reply]

    ie7에서 저런 방법도 있군요. 저도 한번 테스트를 해봐야겠습니다~
    그리고 반응형 상단에서는 100-430을 100-, 360- 두단계로 나누어서 360이상에서는 300*250을 붙이고 있는데, 뭐 아직까지는 별 제재조치가 없는데, 지식전당포님도 나중에 이런식으로 바꾸어서 테스트도 한번 해보시면 어떨까 싶습니다

    • 전포 2014.04.26 19:48 신고  댓글주소  수정/삭제

      요즘 계속 반응형 광고 사이즈 때문에 고민이었는데 감사합니다. 아무래도 단비스님이 경험과 실력이 좋다보디 새로운 뭔가를 할 때 많이 참고하게 되는 것 같습니다. ^^ 조언 감사해요~

  4. mapsi 2014.04.26 23:16 신고  [Modify]  [Reply]

    와 정말 신기했어요..그렇지 않아도 다른 블로그에서 보니깐 상단에 두개가 사이즈가 작아질수록 한개가 아래로 내려가더라구요..완전 신기했고.
    잘 배워갑니다..저도 적용 해봐야겠어요..감사합니다.

    • 전포 2014.04.27 00:16 신고  댓글주소  수정/삭제

      저도 요즘 계속해서 반응형광고를 테스트해보고 있습니다. 여러가지 조건에서 다양한 사이즈의 광고가 출력되도록 시도하고 있으나 일부는 정책위반이 될 수 있는 것이기에 조심스럽습니다.
      나중에는 맵시님께 더 좋은 정보를 드리겠습니다. ^^

  5. 늙은 호텔리어 몽돌 2014.04.27 23:23 신고  [Modify]  [Reply]

    저도 말은 들었습니다만 전당포님 설명마저도 잘 이해하지 못하는 컴맹이라...
    당분간은 그냥 쓰야겄네요..ㅠ
    그래도 재밌게 읽었습니다.ㅎ

    • 전포 2014.05.08 02:25 신고  댓글주소  수정/삭제

      저도 여러가지 스킨 수정작업을 하면서 공부를 해줘야겠다는 자극을 받았습니다. 몽돌님, 우리 같이 연구하면서 나중에 반응형 스킨 한번 만들어봅시다! ^^

  6. Orangeline 2014.04.30 19:36 신고  [Modify]  [Reply]

    전 얼마되지 않은지라 에드센스 신청은 했는데 2주가 지나도 아직 오지 않네요 언제되려나..

    • 전포 2014.05.08 02:29 신고  댓글주소  수정/삭제

      핀번호를 신청하고 2주안에 오는경우가 있긴 있습니다만, 그렇게 많지는 않습니다. 주로 3주일이 걸리는 경우가 대부분이고, 저처럼 운이 나쁘면 3개월이 걸립니다. ㅎㅎ
      오렌지라인님의 핀번호가 내일 도착하도록 기도하겠습니다. ^^

  7. nolgo 2014.05.01 02:59 신고  [Modify]  [Reply]

    반응형스킨으로 바꾸시는 분들의 포스팅 보면 저도 도전해보고싶은 맘이 불쑥불쑥 듭니다. 좀더 공부해본후 저도 한번 시도해봐야 겠습니다.

    • 전포 2014.05.08 02:31 신고  댓글주소  수정/삭제

      스킨을 부담없이 수정해도 괜찮을 연습 블로그 만드시는 것을 추천드립니다. 티스토리 한 아이디로 5개의 블로그를 개설할 수 있으니, 재미삼아 반응형스킨을 일단 적용시키고 만지셔도 도움이 많이 되리라 생각됩니다. 저도 아직 이렇게 연습하는 과정입니다. 허허 ^^
      밤새 비가 많이 오네요. 아침에 우산 꼭 챙겨가세요.

  8. Readiz 2014.05.07 01:30 신고  [Modify]  [Reply]

    제 소개를 좀 더 자세히 적고 싶지만.. 인터넷이다 보니 조금 꺼려지는게 사실이라서요 ㅎㅎ
    자세한 설명 감사드립니다.

    • 전포 2014.05.08 02:52 신고  댓글주소  수정/삭제

      동감합니다. 공개하지 못할 일은 한건 아니지만, 그럴 필요는 없습니다.
      그리고 Fast Boot 스킨 정말 유용하게 사용하고 있습니다. 감사해요.

  9. -_________-0 2014.05.25 22:22 신고  [Modify]  [Reply]

    반응형 스킨으로 저도 바꾸고 싶긴하지만 CPC가 떨어진다는 얘기가 있어서 선뜻 못하겠더라고요;;;

    • 전포 2014.05.26 13:50 신고  댓글주소  수정/삭제

      저도 처음에 CPC하락을 걱정했는데, 최종적으로 보았을때 하락하지 않는 것 같습니다. 그 이유는, 모바일 단가와 PC 단가가 합쳐서 보고서에 기록되기 때문에 마치 CPC가 하락하는 것 처럼 보이는것입니다.

    • -_________-0 2014.05.27 00:21 신고  댓글주소  수정/삭제

      어제 반응형 스킨에 대해서 알아보다가.. CPC가 떨어지겠지만 장기적으로 봤을 적에는 오히려 더 좋겠다라는 결론을 내리고 반응형 스킨으로 수정했습니다.

      떨어지기는 커녕 더 올라갔네요~ ㅎㅎㅎㅎ^^

  10. 코보보 2014.07.08 21:11 신고  [Modify]  [Reply]

    반응형 스킨 신기하네요.