블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT 2011.02.15 01:22

jQuery Mobile 세미나(?) 갔다와서...

  지난주 수요일(2011.2.9)에 긴자 애플스토어 3F 에서 jQuery Mobile 관련 세미나가 있었습니다.

  결론부터 말하자면 괜히 갔다 입니다만...

  이것은 jQuery Mobile 에 대한 불만이 아니라 주최측에 대한 불만이 컸었습니다.  몇십명 앉을까 말까 하는 자리에 150명이나 참가신청받게해놓고... 많은 사람들이 뒤에서 앞사람 어깨너머의 공간을 이리저리 오가면서 슬라이드를 보고 들었어야 했으니까요. (뭐 그렇다고 150명 다 온 건 아닌 듯 보였지만...)

  우선 내용은 jQuery Mobile 에 대한 소개정도입니다. 이런 저런 속성을 집어넣으면 이렇게 저렇게 움직인다 정도가 전부였고, 이정도는 보통 그냥 jQuery Mobile 문서를 읽어보고 한번 건드려보면 다 나올 그런 내용이었죠. 이런 레벨의 세미나(?)인지 모르겠지만 하루 4-6시간 되는 HTML5 강의를 강의료 3만엔으로 한다는 전단지까지 들이밀다니...

  내용자체도 물론 개발자를 위해서가 아니라, 웹 기획자나 디자이너들을 대상으로 하겠다라는 냄새가 폴폴 풍겨나왔었으니... 애시당초 저에게 맞지 않았는지도...

  아무튼 회사 패키지 겸 고객 점포용 상품 카달로그를 iPad 용으로 최적화해서 만들어보자는 그런 것때문에 요즘 이래저래 생각중입니다. 처음에는 Carousel 효과 하나만 믿고 Sencha touch 를 쓸까 생각도 해봤었는데... 최근에는 다시 jQuery Mobile 로 방향을 바꾸고 틀을 잡고 있습니다.

  암튼 빨리 간단하게 결과를 내놓기 위해 움직여야 되겠습니다. ;ㅁ; 
신고
IT/Perl 2010.05.21 13:24

[ Perl/Catalyst ] 새로 태어난(?) 아얄씨 로그뷰어


   이것저것 갖다붙여서 새롭게 만들어버렸습니다.
  우선 변경사항 정리 

1. 소속감 고취를 위한 프로필 이미지 표시

#perl-kr 소속감 고취를 위한 프로필 이미지 박아넣기 90% 완료. // 한명만 트위터 아이디 몰라서 실패 =3==3 '필마나'Thu May 20 14:05:53 via Echofon

  위의 캡쳐화면을 보시면 알 수 있듯이 지난 일주일간의 로그를 뒤져서 각 유저별 메타정보(지금은 이미지 밖에) 뽑아냈고.. 이걸 Template 에서 매치시켜서 표시하고 있습니다. 이걸로 소속감 90% 향상 =3==3

2. Pusher 를 이용한 WebSockets 적용 

 HTML5 설레발을 추가했습니다. 구성은 아주 심플합니다.
 단지 Pusher 의 API 를 사용해서 그곳으로 리퀘스트를 날려주면 Pusher 에서 브라우저랑 통신하는 것 뿐입니다. 
 이걸 IRC 의 대화내용을 거의 리얼타임(이런저런 latency를 생각하면 1초 정도 늦지만)으로 웹 브라우저에서 모 채널의 대화내용을 그대로 볼 수 있다는 것입니다.

3. 시간대별 대화목록 전환 등등등 
 예전에 만든 IRC 로그 뷰어에서는 있었는데... 지난번에 서버 옮기면서 지워버리고 새로 만들면 되지 뭐... 하면서 그냥 방치했었는데.. 이번에 버튼 이미지를 추가해서 맹글었습니다. 그냥 뭐 jQuery 로 시간대별 클래스 추가하고 그걸 이래저래 전환해주는 것 뿐.. =3=3
 버튼 이미지는 그냥 이걸로 만들어 봤습니다. (순수 CSS)


4. 이런저런 js 라이브러리 사용 
 - jQuery
 - Pusher
 - pretty.js

  뭐 대부분 jQuery 로 그냥 샥샥 하면 되는 수준이라서.. 특별한 의미는 없습니다. 리얼타임으로 푸쉬되는 대화내용들의 표시에.. 이게 몇분전 대화내용인가 하는 표시형식을 취하기 위해서 pretty.js 를 사용했습니다. 
  그리고 대화내용중의 url 이나 이메일에 대해서는 자동으로 링크를 설정하거나...
  그리고 @Anywhere 를 붙이거나, CPAN 모듈이름만으로 자동으로 링크를 설정해주거나... 하는 걸 생각하고 있습니다.


// 이상... 사실 뭐 없는 비공개 서비스의 변경내용입니다. :-D 
 Pusher 에 대해서는 다음기회에 한번 다뤄보도록 하겠습니다.
신고
IT 2010.04.04 23:28

[ Perl/jQuery/Barcode] 바코드 키드를 꿈꾸며...

 최근에 회사업무차원에서 바코드를 특정 페이지에 표시해야하는 일이 생겼었습니다.
 PHP + Barcode 같은 적당한 검색어를 뒤집어 본 결과 GD 로 된 Barcode 출력기능은 있는데... 뭔 PHP 를 다시 컴파일 한다느니 하는 얘기가 적혀있길래 그냥 관두고, 외부의 바코드 출력 서비스를 알아보니 이건 또 HTTPS 가 아니라서 좀 그렇기도 하고 해서...
  그외 바코드 폰트라는 게 있다는 데 역시나 귀찮은 마음에 패스를 했습니다.

  가장 도입이 간편한 방향으로 돌아가고싶어서 자바스크립트로 살짝 디벼봤습니다. 혹시나 하는 마음은 역시나...
  jQuery-Barcode 라는 라이브러리가 있었습니다. div 하나에 id 붙여서 barcode 설정해주면 게임 끝 ;ㅁ;

  http://barcode-coder.com/en/barcode-jquery-plugin-201.html

  지원하는 바코드 타입은 여러가지 있지만 제가 사용하려는 건 EAN13 이었고, 마침 이것도 지원해주니 프로토타입을 간단하게 써서 보내주니 바코드 리더로 잘 읽힌다고 하더군요 :-) 아.. 일 하나 끝~ 이렇게 생각하다가..

  예전에 Delicious Library 2 관련해서 바코드 리더 관련해서 이것저것 고심한 적이 있어서도 있고, 아이폰 유저도 50만명이 넘었다니... 수요가 있을 까 싶어서 생각해본 게..

  특정 상품페이지의 상품코드(대개 바코드에서 사용되는 코드)를 웹상에서 바코드로 표시해주면 어떨까 싶어서 냉큼 해봤습니다.


  알라딘의 서적 페이지에서 북마클릿을 누르면, 13 자리 ISBN 을 빼내서 그걸 표시해주는 게 전부입니다.
  예전의 Filstapaper 때처럼, 정형화된 상품코드를 뽑아낼 수 있다면야 어떤 웹사이트에서든 표시해줄 수 있지 않을까 하고 생각을 해봤습니다.
 

  시험삼아서 Red Laser 를 통해서 찍어보니까 잘 읽히덥니다.
 
  사실 웹이 사용가능한 공간에서 다시 아이폰을 이용해서 찍어서 뭘할까 하는 생각도 해보기도 합니다만 뭐...
  잘 모르겠습니다. 제가 모르는 어딘가에 쓰일 수도 있겠지요. =3==3

신고
IT/Perl 2009.02.03 20:18

[ JavaScript ] jGrowl Notification 을 IRC 로그 뷰어에 갖다 붙여봤습니다.

  요근래 remedie 의 UI 부분 업데이트에서 도입된 jGrowl 을 IRC 로그 뷰어에 갖다붙여보자는 생각을 예전부터 쭈욱 해왔습니다. jGrowl 이란, Mac 의 Growl 이라는 Notifier 비슷하게 JavaScript 로 브라우져 내의 이벤트를 생성할 수 있게 한 것입니다. Growl 은 Mac App 에서 발생하는 각종 동작 정보를 알 수 있습니다. IRC 에서 누가 불렀을 때나, 새로운 RSS Feed 가 있을 때나, Mail 이 왔을 때 등등...

Growl 아이콘


Mac 에서의 Growl Notification 동작


  이 jGrowl 같은 것이 한국에서 쓰인 가장 일반적인 예제로는 미투데이가 있겠네요.

미투데이에서 사용하고 있는 Growl 틱한 Notifier

    jGrowl 은 jQuery 플러그인으로도 만들어져 있기도 하지만, 그외 무툴즈 버젼 이외에 여러 버젼이 존재하고 있습니다. 전 자바스크립트에 그렇게 능숙하지 못해서 그냥 웹사이트 뒤지고 song 님에게 도움받으면서 작업하게 되었습니다.

  - jGrowl : http://www.stanlemon.net/projects/jgrowl.html

IRC 상에서 코멘트 입력


웹상의 IRC 로그뷰어에서 jGrowl 동작


  위처럼 IRC 에서의 대화는 웹상에서 일정시간(여기서는 20초설정)에 갱신되며, 이 갱신된 내용은 브라우저 안에서의 jGrowl 이벤트로 알려주게 됩니다.
  jGrowl 과 jQuery 의 높은 완성도에는 정말 탄성이 나올 정도입니다.
  기존에 만들어 둔 로그뷰어에 그대로 jGrowl 만 덧붙이는 간단한 작업이었습니다. jQuery 도 처음으로 써볼 겸 해서 간단하게 코드를 넣었습니다. $.getJSON 한방에 XHR 이 끝나는 게 너무 감동이네요. ㅜ_ㅜ (뭐 여타 JS 프레임웍이 그렇겠지만;;)
   Interval 을 20초 정도로 주고 웹사이트에서 매번 로그 뷰어 서버와 주고받고 합니다. 이러다보니 여러 유저가 붙었을 경우에는 빈번하게 리퀘스트가 오갈텐데... 이 부분에 대해서는 특별한 고민은 일단 하지 않았습니다. 뭐 어차피 쓰는 사람도 적을 테니... 라는 생각으로 있는데요. 이 같은 경우에서 뭔가 브로드캐스트 방식으로 통신할 수 없을까 하는 고민등등.. 여러가지 떠오르는 군요.
  서버쪽의 부하를 덜어줄 수 있는 여러가지 아이디어를 가지고 계신 분들께 지도편달 부탁드리겠습니다.
신고
TOTAL 473,204 TODAY 21

티스토리 툴바