TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기

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

Twitter에 인수되었던 TweetDeck이 얼마 전 리뉴얼을 단행했습니다. 오랜기간 기본적인 관리조차 제대로 되지 않아 500 server error를 뱉어내던 트윗덱 홈페이지도 바뀌었고, 크롬용 트윗덱 익스텐션도 새롭게 바뀌었습니다. 전체적인 모습은 좀 더 예쁘고 깔끔하게 바뀌었지만, 오랫동안 트윗덱을 써온 사용자로서 UI적으로 다소 불편한 점도 눈에 띕니다.

특히 가장 불편한 점은 타임라인의 글꼴 크기와 줄간격인데요, 옛날 노란색 트윗덱에 너무 적응되어 버려서 파란색 트윗덱은 적응이 안됩니다. 그래서, 이걸 바꿔보기로 하고 방법을 찾기 시작했습니다.

우선 가장 쉽게 생각해 볼 수 있는게 사용자 CSS를 적용시켜주는 익스텐션입니다. 파이어폭스에서 썼던 Stylish가 크롬용으로도 있더군요. Stylebot이라는 익스텐션도 꽤 편리해 보였습니다. 여러 시도를 해보았지만 결과적으론 실패였습니다. 웹사이트라면 쉽게 적용이 되지만, 익스텐션으로 구동되는 트윗덱에는 적용이 잘 안되더군요. 아, 물론 TweetDeck.com 에서 트윗덱을 쓰는 경우라면 당연히 적용이 됩니다. 주소 써주고 수정된 CSS 넣어주면 바로 됩니다.

그래서 생각한게, 아예 익스텐션 구성요소 파일을 건드려보자는 것이었습니다. 크롬의 개발자도구(Ctrl+Shift+i)를 이용하니 금방 되더군요. 트윗덱 익스텐션이 저장된 위치는 폴더명이 복잡하긴 했지만 북마크를 통해 쉽게 알 수 있었고요. 제 경우, 북마크를 통해 찾은 트윗덱 저장위치와 CSS파일 저장위치는 다음과 같았습니다.

C:\Documents and Settings\사용자계정명\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.0.1_0\web\css

파란색으로 된 부분은 어쩌면 컴퓨터마다 다를 수도 있을 것 같다는 생각이 드네요. 적용하실 때 참고하시고… 이 폴더를 열어보면 notification.css, unsupported.css, webkit.css 요렇게 세 개의 CSS파일이 들어있습니다. 딱 보면 감이 오시겠지만, notification.css는 알림창용 CSS입니다. 우리가 건드릴 것은 webkit.css입니다. 메모장으로 이 파일을 열어, .chp .chp-content 부분을

.chp .chp-content { font-size:12px; line-height:1.3em; margin-left:61px; padding:9px 11px 10px 8px;-webkit-user-select:text;user-select:text;}

와 같이 수정해 주었습니다. 굵은 글씨가 추가/수정된 부분입니다. 그런데 찾아보니 맨 윗부분에도 글꼴 사이즈를 지정한 부분이 있더군요. 아예 전체에 적용시켜도 되겠다 싶어 'font-size'로 검색해서 나오는 첫 번째 부분을 font-size:12px;로 바꾸어 주었습니다. 그리고 저장 뒤 트윗덱을 다시 띄웠습니다.

결과는 성공! 위 스크린샷에는 12px크기/150%줄간격의 설정이 적용되었습니다. 적용하고 보니 줄간격이 너무 넓어서 다시 130%로 줄였지요. 이제 트윗덱의 CSS를 마음대로 건드릴 수 있게 되었습니다.

그러고보니 트윗ID마다 앞에 붙은 @가 거슬리는데, 이것도 없애볼까 합니다. 생각보다 쉬울 것 같네요. 그럼, 이만 글을 줄이겠습니다. 간단한 팁이지만 도움이 되길 바랍니다.

행여 수정이 어려운 분들을 위해 수정된 CSS파일을 공유합니다. 타임라인 텍스트 크기 및 줄간격 수정, 페이스북 연동시 페북 메시지에 대해서는 배경색을 다르게 적용(트윗덱 옛 버전과 같은 방식) http://www.box.com/s/ij56s5ulyx468u5qjfch/preview

덧) 이 글에서 나타난 몇몇 문제점들을 보완한 내용이 TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 - 개정판 글에 있습니다. 이쪽 내용이 더 도움될 것입니다.