기본 콘텐츠로 건너뛰기

[공지] 신규 블로그 스킨 개발 작업중입니다

icon
바람 · · 수정: · 댓글 6개

블로그 스킨을 변경하려고 합니다.

 

현재 블로그 스킨의 문제점

 

지금까지는 Blogger theme 중에서 무료 테마인 Pixel theme을 커스터마이징&한글화해서 사용하고 있었습니다. 기능상으로는 큰 문제는 없었는데, 디자인이 군데군데 깨지기도 하고, 페이지 속도가 느리기도 했습니다


가장 큰 이유는, 블로그 로딩 속도가 많이 느렸기 때문입니다. PC로 보면 문제는 없지만 스마트폰으로 보니 조금 딜레이가 있었습니다. Google PageSpeed Insights를 이용해 점검해 보니, 페이지 속도가 많이 늦었습니다. 아래 표는, 화면이 2초 내에 뜨기는 하지만 이것저것 돌아가는 것이 많아서 속도를 느리게 하고 있다 정도로 보시면 될 것 같습니다.

 

Google Page Insight에서 체크한 사이트 로딩 속도. 속도가 느림을 알 수 있다.

구글은 웹 페이지 로딩/응답 속도를 검색 로직에 사용하고 있습니다. 즉 웹 페이지가 얼마나 빨리 뜨고, 컨텐츠가 얼마나 빨리 나오고, 사용자가 클릭/스크롤을 했을 때 얼마나 빨리 동작하는지가 검색 랭킹에 영향을 미친다는 의미입니다. 실제로 작년 11월에는 모바일 트래픽이 48% 정도였는데 올해 11월에는 44% 정도로, 모바일 트래픽의 비중이 4%나 감소했습니다. 검색은 컴퓨터로 하기보다는 스마트폰으로 하는 만큼 잠재적인 블로그 방문자가 감소하는 효과를 냈을 것입니다.

속도가 늦어진 원인 중 하나는 script 실행 시간이 길었기 때문입니다. 이 script 덕분에 기능 자체는 많았지만 속도를 느리게 하는 주범이었습니다. 하지만 제 지식으로는 이 script를 개선/수정할 수 없습니다.

 

두 번째 이유는, 디자인이 군데군데 깨지기 시작했기 때문입니다. 블로그 디자인이 미묘하게 깨져서, 블로그 포스팅을 보시기에 많이 불편하셨으리라 생각합니다. 문제는 알고 있었는데 도저히 고치지를 못했습니다.

하나를 고치면 다른 쪽이 터지고, 다른 쪽을 고치면 또 다른 쪽이 터지게 됩니다. 같은 링크인데도 어느 한 쪽 색은 어두운 파란색, 어느 한 쪽은 밝은 파란색입니다. 하지만 이렇게 하지 않으면 일반 포스팅에서 링크와 일반 텍스트가 전혀 구분되지 않습니다. 그렇다고 기본 테마로 다시 되돌리면, 포스트 내에 있는 표의 디자인이 다 깨지게 됩니다.

 



그리고, 이미지가 없는 글인데도 어떤 글은 이미지 부분이 비어 있고, 어떤 글은 기본 이미지가 지정되어 있습니다. 그런데 왜 일부분만 기본 이미지가 뜨는지는 모릅니다. 커스터마이징도 하지 못하고, 속도가 느려서 검색 랭킹까지 내려버리는 테마를 더 이상 사용할 이유가 없습니다.


마지막 이유로는, xml 파일 하나로만 있어서 고칠 수가 없었습니다. 디자인 하나 고치려면 만 줄이 넘어가는 파일을 이리저리 살펴보면서 고쳐야 합니다. 줄 간격이 이상하거나, 표 간격이 이상해도 도저히 수정할 수 없었습니다. 2500줄 짜리 테마 파일 보고 고치는 것은 상당히 어렵습니다.



왜 블로그 스킨을 직접 만드는가


마음에 드는 블로그 스킨이 없었기 때문입니다. 티스토리 같은 경우 티스토리 스킨 페이지에 예쁜 스킨이 매우 많이 있습니다. 따라서 이 스킨을 그대로 가져다가 쓰면 됩니다.

하지만 blogger 같은 경우 유료 스킨이 많습니다. Blogger 스킨은 xml 파일 하나로 되어 있기 때문에, 스킨을 바꾼다고 해도 나중에 고치기가 어렵습니다. 유료 스킨 같은 경우엔 유지보수를 해 주는 모양입니다만.. 스킨에까지 돈을 쓰고 싶지는 않습니다. 

결국 제가 원하는 대로 커스터마이징해서 테마를 쓰려면 처음부터 만드는 방법밖에 없다고 판단했습니다.



블로그 스킨 만들기


올해 5월에 bloggerpack이라는 blogger를 위한 theme을 만드는 라이브러리가 나왔습니다. 이 theme의 bootstrap4 starter pack을 기반으로 신규 스킨을 개발 중입니다. 바닥부터 만드는 것이 아니라, njk라고 하는 작은 코드 단위를 자동으로 묶어서, 최종 결과물을 내게 됩니다. 즉 전체적인 틀이 제공되는 만큼 블로그 스킨을 만들기 쉬워졌습니다.



위와 같이 심플하고 기능이 적은 스킨으로 변경해서 페이지가 더 빨리 열릴 수 있도록 수정할 계획입니다. 일단 bloggerpack, bootstrap4 기본 디자인으로 블로그 로딩 속도를 개선하는 것을 1차 목표로 합니다. https://bp-starter-bootstrap-4.blogspot.com/의 디자인과 비슷하게 나올 것 같습니다. 그 다음에 디자인을 더 예쁘게 만드는 것을 2차 목표로 하려고 합니다.

웹 페이지 속도가 심하게 감소하지 않는 선에서, 기존 블로그 테마에 있던 기능을 옮겨 오는 것을 목표로 하고 있습니다. 하지만 구현이 어렵거나, 블로그 속도를 느리게 하는 기능은 제외할 수 있습니다. 블로그 광고(애드센스)도 블로그 속도를 느리게 하는 주범이긴 하지만, 블로그 광고를 포기할 수는 없을 것 같습니다. 

일본에도 못 가는 지금이야말로 블로그 스킨을 바꿀 수 있는 좋은 기회라고 생각합니다. 페이지를 개편하면 당분간은 광고 수익도 줄어든다고 하니.. 방문자가 적을 때 바꾸는 것이 좋은 선택입니다. 

언제쯤 적용된다고 확답은 드릴 수는 없습니다. 취미로 하는 블로그이니까요. 하지만 블로그 5주년 되기 전까진 마무리할 수 있을 것 같습니다.

블로그 스킨이 완성될 쯤에 다시 공지 드리도록 하겠습니다.


참고: [공지] 신규 블로그 스킨 변경했습니다


label

댓글 6

  1. 수아
    # 2021년 3월 14일 오후 10:47
    안녕하세요. 바람님, 본문에 공감하는 부분이 많습니다.

    Blogger는 기본 테마가 조금 아쉽고 Google은 네이버나 다음과 달리 공평해서 조금 아쉽습니다^^

    그리고 신규 블로그 스킨 개발 화이팅입니다!
    • icon
      바람 Author
      # 2021년 3월 15일 오전 12:15
      https://bp-starter-bootstrap-4.blogspot.com/ 으로 주소가 바뀌었네요. 본문에도 반영했습니다.
      그리고 블로그 스킨은 이미 bloggerpack 기반으로 만들어서 적용되어 있습니다. 적용은 했는데 아직 이것저것 손볼 것은 많습니다 ㅎㅎ

      xml 파일로 공유되는 블로거 스킨은 고치다 보면 예상치 못하게 깨지는 경우가 많았던 것 같습니다. bloggerpack처럼 아예 컴파일해서 쓸 수 있으니 수정하기가 더 편리하네요 ㅋㅋ

      앞으로도 자주 블로그 방문해 주시면 감사하겠습니다.
  2. 수아
    # 2021년 3월 14일 오후 11:12
    본문의
    https://bp-bootstrap4.blogspot.com/
    ↑요기 지금은 삭제된 것 같습니다.

    주소가 변경된 것 일까요?
  3. 수아
    # 2021년 3월 15일 오전 9:36
    네. 자주 방문하겠습니다👍
  4. BINUBALL
    # 2021년 6월 10일 오후 2:28
    Bloggerpack을 사용해서 Blogger 템플릿을 개발할 때 어떤 자료를 참고하셨나요? 역시 아래의 공식 문서밖에 없으련지 궁금합니다.
    https://github.com/bloggerpack/bloggerpack/tree/main/packages/bloggerpack
    • icon
      바람 Author
      # 2021년 6월 10일 오후 8:33
      댓글에 남겨 주신 공식 문서 위주로 참고를 했습니다. 위젯 추가할 때는 기본 테마에서 위젯 코드를 복사해서 사용하기도 했구요. 일본 사이트이긴 한데 https://www.bugbugnow.net/search/label/Blogger 블로그도 참고가 되었습니다. 보통은 필요한 것 그때그때 구글에 검색해서 찾아서 코드 복붙하는 식으로 해결했습니다.

      만약 Bloggerpack 자체에 대한 자료를 말씀하신 것이라면, 공식 문서 말고는 참고할 만한 자료는 없는 것 같습니다. Bloggerpack bootstrap4 starter pack을 고쳐서 테마를 만드시는 것이 가장 좋을 것 같습니다.

댓글 쓰기

취소

댓글 작성이 안 되실 경우 아래 링크를 이용해 주십시오.

댓글 달기