Embed Size (px)
DESCRIPTION
모바일웹앱최신기술동향 발표자료
Citation preview
황순삼
2011. 08.24
모바일 웹앱 최신 기술 동향/모바일 웹앱 최신 기술적용방안
Table1. 모바일웹앱최신기술동향
모바일웹환경의변화
모바일웹앱
모바일웹개발기술및프레임워크
N-Screen
2. 모바일웹앱최신기술적용방안 모바일웹개발전략
모바일웹설계방안
모바일웹개발프로세스
모바일웹베스트프랙티스
모바일웹개발팁
3
모바일웹앱최신기술동향
1. 모바일웹환경의변화• 모바일생태계• 모바일 2.0• 모바일브라우저와생태계에서의주요트렌트
2.모바일웹앱• 모바일앱, 모바일웹• 모바일웹앱종류와특징
3.모바일웹개발 기술• HTML 5• Java scripts & CSS• Device API
4.모바일 웹개발프레임워크• UI 프레임워크• Hybrid App 프레임워크
5. N-Screen • N-Screen 이해• N-Screen 기술및이슈• N-Screen 전략• 스크린확장및정보이동
Mobile ecosystem
소프트웨어에 날개를 달자 – ZDnet
피쳐폰 스마트폰
통신서비스 사업자가 절대적 폐쇄적 시장 구조 (수익분배 불평등) 모바일 어플과 컨텐츠 공급 열세
플랫폼 공급자가 핵심으로 등장 오픈 마켓 (모바일 생태계 선순환 구조) 개발자와 컨텐츠 개발자에게 새로운글로벌 시장 창출
Mobile 2.0
Web 2.0 : 2004년 Tim O’relly가처음으로언급한새로운인터넷흐름을의미, 즉다양한기술과응용프로그램을엮는사용자참여중심의플랫폼으로써의웹 (Web as a platform) 강조
기술의변화 네크워크 : EV-DO -> Wifi -> Wibro,
HSDPA(3G), LTE(4G) Phone : 피처폰 -> 모바일폰 -> 테블릿
웹환경 : WAP & WML -> TCP/IP, XHTML, HTML 5
서비스 : 폐쇄적, 이통사중심 -> 오픈, 플랫폼(OS)중심
Key trends in mobile browser & ecosystem
소프트웨어에 날개를 달자 – ZDnet
Key browser trends Widget : always active on Push Offline storage Device API Embedded web Better Javascript
Ecosystem trends Cloud Computing Micro formats Social APIs
Mobile (Native) App and Web App?
Definitions
Mobile App vs. Mobile Web
-모바일웹 UI 패턴및 UI개발플랫폼개발사례 : LG CNS
Mobile Web =! Mobile App
Mobile Web App 발전가능성
웹서비스에서고착화되어있는대형포탈의지배력
수많은단말, 다양한 OS, 심각한단편화문제 웹기반표준화발전
Device API, HTML 5, Web based cross platforms
Web App Store OpenAppMkt:
http://www.openappmkt.com Chrome Web Store:
http://chrome.google.com/webstore GetJar HTML 5 Web App Store:
http://www.getjar.com모바일OK Web Store:
http://www.mokstore.com/
Mobile Web App의장점
다양한플랫폼동시지원 iPhone/iPad/Android/BlackBerry.. 최신웹브라우저가있는모든디바이스에서가능
서버기반앱빠른업그레이드
유지보수비용절감
Web 개발자에게친숙한개발환경HTML5, CSS, Javascript, Open Source Libraries
다양한웹서비스들과손쉽게Mash-up 개발
Mobile Web App Development
1. HTML5 WebKit engine Offline support, Media, Advanced input, Geolocation
2. UI Framework Javascrpit based UI Libraries, CSS 3 effects iUI, jQTouch, WebApp.Net, Sencha
3. Hybrid App Framework App packaging & Device Integration Framework: PhoneGap, Apppresso, Appcelerator Titanium,.. Specification: W3C OMTP BONDI, JIL,..
HTML5의성장배경
Web에서 Desktop 수준의App 사용자경험 (UX) 제공가능
모든모바일플랫폼용네이티브앱을만드는것은매우어려움
iOS, Android, WP7, BlackBerry, Symbian, Bada…
“Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of platform.” – Google Engineering VP, Vic Gundotrahttp://www.youtube.com/watch?v=mlnxG0SO0Uw&feature=player_embedded
- 2010년 6월 24일공지된행정안전부고시제2010-40호 -“국민들이다양한모바일기기를사용할수있도록모바일앱보다모바일웹을표준으로권고하고, 국제표준화기구에서제공하는표준사용을의무화하여최소 3종이상의웹브라우저에서동등한서비스제공”
HTML5 Key Elements for Mobile
Semantics : New tags, Link Relations, Microdata Multi-media: Video, Audio Web Forms: Advanced Forms 2D & 3D drawing: Canvas, WebGL, SVG Off-line 지원(local storage): Web database, Local Storage, App Cache Communication: Web sockets, Web workers Device API (W3C): Camera, Calendar, Address book Desktop experience: Notification, Drag & Drop GeoLocation Visuals, Typography, Transforms & Animations, Transitions
HTML5 = HTML + CSS + JS API(Content) (Presentation) (Device access)
http://clearboth.org/html5/spec.html : W3C HTML5
CSS 3
Opacity RGBA & HSL/A Color New Background Properties New Border Properties Shadows New Text Properties Fonts Transformations 3D
http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3
Device API
WAC (Wholesales Application Community) 40개이상의통신/제조사협의체 BONDI + JIL ~= Waikiki Beta
W3C DAP (Device API)http://www.slideshare.net/guruguru/2011-the-year-of-web-apps
Mobile UI Framework iPhone: Xcode + Interface Builder Android: Android SDK+ Layout Editor Mobile Web : HTML 5 + Mobile UI Framework 특징
Native App과비슷한 UI/UX 제공 작은화면에효과적인표현방법필요
빠른응답속도를위해 Local storage와 Cache 기능제공 다양한해상도지원
UI Library for Touch Devices
iPhone style UI library jQTouch: http://jqtouch.com iUI: http://code.google.com/p/iui/ WebApp.Net: http://webapp-net.com
iUI 계층적인정보를보여주는데적합 (UITableView) UI 기능이풍부하지는않음 iPod Touch / 3G 폰에서도성능괜찮음 가장초기에나온라이브러리 (de facto standard) http://code.google.com/p/iui
WebApp.Net
작고가벼운라이브러리
문서화가잘되어있음
Form + AJAX 지원 디버깅, 멀티미디어지원 컴포넌트라이브러리제공
http://webapp-net.com
jQTouch jQuery에기반한모바일용터치용라이브러리 강력하고성능이좋음
Native WebKit애니메이션지원 CallBack Events, Theme 지원, Swipe Detection 사용자 Extension 지원 http://jqtouch.com http://jqtouch.com/preview/demos/main
Sencha Touch Sencha Touch: JQTouch + Ext JS + Raphaël: http://sencha.com HTML5 + CSS3 + JavaScript Mobile App Framework 현재가장강력한기능을제공 (터치이벤트) Support for iOS & Android Touch기반의다양한 UI Control 제공 한개의소스로 iPad/iPhone/Android 화면동시지원 http://sencha.com
http://dev.sencha.com/deploy/touch/examples/kitchensink/
Hybrid App Development 모바일웹을 네이티브앱처럼 만들어 줌
모바일웹을 위한 WebKit과 배포를 위한 패키징 제공 HTML, CSS, JavaScript로 개발 자바스크립트 기반 디바이스 자원 접근 (API) 크로스 디바이스 지원 : One source, Multi Platform 앱 등록으로 판매 및 광고 수익 가능 웹 런타임 방식 : PhoneGap, Appspresso 빌드 타임 방식: Titanium
Hybrid App Frameworks
PhoneGap http://www.phonegap.com/ iPhone, Android, Blackberry, Symbian,
Palm, Windows Mobile
Appcelerator Titanium http://www.appcelerator.com iPhone, Android, Blackberry
Appspresso http://www.appspresso.com iPhone, Android
PhoneGap http://www.phonegap.com/http://github.com/phonegap/phonegap-iphonehttp://docs.phonegap.com
Cross Platform Mobile Application Framework iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile
Web App을 Native App으로 패키징 iUI, jQTouch, jQuery Frameworks와 조합 Web App에서 불가능했던 Device 기능들을 Javascript를
통하여 접근할 수 있도록 만들어줌 Open Source
Titanium http://www.appcelerator.com http://github.com/appcelerator
Web App을 Native App으로 변환 빌드 타임 (컴파일) : JavaScript를 cross-compiler를 통해 네이티브 코드로 변환
디바이스 기능을 자체적으로 제공 고유 자바 스크립트를 사용 Mobile, Desktop, Developer, Network 컴포넌트 제공 (개발도구 및
지원 환경) 오픈소스 (라이브러리로 일부 제한)
Appspresso http://www.appspresso.com/
PhoneGap과 동일하게 Web App을 Native App으로 패키징 통합 개발 환경 지원 (Eclipse IDE) 원 클릿으로 iOS & Android 앱 빌드 KTH에서 만든 국산 하이브리드 프레임워크 Device API는 WAC의 Waikiki 2.0 beta 지원 Touch UI : Sencha, jQueryMobile, JoApp 연동
N-Screen 이해
서로다른 Screen Device에서하나의서비스를동일한사용성으로제공
One buy, Multi Use 각 Device의총체적기능을고려한 UI/UX Connected Lifestyle
사례 (Netflex, Evernote)
N-Screen 기술및이슈
Cross Platform HTML 5 Web Browser
콘텐츠포맷, 단말제어및동기화, 콘텐츠메타정보규격등이상이
N-Screen 전략
N-Screen and Cloud Web and Desktop Application Multiplatform Support
서로다른 Screen Device를통해하나의서비스에새로운가치창출이핵심
Interaction among Screen Devices with contents
스크린확장및정보이동
Surround Vision 주변단말을이용한직관적인조작
으로 TV 메인화면과부가영상을동시에시청가능
SPARSH사용자가보유한단말간정보를 Touch-CopyTouch-Paste 방식으로교환클라우드를활용하여간접적으로데이터가
전달되나단말간직접데이터가이동하는
것과같은사용자경험제공
- MIT Media Lab 연구자료중
39
Mobile Web Development 1. Mobile Web Development Strategy2. Adapting to Devices3. Mobile Web Development Process4. Agile For Mobile Web Development5. Mobile Web Best Practice6. Mobile Web Development Tips & lessons learned
Mobile Web Development Strategy Consider Whole Mobile Strategy
What happens if they don’t have your app?
Mobile Web Development Strategy Context Awareness : “Relation, Place, Time”
image source: NOKIA
Mobile Web Development Strategy Just don’t convert, Create new value for customer:
“It should not be just another channel”
사진: 모바일컨텐츠이야기: http://mobizen.pe.kr/
Mobile Web Development Strategy Keep It Simple : Say “No”
가장 핵심적인 기능을 가장 간결하고 빠른 접근성으로사용자들에게 전달
서비스의 기능, 사용성, 설명 등의 친절함은지나치게 과하지 말아야 한다..
모바일컨텐츠이야기: http://mobizen.pe.kr/
“웹에서 표준적으로 사용되는 기술 및 규칙”• 일반적 표준(standards)가 아닌 W3C의 권고안
(recommendation) 의미
• 브라우저별로 독자적 확장요소들이 호환성 문제 야기: 국내는 IE 하위 버전을 기준으로 컨텐츠 개발
웹 표준 관련 기술
구조(HTML & XML)
표현(CSS)
동작(Script)
Mobile Web Development Strategy웹표준준수
MobileOK
http://www.mobileok.kr
웹사이트 또는 웹 응용에 대하여 유무선 단말 종류에구애받지 않고 자유롭게 이용할 수 있도록 하는 국제웹 표준 기술의 총칭 기존 웹 표준을 그대로 수용하면서, 모바일에 적합한 저작
가이드 표준화 다양한 단말에 최적화된 서비스 제공을 위해서 단말정보
규격을 표준화 표준기반 모바일웹 확산을 위한 시험 및 인증 절차 표준화 표준 모바일웹 규격에 기반한 차세대 모바일 응용 규격 표준화
Care for Usability first
Adapting to devices
Adapting to devices Progressive Enhancement: content 중심
“성능이 가장 낮은 웹브라우저를 기준으로 모든 웹브라우저에서 똑같이보이도록 개발하지 않고, 모든 사용자에게 제공되어야 할 필수 정보는모두 제공하되 최신 웹브라우저를 쓰는 사람에게 더욱 좋은 화면효과와 추가 기능을 제공한다는 개념”
http://www.alistapart.com/articles/understandingprogressiveenhancement/
Adapting to devices
Responsive Web Design : design 중심
Fluid Layout, Adjustable screen resolution, resizable images
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://html.nhndesign.com/blog/textyle/43693
NHN 반응형 웹 디자인 소개
Adapting to devices
Targeting Device (safari, Chrome)
98%OF ALL U.S. MOBILE WEB TRAFFIC IS COMING FROM WEBKIT
Web Development Process 순차적 프로세스에 따른 병목 발생
기획, 디자인, HTML, 개발, 테스트
개발 완료 후 변경사항 발생시 이중 작업이 필요
HTML 변경시 개발도 수정 필요
코드 재사용성이 낮아지고 생산성 저하
Web Standardization Development 웹표준에 기반한 개발을 통해 구조와 디자인 분리
의미에 맞게 코딩: HTML은 정보, CSS는디자인(모양)
디바이스에 상관없이 브라우저를 통하여동일한 기능 제공 가능
개발과 디자인 병렬 진행으로 시간 단축
화면의 형태를 구조와 상관없이 CSS에서 제어
구조와디자인분리
개발과디자인병렬진행
http://html.nhndesign.com
Agile Process
Planning & Ideation
Shippable Product
Open SprintReview
Open SprintReview
Analyze user needs, priority,
development planDeploy Mobile
Web
Design WorkshopNavigation Flow
UI/Mockup pages
Test on simulator& Devices
CI, Unit, System test
Study, Code/Bug fix, Code Review,
Build
Iterative & incremental development cycle
Fast Feedback loop
“Incrementing” builds a bit at a time
1 2 3 4 5
Incrementing calls for a fully formed idea.
And, doing it on time requires dead accurate estimation.
“Iterating” builds a rough version, validates it, then slowly builds up quality
1 2 3
A more iterative allows you to move from vague idea to realization making course corrections as you go.
4 5
MO + Jile
A hybrid Agile process for mobile development
http://www.deviceanywhere.com/
Mobile Web Test toolsTest Web for level of mobile-friendliness
http://validator.w3.org/mobile/
Mobile App Testing on Real Devices
http://v.mobileok.kr/
Mobile Web Best Practice
http://www.w3c.or.kr/Translation/mwbp_flip_cards/
Mobile Web Development Formula for Success
Mobile web Development = Web Standards +
Mobile Usability + Content Adaptation +
Network Optimization + Validation & Test
Mobile Development Tips
정말 중요한 컨텐츠만 담을 것 작은 화면, 작은 메모리, 불편한 입력방식, 제한적 프로세서 파워,
느린 네트워크
웹표준 준수 다양한 디바이스 (OS, 브라우저)
테스트는 실장비에서 확인
팝업은 최소한으로 팝업은 새창과 같다!
통신은 최소한으로 네크워크 통신 = 돈, 페이지 로딩 고려
이미지를 최소화하고, 페이지는 20KB를 넘지 않게
HTTP Requests는 가능한 적게 (Ajax, CSS Sprite)
유연한 디자인 적용 기종마다 해상도, 브라우저, 폰트가 제각각
가로, 세로에 따라 달라지는 픽셀 크기
No (Flash, Sliverlight, ActiveX)
Mobile Lessons Learned
시장의 입맛에 맞는 특화 서비스를 찾아 사용자와 함께진화하고 발전해야 함
너무 많은 것을 제공하려고 하지 않도록 함
무료 앱(특히 게임, 엔터테인먼트)은 짧은 Lifespan을가짐
개인화 : 초기 관심 설정, 관심 있는 것만 몇 개만 제공
최대한 경로와 시간을 단축할 수 있도록 구성
디바이스 해상도에 최적화되는 킬러 앱 개발 (단순히기존 컨텐츠의 변환이 아님)
핵심 기능은 내부에서 개발
멋진 앱 아이콘은 사용자의 관심과 이용 증가로 이어짐
다양한 모바일 테스트 장비 확보: 기기마다 다른브라우저로 인한 수정 필요
과도한 Push는 스팸으로 거부감 발생
다양한 홍보 방안 필요 : 스마트폰 광고, 카페, 디렉토리서비스, word of mouth (review)
Reference Mobile Web Best Practices 1.0: http://www.w3.org/TR/2008/REC-
mobile-bp-20080729/Mobile Mobile Web Application Best Practices:
http://www.w3.org/TR/mwabp/ Global Authoring Practices for the mobile Web:
http://www.passani.it/gap/ Mobile Developers Guide: http://dev.mobi 모바일컨텐츠이야기: http://mobizen.pe.kr/ 구루블로그: http://xguru.net NHN 웹표준개발가이드: http://html.nhndesign.com/ Designing the Mobile User Experience:
http://www.littlespringsdesign.com/ Google App inventor Beta: http://appinventor.googlelabs.com/ 모바일 OK (Web 2.0포럼): http://www.mobileok.kr/web/index.php 한국형모바일 OK 시험및인증서비스: http://v.mobileok.kr/ 야후모바일블로그: http://ymobileblog.com/
Q & A
![[20대연구소] 주간뉴스클리핑(20140818 0824)](https://img.pdfslide.tips/doc/110x75/55904b641a28aba1718b4611/20-20140818-0824.jpg)
