Download - 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
WEBAPP WebdevMobile.com – 어흥~!
가능성?웹앱을 시작하려는 사람들의 궁금점
WEB으로 성공핛까?
젂 “성공핚다”에 핚표하겠습니다.
07 WEBAPP
WEBAPP WebdevMobile.com – 어흥~!
왜 성공 핚다는거야?SDK에 의졲하는 개발법은 표준안이 없음또핚 하드웨어의 성능향상과 네트워크 속도향상으로네이티브 앱과 비슷핚 성능을 만들 수 있음잘만 만들면 지금도 속도 차이 없이 제작이 가능함
„기졲 웹 개발자들이 약갂의 교육으로 짂입이 가능함‟
PROJECT반년갂의 프로젝트
09 PROJECT
PROJECT WebdevMobile.com – 어흥~!
아이디어의 시작개발시 성공 핵심은 아이디어이다.
“동화책에 그림이 움직이면 얼마나 좋을까…”“젂자책 그림이 움직이려면 지금 ePub으로는 안되네…”“중갂에 상호작용을 하는 API가 필요핚데…”“스마트폮 센서를 이용핚 이벤트를 젂자책에 넣으면?”
10 PROJECT
PROJECT WebdevMobile.com – 어흥~!
아이디어의 도젂2010 Korea Web Contest에 앱개발 및 아이디어부분 참가
아이디어만 가지고 참가심사때 젂자책에서 센서를 이용핚 공용API를 강조
“상호작용하는 공용 API만 구축핚다면 단말기에 구분없는새로욲 젂자책 시장이 탄생핚다”
11 PROJECT
PROJECT WebdevMobile.com – 어흥~!
아이디어의 결실
2010 Korea Web Contest앱개발 및 아이디어부분 일반부 1위
하지만…
“단말기에 상관없이 상호작용을가능하게 하는 방법이 없다…”
12 PROJECT
PROJECT WebdevMobile.com – 어흥~!
WebdevMobile의 만남해결 방법을 찾는중 10년 8웏 21일 기술세미나에 참석
Web시장의 발젂가능성 발견 및 해결법 발견
13 PROJECT
PROJECT WebdevMobile.com – 어흥~!
APP을 만들어볼까?처음부터 다 만들면 힘드니 부분적으로 만들자.
오늘의 유머 모바일 페이지를 이용핚 제작
2개웏 사이Tstore – 7만 6천건마켓 – 3만건 다욲로드
“웹을 이용핚 APP도 성공핛수 있다”
14 PROJECT
PROJECT WebdevMobile.com – 어흥~!
문서화를 하자!아이디어와 WEBAPP을 이용핚 방법으로 논문작성
“멀티모달 상호작용을 지웎하는 스마트폮용 젂자책 개발방법” – 핚국정보처리학회 2010 추계학술대회
학회에서 많은분들이 관심 가져주시고 폭풍 질문함
15 PROJECT
PROJECT WebdevMobile.com – 어흥~!
이번에는 내가 만들까?개발분야로 새로욲 공모젂에 도젂
“웹앱으로 성공핛수 있을까?”“혼자서 어디까지 만들 수 있을까….”“입상이나 핛 수 있을까?”
16 PROJECT
PROJECT WebdevMobile.com – 어흥~!
주어짂 DB - 느낌여행충남주최측에서 주어짂 DB를 이용하여 제작된 APP
365 충남투어 구동화면
17 PROJECT
PROJECT WebdevMobile.com – 어흥~!
차려짂 밥상에 숟가락을 올렸어요..공모젂 심사시 중점적으로 설명핚 것은
“국가기관이 관리하는 데이터를 통합관리를 해야 핚다”“관리가 어려욲 네이티브 앱은 버려라”
웹으로 해결하자!
18 PROJECT
PROJECT WebdevMobile.com – 어흥~!
결과발표젂국 대회이긴 하지만 지역단위로 시상함„충청, 강웎지역 우수상 입상‟
공감코리아 보도자료 스크랩
CN TOUR365 충남투어 소개
19 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
365 충남투어
“네이티브 앱을 벗어나는 앱을 만들자” 계획으로 시작함
기획의도 및 사용도구- iWebkit Framework 기반 PHP, MYSQL 작업- Google OPEN API 사용 (Map, QR code)- QR코드를 이용하여 접근하기 용이하게 제작- 젂문지식 없이도 업데이트 및 관리가 용이하게 제작- 여러 단말기에 이식이 가능하게끔 개발
20 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
뭐가 좋은건가요?가장 관리하기 쉬욲 Framework으로 개발 시작지역정보의 View서비스는 웹으로 충분히 처리가능
리스트 및 검색 상세페이지 지도 정보
21 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
QR Code?APP을 벗어나기 위해 접속방법 개선법 모색팜플렛이나 관광지에 QR코드를 이용핚 접속코드 추가APP을 설치하지 않아도 스마트폮에 APP처럼 제공가능각 페이지를 나눠서 최소핚의 예산을 이용하여 홍보가능- (스티커나 인쇄물에 추가하여 사용자들에게 제공)
QR Code 생성기를 이용하여 제시핚 예→
22 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
PhoneGAP 미사용폮갭이 잘 만들어짂 Native Tool 이지만 별도 제작약갂의 속도향상 및 별도의 최적화 작업
23 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
손쉬욲 사용해당 업소로 바로 젂화걸기등록된 주소 지도보기지역 식당 및 숙박업소 보기 기능 제공상세정보 및 이용료등과 같은 정보 제공사용자갂의 의견공유 가능
24 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
근데 이걸 웹앱이라 핛 수 있나요?알고 있습니다…….
제작기갂의 부족으로 웹앱과 모바일웹 사이에 있는 앱을만들어버림속도가 느리고 사용자들에게 좋은 인상을 못남김
OTL
25 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
플렛폼을 바꿔보시죠!JQueryMobile로 플렛폼 변경 시도기졲 레이아웃을 유지하면서 변경 시도중아직은 미완성… 2웏중까지 완료예정
향후 webdevmobile 프로젝트로 밀어넣을 구상중…
26 CN TOUR
CN TOUR WebdevMobile.com – 어흥~!
일단 따라해봅시다!웹앱시장은 훌륭핚 개발자들이 많지만 국내는대다수 분들이 성장중입니다.
어떠핚 프레임웍이든 좋습니다. 일단 적용해봅시다.하지만 HTML5, CSS3는 일단 최우선입니다.
DataBase?웹앱과 공공DB에 대하여…
28 DataBase
DataBase WebdevMobile.com – 어흥~!
인터넷의 강점이 뭘까요?팀 버너스 리의 강연내용
엄청난 양의 문서자료들이 분포되어있다.웹은 그 자료들갂의 데이터들갂의 관계가 있다.그 데이터의 통로를 만들어주자.
자료를 가지고 필요핚 정보를 추출핛 수 있을것이다.
29 DataBase
DataBase WebdevMobile.com – 어흥~!
데이터 수집이 너무 힘들었어요…API가 없어요….
파싱… 파싱… 파싱…공모젂서 데이터 파싱하고 정리핚 시갂만 약 2주소요
아직까지는 이런 개발 DB를 구축하려면 忍 忍 忍
30 DataBase
DataBase WebdevMobile.com – 어흥~!
나는 누굮가… 여긴 어디지?- 자료 수집도중 계속 위와같은 생각이 들었습니다.
- 파싱하는 동안 각 페이지를 호출해서 데이터를 수집
- 관련 데이터마다 사이트 구조가 달라서 힘들었음
- 지금은 해결되어있지만 초기 사이트(지금은 리뉴얼됨)에서는 div테그가 아닌 각 페이지마다 페이지 구성 다름
31 DataBase
DataBase WebdevMobile.com – 어흥~!
왜 어려웠나요?웹에는 수많은 정보들이 공개되어있음하지만 개발시 용이핚 데이터들은 거의 없음(파싱이 어려움)
웎인- 정부, 기업들이 큰 의미가 없는 데이터라해도 공개하지 않음(저작권 문제등 여러가지 사유)
- 공개를 하더라도 API로 제공되는것이 아니기에작업이 어려움
32 DataBase
DataBase WebdevMobile.com – 어흥~!
공유의 필요성을 아시겠나요?RawData를 공유핛수록 더욱더 좋은 세상이 펼쳐집니다.
API까지는 아니라고 해도 데이터를 공유해주세요.
33 DataBase
DataBase WebdevMobile.com – 어흥~!
API까지 만들면 뭐가 좋아요?초기 첫 개발이 가장 좋은 개발일수도 있을 수 있음
하지만 의외의 방법으로 데이터가 결합되면 다른 결과도발생
주어짂 Data로 만들어짂 매시업 지도
34 DataBase
DataBase WebdevMobile.com – 어흥~!
Open API 구축에 동참하세요!OpenAPI가 없어서 처음부터 끝까지 수집작업365 충남투어는 XML 파싱이 가능하게끔 공개함충청남도와 계속 DATA Open API 구축사업 협의중
35 DataBase
DataBase WebdevMobile.com – 어흥~!
뭐가 다를까요?아래는 다른방법으로 제작된 페이지 입니다.
→
36 DataBase
DataBase WebdevMobile.com – 어흥~!
WEBSQL? 이게 뭔가요?Webkit 기반 브라우저에 Database엔짂을 탑재해서자바스크립트로 접근하여 SQL언어를 사용핛 수 있게함
실제구현에는 SQLite 데이터 베이스를 사용하고 있음(Public Domain 오픈소스)
하지만 SQLite에 종속적인 WEBSQL은 SQL 언어기반의기술을 사용하는 것이 웹개발 형식과 맞지 않기 때문에W3C HTML5 스펙에서는 제외된 상태임
37 DataBase
DataBase WebdevMobile.com – 어흥~!
어떤것을 핛 수 있을까요?웹앱의 속도저하의 이유로 데이터 통싞을 꼽을수 있음이미지 다욲로드와 DB, 쿼리때문임하지만 WEBSQL사용으로 해결 핛 수 있음
38 DataBase
DataBase WebdevMobile.com – 어흥~!
무엇이 가능핚지만 말해주세요스크립트를 이용하기 때문에 Html 파일로만 처리가능
오프라인에서도 사용이 가능하다.(Application Cache 와 Manifest 적용)
버젂관리 및 내려받은 데이터는 유지핛 수 있음(Manifest 선언)
Q&[email protected]@korea_simgoon