[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료

Process Touch(모바읷 앱)
개발을 위한 최적의 기술

유엔짂 오픈소스 프로젝트
2010년 11월 03일
김보상 책임 커미터
bskim@uengine.org

Contents

1 How to develop a mobile app?

2 Mobile web standard

3 Hybrid development toolkit

4 Conclusion

5 Process Touch

How to develop a mobile app?
모바일 앱 개발에 대한 고민

or

모바일OS 별 점유율 추이

※ 출처: http://metrics.admob.com/2010/06

플랫폼 별 개발특성 비교

모바일 웹은 한번 개발로 여러 플랫폼에서 사용 가능!

※ 출처: 모비젞 허광남 팀장

스마트폰의 공통점

Palm Pre WEBOS

모바일 웹 브라우저는 대부분이 Webkit을 지원

※WebKit : 웹 브라우저를 만드는 기반을 제공하는 오픈소스 응용프로그램 프레임워크

WEB, 그리고 남은 숙제

1. 플랫폼에 독립 된 앱를 만들려면 Webkit 기반의 웹 앱으로 개발.

2. 웹 앱에서 다양한 모바일 디바이스들의 제어 방법?

3. 웹 페이지 로딩 속도 개선 방안?

Mobile web standard
Adobe-flash support for iPhone

Mobile web standard
Adobe-flash support for iPhone

Adobe Flash CS 5에 포함된 iPhone 용 앱 패키지를 통하여 포팅된 아이폰 앱
그러나 애플은 이렇게 개발된 앱을 앱스토어에서 승읶하지 않도록 정책을 바꾸었다.

지난 4월 20일, Adobe on Tuesday evening said it is ceasing investment in a software tool that enables Flash develop
ers to port software into native iPhone and iPad apps, according to Mike Chambers, Adobe’s principal product manag
er for Flash developer relations. --wired.com

애플의 변 - “Someone has it backwards-- it is HTML5, CSS, JavaScript and H.264 (all supported by the iPhone and iPa
d) that are open and standard, while Adobe’s Flash is closed and proprietary, an Apple representative said in a statem
ent provided to CNET.

Mobile web standard
모바일 웹 표준 관계도

Mobile web standard
W3C의 HTML5 배경

※HTML5 : 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로 모든 브라우저 벤더가 참여하고 있는 산업 표준.
※출처 : 실젂 HTML5 가이드

Mobile web standard
W3C의 HTML5 특징

확장 된 태그

편리한 폼 기능

※출처 : 실젂 HTML5 가이드 리치 웹 미디어

Mobile web standard
W3C의 HTML5와 모바일

모바일 네트워크 특성
- 네트워크에 항시 연결되어있지 않은 WIFI 젂용기기( iPod Touch , iPad ) 들도 있다.
- 네트워크 트래픽을 최소화 하는 것이 아주 중요하다.

오프라읶 기능과 로컬 DB의 지원은 웹서버
와 독립 된 web app이 가능해짐.

<일반 웹 아키텍처>

<모바일 웹 아키텍처>

※출처 : 실젂 HTML5 가이드

Mobile web standard
W3C의 HTML5와 모바일

1. 모바일을 위해서 HTML5에서 특화 된 기능
- Offline 지원 : LocalStorage , Web Database , App Cache
- 미디어 처리 : Video , Audio , Canvas
- 입력 지원 : Advanced Forms
- 위치 정보 : GeoLocation ( 연계표준 )

2. HTML5 의 스펙 중 아직 주요 브라우저에서 지원되지 않는 기능.
- WebSocket
- FileReader
- IndexedDB
- Web Workers

Mobile web standard
W3C의 Device APIs(DAP)

W3C DAP은 HTML5와 함께 모바일 단말에서 단일한 방식으로 모바일 앱의 다양한 표현과
기기 접근을 가능하게 할 가장 중요한 두 가지 표준
(표준화가 아주 기초 단계)

Mobile web standard
OMPT의 BONDI

BONDI initiative 는 2008년 OMTP 멤버쉽에 의하여 탄생했으며 웹앱과 플랫폼 갂 인터페
이스를 정의하며 W3C의 DAP와 통합 될 계획.
(별도로 웹 플랫폼을 설치해야 웹 어플리케이션이 구동이 가능)

Mobile web standard
모바일 웹 표준의 고찰

1. 웹 표준과 모바일 지원기능 사용을 위해서는 HTML5을 적용해야 함.

2. 디바이스 표준에 의한 단말기 통합 접근(Top-down 방식)은 시기상조.

Hybrid development toolkit
Phonegap의 소개

스마트폰 OS 브라우저들의 Interface를 이용하여 단말의 기능들을 HTML+Javascript만으
로 이용할 수 있도록 해주는 하이브리드앱(Web+App) 오픈소스 프레임워크이다.

Phonegap의 로드맵

Phonegap의 웹페이지 실행

‘WWW’ 폴더 내에 웹 소스를 모두 넣고 어플리케이션을 만들기 때문에 실행 시에 웹이
단말기 로컬에서 웹페이지가 실행된다.

Android(eclipse) iPhone(Xcode)

Phonegap의 구조

• Phonegap android
PhoneGap Native app ver.
• Phonegap iphone ver.
• Phonegap winMo ver.
Device
Contact
Profile
phonegap
Native
File LBS
WebKit System (???)
① URL change event방식
Browser (iPhone & WinMo)
gap://beep(5)
Accelerator

② Javascript & JAVA obj mapping
Application URL (Android)
written in change
event • iPhone
PhoneGap ③ • Android
Device • WinMo
JS API
•
•

①
• Performance with AJAX - UI & Data Separation JSON,XML
MobileWebApp. • Vector Graphic with SVG – raphael + mobile ok Guidelines
(JS) • UX – native like ②

Phonegap의 동작

PhoneGap <iphone>
<Command>
Web page Phonegap
UIWebkit Sound Device …..
(html) Delegate

beep 버튺클릭

beep(2);
Load
WithRequest

execute()

Rhomobile의 소개

웹 앱을 기반으로 Webkit 브라우저에 내장시켜 보여주는 방식이 아닌 실제 각 플랫폼
별 Native App을 생성시켜주는 부분에서 Phonegap과 큰 차이가 있다.
(루비와 루비젬스에 익숙해야 사용가능)

모바일 앱 개발 방법 비교

장점 단점

Native - 각 플랫폼에서 제공하는 모든 기능을 -다른 플랫폼에서 사용 할 수 없다.
홗용할 수 있다. -개발언어에 제약을 받는다.
- 화면 랜더링 속도가 빠르다.

Web - 개발이 용이하다. - 모든 정보를 웹 서버에서 다운로드
- 모든 플랫폼에서 사용 가능. 를 받아야 한다.(속도, 네트워크)
-디바이스 제어가 힘들다.

Hybrid - 웹 개발방식으로 개발하고 모바일 디바 - 초기 개발홖경 구축 비용.
(native +web) 이스 제어 가능.
- 모든 플랫폼에서 사용 가능.

웹 앱의 디바이스 제어와 로딩 속도

웹 앱에서 다양한 모바일 디바이스들의 제어 방법?
1. Webkit 기반의 PhoneGap으로 단말기 통합 접근(Bottom-up)이 해결법.

웹 페이지 로딩 속도 개선 방안?
1. PhoneGap은 웹페이지를 로컬에서 실행하기 때문에 화면 로딩 시 일반 웹처럼 HTML 소
스를 네트워크를 통하여 가져올 필요가 없다.
2. Ajax를 통하여 UI와 Data를 분리한다.
3. 가볍고 사용하기 편한 Json을 사용한다.

모바일 서버
네트워크
Ajax Json type의 data

PhoneGap

Conclusion
모바일 웹 앱 개발을 위한 기술정리

1. Webkit : 대부분의 단말기 웹브라우저에서 지원하는 플랫폼.

2. HTML5 : 웹 표준, 모바일 지원 기능과 리치 웹 미디어 .

3. PhoneGap : Webkit 기반에 다양한 단말기 디바이스 제어 가능하며 웹페
이지 로컬 실행.

4. Ajax : 웹 페이지 로딩 속도를 위한 UI와 data 갂 분리.

5. Json : Ajax의 data의 경량화

Conclusion
결롞

플랫폼에 독립적읶 모바읷 앱을 개발하기 최적의 아키텍처

Ajax Json

HTML5

Webkit

PhoneGap

iPhone Android WM
…
Device Device Device

Process Touch
Introduce

워크리스트 확인 프로세스 모니터
및 업무 노티 기능 링 기능
Process 모바읷 기반 회의관리 및
Touch BPMS의 프로세스와 연계

• 프로세스 시작 시점의 연결
회의 시 가장 홗용성이 높은 모바일 단말(아이폰,안드
로이드폰 등)을 홗용하여 LBS와 카메라, 녹음기를 이용
하여 참석자 및 회의내용을 기록하여 프로세스의 시작
을 암시하는 회의 내용을 젂자화함

회의시갂 회의 녹취 및 사짂 이슈 발행(프로세 • 프로세스의 Traceability를 강화
(타임아웃)설정 첨부, 노트 기능 스 개시) 기능 회의 후 회의내용 정리 및 배포를 짂행하고, 회의 내용
에 따른 후속 업무와의 연계를 BPM 시스템으로 지원
하여 Notification 과 업무확인 및 모니터링의 즉시성
을 제공하여 후속업무의 Traceability를 높임

• 오프라읶 업무와의 연계성 강화
모바일 홖경 단독으로 처리하기 보다는 기존 시스템과
의 연계를 통하여 다양한 시너지를 발행할 수 있으며
연계방안은 프로세스 기반의 시스템 홖경이 효율적으
로 적용 가능함

Page  32

Process Touch
Scenario

online

프로세스의 시작 현장직
(이슈의 발생) (상황읶지)
Off-line

팀장/의사결정자 현장 담당자
(회의실) Edited from Oracle Source

Process Touch
Platform and Framework

Nice mobile web apps

웹 언어를 통한 네트워크 성능
렌더링 속도 리치한 표현
디바이스접근 최적화

JQtouch-like
PhoneGap Json Ajax
framework

Webkit JQuery HTML5

Process Touch
Functions

Nice mobile web app

Process Touch

회의 관리 BPM Client

참석자 회의자료 회의시갂 설정 및 프로세스 인스턴스 워크아이템
음성 녹취 네비게이터
자동인식 첨부 완료시갂 알람 시작 리스트 핸들러

PhoneGap JQuery Ajax

Process Touch
Community

http://phonegap.pe.kr

[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to [uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료 (20)

More from Hannah Kim (10)

[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료