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

이번주는 특별한 큰 이슈없이 기사를 정리했습니다. 단, 모바일 통계 사이트 총정리 링크는 눈여겨 봐둘만 합니다.

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

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

• 모바일 통계 사이트 총정리 http://j.mp/iblx22 , 시장점유율/플랫폼별/캐리어별/모바일웹/광고/앱통계등 분야별로 50개 가량의 사이트를 깔끔하게 정리. 모바일관련 통계자료 필요하신 분들 꼭 저장해두세요.
• Mobile UI Patterns 각종 모바일 앱들의 스플래시/사용자피드/유저프로필/도움말/체크인/노티피케이션 등을 한눈에 비교할수 있는 사이트 http://j.mp/hdCpMY
• 모바일 플랫폼의 역사 http://j.mp/eX5EDp 주요 플랫폼 총 16개,이중 10개가 사용 중이며, 중단된 6개중 3개는 새 버전으로 대치된 것. “모던” OS들은 모두 2007년 이후에 출현하여 4년간 8개의 새 OS출현. 즉, 어찌보면 앞으로 시장은 어떻게 변할지 모른다는 것.
• 아마존 킨들의 신문/잡지 퍼블리싱 비용에 대한 진실 http://j.mp/eClvEC 3G 전송비용을 잡지사가 내므로 사진을 막 넣지 못하고, 킨들버전 출판물 가격은 아마존이 맘대로 설정한다고 합니다. 사용자로서는 3G 비용이 무료라서 좋았는데, 다시 이게 컨텐츠 보급 및 확산을 막고 있군요.
• Instapaper CEO의 Verizon아이폰 판매량 분석 http://j.mp/efcRU9 새 기기 출시후 앱판매량이 들썩이는데 이번엔 아님. 추정이유 “1.얼마안팔림 2.앱을 별로구입안함. 3.다들 AT&T에서 넘어옴” 3번이 정답일듯. 국내도 SKT 에서 아이폰을 출시하겠다는 발표가 났는데, 어떻게 시장이 변화될지 눈여겨 봐야 하겠습니다.
• Push The Page 데스크탑 웹브라우저에서 보던 웹페이지를 바로 아이폰/아이패드에서 볼수 있도록 해당주소를 푸시하는 무료앱 http://j.mp/eX1aFw 안드로이드의 크롬2폰과 비슷하지만 북마클릿 형태라 모든 브라우저에서 가능. 웹 개발자들에게도 매우 유용합니다.
• http://jdrop.org JSON 데이터만을 저장하는 특수목적 클라우드. 현재 무료이며, 주로 Mobile Perf 북마클릿을 이용해서 모바일 디바이스로부터의 퍼포먼스 데이터를 수집하는데 사용

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

• 구글 Analytics 로딩속도를 최적화 하는 두가지 방법 http://j.mp/eFAdZb 맨 아래 경고부분도 꼭 참고
• Delicious를 대체할 북마킹 사이트로 유명해진 Pinboard 서비스의 개발자&CEO 인 Maciej Ceglowski 인터뷰 “핀보드 아키텍처/구현에는 특별한 게 전혀 없고, 이게 하나의 피쳐다. 많이들 새로운 기술에 쉽게 현혹되지만 시간을 낭비할 뿐. MySQL과 같이 잘 알려진 툴을 써서 시간을 절약했다” http://j.mp/gbLNI4 개발 과정에 대한 설명도 주목할만 합니다. “Pinboard 에는 유닛테스트가 전혀 없다. 예전엔 나도 테스팅에 목숨걸었지만, 핀보드 개발시에는 실험적으로 다른 방법을 취했다. 테스트를 작성하기 보다 코딩 자체를 엄청 조심해서 하려고 노력했고, 코드 사이즈 자체를 작게 유지해서 계속 이해가 가능하도록 했다.”
• 아마존이 기존 프라임 고객 (1년/$79) 대상으로 무료 스트리밍 서비스 시작. Roku 디바이스가 지원 http://j.mp/hWrs2X 이제 약 5천편 정도로 작은 시작이긴 하지만 넷플릭스로선 궁극적으로 힘겨운 상대를 만난듯 이미 넷플릭스 주식은 하락중
• 회원가입 프로세스를 심플하게 만드는 17가지 방법 http://j.mp/eeC2Qp
• 페이스북이 백만개가 넘는 모든 이벤트페이지에 대해 hCalendar 마이크로포맷 적용 http://j.mp/gi5t5W 브라우저에 마이크로포맷 플러그인을 설치하면,해당 페이지 방문시 이벤트를 자신의 일정에 바로 추가가능

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

• Fixing These jQuery jQuery 와 자바스크립트 디버깅 방법을 알려주는 HTML5 버전 웹 슬라이드 (60페이지) http://j.mp/dZyY4F 웹개발자분들께 추천!
• WHATWG 의 HTML5 스펙 “웹 개발자 에디션” http://j.mp/ePLOQi 브라우저 업체들만 알아야하는 스펙들은 다 제거하고 개발자가 봐야할 스펙들만 깔끔정리.
• 자바스크립트 고수로 가기 위한 주요부분들만을 정리한 JavaScript Garden http://j.mp/i3T4e2
• Charles 웹 개발자를 위한 디버깅용 프록시 어플리케이션 http://j.mp/faZ5dh Man-in-the-middle 방식을 사용해서 HTTP/HTTPS 모든 트래픽을 텍스트로 확인가능. 윈/맥/리눅스 지원 1-4유저에 $50. 이 툴을 이용해서 아이패드용 앱인 The Daily 의 내부구조를 어떻게 파악했는지 알려주는 포스트 http://j.mp/hZEm3i 가 있습니다.
• {dust} 자바스크립트 템플릿엔진. 마크업 형태이고 비동기방식에 스트리밍까지 지원. Node.js에서도 사용가능 http://j.mp/flczdW 가장 현대적인 템플릿엔진. 지금까지 나온것중 가장 미니멀한 자바스크립트 템플릿엔진은 jQuery 개발자인 존 레식이 만든 것으로 20라인정도로 구현 http://j.mp/hXn47T 이름하여 Micro-Templating

[ 디자인/UI/UX ]

• Fonts In Use 폰트를 사용한 곳의 예제 이미지를 들어 설명하는 사이트. http://FontsInUse.com
• http://FFFFound.com 그래픽 디자이너를 위한 이미지 북마킹 SNS. 좋아하는 이미지 취향에 따른 추천 알고리즘 적용. 아쉽지만 초대로만 가입가능
• 여성 디자이너가 Django 를 배워서 첫번째 웹앱을 6주만에 런칭한 이야기 http://j.mp/fHWplp , 디자이너가 개발을 배우면 또 기회가 있는듯 합니다.

[ 해외 뉴스 및 블로그 ]

• 새 맥북프로에 적용된 썬더볼트 기술 자세히 알아보기 http://j.mp/fp7BZp
• 2011년 웹 & 모바일 개발자가 주목 해야 할 기술들 https://xguru.net/635

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

미래웹기술연구소 주최로 열렸던 WebApps FutureCon 2011 에서 발표한 자료입니다.
“2011년 웹&모바일 개발자가 주목해야할 기술들” 이라는 제목으로 발표 했구요. 자료를 공유요청하시는 분들이 계셔서 Slideshare 에 공유합니다. 행사 중간에 제 발표내용을 @w3labskr 계정에서 너무 잘 정리해주셔서 이 트윗들을 복사해서 정리합니다.

Slideshare 에서 보시려면 http://www.slideshare.net/guruguru/2011-web-technologies 에서 보시기 바랍니다

@w3labskr 트위터 계정에서 문자 생중계한 저의 발표내용입니다. 너무 잘해주셔서 누군지 궁금했는데.. 나중에 알고보니 @tobyyun 님이 대행해주셨다고 하더군요. 고맙습니다! 😉

• WebApps Futurecon 2011 마지막 세션 시작합니다. ‘모바일과 웹개발자가 2011년 주목해야 하는 기술들’ – xguru, KTH 권정혁팀장
• HTML5가 모바일에서 중요한 이유는 회사들이 각 모바일 플랫폼용 네이티브 앱을 모두 만들기는 어렵기 때문이다
• 어느 구글의 고위직은 ‘구글조차도 모든 플랫폼을 네이티브로 지원하기엔 예산이 모자르다’라고 언급
• 지난해 정부/지자체에서 만든 수 많은 앱들이 있었지만 개발된 앱들의 다운로드수는 극히 미미했다. 정부/지자체에서 개발하는 앱은 모든 국민이 사용할 수 있어야 한다. 하지만 그렇지 못했다.
• HTML5는 어떻게 공부하나요? 한글 HTML5 스펙 j.mp/html5ko

HTML5의 스펙은 웹브라우저 개발자를 위한 스펙이기 때문에 웹개발자들이 보기에는 분량도 많고 어렵다. 웹개발자들을 위해 정리된 스펙은 http://t.co/1JZUjxt 에서 볼 수 있다.

• HTML5의 튜토리얼 & 프리젠테이션은 구글에서 제공하는 html5rocks.com 에 잘 정리되어 있다.
• 제가 다니면서 HTML5를 이야기 하면 많이들 겁을 내신다. 하지만 자세히 알고보면 그렇게 어렵지 않고, 기존에 사용하던 방식과 크게 다른 것은 아니다.

국내에서는 IE의 점유율이 지나치게 높다. 상황이 이런데 이런 상황에서 HTML5를 사용하자는 이야기를 할 수 있을까? 다행히 IE가 HTML5를 지원할 수 있도록 도와주는 라이브러리가 있다.

• HTML5shiv는 새로 추가된 HTML element들을 사용할 수 있도록 도와주며 IE6까지 지원한다. Modernizr는 브라우저가 신기능들을 지원하는지 체크하여 조건분기 할 수 있도록 돕는다.
• HTML5 Initializer라는 서비스는 자신이 원하는 조건을 설정하면 그에 맞는 HTML5 템플릿을 제공해주어 개발자가 손쉽게 수정하여 사용할 수 있다.
• VideoJS,AudioJS는 HTML5의 Video/Audio 지원이 안되는 브라우저들은 플래시를 사용하여 Fallback을 지원할 수 있다. 이러한 라이브러리를 사용하면 HTML5를 사용하여도 큰 문제가 없다
• zepto.js zeptojs.com 은 모바일을 위한 자바스크립트 라이브러리이다. jQuery와 호환되는 문법을 사용하지만 jQuery보다 가벼운 용량이어서 용량에 대한 부담을 줄여준다.
• 모바일 UI를 위한 GUI 기반의 제작툴이 나오기 시작했다. 이제 코드작업을 하지 않고도 Drag & Drop으로 앱 UI를 만들 수 있게 될 것이다.
• 서버사이드 자바스크립트 node.js는 구글 크롬의 V8엔진을 사용하며, 대용량 서버에 적용할 수록 기존 서버에 비해 좋은 효율을 보여준다. 자바스크립트로 서버의 모든 기능들을 활용할 수 있도록 계속 개발되어지고 있다
• 브라우저가 아닌 서버/데스크탑 어플을 자바스크립트로 작성하기 위한 CommonJS 이란 스펙이 있다. node.js는 이를 따르고 있고 그 외에도 CommonJS를 통한 많은 시도들이 되어지고 있다.
• CoffeeScript 자바스크립트로 컴파일되는 간단한 언어. :나 {가 없는 영어와 같은 간단한 문법을 사용한다. 문법이 간결해지고 더 빠르게 실행될 수 있도록 컴파일 해주기 때문에 익숙해지면 굉장히 유용하다.
• Responsive Web Design. 다양한 사이즈의 해상도에 자동으로 대응하기 위한 웹페이지 제작 방법. 올해 상반기에 이에 관련한 책이 A list apart에서 나올 예정. 스매싱 북에서도 소개됨.
• 미디어쿼리를 사용하여 다양한 해상도를 지원하는 데모를 모아놓은 사이트 http://t.co/QW0hzhk 더 많은 태블릿이 나올 수록 디자이너는 더 많은 고민이 필요할 것이다. 유심히 보아둘 만함.
• 크롬 웹스토어. 구글에서 payment 부분을 개발해놓았기 때문에 웹앱 개발자들이 자신이 만든 앱을 쉽게 팔아 수익을 얻을 수 있는 환경이 생겼다는 점에서 큰 의미가 있다.
• GetJar. 멀티플랫폼 앱스토어. 모든 플랫폼의 앱을 동시에 취급/판매하고 있다. GetJar는 사용자의 단말 정보를 저장하여 사용자에게 필요한 앱만을 리스트에 보여주어 사용자가 신경쓰지 않고 편하게 사용할 수 있다

iPadification of the Web. 아이패드가 대응되는 형태의 웹이라는 신조어. 웹앱들이 아이패드화 되어가고 있다. 웹앱 개발자라면 아이패드앱들의 디자인을 학습하여 참고할 필요가 있다.

• Device API. 웹에서는 디바이스의 카메라, 캘린더, 주소록 등의 정보들에 접근/제어 할 수 없다. 이를 가능하게 해주는 API가 Device API이다. 올해 5월에 WAC이 탑재된 단말이 곧 나오게 될 예정.
• WAC은 애플을 제외한 회사들이 모여서 애플에 대응하기위해 만든 스펙. 따라서 애플은 WAC을 지원할 계획이 없다.
• Native App. 뛰어난 성능. 게임을 만들기에 적합하다. 웹앱으로 게임을 만드는 시도도 많이 있지만 사실 웹앱의 지향점이 게임은 아니다. 소잡는 칼과 닭잡는 칼이 따로 있듯이 웹앱의 용도도 고민이 필요할 것 같다
• 네이티브 앱은 개발이 어렵고 비싸다. 예전에 비해서는 낮아졌다고 하나 여전히 네이티브앱 개발자는 몸값이 높고… 자바를 개발했던 개발자가 안드로이드를 개발한다고 하더라도 플랫폼이 달라서 새로 학습할 부분이 많다
• Hybrid App. 네이티브 앱과 웹앱의 기술을 합친 형태. 외형은 네이티브로 하고 내용은 웹앱으로 만든다. 멀티플랫폼이 가능한 장점이 있으나 네이티브대비 웹부분의 속도가 문제가 되기도 한다.
• Hybrid App의 범위. 서버에 접속해서 웹앱을 실행하는 방식부터 Native App내에서 약간의 Webview를 사용하는 방식까지. 해당되는 범위가 넓다. 업데이트가 잦은 부분은 웹으로 구현하면 관리에 용이하다
• Hybrid App 개발방법. 작업은 웹앱으로 모두 마친뒤에 Appspresso, PhoneGap과 같은 프레임웍으로 감싸준다. 프레임웍에서 Device 기능을 컨트롤 할 수 있는 기능을 제공하여 이용할 수 있다
• Appspresso. KTH 제작중인 하이브리드 앱 프레임웍. 폰갭을 활용하여 안드로이드 앱을 만들 때의 이슈가 많은데 그런 점도 보완할 예정. WAC의 API와 호환되는 방식으로 개발중이므로 WAC과의 호환도 기대됨
• Appspresso의 슬로건은 ‘Write once, Sell everywhere’네요. 재미있고 매력적인 슬로건인 것 같습니다 ^^ #wafc2011

• 오늘 등록된 안드로이드의 ‘푸딩 얼굴인식’앱은 웹앱으로 만들어졌다. 카메라 촬영하는 API만 안드로이드의 것을 호출하여 사용하고 있다. 보시는 것 처럼 자연스럽게 동작하고 있다.
• HTML5 관련 기술 사용 증가. 많은 디바이스의 등장으로 웹앱의 필요성 증가. 자바스크립트의 부각. 반응형 웹디자인. 웹앱스토어. 디바이스 API. 하이브리드 앱. 이런 것들이 2011년의 핫이슈가 될 것으로 본다.

발표중 푸딩얼굴인식 안드로이드 버전이 괜찮으셨는지, 많은 분들이 Appspresso 공개를 물어보셨는데요.
저희 KTH의 하이브리드 모바일 웹앱 개발툴 Appspresso는 3/14일날 공개됩니다! 누구나 무료로 사용하실수 있습니다 😉