꽤 오랜만에 구글 Blogger 관련 글을 올립니다. 별다른 건 아니고, 새로운 기능이 추가되어 간단히 알려드립니다. 아마도 많은 블로거 사용자들이 오래 전부터 고대해왔던 기능이 아닐까 싶은데요, 바로 '맞춤식 영구링크(커스텀 퍼머링크)' 기능입니다.

 

관련 글 : Customize your posts with permalinks(Blogger Buzz, 2012.07.18)
(Blogger 설정이 영어인 경우 Permalink, Custom URL 이라고 씁니다. 한국어 설정에선 '영구 링크', '맞춤 URL'로 번역되어 있습니다.)

 

Blogger의 주소체계

설명에 앞서 Blogger의 주소체계에 대한 설명이 필요할 것 같은데요, 구글 Blogger의 포스트 주소체계는 대략 다음과 같습니다.

http://hfkais.blogspot.kr/2012/05/sony-mdr-q38lw.html

블로그 주소/년/월/게시물 제목.html 순으로 구성됩니다. 게시물의 제목을 그대로 주소의 일부로 쓰게 되는데요, 띄어쓰기는 대시(-)로 치환됩니다.

그런데 이러한 방식은 영어 사용자들에겐 아무 문제 없지만, 다른 언어의 사용자들에게는 문제가 됩니다. 특히 한국어와 같은 경우에 말이죠. Blogger에서는 영어 외의 게시물 주소는 지원하지 않습니다. 다른 블로그 도구들처럼 http://myblog.com/새-블로그-제목.html 과 같은 주소는 불가능하단 소리죠. 때문에 게시물 제목에 들어있는 문자열 중 '영어'로 된 문자만 뽑아서 쓰게 됩니다.

가령 얼마 전 쓴 'MS 휠 마우스 옵티컬(휠옵) 분해사진' 글의 경우, 게시물 주소가 http://hfkais.blogspot.kr/2012/06/ms.html 으로 되죠. 게시물 제목에서 영어 부분만 따왔기 때문입니다. 그런데 만약 제목에 영어가 단 한 글자도 없다면 어떻게 될까요?

http://hfkais.blogspot.kr/2012/04/blog-post.html

'피싱사이트 및 불법사이트 신고하는 방법' 이란 글인데요, 이렇게 blog-post.html 이 기본 주소로 됩니다.

 

이는 꽤 불편한 방식입니다. 가장 큰 문제는 '게시물 내용과 관련 없는 주소'를 갖게 된다는 거였죠. 검색엔진 최적화(SEO)에도 좋지 않습니다. 그래서 나름대로의 꼼수도 등장했습니다. 글을 올릴 때, 주소로 쓰고 싶은 영어 문자열을 제목에 써놓고 포스팅한 뒤 나중에 제목을 바꾸는 식이었죠. 퍼머링크는 글이 발행되면 계속 고정되기 때문에, 이런 꼼수를 이용하기도 했습니다. 하지만 귀찮은 게 문제였죠.

 

새로운 맞춤식 영구주소

Blogger에서는 이제, 맞춤식 영구주소 기능을 제공합니다. 사용자는 기존과 같이 제목을 이용해 자동으로 주소를 생성하도록 할 수도 있고, 직접 주소를 입력해줄 수도 있습니다.

글을 작성할 때 우측의 '글 설정'에서 '영구 링크'를 선택합니다. 기본값은 '자동 URL'인데, 여기서 '맞춤 URL'을 선택합니다.

입력란에 사용하고 싶은 html파일명을 입력합니다. 그럼 자동으로 이 글의 영구주소가 될 URL이 회색글자로 나타납니다.

입력 가능한 글자는 소문자 알파벳, 대문자 알파벳, 숫자 등이며, 특수문자는 언더바(_), 대시(-), 그리고 마침표를 사용할 수 있습니다. 띄어쓰기는 사용할 수 없습니다.

글 쓴 연도와 월 구분은 기존과 같으며, 확장자는 항상 .html로 고정됩니다. 만약 다른 확장자를 쓰고 싶다고 해도, post.txt.html 와 같이 파일명의 일부로 인식됩니다.

 

새로운 기능을 통해, 이제 Blogger 사용자들은 실제 글 내용과 맞는 영구주소 또는 쓰고 싶은 영구주소를 마음대로 지정할 수 있게 되었습니다. 저도 이제 엉뚱한 영구주소를 쓰지 않아도 되겠네요.

 

맞춤식 영구링크에 대한 Blogger 도움말은 아래 링크를 참조하세요.
http://support.google.com/blogger/bin/answer.py?hl=en&answer=2523525

※ 템플릿 수정은 많은 시행착오를 겪어야 합니다. 여러 번 수정을 거쳐야 할 수 있습니다. 따라서 현재 운영중인 블로그에 바로 적용하지 말고, 별도의 템플릿 편집용 블로그를 만들어 충분한 테스트를 거친 뒤 반영하는 방식을 추천합니다. 구글 Blogger에서는 여러 개의 블로그를 만들 수 있으므로, 꼭 테스트용 블로그를 하나 만들어 해보세요.

 

팁을 설명하기에 앞서, 구글 블로거에 대한 몇 가지 이해가 필요합니다. 블로거 도움말을 꼭 읽어보세요.

- 블로그 레이아웃의 HTML 수정

- 레이아웃용 Widget 태그

- 레이아웃용 페이지 요소 태그

 

간단히 방법만 적어보겠습니다.

블로그 설정화면으로 들어갑니다. '템플릿' - 'HTML편집' 버튼을 누릅니다.

경고문이 나오는데, 한번 읽어본 뒤 '계속' 버튼을 누릅니다.

HTML코드가 출력됩니다. 이것만으론 러프한 편집만 가능하고, 실제 디테일한 부분을 수정하려면 상단의 '가젯 코드 펼쳐서 보여주기' 에 체크합니다. 가젯 코드들이 확장되어 실제 코드들이 보입니다.

찾기(Ctrl + F) 기능을 이용해, '<div class='blog-posts hfeed'>' 부분을 검색합니다. 기본 템플릿이라면 비슷한 부분이 두 개가 나올 겁니다. 위쪽은 안에 인클루딩되는 내용에 관련된 부분이고, 실제 화면에 보여지는 부분은 아랫쪽입니다. 따라서 우리는 아랫쪽 부분을 수정해주면 됩니다.

날짜에 해당하는 부분은

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

입니다. 자세히 보시면, 클래스명과 태그명을 통해 이게 무슨 기능을 하는지 대충 알 수 있습니다. 역으로, 현재 블로그 화면 내에 표시되고 있는 부분을 템플릿에서 찾을 수도 있습니다. 가령 블로거 기본 템플릿에서 날짜 부분의 HTML소스를 확인해보면(크롬에서 F12키, 개발자 툴 이용) <h2 class="date-header"> 와 같은 클래스네임을 가진 h2 태그로 둘러싸인 걸 볼 수 있죠. 따라서 템플릿 태그 내에서도 같은 부분을 찾아보면 됩니다. 다시 위를 보시면, 날짜에 해당하는 부분에 <h2 class='date-header'> 가 있죠? 이런 식으로 블로그 페이지 내에서 어떤 부분이 어떤 템플릿 코드에 해당하는지 찾아볼 수 있습니다.

기본적으로는 이렇게 알아낸 코드들의 순서를 바꿔주고, CSS로 위치를 다시 잡아주면서 정렬하게 됩니다. 제 블로그 게시물페이지 상단에 설정된 템플릿 코드는 다음과 같습니다.

 

<div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <b:loop values='data:posts' var='post'>

<data:adStart/>
<h4><a class='bk' expr:href='data:post.url'><data:post.title/></a></h4>
<data:adEnd/>
<h3 class='date-header' style='float: left'>

<data:post.dateHeader/> |
<a class='bk2' expr:href='data:post.addCommentUrl'><span class='brd'><data:post.numComments/></span> comments</a>
</h3>

 

h4 태그를 이용해 게시물 제목을 나타냈습니다. <data:post.title/>이 바로 게시물의 제목을 나타내주는 템플릿 코드이지요. <data:post.dateHeader/> 는 보시다시피 날짜를 나타냅니다. <data:post.numComments/>는 게시물에 달린 댓글 수를 나타내지요.

이런 식으로, 간단하게 각 요소가 나타나는 순서를 변경해줄 수 있습니다. 모양을 꾸미는 것은 CSS를 통해 처리합니다. 템플릿 코드와는 달리 CSS는 소스보기를 통해서 쉽게 확인하실 수 있으니 제 블로그를 직접 뜯어보시면(?) 아실 수 있을 겁니다(크롬의 개발자 도구를 이용해 보세요). 또한 간단한 CSS 변경에 대해서는 웹에 강좌가 많으니, 구글링을 통해 찾아보도록 합시다.

우선 급하게 요점만 적어 써둡니다. 나중에 좀 더 쉽고 자세히 설명해보도록 하겠습니다.

'마이크로소프트'란 이름과는 어울리지 않게 MS에서 정말 잘 만드는 제품군이 있는데, 바로 하드웨어 제품군입니다. 그 중에서도 특히 마우스 제품들은 옛날 볼 마우스 시절부터 훌륭한 제품들을 만들어 왔습니다. 특히 휠 마우스 구형(구마)이나 인텔리 익스플로러 3.0 (익스 3.0), 인텔리 옵티컬(인옵) 등은 프로게이머들을 통해 널리 알려져 큰 인기를 끌었습니다. 여기엔 흔히 '휠옵'이라 불리는 '휠 마우스 옵티컬(Wheel Mouse Optical)' 도 속하는데, 오늘은 휠옵을 뜯어 청소한 김에 그 속모양을 사진으로 찍어봤습니다.

  

▲ 정식 명칭은 Microsoft Wheel Mouse Optical로, 국내에선 흔히 휠옵이라 불립니다. 흔히 쓰이는 건 1.1 또는 1.1a 버전으로, 좌우대칭 디자인의 일반적인 3버튼 휠마우스 입니다.
휠옵에는 화이트와 블랙 두 가지 색상이 있는데 화이트는 오래 쓰면 손때나 햇빛 등에 의해 아이보리색으로 쉽게 변색되곤 합니다. 제가 쓰는 사진 속 화이트 모델도 변색이 꽤 진행되어 누래진 모습입니다. 왼쪽에 보이는 두 개의 조각은 분해를 위해 떼어둔 서퍼입니다.

관련글 : SONY MDR-Q38LW 이어스폰지 교체

저는 귀가 약한 편이라 이어폰을 오래 끼지 못하는 편입니다. 그래서 헤드폰을 쓰게 되는데, 하필이면 안경을 썼기 때문에 귀를 다 덮는 헤드폰은 안경다리가 눌려서 불편함을 느끼죠. 머리 한 가운데가 눌리는 것도 싫고요. 그래서 클립형 헤드폰을 주로 씁니다.

처음 썼던 제품이 파나소닉의 저가형 제품(1만원 이하)이었는데, 저음이 굵직굵직한 것까진 좋았지만 상대적으로 고음은 별로더군요. 소리가 뭉개지는 듯한 느낌도 있었고요. 다음으론 오디오테크니카의 저가형 제품(EQ330)을 썼는데, 이건 고음이 괜찮은 듯한 대신 저음이 별로였습니다. 어느 정도였냐면, 이걸로 노래를 듣다가 다른 이어폰으로 노랠 듣고선 '어? 이 노래가 원래 이랬나?' 싶을 정도였으니까요. 게다가 최근까지 쓴 신형 제품(EQ300M)은 귀에 거는 클립 디자인이 안 좋아서 장시간 사용시 귀가 아팠습니다.

두 개나 사놓고 쓰던 EQ300M이 생각보다 금방 고장 나버려서 새로 뭐 살까 하며 열심히 찾았습니다. 클립폰 수요가 많이 줄었는지, 괜찮은 제품 찾기가 힘들었습니다. 제조사도 많이 줄어든 느낌입니다. 그나마 오디오테크니카, 파나소닉, 소니 등에서 계속 만들긴 하더군요. Actto나 COSY같은 주변기기 업체들은 패스.

 

제 19대 국회의원 선거가 끝난 지 벌써 한 달이 지났지만 아직까지 후 폭풍이 거센 모양이다. 몇몇 후보자들의 문제로 연일 시끄럽더니, 지금은 한 정당 전체가 뿌리부터 흔들거린다고 한다. 여기에 낙하산 사장의 사퇴를 요구하는 언론인 파업까지 겹쳐, 정말 혼란스러운 정국이 아닐 수 없다.

오늘 하려는 이야기는 사실 총선 시작 전부터 벼르고 있던 것이다. 이른바 '총선 후보자들의 SNS 활용에 대한 보고서' 쯤 될까. 거창하게 제목을 붙여봤지만 모든 후보자들에 대한 것은 아니고, 단지 우리 지역구 후보자들에 대해서만 이야기하려 한다. 물론 다른 지역구의 후보자들 또한 어떠했는지도 무척 궁금하긴 하다. 아무튼, 선거기간 동안 우리 지역구 후보자들의 SNS를 보고 느낀 것들을 주관적이나마 써내려 본다.