이제부터 블로그스팟 테마 개발하는 방법에 대해 글을 써 보겠습니다. 그리 짧은 시리즈는 될 것 같지 않은데요, 힘이 되는 데까지 써 보도록 하겠습니다. 제가 이 내용들을 잊어버리지 않게 하기 위한 역할도 합니다. 미래에 한국에서 블로그스팟 테마를 개발하실 분들의 이정표가 되기를 바랍니다. 구글이 공식적으로 제공하는 정보는 엄청 부실하다 보니 이렇게까지 써야 한다는 게 조금 아쉽네요.
목차
준비사항
HTML과 CSS, JavaScript에 대한 기본적인 지식은 있어야 합니다. 이것은 블로그스팟 개발뿐만 아니라 티스토리 개발에도 해당되는 사항이긴 합니다. 만약 이 중 아무것도 모른다면 유튜브나 인터넷에서 간단한 강의나 글을 보고 오는 것을 추천드립니다. 저는 개인적으로 생활코딩을 추천합니다.
텍스트 에디터를 하나 구비해 놓으시는 것을 추천드립니다. 블로그스팟 웹사이트에서 직접 템플릿을 수정하는 것은 꽤나 불편하고 예상치 못한 문제가 발생할 수도 있습니다. 테마 파일은 어차피 백업해야 하니 처음부터 파일로 저장하는 것이 현명한 선택입니다. 저는 Notepad++를 사용합니다. 프로그래밍을 하시는 분이라면 Visual Studio Code가 편하실 수도 있겠고, Atom을 사용하시는 분도 있을 것 같습니다. 뭐가 되었든 자신이 편한 텍스트 편집기를 하나 여세요.
테마를 테스트할 블로그를 하나 새로 개설하는 것을 추천드립니다. 블로그스팟 메인 화면에서 블로그 리스트 → 스크롤하여 새 블로그…를 선택하면 블로그를 새로 만들 수 있습니다. 한 구글 계정마다 100개씩 블로그를 만들 수 있으니 부족하지는 않을 것입니다.
블로그스팟 기본 테마 구조
블로그스팟은 테마 확장자로 xml을 사용합니다. xml 파일 하나에 테마의 모든 내용이 들어갑니다.
<html b:css='false' b:js='false'>
<head><b:skin></b:skin></head>
<body><b:section id='main' showaddelement='yes'/></body>
</html>위 코드는 블로그스팟의 가장 기본적인 테마 코드로, 블로그스팟 XML 템플릿 초기화하기에서도 소개한 코드입니다. HTML과 별 다를 바는 없습니다. 우선 위 코드를 그대로 복사한 다음 확장자를 xml로 하여 컴퓨터에 저장합니다. 이름은 무엇이든 상관없습니다. 저는 첫 템플릿.xml로 가볍게 이름을 지어 보겠습니다.
HTML을 안다고 가정하고, 이 코드에서 처음 보실 부분만 설명하겠습니다.
html 태그의 속성 중 b:css와 b:js는 블로그스팟이 기본적으로 불러오는 CSS 파일과 자바스크립트 파일을 활용할지 여부를 결정합니다. 기본값은 true인데(이 속성을 적지 않으면 true로 인식합니다.) false로 작성했으므로 둘 다 불러오지 않습니다. 다만 블로그스팟 기본 자바스크립트 파일을 불러오지 않은 경우 레이아웃 탭의 기능을 사용할 수 없으니 주의하세요.
b:skin 태그 안에는 테마의 CSS 내용이 들어갑니다. 여기에만 CSS 스타일을 작성해야 하는 것은 아닙니다. b:skin 대신 style 태그를 입력해도 html처럼 잘 사용할 수 있습니다. 테마 코드에서 b:skin 태그가 의미 있는 일은 블로그스팟 테마의 변수(variable) 설정 뿐입니다. 하지만 b:skin 태그가 테마에 없으면 테마는 오류를 출력하기 때문에 보통은 b:skin 태그를 작성하고 그 안에 CSS를 작성하는 편입니다.
b:section 태그는 구역(section)을 나누는 태그입니다. 템플릿이 출력되면 그저 'section' 클래스를 지닌 div 태그가 됩니다. 그럼 이것도 b:skin처럼 그냥 div 태그 쓰면 되지 어디에 쓸모 있냐고 할 수도 있지만, b:section이 하나도 없으면 테마가 또 오류를 내뱉습니다. 그리고 b:section 안에는 b:widget 태그를 넣을 수 있습니다. b:widget에는 블로그 테마에 필수적인 위젯들이 들어 있기 때문에 b:section은 중요한 태그입니다.
showaddelement 속성은 기본값이 yes라 코드에 이걸 적는 건 쓸모없긴 한데 간단히 설명하고 넘어가겠습니다. b:js가 true(또는 미기재)인 상태로 레이아웃 탭에 들어가면 각각의 b:section에 위젯 추가 버튼을 보이게 하는 코드입니다.
마지막으로 중요한 것은 HTML과 달리 XML은 태그를 한 번 열었으면 무조건 닫아야 한다는 사실입니다. 위 코드에서 b:section 태그가 닫힌 것으로 알 수 있습니다.
위 기본 테마 코드를 에디터에서 복사한 다음 블로그스팟 테마 페이지에 붙여넣고 저장하면 아래와 같이 변합니다.
<?xml version="1.0" encoding="UTF-8" ?>
<html b:css='false' b:js='false' 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><b:skin><![CDATA[]]></b:skin></head>
<body><b:section id='main' showaddelement='yes'/></body>
</html>맨 위에 html 태그 대신 xml 태그가 추가되고, html 태그의 속성이 몇 개 더 붙는 것만 제외하면 거의 동일합니다. CSS 코드는 <![CDATA[와 ]]> 사이에 작성하면 됩니다.
이 코드를 복사해서 원래 코드를 덮어씌우면 됩니다. 다음부터는 이 코드를 기반으로 블로그스팟 테마를 만들어 나갈 겁니다.
댓글 없음
아래의 댓글 입력을 클릭한 후 익명으로 댓글을 달아 주셔도 됩니다. 글 내용에 관한 질문도 환영합니다. 모든 댓글은 관리자의 승인을 받아야 보여집니다. 댓글을 달고 기다려 주세요.