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

by H.F. Kais | 2011. 12. 30. | 0 comments

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

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

일전에 트윗덱 CSS 스타일을 수정하는 법에 대해 포스팅한 적이 있습니다. 크롬 익스텐션으로 설치된 트윗덱의 파일 경로를 찾아 직접 수정해주는 방식이었는데요, 어느 정도 예상하긴 했지만 문제가 많았습니다. 그래서 다시 방안을 모색하여 적용시켰습니다. 이번 글에선 그 방안에 대해 쓰고자 합니다.

 

트윗덱 익스텐션 직접수정의 문제

이전 방법에서는 크롬에 설치된 트윗덱 익스텐션의 CSS파일을 직접 수정해주는 식으로 문제를 해결했습니다. 그러나 이 방법은 문제가 있었는데, 트윗덱 익스텐션이 업데이트 되어버리면 CSS파일도 원래 버전으로 되돌아간다는 점이었습니다. 예상하긴 했지만 수정점이 이렇게 많을 줄은 몰랐습니다. 결과적으로 이 방법은 그다지 추천할만한 것이 못됩니다.

  • 익스텐션이 설치된 폴더를 일일이 찾고, 또 그 안에서 CSS파일을 찾아야 한다.
  • CSS파일을 직접 수정해주어야 한다. 각종 클래스 명을 찾기가 어려울 수 있다.
  • CSS에 대한 지식이 어느 정도 있어야 한다.
  • 트윗덱 익스텐션이 업데이트 되면, 수정된 CSS가 새로운 파일로 덮어쓰기 된다.
  • 업데이트와 함께 CSS에서 추가되는 부분이 있을 수 있어, 기존에 쓰던 파일을 덮어쓰기 할 수도 없다.
  • 결국 그때그때 일일이 수정해주어야 하는 불편이 따른다.
  • 결정적으로, 트윗덱 크롬 익스텐션 버전과 웹 버전에 별다른 차이가 없다(!).

위와 같은 문제점들을 인식했고, 방법을 바꾸기로 했습니다. 결국 현 시점에서 익스텐션 버전과 웹 버전의 차이가 사실상 없기 때문에, 웹 버전을 쓰기로 했습니다.

 

Stylish를 이용한 커스텀 CSS 적용

웹에서 구동되는 트윗덱을 쓰기로 했기 때문에, Stylish나 Stylebot과 같은 익스텐션을 사용할 수 있게 되었습니다. 이 익스텐션들은 웹페이지의 CSS 스타일시트를 사용자가 미리 설정한 스타일시트로 바꿔서 보여줍니다. 저는 파이어폭스 때도 Stylish를 썼기 때문에 여기서도 Stylish를 쓰기로 했습니다. 물론 Stylebot을 써도 무방합니다. Stylebot은 웹페이지의 구성요소(엘리먼트) 선택하는 걸 도와주는 기능이 있기 때문에 오히려 더 나을 수도 있습니다.

Stylebot 사용
△ Stylebot(오른쪽)과 크롬 개발자도구(아래쪽)를 둘 다 켠 모습 

 

CSS 스타일시트를 커스터마이징하기 위해서는 해당 웹페이지에 적용된 스타일시트 구조와 클래스 명 등을 알아야 합니다. 제 경우엔 익숙한 크롬 개발자도구를 이용했습니다. 우선적으로 눈에 띄는 부분부터 클래스 명을 찾아, 스타일을 다시 정의했습니다. 이전 버전의 트윗덱이 익숙했으므로 그쪽을 참고하였습니다. 글꼴 크기를 줄이고, 페이스북 뉴스피드엔 배경색을 따로 적용시켰습니다. 타임라인에서 트윗아이디 옆에 사용자 풀네임이 다 뜨는 게 정신 사나워 그것도 없앴습니다. 다행스럽게도 각 요소들마다 클래스가 지정되어 있어 쉽게 적용할 수 있었습니다. 그렇게 해서, 다음과 같은 코드를 만들었습니다.

.chp-content { font-size: 12px;}
.chp-detail .chp-content p { line-height: 140%; font-size: 14px; font-family: arial, gulim, '굴림'; }
.chp-facebook { background-color: #3a4052; }
strong.fullname { display: none; }

1~2줄은 글꼴 크기를 12px로 줄이고 트윗 자세히 보기 화면에서 글꼴이 바탕체로 나오던 것을 바꾼 것입니다. 3줄은 페이스북에서 온 뉴스피드, 알림 등의 배경색을 다시 정한 것입니다. 4줄은 타임라인에서 트윗ID 외에 풀네임이 나오던 부분을 안 보이게 처리한 것입니다.

 

변경 후

이 코드를 Stylish에서 적용시키면 위와 같은 결과를 얻을 수 있습니다. 타임라인의 글꼴 크기가 작아졌고, 트윗 상세보기 화면의 글꼴이 바뀌었습니다(크기는 그냥 크게 적용). 페이스북 뉴스피드나 알림에는 오른쪽과 같이 푸른 빛이 도는 배경색이 사용됩니다. 익스텐션의 CSS파일을 수정한 것이 아니라 웹페이지를 로딩한 후 마지막에 Stylish가 스타일을 덮어씌우기 때문에, 트윗덱이 업데이트 되더라도 별다른 문제가 없습니다. 물론 클래스 명을 바꿔버리거나 한다면 Stylish에서 적용한 스타일이 제대로 먹히지 않겠죠.

아무튼, 이렇게 해서 간단하게 트윗덱 웹 버전의 몇몇 부분을 커스터마이징 해봤습니다. 잘 응용하면 다양한 방법으로 활용이 가능할 것입니다. 쓰면서 또 마음에 들지 않는 부분이 발견되면, 그때그때 또 고쳐서 쓸 것입니다.

덧) 트위터에서 트윗덱의 새 버전을 런칭했습니다. 2.0.1버전인데요, 구조나 클래스명 등이 많이 바뀌어 위 방법이 통하지 않습니다. 새 버전용 스타일시트는 현재 작업중입니다. - 2012.10.11

덧2) 어두운 테마용 코드(버그 있을 수 있음) -
.column-panel { font-size:12px;}
.column-title { font-size:14px; font-weight:bold;}
.app-nav-item { font-size:13px;}
.column-title .attribution { 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; }


전체 내용 보기

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

by H.F. Kais | 2011. 12. 16. | 0 comments

이 글의 최신버전이 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;로 바꾸어 주었습니다. 그리고 저장 뒤 트윗덱을 다시 띄웠습니다.

snap_600

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

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

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

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

전체 내용 보기

이 시대 젊은이들의 표현법

by H.F. Kais | 2011. 12. 7. | 2 comments

페이스북에 글 하나를 올렸습니다.

 

멋진 걸 본다. "우와~ 대박~!"
예쁜 걸 발견한다. "와 대박~!"
황당한 일을 당한다. "헐… 대박…"
기분이 좋다. "ㅋㅋㅋ 대박~~"
신난다. "ㅎㅎㅎ 대박!!!"
졸립다. "zzz 졸음 대박 ㅠ"
물건값이 싸다. "대박!!! 어머 이건 사야해~!"
물건값이 비싸다. "헐 대박..."
지나가는 사람이 잘생겼다. "우와앗 대박~!"
지나가는 사람이 못생겼다. "헐헐헐 대박..ㅋㅋㅋ"

설마 이 글을 보고있는 지금도 "헐 이거 뭐야 대박 ㅋㅋㅋ" 이러고 있진 않겠지?

 

…라고 올렸는데, 그 글에도 대박이란 리플이 붙더군요.

 

"ㅋㅋㅋ대박"

"대박사건"

"대박ㅋㅋㅋ"

"대박낚시!ㅋㅋㅋ"

 

자신의 생각과 감정과 느낌을 오로지 '대박' 한 단어로 표현해버리고 마는 이시대 젊은이들의 언어표현적 한계를 지적하고자 했건만(!), 이에 달리는 리플 또한 '대박'으로 귀결되고 말았습니다. (아마 리플 단 대부분이 글의 의도를 알아차렸겠지만)

'대박'이란 단어의 사용빈도적 '대박'은 대체 언제까지 갈까요?


전체 내용 보기
태그: