0
앱드론을 활용한손쉬운 모바일 매쉬업 개발    2012.10.12 DevOn 2012   장윤섭 (ychang76@etri.re.kr)
손쉬운 매쉬업 개발?앱드론(AppDrone) 소개모바일 매쉬업 개발 과정 소개
손쉬운 매쉬업 개발?
s            과거 경험    UPMashup (PC 환경의 웹 매쉬업 저작도구)                                   4
s             여전히 어려움1. 여전히 전문가(개발자)를 대상으로 함2. 블록 생성 과정 어렵고 많은 시간과 비용 소요3. 워크플로우 중심의 저작 방식 이해가 어려움    (vs. 결과화면(UI) 중심의 저작...
앱드론(AppDrone)
s        AppDrone    정찰 목적의 숨겨진 많은 기능들 탑재                           7
s          AppDrone    매쉬업을 쉽게 하기 위한 많은 기능들 탑재!                               8
어떻게 쉽게?
s        전문가(개발자) vs. 일반 사용자    둘 모두를 위한 하나의 도구?      X    전문가 vs. 일반 사용자 달리하여 도구 개발    사용자별 디바이스 고려도 중요    -   스마트폰 대다수 사...
s    전문가 vs. 일반 사용자                     11
s             전문가 vs. 일반 사용자        PC          모바일(패드)          모바일(스마트폰)       전문가           일반 사용자           일반 사용자    ...
s       블록 생성과 이용 분리    이미 블록이 있을 경우 매쉬업 자체는 용이함    사용자간 블록의 공유, 복제, 수정 가능하다면?    신규 블록 저작까지 일반 사용자 영역?    전문가와 전문가 도구의 역할...
s      블록 생성과 이용 분리    상위 10개 Open API가 전체 이용의 90% 이상을 차지                                         14
s    블록 생성과 이용 분리                   15
s    결과화면(UI) 중심의 매쉬업 저작    시작이 반? 매쉬업은 아이디어가 반!    일반 사용자가 매쉬업을 구상하고 이해하기에    워크플로우에서 시작 vs. 결과화면(UI)에서 시작?              ...
s    결과화면(UI) 중심의 매쉬업 저작      워크플로우 중심 저작 방식(UPMashup)                                 17
s    결과화면(UI) 중심의 매쉬업 저작     결과화면(UI) 중심의 저작 방식(AppDrone)                                    18
현재 진행상황
s                현재 진행상황        1차년도                   2차년도    전문가용 PC 기반 저작도구                         일반 사용자용 모바일 기반 저작도구...
앱드론을 이용한모바일 매쉬업 웹앱 개발
s    앱드론 저작도구 메뉴                  22
s      모바일 매쉬업 웹앱 개발 과정    (블록 저작)   레이아웃 저작   블록 배치   워크플로우 저작                                           23
블록 저작
s           블록 구성요소1. UI(HTML) : 디스플레이 블록의 경우 화면 UI2. 메타데이터(XML) :    워크플로우 저작 시 블록 구성 표출, 매쉬업 코드 생성에 이용3. 실행로직(Javascript...
s         블록 UI(HTML) 저작    jQuery Mobile 컨트롤 이용    드래그 앤 드롭 후 속성 설정    HTML 사용자 정의 코드 작성 가능    결과화면 미리보기 가능              ...
s         메타데이터 저작    워크플로우 저작 시 블록 구성(오퍼레이션, 파라미터 등) 표출    웹앱 매쉬업 코드 생성 시 해당 블록 정보 참조    블록과 웹앱 각각 메타데이터 스키마 정의          ...
s     실행로직(Javascript) 작성    블록 초기화, 오퍼레이션, 속성, 사용자 데이터(클래스), ...    메타데이터 → 기반코드 생성 기능                                   ...
레이아웃 저작 및  블록 배치
s        페이지 레이아웃 저작    페이지 생성과 설정(헤더, 푸터, 라벨, 버튼 등)    레이아웃 셀 그리드(블록 위치할 자리) 배치    CSS 테마 및 웹앱 정보 설정    jQuery Mobile 라이브...
s                블록 배치    레이아웃에 블록들 드래그 앤 드롭 배치    결과화면 UI 미리 보여짐    워크플로우 캔버스에 해당 블록들 자동 추가                              31
매쉬업 워크플로우 저작
s            워크플로우 저작    블록들간 입출력 파라미터 연결       이벤트-리스너 할당 설정    블록 속성, Open API 키 설정   매쉬업 메타데이터 생성                      ...
s    웹앱 미리보기              34
모바일 매쉬업 예제
s    모바일 매쉬업 예제      Flickr + Google Maps                             36
s    모바일 매쉬업 예제    Google Geocoding + 조건분기블록       + Google Maps + 다음지도                                37
s    모바일 매쉬업 예제    스마트폰 카메라, 갤러리 기능 등 매쉬업                             38
s           모바일 매쉬업 예제                    All That Culture    (문화체육관광부 공연전시정보조회서비스, 티켓할인조회서비스, 다음지도 Open API)             ...
s    모바일 매쉬업 예제               충남 스마트 여행    (충남 스마트 문화관광 DB Open API, Google Maps Open API)                                ...
향후 계획
s    일반 사용자용 패드 기반 저작도구    기능은 전문가용 PC 기반 저작도구와 유사    디바이스 제약(인터렉션) 고려하여 UI 변경    블록 저작은 포함하지 않음                          ...
s    일반 사용자용 스마트폰 기반 저작도구    템플릿 기반 매쉬업 저작 방식 제공    템플릿 제공 → 블록 교체 → 속성 변경    블록 교체 시 블록 추천 기능 제공    - 파라미터 타입, 이름, 블록 종류 ...
Q &A
Upcoming SlideShare
Loading in...5
×

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

1,610

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,610
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012"

  1. 1. 앱드론을 활용한손쉬운 모바일 매쉬업 개발 2012.10.12 DevOn 2012 장윤섭 (ychang76@etri.re.kr)
  2. 2. 손쉬운 매쉬업 개발?앱드론(AppDrone) 소개모바일 매쉬업 개발 과정 소개
  3. 3. 손쉬운 매쉬업 개발?
  4. 4. s 과거 경험 UPMashup (PC 환경의 웹 매쉬업 저작도구) 4
  5. 5. s 여전히 어려움1. 여전히 전문가(개발자)를 대상으로 함2. 블록 생성 과정 어렵고 많은 시간과 비용 소요3. 워크플로우 중심의 저작 방식 이해가 어려움 (vs. 결과화면(UI) 중심의 저작 방식)* 블록 - Open API를 이용(호출/응답처리)하기 위해 시스템 내 생성되는 단위요소로서 매쉬업 저작에 이용됨(컴포넌트, 프로세스, ...) 5
  6. 6. 앱드론(AppDrone)
  7. 7. s AppDrone 정찰 목적의 숨겨진 많은 기능들 탑재 7
  8. 8. s AppDrone 매쉬업을 쉽게 하기 위한 많은 기능들 탑재! 8
  9. 9. 어떻게 쉽게?
  10. 10. s 전문가(개발자) vs. 일반 사용자 둘 모두를 위한 하나의 도구? X 전문가 vs. 일반 사용자 달리하여 도구 개발 사용자별 디바이스 고려도 중요 - 스마트폰 대다수 사용자의 수준? - 일반 사용자가 매쉬업을 접할 대부분의 기회는 PC 앞? 아니면 스마트폰? 10
  11. 11. s 전문가 vs. 일반 사용자 11
  12. 12. s 전문가 vs. 일반 사용자 PC 모바일(패드) 모바일(스마트폰) 전문가 일반 사용자 일반 사용자 전체 기능 UI 개편 기능(자유도) 축소 워크플로우 기반 저작 워크플로우 기반 저작 템플릿 기반 저작 템플릿 기반 저작 블록 생성 블록 이용 블록 이용 블록 이용* 템플릿 기반 저작 방식 - 만들어진 매쉬업 웹앱으로부터 템플릿을 제공. 사용자는 이를 기반으로 블록을 교체, 설정을 변경하는 것만으로 웹앱 생성 12
  13. 13. s 블록 생성과 이용 분리 이미 블록이 있을 경우 매쉬업 자체는 용이함 사용자간 블록의 공유, 복제, 수정 가능하다면? 신규 블록 저작까지 일반 사용자 영역? 전문가와 전문가 도구의 역할? 시스템 내 블록들을 콘텐츠로 본다면? 용이성 vs. 자유도 trade-off 사전에 생성하여 제공함으로써 커버 가능한 범위? 13
  14. 14. s 블록 생성과 이용 분리 상위 10개 Open API가 전체 이용의 90% 이상을 차지 14
  15. 15. s 블록 생성과 이용 분리 15
  16. 16. s 결과화면(UI) 중심의 매쉬업 저작 시작이 반? 매쉬업은 아이디어가 반! 일반 사용자가 매쉬업을 구상하고 이해하기에 워크플로우에서 시작 vs. 결과화면(UI)에서 시작? 16
  17. 17. s 결과화면(UI) 중심의 매쉬업 저작 워크플로우 중심 저작 방식(UPMashup) 17
  18. 18. s 결과화면(UI) 중심의 매쉬업 저작 결과화면(UI) 중심의 저작 방식(AppDrone) 18
  19. 19. 현재 진행상황
  20. 20. s 현재 진행상황 1차년도 2차년도 전문가용 PC 기반 저작도구 일반 사용자용 모바일 기반 저작도구 모바일 런타임 라이브러리 구현 완료 설계 마무리 매쉬업 웹앱 저작 & 실행 가능 20
  21. 21. 앱드론을 이용한모바일 매쉬업 웹앱 개발
  22. 22. s 앱드론 저작도구 메뉴 22
  23. 23. s 모바일 매쉬업 웹앱 개발 과정 (블록 저작) 레이아웃 저작 블록 배치 워크플로우 저작 23
  24. 24. 블록 저작
  25. 25. s 블록 구성요소1. UI(HTML) : 디스플레이 블록의 경우 화면 UI2. 메타데이터(XML) : 워크플로우 저작 시 블록 구성 표출, 매쉬업 코드 생성에 이용3. 실행로직(Javascript) : 초기화, 오퍼레이션(기능) 25
  26. 26. s 블록 UI(HTML) 저작 jQuery Mobile 컨트롤 이용 드래그 앤 드롭 후 속성 설정 HTML 사용자 정의 코드 작성 가능 결과화면 미리보기 가능 26
  27. 27. s 메타데이터 저작 워크플로우 저작 시 블록 구성(오퍼레이션, 파라미터 등) 표출 웹앱 매쉬업 코드 생성 시 해당 블록 정보 참조 블록과 웹앱 각각 메타데이터 스키마 정의 27
  28. 28. s 실행로직(Javascript) 작성 블록 초기화, 오퍼레이션, 속성, 사용자 데이터(클래스), ... 메타데이터 → 기반코드 생성 기능 28
  29. 29. 레이아웃 저작 및 블록 배치
  30. 30. s 페이지 레이아웃 저작 페이지 생성과 설정(헤더, 푸터, 라벨, 버튼 등) 레이아웃 셀 그리드(블록 위치할 자리) 배치 CSS 테마 및 웹앱 정보 설정 jQuery Mobile 라이브러리 이용 30
  31. 31. s 블록 배치 레이아웃에 블록들 드래그 앤 드롭 배치 결과화면 UI 미리 보여짐 워크플로우 캔버스에 해당 블록들 자동 추가 31
  32. 32. 매쉬업 워크플로우 저작
  33. 33. s 워크플로우 저작 블록들간 입출력 파라미터 연결 이벤트-리스너 할당 설정 블록 속성, Open API 키 설정 매쉬업 메타데이터 생성 → 매쉬업 코드 생성, 저장 조건분기 블록 설정 33
  34. 34. s 웹앱 미리보기 34
  35. 35. 모바일 매쉬업 예제
  36. 36. s 모바일 매쉬업 예제 Flickr + Google Maps 36
  37. 37. s 모바일 매쉬업 예제 Google Geocoding + 조건분기블록 + Google Maps + 다음지도 37
  38. 38. s 모바일 매쉬업 예제 스마트폰 카메라, 갤러리 기능 등 매쉬업 38
  39. 39. s 모바일 매쉬업 예제 All That Culture (문화체육관광부 공연전시정보조회서비스, 티켓할인조회서비스, 다음지도 Open API) 39
  40. 40. s 모바일 매쉬업 예제 충남 스마트 여행 (충남 스마트 문화관광 DB Open API, Google Maps Open API) 40
  41. 41. 향후 계획
  42. 42. s 일반 사용자용 패드 기반 저작도구 기능은 전문가용 PC 기반 저작도구와 유사 디바이스 제약(인터렉션) 고려하여 UI 변경 블록 저작은 포함하지 않음 42
  43. 43. s 일반 사용자용 스마트폰 기반 저작도구 템플릿 기반 매쉬업 저작 방식 제공 템플릿 제공 → 블록 교체 → 속성 변경 블록 교체 시 블록 추천 기능 제공 - 파라미터 타입, 이름, 블록 종류 등 기반 자유도 제한 vs. 개발지식 없이 손쉽운 저작 가능 43
  44. 44. Q &A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×