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

the tag
HTML11: the tag @html11.org

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

 

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

 

the tag
HTML11: the <wind> tag @html11.org
HTML5의 활용과 전망
  • 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

 

appspresso
웹을 앱으로! KTH의 하이브리드 앱 빌더 앱스프레소 @appspresso.com
  • 스마트 디바이스 시장의 성장
    – 국내 스마트폰 가입자 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 오픈 예정
* 참고로, 업계 사람들의 말을 빌리면 ‘앱스프레소’가 아직 안정성이 떨어진다는 지적이 있으니 참고하세요.

글쓴이 남반장

#동네서점지도 운영자 | 1998년 인터넷 라디오 '무차별 방송국'을 시작한 이래, 15년 이상 웹서비스 기획자로 일해오고 있습니다.

댓글 달기