1. 앱드론을 활용한
손쉬운 모바일 매쉬업 개발
2012.10.12 DevOn 2012
장윤섭 (ychang76@etri.re.kr)

2. 손쉬운 매쉬업 개발?
앱드론(AppDrone) 소개
모바일 매쉬업 개발 과정 소개

3. 손쉬운 매쉬업 개발?

4. s
과거 경험
UPMashup (PC 환경의 웹 매쉬업 저작도구)
4

5. s
여전히 어려움
1. 여전히 전문가(개발자)를 대상으로 함
2. 블록 생성 과정 어렵고 많은 시간과 비용 소요
3. 워크플로우 중심의 저작 방식 이해가 어려움
(vs. 결과화면(UI) 중심의 저작 방식)
* 블록 - Open API를 이용(호출/응답처리)하기 위해 시스템 내 생성되는 단위요소로서
매쉬업 저작에 이용됨(컴포넌트, 프로세스, ...)
5

6. 앱드론(AppDrone)

7. s
AppDrone
정찰 목적의 숨겨진 많은 기능들 탑재
7

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

9. 어떻게 쉽게?

10. s
전문가(개발자) vs. 일반 사용자
둘 모두를 위한 하나의 도구? X
전문가 vs. 일반 사용자 달리하여 도구 개발
사용자별 디바이스 고려도 중요
- 스마트폰 대다수 사용자의 수준?
- 일반 사용자가 매쉬업을 접할 대부분의 기회는
PC 앞? 아니면 스마트폰?
10

11. s
전문가 vs. 일반 사용자
11

12. s
전문가 vs. 일반 사용자
PC 모바일(패드) 모바일(스마트폰)
전문가 일반 사용자 일반 사용자
전체 기능 UI 개편 기능(자유도) 축소
워크플로우 기반 저작
워크플로우 기반 저작 템플릿 기반 저작
템플릿 기반 저작
블록 생성
블록 이용 블록 이용
블록 이용
* 템플릿 기반 저작 방식 - 만들어진 매쉬업 웹앱으로부터 템플릿을 제공. 사용자는 이
를 기반으로 블록을 교체, 설정을 변경하는 것만으로 웹앱 생성
12

13. s
블록 생성과 이용 분리
이미 블록이 있을 경우 매쉬업 자체는 용이함
사용자간 블록의 공유, 복제, 수정 가능하다면?
신규 블록 저작까지 일반 사용자 영역?
전문가와 전문가 도구의 역할?
시스템 내 블록들을 콘텐츠로 본다면?
용이성 vs. 자유도 trade-off
사전에 생성하여 제공함으로써 커버 가능한 범위?
13

14. s
블록 생성과 이용 분리
상위 10개 Open API가 전체 이용의 90% 이상을 차지
14

15. s
블록 생성과 이용 분리
15

16. s
결과화면(UI) 중심의 매쉬업 저작
시작이 반? 매쉬업은 아이디어가 반!
일반 사용자가 매쉬업을 구상하고 이해하기에
워크플로우에서 시작 vs. 결과화면(UI)에서 시작?
16

17. s
결과화면(UI) 중심의 매쉬업 저작
워크플로우 중심 저작 방식(UPMashup)
17

18. s
결과화면(UI) 중심의 매쉬업 저작
결과화면(UI) 중심의 저작 방식(AppDrone)
18

19. 현재 진행상황

20. s
현재 진행상황
1차년도 2차년도
전문가용 PC 기반 저작도구
일반 사용자용 모바일 기반 저작도구
모바일 런타임 라이브러리
구현 완료 설계 마무리
매쉬업 웹앱 저작 & 실행 가능
20

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

22. s
앱드론 저작도구 메뉴
22

23. s
모바일 매쉬업 웹앱 개발 과정
(블록 저작) 레이아웃 저작 블록 배치 워크플로우 저작
23

24. 블록 저작

25. s
블록 구성요소
1. UI(HTML) : 디스플레이 블록의 경우 화면 UI
2. 메타데이터(XML) :
워크플로우 저작 시 블록 구성 표출, 매쉬업 코드 생성에 이용
3. 실행로직(Javascript) : 초기화, 오퍼레이션(기능)
25

26. s
블록 UI(HTML) 저작
jQuery Mobile 컨트롤 이용
드래그 앤 드롭 후 속성 설정
HTML 사용자 정의 코드 작성 가능
결과화면 미리보기 가능
26

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

28. s
실행로직(Javascript) 작성
블록 초기화, 오퍼레이션, 속성, 사용자 데이터(클래스), ...
메타데이터 → 기반코드 생성 기능
28

29. 레이아웃 저작 및
블록 배치

30. s
페이지 레이아웃 저작
페이지 생성과 설정(헤더, 푸터, 라벨, 버튼 등)
레이아웃 셀 그리드(블록 위치할 자리) 배치
CSS 테마 및 웹앱 정보 설정
jQuery Mobile 라이브러리 이용
30

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

32. 매쉬업 워크플로우 저작

33. s
워크플로우 저작
블록들간 입출력 파라미터 연결 이벤트-리스너 할당 설정
블록 속성, Open API 키 설정 매쉬업 메타데이터 생성
→ 매쉬업 코드 생성, 저장
조건분기 블록 설정
33

34. s
웹앱 미리보기
34

35. 모바일 매쉬업 예제

36. s
모바일 매쉬업 예제
Flickr + Google Maps
36

37. s
모바일 매쉬업 예제
Google Geocoding + 조건분기블록
+ Google Maps + 다음지도
37

38. s
모바일 매쉬업 예제
스마트폰 카메라, 갤러리 기능 등 매쉬업
38

39. s
모바일 매쉬업 예제
All That Culture
(문화체육관광부 공연전시정보조회서비스, 티켓할인조회서비스, 다음지도 Open API)
39

40. s
모바일 매쉬업 예제
충남 스마트 여행
(충남 스마트 문화관광 DB Open API, Google Maps Open API)
40

41. 향후 계획

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

43. s
일반 사용자용 스마트폰 기반 저작도구
템플릿 기반 매쉬업 저작 방식 제공
템플릿 제공 → 블록 교체 → 속성 변경
블록 교체 시 블록 추천 기능 제공
- 파라미터 타입, 이름, 블록 종류 등 기반
자유도 제한 vs. 개발지식 없이 손쉽운 저작 가능
43

44. Q &A