이 글의 최신버전이 http://hfkais.blogspot.kr/2013/06/tweetdeck-custom-style-3.0.html 에 있습니다.

이전 글 : TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 - 개정판 

 

며칠 전, 트윗덱 웹 버전(web.tweetdeck.com)이 업데이트 되었습니다. 10월 13일 현재 최신 버전은 2.0.2입니다.

이번 버전에서는 전체적인 UI가 약간 변경되었고, 기존의 어두운 테마 외에 밝은 테마가 추가되었습니다. 트윗덱 내에서 자체적으로 글꼴 크기를 3가지로 조절할 수 있게 되었습니다. 또한 화면 최상단에 ‘리스트’ 버튼을 따로 두어, 리스트 보기 및 관리가 편하게 이루어질 수 있도록 바꿨습니다.

겉모습의 변화와 더불어 속으로도 많은 변화가 있었는데요, 내부적인 HTML 마크업 및 CSS 클래스네임이 모두 변경되었습니다. 따라서, 이전 글에서 썼던 CSS 스타일 커스터마이징은 더 이상 먹히지 않게 되었습니다. 때문에 트윗덱 2.0에도 대응하는 새 CSS 스타일을 급히 만들어 올립니다.

 

▲ 적용하면 이런 모습

 

.column-panel { font-size:12px;}
.column-title { font-size:14px; font-weight:bold;}
.app-nav-item { font-size:13px;}
.column-title .attribution { display: none;}
b.link-complex-target { display:none;} 
.s-large-scrollbars .scroll-v::-webkit-scrollbar { width:9px; }
.stream-item { background: #3a4052; border-bottom: 1px solid #383838; }
.js-show-detail { background: #26282A;}
#open-modal .stream-item { background:none; }

 

우선 전체적으로 글꼴 크기를 줄였습니다. 이번에 새로 글꼴 크기를 조절하는 기능이 추가되었지만 최소 크기가 여전히 큰 편이라 따로 사이즈를 줄였습니다.

그리고 트위터 타임라인에서 각 사용자의 풀네임이 나타나지 않도록 했습니다. 원래 풀네임+@아이디 식으로 표현되는데, @아이디만 표시되는게 깔끔해서 바꿨습니다. 만약 풀네임을 표시하고 싶다면, ‘b.link-complex-target { display:none;}’ 부분을 삭제하면 됩니다.

각 칼럼별 스크롤바 크기가 매우 커졌기에, 기존과 같은 수준인 9px로 조절했습니다. 이 부분도 숫자를 바꿔 마음대로 커스터마이징 가능합니다. 8px이나 9px이 적절해 보이네요.

또한 페이스북 관련 내용에는 배경색이 적용되도록 했습니다. 기존 버전도 그렇고 이번 버전도 마찬가지인데, 트위터와 페이스북 내용을 구분해주지 않아 무척 불편합니다. 옛날엔 배경색을 따로 적용해 구분이 쉬웠으나 요새는 그냥 코딱지만한 아이콘 하나 딸랑 넣어주고 말죠. 사실 트윗덱 스타일 커스터마이징을 하게 된 계기도 이 기능 때문이었습니다. 이번 트윗덱 2.0에서 페이스북 내용에 별도의 CSS 클래스명을 지정하지 않아 애먹었지만, 아무튼 배경색을 따로 적용하는데 성공했습니다. 마음에 드는 색이 있다면 직접 HEX코드를 수정해 적용해주시면 됩니다. 포토샵 등을 이용하면 자신이 원하는 컬러의 HEX코드 값을 구할 수 있습니다.

적용 방법은 이전 글인 ‘TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 – 개정판‘ 을 참고해주시기 바랍니다. 간단하게 Stylish 확장기능을 설치하고, 트윗덱 사이트에 위 CSS를 적용하면 됩니다. 참고로 위 CSS스타일은 ‘어두운 테마’ 전용입니다. 테마별로 클래스네임을 다르게 가져가면 좋을 텐데 그렇지 않더군요. 밝은 테마용도 시간 나면 한번 만들어볼까 합니다.

트윗덱이 업데이트 되면서 검색창이 오른쪽 상단에 붙고 그 위치에서 결과까지 보여주게 되었는데요, 기존 CSS코드로는 검색결과 창이 투명해져 버려서 글자가 잘 안보이게 됩니다. 때문에 아래의 코드로 바꿔주면 제대로 보입니다.(2012.12.28 수정)

.column-panel { font-size:12px;}
.column-title { font-size:14px; font-weight:bold;}
.app-nav-item { font-size:13px;}
b.link-complex-target { display:none;}
.s-large-scrollbars .scroll-v::-webkit-scrollbar { width:9px; }
.stream-item { background: #3a4052; border-bottom: 1px solid #383838; }
.js-show-detail { background: #26282A;}
#open-modal .stream-item { background:none; }
.popover .stream-item { background:#fff;}

덧) 트윗덱에서 더 이상 페이스북을 지원하지 않게 되면서 이 팁도 별로 쓸모가 없어졌습니다. 설정 메뉴에서 글꼴 크기가 더 세분화되어 굳이 이 글의 방법을 쓰지 않아도 됩니다. 그나저나 페이스북이 빠진 건 아쉽게 되었네요.(2013-06-01)

그 동안 잘 써온 msi U200X 울트라씬 노트북의 하드디스크가 사망하였습니다. 다소 무리한(?) 작업을 시도했더니 못살겠다고 죽어버리는군요. 그래 봤자 동시 억세스 얼마 하지도 않았는데... 아무튼 WD 하드는 저와 궁합이 잘 안 맞나 봅니다. 복구도 잘 안되고... 중요한 사진들은 미리 백업을 해놨으니 망정이지, 큰일 날 뻔 했군요. 아직 다른 부분은 멀쩡한 노트북이기 때문에, 하드디스크를 바꿔 계속 쓰기로 했습니다. 오늘은 msi U200X 노트북의 하드디스크 교체 방법을 사진으로 찍어봤습니다.

 

꽤 오랜만에 구글 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버튼 휠마우스 입니다.
휠옵에는 화이트와 블랙 두 가지 색상이 있는데 화이트는 오래 쓰면 손때나 햇빛 등에 의해 아이보리색으로 쉽게 변색되곤 합니다. 제가 쓰는 사진 속 화이트 모델도 변색이 꽤 진행되어 누래진 모습입니다. 왼쪽에 보이는 두 개의 조각은 분해를 위해 떼어둔 서퍼입니다.