하이브리드 앱 개발 개요

23
Hybrid App 개개 개개 개개 콘콘콘 콘콘 콘콘 콘콘콘

Upload: sohee-jeong

Post on 20-Dec-2014

1.657 views

Category:

Documents


8 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 하이브리드 앱 개발 개요

Hybrid App 개발 기술 소개

콘텐츠 개발 파트정소희

Page 2: 하이브리드 앱 개발 개요

하이브리드 앱 기술이란 ?

웹과 네이티브 코드의 결합

HTML5, CSS, 자바스크립트의 웹 기술과

Objective-C, Java, C# 등의 네이티브 코드가 결합된

앱 개발 방식

Page 3: 하이브리드 앱 개발 개요

무엇이 다른가 ?

Native App

Mobile Web

Hybrid App

Page 4: 하이브리드 앱 개발 개요

Native App

• iOS 또는 Android 전용 개발언어와 도구를 사용하여 원하는 기능이 하나의 덩어리형태로 컴파일된 형태

• 개발 언어

• 실행이 빠르고 디자인 일관성이 높은 편

• 예 – 카메라 , 게임 , 일정관리 앱 등등 ..

iOS

Objective-C

Android

Java

Page 5: 하이브리드 앱 개발 개요

Mobile Web

• 스마트폰에 내장된 웹브라우저를 통해 접속하는 형태

• 개발언어

• 매 페이지마다 네트워크에 접속해야 하므로 속도가 느림

• 모바일 기기를 컨트롤 할 수 없음

• 예 – m.naver.com

iOS / AndroidHtml,

javascript, CSS 등 ..

Page 6: 하이브리드 앱 개발 개요

Hybrid App

• 겉모습은 앱인데 속은 웹 ?

• 핵심기능은 Native 기술로 구현하고 지속적으로 업데이트 해야할 부분은 웹 기술로 관리

• 최근 만들어지는 앱이 대부분 하이브리드 앱

• 예 – 만개의 레시피 , 네이버 웹툰 , 모바일 신문 등 ..

Page 7: 하이브리드 앱 개발 개요

Hybrid App 의 구성요소스마트폰 고유의 기능을 제어하기 위한 플랫폼

+

스마트환경에 적합한 UI 를 제공해주는 프레임워크

+

웹 기술

PhoneGap, Sench Touch, Rho moblie 등등…

jQueryMoblie, JQtouch 등등…

Html5, CSS 등…

Page 8: 하이브리드 앱 개발 개요

하이브리드 앱 개발시PhoneGap 플랫폼이 하는 역할

• 웹 형태의 콘텐츠를 앱 형태로 포장

 

• 참고 – 2011. 10. 3 Adobe 사에서 폰갭을 만든 Nitobi 를 인수함

Page 9: 하이브리드 앱 개발 개요

폰갭 플랫폼으로 할 수 있는 것들• 폰갭을 사용하면 스마트폰의 가속도 , 카메라 , 주소록 , 파일 , GPS, 미디어 , 소리 , 진동 , 스토리지 등 다양한 네이티브 기능을 사용할 수 있음

 

Page 10: 하이브리드 앱 개발 개요

하이브리드 앱 개발시jQueryMobile 프레임워크가 하는

역할• 모바일기기에 최적화된 UX 를 제공

• 터치이벤트나 버튼 , 리스트 등의 컴포넌트 UI 등의 정보가 js 파일 안에 정의되어 있어 필요한 부분을 가져다 쓰면 됨

 

jQueryMoblie 에서 제공하는 라이브러리

Page 11: 하이브리드 앱 개발 개요

프레임워크로 할 수 있는 것들

기타 등등 ..

Page 12: 하이브리드 앱 개발 개요

실습화면

Page 13: 하이브리드 앱 개발 개요

하이브리드 앱 개발 시 장점 ?( 개발자 입장 )

• 모바일 기기에 접근하는 기술이 이미 phoneGap 등의 플랫폼으로 구현이 되어 있고 ,

• UI 에 대한 고민도 프레임워크로 어느정도 해소할 수 있으므로 ..

• 기존 기술인 html & CSS 로도 개발할 수 있음 !( 물론 위의 기술을 활용할 수 있는 지식은 가지고 있어야 하겠지만 ..=_=)

Page 14: 하이브리드 앱 개발 개요

하이브리드 앱 개발 시 장점 ?( 이용자 입장 )

• 브라우저로 일일히 URL 을 입력하여 접근하지 않아도 됨

• ( 기술구현 만 된다면 ) 모바일 웹에서는 할 수 없는 기능들을 활용할 수 있음 - 화면캡쳐 , 메모하기 , SNS 로 공유하기 등 ..

Page 15: 하이브리드 앱 개발 개요

하이브리드 앱 개발 시 단점 ?

• Native App 보다는 속도가 느림

• 어쨌든 네트워크 데이터를 소모함

• ( 모바일 웹 대비 단점 ) 마켓등록시 비용 발생 iTunes - $99 Android Market – $25

Page 16: 하이브리드 앱 개발 개요

이상 , 교육 내용에 대한 간략한 소개를 마치며 ,

Page 17: 하이브리드 앱 개발 개요

스마트 환경에서의이러닝 앱 기획 및 개발

Page 18: 하이브리드 앱 개발 개요

스마트 환경에서의이러닝 앱 기획 및 개발

을 위해 ,

우리가 해야 할 것은 무엇이 있는지고민해 봅시다 .

Page 19: 하이브리드 앱 개발 개요

스마트러닝이란 무엇일까 ?

모바일 러닝은 이미 새로울 것이 없는 콘텐츠 개발 방식

스마트폰으로 전화와 문자만 이용하는 것과 뭐가 다를까 ?

Page 20: 하이브리드 앱 개발 개요

스마트러닝이란 무엇일까 ?

+ α

스마트기기에서 학습하기 때문에뭔가 차별화된 콘텐츠여야 함 .

Page 21: 하이브리드 앱 개발 개요

학생들이 스마트러닝에서 기대하는 것은 무엇일까 ?

Page 22: 하이브리드 앱 개발 개요

화면에 직접 노트필기를 하여 자신의 블로그나 SNS 에 업로드 한다 ..

강의 도중 궁금한 사항이 있거나 의견을 남기고 싶으면

카톡이나 SNS 에 접속하여 같은 과목을 듣는 수강생이나

교수님에게 내용을 전달할 수 있다 ..

기타 등등…

Page 23: 하이브리드 앱 개발 개요

함께 생각해 보아요 ~!