앱드론을 활용한손쉬운 모바일 매쉬업 개발

2012.10.12 DevOn 2012장윤섭 (ychang76@etri.re.kr)

손쉬운 매쉬업 개발?

앱드론(AppDrone) 소개

모바일 매쉬업 개발 과정 소개

손쉬운 매쉬업 개발?

s 과거 경험

4

UPMashup (PC 환경의 웹 매쉬업 저작도구)

s 여전히 어려움1. 여전히 전문가(개발자)를 대상으로 함

2. 블록 생성 과정 어렵고 많은 시간과 비용 소요

3. 워크플로우 중심의 저작 방식 이해가 어려움

(vs. 결과화면(UI) 중심의 저작 방식)

5

* 블록 - Open API를 이용(호출/응답처리)하기 위해 시스템 내 생성되는 단위요소로서 매쉬업 저작에 이용됨(컴포넌트, 프로세스, ...)

앱드론(AppDrone)

s AppDrone

7

정찰 목적의 숨겨진 많은 기능들 탑재

s AppDrone

8

매쉬업을 쉽게 하기 위한 많은 기능들 탑재!

어떻게 쉽게?

s 전문가(개발자) vs. 일반 사용자둘 모두를 위한 하나의 도구?

전문가 vs. 일반 사용자 달리하여 도구 개발

사용자별 디바이스 고려도 중요

- 스마트폰 대다수 사용자의 수준?

- 일반 사용자가 매쉬업을 접할 대부분의 기회는PC 앞? 아니면 스마트폰?

10

X

s 전문가 vs. 일반 사용자

11

s 전문가 vs. 일반 사용자

12

PC 모바일(패드) 모바일(스마트폰)

전문가 일반 사용자 일반 사용자

전체 기능 UI 개편 기능(자유도) 축소

워크플로우 기반 저작 워크플로우 기반 저작템플릿 기반 저작 템플릿 기반 저작

블록 생성블록 이용 블록 이용 블록 이용

* 템플릿 기반 저작 방식 - 만들어진 매쉬업 웹앱으로부터 템플릿을 제공. 사용자는 이를 기반으로 블록을 교체, 설정을 변경하는 것만으로 웹앱 생성

s 블록 생성과 이용 분리이미 블록이 있을 경우 매쉬업 자체는 용이함사용자간 블록의 공유, 복제, 수정 가능하다면?

신규 블록 저작까지 일반 사용자 영역?

전문가와 전문가 도구의 역할?

시스템 내 블록들을 콘텐츠로 본다면?

용이성 vs. 자유도 trade-off

사전에 생성하여 제공함으로써 커버 가능한 범위?

13

s 블록 생성과 이용 분리

14

상위 10개 Open API가 전체 이용의 90% 이상을 차지

s 블록 생성과 이용 분리

15

s 결과화면(UI) 중심의 매쉬업 저작시작이 반? 매쉬업은 아이디어가 반!

일반 사용자가 매쉬업을 구상하고 이해하기에

워크플로우에서 시작 vs. 결과화면(UI)에서 시작?

16

s 결과화면(UI) 중심의 매쉬업 저작

17

워크플로우 중심 저작 방식(UPMashup)

s 결과화면(UI) 중심의 매쉬업 저작

18

결과화면(UI) 중심의 저작 방식(AppDrone)

현재 진행상황

s 현재 진행상황

20

1차년도 2차년도

전문가용 PC 기반 저작도구

일반 사용자용 모바일 기반 저작도구

구현 완료모바일 런타임 라이브러리

설계 마무리매쉬업 웹앱 저작 & 실행 가능

앱드론을 이용한모바일 매쉬업 웹앱 개발

s 앱드론 저작도구 메뉴

22

s 모바일 매쉬업 웹앱 개발 과정

23

(블록 저작) 레이아웃 저작 블록 배치 워크플로우 저작

블록 저작

s 블록 구성요소1. UI(HTML) : 디스플레이 블록의 경우 화면 UI

2. 메타데이터(XML) :

워크플로우 저작 시 블록 구성 표출, 매쉬업 코드 생성에 이용

3. 실행로직(Javascript) : 초기화, 오퍼레이션(기능)

25

s 블록 UI(HTML) 저작

jQuery Mobile 컨트롤 이용드래그 앤 드롭 후 속성 설정HTML 사용자 정의 코드 작성 가능결과화면 미리보기 가능

26

s 메타데이터 저작

27

워크플로우 저작 시 블록 구성(오퍼레이션, 파라미터 등) 표출웹앱 매쉬업 코드 생성 시 해당 블록 정보 참조블록과 웹앱 각각 메타데이터 스키마 정의

s 실행로직(Javascript) 작성

블록 초기화, 오퍼레이션, 속성, 사용자 데이터(클래스), ...

메타데이터 → 기반코드 생성 기능28

레이아웃 저작 및블록 배치

s 페이지 레이아웃 저작

페이지 생성과 설정(헤더, 푸터, 라벨, 버튼 등)

레이아웃 셀 그리드(블록 위치할 자리) 배치CSS 테마 및 웹앱 정보 설정jQuery Mobile 라이브러리 이용

30

s 블록 배치

레이아웃에 블록들 드래그 앤 드롭 배치결과화면 UI 미리 보여짐워크플로우 캔버스에 해당 블록들 자동 추가

31

매쉬업 워크플로우 저작

s 워크플로우 저작

33

블록들간 입출력 파라미터 연결블록 속성, Open API 키 설정조건분기 블록 설정

이벤트-리스너 할당 설정매쉬업 메타데이터 생성→ 매쉬업 코드 생성, 저장

s 웹앱 미리보기

34

모바일 매쉬업 예제

s 모바일 매쉬업 예제

36

Flickr + Google Maps

s 모바일 매쉬업 예제

37

Google Geocoding + 조건분기블록+ Google Maps + 다음지도

s 모바일 매쉬업 예제

38

스마트폰 카메라, 갤러리 기능 등 매쉬업

s 모바일 매쉬업 예제

39

All That Culture(문화체육관광부 공연전시정보조회서비스, 티켓할인조회서비스, 다음지도 Open API)

s 모바일 매쉬업 예제

40

충남 스마트 여행(충남 스마트 문화관광 DB Open API, Google Maps Open API)

향후 계획

s 일반 사용자용 패드 기반 저작도구

기능은 전문가용 PC 기반 저작도구와 유사디바이스 제약(인터렉션) 고려하여 UI 변경블록 저작은 포함하지 않음

42

s 일반 사용자용 스마트폰 기반 저작도구

템플릿 기반 매쉬업 저작 방식 제공템플릿 제공 → 블록 교체 → 속성 변경블록 교체 시 블록 추천 기능 제공

- 파라미터 타입, 이름, 블록 종류 등 기반자유도 제한 vs. 개발지식 없이 손쉽운 저작 가능

43

Q & A