자작 블로거 테마 썸네일

구글 블로거 테마를 만들어 보았다. 나의 첫 자작 테마!! 사실 티스토리 스킨을 만들었는데.. 강제로 티스토리 자체 애드센스 광고를 명당자리에 배치하는 것이 마음에 안 들어서 같은 스타일로 블로거 테마도 만들게 됐다. 어설프게 알고 있는 얕은 HTML, CSS, Javascript 지식을 총동원하고 ChatGPT의 도움을 받아 어느 정도 내가 원하던 기능(?)들을 넣어 봤다. 

구글 블로거 템플릿의 기초는 BLOGGER LABO를 참고했다. 일본인이 운영하는 구글 블로거인데 제작 방법을 챕터별로 상세하게 설명하고 있어서 매우 큰 도움이됐다. 이 테마의 골조는 이 분이 무료로 배포하는 테마이다. 뺄 거 빼고 필요한 부분을 추가하여 나만의 테마로 만들었다. 블로거 테마를 제작하고 싶은데 무엇부터 할지 몰라서 어리둥절하다면 이 블로그의 글을 전부 다 읽어 보는 게 좋다.

my-first-blogger-theme

추가한 기능들

  • 목차 - 포스팅 내에 목차가 있어야 SEO 최적화에 도움이 된다는 얘기는 익히 들어서 알고 있지만, 글 내부에 배치하기는 싫었다. 그래서 모달로 만듦! 큰 해상도의 화면에서는 따라다니는 사이드 유닛으로, 모바일에서는 하단에 고정 버튼으로 만들었다. 지금껏 여러 다른 블로그 글을 읽으면서도 목차를 누른 적은 단 한 번도 없기에.. 사실 없애버리고 싶지만, 방문자 중 누군가는 필요할 것이라 여겨 남겨두었다.
  • 주속 복사 - 공유 버튼을 없애버리고, 주소 복사만 가능하게 하였다. 모바일에서는 딱히 버튼이 없어도 공유하기 너무 쉽고, 데스크톱 이용 시에 필요할 듯하여 만들었다.
  • 댓글 이미지 - jpg, png, gif, webp, mp4 확장자로 끝나는 이미지(움짤) 주소를 붙여 넣으면 댓글에 이미지(움짤)을 올릴 수 있는 기능이다. 기존 공유된 코드를 조금 수정하여 적용해 봤다.
  • 관련 게시물 - 블로거에 관련 게시물 치환자가 없다는 것을 처음 알았다. 그래서 자바스크립트로 만들어 줘야만 했다.
  • 페이징 - 블로거에 없는 게 또 있다. 바로 숫자 페이징 기능이다. 아니.. 이런 게 없을 수 있나?? 진짜 없었다..
  • 이미지 Lazyload - 구글 블로거 > 설정에 들어가면 이미지 Lazyload 설정을 켤 수 있다. 하지만 이미지가 지연 로드 되는 동안 부드럽게 보이게 하기 위해서는 CSS 설정이 필요했다. 그래서 Lazyload 된 이미지에 class를 넣는 스크립트를 만들고, width 값과 height 값이 없으면 삽입될 수 있게 해봤다. (defer.js 라이브러리 사용)
  • 코드 블록 - 코드 블록에 코드 복사 기능을 추가했다. 언어 감지와 구문 강조 기능은 넣을까 말까 생각 중..

테마 제작 후기

다 만들고 구글 사이트 속도 체크를 해봤는데 확실히 구글 소속의 플랫폼이라 그런지 점수가 상당히 높게 나온다. 템플릿 언어만 다를 뿐 CSS나 Javascript는 거의 똑같은 코드를 사용했음에도 티스토리는 (애드센스 가 없을 때)70점 대인 반면에 블로거는 90점이 넘는 점수를 준다. 아마도, 티스토리 자체 서버에서 전송되는 코드들과, 자체 광고로 인한 애드센스 pub 코드 중복 등이 영향을 주지 않나 추측해 본다. 하지만 왜 체감상 속도는 티스토리가 더 빠르게 느껴지는지 그 이유를 알 수 없다.

위에서 언급한, 숫자 쪽수 매김, 관련 게시물 외에 게시물 카운팅 역시 안된다. 티스토리 같은 경우 카테고리 글 개수를 보여주는 게 기본 기능인 반면에 블로거는 라벨 당 글 개수를 가져오려면 역시 자체 제작을 해야만 한다. 이 개념을 이해할 수 없어서 삽질을 좀 많이 했다. 아니 있어야 할 게 왜 없는 것인가..! 게다가 XML에 대한 지식이 전무한 상태에서 만들다 보니, 너무 어려웠다. 아주 작은 오타도 허용하지 않는 엄청나게 단호한 차가운 북부대공 같은 언어였다. 공부를 해서 XML과 조금 친해진다면 두 번째 테마도 만들어 보고 싶다.

기존에 사용하던 테마는 해외 유료 테마였다. 버전은 업데이트된 것 같은데, 구매 사이트, 정확하게는 구매 링크가 증발해버렸다. 버전 업데이트할 때마다 구매하라는 뜻이겠지.. 그래서 자체 제작을 시작한 것인데 조잡한 실력이지만 어쨋든 완성을 했고, 시간을 들였지만 오류 없이 굴러가는 것을 보니 매우 만족한다.