Daily Life of BlueRose

컴퓨터 & 코딩 공부/웹 & 코딩 기초지식 정리

구글 블로그 초기 세팅방법(블로그 스킨/템플릿/HTML 수정하기)

푸른로즈 2024. 4. 23. 00:55
728x90

세팅내역을 적어두는 이유

구글블로그를 잠시밖에 사용하지는 않았지만 한가지 확실하게 알 수 있었던 점은, 블로그 구축시 사용된 태그나 변경사항을 어딘가에는 분명히 기록해두어야 한다는 점 입니다.

구글블로그를 다시 운용하게 될지는 솔직히 잘 모르겠지만, 향후 사용에 대비하여 기록을 남겨두는 게 좋을 것 같아 글로 적어보았습니다.

 

개별 개발자들이 만들어 둔 템플릿 사용하기

여러 사이트가 있겠지만, 제가 다운로드 받은 사이트는 아래의 구야비 템플릿(발음이 이게 맞나?)였습니다. 대부분의 사이트들이 템플릿을 직관적으로 볼 수 있도록 세팅되어있고, 라이브 데모(만들어진 페이지 확인)를 지원하므로 어디에서 보더라도 크게 상관은 없을 것 같더군요.

초기에 저는 그 중에서도 가장 미려해 보이는 Aveen 이라는 템플릿을 사용했습니다. 사실 그 직전에 다른 템플릿을 아주 잠시 체험해보긴 했는데, 포스트 가로길이가 600픽셀로 고정되어있어서 영 맘에 안들더군요.

 

템플릿 선택 시 무엇을 중요하게 봐야하는가

템플릿을 볼때는 디자인과 함께 본문의 너비, 카테고리(Tag 정렬) 기능의 지원여부, Footer의 크기 등을 확인해보는 것이 좋습니다. 참고로, 블로그 하단에 나타나는 아래와 같은 부분을 Footer라고 합니다.

 

아울러, 타인이 만든 템플릿을 사용하는 경우에는, 해당 템플릿이 어느정도 범위까지 무료기능을 제공하는지, 유료로 사용시에는 어느정도의 금액이 필요한지를 미리 확인하시는 편이 좋습니다. 무료버전을 사용하면 어느순간 몇몇 태그가 작동하지 않는 경우가 발생하는데, 이는 프리버전에 암호화된 부분이 존재하기 때문입니다.

 

Footer 부분

 

참고로 최근에 업데이트 된 것인지, 혹은 제가 참고한 자료가 오래된 것인지는 모르겠지만, '구글 블로그는 카테고리를 지원하지 않아서 태그정리 기능이 꼭 필요하다'라고 들었는데, 최근의 구글 블로그는 자체적으로 태그 정리 기능을 제공하고 있더군요.(뭐지?)

 

따라서, 타인이 제공하는 템플릿의 태그 지원여부와 관계없이 기존 구글에서 제공하는 일반 템플릿을 이용하더라도 멋진 템플릿은 비록 별로 없겠지만 기능상으로는 크게 상관이 없을 듯 하니 선택은 본인이 하면 되겠습니다.

 

암호화된 부분으로 인해 디자인을 갈아엎다

처음 Aveen 테마를 다운받아 설치하고 CSS를 계속 수정해보는데도 불구하고, 블로그 내 리스트 개체가 들여쓰기가 안된다던가, 코드 작성창 디자인이 수정되지 않는 등 현상이 발생했습니다.

 

이상하리만치 바뀌지 않아서, 캐시지우기 등등 여러가지를 시도해 보았는데, 결국 문제는 블로그 템플릿 자체에서 제한을 걸었기 때문이었더군요. 무료 항목 중 표기된 암호화된 부분(Encrypted Script 부분)이 아마 이러한 제약을 걸어둔 부분으로 보입니다.

 

돈 주고 살 것 아니면 그냥 무료 템플릿을 사용하는 편이 확장성 면에서 좋을 듯 합니다. 비록 무료 템플릿이 디자인은 구리긴 하지만... 적어도 적용이 안되는 이유를 찾느라 고생할 일은 없을테니까요.

 

 

다운로드 받은 템플릿 적용하기

다운로드 받은 템플릿의 압축파일에는 각종 xml파일과 함께 링크파일과 소개를 위한 이미지 등이 들어있는데, 다 필요없고 xml파일만 압축을 해제해주시면 됩니다. 이후, 그림과 같이 테마 - 맞춤설정 옆의 화살표를 누른 후, 복원을 누릅니다. 본래 이 기능은 설정을 내보냈다가 다시 복원하는 기능이지만, 우리는 이 기능을 이용하여 타인이 만들어 둔 세팅을 불러온다.

 

템플릿을 입맛대로 수정하기

 

여기까지 완료했다면 이제부터는 타인이 만들어둔 골조를 우리가 원하는 대로 바꾸어야 합니다.



템플릿 입맛대로 수정하기

템플릿 수정은 아래 그림과 같이 레이아웃에서 특정 요소에 대해 볼 수 있는지 여부나 삭제 등을 결정하고, 구글에서 지원하는 요소를 추가하는 등의 작업을 수반합니다.

 

위젯 추가하기

 

어차피 이전 버전으로 되돌리는 작업은 계속해서 할 수 있으니 겁내지 말고 하나씩 건드려보면서 하시길 권장합니다.

 

 

레이아웃 수정하기

 

하나씩 설명을 하자면 아래와 같습니다.

  1. Theme Option : 이 테마의 경우에는 상단에 있는 theme option에는 사이트에 전체적으로 적용되는 변수를 넣어놓았습니다. boxed version을 수정할 경우, 블로그를 네모모양으로 감싸는 테두리가 사라집니다. Default Variables를 수정하여 포스트의 개수를 수정할 수 있는 것으로 보이나, 아직 굳이 필요성이 느껴지지 않아 건드리지 않았습니다.
  2. Top Navigation : Home, 그 외 링크들이 잡다하게 있습니다. 보통 Main Menu가 본문의 바로 위에 있거니와, 6번의 Sidebar 부분에도 카테고리가 있어서 링크는 차고 넘치는 편입니다. 때문에 저는 이 메뉴를 비활성화했습니다.
  3. Header Logo : 로고부분입니다. 로고를 끄는 방법은 URL을 삭제하면 됩니다. 다만, 로고 대신 본인 블로그 명칭이 나오는데 폰트가 심히 사무적이므로, 파워포인트로라도 로고는 만들어 주는 편이 낫습니다. 로고 부분의 크기/비율은 템플릿마다 다르므로, 제공해주는 템플릿의 로고 사이즈를 참고하는게 좋습니다.
  4. Social Widget : 이름부터 SNS의 느낌이 나는 메뉴이지 않나요? 페북, X 등으로 접속 가능한 링크입니다. 거치적거리고 지저분해서 불활성화 시켰습니다.
  5. Main Menu : 사람에 따라 여기에도 카테고리 작업을 하는 경우도 있습니다. 카테고리는 어차피 사이드바에 있으나, 중요한 메뉴를 강조하고 싶다면 여기에 링크를 만들어주시기 바랍니다. (카테고리 메뉴에 진입한 후, 해당 링크를 연결해주면 됨)
  6. 그 외 항목 : 항목이 꽤나 여러개 있을텐데, 그 중 최근게시물/인기글/태그(카테고리)검색/프로필 정도만 제외하고 전부 삭제하는걸 권장합니다. 추후에 여기에 광고넣으면 지저분해집니다. 잘못해서 뭔가를 삭제했다면 백업파일을 불러오거나, 가젯 추가에서 적당히 비슷한걸 골라오면 됩니다. 목차기능은 카테고리가 대신하는데, “목록형, 숫자 표기, 모든 태그 표시” 등을 체크해주어야 우리가 익히 보는 모습과 비슷해지니 참고하시기 바랍니다.

여기까지 했다면 대강의 작업은 완성된 셈입니다.


이제 티스토리와 마찬가지로 본인 스타일에 맞게 세부조정을 가해주면 됩니다.

 

반응형