블로그스팟(blogger)은 구글에서 제공하는 무료 블로그 서비스입니다. 한국에서는 네이버 블로그, 티스토리, 워드 프레스에 밀려 이용자가 많지 않지만, 전세계 블로그 통계를 내면, 세계에서 가장 많은 사람들이 이용하는 블로그 서비스입니다. 이번 포스팅에서는 블로그스팟을 시작하려는 사람들을 위해, 알아두면 좋은, 하지만 꼭 알아야 하는 건 아닌, 블로그스팟 사용자 지정에 대한 기본 지식을 이야기해 보겠습니다.
블로그스팟은 네이버 블로그나 티스토리처럼 친절한 가이드가 없기에, 단순한 블로그를 하기엔 쉬워도, 예쁜 블로그를 만들기엔 어렵습니다.
어려운 이유는 일일이 커스터마이징을 해야 하기 때문인데요. HTML에 대한 기초 지식이 없다면, 시작조차 하기 힘들 수도 있습니다. 하지만! 우리에겐 구글이 있습니다. 구글에게 불가능이란 없다! 거기다 저도 한 손을 거들겠습니다.
블로그스팟 사용자 지정에 대한 기본 지식
템플릿이란
템플릿은 블로그스팟의 전체적인 레이아웃이나 스타일을 정의하는 파일입니다. 템플릿은 블로그의 제목, 배경, 텍스트 색상, 글꼴 크기 등의 표시 형식을 결정합니다. 템플릿은 XML 형식으로 작성되어 있으며, 블로그스팟에서는 다양한 템플릿을 미리 제공하고 있습니다. 템플릿을 사용자 정의하려면 HTML과 CSS라는 언어를 알아야 합니다.
제일 좋은 것은 완성도가 높은 템플릿을 구한 다음, 초기 셋팅을 완성하는 것입니다. 이렇게만 되면, 이제 글을 쓸 일만 남은 것이죠.
이쯤에서 제가 초기 셋팅을 마친 테스트용 블로그스팟을 하나 소개합니다.
위 테스트용 블로그스팟은 자동으로 목차를 생성해주며, 한 때 유명 기업들이 애용했던 pretandard 폰트를 사용하였습니다. 메뉴와 사이드바의 색상은 몇년도인지 기억은 나지 않지만 팬톤에서 올해의 색으로 뽑혔던 #343440(검은색)을 사용하였습니다.
HTML이란
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 언어입니다. HTML은 웹 페이지의 구조나 내용을 표시하기 위한 태그라는 요소를 사용합니다.
태그는 <태그>와 </태그>로 감싸진 부분으로, 태그 사이에는 텍스트나 이미지 등의 내용이 들어갑니다. 예를 들어, <h1>제목</h1>은 제목을 나타내는 태그입니다. <b>굵게</b>는 굵은 글씨를 나타내는 태그입니다. <br>은 줄 바꿈을 나타내는 태그입니다.
블로그스팟에서는 HTML을 사용하여 템플릿, 게시글 페이지, 고정 페이지 등을 만들고 수정할 수 있습니다. HTML 모드에서 코드를 직접 작성하거나, 구성 요소를 드래그 앤 드롭하거나, 텍스트 에디터를 사용하여 HTML을 생성할 수 있습니다.
CSS란
CSS(Cascading Style Sheets)는 HTML과 함께 사용되는 웹 페이지의 스타일을 지정하는 언어입니다. CSS는 HTML 태그에 적용되는 스타일 속성을 정의합니다. 스타일 속성에는 글꼴 크기, 색상, 배경색, 여백, 정렬 등이 있습니다. CSS를 사용하면 웹 페이지의 디자인을 일관성 있고 효율적으로 관리할 수 있습니다.
CSS는 선택자와 선언부로 구성됩니다. 선택자는 스타일이 적용되는 HTML 요소를 지정합니다. 선언부는 선택자에 적용되는 스타일 속성과 값들을 나열합니다. 예를 들어, h1 {color: red;}은 h1 태그에 적용되는 텍스트 색상을 빨간색으로 지정하는 CSS 코드입니다.
블로그스팟에서는 CSS를 사용하여 템플릿이나 페이지의 스타일을 사용자 정의할 수 있습니다. 템플릿의 경우, HTML 모드에서 <b:skin>과 </b:skin> 사이에 CSS 코드를 작성합니다. 페이지의 경우, HTML 모드에서 <style>과 </style> 사이에 CSS 코드를 작성합니다.
반응형 디자인이란?
반응형 디자인은 웹 페이지가 표시되는 기기(PC, 스마트폰 등)의 화면 크기에 따라 레이아웃이나 스타일이 자동으로 조정되는 디자인 방식입니다. 반응형 디자인을 적용하면 웹 페이지가 다양한 기기에서 최적화된 모습으로 보여지게 됩니다. 반응형 디자인은 구글의 검색 순위에도 영향을 미치므로, 블로그 운영자에게는 필수적인 요소입니다.
반응형 디자인을 구현하기 위해서는 미디어 쿼리라는 CSS 기능을 사용합니다. 미디어 쿼리는 화면 크기나 방향 등의 조건에 따라 다른 CSS 코드를 적용할 수 있게 해줍니다. 예를 들어, @media screen and (max-width: 600px) { … }은 화면 너비가 600px 이하인 경우에만 적용되는 CSS 코드를 작성하는 방법입니다.
블로그스팟에서는 반응형 디자인을 쉽게 적용할 수 있도록 템플릿 설정에서 모바일 버전을 선택할 수 있습니다. 또한, HTML 모드에서 미디어 쿼리를 사용하여 자신만의 반응형 디자인을 만들 수도 있습니다.
템플릿을 사용자 지정하는 방법
템플릿 백업
Blogger 대시보드에서 테마 → 백업/복원(오른쪽 상단) → 테마 다운로드를 선택하여 현재 템플릿을 백업합니다.
반대로 외부에서 백업하거나 다운로드한 템플릿을 적용하려면 백업/복원 → 파일 선택 → 업로드를 순서대로 선택할 수 있습니다.
이 템플릿 백업은 템플릿을 맞춤 설정하는 데 매우 중요하므로 업데이트하기 전에 습관을 들이는 것이 좋습니다.
HTML 편집에서 사용자 지정
블로그 스팟 관리 화면에서 테마→ HTML 편집을 선택하면 템플릿의 HTML / CSS를 직접 편집 할 수 있습니다.
테마 디자이너에서 사용자 지정
Blogger 관리 화면에서 레이아웃→ 테마 디자이너를 선택하고 테마 디자이너의 고급 → CSS 추가 → 사용자 정의 CSS (양식) 추가에 CSS를 추가하여 템플릿에 반영합니다.
여담
어렵나요? 위에 이야기한 사전 지식들이 꼭 필요한 건 아닙니다.
제대로 된 가이드가 있다면 하나하나 따라 하는 것 만으로 멋진 blogger 가 완성될 수 있습니다.
하지만, 블로그스팟을 운영하다 보면 예기치 못한 난관에 봉착하는 경우가 발생합니다. 그럴 때, 사전 지식이 있느냐 없느냐에 따라 해결책을 찾아내는 시간이 줄어듭니다.
정확한 내용은 모르더라도, 훗날에 “아, 이게 이런 내용이구나.” 하고 떠올릴 수 있다면 그것 만으로 이번 포스팅은 성공이 아닐까 생각합니다.
지금까지 긴 글을 읽어 주셔서 감사합니다.
아래 링크한 글들도 추천 드려요
