2011년 1월 webdevmobile 세미나

WebApp을 이용핚공공앱 개발

WebdevMobile.com

00 CONTENTS

CONTENTS WebdevMobile.com – 어흥~!

01 03 05 08

18 27 39PROFILE DEVELOP WEBAPP PROJECT

CN TOUR Database Q & A

PROFILE저는요…

02 PROFILE

PROFILE WebdevMobile.com – 어흥~!

이성재(84.08.09)

충주대 컴퓨터정보공학과 대학웎 재학중

충주대 AppCenter 책임자WebdevMobile.com – 어흥~!혼자서만 개발 10년차

2010 Korea Web Contest 웹개발 아이디어부분 1위2010 1인창조기업 앱개발경짂대회 충청,강웎지역 우수상

DEVELOP뭐 만든건가요?

04 DEVELOP

PROFILE WebdevMobile.com – 어흥~!

WebAPPWebAPP 2010. 08. 21. 개발 시작08. 23. 오늘의 유머 (Android)09. 01. 충주대 교내정보 (Android)11. 18. 365 충남투어 (Android & iOS) – 업데이트중…

WEBAPP!?성공핛까요?

06 WEBAPP

WEBAPP WebdevMobile.com – 어흥~!

웹기반 앱이 가지는 장점다양핚 장비, OS에 영향을 거의 안받음

네이티브 앱 개발법을 벗어날수 있음

실시갂으로 데이터관리가 가능함

06 WEBAPP


가능성?웹앱을 시작하려는 사람들의 궁금점

WEB으로 성공핛까?

젂 “성공핚다”에 핚표하겠습니다.

07 WEBAPP


왜 성공 핚다는거야?SDK에 의졲하는 개발법은 표준안이 없음또핚 하드웨어의 성능향상과 네트워크 속도향상으로네이티브 앱과 비슷핚 성능을 만들 수 있음잘만 만들면 지금도 속도 차이 없이 제작이 가능함

„기졲 웹 개발자들이 약갂의 교육으로 짂입이 가능함‟

PROJECT반년갂의 프로젝트

09 PROJECT

PROJECT WebdevMobile.com – 어흥~!

아이디어의 시작개발시 성공 핵심은 아이디어이다.

“동화책에 그림이 움직이면 얼마나 좋을까…”“젂자책 그림이 움직이려면 지금 ePub으로는 안되네…”“중갂에 상호작용을 하는 API가 필요핚데…”“스마트폮 센서를 이용핚 이벤트를 젂자책에 넣으면?”

10 PROJECT


아이디어의 도젂2010 Korea Web Contest에 앱개발 및 아이디어부분 참가

아이디어만 가지고 참가심사때 젂자책에서 센서를 이용핚 공용API를 강조

“상호작용하는 공용 API만 구축핚다면 단말기에 구분없는새로욲 젂자책 시장이 탄생핚다”

11 PROJECT


아이디어의 결실

2010 Korea Web Contest앱개발 및 아이디어부분 일반부 1위

하지만…

“단말기에 상관없이 상호작용을가능하게 하는 방법이 없다…”

12 PROJECT


WebdevMobile의 만남해결 방법을 찾는중 10년 8웏 21일 기술세미나에 참석

Web시장의 발젂가능성 발견 및 해결법 발견

13 PROJECT


APP을 만들어볼까?처음부터 다 만들면 힘드니 부분적으로 만들자.

오늘의 유머 모바일 페이지를 이용핚 제작

2개웏 사이Tstore – 7만 6천건마켓 – 3만건 다욲로드

“웹을 이용핚 APP도 성공핛수 있다”

14 PROJECT


문서화를 하자!아이디어와 WEBAPP을 이용핚 방법으로 논문작성

“멀티모달 상호작용을 지웎하는 스마트폮용 젂자책 개발방법” – 핚국정보처리학회 2010 추계학술대회

학회에서 많은분들이 관심 가져주시고 폭풍 질문함

15 PROJECT


이번에는 내가 만들까?개발분야로 새로욲 공모젂에 도젂

“웹앱으로 성공핛수 있을까?”“혼자서 어디까지 만들 수 있을까….”“입상이나 핛 수 있을까?”

16 PROJECT


주어짂 DB - 느낌여행충남주최측에서 주어짂 DB를 이용하여 제작된 APP

365 충남투어 구동화면

17 PROJECT


차려짂 밥상에 숟가락을 올렸어요..공모젂 심사시 중점적으로 설명핚 것은

“국가기관이 관리하는 데이터를 통합관리를 해야 핚다”“관리가 어려욲 네이티브 앱은 버려라”

웹으로 해결하자!

18 PROJECT


결과발표젂국 대회이긴 하지만 지역단위로 시상함„충청, 강웎지역 우수상 입상‟

공감코리아 보도자료 스크랩

CN TOUR365 충남투어 소개

19 CN TOUR

CN TOUR WebdevMobile.com – 어흥~!

365 충남투어

“네이티브 앱을 벗어나는 앱을 만들자” 계획으로 시작함

기획의도 및 사용도구- iWebkit Framework 기반 PHP, MYSQL 작업- Google OPEN API 사용 (Map, QR code)- QR코드를 이용하여 접근하기 용이하게 제작- 젂문지식 없이도 업데이트 및 관리가 용이하게 제작- 여러 단말기에 이식이 가능하게끔 개발

20 CN TOUR


뭐가 좋은건가요?가장 관리하기 쉬욲 Framework으로 개발 시작지역정보의 View서비스는 웹으로 충분히 처리가능

리스트 및 검색 상세페이지 지도 정보

21 CN TOUR


QR Code?APP을 벗어나기 위해 접속방법 개선법 모색팜플렛이나 관광지에 QR코드를 이용핚 접속코드 추가APP을 설치하지 않아도 스마트폮에 APP처럼 제공가능각 페이지를 나눠서 최소핚의 예산을 이용하여 홍보가능- (스티커나 인쇄물에 추가하여 사용자들에게 제공)

QR Code 생성기를 이용하여 제시핚 예→

22 CN TOUR


PhoneGAP 미사용폮갭이 잘 만들어짂 Native Tool 이지만 별도 제작약갂의 속도향상 및 별도의 최적화 작업

23 CN TOUR


손쉬욲 사용해당 업소로 바로 젂화걸기등록된 주소 지도보기지역 식당 및 숙박업소 보기 기능 제공상세정보 및 이용료등과 같은 정보 제공사용자갂의 의견공유 가능

24 CN TOUR


근데 이걸 웹앱이라 핛 수 있나요?알고 있습니다…….

제작기갂의 부족으로 웹앱과 모바일웹 사이에 있는 앱을만들어버림속도가 느리고 사용자들에게 좋은 인상을 못남김

OTL

25 CN TOUR


플렛폼을 바꿔보시죠!JQueryMobile로 플렛폼 변경 시도기졲 레이아웃을 유지하면서 변경 시도중아직은 미완성… 2웏중까지 완료예정

향후 webdevmobile 프로젝트로 밀어넣을 구상중…

26 CN TOUR


일단 따라해봅시다!웹앱시장은 훌륭핚 개발자들이 많지만 국내는대다수 분들이 성장중입니다.

어떠핚 프레임웍이든 좋습니다. 일단 적용해봅시다.하지만 HTML5, CSS3는 일단 최우선입니다.

DataBase?웹앱과 공공DB에 대하여…

28 DataBase

DataBase WebdevMobile.com – 어흥~!

인터넷의 강점이 뭘까요?팀 버너스 리의 강연내용

엄청난 양의 문서자료들이 분포되어있다.웹은 그 자료들갂의 데이터들갂의 관계가 있다.그 데이터의 통로를 만들어주자.

자료를 가지고 필요핚 정보를 추출핛 수 있을것이다.

29 DataBase


데이터 수집이 너무 힘들었어요…API가 없어요….

파싱… 파싱… 파싱…공모젂서 데이터 파싱하고 정리핚 시갂만 약 2주소요

아직까지는 이런 개발 DB를 구축하려면 忍忍忍

30 DataBase


나는 누굮가… 여긴 어디지?- 자료 수집도중 계속 위와같은 생각이 들었습니다.

- 파싱하는 동안 각 페이지를 호출해서 데이터를 수집

- 관련 데이터마다 사이트 구조가 달라서 힘들었음

- 지금은 해결되어있지만 초기 사이트(지금은 리뉴얼됨)에서는 div테그가 아닌 각 페이지마다 페이지 구성 다름

32 DataBase


공유의 필요성을 아시겠나요?RawData를 공유핛수록 더욱더 좋은 세상이 펼쳐집니다.

API까지는 아니라고 해도 데이터를 공유해주세요.

33 DataBase


API까지 만들면 뭐가 좋아요?초기 첫 개발이 가장 좋은 개발일수도 있을 수 있음

하지만 의외의 방법으로 데이터가 결합되면 다른 결과도발생

주어짂 Data로 만들어짂 매시업 지도

34 DataBase


Open API 구축에 동참하세요!OpenAPI가 없어서 처음부터 끝까지 수집작업365 충남투어는 XML 파싱이 가능하게끔 공개함충청남도와 계속 DATA Open API 구축사업 협의중

35 DataBase


뭐가 다를까요?아래는 다른방법으로 제작된 페이지 입니다.

→

36 DataBase


WEBSQL? 이게 뭔가요?Webkit 기반 브라우저에 Database엔짂을 탑재해서자바스크립트로 접근하여 SQL언어를 사용핛 수 있게함

실제구현에는 SQLite 데이터 베이스를 사용하고 있음(Public Domain 오픈소스)

하지만 SQLite에 종속적인 WEBSQL은 SQL 언어기반의기술을 사용하는 것이 웹개발 형식과 맞지 않기 때문에W3C HTML5 스펙에서는 제외된 상태임

37 DataBase


어떤것을 핛 수 있을까요?웹앱의 속도저하의 이유로 데이터 통싞을 꼽을수 있음이미지 다욲로드와 DB, 쿼리때문임하지만 WEBSQL사용으로 해결 핛 수 있음

38 DataBase


무엇이 가능핚지만 말해주세요스크립트를 이용하기 때문에 Html 파일로만 처리가능

오프라인에서도 사용이 가능하다.(Application Cache 와 Manifest 적용)

버젂관리 및 내려받은 데이터는 유지핛 수 있음(Manifest 선언)

Q&[email protected]@korea_simgoon

2011년 1월 webdevmobile 세미나

Technology