SlideShare a Scribd company logo
1 of 23
Hybrid App 개발 기술 소개

     콘텐츠 개발 파트
       정소희
하이브리드 앱 기술이란?

         웹과 네이티브 코드의 결합

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

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

              앱 개발 방식
무엇이 다른가?

Native App

Mobile Web

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

• 개발 언어


             iOS             Android
          Objective-C         Java


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

• 예 – 카메라, 게임, 일정관리 앱 등등..
Mobile Web
• 스마트폰에 내장된 웹브라우저를 통해 접속하는 형태

• 개발언어
                  iOS / Android
                Html, javascript, C
                      SS 등..


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

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

• 예 – m.naver.com
Hybrid App
• 겉모습은 앱인데 속은 웹?

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

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

• 예 – 만개의 레시피, 네이버 웹툰, 모바일 신문 등..
Hybrid App의 구성요소
 스마트폰 고유의 기능을 제어하기 위한 플랫폼
   PhoneGap, Sench Touch, Rho moblie 등등…

                     +


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

         jQueryMoblie, JQtouch 등등…
                     +
                  웹 기술
              Html5, CSS 등…
하이브리드 앱 개발시
      PhoneGap 플랫폼이 하는 역할
• 웹 형태의 콘텐츠를 앱 형태로 포장




• 참고 – 2011. 10. 3 Adobe 사에서 폰갭을 만든 Nitobi를 인수함
폰갭 플랫폼으로 할 수 있는 것들
• 폰갭을 사용하면 스마트폰의 가속도, 카메라, 주소록, 파
일, GPS, 미디어, 소리, 진동, 스토리지 등 다양한 네이티브
기능을 사용할 수 있음
하이브리드 앱 개발시
jQueryMobile 프레임워크가 하는 역할
• 모바일기기에 최적화된 UX를 제공

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




         jQueryMoblie에서 제공하는 라이브러리
프레임워크로 할 수 있는 것들




          기타 등등..
실습화면
하이브리드 앱 개발 시 장점?
       (개발자 입장)

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

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

• 기존 기술인 html & CSS로도 개발할 수 있음!
(물론 위의 기술을 활용할 수 있는 지식은 가지고 있어야 하
겠지만..=_=)
하이브리드 앱 개발 시 장점?
       (이용자 입장)

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

• (기술구현 만 된다면) 모바일 웹에서는 할 수 없는 기능들
을 활용할 수 있음
 - 화면캡쳐, 메모하기, SNS로 공유하기 등..
하이브리드 앱 개발 시 단점?

• Native App보다는 속도가 느림

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

• (모바일 웹 대비 단점) 마켓등록시 비용 발생
  iTunes - $99
  Android Market – $25
이상, 교육 내용에 대한
간략한 소개를 마치며,
스마트 환경에서의
이러닝 앱 기획 및 개발
스마트 환경에서의
  이러닝 앱 기획 및 개발

       을 위해,
우리가 해야 할 것은 무엇이 있는지
     고민해 봅시다.
스마트러닝이란 무엇일까?


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



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


       +α

스마트기기에서 학습하기 때문에
 뭔가 차별화된 콘텐츠여야 함.
학생들이 스마트러닝에서 기대하는 것은
       무엇일까?
화면에 직접 노트필기를 하여
자신의 블로그나 SNS에
업로드 한다..


              강의 도중 궁금한 사항이 있거나
                    의견을 남기고 싶으면
                 카톡이나 SNS에 접속하여
               같은 과목을 듣는 수강생이나
            교수님에게 내용을 전달할 수 있다..



   기타 등등…
함께 생각해 보아요 ~!

More Related Content

What's hot

하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈동수 장
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends욱래 김
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례동수 장
 
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0KTH, 케이티하이텔
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터Choulhyouc Lee
 
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)mosaicnet
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조NAVER D2
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부NAVER D2
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기Q-Young Lee
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기정혁 권
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기위키북스
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용ChangGyum Kim
 
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향Jonathan Jeon
 
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점양재동 코드랩
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a jobDeo Kim
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2Lee Ji Eun
 

What's hot (20)

하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례
 
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
 
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부
 
Fuse소개
Fuse소개Fuse소개
Fuse소개
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
 
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.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
 
모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용Kevin Kim
 
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법KTH
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...Sang Seok Lim
 
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)GAMENEXT Works
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망영아 오
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
Super appkorea wemakestory_2
Super appkorea wemakestory_2Super appkorea wemakestory_2
Super appkorea wemakestory_2태웅 하
 
HP 모바일 앱 테스트 자동화 솔루션 소개
HP 모바일 앱 테스트 자동화 솔루션 소개HP 모바일 앱 테스트 자동화 솔루션 소개
HP 모바일 앱 테스트 자동화 솔루션 소개Ki Bae Kim
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0KTH
 
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈Changhwan Yi
 
웹캣소개서 (스마트교육연구소)
웹캣소개서 (스마트교육연구소)웹캣소개서 (스마트교육연구소)
웹캣소개서 (스마트교육연구소)tekville2
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발JongKwang Kim
 
월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -
월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -
월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -Metaps
 
Mobile Data Visualization and Analytics
Mobile Data Visualization and AnalyticsMobile Data Visualization and Analytics
Mobile Data Visualization and AnalyticsQuestionPro
 

Viewers also liked (19)

[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
 
모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용모바일 앱 개발을 위한 Agile 적용
모바일 앱 개발을 위한 Agile 적용
 
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
H3 2011 하이브리드 앱 아키텍쳐 및 개발방법
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
[GAMENEXT] 모바일 앱, 수익성 제고를 위한 실전 마케팅 전략 수립(머니매그넷)
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
Super appkorea wemakestory_2
Super appkorea wemakestory_2Super appkorea wemakestory_2
Super appkorea wemakestory_2
 
Mobile Application Development Platform "Morpheus"
Mobile Application Development Platform "Morpheus"Mobile Application Development Platform "Morpheus"
Mobile Application Development Platform "Morpheus"
 
HP 모바일 앱 테스트 자동화 솔루션 소개
HP 모바일 앱 테스트 자동화 솔루션 소개HP 모바일 앱 테스트 자동화 솔루션 소개
HP 모바일 앱 테스트 자동화 솔루션 소개
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
 
SKT-삼성전자 앱개발 페스티벌 매뉴얼
SKT-삼성전자 앱개발 페스티벌 매뉴얼SKT-삼성전자 앱개발 페스티벌 매뉴얼
SKT-삼성전자 앱개발 페스티벌 매뉴얼
 
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
 
웹캣소개서 (스마트교육연구소)
웹캣소개서 (스마트교육연구소)웹캣소개서 (스마트교육연구소)
웹캣소개서 (스마트교육연구소)
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
 
월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -
월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -
월 매출 10억 엔을 넘는 초대박 앱을 목표로 삼을 때 필요한 전략 모음 - 데이터×TV CF×앱 -
 
Mobile Data Visualization and Analytics
Mobile Data Visualization and AnalyticsMobile Data Visualization and Analytics
Mobile Data Visualization and Analytics
 

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

K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용jinwook shin
 
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료Hannah Kim
 
HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화Donghyung Shin
 
2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다Jonathan Jeon
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서logeo
 
JavaScript Everywhere from Mobile and Robot
JavaScript Everywhere from Mobile and RobotJavaScript Everywhere from Mobile and Robot
JavaScript Everywhere from Mobile and RobotCirculus
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)NAVER D2
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427Will Kim
 
2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망Seungyul Kim
 
12-1 ignite(2)
12-1 ignite(2)12-1 ignite(2)
12-1 ignite(2)tikasy
 
모바일 웹 UI/UX의 현재와 미래 - Agenda
모바일 웹 UI/UX의 현재와 미래 - Agenda모바일 웹 UI/UX의 현재와 미래 - Agenda
모바일 웹 UI/UX의 현재와 미래 - AgendaJonathan Jeon
 
격변하는 프로그래밍 언어, 이제는 Let it go
격변하는 프로그래밍 언어, 이제는 Let it go격변하는 프로그래밍 언어, 이제는 Let it go
격변하는 프로그래밍 언어, 이제는 Let it goChris Ohk
 
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경mosaicnet
 
Slipp 발표 자료 20151212
Slipp 발표 자료 20151212Slipp 발표 자료 20151212
Slipp 발표 자료 20151212Jinsoo Jung
 
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안욱래 김
 
포트폴리오 김규하
포트폴리오 김규하포트폴리오 김규하
포트폴리오 김규하GyooHa Kim
 

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

K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용
 
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
 
HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화
 
2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서
 
JavaScript Everywhere from Mobile and Robot
JavaScript Everywhere from Mobile and RobotJavaScript Everywhere from Mobile and Robot
JavaScript Everywhere from Mobile and Robot
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
 
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
 
조재완
조재완조재완
조재완
 
Hybrid app and app store
Hybrid app and app storeHybrid app and app store
Hybrid app and app store
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427
 
2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망
 
12-1 ignite(2)
12-1 ignite(2)12-1 ignite(2)
12-1 ignite(2)
 
모바일 웹 UI/UX의 현재와 미래 - Agenda
모바일 웹 UI/UX의 현재와 미래 - Agenda모바일 웹 UI/UX의 현재와 미래 - Agenda
모바일 웹 UI/UX의 현재와 미래 - Agenda
 
격변하는 프로그래밍 언어, 이제는 Let it go
격변하는 프로그래밍 언어, 이제는 Let it go격변하는 프로그래밍 언어, 이제는 Let it go
격변하는 프로그래밍 언어, 이제는 Let it go
 
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
 
Slipp 발표 자료 20151212
Slipp 발표 자료 20151212Slipp 발표 자료 20151212
Slipp 발표 자료 20151212
 
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
 
포트폴리오 김규하
포트폴리오 김규하포트폴리오 김규하
포트폴리오 김규하
 

하이브리드 앱 개발 개요

  • 1. Hybrid App 개발 기술 소개 콘텐츠 개발 파트 정소희
  • 2. 하이브리드 앱 기술이란? 웹과 네이티브 코드의 결합 HTML5, CSS, 자바스크립트의 웹 기술과 Objective-C, Java, C# 등의 네이티브 코드가 결합된 앱 개발 방식
  • 4. Native App • iOS 또는 Android 전용 개발언어와 도구를 사용하여 원하 는 기능이 하나의 덩어리형태로 컴파일된 형태 • 개발 언어 iOS Android Objective-C Java • 실행이 빠르고 디자인 일관성이 높은 편 • 예 – 카메라, 게임, 일정관리 앱 등등..
  • 5. Mobile Web • 스마트폰에 내장된 웹브라우저를 통해 접속하는 형태 • 개발언어 iOS / Android Html, javascript, C SS 등.. • 매 페이지마다 네트워크에 접속해야 하므로 속도가 느림 • 모바일 기기를 컨트롤 할 수 없음 • 예 – m.naver.com
  • 6. Hybrid App • 겉모습은 앱인데 속은 웹? • 핵심기능은 Native 기술로 구현하고 지속적으로 업데이트 해야할 부분은 웹 기술로 관리 • 최근 만들어지는 앱이 대부분 하이브리드 앱 • 예 – 만개의 레시피, 네이버 웹툰, 모바일 신문 등..
  • 7. Hybrid App의 구성요소 스마트폰 고유의 기능을 제어하기 위한 플랫폼 PhoneGap, Sench Touch, Rho moblie 등등… + 스마트환경에 적합한 UI를 제공해주는 프레임워크 jQueryMoblie, JQtouch 등등… + 웹 기술 Html5, CSS 등…
  • 8. 하이브리드 앱 개발시 PhoneGap 플랫폼이 하는 역할 • 웹 형태의 콘텐츠를 앱 형태로 포장 • 참고 – 2011. 10. 3 Adobe 사에서 폰갭을 만든 Nitobi를 인수함
  • 9. 폰갭 플랫폼으로 할 수 있는 것들 • 폰갭을 사용하면 스마트폰의 가속도, 카메라, 주소록, 파 일, GPS, 미디어, 소리, 진동, 스토리지 등 다양한 네이티브 기능을 사용할 수 있음
  • 10. 하이브리드 앱 개발시 jQueryMobile 프레임워크가 하는 역할 • 모바일기기에 최적화된 UX를 제공 • 터치이벤트나 버튼, 리스트 등의 컴포넌트 UI 등의 정보가 js파일 안에 정의되어 있어 필요한 부분을 가져다 쓰면 됨 jQueryMoblie에서 제공하는 라이브러리
  • 11. 프레임워크로 할 수 있는 것들 기타 등등..
  • 13. 하이브리드 앱 개발 시 장점? (개발자 입장) • 모바일 기기에 접근하는 기술이 이미 phoneGap등의 플랫 폼으로 구현이 되어 있고, • UI에 대한 고민도 프레임워크로 어느정도 해소할 수 있으 므로.. • 기존 기술인 html & CSS로도 개발할 수 있음! (물론 위의 기술을 활용할 수 있는 지식은 가지고 있어야 하 겠지만..=_=)
  • 14. 하이브리드 앱 개발 시 장점? (이용자 입장) • 브라우저로 일일히 URL을 입력하여 접근하지 않아도 됨 • (기술구현 만 된다면) 모바일 웹에서는 할 수 없는 기능들 을 활용할 수 있음 - 화면캡쳐, 메모하기, SNS로 공유하기 등..
  • 15. 하이브리드 앱 개발 시 단점? • Native App보다는 속도가 느림 • 어쨌든 네트워크 데이터를 소모함 • (모바일 웹 대비 단점) 마켓등록시 비용 발생 iTunes - $99 Android Market – $25
  • 16. 이상, 교육 내용에 대한 간략한 소개를 마치며,
  • 18. 스마트 환경에서의 이러닝 앱 기획 및 개발 을 위해, 우리가 해야 할 것은 무엇이 있는지 고민해 봅시다.
  • 19. 스마트러닝이란 무엇일까? 모바일 러닝은 이미 새로울 것이 없는 콘텐츠 개발 방식 스마트폰으로 전화와 문자만 이용하는 것과 뭐가 다를까?
  • 20. 스마트러닝이란 무엇일까? +α 스마트기기에서 학습하기 때문에 뭔가 차별화된 콘텐츠여야 함.
  • 22. 화면에 직접 노트필기를 하여 자신의 블로그나 SNS에 업로드 한다.. 강의 도중 궁금한 사항이 있거나 의견을 남기고 싶으면 카톡이나 SNS에 접속하여 같은 과목을 듣는 수강생이나 교수님에게 내용을 전달할 수 있다.. 기타 등등…