SlideShare a Scribd company logo
1 of 25
하이브리드 앱 개발개요
비트모바일
장봉수
목 차


앱이란?



앱 개발의 종류



왜 하이브리드 앱인가?



하이브리드 앱 개발시 유의할점



웹을 앱으로 만들어주는 Tools



하이브리드 UI 개발 프레임워크



개발과정(하이브리드 앱)
1. 앱이란?


어플리케이션의 줄임말



플랫폼 안에 들어가는 한가지 목적을 위해 만들어진 응용 프
로그램(게임, 일정관리, 음악 등)



애플의 앱스토어 같은 응용 소프트웨어 가게에 올려서 팔 수
있음


이외에 크롬, 윈도우8, 플레이스테이션에서 운영하는 부분에 대해서도 앱이
라함
2. 앱의 종류
Native
App

App

Hybrid
App

Web
App
2. 앱의 종류 – 네이티브 앱


각 플랫폼의 언어로 구현


아이폰(Object-C), 안드로이드(JAVA), 윈도우(C#), 바다(C++), 블랙베리
(JAVA) 등



화려한 UI사용



단말 고유 기능을 사용할 수 있음



특정 플랫폼에만 동작



앱의 업데이트는 앱스토어를 통해서만 이루어짐
2. 앱의 종류 – 네이티브 앱

메모리관리용 어플
실시간 어플 킬러 앱
위젯을 눌러서 정리
2. 앱의 종류 – 웹앱


HTML5, CSS, Javascript 등을 활용


웹 표준 기술을 활용하여 앱을 표현



여러 기기에 한 가지의 앱으로 서비스할 수 있기에 개발 및
유지보수 용이



허나 웹에서 구동하기에 서버 필요 및 네트워크 상황에 따라
구동자체가 거의 불가능


Application Cache나 Web Storage를 사용하여 부분적 해결가능(HTML5)
2. 앱의 종류 – 웹앱 – 예시(크롬 에버노
트)
2. 앱의 종류 – 웹앱 – 예시(크롬 에버노
트)
2. 앱의 종류 – 웹앱 – 예시(크롬 에버노
트)
2. 앱의 종류 – 하이브리드 앱


네이티브 앱과 웹 앱의 장점을 합쳤음



네이티브 앱 보다 유지보수 용이(아이폰, 안드로이드,
윈도우폰 등 여러 기기에 같은 종류의 앱 개발시간 최소화)



HTML5, CSS, Javascript 등을 활용





웹앱과 달리 로컬에서 구동가능함
웹 표준 기술을 활용하여 앱을 표현

네이티브 적인 부분도 활용가능


화려한 UI사용



단말 고유 기능을 사용할 수 있음
2. 앱의 종류 – 하이브리드 앱 - 다음

Web 부분

Native 부분
3. 왜 하이브리드 앱인가?


네이티브 앱에 비해, 유지보수 용이



다양한 플랫폼에 대응 가능




다양한 기기와 해상도에도 대응 가능(HTML5와 CSS3 이용, 웹앱과 같음)

웹 기술이 주이지만, 마켓에도 팔 수 있음(일반적으로
webview만 있는 웹앱은 애플 앱스토어에서 웹앱으로 따로
팔 수 있지만, 일반 앱으로는 등록 불가)
4. 하이브리드 앱 개발시 유의할 점


일부 플랫폼의 경우 성능 저하




통신을 이용하는 방식에서 성능저하(폰갭-뒤에서 설명-의 경우 특히 심함)

웹 표준 침해 가능성 존재





각 플랫폼마다 자신들만의 기술 정립
웹은 같은 기술을 썼을때, 같은 화면을 보여주어야한다.

최신 모바일 기술 접목의 어려움


지원해주는 프로그램 필요(웹으로 개발한것을 각 플랫폼에 맞게 바꿔줌)



불가능하지는 않으나 시간이 약간 걸릴 수 있음(webview이용시 개발가능)
5. 웹을 앱으로 만들어주는 Tools


PhoneGap



Titanium



Appspresso
5. 웹을 앱으로 만들어주는 Tools
- PhoneGap


최초의 하이브리드 앱 프레임워크



개발환경 제공은 하지 않고 패키징만 지원(빌드)


손이 많이 감



브라우저도 웹앱을 구동하는 방식으로 성능이 네이티브앱
에 비해 떨어짐



폰갭만의 API 제공
5. 웹을 앱으로 만들어주는 Tools
- Titanium


폰갭의 단점인 성능 부분을 개선


브라우저로 웹앱을 구동하는 방식이 아닌 웹 기술을 활용하여 네이티브 앱으로
개발



Titanium만의 API 제공



데스크탑 플랫폼도 지원




단, 모바일 플랫폼 개발시, javascript위주의 개발방식
(Webkit엔진이 아닌 javascript 엔진을 쓰고 있음)

플랫폼마다 결과화면이 다르게 표시될 수 있음
5. 웹을 앱으로 만들어주는 Tools
- Appspresso


KTH에서 개발된 프레임워크




가장 최근에 개발된 프레임워크(2011년 10월)

강력한 개발환경 지원


웹앱 표준인 WAC Waikiki API 지원



이클립스 IDE 지원(이클립스를 이용해서 만들었음)



폰갭과 같은 형식의 개발로 성능제한이 있음



2013년 3월 30일. 현재 안드로이드 SDK 1.7 버전이상 지원 안 함
6. 하이브리드 UI 개발 프레임 워크


JQuery Mobile



Sencha Touch



Joapp
6. 하이브리드 UI 개발 프레임 워크
- JQuery Mobile


표현방식이 기존의 HTML과 비슷하여 빠르게 적응 가능


HTML 마크업 기반



다양한 플랫폼에 대응 가능



Sencha touch에 비해 표현력이 떨어짐
6. 하이브리드 UI 개발 프레임 워크
- Sencha Touch


ExtJS 라이브러리 중심으로 구성
※ ExtJs는 웹애플리케이션을 만들기 위한 client-side-JavaScript framework이
다.


Extjs를배우기위한별도교육필요



기능이 매우 강력하고 Extjs를 활용하여 보다 앱적인 표현력
이 강력하다.



라이선스를 구매해야 한다.
6. 하이브리드 UI 개발 프레임 워크
- JoApp


많이 쓰이지는 않으나 다양한 기능 제공



대부분 Javascript로 구성되어 개발이 어려움
7. 개발과정 (하이브리드 앱)

UI 개발
(WEB환경)

APP 패키징

Web App

네이티브 개발

Native App
Hybrid App
Q&A
"새로운 작품을 만든다는 것은 아무도 발을
들여놓은 적이 없는 미지의 초원을 걸어가는
느낌이다."
사카구치 히로노부 (파이널 판타지 개발자)
끝


name : 장봉수



E-mail : jbs0209@bitmobile.co.kr



Phone :010-6662-5306

More Related Content

What's hot

K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용jinwook shin
 
C1 하이브리드 앱 어떻게 개발해야 하나
C1 하이브리드 앱 어떻게 개발해야 하나C1 하이브리드 앱 어떻게 개발해야 하나
C1 하이브리드 앱 어떻게 개발해야 하나NAVER D2
 
하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈동수 장
 
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0KTH, 케이티하이텔
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터Choulhyouc Lee
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)mosaicnet
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례동수 장
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...Sang Seok Lim
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부NAVER D2
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조NAVER D2
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기Q-Young Lee
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택Tai Hoon KIM
 
Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1이경주 이경주
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1성일 한
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER Engineering
 
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기위키북스
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복sung hwan Park
 

What's hot (20)

K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
 
C1 하이브리드 앱 어떻게 개발해야 하나
C1 하이브리드 앱 어떻게 개발해야 하나C1 하이브리드 앱 어떻게 개발해야 하나
C1 하이브리드 앱 어떻게 개발해야 하나
 
하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈
 
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
Fuse소개
Fuse소개Fuse소개
Fuse소개
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
 
Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 

Viewers also liked

[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기정현 황
 
Native vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesNative vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesJason Grigsby
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민NAVER D2
 
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법KTH
 
모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기Jae-hyung Park
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복Mu-ik Jeon
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신NAVER D2
 
하루 안에 페이스북 웹 앱 만들기
하루 안에 페이스북 웹 앱 만들기하루 안에 페이스북 웹 앱 만들기
하루 안에 페이스북 웹 앱 만들기YongHui Lee
 
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)GAMENEXT Works
 
모바일앱 시장현황 및 마케팅을 위한 25가지 방법
모바일앱 시장현황 및 마케팅을 위한 25가지 방법 모바일앱 시장현황 및 마케팅을 위한 25가지 방법
모바일앱 시장현황 및 마케팅을 위한 25가지 방법 마킨드(makiind)
 
Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310
Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310
Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310JongEun Lee
 
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료Hannah Kim
 
Node.js DBMS short summary
Node.js DBMS short summaryNode.js DBMS short summary
Node.js DBMS short summaryHoChul Shin
 
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
 [NEXT] Android 개발 경험 프로젝트 3일차 (Database) [NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)YoungSu Son
 
SecondPrism Webinar Sept-18-2012
SecondPrism Webinar Sept-18-2012SecondPrism Webinar Sept-18-2012
SecondPrism Webinar Sept-18-2012Vivek Bhaskaran
 
안드로이드 어플 개발 전략 10가지 1부
안드로이드 어플 개발 전략 10가지 1부안드로이드 어플 개발 전략 10가지 1부
안드로이드 어플 개발 전략 10가지 1부mosaicnet
 
모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용Kevin Kim
 

Viewers also liked (18)

[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
 
Native vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesNative vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development Choices
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
 
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
 
모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
 
하루 안에 페이스북 웹 앱 만들기
하루 안에 페이스북 웹 앱 만들기하루 안에 페이스북 웹 앱 만들기
하루 안에 페이스북 웹 앱 만들기
 
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
 
모바일앱 시장현황 및 마케팅을 위한 25가지 방법
모바일앱 시장현황 및 마케팅을 위한 25가지 방법 모바일앱 시장현황 및 마케팅을 위한 25가지 방법
모바일앱 시장현황 및 마케팅을 위한 25가지 방법
 
Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310
Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310
Titanium 소개 - 당신이 알고 있는 타이타늄 rev.201310
 
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
 
Node.js DBMS short summary
Node.js DBMS short summaryNode.js DBMS short summary
Node.js DBMS short summary
 
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
 [NEXT] Android 개발 경험 프로젝트 3일차 (Database) [NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
 
SecondPrism Webinar Sept-18-2012
SecondPrism Webinar Sept-18-2012SecondPrism Webinar Sept-18-2012
SecondPrism Webinar Sept-18-2012
 
안드로이드 어플 개발 전략 10가지 1부
안드로이드 어플 개발 전략 10가지 1부안드로이드 어플 개발 전략 10가지 1부
안드로이드 어플 개발 전략 10가지 1부
 
모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용
 

Similar to 하이브리드 앱_개발_개요

차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용ChangGyum Kim
 
K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용jinwook shin
 
경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 Young Eun Park
 
2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummitVeronika Bae
 
Android발표자료 홍종진
Android발표자료 홍종진Android발표자료 홍종진
Android발표자료 홍종진Jong Jin Hong
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망영아 오
 
[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점
[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점
[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점양재동 코드랩
 
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점양재동 코드랩
 
WeAreDevelopers_micro_frontend_framework.pdf
WeAreDevelopers_micro_frontend_framework.pdfWeAreDevelopers_micro_frontend_framework.pdf
WeAreDevelopers_micro_frontend_framework.pdfjaneSim13
 
[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)ri3box
 
누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘VentureSquare
 
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)mosaicnet
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서logeo
 
[한국핀테크포럼] 제7회 핀테크포럼
[한국핀테크포럼] 제7회 핀테크포럼[한국핀테크포럼] 제7회 핀테크포럼
[한국핀테크포럼] 제7회 핀테크포럼Hyeseon Yoon
 

Similar to 하이브리드 앱_개발_개요 (20)

차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용
 
플젝
플젝플젝
플젝
 
경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제
 
2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit
 
Android발표자료 홍종진
Android발표자료 홍종진Android발표자료 홍종진
Android발표자료 홍종진
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
 
[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점
[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점
[W3C HTML5 2016] Ionic 하이브리드 앱 개발하기, 사례와 시사점
 
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
 
WeAreDevelopers_micro_frontend_framework.pdf
WeAreDevelopers_micro_frontend_framework.pdfWeAreDevelopers_micro_frontend_framework.pdf
WeAreDevelopers_micro_frontend_framework.pdf
 
[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)
 
조재완
조재완조재완
조재완
 
누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘
 
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서
 
[한국핀테크포럼] 제7회 핀테크포럼
[한국핀테크포럼] 제7회 핀테크포럼[한국핀테크포럼] 제7회 핀테크포럼
[한국핀테크포럼] 제7회 핀테크포럼
 
flutter
flutterflutter
flutter
 
RN vs Flutter
RN vs FlutterRN vs Flutter
RN vs Flutter
 

하이브리드 앱_개발_개요

  • 2. 목 차  앱이란?  앱 개발의 종류  왜 하이브리드 앱인가?  하이브리드 앱 개발시 유의할점  웹을 앱으로 만들어주는 Tools  하이브리드 UI 개발 프레임워크  개발과정(하이브리드 앱)
  • 3. 1. 앱이란?  어플리케이션의 줄임말  플랫폼 안에 들어가는 한가지 목적을 위해 만들어진 응용 프 로그램(게임, 일정관리, 음악 등)  애플의 앱스토어 같은 응용 소프트웨어 가게에 올려서 팔 수 있음  이외에 크롬, 윈도우8, 플레이스테이션에서 운영하는 부분에 대해서도 앱이 라함
  • 5. 2. 앱의 종류 – 네이티브 앱  각 플랫폼의 언어로 구현  아이폰(Object-C), 안드로이드(JAVA), 윈도우(C#), 바다(C++), 블랙베리 (JAVA) 등  화려한 UI사용  단말 고유 기능을 사용할 수 있음  특정 플랫폼에만 동작  앱의 업데이트는 앱스토어를 통해서만 이루어짐
  • 6. 2. 앱의 종류 – 네이티브 앱 메모리관리용 어플 실시간 어플 킬러 앱 위젯을 눌러서 정리
  • 7. 2. 앱의 종류 – 웹앱  HTML5, CSS, Javascript 등을 활용  웹 표준 기술을 활용하여 앱을 표현  여러 기기에 한 가지의 앱으로 서비스할 수 있기에 개발 및 유지보수 용이  허나 웹에서 구동하기에 서버 필요 및 네트워크 상황에 따라 구동자체가 거의 불가능  Application Cache나 Web Storage를 사용하여 부분적 해결가능(HTML5)
  • 8. 2. 앱의 종류 – 웹앱 – 예시(크롬 에버노 트)
  • 9. 2. 앱의 종류 – 웹앱 – 예시(크롬 에버노 트)
  • 10. 2. 앱의 종류 – 웹앱 – 예시(크롬 에버노 트)
  • 11. 2. 앱의 종류 – 하이브리드 앱  네이티브 앱과 웹 앱의 장점을 합쳤음  네이티브 앱 보다 유지보수 용이(아이폰, 안드로이드, 윈도우폰 등 여러 기기에 같은 종류의 앱 개발시간 최소화)   HTML5, CSS, Javascript 등을 활용   웹앱과 달리 로컬에서 구동가능함 웹 표준 기술을 활용하여 앱을 표현 네이티브 적인 부분도 활용가능  화려한 UI사용  단말 고유 기능을 사용할 수 있음
  • 12. 2. 앱의 종류 – 하이브리드 앱 - 다음 Web 부분 Native 부분
  • 13. 3. 왜 하이브리드 앱인가?  네이티브 앱에 비해, 유지보수 용이  다양한 플랫폼에 대응 가능   다양한 기기와 해상도에도 대응 가능(HTML5와 CSS3 이용, 웹앱과 같음) 웹 기술이 주이지만, 마켓에도 팔 수 있음(일반적으로 webview만 있는 웹앱은 애플 앱스토어에서 웹앱으로 따로 팔 수 있지만, 일반 앱으로는 등록 불가)
  • 14. 4. 하이브리드 앱 개발시 유의할 점  일부 플랫폼의 경우 성능 저하   통신을 이용하는 방식에서 성능저하(폰갭-뒤에서 설명-의 경우 특히 심함) 웹 표준 침해 가능성 존재    각 플랫폼마다 자신들만의 기술 정립 웹은 같은 기술을 썼을때, 같은 화면을 보여주어야한다. 최신 모바일 기술 접목의 어려움  지원해주는 프로그램 필요(웹으로 개발한것을 각 플랫폼에 맞게 바꿔줌)  불가능하지는 않으나 시간이 약간 걸릴 수 있음(webview이용시 개발가능)
  • 15. 5. 웹을 앱으로 만들어주는 Tools  PhoneGap  Titanium  Appspresso
  • 16. 5. 웹을 앱으로 만들어주는 Tools - PhoneGap  최초의 하이브리드 앱 프레임워크  개발환경 제공은 하지 않고 패키징만 지원(빌드)  손이 많이 감  브라우저도 웹앱을 구동하는 방식으로 성능이 네이티브앱 에 비해 떨어짐  폰갭만의 API 제공
  • 17. 5. 웹을 앱으로 만들어주는 Tools - Titanium  폰갭의 단점인 성능 부분을 개선  브라우저로 웹앱을 구동하는 방식이 아닌 웹 기술을 활용하여 네이티브 앱으로 개발  Titanium만의 API 제공  데스크탑 플랫폼도 지원   단, 모바일 플랫폼 개발시, javascript위주의 개발방식 (Webkit엔진이 아닌 javascript 엔진을 쓰고 있음) 플랫폼마다 결과화면이 다르게 표시될 수 있음
  • 18. 5. 웹을 앱으로 만들어주는 Tools - Appspresso  KTH에서 개발된 프레임워크   가장 최근에 개발된 프레임워크(2011년 10월) 강력한 개발환경 지원  웹앱 표준인 WAC Waikiki API 지원  이클립스 IDE 지원(이클립스를 이용해서 만들었음)  폰갭과 같은 형식의 개발로 성능제한이 있음  2013년 3월 30일. 현재 안드로이드 SDK 1.7 버전이상 지원 안 함
  • 19. 6. 하이브리드 UI 개발 프레임 워크  JQuery Mobile  Sencha Touch  Joapp
  • 20. 6. 하이브리드 UI 개발 프레임 워크 - JQuery Mobile  표현방식이 기존의 HTML과 비슷하여 빠르게 적응 가능  HTML 마크업 기반  다양한 플랫폼에 대응 가능  Sencha touch에 비해 표현력이 떨어짐
  • 21. 6. 하이브리드 UI 개발 프레임 워크 - Sencha Touch  ExtJS 라이브러리 중심으로 구성 ※ ExtJs는 웹애플리케이션을 만들기 위한 client-side-JavaScript framework이 다.  Extjs를배우기위한별도교육필요  기능이 매우 강력하고 Extjs를 활용하여 보다 앱적인 표현력 이 강력하다.  라이선스를 구매해야 한다.
  • 22. 6. 하이브리드 UI 개발 프레임 워크 - JoApp  많이 쓰이지는 않으나 다양한 기능 제공  대부분 Javascript로 구성되어 개발이 어려움
  • 23. 7. 개발과정 (하이브리드 앱) UI 개발 (WEB환경) APP 패키징 Web App 네이티브 개발 Native App Hybrid App
  • 24. Q&A "새로운 작품을 만든다는 것은 아무도 발을 들여놓은 적이 없는 미지의 초원을 걸어가는 느낌이다." 사카구치 히로노부 (파이널 판타지 개발자)
  • 25. 끝  name : 장봉수  E-mail : jbs0209@bitmobile.co.kr  Phone :010-6662-5306