블로그 템플릿 변경 + 리뉴얼 완료

얼마 전 블로그의 템플릿을 변경 중이라는 글을 올렸습니다. 구형에서 신형으로, 아예 템플릿 구조를 바꿔버리는 대공사(?)였죠. 신나게 코드 수정하고 CSS 스타일 건드리고 위젯 고르고 하다 보니 어느새 약 3주가 지나버렸네요. 오늘 정리한 RSS 피드 부분을 끝으로, 블로그의 큼지막한 부분들에 대한 리뉴얼은 얼추 마무리 되었습니다. 때문에, 각 부분 별로 새롭게 바뀐 곳들을 정리해 두고자 합니다.

 

 

1. Blogger 템플릿 –> Blogger 레이아웃

아마 가장 큰 변화이자, 이번 리뉴얼의 중심이 아닐까 싶습니다. 초기 Blogger의 구형 템플릿 구조에서, Blogger가 구글에 인수된 후에 나온 레이아웃 구조로 템플릿을 변경했습니다. 소스 코드가 기존 방식과 달라 처음에 애를 좀 먹었지만, 하다 보니 금방 적응되더군요. 물론 예기치 못한 문제(애드센스 코드를 HTML 소스에 직접 삽입하면 작동하지 않음)가 있긴 했지만 어찌어찌 다른 방법으로 해결했습니다. 소스 코드를 수정하면서 Blogger 도움말을 많이 참조하긴 했지만 한글화를 이상하게 해놔서 정작 중요할 땐 도움이 되질 못했어요. 소스 코드에 들어갈 텍스트까지 죄다 한글로 바꿔놓은 바람에 결국 다른 곳을 찾아봐야 했죠(나중에 ‘언어 변경’ 부분을 바꾸면 된다는 걸 알았지만). 그래도 확실히 위젯 같은 것들을 추가하기가 훨씬 편리해졌네요. 어떤 위젯들은 신형 레이아웃 구조에서만 동작하기도 했지요.

2. 이전 글 목록

구형 템플릿의 이전 글 목록은 매우 부실했습니다. 월별로 보는 건 괜찮았지만 연도별로 보는 것은 불가능했고, 무엇보다 ‘현재 보고 있는 글’ 보다 나중에 쓰여진 글은 목록에 아예 나타나질 않았습니다. ‘현재 보고 있는 글’ 보다 이전에 쓰여진 글들만 목록에 나타났죠. 그것도 약 10개 정도만. 새로 등록된 글을 보려면 아예 메인 페이지로 가야 했습니다. 지금은 연도별, 월별로 볼 수 있고, 각 글의 제목도 볼 수 있어 훨씬 편리합니다. 다만 기본 목록 스타일이 보기 안 좋아서, CSS로 보기 좋게 수정했습니다. 영어에서는 목록에 내어 쓰기를 하나 보죠?

3. 포스트 내용

Blogger의 기본 레이아웃과 다르게 포스트 제목, 날짜, 코멘트 수 등을 배치하느라 애 좀 먹었습니다. 그냥 기본형으로 쓰는 게 훨씬 편하긴 하지만(간단한 코드로 각 데이터들을 모두 호출) 별로 성에 차질 않았어요. 그래서 또 Blogger 도움말과 해외 사이트들 뒤지느라 시간을 많이 썼습니다. 지금은 리뉴얼하기 전과 비슷하게 모양을 잡을 수 있어서 만족합니다. 포스트 내용에 대해선 최대한 이전과 비슷한 모습을 갖도록 설정했답니다. 그런데 중간에 믹스 업 위젯이 제대로 들어가질 않아 고생했습니다. Blogger의 HTML수정 도구가 믹스 업 위젯의 코드를 받아주지 않더군요. 믹시의 노력에 의해 지금은 아주 잘 들어갑니다. 하지만 다음 뷰 추천 링크는 일일이 수작업으로 달고 있답니다…;

4. 댓글

이전 모습에 비해 댓글 부분의 모습이 약간 바뀌었습니다. 기본형 디자인에 CSS만 수정했지만, 꽤 많은 고민을 해야 했습니다. 바로 댓글 쓰기 양식(form) 때문이었죠. 원래 Blogger의 댓글은 별도의 댓글 페이지에서 남기도록 되어 있었는데, 요새는 워드프레스나 태터툴즈처럼 게시물 아래에서 바로 댓글을 남길 수 있도록 추가 옵션을 제공하고 있습니다. 그런데 이 기능이 IE6에서 자꾸 문제를 일으키는 겁니다. 파이어폭스나 크롬, 사파리, 오페라 등에선 아무 문제 없이 작동하다가 유독 IE6에서는 ‘페이지를 열 수 없음’ 메시지를 띄우며 정지됩니다. 처음엔 원인을 몰라 계속 헛물만 켜다 댓글 기능 때문이라는 걸 알았죠. 그래서 결국 이 기능을 빼버리고, 예전처럼 별도의 댓글 페이지를 사용하는 쪽으로 설정했습니다. 아마 나중에 이 기능이 개선되거나, IE6에 대한 브라우저 점유율이 0%대가 된다면 다시 이 기능을 사용할 수 있겠지요.

5. 태그(라벨)

이전 블로그에서는 태그를 별로 활용하지 못했습니다. 글마다 몇 개씩 달아두긴 했지만, 메타블로그에 전송할 때 빼고는 별로 쓰이질 않았죠. 지금은 블로그 맨 아래에 태그 클라우드를 추가시켰습니다. 제가 쓴 글의 태그들을 사용 빈도수에 따라 각각 다른 크기로 보여주고 있지요. 원래는 사이드 바에 달려고 했지만 태그 갯수가 너무 많아, 맨 아래로 끌어 내렸습니다. 태그 사용 빈도도 1개 이상은 갯수가 너무 많아 2개 이상만 표시하도록 해두었죠. 이 태그 클라우드는 지저깨비님의 블로그와, phydeaux3 블로그의 글에서 많은 도움을 받았습니다. 감사합니다.

6. 위젯, 배너, 아이콘

예전엔 잡다한 위젯들이 사이드 바에 쌓여 정리가 되질 않았었는데, 과감하게 정리했습니다. 지금은 파란 방문자 위치, 위자드웍스 W, 다음 위젯뱅크 D-데이 위젯 등이 추가되어 있죠. 그 아래엔 80x15 픽셀 사이즈의 테크노라티, 믹시, 올블로그, 다음 뷰 배너가 위치하고 있습니다. 파이어폭스, 크롬, 사파리, 오페라, 플리커 아이콘은 그냥 넣어 봤고요(추천 제품이랄까…?). 물론 위젯이나 배너, 아이콘들은 언제라도 추가되고 삭제될 수 있답니다.

7. 관심 있는 사용자

원래는 구글 프렌드 커넥트 바를 추가하려고 했습니다만 이것 역시 IE6에서 문제가 좀 있더군요. 다른 건 잘 작동하는데, 정작 화면 하단에 고정되어 있어야 할 바가 페이지 위쪽으로 왔다 갔다 하는 것이었습니다. 게다가 스크롤 바의 크기도 이상해져 버리고요. 매우 유용한 기능임에 틀림 없지만, 호환성이 떨어져(물론 IE6의 호환성이 떨어지는 것) 결국 빼버리고 ‘관심 있는 사용자’ 위젯을 추가했습니다. 그런데 이 위젯도 IE6에서는 제대로 보이질 않는군요… –_-; IE6에 대한 테스트를 전혀 안 하나 봅니다.

8. 애드센스

제 블로그에 삽입된 광고는 모두 애드센스 광고로, 728x90짜리 슈퍼배너 하나, 300x250 사각형 배너 하나가 표시되고 있습니다. 이 중 슈퍼배너는 항상 표시되고, 사각형 배너는 게시물 페이지에서만 표시되도록 해두었죠. 이전 Blogger에서는 인덱스 페이지와 아카이브 페이지, 그리고 게시물 페이지에 각각 다른 내용을 표시할 수 있어 사각형 배너를 삽입하는 데 별 문제가 없었습니다. 물론 새 Blogger 레이아웃에서도 마찬가지였죠. 코드는 좀 다르지만 인덱스와 아카이브, 게시물 페이지에서 보이는 내용을 각각 설정할 수 있습니다. 그런데 전혀 엉뚱한 곳에서 문제가 터진 겁니다. 애드센스 관리 페이지에서 생성한 코드를, Blogger의 HTML 수정 도구가 받아주질 않는 거였어요. 뭐가 문제인지 계속 빨간색 오류 메시지만 뱉어냈었죠. 결국 Blogger 관리 페이지 내에서 애드센스를 추가하고, 직접 코드를 이동시켜서 겨우겨우 끼워 넣었습니다. 덕분에 애드센스의 채널 기능을 쓰지 못하게 되었습니다.

9. 트위터

그 동안 다른 분들이 하는 걸 지켜만 봐 오다, 저도 이번에 트위터를 시작하게 되었습니다. 자주 메시지를 남기는 건 아니지만 다른 분들의 메시지만 봐도 재미있고 유용한 내용이 넘치네요. 내친김에 블로그에서도 트위터 메시지를 볼 수 있게 위젯을 추가했습니다. 물론 기본형 디자인이 마음에 들지 않아 CSS를 수정해야 했지요. 블로그 포스트보다 위쪽에 놓아둘까 하다, 결국 맨 아래로 내렸습니다. 사이드 바는 좁아서 안되고 말이죠.

10. RSS 피드

그 동안 ATOM과 RSS로 나뉘어졌던 피드를, 피드버너 RSS로 모두 통합시켰습니다. 어느 쪽 주소를 쓰더라도 피드버너 주소로 넘어가게끔 설정했지요. 덕분에 피드버너 구독자 카운터의 숫자가 조금 늘었습니다. 피드버너에서 제공하는 ‘이메일로 구독’ 기능을 써볼까도 했지만, 스팸메일도 귀찮은 마당에 누가 제 블로그 글들을 이메일로 받아볼까 싶어 관뒀습니다.

 

이렇게 해서 약 3주 간에 걸친 리뉴얼 작업을 마무리 지었습니다. 화려한 스킨으로 치장한 다른 블로그들에 비해 초라하기 짝이 없지만, 직접 디자인하고 코딩해서 뚝딱뚝딱 만들었기 때문에 애착이 갑니다. 약간의 차이는 있지만 웬만한 브라우저에서 큰 문제없이 잘 보이고요. 아마 이 모습 그대로, 또 한 3년~4년 정도 가지 않을까 싶습니다.

 

덧) RSS피드를 피드버너로 죄다 통합했더니, 올블로그와 믹시에서 난리도 아니네요. 올블로그에서는 이중 수집이, 믹시에서는 아예 믹스업 위젯과 연동이 안됩니다. 급하게 다시 기본 피드로 수정 ㅠㅠ

덧2) 애드센스 코드의 경우, 광고 관리 페이지에서 생성한 코드를 넣는다면 잘 들어갑니다. 하지만 주석처리된 부분의 주석 태크를 빼주어야 정상 작동 합니다. blogger 레이아웃 템플릿에서는 모든 주석 부분을 빼고 실제 페이지를 생성합니다.