미래웹기술연구소 주최로 열렸던 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일날 공개됩니다! 누구나 무료로 사용하실수 있습니다 😉