Overnight Gibberishes

개인적인 일에 바빠 림미노닷컴에 손을 놓고 있었는데, 이 개인적인 일이라는 것이 가끔 무기력해지기도 하고..
그래서 내가 가장 좋아하는 취미 두가지 중 비교적 빠른 시간에 결과가 보이는 웹사이트 개발을 하기로 했다.
물론 예전처럼 100% 신경쓰진 못해도, 뭐 리뉴얼도 아니고 소소한 업뎃이니까 ㅋ

1) CSS3
신경을 끄고 살았던 터라 CSS3가 나온지도 몰랐다;;
WebDesignerWall (아래 사용된 예제 그림들의 출처) 에 놀러갔다 이제야 본거지;;
그동안 온갖 편법과 노가다를 단 몇줄로 끝내버리는 대단한 변화가 있었다. 예를들면,

색상을 지정할때 rgba값을 주면 투명도를 조절할 수 있다.

마지막 alpha는 %인데, 0은 완전 투명이고 1은 완전 불투명이다. 예제에서는 25%를 지정한 것이다.
CSS3에 추가된 태그들에 무조건 rgba만 사용해야 하는 것은 아니다. 적재적소에 사용하면 참 편리하다.

이렇게 하면, 짠 하고 div에 그림자가 생긴다. 콤마(,)로 구분해서 계속 그림자를 추가할 수 있다.

-webkit-box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);
-moz-box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);
box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);

림미노닷컴에서는 월페이퍼 메뉴의 롤오버에 사용했다. (사실 그림자가 있다는걸 보여주려고 좀 과하게 쓴면이;;ㅋㅋ)


텍스트에도 그림자를 줄 수 있다.

이렇게 하면 끝. 물론, 아래와 같이 색상을 rgba로 줄 수 있다 (투명도 조절을 위해 -_-b).

text-shadow: 1px 1px 0 rgba(255,255,255, 1);

다음은 박스나 이미지 곡선처리다 (참 많은 편법들이 나왔었지 ㅋ).
기존에 모퉁이를 둥글게 하려면 이미지를 사용해야 했지만, 이젠 CSS3 하나로 해결할 수 있다.

이렇게 하면 div나 img의 모서리를 둥글게 할 수 있다. 이것은 림미노닷컴 pathos 메뉴에 잔뜩 사용했다.
네 모서리 둥글기를 똑같이 하고 싶다면 아래와 같이 간단히 할 수도 있다.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;

그다음 림미노닷컴에 적용해본 CSS3는 기울기다. 말그대로 CSS3만으로 이미지를 기울일 수 있다.

-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

이렇게 하면 시계방향으로 30도 기울어진다. 반시계방향으로 하려면 -30deg 값을 주면 된다.
림미노닷컴 pathos 메뉴의 프로필 이미지를 보면 -5도~5도 사이에서 랜덤으로 기울어진다. 다소 귀엽다 ㅋㅋ
문제는 Google Chrome에서 계단현상이 생긴다. FireFox에서는 살짝 Blur하게 보이고, Safari에서는 깨끗하다 +ㅂ+


이미지를 확대할 수도 있다. 림미노닷컴 월페이퍼 메뉴에 사용했는데, 그림자와 함께 쓰면 그럴싸하다.

-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);

이렇게 하면 130% 확대된다. 그냥 확대되는 것이 아니라 다른 컨텐츠 위로 떠올라 확대되는 느낌이다.
다시 말하면 레이아웃을 깨지 않고 개별적으로 적용되는 것.
다만, 원본이미지가 어떠하든 확대된 이미지 해상도는 떨어진다. 지나치게 확대하면 못 알아볼지도;;

일단 림미노닷컴에 적용해본 CSS3는 여기까지다.
읽어보니 애니메이션도 되고, 인쇄를 위한 기능도 강력해졌고, 객체지정이랄지 하는 요소가 편리해졌다.
역시나 Internet Explorer는 CSS3를 지원하지 않는다.
FireFox에서는 img에 둥근 모서리 적용이 안되는 것 같고, Chrome에선 이미지를 기울이면 계단현상이 심하다.

놀라운 점은, Safari에서 림미노닷컴의 모든 기능이 빠짐없이 작동한다는 것.
CSS3 뿐만아니라 Milkbox도 플래시 위로 잘 튀어나오고 (IE나 FF에선 플래시에 가린다)..ㅋ
여러분~ 림미노닷컴은 Safari에서 가장 잘 보여요 :) 점유율이 5% 밖에 안된다지만 뭐;;;


2) jQuery + Twitter
간간히 Google Buzz에 들러 넋두리 하곤 한다 (요즘과 me2day는 가끔;;).
요즘은 공개된 API가 없는 것 같고, me2day는 삭제가 안되고 해서, 트위터를 이용해보기로 했다.
Buzz의 RSS feed가 공개되어있기는 하지만, 트위터처럼 다양한 시도가 있어보이지는 않아서 일단 패스..

왜 그랬냐면, pathos라는 메뉴를 만들고 싶었기 때문에..ㅋ
인상깊은 말이나 넋두리, 알림 등을 지나가다 한마디씩 적어 놓으려고..
Run's House 보면 마지막에 항상 지인들에게 문자로 지혜의 말을 날리던데,
나도 누군가에게 영감을 주는 이야기를 남기고 싶다. 지금 당장은 힘들더라도 언젠가는..ㅋ
아무튼 이런 기능을 직접 코딩하긴 귀찮고 시간도 걸리고 해서, 구글링으로 얻은 트위터 연동 jQuery를 이용했다.

트위터는 Buzz처럼 수정은 안되지만 요즘처럼 삭제가 되고, 오픈 플랫폼으로써 퍼오기가 편하다.

림미노닷컴 pathos 메뉴에 가면 CSS3로 짠 레이아웃에 글들이 나열되는데,
현재 사용하는 jQuery에 한계가 있는 듯 하다. reply나 retweet 버튼 넣기도 어려워 보이고..
그래서 JSON으로 데이터를 가져와서 cache하고 뿌리는 방법을 찾긴 했는데, 잘 모르겠다.
누구 하는 방법 알면 가르쳐줘요~ㅠㅠ 일단 reply와 retweet 버튼만 넣을 수 있었음 좋겠어요..

jQuery를 이용해 로딩 화면도 만들었다. 무쟝 간단한 거였지만, 자바에 무지한 나로서는 쾌재를 부를 노릇 ㅋ;;;
트위터에 연결하는데 시간이 좀 걸리는 것 같아 그동안 로딩아이콘이 어색함을 달랜다.


여기까지가 요 몇일 졸면서 만든 림미노닷컴 업뎃들. 이 글도 CSS3에 많은 양을 할애했는데, 그만큼 재밌었다.
훨씬 많은 변화가 있어보이고, jQuery도 현재까지 나온 library만 해도 엄청나 보이지만, 시간관계상 미루기로..ㅋ

최근 웹초보의 Tech2.1에서 Microsoft가 패션브랜드를 런칭했다는 소식을 접했다. 주로 재치있는 디자인의 티셔츠를 파는데..


이거 어디서 많이 본 디자인이 하나 있다.. 바로 Microsoft Matric Tee!!!!

Microsoft Matrix Tee

림미노닷컴에 이따금 방문하는 사람이라면 누구나 어디서 많이 본 디자인이라고 의아해 할 모양새다.. 바로 림미노닷컴에서 직접 디자인하고 판매하는 "Infinite Possibility t-shirt"와 동일한 컨셉!!!!!

림미노닷컴 Infinite Possibility t-shirt
둘 다 검은 바탕 한가득 흰 숫자가 반복된다. 그리고 흘러가는 숫자 중간에 로고가 표시된다 (Microsoft, www.limminho.com).

다른 점이 있다면 Microsoft의 티셔츠는 이진수가 반복되고 있고, 림미노닷컴의 티셔츠는 3.141592... (pi) 가 반복된다는 것.

나름 Microsoft와 경쟁하려니 역시나 가격이 문제다.. Matrix Tee는 Urban Outfitters에서 $9.99에 판매하는데 반해, Infinite Possibility는 American Apparel에서 제작하고 Zazzle에서 무려 $33.95에 판매하고 있다. -_-;; (림미노닷컴 게시판을 통해 구매를 요청하면 10% 할인 혜택을 받을 수 있다!!!)

아무튼 숫자 크기를 제외하면 중간에 로고 박은 것 까지 무척 비슷한 디자인이라 놀랐다. 뭐, 일단 내가 먼저 찜했다규~ M$에서 내놓을 정도 디자인이면 나름 괜찮나봐라면서 혼자 위로하고 있다는;;; ㅋㅋ

티셔츠 주문하기