JB 스킨 167로 바꾼 이유 및 스킨 적용 방법

반응형

제 소중한 블로그에게 비싼 옷을 사 입혀보았습니다. 한 달에 한 번씩 블로그 스킨을 바꾸더니만, 결국 유료 스킨의 세계로 입문하게 되었네요. '살까 말까 고민될 때는 사지 마라'라는 유명한 명언을 떠올리면서 꾹 참았지만, 무료 스킨의 한계를 계속 느꼈기 때문에 큰 맘먹고 질렀습니다. 

 

 

무료 스킨의 단점

1. 스킨에서 오류를 발견하면, 직접 수정하든지 기다려야 한다.

스킨은 HTML과 CSS, JavaScript 로 구성됩니다. 쉽게 말해서 블로그의 구조와 디자인, 그리고 동작을 정의하기 위해 사용되는 언어 /규칙입니다. 그러나 내용이 길고 복잡하기 때문에 항상 오류가 있게 마련입니다. 게다가 모든 브라우저와 각 버전을 대응하는 것은 거의 불가능하고, 브라우저에도 버그가 있기 때문에 오류를 해결할 수 없는 경우도 있습니다. 요즘은 반응형 스킨이 대세가 되다 보니 이런 문제가 더 심해지지 않았나 싶어요. 

 

 

삼성인터넷 모바일 브라우저에서 봤을 때 오른쪽이 약간 잘린 화면

제가 이전에 고래스킨을 썼는데, 남편이 스마트폰으로 블로그를 보면 오른쪽이 잘린다고 알려줬어요. 확인해보니 제 휴대폰에서도 동일한 증상이 있었고요. 추석 연휴에 직접 고쳐보겠다며 몇 시간을 씨름했는데 결국 못 고쳤습니다. 크롬 개발자 도구로 확인해봐도 코드 상에 문제는 없었는데, 열심히 테스트 해보고 내린 결론은...! 애드센스+삼성 인터넷 모바일용 브라우저가 문제인 것 같습니다. 애드센스를 넣고 삼성 인터넷 브라우저로 들어갔을 때 가끔씩 오른쪽이 잘리는 현상이 나왔어요. 애드센스를 빼거나, 혹은 크롬 모바일 브라우저에서 접속할 경우 해당 증상이 발생하지 않았습니다. 이 문제를 겪고 나서 그냥 스킨을 사자고 결심했습니다.

 

무료 스킨이다보니 오류를 전달하더라도 개선이 될지 확신하기 힘들고, 스킨 지원을 중단한 경우도 있기 때문에 오류를 직접 수정해야 할 경우가 많습니다. 저는 프론트엔드 개발자는 아니라서 아무래도 한계가 있더라고요. 유료 스킨은 구매자에게 책임 있게 대응해 주기 때문에, 초보 블로거나 저처럼 스킨 오류에 민감한 블로거에게 잘 맞을 것 같습니다.

 

 

 

2. 무료 스킨은 사용하는 사람이 많아서, 블로그 외적으로 차별화하기 어렵다.

좋은 무료스킨은 사용하는 사람이 너무 많아서 블로그 외형으로 차별화하기 어렵습니다. 디자인을 크게 신경 쓰지는 않지만, 그렇다고 다른 블로그와 비슷해 보이는 건 싫었습니다. 막상 차별화를 꾀하자니 코드를 직접 수정해야 되고, 시간이 오래 걸릴 것 같았고요. 제가 구입한 유료 스킨은 화면 너비, 블로그 상단/하단, 카테고리, 사이드바, 본문 등에 각각 적용할 수 있는 다양한 옵션들을 제공해서 쉽게 커스터마이징이 가능합니다. 옵션만 살짝 바꿔주면 블로그 외형이 상당히 달라집니다.

 

 

 

 

 

JB 스킨 167 적용 소감

처음에 데모 블로그를 봤을 때 참 깔끔하고 예뻐서 기억에 남았는데, 결국 구입까지 이어졌네요. 제 소감은... 진작 구입할 걸 그랬다! 싶을 정도로 마음에 들었습니다. 블로그의 여러 가지 설정을 쉽게 바꿀 수 있고, 애드센스를 붙이는 것도 정말 쉬워요. 특별한 경우가 아니라면 html과 css를 직접 건드릴 필요가 없습니다. 

 

JB 스킨이 커스터마이징이 쉬운 대신, 약간 무거운 것 같다는 후기글을 보았는데요, 스킨을 어떻게 적용하느냐에 따라 다른 것 같습니다. 처음 스킨을 적용했을 때는 이미지를 로딩하는 부분들이 많아서 무겁게 느껴졌어요. 그래서 블로그 하단의 사이드바를 아예 빼고, 오른쪽 사이드바에서는 몇 개 항목을 뺐습니다. 그리고 자동 광고수를 조금 줄이는 등 여러 가지 노력을 하고 나니 로딩 속도가 개선된 것 같습니다.

 

 

데스크탑 기준 블로그 홈화면

 

 

 

스킨 편집 화면 - 광고 추가도 쉽습니다.

 

 

 

 

JB 스킨 167 적용법

제가 수정한 항목은 아래와 같습니다. 로딩 횟수를 빠르게 하고, 광고가 너무 거슬리지 않도록 세팅하는 데 중점을 두었습니다.

 

  • 홈 화면 글 수/글 목록 글 수 10/11개로 조정하였습니다. 인피드 광고를 고려해서 개수를 조정했습니다.
  • 본문 가로 크기를 조절하였습니다.
  • 글꼴을 '이롭게바탕체'로 바꿨습니다.
  • 본문 글자 크기를 16으로 바꿨습니다.
  • 사이드바는 오른쪽만 사용하도록 하고, 스타일을 바꾸었습니다.
  • 블로그 상단 메뉴를 추가하였습니다. 블로그 관리→꾸미기→메뉴에 들어가서 설정할 수 있습니다.

 

  • 카테고리 별 목록 스타일을 각각 다르게 설정하였습니다. 예를 들어, 여행 카테고리는 사진이 좀 더 부각되도록 했습니다. 

 

 

  • 본문 하단에 관련 글 보기 (Related Articles) 기능은 이미지를 불러오기 때문에 Off 하였습니다. 게다가 해당 기능은 애드센스의 일치하는 콘텐츠 광고와 모양이 약간 비슷해서 중복되는 느낌이 듭니다. 아래 이미지에서 파란색 네모 영역처럼 구성됩니다.
    차이점은 관련 글 보기는 2x2 배열로 구성되고 블로그 글만 나오고, 일치하는 콘텐츠 광고는 반응형이라 1X4, 3X3, 2X4 등으로 배열이 구성되며 블로그 글과 광고가 섞여있다는 점입니다. 참고로 일치하는 콘텐츠 광고를 넣으려면 특정 기준을 충족하여야 합니다.

 

  • 카테고리의 다른 글 보기(플러그인)기능은 텍스트로만 나오기 때문에 활성화하였습니다. 

 

  • 애드센스스킨 편집 메뉴에서 본문 상단/중간/하단, 인피드를 넣었습니다.

    특별히 본문 하단 광고의 팁을 드리고 싶은데요, 스킨 편집 메뉴에서 본문 하단에 광고를 추가하면 '태그와 댓글 사이 영역'에 나오게 됩니다. 반면 티스토리 플러그인에서 애드센스 반응형-하단에서는 '본문 마지막 부분(♥/구독하기 버튼 바로 위)'에 광고가 나옵니다. 그래서 스킨 편집 메뉴 - 본문 하단에는 일치하는 콘텐츠 광고를 세팅하였고, 애드센스 반응형 플러그인을 하단만 사용하였습니다.

 

 


(2021년 5월 3일 추가) 최근에 수익 메뉴가 생기면서, 수익 기능을 활성화하면 티스토리 플러그인-구글 애드센스가 사라집니다. 대신 수익 > 애드센스 관리 > 광고설정에 들어가서 설정할 수 있습니다.

 

그리고 수익 기능을 활성화하실 때 꼭 광고가 제대로 나오는지 확인하시면 좋을 것 같아요. 수익 기능 활성화하고 나서 며칠간 광고가 제대로 안 나와서 다시 설정해줬습니다. 다행히 수익이 거의 없다시피 한 서브 블로그였기에 망정이지, 멘붕에 빠질 뻔했습니다.

 

 

 

 

 

광고는 적당히, 거슬리지 않을 정도로 넣고 싶은데 쉽지 않네요. JB 스킨 167을 계속 사용해 보면서 광고 최적화는 계속해 나갈 예정입니다.


스킨은 아래 사이트에서 구입하실 수 있고, 각 기능 별로 자세하게 설명된 매뉴얼을 확인할 수 있습니다.

JB 스킨 구입: www.jbfactory.net

JB 스킨 167 매뉴얼: www.jbfactory.net/jb-skin-manual/jb-skin-167-v310-manual

 

반응형

댓글(18)

  • 2020.10.08 04:18 신고

    와... 진짜 항상 볼때마다 느끼지만, 열심이신 느낌입니다 ^^
    맞아요~~ 무료 스킨은 2번 문제가 있더라고요 차별화가 없어요~~
    그러나 저는 아직 유료 스킨의 세계에 입문할 준비는 안됐습니다~~
    다양한 시도 해시면서 조정하시는 실력도 대단하시다고 생각됩니다~
    저는 은근 복잡한거 너무 힘들더라고요 ㅠㅠ
    지금 에드센스 구조 따라가는 것만 해도 넘 힘들더라는...ㅎㅎ
    이거 다 일일이 포스팅하신 것도 너무 꼼꼼하세요 ^^

    • 2020.10.08 21:49 신고

      티스토리에서 좀 더 무료스킨을 많이 만들어주거나 공모전을 열어서 종류를 늘려주면 좋을 것 같다는 생각을 해 봅니다. 카카오 입장에서 티스토리 좀 잘 챙겨줬으면 싶지요 ㅎㅎ

  • 2020.10.08 05:58 신고

    스킨 바꾸시고 만족하시는군요. 저는 엄두가 안나더라구요ㅎㅎ 읽어보고 간접체험?했습니다. 스킨변경하신 후 매료점님 블로그가 더 번창 하시길 바랍니다^^

    • 2020.10.08 21:49 신고

      감사합니다 :) 앤미님 블로그도 더더욱 번창하셨으면 좋겠습니다!!

  • 2020.10.09 07:06 신고

    동의합니다. 처음엔 무료스킨으로 했다가 광고와 수정때문에 바꾸곤 하죠^^

    • 2020.10.10 13:52 신고

      맞아요 그냥 초반에 유료스킨으로 자리잡아서 쭉 쓰는것도 괜찮은 것 같아요.^^

  • 2020.10.09 10:10 신고

    정말이지 이런걸 좀 배우고 싶은데
    ㅜㅜ 블로그 하면서 포스팅만 할줄알았지
    스킨변경,수동광고 등등
    어렵다는 생각에 전혀 손을 못쓰고 있는
    꼼이입니다 ㅎㅎㅎ
    지금도 처음 스킨이랑
    광고는 그냥 자동광고만 ....

    매료점님 멋지십니다!!! ㅎㅎ

    • 2020.10.10 13:54 신고

      저도 웹쪽은 전문분야 옆동네라서 잘은 못해요 ㅠㅠ 이제 더이상 스킨에 손 안대고 문제 생기면 제작자에게 물어보고 편히 수정하려구요. 칭찬 감사합니다 :)

  • 2020.10.09 16:33 신고

    좋은정보 잘보고 갑니다~~~~!!

  • 2020.10.14 20:29 신고

    다들 유료스킨 왜쓰나했는데 이런 무수한 장점들이 있었군요 ㅠㅠ 특히 스킨옵션에서 광고 코드를 바로 넣을 수 있는 점이 너무 매력적이네요.......지금 구매욕구가 팍팍 들고있어요 ㅎㅎㅎㅎ 좋은 정보 세세하게 공유해주셔서 감사합니다!!

    • 2020.10.14 22:10 신고

      저는 개발블로그도 하는데, 하나의 티스토리 계정에서 만든 블로그는 다 적용할 수 있다고 해서 고민 끝에 구입했어요. 돈 들이고 나니 값은 해야겠다 싶어서 더 열심히 하고 있구요. 남편도 가독성이 더 좋아졌다고 하네요. 저는 만족도가 아주 높습니다 :)

    • 2020.10.14 22:14 신고

      다 적용가능한건 진짜 큰 장점이네요,,,! 구매하는 쪽으로 마음이 기울었어요 ㅎㅎㅎ...

  • 2020.10.16 13:12 신고

    와 어쩐지..! 원래도 깔끔했던 매료점 님 블로그가 더 보기 좋게 변했다고 생각하던 중이었어요! 유료 스킨으로 바꾸셨군요! 그런데 정말 너무 좋네요. 사실 광고보고 깨달았답니다. 제가 좋아하는(?) 와디즈 광고가 게시글 목록 사이사이에 있더라고요! 클릭했어요.ㅎㅎ 적용하시고 이렇게 후기도 자세히 남겨주시니 넘 도움이 많이 되어요! 유료스킨 생각도 없었는데 뽐뿌가 엄청 오네요ㅎㅎㅎ 감사합니다!

    • 2020.10.17 09:27 신고

      유료스킨을 장착하고 마음의 평화를 얻었답니다.ㅋㅋㅋ 유료스킨도 고르느라 힘들었지만요. 남편이 제 블로그에 관심이 너무 많은데, 스킨은 잘 산것 같다고 하더라구요. 땟깔이 다르다나요...^^;;

  • 2021.05.03 12:18 신고

    안녕하세요. 팁 중에 본문 하단 광고.. 인피드 광고를 넣으면 안나와요..
    디스플레이 광고는 나오는데.. 인피드 광고 slot를 입력하면 안나오는데,
    해결법을 알 수 있을까요? 저도 관련글 목록처럼 저렇게 하고싶은데..ㅠㅠ jb스킨 167입니다.
    슬라이더 커버 설정 시, 안나오고
    최신글 하면 나오는데 이렇게 설정해야만 하나요?

    • 2021.05.03 22:16 신고

      혹시 애드센스 수익 설정 하셨나요?
      설정 > 애드센스 관리에 들어가보시면 광고 설정이 있거든요.
      여기서 본문하단을 켜시면 되요. (본문에 관련 내용 수정하였습니다)

      수익설정을 안 하셨으면 플러그인 > 구글 애드센스 반응형 > 광고형태에서
      3가지 유형(상단/하단/상단&하단)이 있는데요.
      여기에서 하단을 선택하고 애드센스 태그를 넣으시면 됩니다.

    • 2021.05.09 23:47 신고

      아하.. 커버를 쓰면 안되고, 최신글로 하면 본문 중단 인피드가 실리네요.. ㅎㅎ감사합니다!

Designed by JB FACTORY