차세대를 이끌 모바일 앱 기술은? HTML5, 앱스프레소

지난 7월 29일, 을지로 페럼타워에서 열렸던 <차세대 모바일 앱 기술동향 컨퍼런스> 에 다녀왔다.
차세대를 이끌 모바일 앱 기술은 무엇인지 3명의 전문가의 말들을 요약해 본다.

1. HTML5 & 모바일 웹앱 동향 (발표자료 보기 >>)
by 김종광 팀장 미래웹기술연구소

• HTML5가 주목받는 이유?
  애플 “표준이 아닌 것에 종속되면 그 말로가 어찌 되는지 우리는 잘 알고 있다” 스티브 잡스(2010)
  구글 ” 구글은 HTML5에 사활을 걸었다” 2009 Google I/O 컨퍼런스
• 모바일 시장의 급성장
  2011년 국내 스마트폰 보급율이 전체 핸드폰 시장의 50% 돌파 예상
• WAC(Wholesale App Community)의 등장
  WAC 이란
  HTML5 기반의 웹앱 플랫폼
  이동통신사 주도의 새로운 환경 탄생
  Money Power 강점
• HTML의 미래? HTML11
  the <wind> tag / the <taste> tag / the <xray> tag
• Native 앱을 대체
  HTML은 더 이상 Static한 Markup Language가 아니다.
  화려해지고(CSS, Canvas) 똑똑해진(Javascript) 언어이다.
  웹기술을 이용한 앱개발이 가능
  멀티플랫폼과 N-Screen의 유일한 대안이다.
• 하이브리드 앱 빌더 (App Store 등록 툴)
  웹앱을 네이티브앱으로 전환을 지원 (Converting WebApps to Native Apps)
  – PhoneGap
  – Titanium
  – Appspresso
• 주요 사례
  RNAP App. (PhoneGap Used)
  애플 앱스토더 유료부분 Medical Category 1위(2011. 04)
• WebOS
  브라우저가 OS가 되는 세상
  HP: WebOS 2.1 탑재 스마트폰 출시
  HP 터치패드 7월 국내 출시 예정 – WebOS 탑제
  크롬OS (넷북, 타블렛) 출시 예정

Mobile UI Framework (발표자료 보기 >>)

• Mobile UI Framework란…
  모바일 환경에서 사용자와의 접점이 되는 UI를 만들 수 있는 기틀 제공
  – UI 개발의 기초 제공
  – 개발자는 콘텐츠에 집중
  클라이언트 사이드에 탑재되어 클라이언트와 서버를 이어주는 역할
  최근 UX가 중요해짐에 따라 UI Framework에서도 이러한 추세 반영하여 발전중
  ex) 긍정 버튼, Yes = 밝게 / 부정 버튼, No = 어둡게
• 아이폰 개발: Xcode + Interface Builder *
• 안드로이드 개발: 안드로이드 SDK + Layout Editor
• 모바일 웹: HTML5 + Mobile UI Framework (Sencha Touch) *
• iOS Human Interface Guidlines ***
• 특징
  네이티브 앱과 UI/UX가 비슷해야 한다.
  – 애니메이션 효과
  – 화면 구성
  작은 화면에 효과적인 표현방법 필요
  스마트폰은 손맛이 중요
  프레임워크의 해결방법
  – 빠른 응답속도를 위해 Local Storage 와 Cache 기능을 지원
  – Loading 표시를 자동 혹은 손쉽게 제공
  다양한 해상도 지원
  – 프레임워크에서 해상도가 달라도 버튼의 크기를 유지

SENCHA TOUCH

• 특징
  최초의 HTML5 모바일 웹앱(Web App) 프레임워크
  아이폰, 안드로이드, 블랙베리  같은 터치 기반 디바이스의 개발 지원
  터치 이벤트 지원
  현재 가장 강력한 기능을 제공
• 구성
  – Sencha Touch = HTML5 + CSS3 + JavaScript
• 사례 >>
  – Kitchen Sink  devie에 따라 화면 Layout이 달라진다.
  – O’Reilly Conference App 
  – TouchSOlitaire
  – 멜론
• 전망
  – Native App 개발보다 쉽고, 판매할 시장이 많다.
  – Wap 및 WebOS 시장이 곧 개장 → 계속되는 인기 예상
  – 드림위버 차기버전에서 JQuery Mobile을 지원하는 등 저변확대 될 것

요약

• 왜 HTML5인가?
  – 모바일 시장의 확대: 구글, 애플의 선택
  – 크로스 플랫폼 지원, 웹표준 기술의 강점
• 생산성 및 비용 절감의 효과
  – 앱스토어, 앱개발보다 적은 Cost
  – WAC/WebOS, MS windows8 등 활용도가 무궁무진
• Mobile UI FrameWork
  – 모바일 웹 작성의 토대를 제공 (개발자는 콘텐츠만 집중하면 된다)
  – 대부분 HTML5 기반으로 Hybrid App 전환이 용이
• Sencha Touch
  – 순수 HTML5 기술
  – 가장 풍부한 기능, App 스러운 화면 구성

2. 하이브리드 앱 개발전략, 앱스프레소 

by 한기태 팀장 KTH

• 스마트 디바이스 시장의 성장
  – 국내 스마트폰 가입자 1천만 돌파(2011. 03. 23), 연내 2천만 돌파 예상
  – iOS 디바이스 판매량 1.08억 (11. 03)
  – Android 디바이스 1.35억 (11. 07)
• 구글, 아이폰에서도 되는 ‘모바일 App 개발툴’ 곧 선봬

•  웹 플랫폼
  WebOS, Market
  – Chrome 웹 스토어
  – B2G(Boot 2 Gecko)  
• 모바일 플랫폼 시장 상황
  2010 Revenue (Source: HIS Screen Digest February 2011)
  – Apple App Store(iOS) 82.7%
  – Google Android Market 4.7%
  신규 앱의 첫번째 플랫폼은 iOS=89%!
  Android 추락 중… 나머지 모바일 플랫폼은 관심 없음 (Source: Flurry Analytics )
  – 18% (2009) –> 10% (최근 60일, 2010)
• WAC, KWAC
  – Android OK, but 이전 기기는 적용하지 않음. 바다와 윈도우폰은 계획 중.
  – 애플은 계획 없음.
• 세계 최초 표준 API 지원 하이브리드 프레임워크 (11. 03. 14)
• 유사 툴: PhoneGap, Rhodes, titanium(appcelerator)
• 앱 구현 사례
  – Ucloud 1.1 (Android)
  – 푸딩얼굴인식 (iOS 다국어버전/Android) by KTH
  – Evandale (iOS/Adnroid) by dbdib.com
  – PIURI (Android) by piuri.com
• 하이브리드 프레임워크 선택
  특정 업체에 종속적인 비 표준 기술
  – Phodes:  HTML5, 루비
  – titanium: 아웃풋 훌륭함(native app이기 때문에) 자바스크립트
  PhoneGap vs  Appspresso
  – PhoneGap: 오픈소스(유료 기술지원 프로그램), 표준 API (X), WAC 지원 (X), 통합개발환경(X, sample source), Customizable (O)
  Appspresso: 무료,  표준 API (O), WAC 지원 (O), 통합개발환경(O, 단일환경, one click build), Customizable (O, PDK)
•  Javascript UI Framework 선택
  jQuery Mobile  
  – Open Source, Easy, but Buggy, Low quality
  → 앱스프레소 Kitchen Sink App (Tip & Sample)
  Sencha Touch
  – Dual License(상용 or GPL), High quality but Heavy, Difficult
  → 앱스프레소 Template Project (Tip & Sample)
• JavaScript Library 선택
  – iScroll 
  – iScroll for jQuery Mobile  
  – microjs
• 앱 개발 팁
  – 점진적 개발
  – 첫페이지만 화려하게
• 8월 중순 버전 1 오픈 예정