IT/Mobile Platforms | Posted by 철규님(최규철) 2011.05.29 23:58

[Google I/O 2011] Keynote Day 1

Android: Momentum, Mobile and More
Google I/O 2011 Keynote Day 1
Written by Gyucheol Choi on 22 MAY 2011

[Google I/O 2011 Keynote Day 1 ] Android: Momentum, Mobile and More at Google I/O
May 10, 09:00AM ~ 10:00AM
Moscone Center, San Francisco
Vic Gundotra, Hugo Barra
이틀간 진행되는 Google I/O는 매일 아침 첫번째 세션을 Keynote로 시작합니다. Keynote는 우리말로 하면 '기조 연설' 정도로 보시면 됩니다. Day 1의 Keynote는 'Android: Momentum, Mobile and More at Google I/O'라는 주제로 Vic Gundotra와 Hugo Barra에 의해서 진행되었습니다.

Vic Gundotra(좌) Hugo Barra(우)

Intro
시작은 Vic Gundotra가 참석자들에 대한 감사의 인사와 지난 해까지의 Google I/O를 되돌아보는 시간을 가졌습니다. Google I/O는 2008년 처음으로 개최되었는데, 첫 해의 Keynote의 주요 관심사는 'Client, Connectivity, Cloud'였습니다. 스마트폰이나 빠른 웹 브라우저 등으로 사용자의 환경이 많이 바뀌게 될 것이며(client), 무선 인터넷으로 인한 접근성 증가 및 대역폭의 증가도 눈에 띌 것이고(connectivity), 이로 인해 그 전까지는 생각하기 어려웠던 클라우드 서비스(cloud)를 가능하게 할 것이라는 내용이었습니다. 이 모든 것이 벌써 일어난 일이 되버렸습니다. 2009년의 Keynote에서는 그 주제가 HTML5였습니다. 현재 브라우저들의 HTML5 지원은 그때와는 비교할 수 없을 수준으로 발전했습니다. 작년은 Android가 Keynote의 주제였습니다. 2011년은 주제에 앞서 새로운 시도를 소개했습니다. 전세계로 live stream 서비스를 제공하고, 122개 도시에 viewing parties라는 모임을 가져서 live stream되는 Google I/O를 모여서 볼 수 있도록 했습니다.


Day 1의 Keynote는 크게 'Momentum, Mobile, More'의 세 파트로 나누어져 있으며, 이후의 Keynote는 Hugo Barra가 진행합니다.
Momentum
약 2년 6개월 전 G1으로 안드로이드가 처음 알려진 이후, 현재는 약 1억대 이상의 안드로이드 탑재 장치가 사용되고 있습니다. 그동안의 성과를 간단히 요약하면 다음과 같습니다.
  • 전 세계 1억대 이상의 안드로이드 디바이스 판매
  • 36개 제조사, 215개 통신사, 45만명의 개발자
  • 112개국에서 310여종의 안드로이드 디바이스 사용 중
  • 하루에 약 40만개의 안드로이드 디바이스가 판매 됨
  • 안드로이드 마켓의 어플리케이션 수 20만개 돌파
  • 누적 다운로드 45억회 돌파
Mobile
Mobile 부분에서는 주로 안드로이드 플랫폼과 신규 서비스에 대해서 이야기합니다.
Honeycomb 3.1
Google I/O가 열리는 5월 10일에 태플릿PC용 안드로이드 플랫폼인 Honeycomb이 3.1로 업그레이드되었습니다. 업그레이드된 Honeycomb 3.1에서는 아래와 같은 기능을 추가로 지원합니다.
  • 새로운 task 전환기
  • 크기 조절이 가능한 바탕화면 위젯
  • USB 호스트 기능 추가
  • Google TV용 안드로이드 마켓 지원
Honeycomb 3.1
Ice Cream Sandwich
Honeycomb 3.1 릴리즈 및 그에 대한 간단한 소개가 있은 뒤 올해 있을 다음 버전 Ice Cream Sandwich에 대한 소개가 이어졌습니다. 안드로이드는 지금까지 특정 하드웨어 스펙을 요구하지 않았기때문에 다양한 종류의 디바이스가 많이 출시되었습니다. 구글 또한 이로 인한 사용자의 선택폭 증대가 매우 중요하다고 생각하고 있습니다. 때문에 다음 버전인 Ice Cream Sandwich에서는 개발자들의 작업량을 늘리지 않으면서 이러한 다양한 환경에서 사용자들이 좋은 UX를 경험할 수 있도록 하는 것은 주요 관심사로 했습니다. 이 말은 keynote에서 한 문장으로 표현됩니다. "One OS, everywhere"

Ice Cream Sandwich 로고

이를 위해서 우선 Honeycomb에 적용된 다양한 개선점들을 스마트폰, 태블릿PC 모두에 쓰일 수 있는 Ice Cream Sandwich에 포함시켰습니다. 덕분에 사용자는 스마트폰, 태블릿PC 구분 없이 동일한 사용환경을 가질 수 있게 되었습니다. 또한 다양한 크기 및 해상도의 화면에서도 훌륭한 UI를 제공하기 위해 화면 비율 조절(scaling)에 관한 신규 API가 추가되었고, 일부 화면 구성 component들은 좀 더 향상된(intelligent) 모습으로 변경되었습니다. 간단하게 정리하면 아래와 같습니다.
  • State of the Art UI : 신규 홀로그래픽 UI, 신규 launcher, 신규 멀티태스킹 UI, 풍부한 위젯, 개선된 어플리케이션
  • 개선된 Application Framework
  • 다양한 form 팩터에 대응하는 신규 scaling API 추가
  • Components 기능 확장(intelligence)
  • 개발 툴 개선
위에 열거된 내용에 더해서 camera를 활용한 재미있는 기능들이 추가되었습니다. 아래에 소개되는 기능들은 단순한 어플리케이션이 아닌 어플레케이션 프레임워크에서 제공되는 API를 이용해서 만든 예제 어플리케이션입니다. 때문에 API를 활용한 더 많은 창조적인 어플리케이션이 기대됩니다.

첫번째로는 전면 카메라가 사용자를 인식해서 위치에 따라서 3D로 표현된 사물의 view point를 변환시켜주는 기능입니다. 현재 개발되고 있는 무안경 3D 디스플레이와 결합된다면 더 실감나는 3D 영상을 만들어낼 수 있을 것 같습니다. (물론 이 기술을 구글이 최초로 개발한 것은 아닙니다. 얼마전 다른 회사에서 시연에 성공했습니다.)

사용자의 위치에 따라 서로 다른 view point를 가지게 해주는 기능

두번째로는 카메라로 받아들여지는 사용자의 얼굴을 인식해서 눈, 코, 입 등을 변형 시켜주는 기능입니다. 가상 성형 프로그램이라고 보시면 됩니다. 다만, 기존의 대부분의 프로그램은 스틸샷을 기준으로 했었는데, 이번 구글의 프로그램은 카메라에서 들어오는 실시간 동영상 이미지를 대상으로 한다는 점이 차이점입니다.

가상 성형 프로그램(좌)과 Virtual Camera Operator(우)

세번째는 'virtual camera operator'라는 기능입니다. 주로 영상 통화나 화상 회의 어플리케이션에서 많이 활용될 것 같은데요, 한 영상 카메라에 두 명의 얼굴이 인식되고 이 중 한 명이 말을 할 경우 말하는 사람의 얼굴을 자동으로 zoom-in 해주는 기능힙니다.
Multimedia in the cloud
Google은 이날 Keynote를 통해서 클라우드를 이용한 영화와 음악 서비스의 시작을 알렸습니다. 안드로이드 마켓을 이용하면 영화와 음악을 VOD, AOD의 형식으로 이용할 수 있습니다. 물론 off-line에서도 사용할 수 있는 옵션도 제공합니다. 단일 계정을 이용한 다수의 디바이스에서 동일한 환경, 동일한 컨텐츠를 이용가능합니다. 안드로이드에서도 플랫폼 레벨의 N-스크린 기능이 지원되기 시작한 것입니다. 클라우드를 이용한 영화와 음악 서비스는 크게 새롭거나 흥미로운 점은 없는 것 같습니다.


Suppports
Google은 또한 OHA 회원사들의 안드로이드 제품에 대한 업그레이드 기간에 대한 가이드 라인도 제시했습니다. 하드웨어만 지원한다면 최소 18개월은 업그레이드를 지원하겠다는 내용입니다. 얼마나 빨리 업그레이드를 지원할지 등에 대한 세부 사항은 추후에 발표하겠다고 합니다.

18개월 동안의 업그레이드를 보장받는 OHA 회원사
More
Accessory Development Kit
More 섹션은 안드로이드 플랫폼의 앞으로 나아갈 방향에 대한 내용입니다. Open platform에서 소프트웨어를 자유롭게 작성할 수 있는데, 하드웨어는 못할 이유가 무엇인가?라는 질문을 통해 안드로이드 탑제 하드웨어의 개발을 지원하겠다는 구글의 목표가 나타납니다. 구글에서는 이를 'Android Open Accessory'라는 이름으로 발표하였습니다. 이를 이용하면 단말기가 아닌 다른 하드웨어도 안드로이드 플랫폼을 이용해서 만들어지고, 이 장치들은 사용자의 안드로이드 장치와 완벽히(fully) 정보를 주고 받을 수 있게 됩니다. 안드로이드가 탑재된 장치를 안드로이드 폰에 연결하면 자동으로 장치를 인식해서 해당하는 어플리케이션이 실행되고, 혹시 해당 장치에 대한 어플리케이션이 설치되지 않은 경우 안드로이드 마켓에서 다운로드 받을 수 있게 해줍니다. 예제로 나온 것이 안드로이드가 탑재된 사이클 머신인데, 사이클의 페달을 밟는 것을 안드로이드 폰의 게임과 연동시켜서 재미있는 데모를 보여줍니다.

안드로이드가 탑재된 사이클 머신

이러한 'Android Open Accessory'는 GingerBread 2.3.4, Honeycomb 3.1부터 지원합니다. 우선은 USB를 통한 연결부터 지원하고 추후에는 블루투스를 통한 통신도 지원할 예정이라고 합니다. 이러한 장치들의 개발을 손쉽게 하기 위해 구글은 Accessory Development Kit이라는 것 또한 공개했습니다. 다양한 장비를 더 손쉽게 개발하는 것을 지원하기 위한 구글의 노력이 돋보이는 부분입니다.
Accessory Development Kit

또한 이 ADK를 이용한 실제 예제 하드웨어도 선보였습니다. 보드가 ADK와 연결되어 있고, ADK는 태블릿PC와 연결되어 있어서, 태블릿PC의 기울기를 ADK가 전달받아 보드를 조절하는 장치입니다. Keynote에서 직접 보여주는 예제 뿐만 아니라 '구글의 성공에 걸맞는 크기'의 큰 예제 또한 소개했습니다.


Android@Home
더 나아가 구글은 ADK를 활용해서 집안의 전체를 안드로이드 플랫폼으로 제어하는 비전도 제시했습니다. 이를 위해 Android@Home Framework라는 것을 도입하고, 일반 통신을 할 수 없는 장치들을 위한 새로운 protocol도 소개합니다. 아직 전반적을 적용이 되지는 않았지만, 구글은 간단한 예제로 그 가능성을 보여줍니다. 바로 안드로이드 태블릿PC로 조절가능한 전등, 게임에 따라서 번쩍거리는 조명, 물리적으로 직접 연결되어 있지는 않지만 음악 재생을 할 수 있게 해주는 스피커, CD의 정보를 자동으로 읽어서 라이브러리를 구성하고 재생하는 오디오 장치 등입니다.

(좌상) 태블릿으로 조절 가능한 전등
(우상) 화면에 따라 조명이 번쩍거리는 게임
(좌하) 물리적인 직접 연결이나 제어 없이 원하는 곳으로 음악을 재생시킬 수 있는 기능
(우하) CD를 가져다대면 클라우드를 이용해 라이브러리를 구축하고 재생하는 장치
Outro
마지막으로 Hugo는 Google I/O 2011 전체 참석자에게 Samsung Galaxy Tab 10.1을 선물로 안기고 첫째날의 Keynote를 마무리합니다.

'IT > Mobile Platforms' 카테고리의 다른 글

[Google I/O 2011] Keynote Day 2  (0) 2011.05.30
[Google I/O 2011] Keynote Day 1  (1) 2011.05.29
[Google I/O 2011] Intro & Session list  (0) 2011.05.21
Android Architecture Overview  (1) 2011.04.08
EFL(Enlightenment Foundation Library)이란 무엇인가?  (0) 2011.03.02
LiMo4? SLP?  (3) 2011.02.23

댓글을 달아 주세요

  1.  댓글주소  수정/삭제  댓글쓰기 itsmeyjc 2012.03.26 08:47 신고

    android open accessory에 대한 교육이 있어 홍보해드립니다.
    http://doedu.co.kr/incumbent/shortContent.do?index=152

    Cortex-M3 계열의 장비를 안드로이드 플랫폼에서 제어하도록 펌웨어와 애플리케이션 개발에 대해 다루고 있습니다.

IT/Mobile Platforms | Posted by 철규님(최규철) 2011.05.21 17:40

[Google I/O 2011] Intro & Session list

Google I/O 2011
Developer Conference
Written by Gyucheol Choi on 12 MAY 2011
May 10-11, 2011 / Moscone Center, San Francisco
구글은 지난 2008년부터 매년 'Google I/O'라는 개발자 회의(developer conference)를 개최합니다. 올해는 샌프란시스코의 모스콘 센터(Moscone center)에서 현지 날짜로 5월 10일~5월 11일 양일간 열립니다. 개발자 회의에는 약 5-6000명 정도의 개발자가 사전 신청을 통해 참석을 하게 됩니다. 참가 비용은 450달러로 우리 돈으로는 약 50만원 정도하는 적지 않은 금액이지만, 안드로이드나 구글에 대한 관심이 증가하는 덕에 올해의 Google I/O 참가 신청은 1시간도 채 안되서 마감되었습니다.

구글에 대한 최신 정보를 가장 생생하게 얻을 기회일 뿐만 아니라, 매년 참가자들에게는 깜짝 놀랄만한 선물이 주어져서 시간과 돈과 같은 기회 비용 등 이런저런 득실을 다 따져보아도 참가가 득이되는 것은 사실일 듯합니다. (참고로 2010년 Google I/O에서는 참가자들에게 안드로이드가 탑재된 스마트폰을, 올해 Google I/O에서는 참가자들에게 삼성 갤럭시탭10.1과 구글 크롬북을 선물 하였습니다!!)

Google I/O 2011에서 참석자 전원에게 제공된 Samsung Galaxy Tab 10.1

이틀간의 conference 동안 매일 아침 9시의 Keynote를 시작으로 100여개의 세션이 진행됩니다. 참가자들은 자신이 원하는 세션을 찾아 해당 세션이 진행되는 시간에 세션이 진행되는 회의장으로 찾아가면 됩니다. 더불어 올해는 처음으로 전 세계 122개 도시에 생중계되기도 했습니다. 물론 실질적으로 live로 보여지는 세션은 일부였으며, 다른 대부분의 세션들은 Google I/O가 끝난 주 금요일에 Google I/O 2011 공식 홈페이지http://www.google.com/events/io/2011/)를 통해 세션 동영상이 공개되었습니다.

약 100여개의 세션은 Track별로 주제를 달리합니다. 올해 진행되는 세션들은 Android,, App Engine, Chrome, Commerce, Dev Tools, Geo, Google APIs, Google Apps, Tech Talk 등의 총 9개의 track으로 나뉩니다. 각각의 track은 2~3개의 세션이 동시에 진행되기도 합니다.

참가자들은 자신에게 필요한 세션을 찾아서 들어야되는데, 구글은 이를 위해서 세션들을 난이도에 따라서 세 단계로 분류해놓았습니다. 가장 쉬운 등급은 세션 레벨이 101입니다. 이 레벨의 세션은 제품이나 기술에 대한 사전 지식이 없어서 들을 수 있는 수준으로, 주로 기술에 대한 overview나 새로운 분야에 대한 소개로 이루어집니다. 다음 등급은 201 레벨입니다. 이 레벨은 특정 기술이나 제품에 대한 심도있는 내용이 제공되는데, 어느 정도 그 기술이나 제품에 대한 지식이 있도 친숙한 사람을 대상으로 합니다. 마지막으로 301 레벨이 가장 높은 수준의 세션입니다. 기술이나 제품에 대한 고급적인 정보 교환이 이 세션의 목표입니다.

2일 동안 열린 세션들을 track별, 난이도 별로 분류해보았습니다. 아래의 리스트와 링크를 참고하세요^^

Keynotes & After hours party
  • Day 1 Android: Momentum, Mobile and More at Google I/O [go]
  • Day 2 Google Chrome: Day 2 Keynote from Google I/O [go]
  • After hours party Jane`s Addiction Live at After Hours [go]
Android Track
101 level (Android Track)
  • 3D Graphics on Android: Lessons learned from Google Body [go]
  • Android Market for Developers [go]
  • Bringing C and C++ Games to Android [go]
  • Fireside Chat with the Android Team [go]
  • Honeycomb Highlights [go]
201 level (Android Track)
  • Accelerated Android Rendering [go]
  • Android + App Engine: A Developer`s Dream Combination [go]
  • Android Development Tools [go]
  • Best Practices for Accessing Google APIs on Android [go]
  • Building Aggressively Compatible Android Games [go]
  • Building Android Apps for Google TV [go]
  • Designing and Implementing Android UIs for Phones and Tablets [go]
  • Don’t just build a mobile app. Build a business. [go]
  • Evading Pirates and Stopping Vampires using License Verification Library, In-App Billing, and App Engine [go]
  • How to NFC [go]
  • HTML5 versus Android: Apps or Web for Mobile Development? [go]
  • Leveraging Android Accessibility APIs To Create An Accessible Experience [go]
  • Optimizing Android Apps with Google Analytics [go]
  • Taking Android to Work [go]
301 level (Android Track)
  • Android Protips: Advanced Topics for Expert Android App Developers [go]
  • Memory management for Android Apps [go]
  • Android Open Accessory API and Development Kit (ADK) [go]
Application Engine Track
101 level (Application Engine Track)
  • Building Enterprise Applications on App Engine [go]
  • Coding For The Cloud: How We Write Enterprise Apps for Google on App Engine [go]
  • Fireside Chat with the App Engine Team [go]
  • Full Text Search [go]
  • Life in App Engine Production [go]
  • Smart App Design [go]
  • Storing Your Application`s Data in the Google Cloud [go]
201 level (Application Engine Track)
  • App Engine Backends [go]
  • App Engine MapReduce [go]
  • Querying Freebase: Get More From MQL [go]
  • Scaling App Engine Applications [go]
301 level (Application Engine Track)
  • Large-scale Data Analysis Using the App Engine Pipeline API [go]
  • More 9s Please: Under The Covers of the High Replication Datastore [go]
Chrome Track
101 level (Chrome Track)
  • Chrome Web Store Publisher Panel [go]
  • Fireside Chat with the Chrome Team [go]
  • HTML5 Today with Google Chrome Frame [go]
  • Super Browser 2 Turbo HD Remix: Introduction to HTML5 Game Development [go]
  • Web Fonts are changing the Web. Learn why. [go]
201 level (Chrome Track)
  • Beyond JavaScript: Programming the Web with Native Client [go]
  • Creating Accessible Interactive Web Apps using HTML5 [go]
  • HTML5 & What`s Next [go]
  • HTML5 Showcase for Web Developers: The Wow and the How [go]
  • Mobile Web Development: From Zero to Hero [go]
  • WebGL Techniques and Performance [go]
Commerce Track
101 level (Commerce Track)
  • Google Checkout: A Foundation For Payments [go]
  • Introducing In-App Payments for the Web [go]
  • Introduction to Google Shopping APIs [go]
201 level (Commerce Track)
  • Google One Pass: A simple, flexible, Web API for paywalls [go]
  • Integrating to eBooks: APIs to Sell and Read eBooks for Affiliates, Retailers and Device Makers [go]
Developer Tools Track
101 level (Developer Tools Track)
  • Chrome Dev Tools Reloaded [go]
  • Use Page Speed to Optimize Your Web Site For Mobile [go]
201 level (Developer Tools Track)
  • Bring the Cloud to Your IDE with the Google Plugin for Eclipse [go]
  • Building Game Development Tools with App Engine, GWT, and WebGL [go]
  • Fireside Chat with the GWT and Cloud Tooling Team [go]
  • GWT + HTML5: A web developers dream! [go]
  • GWT + UI Designer: Enterprise Web UIs Made Easy! [go]
  • Highly Productive GWT: Rapid Development with App Engine, Objectify, RequestFactory, and gwt-platform [go]
  • JavaScript Programming in the Large with Closure Tools [go]
  • Kick-ass Game Programming with Google Web Toolkit [go]
  • Using GWT and Eclipse to Build Great Mobile Web Apps [go]
  • Writing Web Apps in Go [go]
301 level (Developer Tools Track)
  • High-performance GWT: best practices for writing smaller, faster apps [go]
Geo Track
101 level (Geo Track)
  • Connecting People and Places [go]
  • Fireside Chat with the Geo team [go]
201 level (Geo Track)
  • Location Based App development using Google APIs [go]
  • Managing and visualizing your geospatial data with Fusion Tables [go]
  • Map your business, inside and out [go]
  • Secrets and surprises of the Google Geo APIs [go]
301 level (Geo Track)
  • Designing Maps Applications for Usability on Mobile and Desktop [go]
  • GIS with Google Earth and Google Maps [go]
  • High Performance KML for Maps and Earth [go]
  • Speedy Maps [go]
Google APIs Track
101 level (Google APIs Track)
  • An introduction to the +1 button [go]
  • Life of a Google API Developer [go]
  • The YouTube Caption API, Speech Recognition, and WebVTT captions for HTML5 [go]
  • Your Game + YouTube = Instant Community [go]
201 level (Google APIs Track)
  • Building a Business Web Presence using Blogger APIs [go]
  • Building Custom Client Libraries for Google APIs [go]
  • ClientLogin #FAIL [go]
  • Implementing Money Making SDKs [go]
  • Scalable Structured Markup [go]
  • YouTube`s iframe Player: The Future of Embedding [go]
301 level (Google APIs Track)
  • Using Google Chart Tools to Create Interactive Dashboards [go]
Google Apps Track
101 level (Google Apps Track)
  • Apps Marketplace: Best Practices and Integrations [go]
  • Developing innovative custom business solutions with Google Apps [go]
  • Enterprise Workflow with Apps Script [go]
  • Google Tasks API [go]
  • Launch and Grow Your Business App on the Google Apps Marketplace [go]
  • Using The Google Docs APIs To Store All Your Information In The Cloud [go]
201 level (Google Apps Track)
  • Putting Task Queues to Work [go]
  • Compliance and Security in the Cloud: Essential Administrative APIs for Google Apps Businesses [go]
  • Developing Apps, Add Ins and More with Google Apps Script [go]
Tech Talk Track
101 level (Tech Talk Track)
  • Accessibility: Building Products that Everyone Can Use [go]
  • Building Web Apps for Google TV [go]
  • Crisis Response 2.0 - Empowering Developers in Times of Crisis [go]
  • Google Ventures Meetup [go]
  • How to Get Your Startup Idea Funded by Venture Capitalists [go]
  • Ignite [go]
  • Make the Web Faster [go]
  • Programming Well with Others: Social Skills for Geeks [go]
  • Python@Google [go]
  • The Secrets of Google Pac-Man: A Game Show [go]
201 level (Tech Talk Track)
  • Cloud Robotics [go]
  • Identity and Data Access: OpenID and OAuth [go]
  • Java Puzzlers - Scraping the Bottom of the Barrel [go]
  • Learning to Love JavaScript [go]

'IT > Mobile Platforms' 카테고리의 다른 글

[Google I/O 2011] Keynote Day 2  (0) 2011.05.30
[Google I/O 2011] Keynote Day 1  (1) 2011.05.29
[Google I/O 2011] Intro & Session list  (0) 2011.05.21
Android Architecture Overview  (1) 2011.04.08
EFL(Enlightenment Foundation Library)이란 무엇인가?  (0) 2011.03.02
LiMo4? SLP?  (3) 2011.02.23

댓글을 달아 주세요

IT/Web Dev | Posted by 철규님(최규철) 2011.05.10 19:57

[jQuery Mobile] 2. Getting started - Hello world

이 글은 jQuery Mobile 공식 홈페이지(http://jquerymobile.com/)의 Docs and Demos를 기반으로 작성되었습니다.
작성일(2011/05/10) 기준 jQuery Mobile의 최종 버전은 jQuery Mobile 1.0 Alpha 4.1입니다.

2. Getting started - Hello world
< jQuery Mobile로 Web application 만들기 >
Written by Gyucheol Choi on 10 MAY 2011
모든 언어를 처음 접할때 작성하는 프로그램은 아마 "Hello world!"를 출력하는 프로그램일 것입니다. 물론 안드로이드 개발에 있어서는 프로젝트 생성 윈도우에서 next 버튼만 클릭하면 hello world를 출력하는 프로젝트를 생성해줘서, 새로운 언어로 새로운 환경에서 hello world를 띄워보는 흥미를 없애버리긴 했지만요. 이번 글에서는 jQuery Mobile을 설치(?)하고 Hello world를 출력하는 어플리케이션을 만들어볼려고 합니다.
jQuery Mobile 사용 하기
jQuery Mobile을 사용하는 방법은 두 가지가 있습니다. CDN(Content Delivery Network)에서 제공하는 자바스크립트(.js) 파일과 CSS(.css) 파일을 사용하는 방법이 있고, 소스 및 이미지를 다운로드 받아서 자신의 호스트 서버에 업로드 한 후 이 버전을 참고하는 방법이 있습니다. 각자의 호불호에 따라서 사용을 하시면 될 듯합니다. 제공되는 버전을 보면 Uncompressed 버전과 Minified 버전이 있는데, Minified 버전은 불필요한 개행이나 공백, 주석 등을 완전히 제거한 버전이고, Uncompressed 버전은 개행, 공백, 주석 등을 온전히 유지하여 디버깅을 가능하게 한 버전입니다. 때문에 실제 파일 크기를 보면 자바스크립트의 경우 130KB/19KB, CSS 파일의 경우 53KB/7KB 등으로 많은 차이가 나는 것을 알 수 있습니다. 실제적인 jQuery Mobile의 내부 구조를 살펴보시고 싶은 분은 Uncompressed 버전을 사용하시면 많은 도움이 될 것 같습니다.
이 글에서는 CDN에서 제공하는 Minified 버전의 자바스크립트 파일과 CSS 파일을 사용하는 방법을 알아보겠습니다.

jQuery Mobile을 사용하기 위해서는 CSS 파일과 jQuery Core 자바스크립트 파일, jQuery Mobile 자바스크립트 파일이 필요합니다. jQuery Mobiel 다운로드 사이트(http://jquerymobile.com/download/)를 참고해서, 'Copy-and-Paste Snippet'의 태그를 웹 페이지에 추가합니다.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>헤더 타이틀</title> 5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 6 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 7 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 8 </head> 9 <body> 10 11 </body>

해당 HTML 파일이 HTML5를 기반으로 한 문서라는 것을 1번 라인에 명시하였습니다. 그리고 5, 6, 7번 라인에서 jQuery Mobile을 위한 CSS 파일, 자바스크립트 파일을 포함시킵니다. 이로써 jQuery Mobile에서 제공하는 모든 기능을 사용할 준비가 완료되었습니다. 이제 Hello world를 띄워보는 어플리케이션(이라고 하기도 뭐한 어떤 것)을 만들어 보겠습니다.
Hello world
jQuery Mobile에서는 화면의 구성 요소들을 div 태그로 구분을 하고 div 태그의 data-role 속성(attribute)을 명시함으로써 화면에서 어떤 역할을 할지 지정합니다. 이후는 jQuery Mobile 프레임워크가 모든 걸 알아서 합니다. 자세한 페이지 구조는 다음 글에서 설명을 하기로 하고 우선은 간단한 구조만 정의하고 예제를 볼까 합니다.

jQuery Mobile 프레임워크는 1개 이상의 page를 가지고, 하나의 page는 header, content, footer를 각각 가집니다. 예제로 작성할 Hello world 어플리케이션에서는 Header 부분에 "First App", Content 부분에 "Hello world!", footer 부분에 "jQuery Mobile"을 각각 나타내보겠습니다. 위의 설명대로 구성한 소스코드는 아래와 같습니다.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery Mobile Test</title> 5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 6 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 7 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 8 </head> 9 <body> 10 <div data-role="page"> 11 <div data-role="header"> 12 <h1>First App</h1> 13 </div> 14 15 <div data-role="content"> 16 <p>Hello World!</p> 17 </div> 18 <div data-role="footer"> 19 <h2>jQuery Mobile</h2> 20 </div> 21 </div> 22 </body>

위의 파일을 저장하고 원하는 브라우저에서 열어보면 아래와 같은 화면을 볼 수 있습니다.


Hello world - Theme
jQuery Mobile은 기본적으로 5가지 형태의 테마를 제공합니다. div 태그에 data-theme 속성에 값을 부여함으로써 각각의 테마를 적용할 수 있습니다. 테마는 특별한 id 없이 a, b, c, d, e의 값을 가집니다. 명시하지 않을 경우 a의 테마가 적용됩니다.

테마 page 단위로 일괄적으로 적용할 수도 있으며, 필요에 따라 화면의 각 구성 요소에 서로 다른 테마를 적용할 수도 있습니다.




이로써 jQuery Mobile을 내 웹 어플리케이션에 적용하고, 이를 이용해서 Hello World를 출력하는 프로그램, 그리고 그 프로그램에 테마를 적용하는 것까지 해보았습니다. 간단한 예제지만 분석해볼만한 내용은 더 많은 것이라 생각됩니다. 지금은 잘 이해되지 않는 부분도 나중에 다시 한번 보신다면 더 잘 이해하고 더 많은 의미를 찾아낼 수 있지 않을까 생각합니다.

댓글을 달아 주세요