구루의 기술뉴스 : 북마클릿 ( Bookmarklet )

구루의 기술뉴스 ( GuruNews ) 11회차입니다. 이 기술뉴스의 설명은 구루의 기술뉴스 : 2011년 첫번째 뉴스레터 를 참고하세요. 매주 초에 발행됩니다.

이번주는 나온지는 좀 오래되었지만 최근에 더 잘 활용되고 있는 북마클릿 ( Bookmarklet ) 을 메인아이템으로 선정했습니다.

2011년 03월 21일, KTH 아키텍트 그룹이 발행하는 기술 신동향 & 뉴스 링크입니다.

[ 웹사이트, 웹서비스, 웹기술 ]

  • 북마클릿이란 무엇이고, 어떻게 만들어야 하는가 http://j.mp/gl0Fuw 링크연결이 필요한 웹서비스를 만드신다면 꼭 알아둬야 할 기술.
    • 북마클릿 ( Bookmarklet ) – 북마크(Bookmark)와 애플릿(Applet)의 합성어. 웹브라우저의 북마크를 활용한 작은 어플리케이션
    • Pinboard , Instapaper, Delicious 같은 URL을 저장해야 하는 사이트들이 북마클릿을 잘 활용
    • http://www.pushthepage.com/ 같은 앱은 데스크탑 웹브라우저의 URL을 아이폰/아이패드로 보내는데도 북마클릿을 사용
    • http://kathack.com/ 같은 사이트는 예전 플레이스테이션 게임인 Katamari ( 괴혼 : 굴려라 왕자님 ) 을 웹 브라우저에서 동작하도록 만들었는데, 이것 역시 북마클릿을 활용했습니다. 꼭 한번 실행해 보세요. 어떤 사이트든 다 굴릴 수 있게 해줍니다.
    • 모바일 사파리에서 AirPlay 지원하게 HTML5 video 태그 변경하기 http://j.mp/fAj3Su 자바스크립트 북마클릿으로 AirPlay 지원안하는 사이트도 강제로 하게해줍니다
    • 아이패드 사파리에서 현재 웹사이트의 소스를 쉽게 보기 위한 북마클릿 http://j.mp/gD3ayi
    • Mobile Perf 북마클릿-모바일 웹 개발자를 위한 북마클릿. 등록하면 모든 모바일 페이지에서 Firebug Lite/페이지 리소스보기/DOM몬스터/CSSess 등을 실행가능! http://j.mp/mperfb
    • 모든 웹페이지를 슈팅게임으로! http://j.mp/aK27ro 화살표키로 조종하고 스페이스키로 발사. 북마클릿으로 작성되어 어떤 사이트에라도 적용가능.
    • 복잡한 웹페이지를 깔끔하게 출력할때 The Printliminator – 정말 최고! 소개동영상 필감. 북마클릿으로 저장되어 아무 사이트에서나 사용가능 http://j.mp/dhqGra
  • 트위터 5주년 기념으로 새로운 숫자들 공개 http://j.mp/gFicAv 첫 10억번째 트윗이 등록되는데 3년2개월이 걸렸지만, 이젠 1주당 10억트윗,하루에 1억4천만 트윗, 매달 50만명씩 증가중.. 엄청난 성장세로군요. 트위터 서버가 매번 몸살을 앓는게 이해가 되기도 하고, 이젠 정말 대용량/실시간에 대한 고려없이는 사이트를 만드는게 어렵겠구나 하는 생각이 듭니다.
  • Dropbox 에서 얻은 6가지 교훈 http://j.mp/hLG7tL Python 99.9% ! 안드로이드를 제외하고 모든 소스가 파이썬. 상당히 특이하네요. 윈/맥/리눅스 앱을 다 파이썬 싱글코드 베이스로 만들었다고 합니다.
  • P2P Web App 에 대한 제안 http://j.mp/gUwuoI ServerSide JavaScript 를 다시 브라우저 단까지 내려서 P2P 형태의 웹앱을 구성하면 안정성/확장성/속도 에 강점이 있다는 재미난 주장. 한글 번역본을 @gc8134 님이 제공해 주셨습니다. http://j.mp/fAppAf
  • 구글 API 에 대해 OAuth 2.0 적용 개시 http://j.mp/eAw1Sb 2.0스펙이 아직 드래프트 상태인데 구글이 빠른 발걸음을 보이는군요
  • OAuth,OpenID,Facebook Connect 등 다양한 인증방식에 대한 Design Best Practices 발표자료 http://j.mp/eN4D1x
  • 구글 Docs 에 Discussion 기능 추가 http://j.mp/gtUoVX 마치 예전 Wave를 보는듯 하지만, 더 깔끔하군요. 이제 웬만한 문서 협업은 구글Docs 로 끝낼수 있을 듯.

[ 모바일 – 아이폰/안드로이드 ]

  • iOS 4.3에 추가된 Nitro엔진이 사파리에만 동작하고 UIWebView에는 적용이 안되어 앱스프레소/폰갭같은 하이브리드앱에서는 못쓰는 상태라는군요. 애플 이러기야! http://j.mp/glagon , 이에 관련해서 DaringFireball 의 존 그루버는 아마도 보안문제 때문일 것이라는 의견을 정리했습니다. http://j.mp/hd8LEJ
  • http://pttrns.com iOS UI 들을 종류별로 모아놓은 UI 패턴 모음 사이트. 유명한 앱들이 많아서 참고하기 좋네요. 강력추천!
  • 아이패드2 판매량을 올해 3600만 대로 봤을때, 60%의 구매자가 Smart Cover를 산다고 가정하면, $1B 매출을 예상 http://j.mp/gMpnOZ 약 1조원짜리 악세사리군요. 장사는 이렇게하는거구나..
  • 안드로이드 3.0의 하드웨어 가속 기능 활용하기 가이드 http://j.mp/fDGs9t
  • 아이폰에 NFC가 도입된다면 다른 컴퓨터에 이를 이용하여 로그인하여 사용하고 파일은 아이폰에 저장되는 리모트 컴퓨팅이 도입될수도 있다는 기사 http://j.mp/f9J89e

[ HTML5/CSS/Javascript/프로그래밍 ]

  • 웹 개발의 ABC http://j.mp/epQhI3 웹 개발 관련 용어들을 A-Z 까지 26개 첫글자로 뽑아서 각 단어설명 및 관련 링크를 제공. 재미난 정리로군요. 모르는 단어가 없는지 검사들 해두세요
  • HTML5 히스토리 API 해킹하기 http://j.mp/ia5TOt 이건 마치 2011년형 Blink + Marquee 태그의 귀환! ( 중간에 Try Out을 누르고 브라우저 URL부분을 보세요 )
  • HTML5 Audio 의 현재상태 http://j.mp/gxxsQ2 , 아직 그다지 좋은 상태는 아니로군요. 브라우저 업체들이 Audio 쪽 지원은 많이 미진한듯.
  • d3.js – 데이터를 DOM에 편하게 붙일수 있도록 지원하여 문서 제작을 도와주는 자바스크립트 라이브러리 ( Data-Driven Documents ) http://j.mp/i7ZNTm
  • HelloRacer – three.js 를 이용해 만든 멋진 HTML5 WebGL 데모. 크롬 사용하시는 분들 한번 들어가보세요 http://j.mp/hBtZAC 화살표키로 조작,스페이스는 브레이크,엔터는 카메라 변경
  • CSSWarp – CSS3 를 이용해서 글자를 경로(Path)상에 배치해주는 툴. UI로 조작 후 Generate 하면 HTML 코드로 만들어줍니다. 물론 한글도 잘됩니다. http://j.mp/eS5r2T
  • Firefox4 데모에 새로 추가된 Runfield 게임 http://j.mp/gW6Pad , HTML5 캔버스를 이용한 게임이군요.
  • Sencha의 아이패드2 HTML5 테스트 http://j.mp/eg3YKt “아이패드2의 사파리는 모바일상에서는 최고의 웹킷 구현체이다. HTML5 앱 개발자에게 강력추천” 예상대로군요. 구글은 요즘 뭐하는지 모르겠네요. 쩝..
  • Responsive Web Design 의 구성 요소들 이해하기 http://j.mp/dZqhwO 마지막 2문단이 중요. “아직 완전하진 않지만, 분명히 맞는 방향이다”
  • CSS 프레임웍들의 장점과 단점 정리 http://j.mp/fMbBBR 국내에선 적용사례를 많이 못 본것 같은데, CSS 프레임웍들도 점점 세를 넓혀가는듯
  • 모바일에서의 입력 Form 디자인 전략 http://j.mp/hLYXG4
  • avascript 로 Pull to Refresh 구현하기 http://j.mp/hLxGdS 트위터 앱의 그 끌어당겨서 리프레시 하는 기능을 웹에서 구현. 아이폰/안드로이드 지원

[ DB,클라우드,웹서버 기술 ]

  • Big Data Cookbook http://j.mp/ifOOZH 요즘 인터넷상에서 얘기되는 초~대용량 데이터 관련내용들을 이해하려면 알아두어야 하는 기술용어들
  • 페이스북의 실시간 분석 시스템에 관한 50분짜리 강연 동영상 http://j.mp/fRlHNu , 최근 페이스북은 발전된 실시간 분석시스템을 오픈했습니다. 이 시스템의 구조에 대한 강연입니다.

[ 해외 뉴스 및 블로그 ]

  • 사람들은 잘 동작하는 것에 값을 치르는걸 좋아한다. 무료인것들이 있더라도,시장에 무료가 넘치더라도,사람들은 자신이 좋아하는 것은 구매할것이다 – Jason Fried “어떻게 하면 돈을 잘 벌수 있는가” 란 글에서 http://j.mp/gYLkcn
  • 웹과 TV의 충돌 – 스트리밍 업체 넷플릭스가 TV시리즈 비딩에 참가해서 케이블업체인 HBO와 경쟁하고,2시즌을 통으로 구매하겠다는 얘기까지 http://j.mp/foX3Ax 아마 아이튠즈도 조만간 이러지 않을까..
  • 일본 대지진 때 도쿄 애플스토어가 한일 – Digg 창립자인 Kevin Rose 가 일본 애플에서 일하는 지인에게 받은 이메일 번역본 http://j.mp/gLxuqe
  • 아이패드2와 함께한 일주일 – 한국어 리뷰.. http://j.mp/eaLcWp
  • 벤자민 프랭클린의 하루 스케줄표 http://j.mp/hWNovE

이상입니다. 피드백 환영합니다!
제 블로그를 RSS리더에서 구독하시거나 , 제 블로그를 이메일로 구독하실수 있습니다.

구루의 기술뉴스 : 북마클릿 ( Bookmarklet )”에 대한 5개의 생각

  1. 미니

    Printliminator를 찾다가 여기까지 왔네요.
    Bookmarklet에 대한 설명이 잘 되어 있네요. 참고할께요.
    감사합니다.~

    응답
  2. 핑백: 사용자 친화적인 글읽기 환경을 위하여 : Clearly | 스파이트닷컴

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다