글쓴이 보관물: xguru

구루의 기술뉴스 : 북마클릿 ( 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리더에서 구독하시거나 , 제 블로그를 이메일로 구독하실수 있습니다.

구루의 기술뉴스 : 앱스프레소(Appspresso) 출시!

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

이번주는 저희 KTH 에서 출시한 하이브리드 웹 앱 개발툴 앱스프레소( Apppresso ) 를 메인뉴스로 선정했습니다 잘 부탁드립니다! ^^;

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

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

  • 하이브리드 웹 앱 개발툴 앱스프레소 ( Appspresso ) 공개 http://appspresso.com HTML5 및 웹 기술을 이용하여 아이폰/안드로이드 앱들을 동시에 만드는 툴. 저희 KTH에서 외부 모바일 개발자들을 대상으로 출시하는 첫 제품입니다.
    • HTML5 및 Sencha,jQueryMobile 등의 웹기술을 이용하여 아이폰/안드로이드 앱을 개발하는 툴입니다.
    • Eclipse IDE 에서 개발하고 Build시 iOS/Android 로 선택하여 바로 빌드가 가능합니다.
    • 카메라,파일시스템 등의 Device API 사용을 위해서 WAC 의 Waikiki API 스펙을 아이폰/안드로이드에서 구현하고 있습니다.
    • 얼마전 출시된 푸딩얼굴인식 for Android 가 앱스프레소를 이용하여 개발되었습니다.
  • 애플 앱스토어 리뷰조작 의심도 검사기 http://appreview.zz.gg , 같은 사람이 여러 번 올린 리뷰들을 자동으로 검색하여, 작성날짜, 작성자, 작성수, 별점등을 이용하여 분석합니다. 재미난 시도로군요 ㅎㅎ 다행히 저희 회사 앱들은 모두 “청렴함” http://j.mp/g0CmJG
  • Rovio는 어떻게 Angry Birds를 성공시켰나? 그리고 다음은 무엇인가 ? – Wired 기사 http://j.mp/hphZ1A 다음은 페이스북 그리고 콘솔로 진출하는군요. iOS시장 공략에 대해 매우 상세한 설명
  • 아무도 아이패드의 가격을 못 따라가고 있다. http://j.mp/fTdHGU “경쟁사가 현실적인 가격제시를 못한다면 아이패드가 계속 시장을 점유할 것입니다. 당장 아이패드가 태블릿의 기준을 너무 높여 놓았어요”

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

  • Google API Explorer – 구글 API들을 인터랙티브하게 테스트해볼수 있는 웹툴이 공개되었습니다. 아직은 7개 API만 사용가능 http://j.mp/eNe1uQ
  • “트위터는 1막이었다” http://j.mp/fO0Sl3 트위터를 만들고 이젠 Square를 미래의 결제 네트웍으로 만들고 싶어하는 Jack Dorsey의 꿈에 대한 인터뷰
  • 애플의 전략 세금. The Apple Strategy Tax 한글번역본 http://j.mp/fKi9NW 플랫폼을 만드는 입장과 비즈니스를 만드는 입장간의 관계를 다룬 흥미로운 글
  • http://memolane.com 자신의 모든 소셜네트웍 행적을 묶어서 멋진 타임라인으로 보여주는 사이트. 페북/트위터/플리커/피카사/Last.fm/포스퀘어/인스타그램/Tripit/유튜브.. 다양한 사이트 지원
  • http://loads.in 전세계 50여개의 지역에서 자신의 웹사이트가 어떤 속도로 로딩되는지를 체크해 주는 웹사이트. 전세계 대상 웹사이트를 만드신다면 필수 체크

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

  • HTML5 사이트를 모바일 친화적으로 만들기 http://j.mp/eoTmc2 구글에서 깔끔하게 튜토리얼을 정리했네요. @gc8134 님이 한글번역본을 만들어주셨습니다. http://j.mp/g89vBv
  • Ultimate HTML5 Cheatsheet http://j.mp/flPRBx , HTML5 관련해서 작업하실 때 한 부 뽑아두고 참조하세요
  • Web O’ Wonder – 모질라가 직접 만든 HTML5 데모사이트. 우리가 만들면 이 정도는 한다! 수준을 보여주는듯 http://j.mp/f0mFH2
  • “The Node Ahead : 자바스크립트가 브라우저에서 미래로 점프한다” http://j.mp/gXxqHd 영국 The Register 의 Node.js 기술 개요와 미래를 광범위하게 조망하는 정말 훌륭한 글. 이 글과 함께 볼만한 “왜 다들 Node 에 대해 얘기하는가 ?” http://j.mp/gXFhF3
  • 크롬 웹 스토어에 웹 앱 성공사례 5개 등록 http://j.mp/h5B9kx , 이제 웹 앱 개발자들도 앱스토어의 스타개발자들처럼 유명해 질 수 있을지.. ^^
  • 멋진 HTML5 사이트를 만드셨다면 모질라 Demo Studio 에 등록해 보세요 http://j.mp/hWRaCp 2000년대 초반 멋진 플래시 사이트 상위를 차지했던 한국 웹 개발자들의 저력을 믿습니다

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

  • StackOverflow의 내부 아키텍처를 잘 설명한 글 2개 http://j.mp/g73ttc , http://j.mp/dP1fOz 두 글의 간격이 약 2년인데, 그 동안 월 1600만 PV에서 9500만 PV로 성장. C# 과 ASP.NET , Razor , SQL Server , IIS 등 많은 곳에 마이크로소프트의 엔진을 이용했지만, HAProxy , Redis , Bacula , Nagios 같은 리눅스 기반의 기술들도 많이 이용되고 있네요.
  • Summify 의 내부기술 설명 http://j.mp/hpnaGE 얼마전 Quora의 기반기술을 상세히 블로깅했던 Phil Whelan의 멋진 두번째 포스팅

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