티스토리가 자체 영상 올리는 기능을 종료하면서 다른 플랫폼을 이용하려는 분들이 있는데요. 지금 이 블로그는 처음에 무료로 다운 받은 템플릿을 약간씩 수정하면서 계속 쓰고 있지만 이후에 다른 블로그를 만들면서 아예 처음부터 직접 스킨을 만들어봤었습니다. 그 과정에서 얻게된 팁 몇 가지를 적어봅니다. 솔직히 티스토리가 망할 것 같지는 않지만 혹시 구글 블로거(블로그스팟)를 사용하고자 한다면 참고하세요.
블로거에서 기본적으로 제공하는 테마도 나쁘지 않지만 아무래도 해외 기업이다보니 한국의 네이버 블로그, 티스토리 블로그 등을 사용하던 사람들한테는 좀 낯설고 불편할 수 있습니다. 특히 티스토리를 사용하시던 분들은 본인 입맛대로 수정하는 것에 관심 많으신 분들이 많을테니 도움이 될 것 같네요. 블로거는 일부 위젯을 제외하고는 자유롭게 수정할 수 있습니다. 마음만 먹으면 트위터와 똑같이 생긴 스킨도 만들 수 있어요.
당연하지만 스킨을 직접 만드시려면 HTML, CSS, Javascript에 대한 기본 지식은 알고 계셔야 합니다. AI를 이용해서 코드를 짠다고 해도 어느정도 지식이 있어야 원하는 바를 정확히 요구할 수 있고, 이게 괜찮은 코드인지 또는 오류가 생겼을 때 원인이 뭔지 판단할 수 있습니다.
블로거 스킨 구조 파악하기
블로거 스킨을 수정할 때는 새 블로그를 만들어놓고 의미없는 글을 몇 개 올린 후에 테스트하는 걸 추천합니다. 테스트 전에는 기존 스킨 백업도 잊지 마세요.
블로거 홈 메뉴의 테마로 들어가면 기본으로 제공되는 테마 목록을 볼 수 있습니다. 블로거 기본 제공 테마는 크게 기본형과 반응형으로 나뉘고 예외로 Dynamic Views가 있습니다. 구조를 파악하려면 기본형 테마를 참고하는 걸 추천합니다.
기본형 테마는 옛날 블로그 사이트(네이버 블로그 PC 버전 사이트)라고 생각하면 되는데요. 본문 옆에 카테고리가 있는 방식입니다.
Dynamic Views는 좀 특이한 형태의 반응형 테마입니다. 기존에 다른 곳에서 블로그를 하던 분들은 좀 불편하다고 느끼실 수 있습니다.
반응형 테마는 디스플레이 크기에 따라 최적화된 모양으로 바뀝니다. 사용자 입장에서 이게 편하긴 한데 반응형 코드 때문에 블로그가 조금 느리게 느껴질 때도 있고 조금 불편할 수 있습니다. 처음 시작할 때는 가볍게 기본 반응형 테마 중에 하나를 골라서 사용하는 걸 추천합니다. 블로거 공식에서도 모바일 사용성을 위해 반응형 테마를 추천하는 편입니다.
테마의 버전은 <html> 태그에 있는 defaultwidgetversion='2' b:layoutsVersion='3'을 보고 알 수 있습니다. 구버전에서는 지원되지 않는 기능들이 있으니 기본형 테마를 수정해서 꾸미고 싶다면 꼭 버전을 변경해주세요.
★모바일 테마를 따로 만들지 않으셨다면 테마 > 맞춤설정 오른쪽 ▼ > 모바일 설정에서 모바일 테마를 '데스크톱'으로 변경하시기 바랍니다. 구버전 테마는 모바일 버전이 따로 있기 때문에 상관없습니다.
블로거 테마의 레이아웃
레이아웃은 <section> 태그를 통해 만들어집니다.
<section> 태그에 'name' 태그를 추가하면 레이아웃 메뉴에서 해당 섹션 이름을 확인할 수 있습니다. 따로 이름을 추가하지 않으면 id가 섹션 이름이 되는 것 같습니다.
섹션을 만들어 놓으면 레이아웃 메뉴에서 가젯(위젯)을 추가하거나 삭제할 수 있습니다.
보통은 원활한 CSS 적용을 위해 위와 같이 <div> 안에 <section> 태그를 넣습니다.
기본 테마를 사용하지 않고 아예 레이아웃부터 만들고 싶다면 <section>의 위치부터 설계해야 합니다. 템플릿 기본 코드를 참고해서 섹션을 나눠주세요.
블로거 템플릿 기본 코드
진짜 태초부터 만드실 분들 사용하세요. CSS, Javascript 없이 딱 구조만 잡는 코드입니다.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><meta charset='UTF-8'/><meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/><title><data:view.title.escaped/></title><b:include data='blog' name='all-head-content'/><b:if cond='data:blog.pageType == "index"'><meta content='블로그 콘텐츠 설명 입력' name='description'/></b:if><meta content='블로그 키워드 입력' name='keywords'/></head><b:skin version='1.0.0'><![CDATA[/*----------CSS 작성 위치------------*/]]></b:skin><body><div id='wrapper'><header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='true' title='Basic Blogger Template (Header)' type='Header'></b:widget></b:section></header><nav id='navigation'><ul><li><a href=''>Home</a></li><li><a href=''>About</a></li></ul></nav><section id='outer-wrapper'><article id='article-wrapper'><b:section class='main' id='main'><b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget></b:section></article></section><aside id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section></aside><footer id='footer-wrapper'><b:section class='footer' id='footer' showaddelement='yes'></b:section></footer></div><script type='text/javascript'>//<![CDATA[//-------javascript 작성 위치-----------//]]></script><b:template-script async='true' name='indie' version='1.0.0'/></body></html>
위 코드를 입력한 뒤 저장하면 자동으로 필요한 코드들이 추가될 겁니다. 빨간색 글씨로 쓴 부분은 본인 블로그에 맞게 수정하시기 바랍니다.
위처럼 섹션만 나눠놓으면 알아서 코드가 채워집니다.
템플릿 변수 정의하기
템플릿 변수를 정의해주면 '맞춤설정'에서 쉽고 빠르게 일부 CSS 값을 조정할 수 있습니다.
템플릿 변수는 <Variable> 태그를 이용합니다. 유무료 상관없이 템플릿 사이트에서 배포되는 스킨은 이게 잘 설정되어 있어 코드 수정을 기피하는 사용자들도 편하게 사용할 수 있어요.
저는 귀찮아서 템플릿 변수를 사용하지 않고 :root를 이용합니다. 분위기 변화를 주기 쉽게 색 몇 가지만 지정해두는 편이에요.
다음은 :root 예시입니다.
:root{
--color-main:#76FFF8;
--color-title:#121212;
}:root의 값을 적용할 때는 'div { color: var(--color-main); }'와 같이 var(이름)으로 작성하면 됩니다.
처음부터 :root를 사용했다면 이걸 <Variable> 태그로 변경해주면 됩니다. 이때 name이 "keycolor"인 건 이 테마의 기본 색을 설정하는 건데 생략해도 상관 없습니다.
<Variable name="keycolor" description="Main Color" type="color" default="$(main.color)" value="#76FFF8"/>
<Group description="Theme Colors" selector="body">
<Variable name="main.color" description="Theme Color" type="color" default="#76FFF8" value="#76FFF8"/>
<Variable name="title.color" description="Title Color" type="color" default="#121212" value="#121212"/>
</Group>
블로거 만들 때 참고사항
스킨 만들고 찾아보면서 알게 된 점들입니다.
1. 블로거에는 카테고리 기능이 따로 없습니다. 티스토리의 태그와 비슷한 기능을 하는 라벨이 곧 카테고리예요. 카테고리 가젯을 만들고 싶다면 라벨 가젯이나 링크 목록 가젯을 사용해야 합니다. 대부분의 템플릿들은 링크 목록을 이용해서 카테고리를 만들고 있습니다. 하위 카테고리를 만들고 싶다면 링크 목록에서 '_링크이름'과 같이 입력한 뒤 자바스크립트를 이용해 '_'가 있는 링크이름을 들여쓰기하는 방식으로 만듭니다. 다음 코드를 </body> 위에 붙여넣어보세요.
<script type='text/javascript'> //<![CDATA[ let dom = "";
let next = false;
let selected = document.querySelectorAll("#LinkList1 li");
let len = selected.length - 1;
selected.forEach(function(elem, index){
let text = elem.innerText;
if(text.startsWith('_')) {
elem = elem.outerHTML.replace('<span class="folder"></span>_', '<span class="sub-deco"></span><span class="folder"></span>');
var prepend = "";
if (!next)
prepend = "<ul class='sub-menu'>";
dom += prepend+elem;
next = true;
} else {
if (next)
dom += "</ul>";
dom += elem.outerHTML;
next = false;
}
if (next & index == len) {
dom += "</ul>";
}
});
document.querySelector("#LinkList1 ul").innerHTML = dom; //]]> </script>
2. 방문자 수 통계 가젯이 있지만 총 방문자 수만 보여줍니다.
3. 프로필 가젯은 본인이 프로필을 공개한 상태에서만 나타납니다. 블로거의 설정 > 프로필 설정(맨 아래에 있음) > 내 프로필 페이지 공개를 설정해야 합니다. 프로필 페이지를 공개하면 해당 페이지에 운영 중인 블로그 목록이 모두 뜨기 때문에 숨기고 싶은 블로그가 있다면(스킨용 블로그 등) 표시할 블로그 목록을 수정해두는 게 좋습니다.
4. 구글 계정 하나로 여러 개의 블로그를 만들 수 있지만 멀티 프로필은 불가능합니다. 프로필은 계정당 하나로 제한됩니다. 다른 프로필로 블로그를 운영하고 싶다면 구글 계정을 하나 더 만들어야 합니다.
5. 정확하지는 않지만 한 번 만든 블로그 링크는 해당 계정만 이용할 수 있는 것 같습니다. 만약에 제가 apple.blogspot.com이라는 도메인으로 링크를 만들었다가 apples.blogspot.com으로 변경하여도 다른 사람이 apple.blogspot.com이라는 도메인을 사용할 수 없는 것 같더라고요. 계정 분리할 때 주의하시고 테스트 블로그를 만들 때도 최대한 사용하지 않을법한 도메인을 쓰는 게 좋습니다.
6. 짧은 영상은 직접 올릴 수 있지만 용량이 큰 건 유튜브로 올린 후에 임베드하는 게 좋습니다. 세상이 어떻게 바뀔지 모르겠지만 유튜브가 블로거보다 먼저 망할 일은 없을 것 같네요.
7. 페이지의 퍼머링크는 페이지 제목에 영어를 적어서 설정해야 합니다. 페이지는 블로그 소개, 안내사항처럼 날짜와 상관없이 유지되는 글인데요. 일반 글과 다르게 퍼머링크를 설정할 수 없습니다. 제목에 원하는 링크 이름으로 영어를 적은 뒤 게시하고 이후에 원래 제목으로 수정하시면 됩니다.
8. 글 작성할 때 '단락 형식'은 <p> 태그를, '보통'은 <div> 태그가 사용됩니다. 만약 태그를 닫지 않고 <br />로 줄바꿈을 하고 싶다면 Shift+Enter를 누르면 됩니다.
9. 특정 페이지에만 표시하고 싶은 요소가 있다면 조건부 코드를 사용하세요.(참고 링크)
10. 댓글 작성란은 보안 때문인지 수정이 어렵습니다.
11. 처음에 이미지 넣으면 늘어나거나 눌린 상태로 나타나는 경우가 많은데 다음 코드를 템플릿 CSS에 넣어서 적용하면 됩니다.
img{width:100%;height:auto;}글에 이미지를 첨부하면 마진이 추가되어서 이상한 여백이 생길 때가 있는데 이건 블로거 첨부 기능 때문에 자동으로 적용되는 CSS입니다. 글 작성 화면에서 이미지를 선택한 후 상단 도구 메뉴의 오른쪽 끝에 있는 '서식 지우기' 버튼을 눌러서 이미지에 적용된 CSS를 삭제하시면 됩니다. HTML 편집 기능으로 수정하셔도 됩니다. 아니면 !important를 이용해서 일괄적으로 사진의 마진을 없애야 하는데 !important는 잘못 쓰면 다른 코드랑 꼬이기 쉬워서 사용하지 않는 편이 좋습니다.
0 댓글