SlideShare a Scribd company logo
1 of 43
Download to read offline
WebApp을 이용핚
공공앱 개발
    WebdevMobile.com
00 CONTENTS

      01 03 05 08
       PROFILE   DEVELOP    WEBAPP   PROJECT




      18 27 39
       CN TOUR   Database   Q&A




CONTENTS                             WebdevMobile.com – 어흥~!
PROFILE
     저는요…
02 PROFILE
이성재(84.08.09)
충주대 컴퓨터정보공학과 대학웎 재학중


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

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


 PROFILE                   WebdevMobile.com – 어흥~!
DEVELOP
    뭐 만든건가요?
04 DEVELOP
WebAPP
WebAPP 2010. 08. 21. 개발 시작
08. 23. 오늘의 유머 (Android)
09. 01. 충주대 교내정보 (Android)
11. 18. 365 충남투어 (Android & iOS) – 업데이트중…




PROFILE                        WebdevMobile.com – 어흥~!
WEBAPP!?
    성공핛까요?
06 WEBAPP
웹기반 앱이 가지는 장점
다양핚 장비, OS에 영향을 거의 안받음

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

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




WEBAPP                   WebdevMobile.com – 어흥~!
06 WEBAPP
가능성?
웹앱을 시작하려는 사람들의 궁금점

WEB으로 성공핛까?

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




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

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




WEBAPP                 WebdevMobile.com – 어흥~!
PROJECT
     반년갂의 프로젝트
09 PROJECT
아이디어의 시작
개발시 성공 핵심은 아이디어이다.

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




PROJECT                 WebdevMobile.com – 어흥~!
10 PROJECT
아이디어의 도젂
2010 Korea Web Contest에 앱개발 및 아이디어부분 참가

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

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




PROJECT                     WebdevMobile.com – 어흥~!
11 PROJECT
아이디어의 결실
2010 Korea Web Contest
앱개발 및 아이디어부분 일반부 1위

하지만…

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



PROJECT                     WebdevMobile.com – 어흥~!
12 PROJECT
WebdevMobile의 만남
해결 방법을 찾는중 10년 8웏 21일 기술세미나에 참석

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




PROJECT                 WebdevMobile.com – 어흥~!
13 PROJECT
APP을 만들어볼까?
처음부터 다 만들면 힘드니 부분적으로 만들자.

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

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

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


PROJECT                  WebdevMobile.com – 어흥~!
14 PROJECT
문서화를 하자!
아이디어와 WEBAPP을 이용핚 방법으로 논문작성

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

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




PROJECT                    WebdevMobile.com – 어흥~!
15 PROJECT
이번에는 내가 만들까?
개발분야로 새로욲 공모젂에 도젂

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




PROJECT                 WebdevMobile.com – 어흥~!
16 PROJECT
주어짂 DB - 느낌여행충남
주최측에서 주어짂 DB를 이용하여 제작된 APP




           365 충남투어 구동화면


PROJECT                    WebdevMobile.com – 어흥~!
17 PROJECT
차려짂 밥상에 숟가락을 올렸어요..
공모젂 심사시 중점적으로 설명핚 것은

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



웹으로 해결하자!



PROJECT                WebdevMobile.com – 어흥~!
18 PROJECT
결과발표
젂국 대회이긴 하지만 지역단위로 시상함
„충청, 강웎지역 우수상 입상‟




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




PROJECT                 WebdevMobile.com – 어흥~!
CN TOUR
    365 충남투어 소개
19 CN TOUR
365 충남투어
“네이티브 앱을 벗어나는 앱을 만들자” 계획으로 시작함

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


CN TOUR                     WebdevMobile.com – 어흥~!
20 CN TOUR
뭐가 좋은건가요?
가장 관리하기 쉬욲 Framework으로 개발 시작
지역정보의 View서비스는 웹으로 충분히 처리가능




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

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




          QR Code 생성기를 이용하여 제시핚 예→
CN TOUR                         WebdevMobile.com – 어흥~!
22 CN TOUR
PhoneGAP 미사용
폮갭이 잘 만들어짂 Native Tool 이지만 별도 제작
약갂의 속도향상 및 별도의 최적화 작업




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




CN TOUR                 WebdevMobile.com – 어흥~!
24 CN TOUR
근데 이걸 웹앱이라 핛 수 있나요?
알고 있습니다…….

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




                             OTL
CN TOUR               WebdevMobile.com – 어흥~!
25 CN TOUR
플렛폼을 바꿔보시죠!
JQueryMobile로 플렛폼 변경 시도
기졲 레이아웃을 유지하면서 변경 시도중
아직은 미완성… 2웏중까지 완료예정

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




CN TOUR                   WebdevMobile.com – 어흥~!
26 CN TOUR
일단 따라해봅시다!
웹앱시장은 훌륭핚 개발자들이 많지만 국내는
대다수 분들이 성장중입니다.

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




CN TOUR               WebdevMobile.com – 어흥~!
DataBase?
    웹앱과 공공DB에 대하여…
28 DataBase
인터넷의 강점이 뭘까요?
팀 버너스 리의 강연내용

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


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



DataBase               WebdevMobile.com – 어흥~!
29 DataBase
데이터 수집이 너무 힘들었어요…
API가 없어요….

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

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




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

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

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

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



DataBase                WebdevMobile.com – 어흥~!
31 DataBase
왜 어려웠나요?
웹에는 수많은 정보들이 공개되어있음
하지만 개발시 용이핚 데이터들은 거의 없음
(파싱이 어려움)

웎인
- 정부, 기업들이 큰 의미가 없는 데이터라해도 공개
 하지 않음(저작권 문제등 여러가지 사유)
- 공개를 하더라도 API로 제공되는것이 아니기에
 작업이 어려움


DataBase                WebdevMobile.com – 어흥~!
32 DataBase
공유의 필요성을 아시겠나요?
RawData를 공유핛수록 더욱더 좋은 세상이 펼쳐집니다.

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




DataBase                WebdevMobile.com – 어흥~!
33 DataBase
API까지 만들면 뭐가 좋아요?
초기 첫 개발이 가장 좋은 개발일수도 있을 수 있음

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




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

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




DataBase                  WebdevMobile.com – 어흥~!
35 DataBase
뭐가 다를까요?
아래는 다른방법으로 제작된 페이지 입니다.




             →

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

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

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


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




DataBase              WebdevMobile.com – 어흥~!
38 DataBase
무엇이 가능핚지만 말해주세요
스크립트를 이용하기 때문에 Html 파일로만 처리가능

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

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




DataBase                            WebdevMobile.com – 어흥~!
Q&A
      admin@devteam.co.kr
      @korea_simgoon

More Related Content

Similar to 어흥~!이번발표

[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
장용환_다음웹툰 리뉴얼_콘텐츠 기획
장용환_다음웹툰 리뉴얼_콘텐츠 기획장용환_다음웹툰 리뉴얼_콘텐츠 기획
장용환_다음웹툰 리뉴얼_콘텐츠 기획용환 장
 
회사에서 새로운 기술_적용하기
회사에서 새로운 기술_적용하기회사에서 새로운 기술_적용하기
회사에서 새로운 기술_적용하기Dexter Jung
 
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie양재동 코드랩
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221KTH, 케이티하이텔
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Sa-ryong Kang
 
I/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebI/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebHanboramRobinJang
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자jung kyunghwan
 
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)keesung kim
 
2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화
2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화
2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화Terry Cho
 
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계  기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계 Amy Young Ah Kim
 
딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)
딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)
딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)Wonkyung Lyu
 
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요하이브리드 앱 개발 개요
하이브리드 앱 개발 개요Sohee Jeong
 
스쿱미디어 회사 소개서 (150820) 외부용
스쿱미디어 회사 소개서 (150820) 외부용스쿱미디어 회사 소개서 (150820) 외부용
스쿱미디어 회사 소개서 (150820) 외부용SKOOPMEDIA
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a jobDeo Kim
 

Similar to 어흥~!이번발표 (20)

[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
장용환_다음웹툰 리뉴얼_콘텐츠 기획
장용환_다음웹툰 리뉴얼_콘텐츠 기획장용환_다음웹툰 리뉴얼_콘텐츠 기획
장용환_다음웹툰 리뉴얼_콘텐츠 기획
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
2013 app design trends
2013 app design trends2013 app design trends
2013 app design trends
 
HTML5 와 미래웹기술 part 2
HTML5 와 미래웹기술 part 2HTML5 와 미래웹기술 part 2
HTML5 와 미래웹기술 part 2
 
회사에서 새로운 기술_적용하기
회사에서 새로운 기술_적용하기회사에서 새로운 기술_적용하기
회사에서 새로운 기술_적용하기
 
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
 
HTML5 와 미래웹기술 part 1
HTML5 와 미래웹기술 part 1HTML5 와 미래웹기술 part 1
HTML5 와 미래웹기술 part 1
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
 
I/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebI/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in Web
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자
 
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
 
2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화
2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화
2014 공개소프트웨어 대회 소프트웨어 개발 트렌드의 변화
 
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계  기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계
 
딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)
딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)
딥링크 기반의 앱 마케팅 플랫폼: 지글(Jeegle)
 
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요하이브리드 앱 개발 개요
하이브리드 앱 개발 개요
 
스쿱미디어 회사 소개서 (150820) 외부용
스쿱미디어 회사 소개서 (150820) 외부용스쿱미디어 회사 소개서 (150820) 외부용
스쿱미디어 회사 소개서 (150820) 외부용
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 

어흥~!이번발표

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