SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
남보다 뛰어난
하이브리드앱 만들기


㈜스쿱미디어
신진욱 대표이사
jinwook@skoopmedia.co.kr
010-9599-4465 / @smle
강사소개
• 현 ㈜스쿱미디어 대표이사, 전 ㈜블링크팩토리 기술이사
•   ㈜넥슨 데브캣
•   2002년 첫 창업
•   하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 신세계푸드 등등
•   아이폰 출시후 2년간 20여개의 대형 앱 개발 / 10여개의 소형 앱 개발
•   총 누적 다운로드 500만 이상 / 앱스토어 1위 3회
2012 하이브리드앱
2011 모바일 UI/UX
2010 모바일 비즈니스
2009 스마트폰의 시대가 온다
2012 하이브리드앱
- 만들어봤더니 만만치 않다.
  (또는 이제라도 만들자)
2011 모바일 UI/UX
- 우리도 잘 만들어서 벌자

2010 모바일 비즈니스
- 외국은 이렇게 돈을 벌더라

2009 스마트폰의 시대가 온다
- 외국엔 아이폰이라는게 열풍
대상자
• 네이티브앱을 개발해봤으나 하이브리드앱으로
  개발하면 좀 나은지 궁금한분
• 앱개발을 아직 해보지 않아서 뭘로 개발해야 할
  지 고민하시는분
• 사내 웹개발자로 모바일앱 개발을 대응 할 수
  있는지 궁금하신 분
• 또는 위와 같은 고민을 하는 상사분이 보내서
  오신분
이번 세션의 결론
웹 기술만으론 앱을 만들 수 없다.
웹 기술만으론 앱을 만들 수 없다.

     한번 판단해 봅시다.
10가지 키워드


 WHAT       HOW     PATTERN




  FACT     DESIGN   PROCESS




MEMBER   STRATEGY     AFTER   SECRET
하이브리드앱은
웹기술을 이용하여 앱을 만든다.
INSIGHT
 다양한 디바이스를 지원하는 웹 기반 애플리케
  이션 프레임워크
 왜 하이브리드일까
  네이티브기술과 웹기술을 연결해준다.
 웹기술만으로 만들기는 사실상 어렵다.
 패키징에 대한 이슈가 해결된 프레임워크를 선
  택할 것
 네이티브로 만들것은 네이티브로 만들어야한다.
 하이브리드는 두 개 이상의것이 합쳐져 서로 보완
  하며 목표를 달성해야한다.
 – 국내엔 너무 웹기술에 포커스 되어있음
 그럼 네이티브앱이란
 – 운영체제와 하드웨어와 최대한 가깝게 전용툴을 사용하
   여 실행파일을 만든앱
   • 미리 해석해두었기 때문에 명령어들을 처리만 하면 됨
 – 하이브리드앱 프레임워크 사이에는 웹브라우저와 자바
   스크립트 해석기라는 레이어가 또 있습니다.
   • 해석 -> 분기 -> 처리
웹 기술을 이용할 뿐 앱을 만들
고 있다
FACT
 웹 기술을 이용할 뿐 앱을 만들고 있다.
 특정페이지 UI전체를 웹 서버에서 호출해서는
  안된다.
  웹 앱의 장점이 사라짐
 로컬에 HTML파일을 두고 데이터만 주고 받을
  것
 UI는 로컬, 데이터는 json으로 서버에서
빠질수 없는
네이티브 앱 개발자
MEMBER
 빠질수 없는 네이티브 앱 개발자
 패키징에 대한 문제
 하이브리드앱 프레임워크는 가교의 역할을 한
  다.
  웹 기술만으로 앱을 만든다는 뜻은 아니다.
  하이브리드는 상호 보완이다.
 애플 앱스토어 등록시 이슈가 발생 할 수 있음
앱의 UX를 최대한 흉내
HOW
   UI를 웹 서버에서 전송 받지 말것
   데이터는 무조건 json으로
   서버는 거들뿐
   데이터 저장도 가능한 로컬에서
   아예 데이터 송수신을 없앨 것
   백 버튼은 아예 넣는다
가변적
화면 해상도 지원은 필수
DESIGN
 가변적 화면 해상도는 필수
 하이브리드앱 프레임워크가 해상도를 자동으로
  대응해주지 않는다.
  툴도 지원하지 않는다.
  하나하나 대응해야 함
 결국 기획 단계부터 고려되어야 함
  하향평준화 기획
 크기 확대 전쟁이 끝나면 비율전쟁이 시작될지
  도…. (듀얼도…)
담백하게 만든다.
STRATEGY
• 담백하게 만든다.
• 다양한 폰을 지원하기 때문에 기능이 많으면 어려
  움
• 앱의 맥락에 맞추어 최대한 기능이 적은 것이 유리
  하다.
• 프레임워크가 지원해주는 건 기능적 일뿐
• 웹킷이라는 같은 엔진을 공유하더라도 결과는 다
  르다.
 – 너무 다르다. 사파리에서 된다고해도 실제 앱안의 웹뷰
   에서 동작은 약간씩 다르다.
 – 안드로이드에서 느려요, 너무 느려요
아악!!!
카메라!!!
PATTERN
 다른것은 대부분 문제가 없으나 카메라 질문이
  가장 많음
 function uploadPhoto(source)
 {
               navigator.camera.getPicture(onPhotoDataSuccess,
               onFail, {
                            quality: 25,
                            destinationType: destinationType.DATA_URL,
                            sourceType: source,
                            allowEdit: true
               });
 }

 function onPhotoDataSuccess(imageData)
 {
                 $.post(‘http://path/to/ajaxUpload’, {data:imageData},
                function(data) {
                                 alert(‘success’);
                });
 }
플랫폼별
런칭 계획을 세워야 함
PROCESS
 기획 > 디자인 > 프로토타이핑 > 개발 > QA >
  마켓 등록
 앱스토어는 7~10일의 등록 대기기간이 필요함
 티스토어도 일주일정도의 대기기간이 필요함
 안드로이드 마켓은 바로 등록 가능
  구글이 수시로 지운다곤 하나 test라는 앱도 많다.
스토어 등재의 험난한 길
AFTERWORD
 스토어 등재라는 난제
 화면 전체가 웹뷰로 된 앱의 경우 애플에서 리
  젝트 됨
  사유는 “수준 미달”, 두 번 리젝트
 일부 네이티브 기능을 포함하고서 등록되었음
 7일간의 등록 대기, 7일간의 대응, 다시 또 7일
  간 등록대기, 개발 완료 후 총 21일이 소요됨
 이후 첫 화면이라도 반드시 네이티브로 만든다.
하이브리드앱에 빠진 이야기는?
SECRET
 네이티브앱 개발 단가는 내려가고 있다.
 하이브리드앱으로 모든게 자동화 되진 않는다.
 하이브리드앱 프레임워크는 웹기술만으로 앱을
  만드는것은 아니다.
  작업하다보면 phonegap을 걷어내게된다.
  gap을 좁혀주기엔 아쉽다.
 사용자의 눈은 높아지고 있다.
 시장은 점점 더 커지고 있다.
  올해만 버틴다.
감사합니다.

       A/S @smle, 선릉역
   jinwook@skoopmedia.co.kr
         010-9599-4465

Contenu connexe

Tendances

하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례동수 장
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends욱래 김
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터Choulhyouc Lee
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복sung hwan Park
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조NAVER D2
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민NAVER D2
 
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발어플리케이션 및 웹 개발
어플리케이션 및 웹 개발Leonardo Taehwan Kim
 
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기위키북스
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1성일 한
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기Q-Young Lee
 
Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5성일 한
 
프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web Apps프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web AppsGihyo Joshua Jang
 
프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)Woncheol Lee
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍Lee Ji Eun
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012Daum DNA
 
Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1이경주 이경주
 

Tendances (20)

하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
Hybrid App
Hybrid AppHybrid App
Hybrid App
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
 
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
 
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
앱 인벤터 2: 비전공자를 위한 안드로이드 앱 만들기
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기
 
Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5
 
프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web Apps프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web Apps
 
프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
 
Overview
OverviewOverview
Overview
 
Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1Ionic2로 Type script+Angular2.0 따라하기 1
Ionic2로 Type script+Angular2.0 따라하기 1
 

En vedette

HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기정현 황
 
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
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복Mu-ik Jeon
 
Hybrid Mobile Application Framework
Hybrid Mobile Application FrameworkHybrid Mobile Application Framework
Hybrid Mobile Application Framework동수 장
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신NAVER D2
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
Requirement analysis for the production of educational hybrid web applications
Requirement analysis for the production of educational hybrid web applicationsRequirement analysis for the production of educational hybrid web applications
Requirement analysis for the production of educational hybrid web applicationsKwangChul Kim
 
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료Hannah Kim
 
안드로이드에서 spinner와 DB 연결 간단 예제
안드로이드에서 spinner와 DB 연결 간단 예제안드로이드에서 spinner와 DB 연결 간단 예제
안드로이드에서 spinner와 DB 연결 간단 예제운용 최
 
Native vs Hybrid vs Web
Native vs Hybrid vs WebNative vs Hybrid vs Web
Native vs Hybrid vs WebRuckit
 
NAVER D2 2014 돌아보기
NAVER D2 2014 돌아보기NAVER D2 2014 돌아보기
NAVER D2 2014 돌아보기NAVER D2
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용NAVER D2
 
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작Zany Lee
 
IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사
IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사
IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사Gina J Kim
 
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰Kyoungsoo Jeon
 
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행Kyoungsoo Jeon
 
생각정리를 위한 하이브리드 에버노트 (포스트잍편)
생각정리를 위한 하이브리드 에버노트 (포스트잍편) 생각정리를 위한 하이브리드 에버노트 (포스트잍편)
생각정리를 위한 하이브리드 에버노트 (포스트잍편) 경수 김
 
[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅NAVER D2
 

En vedette (20)

HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
 
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)
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
Hybrid Mobile Application Framework
Hybrid Mobile Application FrameworkHybrid Mobile Application Framework
Hybrid Mobile Application Framework
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
Requirement analysis for the production of educational hybrid web applications
Requirement analysis for the production of educational hybrid web applicationsRequirement analysis for the production of educational hybrid web applications
Requirement analysis for the production of educational hybrid web applications
 
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
 
안드로이드에서 spinner와 DB 연결 간단 예제
안드로이드에서 spinner와 DB 연결 간단 예제안드로이드에서 spinner와 DB 연결 간단 예제
안드로이드에서 spinner와 DB 연결 간단 예제
 
Native vs Hybrid vs Web
Native vs Hybrid vs WebNative vs Hybrid vs Web
Native vs Hybrid vs Web
 
NAVER D2 2014 돌아보기
NAVER D2 2014 돌아보기NAVER D2 2014 돌아보기
NAVER D2 2014 돌아보기
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
 
Mongo db 최범균
Mongo db 최범균Mongo db 최범균
Mongo db 최범균
 
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
 
IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사
IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사
IT비즈니스맨, 테크라이터의 에버노트 활용법 - 다음 김지현 이사
 
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 4.리뷰
 
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행
Outlook 과 OneNote로 스마트한 업무 시스템 만들기 - 2. 실행
 
생각정리를 위한 하이브리드 에버노트 (포스트잍편)
생각정리를 위한 하이브리드 에버노트 (포스트잍편) 생각정리를 위한 하이브리드 에버노트 (포스트잍편)
생각정리를 위한 하이브리드 에버노트 (포스트잍편)
 
[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅
 

Similaire à K모바일발표 120113 남들보다뛰어난앱만들기_공유용

K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용jinwook shin
 
2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나korea_simgoon
 
어흥~!이번발표
어흥~!이번발표어흥~!이번발표
어흥~!이번발표korea_simgoon
 
Webdevmobile 2011 01
Webdevmobile 2011 01Webdevmobile 2011 01
Webdevmobile 2011 01korea_simgoon
 
한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기Yunhwan Na
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)수보 김
 
실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기IMQA
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427Will Kim
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향ssuser0e53c8
 
경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 Young Eun Park
 
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
 
12-1 ignite(2)
12-1 ignite(2)12-1 ignite(2)
12-1 ignite(2)tikasy
 
PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]Seulgi Choi
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
개발생산성-개발자가 아닌 사람들을 위한 버전
개발생산성-개발자가 아닌 사람들을 위한 버전개발생산성-개발자가 아닌 사람들을 위한 버전
개발생산성-개발자가 아닌 사람들을 위한 버전UtilLab
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신Sungwoo Choo
 

Similaire à K모바일발표 120113 남들보다뛰어난앱만들기_공유용 (20)

K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용
 
2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나
 
어흥~!이번발표
어흥~!이번발표어흥~!이번발표
어흥~!이번발표
 
Webdevmobile 2011 01
Webdevmobile 2011 01Webdevmobile 2011 01
Webdevmobile 2011 01
 
한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 
실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기
 
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
 
Hybrid app and app store
Hybrid app and app storeHybrid app and app store
Hybrid app and app store
 
경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제
 
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...
 
12-1 ignite(2)
12-1 ignite(2)12-1 ignite(2)
12-1 ignite(2)
 
PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
개발생산성-개발자가 아닌 사람들을 위한 버전
개발생산성-개발자가 아닌 사람들을 위한 버전개발생산성-개발자가 아닌 사람들을 위한 버전
개발생산성-개발자가 아닌 사람들을 위한 버전
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
 

K모바일발표 120113 남들보다뛰어난앱만들기_공유용

  • 1. 남보다 뛰어난 하이브리드앱 만들기 ㈜스쿱미디어 신진욱 대표이사 jinwook@skoopmedia.co.kr 010-9599-4465 / @smle
  • 2. 강사소개 • 현 ㈜스쿱미디어 대표이사, 전 ㈜블링크팩토리 기술이사 • ㈜넥슨 데브캣 • 2002년 첫 창업 • 하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 신세계푸드 등등 • 아이폰 출시후 2년간 20여개의 대형 앱 개발 / 10여개의 소형 앱 개발 • 총 누적 다운로드 500만 이상 / 앱스토어 1위 3회
  • 3. 2012 하이브리드앱 2011 모바일 UI/UX 2010 모바일 비즈니스 2009 스마트폰의 시대가 온다
  • 4. 2012 하이브리드앱 - 만들어봤더니 만만치 않다. (또는 이제라도 만들자) 2011 모바일 UI/UX - 우리도 잘 만들어서 벌자 2010 모바일 비즈니스 - 외국은 이렇게 돈을 벌더라 2009 스마트폰의 시대가 온다 - 외국엔 아이폰이라는게 열풍
  • 5. 대상자 • 네이티브앱을 개발해봤으나 하이브리드앱으로 개발하면 좀 나은지 궁금한분 • 앱개발을 아직 해보지 않아서 뭘로 개발해야 할 지 고민하시는분 • 사내 웹개발자로 모바일앱 개발을 대응 할 수 있는지 궁금하신 분 • 또는 위와 같은 고민을 하는 상사분이 보내서 오신분
  • 7. 웹 기술만으론 앱을 만들 수 없다.
  • 8. 웹 기술만으론 앱을 만들 수 없다. 한번 판단해 봅시다.
  • 9. 10가지 키워드 WHAT HOW PATTERN FACT DESIGN PROCESS MEMBER STRATEGY AFTER SECRET
  • 11. INSIGHT  다양한 디바이스를 지원하는 웹 기반 애플리케 이션 프레임워크  왜 하이브리드일까  네이티브기술과 웹기술을 연결해준다.  웹기술만으로 만들기는 사실상 어렵다.  패키징에 대한 이슈가 해결된 프레임워크를 선 택할 것  네이티브로 만들것은 네이티브로 만들어야한다.
  • 12.  하이브리드는 두 개 이상의것이 합쳐져 서로 보완 하며 목표를 달성해야한다. – 국내엔 너무 웹기술에 포커스 되어있음  그럼 네이티브앱이란 – 운영체제와 하드웨어와 최대한 가깝게 전용툴을 사용하 여 실행파일을 만든앱 • 미리 해석해두었기 때문에 명령어들을 처리만 하면 됨 – 하이브리드앱 프레임워크 사이에는 웹브라우저와 자바 스크립트 해석기라는 레이어가 또 있습니다. • 해석 -> 분기 -> 처리
  • 13. 웹 기술을 이용할 뿐 앱을 만들 고 있다
  • 14. FACT  웹 기술을 이용할 뿐 앱을 만들고 있다.  특정페이지 UI전체를 웹 서버에서 호출해서는 안된다.  웹 앱의 장점이 사라짐  로컬에 HTML파일을 두고 데이터만 주고 받을 것  UI는 로컬, 데이터는 json으로 서버에서
  • 16. MEMBER  빠질수 없는 네이티브 앱 개발자  패키징에 대한 문제  하이브리드앱 프레임워크는 가교의 역할을 한 다.  웹 기술만으로 앱을 만든다는 뜻은 아니다.  하이브리드는 상호 보완이다.  애플 앱스토어 등록시 이슈가 발생 할 수 있음
  • 18. HOW  UI를 웹 서버에서 전송 받지 말것  데이터는 무조건 json으로  서버는 거들뿐  데이터 저장도 가능한 로컬에서  아예 데이터 송수신을 없앨 것  백 버튼은 아예 넣는다
  • 20. DESIGN  가변적 화면 해상도는 필수  하이브리드앱 프레임워크가 해상도를 자동으로 대응해주지 않는다.  툴도 지원하지 않는다.  하나하나 대응해야 함  결국 기획 단계부터 고려되어야 함  하향평준화 기획  크기 확대 전쟁이 끝나면 비율전쟁이 시작될지 도…. (듀얼도…)
  • 22. STRATEGY • 담백하게 만든다. • 다양한 폰을 지원하기 때문에 기능이 많으면 어려 움 • 앱의 맥락에 맞추어 최대한 기능이 적은 것이 유리 하다. • 프레임워크가 지원해주는 건 기능적 일뿐 • 웹킷이라는 같은 엔진을 공유하더라도 결과는 다 르다. – 너무 다르다. 사파리에서 된다고해도 실제 앱안의 웹뷰 에서 동작은 약간씩 다르다. – 안드로이드에서 느려요, 너무 느려요
  • 24. PATTERN  다른것은 대부분 문제가 없으나 카메라 질문이 가장 많음 function uploadPhoto(source) { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 25, destinationType: destinationType.DATA_URL, sourceType: source, allowEdit: true }); } function onPhotoDataSuccess(imageData) { $.post(‘http://path/to/ajaxUpload’, {data:imageData}, function(data) { alert(‘success’); }); }
  • 26. PROCESS  기획 > 디자인 > 프로토타이핑 > 개발 > QA > 마켓 등록  앱스토어는 7~10일의 등록 대기기간이 필요함  티스토어도 일주일정도의 대기기간이 필요함  안드로이드 마켓은 바로 등록 가능  구글이 수시로 지운다곤 하나 test라는 앱도 많다.
  • 28. AFTERWORD  스토어 등재라는 난제  화면 전체가 웹뷰로 된 앱의 경우 애플에서 리 젝트 됨  사유는 “수준 미달”, 두 번 리젝트  일부 네이티브 기능을 포함하고서 등록되었음  7일간의 등록 대기, 7일간의 대응, 다시 또 7일 간 등록대기, 개발 완료 후 총 21일이 소요됨  이후 첫 화면이라도 반드시 네이티브로 만든다.
  • 30. SECRET  네이티브앱 개발 단가는 내려가고 있다.  하이브리드앱으로 모든게 자동화 되진 않는다.  하이브리드앱 프레임워크는 웹기술만으로 앱을 만드는것은 아니다.  작업하다보면 phonegap을 걷어내게된다.  gap을 좁혀주기엔 아쉽다.  사용자의 눈은 높아지고 있다.  시장은 점점 더 커지고 있다.  올해만 버틴다.
  • 31. 감사합니다. A/S @smle, 선릉역 jinwook@skoopmedia.co.kr 010-9599-4465