레이블이 트위터인 게시물을 표시합니다. 모든 게시물 표시
레이블이 트위터인 게시물을 표시합니다. 모든 게시물 표시

2010년 8월 23일 월요일

트위터 MonkeyFly용 스킨 결정!

egoing 님께서 개발하신 Monkeyfly는 웹기반 트위터의 기능을 극대화시키는 확장이다.
Monkeyfly에서는 css를 활용한 스킨 기능을 지원하는데, 많은 능력자분들께서 css를 공개해주셨다.

그 중 내가 주력으로 사용해온 것은 희주(@jugug) 님의 CSS였다.

한동안 사용하면서 느낀 단점은 지정된 배경색이 원래의 배경을 다 덮어버린다는 거.
(물론, 개발자가 의도한 것임. 내가 느끼기에 단점이라는 것 뿐임)

그래서, 글꼴은 그대로 두고, 배경 및 색깔 부분만 제거해서 쓰기로 했다.
아래는 그렇게 수정된 CSS다.

body #header #logo img
{
    padding-left: 0 !important;
}
#content,.wrapper
{
    border-radius: 5px !important;
}
ul.top-navigation
{
    padding: 0.5em 0;
}
ul.top-navigation a
{
    border-left: 1px solid #cde;
    font: bold 11px tahoma !important;
    margin-right: 1px;
    padding: 0 0 0 5px;
}
ul.top-navigation li:first-child a
{
    border-left: 0;
}
ul.top-navigation a:hover
{
    text-decoration: none;
}
#update_notifications
{
    height: 46px !important;
}
#globalTab
{
    margin-top: 17px;
}
.status-content,.entry-content
{
    font: 13px 나눔고딕 !important;
}
.status-body strong a
{
    font: bold 11px Meiryo !important;
}
td.tdnest:nth-child(even)
{
    background-color: #f5f5f8;
}
#side_base
{
    border-left: 0;
}
#side
{
    width: 198px !important;
}
#side a
{
    font-family: tahoma !important;
    font-size: 11px;
    font-weight: bold;
}
.list-header,.list-header-inner
{
    border-radius: 5px 5px 0 0;
}
#footer-container
{
    min-height: 0 !important;
}
.read-mark
{
    border-bottom: 0 !important;
}
#expand_sidebar
{
    position: fixed;
    top: 82px !important;
}
#pb-side-box
{
    left: 0;
    top: 150px !important;
}
#pb-side-content li
{
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#pb-side-content li a
{
    font: 11px tahoma !important;
    padding: 1px !important;
}
#pb-side-content #primary_nav
{
    float: left;
    padding-right: 5px;
}
#pb-side-content #side_lists
{
    border-left: 1px solid #ddd;
    float: left;
    padding-left: 5px;
}
#pb-side-content .lock-icon
{
    width: 8px !important;
}
#pb-side
{
    border-style: solid;
    border-width: 1px 0 1px 1px !important;
}
#pb-side-top,#pb-side-bottom
{
    left: 0;
}

이렇게 수정된 CSS가 좀 길어보여서 압축해서 사용하기로 했다.
(사실, 이 CSS는 로컬에 저장되기 때문에 전혀 빨라지는 일은 없음 ㅎㅎ)

body #header #logo img{padding-left:0 !important;}#content,.wrapper{border-radius:5px !important;}ul.top-navigation{padding:0.5em 0;}ul.top-navigation a{font:bold 11px tahoma !important;margin-right:1px;padding:0 0 0 5px;border-left:1px solid #cde;}ul.top-navigation li:first-child a{border-left:0;}ul.top-navigation a:hover{text-decoration:none;}#update_notifications{height:46px !important;}#globalTab{margin-top:17px;}.status-content,.entry-content{font:13px 나눔고딕 !important; }.status-body strong a{font:bold 11px Meiryo !important;}td.tdnest:nth-child(even){background-color:#f5f5f8;}#side_base{border-left:0;}#side{width:198px !important;}#side a{font-weight:bold;font-family:tahoma !important;font-size:11px;}.list-header,.list-header-inner{border-radius:5px 5px 0 0;}#footer-container{min-height:0 !important;}.read-mark{border-bottom:0 !important;}#expand_sidebar{top:82px !important;position:fixed;}#pb-side-box{top:150px !important;left:0;}#pb-side-content li{padding:0 !important;border:0 !important;margin:0 !important;}#pb-side-content li a{padding:1px !important;font:11px tahoma !important;}#pb-side-content #primary_nav{padding-right:5px; float:left;}#pb-side-content #side_lists{border-left:1px solid #ddd;padding-left:5px; float:left;}#pb-side-content .lock-icon{width:8px !important;}#pb-side{border-width:1px 0 1px 1px !important;border-style:solid;}#pb-side-top,#pb-side-bottom{left:0;}

수정 및 배포를 허락해주신 희주(@jugug) 님께 다시 한번 고맙다는 말씀을 드립니다.

2010년 8월 10일 화요일

트위터 어플들아! 링크 규칙을 맞춰라! 특히 한글 해쉬태그!

국내 트위터 사용자가 100만명에 달하고 있다. (관련 링크)
이 많은 사용자들이 모두 트위터닷컴을 사용하는 것은 아닐 것이고, 다양한 트위터 어플들을 사용할텐데…
문제는 이 트위터 어플들 간에 가장 기본적이고 중요한 링크에 대한 규칙이 완전히 다르다는 거

특히, 한글 해쉬태그는 심각하기 짝이 없는 수준이다.
정확히는 트위터 닷컴에서는 한글 해쉬태그를 지원하지 않는다!

다양한 트위터 어플들 중, 내가 사용하는 3종의 트위터 어플 간에 얼마나 링크 해석의 차이가 큰가를 확인해봤다.
출전 선수는 아래와 같다.

- 트위터 닷컴( https://twitter.com ): 레퍼런스다. 이 선수를 빼는 건 말이 안 된다
- 트윗KR ( http://twtkr.com ): 우리나라에선 종종 공식한글판으로도 오인되는 트위터 계의 옴니아2 또는 IE
- Chromed Bird ( Twitter Extension ): 제목 그대로 구글 크롬의 확장


1. 한글 해쉬태그

가장 심각한 문제라고 생각되는 부분이 한글 해쉬태그다.

트위터 닷컴에선 한글 해쉬태그를 지원하지 않는다.
얼마 전까진 #한글_ 의 형식으로 구성된 해쉬태그를 지원했지만, 이제는 더이상 지원하지 않는다.

모든 한글 해쉬태그를 무시하는 트위터 닷컴


트윗KR에서는 트위터 닷컴에서 예전에 지원하던 #한글_ 형식을 지원한다.
오리지널이 어디로 가건 말건 관심 없다.
트윗KR의 무개념은 아래의 크롬드 버드와 비교해보면 더 웃긴다.

엉거주춤한 트윗KR의 한글 해쉬태그


크롬드 버드는 한글을 영문과 동일하게 취급한다.
즉, #한글 (언더바 없음) 형식의 해쉬태그를 그냥 인식해준다.
이 쯤에서 드는 생각… 트윗KR은 왜 굳이 언더바가 포함된 한글 해쉬태그만 인식할까?

차라리 깔끔한 한글 해쉬태그를 지원하는 크롬드 버드



2. 링크 part 1

웹 주소와 메일 주소에서도 해석의 차이가 계속 발생한다.

일단 트위터 닷컴을 보자.
우선 종종 하는 실수인 RT와 http 주소를 붙여서 쓰는 경우, http만 따로 인식하는 상식적인 동작을 보인다.
그리고, 메일 주소는 트위터 아이디와 혼동할 수 있기 때문인지, 별도로 링크처리를 하지 않는다.

명확한 원칙이 느껴지는 트위터 닷컴


트윗KR은 RThttp는 정상적으로 인식하지만, 메일 주소는 개무시하고, 트위터 아이디로 인식한다.
이 문제는 생각해볼수록 웃기기 짝이 없는 문제다.
(트윗KR 개발자들은 이런 문제엔 관심 없나? 아니면, 알아도 무시?)

메일주소를 지멋대로 인식하는 트윗KR


크롬드 버드는 아예 한술 더 뜬다.
RThttp까지 묶어서 링크처리한다. 어쩔~
메일 주소의 일부를 트위터 아이디로 인식하는 정도의 문제는 당연히 지원(?)한다.

주소는 무엇이든 제멋대로 인식하는 크롬드 버드




3. 링크 part 2

웹 주소나 메일 주소 앞뒤에 한글이 붙은 경우의 링크 인식 방식을 확인해봤다.

트위터 닷컴은 모든 경우에서 한글을 무시한다. (알파벳, 숫자, 인가된 기호 몇 개를 제외하고는 모두 무시)
따라서, 아래 캡쳐화면처럼 링크가 아닌 것이 링크로 인식되는 실수는 발생하지 않는다.

그리고, 당연히 모든 메일주소는 무시된다.

역시 명확한 원칙이 느껴지는 트위터 닷컴


트윗KR은 메일 주소의 경우 앞의 2번과 같은 메커니즘으로 동작하기 때문에 한글이 붙건 말건 상관 없다.
웹 링크의 경우, 앞에 붙은 한글은 무시하지만, 뒤에 붙은 한글은 링크로 인식한다. 헐~

메일주소건 한글이 붙은 주소건 제멋대로 인식하는 트 위터KR


크롬드 버드도 트윗KR과 동일하게 동작한다.

트윗KR과 동일한 혼란을 보여주는 크롬드 버드. 어쩔~



물론, 이런 애매한 문제가 발생하는 근본적인 원인은 트위터 닷컴 측의 잘못이다.
링크의 규칙에 대해 정확한 레퍼런스를 정하지 않았을 뿐더러, 종종 바꾸기 때문에 어플 개발자들이 놓칠 수 있다.

하지만, 트위터 어플을 개발하는데, 레퍼런스가 없다면, 가급적 오리지널과 동일하게 동작하도록 하는 것이 상식이다.
그래야 사용자들이 혼란을 느끼지 않는다.
지금의 트위터 어플들은 혼란 그 자체다. 지들이 무슨 Agent of Chaos(조커)냐?

가장 큰 문제라 생각하는 한글 해쉬태그
뒤에 쓸데 없이 언더바(_)를 붙이는 삽질은 대체 누구를 위한 거냐?
트위터 사용자들의 편리를 위한 거냐? 아니면, 트윗KR 개발자들의 고집을 위한 거냐?

2010년 1월 11일 월요일

트위터KR: 트위터 계의 옴니아2 또는 IE?

우리나라의 트위터 사용자 중 많은 사람들이 twitter.com이 아니라 트위터KR(twtkr.com, 이하 twtkr)을 사용한다.

twtkr는 다양한 기능을 제공할 뿐만 아니라 다른 장점도 갖추고 있다.

- 링크된 이미지/비디오를 자동으로 보여줌
- 입력하는 글을 적절히 커스터마이즈 (URL 축소, 이미지 삽입, 위치정보 입력 등)
- twitter와 거의 비슷한 화면에서 그대로 한글화하여 외국어 알러지가 있는 사람들에게 편안한 느낌을 줌

내 블로그에서도 twitter이 아니라 twtkr로 링크하도록 해뒀다.

그런데, twtkr은 좋은 트위터 클라이언트일까?
그렇지는 않은 것 같다.

내가 느끼는 twtkr의 가장 큰 문제는 개발철학이 뭔지를 모르겠다는 것이다.

- twitter 기능 몽땅 지원
- twitter 관련 서비스 몽땅 지원
- twrtter에 없는 서비스도 추가로 지원 (긴글)

이 정도를 목표로 만든 것 같은데, 이 중 긴글은 트위터 서비스의 본질을 건드린다는 문제도 갖고 있다.
(트위터의 본질은 140자 이내의 글자를 공개한다는 것임)

이런 식으로 명확한 철학 없이, 모든 기능을 다 되게 하고, 거기에 자기만의 기능을 추가한 놈들이 있다.

하나는 스마트 폰 계의 졸작 옴니아2이고, 하나는 웹 브라우저 계의 졸작 인터넷 익스플로러이다.

옴니아2... 전지전능(풉!)하단 이름 그대로 안 되는 기능은 거의 없는 것 같다.
H/W 스펙에 비해 느려터진 속도, 각 기능들을 서로 완전히 따로 만든 듯한 부정교합, 그러면서도 어설프게 아이폰을 베낀 모습들 그리고, 싼티가 철철 넘치는 광고 등이 문제여서 그렇지...

인터넷 익스플로러... 역시 비슷한 철학(?)으로 시작했다.
지금 듣보잡 취급을 받는 IE6마저 처음엔 모든 경쟁 브라우저의 기능이 다 지원되고 추가로 ActiveX가 지원되는 것을 목표로 만들어진 것이다. 웹표준을 잘 지원하지도 않고, ActiveX 덕분에 컴퓨터가 개판이 되는 문제가 있어서 그렇지...

옴니아2, 인터넷 익스플로러 모두 많은 기능에 비해 평은 좋지 않다.
특히, 긴글 기능을 보면 twtkr이 그들과 같은 길을 가려는 것이 아닌가 우려된다.

트위터KR의 긴글 기능은 제한되어야 한다!

우리나라의 많은 트위터 사용자들이 사용하는 트위터KR(이하 twtkr)에는 긴글 기능이 있다.
트위터의 스펙 중 가장 기본은 140자 이내의 글자를 공개한다는 것인데, 이 제한을 가볍게 극복해버리는 것이다.

이 140자의 제한이 트위터 설계철학이든, 기술의 한계든, 또 무엇이든 이제는 왜 그런 제한이 있는가는 중요하지 않다.
중요한 것은 140자라는 제한을 트위터의 스펙으로 고려해야 한다는 것이다.
그렇지 않으면 일부 twtkr 사용자들의 정신나간 짓처럼 한 페이지짜리 글이 트위터에 창궐한다.

트위터의 글자라는 제한을 이미지나 동영상 쪽으로 극복하기 위한 다양한 서비스들이 널리 사용된다.
그런데, 이미지나 동영상의 경우 140자의 글자 범위 내에서 기능을 확장하기 때문에 큰 문제가 없다.

하지만, 긴글 기능은 140자의 범위를 벗어나기 때문에 트위터 서비스의 본질을 건드리게 된다는 문제가 있다.
따라서 긴글 기능은  기본기능이라는 인상을 주어서는 안된다.

긴글은 twitter에서는 이런 식으로 표시된다. 140자의 제한과 함께...


하지만, twtkr은 140자 이상의 긴글은 기본적으로 표시해주기 때문에 기본기능이라는 인상을 느끼게 한다.
우리나라의 많은 초보자들이 twtkr로 입문한다는 점을 생각해보면 이미 잘못된 기본을 쌓은 사람들이 꽤 있다고 생각해야 한다.
마치, ActiveX가 없는 인터넷 뱅킹은 위험하기 짝이 없는 것이라는 정부관계자들처럼 말이다.

비록 입력 단계에서 약간의 경고문구를 띄우긴 하지만 그런 경고문구가 그닥 큰 효력이 있다는 생각은 들지 않는다.
현재의 경고문구는 흰색 배경인데, 이게 빨간색 배경으로 화면을 계속 돌아다닌다고 해도 무슨 차이가 있겠는가!
ActiveX 설치 경고 화면이 나온다고 인터넷 익스플로러가 안정적인 브라우저가 되는 것이 아닌 것 처럼 말이다!

twtkr에선 이런 모양으로 표시되는데, "기본 기능"이라는 인상을 강하게 심어준다!


트위터KR에서 그림과 동영상 등을 기본적으로 보여주는 것은 아주 편리한 기능이지만, 이러한 기능 확장이 긴글까지 연장되는 것은 반대다. 서비스의 본질은 그대로 두는 범위 내에서 기능을 확장했으면하는 바램이다.


2009년 12월 21일 월요일

텍큐닷컴 블로그에서 트위터 글 보기

이미 블로그에 적용한 사람은 다 적용했겠지만, 트위트 웹 클라이언트인 SEARCUS를 소개할 겸 포스팅한다.
트위트 웹 클라이언트엔 여러가지가 강력한 것들이 있지만, 요즘 트윗kr이 대세는 대세인 것 같다.
하지만, 이 놈은 너무 많은 기능을 수용한 나머지 느려터진 모습을 보여준다. (관련글: Ludens님의 twtkr, 트위터의 본질을 잃다)

몇 가지를 찾아봤는데, 그 중 눈에 띈 것은 풍부한 기능에도 불구하고 빠른 동작을 보여주는 SEARCUS.

자신의 블로그에 트위터 글을 보여주고, 클릭시 SEARCUS에서 트위터를 관리하려면 아래와 같이 하면 된다.


1. 파일 올리기

아래의 압축 파일을 풀면 twtkr와 SEARCUS라는 2개의 폴더가 나온다.
그리고, 각각의 폴더에는 j_Twitter2Textcube.gif라는 파일이 있다.

이 두 파일은 (당연히) twtkr또는 SEARCUS에 블로그 글을 연결해주는 파일들이다.

SEARCUS 폴더에 저장된 j_Twitter2Textcube.gif를 스킨 업로드를 통해 올린다.
(혹시나 twtkr에 필이 꽂혔다면 twtkr 폴더에 들어있는 것을 업로드하면 됨)




2. 스킨 수정


스킨에 트위터를 올리려면 아래와 같은 코드를 적절한 위치에 삽입하면 된다.

<div id="twitter_div"> 
<h3>Twitter</h3>
<ul id="twitter_update_list"></ul>
<a href="http://searcus.com/zockr" id="twitter-link" target="_blank" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://(블로그 이미지 주소)/j_Twitter2Textcube.gif"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/(트위터id).json?callback=twitterCallback2&amp;count=5"></script></div>


4행의 searcus.com 자리에는 위에서 선택한 트위터 웹 클라이언트의 주소를 적어주면 된다.
그리고, 6, 7 행의 괄호에는 해당되는 주소와 id를 적으면 된다.

이렇게 하는 것으로 작업은 끝이다.
코드가 삽입된 위치에서 아래와 같이 트위터에 올린 글을 볼 수 있을 것이다.


2009년 12월 20일 일요일

텍스트큐브닷컴에 "트워터로 글 보내기"를 지원하라!

텍큐닷컴은 글 보내기 기능에서 트랙백, 다음뷰, 미투데이 등으로 글을 보낼 수 있다.


그런데, 꼭 있을 것이라 생각했던 트위터로 글 보내기없더라.

요즘 블로그 세상에서 트위터로 글을 보내는 기능이 없다는 것이 이해가 가지 않는다.
아마도 계획은 있지만, 여러모로 바쁘기 때문에 아닐까하고 생각하고 싶다.

반드시 (당연히 지원해야 하는) 트위터로 글 보내기를 꼭 지원해주면 좋겠다.
트위터로 글 보내기를 지원하라!!!

2009년 7월 28일 화요일

블로그에 트윗 설치 완료!

도아님의 글 블로그에 내 트윗 달기를 참고해서 트윗을 달았다.
이제 처음 트위터의 세계에 발을 딛었는데, 열심히 해보겠다. ^^;

사용자 삽입 이미지

덧. 도아님 홈페이지의 트래픽을 줄인다는 핑계로 blogger.js는 내 블로그에 올렸다. ^^;