한국인을 위한 블로그스팟용 무료 템플릿 '윤슬'을 배포합니다

블로그스팟 템플릿은 아주 부족한 것이 현실입니다. 한국인이 직접 만든 블로그스팟 테마는 손에 꼽을 정도입니다. 나무위키 문서만 봐도 목록이 아주 부실합니다. 개인적으로 커스터마이징에 관심이 많은 편이라 인터넷에서 정보를 긁어모아 블로그스팟 테마 구조를 익혔습니다. 여러 가지 자작 템플릿들을 만들고 언젠가는 저만의 템플릿을 만들어 보겠다는 결심을 했는데 이제서야 지켰습니다. 한국인을 위한 블로그스팟용 무료 템플릿 '윤슬'입니다. 아래에 특징과 다운로드 링크, 업데이트 내역 등을 남겨놓습니다.

템플릿의 특징

2023년 9월 기준으로 이 블로그에 적용 중인 템플릿입니다. 심플한 디자인을 지향합니다. 만약 워드프레스 블로그를 운영하신다면 디자인이 익숙할지도 모릅니다. GeneratePress가 적용된 워드프레스 블로그들의 깔끔한 디자인에 영향을 받아서 디자인을 거의 베껴 오듯이 만들었습니다. 템플릿 적용 모습은 아래와 같습니다. 2023년 9월 기준 제 블로그의 모습입니다.

'윤슬' 템플릿의 대표적인 특징입니다.

• 한국 사용자들에게 맞게 최적화되어 있습니다
• 깔끔한 디자인
• 빠른 속도
• 카테고리와 태그 구분 가능 (아래에서 더 자세히 설명합니다.)
• 페이지네이션 위젯
• 반자동 목차
• 블로그 글 글자 수 표시
• 이미지를 클릭하면 확대되는 Smooth Zoom

기본적으로 GeneratePress의 정신을 계승하고 싶기에 블로그 속도를 빠르게 만들었습니다. 웹사이트의 속도를 측정할 수 있는 PageSpeed Insights로 이 블로그 속도를 재어 보니 성능 88점이 나왔습니다. 썸네일에 이미지가 적으면 더 높은 속도를 얻으실 수 있습니다.

블로그스팟은 기본적으로 카테고리 기능을 지원하지 않습니다. 카테고리 대신 라벨(label)을 사용합니다. 이 템플릿에서는 #이 붙지 않은 라벨을 카테고리로, #이 붙은 라벨을 태그로 분류합니다. 이 블로그를 PC로 보고 계시다면 오른쪽을, 모바일로 보고 있다면 아래쪽을 주목하세요. 카테고리와 태그가 사이드바에 깔끔히 분리되어 있습니다.

카테고리는 카테고리당 글 수를 보여주지만, 태그는 글 수를 보여주지 않습니다. 하지만 간단하게 태그도 글 수를 보여주게 만들 수는 있습니다. 이에 대한 방법은 다음 버전에서 제공할 예정입니다.

글 내용을 한 번에 보여주는 반자동 목차 기능을 지원합니다. 반자동 목차를 이용하기 위해서는 코드를 직접 HTML 보기로 삽입해야 합니다. 자동 목차로 만들 수도 있었지만, 목차가 들어갈 글과 들어가지 않을 글을 사용자가 직접 구분할 수 있게 반자동 목차로 만들었습니다. 아래는 fx-570EX 복소수 계산 글에 있는 반자동 목차의 모습입니다. 이 글 맨 위에도 이와 비슷한 디자인의 반자동 목차가 있습니다.

반자동 목차를 만들기 위해 삽입할 코드는 아래와 같습니다. 처음에 목차가 열려 있는 것 대신 닫혀 있는 걸 원하신다면 open="" 부분을 지우세요. "목차" 대신 다른 문구를 원하시면 직접 텍스트를 수정하세요.

<details id="toc" open=""><summary class="toc-title">목차</summary></details>

목차 코드를 글 템플릿에 집어넣으면 매번 복사할 필요 없이 반자동 목차를 편하게 사용할 수 있습니다. 방법은 다음과 같습니다.

블로그스팟 메인 화면에서 설정 > 글 > 글 템플릿으로 이동합니다.

이 빈칸에 목차 코드를 붙여넣고 저장하면 다음부터 새 글을 작성할 때 자동으로 목차 코드가 뜨게 됩니다.

제목을 작성하려면 제목 메뉴를 클릭하고 "제목"(h2)과 "부제목"(h3)을 활용하시면 됩니다. "소제목"(h4)도 쓸 수 있지만 목차에는 표시되지 않습니다. "주 제목(h1)"은 블로그 제목에 쓰이므로 가급적이면 사용하지 않으시길 권장드립니다. h1은 각 문서당 한 번씩만 등장하는 것이 좋습니다.

이 반자동 목차는 템플릿 파일의 자바스크립트로 작동되므로 실수로 삭제하지 않게 주의하세요.

블로그에 글을 몇 자나 썼는지 알 수 있는 글자 수 카운터 기능이 있습니다. 만일 이 글자 수 카운터를 다른 블로그에도 활용하고 싶으시다면 블로그스팟에 글자 수 카운터 추가하기 글을 참고해 주세요.

Smooth Zoom 라이브러리를 적용하여 블로그 게시글 내의 이미지를 클릭하면 크게 확대할 수 있습니다. 당장 이 글의 이미지들을 클릭해서 확대해 보세요!

템플릿 적용법

아래 다운로드 링크 부분에서 템플릿 XML 파일을 다운받으세요. 템플릿을 적용하고 싶은 블로그의 테마 탭으로 이동합니다. 메뉴 > 복원을 클릭합니다. 업로드 버튼을 눌러 테마 XML 파일을 업로드하세요.

파일 이름은 "윤슬 템플릿 v{버전명}.xml"입니다. 오류가 난다면 XML 파일 내용을 전부 복사한 다음 메뉴 > HTML 편집을 눌러 그곳에 복사한 코드를 전부 붙여넣은 다음 저장하면 됩니다.

윤슬 템플릿을 적용하기 전에 이전 테마를 백업해 놓는 것을 잊지 마세요. 해당 사안에 대해서는 제가 책임질 수 없습니다.

주의사항

개인 취향대로 한 페이지에 뜨는 게시글 수를 변경할 수 있습니다. 기본으로 제공되는 한 페이지당 게시글 수는 7개입니다. 다른 개수로 변경하려면 아래 단계를 따르세요. 10개로 변경한다고 가정합니다.

1. 설정 > 글 > 기본 페이지의 최대 게시물 수를 10으로 변경합니다.
2. 테마 > 메뉴 > HTML 편집으로 들어간 후 const maxResults를 검색해서 const maxResults = 7을 const maxResult = 10으로 바꿉니다.
3. data:label.url params {max-results: "7"}을 검색해서 data:label.url params {max-results: "10"}으로 바꿉니다. 총 세 개 있으니 세 개 모두 바꿔야 합니다. 이후 저장 버튼을 누릅니다.

이렇게 하면 한 페이지에 뜨는 글 개수를 10개로 바꿀 수 있습니다.

현재 댓글 기능은 지원하지 않습니다. 업데이트로 언젠가 지원할 예정입니다.

구글 애드센스 위젯도 현재로서는 지원할 계획이 없습니다.

업데이트 내역

생각날 때마다, 버그가 발견될 때마다 템플릿을 업데이트할 예정입니다.

v1.1 / 글자 수 카운터가 모두에게 보이는 오류를 수정했습니다. 이제 블로그 관리자에게만 보입니다.

v1 / 최초 버전입니다.

다운로드 링크

구글 드라이브에서 다운받을 수 있습니다. 아래 버전별 링크를 클릭하세요.

• 윤슬 템플릿 v1.1
• 윤슬 템플릿 v1

끝맺음

제가 언제나 덧붙이는 말이긴 한데, 구글 블로그, 블로그스팟 템플릿을 개발하는 분들이 많아지면 좋겠습니다. 티스토리 친효스킨을 개발하셨던 분도 친효스킨 For 구글블로거(Blogger) 반응형 스킨을 만드신 걸 보니 블로그스팟의 미래가 더욱 기대가 됩니다.

언젠가 블로그스팟 템플릿 개발하는 방법도 정리해서 써 보고 싶은데 시간도 그렇고 아직까진 손이 따라주질 않네요.

BINUBALL이 작성함

fx-570EX, fx-570ES PLUS 등의 계산기 관련 글들을 주로 올립니다. 블로그스팟으로 블로그를 운영하고 있습니다.