Rev. 2.73

Tinycon은 현재 웹사이트에서 사용 중인 파비콘에 작은 번호를 동적으로 표시되도록 조작하여 사용자에게 새 소식을 알리는 작은 라이브러리입니다. HTML5 캔버스 요소를 지원하는 브라우저에서만 작동합니다.

tinycon.png

구글 지메일, 리더 등과 같은 서비스에서는 새 소식을 알리는 카운트를 동적으로 타이틀 텍스트에 출력하여 사용자에게 확인이 필요함을 시각적으로 알리고 있습니다만 구글의 "탭 고정"이나 파이어폭스에서 "앱 탭" 기능을 사용하면 페이지의 타이틀이 숨고 파비콘만 남게 되어 무용지물입니다. 이러한 경우라면 웹사이트에서 발생한 이벤트를 전달할 때 아주 효과적으로 사용할 수 있는 기막힌 아이디어입니다.

기본적인 사용방법은 다음과 같습니다.

Tinycon.setBubble(6);

다음과 같은 옵션을 이용하여 사용자화 할 수 있습니다.

Tinycon.setOptions({
    width: 7, // the width of the alert bubble
    height: 9, // the height of the alert bubble
    font: '10px arial', // a css string to use for the fontface (recommended to leave this)
    colour: '#ffffff', // the foreground font colour
    background: '#549A2F', // the alert bubble background colour
    fallback: true // should we fallback to a number in brackets for browsers that don't support canvas/dynamic favicons
});

1초마다 1씩 카운트가 증가하도록 이곳에 적용했습니다. 보이나요?
이 사이트를 사용 중인 접속자(활성 사용자) 카운트로 변경했습니다.

Comments

클로즈 베타를 앞두고 있는 코드명 벨록스 프로젝트에 킬러 피쳐를 추가하는 과제를 두고 고민하다가 개발자 답게 드랍박스와 연동하여 기존 사용자들을 흡수하는 방향으로 진행하기로 했습니다. 테스터들에게는 빠른 속도와 용량 제한 없는 공간을 무료로 제공할 수 있게 되고, uCloudDaum클라우드, NDrive 등의 유사 서비스도 오픈 API가 있는 지는 모르겠습니다만 있는 족족 흡수할 생각에서 였습니다. Node.JS와 드랍박스를 연동하는 구현 사례나 관련 문서가 전무하여 며칠동안 삽질하면서 만들어야 했는데, 그 구현 과정을 예방 차원에서 기록합니다.

# npm search dropbox

NAME              DESCRIPTION
arca              little tool to download files from a public dropbox folder
dbox              NodeJS SDK for the Dropbox API
dropbox           A node.js client module for the official Dropbox API
dropbox-sdk       An alternative Dropbox SDK for nodejs
everyauth         Auth solution (password, facebook, & more) for your node.js Conn
passport-dropbox  Dropbox authentication strategy for Passport.
symbox            Simplifies symlinking folders in Dropbox

Node.JS에서 사용할 수 있는 드랍박스 클라이언트가 있나 찾아봤더니 여러개가 있더군요. 이 중에도 dropbox-node 모듈이 간결하면서도 인지도가 있어 보여 이것을 선택했습니다만, 초장부터 화근이었습니다. 드랍박스의 API는 크게 두가지로 나눌 수 있는데 모바일 디바이스를 위한 SDK와 그리고 웹앱을 위한 OAuth v1의 인증 명세를 따르는 SDK입니다. 이 둘 모두 OAuth 방식 인증을 사용합니다만, 차이점은 사용자 인증할 때 모바일용 SDK에서는 드랍박스 사용자 아이디와 암호를 직접 요구하며 웹용 SDK에서는 OAuth기반의 웹 인증(트위터와 같은)을 수행한다는 것입니다. 또한 개발하려는 애플리케이션의 용도에 따라 드랍박스 전체 파일에 접근하게 할 것인지 기존 파일에 접근하지 않고 클라우드로 사용할 것인지에 따라서도 사용법이 달라집니다.(검증필요)

벨록스는 당연히 드랍박스에 존제하는 파일에 흥미가 있고 웹용이기 때문에 웹용 SDK를 선택해야 했지만 dropbox-node 모듈은 사용자의 아이디와 암호를 요구하는 인증방식이었습니다.(헐~) 그래서 웹인증 부분을 해결하려고 passport-dropbox모듈을 설치했는데 이녀석 때문에 본격적인 삽질이 시작될 줄은 꿈에도 몰랐던 거죠...

주말에 마음을 비우고 출근해서 드랍박스의 개발자 문서를 차근차근 살피다 보니 Node.JS용 공식 서드파티 SDK는 dbox였더군요! 개삽질한 코드들은 모두 지우고 metadata를 긁어와서 폴더 단위로 파일을 정렬하는 것 까지 단숨에 해결했습니다. 개발인란게 참 허무하네요.

Comments